Transcript Html-2
Hazırlayan:Emin BORADNAĞ
Html
Web sayfası <html> etiketi ile başlar ve </html> ile biter. İki bölümden oluşur.
<head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda
bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada
görüntülenmez.
Örneğin; <meta http-equiv="Content-Type" content="text/html; charset=iso8859-9"> koduyla sayfasının karakter kodlamasının hangi dil ile olacağını
belirtmiş oluruz. (“iso-8859-9” ve “windows-1254” sayfanın Türkçe karakterlerle
görüntüleneceğini belirtir.)
<title>…</title> etiketi de web tarayıcısının başlık çubuğunda görüntülenecek
metni belirler.
<meta name="author" content="Hazırlayan"> Sayfayı hazırlayan veya sahibi olan
kişi veya kuruluşu belirtir.
<body>…</body>: Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin
bulunduğu bölümdür.
Html temel içerik
Basit bir web sayfasının görünümü şöyledir:
<html>
<head>
…. (Sayfayı tanımlayan kodlar.)
</head>
<body>
… (Sayfanın içeriği: metin, resim vb.)
</body>
</html>
HTML HyperText Markup Language kelimelerinin ilk harflerinden
oluşur. Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML
de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir.
Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve
görüntü oluşturulur. Etiketlerin yapısı şöyledir:
<etiket
özellik1(Parametre1)=
"değer"
özellik2="değer"
özellik3="değer">… </etiket>
Etiketler genelde <etiket …> şeklinde açılıp </etiket> şeklinde
kapatılır. Ancak kapatılmayan etiketler de vardır. Etiketleri bir
örnekle açıklayacak olursak:
<otomobil marka="tofaş" model="dogan" uretim_tarihi="2003"
renk="beyaz">
Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir
otomobil istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak:
< font face="verdana" size="4" color="red" align="center">Paragrafın
içerdiği metin</font>
Bu kodlarla da şunu demiş oluruz: “Yazacağım metnin yazıtipi verdana
, boyutu 4, rengi kırmızı olsun ve ortaya hizalansın.”
Başlıca HTML etiketleri
Metin Etiketleri
1
b
Metni kalın yapar.
2
i
Metni italik yapar.
3
strike
Metni üstü çizili yapar.
4
u
Metni altı çizili yapar.
5
strong
Metni kalın yapar.
font
Aldığı face, size, color vb. parametrelerle
metnin yazıtipi, boyut, renk gibi özelliklerini
belirler.
7
sub
Metni alt simge olarak gösterir.
8
sup
Metni üst simge olarak gösterir.
6
Blok Etiketleri
9
blockquote
10 center
11
Metni ortalar.
div
Sayfa içinde ayrı bir katman oluşturur.
span
Div etiketi gibidir. Ancak div ile oluşturulan katman
metni satır olarak alır, span ile ise metin kelime
bazında da bölümlere ayrılabilir.
12
13 p
h1, h2, h3…
14
Metnin sol girintisini artırır.
Paragraf oluşturur.
Başlık oluşturur.
Liste Etiketleri
ol
Numaralandırma oluşturur. Bu
numaralandırmanın, type
parametresini kullanarak A, a, I,
i biçimlerinde olması
sağlayabiliriz.
ul
Madde işaretleri oluşturur.
li
Liste öğelerini belirtir.
15
16
17
Tablo Etiketleri
18
19
20
21
table
Tablo oluşturur.
tr
Tabloya satır ekler.
td
Tabloya hücre ekler.
th
Tabloya başlık metni içerecek hücre
ekler.
Form Etiketleri
22 form
Sayfaya form ekler.
Type parametresine göre tek satırlık
23
metin kutusu, buton, onay kutusu
vs. oluşturur.
textarea Birden çok satır yazılabilen metin
24
kutusu oluşturur.
Açılır form alanı oluşturur.
25 select
input
option
26
Select etiketi ile oluşturulan açılır
form alanında seçenekleri belirtir.
Çeşitli Etiketler
27
html
Web sayfasının bütününü içine alır. İki bölümden oluşur:
head ve body.
head
Sayfanın dil kodlaması, başlığı gibi özelliklerini
belirleyen etiketleri içerir. Burada yazılanlar sayfada
görüntülenmez.
body
Web sayfasının görüntülenen içeriğinin bulunduğu
bölümdür.
28
29
30
a
Başka bir dosyaya link (Köprü) oluşturur.
31
br
Boş bir satır oluşturur
32
hr
Yatay çizgi oluşturur.
33
34
35
36
script
Sayfaya Javascript vb. web programlama dilleri ile yazılan
script’leri ekler.
style
Sayfaya Cascading Style Sheet komutlarını ekler
title
Web tarayıcısının başlık çubuğunda görüntülenecek olan
sayfa başlığını belirtir.
img
Sayfaya resim ekler.
Yukarıdaki listeyi
oluşturmak için
aşağıdaki kodlar
yazılmalıdır.
Yukarıdaki kodlarda <ol> sıralı, <ul> sırasız bir liste
oluşturulacağını belirtir. “type” parametresi ise
oluşturulacak listedeki liste belirtecinin ne olacağını (a,
A, i, I, kare, içi dolu daire, içi boş daire vb.) belirler. <li>
listeye öğeler ekler.)
Bir haftalık ders programı hazırlayacağımızı varsayalım.
Tablomuzda 6 sütun ve 7 satır bulunmaktadır.
Sırasıyla şunlar yapılmalıdır:
<table> yazarak bir tablo oluşturulacağı belirtilir.
<tr> ile birinci satır oluşturulur.
<td> ile birinci hücre oluşturulur ve </td> ile kapatılır.
Yukarıdaki tabloya bakarsak her satırda altı hücre
olduğu görülür. Bu nedenle yine aynı şekilde diğer 5
hücre oluşturulur. (Tablonun doğru görüntülenebilmesi
için hücreler boş bırakılacak olsa bile boşlukla
doldurulmalıdır. Boşluğun karşılığı ise “ ” dir.)
Birinci satır bittiğinden </tr> ile kapatılır. Bu durumda
görünüm şöyle olur:
• 2, 3 ve 4. maddedekiler altı defa tekrarlanarak diğer
satırlar oluşturulur.
• Tablo </table> ile kapatılır.
• Artık içlerini doldurabiliriz. İlk satırın 2-6 arası
hücrelere günleri yazabiliriz. 2-7 arası satırların ilk
hücrelerine de sayıları yazalım.
• Görünümün yukarıdaki örnek gibi olması için tablonun
özellikleri üzerinde değişiklik yapmamız gerekir. <table
border="1" bordercolor="black" cellspacing="0"
cellpadding="0" width="500"> diyerek tabloya siyah
renkli kenar çizgisi verelim. Hücre çizgileri arasındaki
boşluk 0, hücre ile içindeki nesneler arasındaki boşluk
da 1 olsun. Genişliğini de 500 piksel olarak belirtelim.
• Hücreler için genişlik belirtmediğimizden sütunların
genişlikleri farklı görünecektir. “Width” etiketiyle
hücrelere uygun genişlikleri verdiğimizde istediğimiz
görüntüye ulaşabiliriz.
• "images" klasörü içerisinde resim1.jpg adlı dosyayı
sayfamıza eklemek istediğimizi varsayalım. Bunun için
aşağıdaki kod yazılmalıdır:
• <img src="images/resim1.jpg" width="200"
height="150" hspace="10" vspace="10" border="2"
align="left">
• (Yukarıdaki kodda “src” klasörün adresini, “width”
genişliğini, “height” yüksekliğini, “hspace” resim ile
çevresindeki nesneler arasında bırakılacak yatay
boşluğu, “vspace” resim ile çevresindeki nesneler
arasında bırakılacak dikey boşluğu, “border” resme
verilecek kenar çizgisinin kalınlığını, “align” resmin
sayfada hizalanacağı konumu belirtmektedir.)
Çerçeve Oluşturma
Yukarıdaki görüntüyü
oluşturmak için aşağıdaki
kodlar kullanılmalıdır:
CSS kullanım şekilleri
•
•
•
•
Style komutlarını üç yerde tutabiliriz:
Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına
bağlantı kurulur. (<link type="text/css" rel="stylesheet"
href="style_dosyasi.css"> gibi)
CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek:
<html>
<head>
<style>
P {font-family:arial; font-size:12px;}
</style>
</head>
....
CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:
<p style="font-family:arial; font-size:12px;font-color:black;">...</p>
• Style komutları sadece bir yerde kullanılacaksa
doğrudan etiket içinde kullanılması uygun olur. Ancak
pek çok yerde aynı style özellikleri kullanılacaksa,
tekrardan kaçınmak için şu metodlar kullanılabilir.
• Sınıf (class) tanımlanabilir: Style dosyasında etiket
isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri
arasına style komutları yazılır.
span.vurgulu {color:red; background-color:yellow;}
Sayfa içinde kullanımı da aşağıdaki gibi olur:
<p>Cümlede <span class="vurgulu">burası</span> çok
önemli.</p>
Görünüm aşağıdaki gibi olur.
• id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine #
kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez.
#vurgulu {color:red; background-color:yellow;}
<p>Cümlede <span id="vurgulu">burası</span> çok
önemli.</p>
• Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak
id ve class kullanmadan doğrudan etiketi yazabiliriz.
b {font-family: arial; font-size: 9pt; font-weight: bold;
color: blue;}
Bu durumda bütün <b></b> etiketi içerisindeki
metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi
mavi olacaktır.
AÇIKLAMA:
Burada:
• Position: Katmanın yerinin neye göre belirleneceğini (absolute,
pencere esas alınarak belirlensin),
• Top: Pencereye göre kaç piksel aşağıda olacağını,
• Left: Pencereye göre kaç piksel solda olacağını,
• Width: Katmanın genişliğini,
• Height: Katmanın yüksekliğini,
• Background-color: Arkaplan rengini,
• Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın,
gösterilmesin),
• Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana
1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir),
• Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında
bırakılacak boşluğu,
• Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini
belirtmektedir.
AÇIKLAMA:
• "list-style-image" parametresi listeye HTML ile veremeyeceğimiz
bir özellik kazandırmakta ve liste simgesi olarak bir resmi
kullanmamızı sağlamaktadır. "list-style" parametresi için
verilebilecek alternatif değerler ise şunlardır:
• disc (Liste biçiminin disk (içi dolu daire) şeklinde olmasını
sağlar.)
• circle (Liste biçiminin çember şeklinde olmasını sağlar.)
• square (Liste biçiminin kare olmasını sağlar.)
• decimal (Liste biçiminin rakamlardan oluşmasını sağlar.)
• lower-roman (Liste biçiminin i,ii,iii gibi küçük roma
rakamlarından oluşmasını sağlar.)
• upper-roman (Liste biçiminin I,II,II gibi büyük roma
rakamlarından oluşmasını sağlar.)
• lower-alpha (Liste biçiminin a,b,c şeklinde küçük harf olmasını
sağlar.)
• upper-alpha (Liste biçiminin A,B,C şeklinde büyük harf olmasını
sağlar.)
• none (Listenin simgesiz olmasını sağlar.)
WEB PROGRAMLAMA DİLLERİ
• İnternette yaygın olarak kullanılan iki dil vardır. Javascript
ve VBScript.
• Bunların kullanım alanları da ikiye ayrılabilir: İstemci
üzerinde veya sunucu üzerinde çalışmaları.
• İstemci üzerinde çalıştığında kodlar genelde sayfanın
<head> bölümüne <script></script> etiketleri içine yazılır.
• Sunucu üzerinde çalışmaları ise ASP veya PHP ile olabilir.
Örneğin ASP de script kodları <% … %> işaretleri arasına
yazılır ve sunucu tarafında çalışarak sonucu sayfa üzerinde
istemciye ulaştırır.
• Son yıllarda ise Aspnin yerini Aspx almıştır.
Web tasarım programları görsel ve kod tabanlı
olarak ayrılabilir.
GÖRSEL:
WYSIWYG (What you see is what you get / Ne
görürseniz onu alırsınız) olarak nitelendirilen bu
tür programlarda kullanıcı kendisi HTML kodu
yazmaz, sayfa web browser’daki gibi görüntülenir
Kullanıcılar Word’de yazı yazar gibi sayfayı
oluştururlar, HTML kodları program tarafından
oluşturulur. Bu tür programlara Microsoft
Frontpage, Macromedia Dreamweaver vs. örnek
verilebilir. (Bu programlar çoğu zaman kod
tabanlı programların yeteneklerine de sahip
olabilir.)
FrontPage
Dreamweaver
KOD TABANLI:
Kullanıcının kod yazarak sayfayı oluşturduğu programlardır.
Macromedia HomeSite, HotDog Pro vb. Bu tür programlar genelde PHP,
ASP, VBScript gibi dilleri otomatik tanırlar ve kod tamamlamayı önerme
özelliklerine sahiptirler.
Hotdog Professional
Homesite
HTML Son Örnekler
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-
align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
7/16/2015
JavaScript
</td>
<td style="backgroundcolor:#eeeeee;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;textalign:center;">
Copyright Maltepe Üni </td>
</tr>
</table>
</body>
</html>
30
HTML Son Örnekler
7/16/2015
31
Yararlı Bazı Karakterlerin HTML ile Oluşumu
7/16/2015
32
HTML İleriki Kodularda
Dosya ekleme (Waw,flw,swf)
CSS,XHTML,DHtml
XML
Server Üzerine Kurulum Dosya gönderimi(File
Zilla,CuteFtp)
7/16/2015
33
Kaynaklar
• Macromedia Dreamweaver MX 2004,
Khristine Annwn Page, Medyasoft, 2006.
• http://www.dreamweaver.gen.tr/