İsterseniz, HTML hakkında ayrıntılı birşeyler öğrenmeden önce ilk web sayfamızı hazırlayalım ve mutlu olalım!
Bir HTML belgesi hazırlamak için özel bir programa ihtiyaç duymazsınız. Sıradan bir düz metin editörü işinizi görür. Düz metin editörü ile oluşturulan dosyaların, diske kaydedilirken, hiçbir değişime uğramadan, bilgisayar diline vs. çevrilmeden olduğu gibi kaydedildiğini hatırlayalım.
Bu durumda, Windows kullanıcıları içn NotDefteri, Macintosh ortamında çalışanlar için ise SimpleText yeterlidir.
Şimdi ilk sayfamızı hazırlamaya başlayalım; bir metin editörünü açın ve yazmaya başlayın.
<html>
<head>
<title>Merhaba dünya!</title>
</head>
<body>
<p>Merhaba Dünya!</p>
</body>
</html>
İşte ilk sayfamızın kodları bunlar… Tam anlamıyla bir web belgesi olmasa da, herhangi bir tarayıcıda görünmesi için gereken tüm temel etiketleri içeriyor. Şimdi dosyanızı “merhaba.htm” adıyla kaydedin ve adını çift tıklayarak tarayıcınızda açın. İlk sayfanızı oluşturmuş oldunuz.
<a> Bağ, Link
Web üzerinde herhangi bir belgeye, grafiğe, ya da başka bir dosyaya, kullanıldığı sayfadan bağlantı sağlamaya yarar. Bağlantıyı bir metne verebileceğiniz gibi, bir grafiğe, hatta grafiğin belirli bir bölümüne de verebilirsiniz.
Bağlı Özellikler
href=”url”
href attribute’undan ve ‘eşittir’ işaretinden sonra, çift tırnak içinde yazacağınız adrese, belgeye ya da dosyaya bağlantı sağlar.
name=”metin”
name ile atayacağınız bir isme, belgenin başka bir satırından, başka bir belgeden ya da başka bir web’den bağlantı verebilirsiniz. Örneğin, bu sayfada, etiket bölümlerinin sonundaki “Başa Dön” bağlantısı, sayfanın ilk cümlesine önceden verilen bir name değişkenine bağlıdır. Tıkladığınızda, o cümle görüntülenir, yani sayfanın baş kısmına dönmüş olursunuz.
rel=”metin”
Verdiğiniz bağlantının türünü belirtmeye yarar.
type=”metin”
Verdiğiniz bağlantının dosya türünü belirtir.
target=”hedef_çerçeve”
Bağlantı verilen sayfanın hangi çerçevede gösterileceğini bildirir.
Örnekler
<a href="http://www.muratolmez.com" type="text/html" target=" _
mainframe">HTML Rehberi</a>
<a name="bastaraf">Burası Sayfanın Başlangıcı</a>
<a href="#bastaraf">Sayfanın Başlangıcına Gitmek İçin Tıklayın</a>
<a href="http://www.sony.com"><img src="images/sony.jpg"></a>
<abbr> Kısaltma
Metin içinde vereceğiniz bir kısaltmanın üzerine gelindiğinde, açık halini görüntüler.
Bağlı Özellikler
title=”metin”
Title özeliğine vereceğiniz metin, kısaltmanın açılımı olarak görüntülenir.
Örnek
<abbr title="Türkiye Büyük Millet Meclisi">T.B.M.M.</abbr>
<acronym> Kısaltmalar
Bu etiket <abbr> ile aynı biçimde, title= özelliğine atayacağınız metni, kısaltmasının üzerine gelindiğinde tooltip olarak görüntüler. (Araç Çubuklarının ipuçları gibi)
Bağlı Özellikler
title=”metin”
Title özeliğine vereceğiniz metin, kısaltmanın açılımı olarak görüntülenir.
Örnek
<acronym title="Amerika Birleşik Devletleri">A.B.D.</acronym>
Fare imlecinizi, buradaki A.B.D. yazısının üzerine getirip biraz bekletin.
<adress> Adres
adress etiketi, bir belgenin tamamı ya da bir kısmı için “adres bilgisi” sağlar. Belge sahibinin adresini bildirmede kullanılabilir. Bu etiketin özelliği, browser’ larda içeriğinin farklı biçimde görüntülenmesidir.
Örnekler
<ADDRESS>Bu sayfaya <a href="http://www.muratolmez.com;_
HTML Rehberi</a> adresinden ulaşabilirsiniz.
</ADDRESS>
<ADDRESS>
Siteyle ilgili görüş ve önerilerinizi <a href="mailto:htmlrehberi _
@ixir.com">htmlrehberi@ixir.com</a> adresine e-postayla _
bildirebilirsiniz.
</ADDRESS>
<applet> Java Applet
Artık pek kullanılmayan bu etiket yerine, Embedded (Gömülü) Java Appletleri için daha çok <object> etiketi kullanılır. Belge içine gömülü Java Applet kodlarının başlangıcını belirtir.
<area> Grafik Map Bölgesi
Sayfalarda kullandığımız grafiklere bağlantı atayabiliriz. Ayrıca bir grafik nesnesinin tamamı yerine bizim belirlediğimiz bir kısmı için, hatta aynı grafik nesnesinin birden çok bölgesi için birden fazla link sağlayabiliriz. Bu işi de <area> etiketi yapar. Bu etiket <map> etiketi ile birlikte kullanılır.
Bağlı Özellikler
href=”URI”
Belirlenen grafik alanının bağlantı sağlayacağı URI.
shape=”metin”
Bağlantı sağlanacak grafik alanının şekli. rect=dört köşeli, circle=yuvarlak, poly=çok köşeli ve default değerlerini alabilir.
coords=”metin”
shape ile belirlenen şeklin grafik üzerindeki koordinatlarını verir.
Örnekler
<p><map name="map1">
<area href="http://www.muratolmez.com" shape="rect" _
coords="40, 40, 150, 150"></map><img border="0" src=_
"images/001.jpg" usemap="#map1"></p>
<b> Koyu Metin
Başlangıç ve bitiş etiketleri arasında kalan metni koyu gösterir.
Örnek
<p>Metni <b>koyu</b> gösterir.</p>
<base> Belge Temel URI’si
Belgenin temel URI’sini bildirir. Belgedeki göreceli URI’lerle birlikte tam bir web adresi oluşturur. Belgede yalnız bir tane base elemanı kullanılabilir ve belgenin <head> kısmında yer alır.
Birçok web sayfası bu elemana ihtiyaç duymaz. Eğer linkler içeren bir sayfa, örnek olarak başka bir web’de yayınlanıyorsa, içerdiği linklerin çalışması için base elemanı gerekir. Ayrıca, bir web sayfasını –örneğin e-mail ile– birine gönderdiğinizde, içeriğindeki linklerin çalışması için yine bu elemana gerek duyulur.
Bağlı Özellikler
href=”URI”
Belgenin temel URI’si.
target=”metin”
Hedef çerçevenin adı.
Örnek
<base href="http://www.galatasaray.org" target="mainframe">
<basefont> Temel Font
Belgede bir temel font belirlenmesine yarayan bu etiket, CSS kullanılmaya başlandığı için artık kullanılmamaktadır.
<bdo> BiDi Override
Yazılan metnin, yazılış yönünü belirler. Örneğin Türkçe bir sayfada sözcükler soldan sağa yazılır oysa İbranice’de sağdan sola doğru yazılır.
Bağlı Özellikler
dir=”ltr” veya “rtl”
Metnin yazılış yönünü bildirir. rtl right-to-left (sağdan sola), ltr left-to-right (soldan sağa)
Örnekler
Aşağıdaki paragrafları bir web belgesinde deneyin.
<p><bdo dir="rtl">Bu yazı ters yazıldı</bdo></p>
<p><bdo dir="ltr">Bu yazı düz yazıldı</bdo></p>
<big> Büyük Metin
Halen kullanılan ama eskimeye yüz tutmuş, yerine Style Sheet önerilen bir etikettir. Başlangıç ve bitiş etiketleri arasında kalan metni normalden bir kat büyük gösterir. İki kez kullanılırsa, iki kat büyük gösterir.
Örnekler
<p>Yazımız daha <big>büyük</big> olsun istiyorsak bu etiketi _
kullanmamız gerekir.</p>
<p>Yazımız daha da <big><big>büyük</big></big> olsun istiyorsak _
bu etiketi iki kere kullanmamız gerekir.</p>
<blockquote> Block quotation (Alıntı Metin)
Alıntı paragraflar, normal paragrafa göre daha içerden yazılır. Bu etiketin görevi bu etkiyi sağlamaktır. Ancak, kullanışlı bir etiket olduğu için, alıntı olmayan bölümlerde de margin ayarlaması için kullanılabilir. Ancak bu tip ayarlamalar için CSS kullanmak daha uygundur.
Örnek
<blockquote>
<p>Yeni tip PIII işlemciler 0.18 mikron teknolojisi _
ile üretilmektedir.</p>
</blockquote>
Bu örnek paragrafı belgeye eklediğinizde, aşağıdaki görünümü alırsınız.
Yeni tip PIII işlemciler 0.18 mikron teknolojisi ile üretilmektedir.
<body> Belge Gövdesi
Bir web belgesinin, içeriği en geniş olan etiketidir. Browser penceresinde web sayfanıza ait görüntülenen ne varsa, tümü <body> ve </body> etiketleri arasında yer alır. Yani belgenizin gövdesini bu etiket belirler.
Bağlı Özellikleri
background=”URI”
Belgenin artalanında görüntülenecek grafik dosyasının yolu ve adı.
bgcolor=”color”
Belgenin artalan rengini belirten renk kodu ya da renk adı.
text=”color”
Belgenin içeriğindeki metnin renk kodu.
link=”color”
Bildiğiniz gibi, eğer ayarlarla oynamadıysanız, bir web sayfasında verilen bağlantı metinleri mavi renkte gösteriliyor. Bu özellikle belgede verilen linklere ait metinlerin renklerini siz belirlersiniz.
alink=”color”
Bu özellik, o anda aktif olan bağlantı içeren metnin rengini belirlemenizi sağlar.
vlink=”color”
Daha önce ziyaret edilen linkleri belirten metinlerin rengi değişir. Bu özellikle bu rengi de siz belirleyebilirsiniz.
onload=”script”
Belge yüklendiğinde çalıştırılmak istenen bir script varsa, bu özellikle belirtilir.
onunload=”script”
Ziyaretçi aktif sayfadan başka sayfaya gitmek üzere hareketini gerçekleştirdiğinde çalışması istenen script bu özellikle belirtilir.
Örnekler
Bu etiket için verilecek örnek, aslında birçok etiketi kapsar, “ilk web sayfamızı oluşturalım” kısmına bakabilirsiniz.
<br> Satır Kesme
Bir belgede, oluşturulan metinler, paragraflar halinde yer alır. Paragrafları da <p> etiketi ile belirtilir. Her paragraf arasında da bir satırlık bir boşluk olur. Yeni bir paragraf oluşturmadan, yazılan metnin bir alt satırda olması isteniyorsa; yani bir paragraf içinde satır tamamlanmadan, yazılan bir metnin bir alt satırda görünmesi isteniyorsa, alt satıra bölünmesi istenen ilk sözcüğün başına
etiketi konulabilir. Kısacası, bu etiket “satır kesme” işi görür. Bu etiketin sonlandırıcısı yoktur.
Örnek
Aşağıdaki kodu bir sayfa oluşturarak deneyin. Alttakine benzer bir görüntü elde etmelisiniz.
<p>Bu satırın sonu gelmeden<br>metinleri<br>alt satıra<br>geçirelim.</p>
Bu satırın sonu gelmeden
metinleri
alt satıra
geçirelim.
<button> Buton, Düğme
Günümüzde web sayfalarında çeşitli formlar ve butonlar görmemek neredeyse imkansız. Bir formda istenen bilgileri doldurup “GÖNDER” butonunu tıklıyorsunuz, bilgileriniz gitmesi gereken yere gidiyor. İşte bu formların (genellikle) altlarında yer alan butonlar (düğmeler) bu etiket ile oluşturulur.
Bağlı Özellikler
name=”metin”
Butona vereceğiniz ismi belirler. Buradaki isim, butonun üzerinde görüntülenen isim değil, butonla ilgili yapılan işlemlerde kullanılan isimdir.
value=”metin”
Butonun ilk değerini belirtir.
type=”reset” / “submit”
Butonun tipini belirler.
disabled
Butonun belirli bir olay gerçekleşmeden aktive olmaması gerekiyorsa, ya da belirli bir işlem gerçekleştikten sonra aktif olmaması gerekiyorsa eklenecek özelliktir.
accesskey=”karakter”
Butonun kısayol tuşunu belirler.
Örnekler
Aşağıdaki kodları, yeni bir html belgesi oluşturarak body kısmına girin, elde edeceğiniz düğmelerin görüntüleri aşağıdaki gibi olmalıdır.
<button type="reset" name="button1" value= _
"Button">Button</button>
<caption> Tablo Açıklama Yazısı
Oluşturulan bir tabloya ait kısa bir tanım içerir. Bu tanım tablonun üstünde bir başlık halinde yer alır.
Örnekler
Aşağıdaki kodlarla basit bir tablo oluşturalım ve <caption> etiketini kullanalım. Ortaya çıkacak tablonun aynısını kodların altında görebilirsiniz. <caption> etiketi ile bildirilen metnin nerede olduğuna dikkat edin. Örneğimizde kullanılan kodlardan bilmediğiniz varsa, onların ne işe yaradıklarını da kendi bölümlerinden öğrenin.
<table width="300" border="1">
<caption>Web Sayfalarında Renkler ve Kodları</caption>
<thead>
<tr>
<td>Renk</td>
<td>Kodu</td>
</tr>
</thead>
<tbody>
<tr>
<td>Kırmızı</td>
<td>#FF0000</td>
</tr>
<tr>
<td>Mavi</td>
<td>#0000FF</td>
</tr>
</tbody>
</table>
| Web Sayfalarında Renkler ve Kodları | |
| Renk | Kodu |
| Kırmızı | #FF0000 |
| Mavi | #0000FF |
<center> Ortalanmış Metin
Görevi, başlangıç ve bitiş etiketleri arasında kalan metni bulunduğu yerin ortasına hizalamaktır. Bu bulunulan yer, bir tablo hücresi de olabilir, sayfanın tamamı da olabilir. Bu kodlar arasında kalan metin yatay olarak ortalanmış olarak görüntülenir.
Örnek
<p>center etiketi ile yazacağınız metin,<center>sayfanın ortasına _
</center> hizalanır.</p>
Center etiketi ile yazacağınız metin, sayfanın ortasına hizalanır.
<cite> Başvuru, Kaynak Gösterimi
Metinde geçen bir başvuru kaynağını, bir belgeye, kaynağa başvuruyu içerir.
Örnek
<p>En iyi bilgi kaynaklarından biri olan <cite>Ana Britannica
Ansiklopedisi</cite> artık bilgisayarlarımızda...</p>
<code> Bilgisayar Kodları
Sayfanızda, bilgisayar kodları, ya da benzeri bir metin yayınlıyorsanız, bu kod ile onları olduğu gibi görüntüleyebilirsiniz. <pre> ya da <tt> etiketleri gibi, bu etiket de içeriğinin yazıtipi olarak normal paragraf metinlerinden farklı biçimde görüntülenmesini sağlar.
Örnek
<p>Bu işlemi yaptırmak için gereken kodlar ise;
<cite>
if k= 10 then<br>
Showmsg='Yeterli puana sahipsiniz.';<br>
else<br>
Showmsg='Puanınız yetersiz.';<br>
</cite>
</p>
Elde edeceğiniz görüntü,
şöyle olmalıdır;
if k= 10 then
Showmsg=’Yeterli puana
sahipsiniz.’;
else
Showmsg=’Puanınız
yetersiz.’;
<col> Tablo Sütunu
Bir tablonun herhangi bir sütunu için ayrı attribute’ler tanımlamayı, ayrı biçimlendirmeler yapmayı sağlar. Bir kolonun tüm hücrelerine hitap edecek kodları taşıyabilir. Bir tabloda kullanımı isteğe bağlı olan bu etiket, eğer kullanıldıysa, <caption> etiketinden sonra, <thead> etiketinden önce kullanılmalıdır.
Bağlı Özellikler
span=”sayı”
Sütun özelliklerinin kapsadığı sütun sayısı (Bu özellik, sütunları birleştirmez)
width=”sayı”
Sütunun genişliğinin yüzde ya da piksel olarak belirtilmesini sağlar.
align=”metin”
Sütundaki içeriğin hizalanacağı parametreyi verir. (center, left veya right gibi)
valign=”metin”
Kolonun kapsadığı hücrelerdeki içeriğin dikey hizalamasını bildirir. (center, left veya right gibi)
Bu özellikle ilgili örnek için <colgroup> etiketine bakabilirsiniz.
<colgroup> Tablo Sütun Grubu
Eğer tablonuzdaki her sütuna <col> etiketi ile biçimlendirme vermek isterseniz, her sütun için bu etiketi tekrar tekrar yazmanız gerekecektir. <colgroup> etiketi ile bu işlemleri tek etiketle halledebilirsiniz. Bu etiketi de <caption> etiketi ile <thead> etiketleri arasında kullamalısınız.
Bağlı Özellikler
span=”sayı”
Sütun grubunun kapsadığı sütun sayısını belirtir.
width=”sayı”
Sütun grubundaki her bir sütunun genişliği.
align=”metin”
Sütun grubundaki sütunların kapsadığı hücrelerin içeriklerinin hizalanmasını sağlar.
valign=”metin”
Sütun grubuna dahil sütunların kapsadığı hücrelerdeki içeriğin dikey hizalama yönünü belirtir.
Örnek
Aşağıda bir tablo için hazırlanan kodlar ve bu kodların browser’da görünümü yer alıyor. Örneğimizde, tablomuz 7 sütun içeriyor. Bu 7 sütundan 1. için ayrı, 2, 3 ve 4.ler için ayrı, 5, 6 ve 7.ler için ayrı tanımlamaları tek etiketle yaptık. 1. sütundaki yer alan içerikler sağa hizalanacak ve sütun genişliği 100 piksel olacak, 2, 3 ve 4. sütunların genişliği 70 piksel olacak ve içerik ortaya hizalanacak , son üç sütunun genişlikleri ise 80 piksel olacak ve içerikleri sola hizalanacak.
<table border="1">
<COLGROUP align="right" width="100">
<COLGROUP SPAN=3 align="center" width="70">
<COLGROUP SPAN=3 align="left" width="80">
<THEAD>
<TR>
<TH SCOPE=col ROWSPAN=2>Başlık 1</TH>
<TH SCOPE=col ROWSPAN=2>Başlık 2</TH>
<TH SCOPE=col ROWSPAN=2>Başlık 3</TH>
<TH SCOPE=col ROWSPAN=2>Başlık 4</TH>
<TH SCOPE=colgroup COLSPAN=3>Diğer Başlık</TH>
</TR>
<TR>
<TH SCOPE=col>Hücre 1</TH>
<TH SCOPE=col>Hücre 2</TH>
<TH SCOPE=col>Hücre 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD SCOPE=row>Veri 1</TD>
<TD>Veri 2</TD>
<TD>Veri 3</TD>
<TD>Veri 4</TD>
<TD>Veri 5</TD>
<TD>Veri 6</TD>
<TD>Veri 7</TD>
</TR>
</TBODY>
</TABLE>
| Başlık 1 | Başlık 2 | Başlık 3 | Başlık 4 | Diğer Başlık | ||
| Hücre 1 | Hücre 2 | Hücre 3 | ||||
| Veri 1 | Veri 2 | Veri 3 | Veri 4 | Veri 5 | Veri 6 | Veri 7 |
<dd> Tanımlı Gövde Metni
<dd> etiketi, <dl> ve <dt> etiketleri ile birlikte kullanılır. Tanımlı bir listede, başlıktan sonraki tanımlama metnini içerir. Tanımlı liste <dl> etiketi ile başlar, </dl> ile biter. Her madde için tanımlı başlık oluşturulması <dt> etiketi ile yapılır, tanımın içeriği bu etiket ile yazılır. <dt> ve <dd> etiketlerinin sonlandırıcıları yoktur.
Örnek
<dl>
<dt>HTML
<dd>HyperText Markup Language sözcüklerinin baş harflerinden oluşur. _
Web sayfalarını oluşturan script diline verilen addır.
<dt>HTTP
<dd>HyperText Transfer Protocol sözcüklerinin baş harflerinden oluşur. _
Web sayfalarının değişik bilgisayarlardaki değişik işletim sistemi _
platformlarında aynı biçimde iletilmesine imkan veren protokolün adıdır.
<dt>FTP
<dd>File Transfer Protocol sözcüklerinin baş harflerinden oluşur. Internet _
ağı üzerinde bilgisayarlar arası dosya aktarım kurallarını içeren protokoldür.
</dl>
Örneğimiz aşağıdaki gibi görünür.
HTML
HyperText Markup Language sözcüklerinin baş harflerinden oluşur. Web sayfalarını oluşturan script diline verilen addır.
HTTP
HyperText Transfer Protocol sözcüklerinin baş harflerinden oluşur. Web sayfalarının değişik bilgisayarlardaki değişik işletim sistemi platformlarında aynı biçimde iletilmesine imkan veren protokolün adıdır.
FTP
File Transfer Protocol sözcüklerinin baş harflerinden oluşur. Internet ağı üzerinde bilgisayarlar arası dosya aktarım kurallarını içeren protokoldür.
<del> Silinmiş Metin
Bir sayfada bulunan ve sonradan iptal edilmiş metnin, sayfada üstü çizili olarak görüntülenmesini sağlar.
Örnek
<p>Bu sitenin <del>oluşturulma</del> yayınlanma amacı, HTML
hakkında Türkçe <del>bir</del> kaynak sayısında artış sağlamaktır.</p>
Bu kodların uygulanmasıyla ortaya çıkacak görüntü;
Bu sitenin yayınlanma amacı, HTML hakkında Türkçe kaynak sayısında artış sağlamaktır.
<dfn> Tanımlanmış Terim
Metnimizin içinde geçen bir tanımı belirtmeyi sağlar. Browser’lar genellikle <dfn> etiketi ile verilen metni italik görüntüler. Pratikte pek kullanılmayan bu etiket yerine CSS kullanımı tavsiye ediliyor.
Örnek
<p>HTML, <dfn>HyperText Markup Language</dfn> _
sözcüklerinin kısaltmasıdır.</p>
HTML, HyperText Markup Language sözcüklerinin kısaltmasıdır.
<dir> Dizin Listesi
Belgenizde bir dizin listesini tanımlar. Liste elemanları <li> etiketi ile verilir ve compact attribute’u ile listenin daha az yer kaplaması sağlanır.
Örnek
<dir compact>
<li>Eleman 1
<li>Eleman 2
<li>Eleman 3
</dir>
Kodların ortaya çıkaracağı görünüm;
- Eleman 1
- Eleman 2
- Eleman 3
<div> Katman Belirteci
<div> etiketi, sayfada ayrı bir blok halinde belge parçası içerebilen bir bölüm taşır. Bu etiketle, sayfanızda bir katman oluşturursunuz. Belge içinde belge gibi bir yapılanma oluşturan bu etiket, kendine ait stilleri ve dil seçimleri gibi özellikleri taşıyabilir. Böylelikle sayfanızın içeriğini daha iyi kontrol edebilmenizi ve düzenlemenizi sağlar.
Bağlı Özellikler
align=”metin”
Sayfada bulunan katmanın yatay hizalamasını belirtir.
Örnek
<div align="center">
<p>Bilgisayarınızın içindekileri biliyor musunuz?</p>
<img src="in_your_pc.jpg">
</div>
<dl> Tanımlamalı Liste
<dt> ve <dd> etiketleri ile oluşturulacak listelerin başlangıcını ve bitişini belirtir. Örnek için <dd> etiketine ait bölüme gidiniz.
<dt> Tanımlamalı Terim
<dl> etiketi ile oluşturulan tanımlı listelerde, tanımlanan liste elemanlarını belirtir. Bir tür başlık gibi işlev görür. <dt> ile belirtilen başlığın tanımı <dd> etiketi ile verilir. Bu etiketin sonlandırıcısı yoktur. Örnek için <dd> etiketine ait bölüme gidiniz.
<em> Vurgulayıcı
Paragrafta geçen bir sözcük ya da cümle vurgulanmak istediğinde, <em> ve </em> etiketleri arasına alınır. Browser programlar genellikle bu etiketin taşıdığı metni de <dfn> etiketinde olduğu gibi italik gösterirler. Bu etikete CSS ile değişik görüntüleme özellikleri atayarak metin daha vurgulu hale getirilebilir.
Örnek
<p>HTML öğrenmeye gerçekten niyetliyseniz, mutlaka _
<em>düz metin editörleri</em> ile çalışmalısınız.</p>
Örneğimizin görünümü;
“HTML öğrenmeye gerçekten niyetliyseniz, mutlaka düz metin editörleri ile çalışmalısınız.”
şeklindedir.
<fieldset> Form Kontrol Grubu
Bir form üzerinde bulunan bileşenleri grup halinde görüntüleyip, kontrol etmeyi sağlar. Daha iyi anlamak için, aşağıdaki örneğin kodlarını bir web belgesine yazın ve browser’ınızda görüntüleyin. Formunuz birden fazla gruplanmış alan içeriyor mu? <fieldset> etiketi, <legend> ve <label> etiketleri ile kullanılır. Kullanım amacı, formlarımızda, birbiri ile ilişkili bölümleri bir arada tutmaktır.
Örnek
<FORM METHOD=post ACTION="/cgi-bin/order.cgi">
<FIELDSET>
<LEGEND ACCESSKEY=I>Sizi Tanıyalım</LEGEND>
<TABLE>
<TR>
<TD>
<LABEL FOR=name ACCESSKEY=N>Adınız:</LABEL>
</TD>
<TD>
<INPUT TYPE=text NAME=name ID=name>
</TD>
</TR>
<TR>
<TD>
<LABEL FOR=email ACCESSKEY=E>E-posta Adresiniz:</LABEL>
</TD>
<TD>
<INPUT TYPE=text NAME=email ID=email>
</TD>
</TR>
<TR>
<TD>
<LABEL FOR=addr ACCESSKEY=A>Mektup Adresiniz:</LABEL>
</TD>
<TD>
<TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
</TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=O>Ürün Seçimi</LEGEND>
<LABEL ACCESSKEY=3>
<INPUT TYPE=checkbox NAME=products VALUE="urfaacili">
<A href="http://www.lokanta.com/kebaplar/">Urfa Lahmacun (Acılı)</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=4>
<INPUT TYPE=checkbox NAME=products VALUE="sackavurma">
<A href="http://www.lokanta.com/kebaplar/">Sac Kavurma</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
<A href="http://www.lokanta.com/kebaplar/">Şiş Kebap</A>
</LABEL>
</P>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C>Kredi Kartı Bilgileri</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=u>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
<P>
<INPUT TYPE=submit VALUE="Sipariş Et.">
<INPUT TYPE=reset VALUE="Sipariş Formunu Temizle">
</P>
</FORM>
Formumuzun ekrandaki görünümü şöyle olmalı :
<font> Yazıtipi Belirleme
HTML Belgelerinizde kullandığınız metinlerin yazıtipi özelliklerini kontrol etmenizi sağlayan etikettir. <font> etiketini kullanarak yazıtipinin adını, büyüklüğünü ve rengini ayarlayabilirsiniz. Bu etiketi kullanmak yerine CSS kullanmanızı tavsiye ederim.
Bağlı Özellikler
face=”yazıtipi_adı”
Metninizin hangi yazı tipi ile görüntüleneceğini belirtir. Burada belirtilen yazıtipi, ziyaretçinizin bilgisayarında mevcut değilse, başka bir yazıtipi görüntülenir. HTML Belgelerinizde Verdana, Tahoma, Arial gibi yazıtiplerinin dışına pek çıkmamanız gerekir. Eğer bir yazıtipini mutlaka kullanmanız gerekiyorsa, o yazıtipi ile yazdığınız metni grafik dosyası haline dönüştürerek kullanabilirsiniz.
color=”renk_kodu”
Yazıtipinin rengini ayarlamanızı sağlayan özelliktir. Bu kısma onaltılık düzende renk kodlarını girebileceğiniz gibi, ana renklerin isimlerini de girebilirsiniz.
size=”sayı”
Kullandığınız metnin boyutu.
Bu kısımda kullanabileceğiniz rakamlar, tarayıcınızın metin görüntülemede
kullandığı rakamlar olmalıdır. Bu rakamlar 1′ den 7′ ye kadardır. Elde
edeceğiniz değerler aşağıdaki tabloda verilmiştir.
| Tarayıcılarda yazıtipi boyutları | |
| Sayı | Punto Değeri |
| 1 | 8 punto |
| 2 | 10 punto |
| 3 | 12 punto |
| 4 | 14 punto |
| 5 | 18 punto |
| 6 | 24 punto |
| 7 | 36 punto |
Örnek
<p>Bu sırada birden ekran<font face="Verdana, Arial" size=2 _
color="#FF0000">karardı ve karşıma</font> bastonlu bir adam çıktı.</p>
<p>Arkadaşım bana bunun bir <font color="red" size="4">virus</font> _
olduğunu söyledi</p>
Kullandığınız bu kodlarla elde edeceğiniz görüntü, aşağıdaki gibi olacaktır.
Bu sırada birden ekran karardı ve karşıma bastonlu bir adam çıktı.
Arkadaşım bana bunun bir virus olduğunu söyledi
<form> İnteraktif Form
Ziyaretçinin bilgi girişi yapabileceği çeşitli kontrolleri içeren etikettir. Bir metin kutusu, bir radyo düğmesi grubu, onay kutuları, butonlar ve benzeri bilgi girişi nesneleri, web belgenizde <form> etiketi içerisine dahil edilirler.
Bağlı Özellikler
action=”URI” (form handler)
Forma girilen verilerin gideceği ve işleneceği URI
method=”get | post”
Forma girilen verilerin sonuçlarının ulaştırılmasında kullanılacak yöntem.
enctype=”metin”
Form sonuçlarının iletimine ait içerik türü belirleyici özellik
accept-charset=”metin”
Form Hazırlama
Formlar, ziyaretçilerin bilgi girişi yapmalarına ve bilgi girişi olduğu zaman bunları okunmaya hazır duruma getirmeye yarar. Diğer bir deyişle, ziyaretçi ile ev sahibi site arasında bir köprü kurar. Webmaster’ a mail atmak, WWW üzerinden araştırma yapmak, belirli bir anahtar sözcüğü kullanarak arama yapmak, ve hatta telefon bilgi bankalarına girmek form kullanarak halledilir.
Form konusunu anlayabilmek için, HTML programlamayı bilmek ve en azından bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.
Form hazırlanırken aşağıdaki adımlar izlenir :
- Programın, form hazırladığımızı bilmesi için, <form .. etiketi açılır. Bu belirtecin iki parametresi vardır:
method
“Method”, ziyaretçinin girdiği bilgileri ne şekilde alacağımızı belirler. Bu konunun dışında kalmasına rağmen, POST metodunu kullanmanızı tavsiye ederim.
action
Bu bölüme, alınan girdileri işleyecek programın ismi yazılır. Bu program ayrı bir cgi-bin/ dizini altında durmalıdır.
Örnek bir form başlangıcı şöyle olabilir:
<form method="POST" action="http://bilmemne.com/cgi-bin/postala" >
- Şimdi kullanıcının gireceği bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun için aşağıdaki parametreleri kullanan <input .. > belirtecine gerek vardır.
name
Kullanıcının klavyeden girdiği bilgilerin atandığı değişken burada tutulur.
size
Bu sayı, ekranda kullanıcıya ayrılan boşluğun ne uzunlukta olacağını saptar.
type
Anket tipi (burada anlatılmayacaktır)
Örnek bir girdiyi oluşturmak için şu tür bir program yazılabilir.
<INPUT NAME="isim" SIZE=36>
Birden fazla satır kullanma durumunda, farklı bir seçeneğ; <TEXTAREA …> </TEXTAREA> opsiyonunu seçmelisiniz.
name
Yine aynı değişken ismi.
rows
Bu sayı kullanıcının yazdığı alanın kaç satır olacağını belirler.
cols
Bu sayı kullanıcının yazdığı alanın kaç sütun olacağını belirler.
<TEXTAREA NAME="body" rows=10 cols=60></TEXTAREA>
Yukarıdaki alana küçük bir metin de yerleştirebilirsiniz.
<TEXTAREA name="body rows=10 cols=60>
Bu metin, kullanıcının yazacağı alanda görüntülenir.
</TEXTAREA>
Neredeyse bitti. Kullanıcının tüm bilgileri girdikten sonra formu ister yollaması, isterse tekrar silmesi için ikon yaratan bir <input .. belirtecine gerek vardır. Bu belirtecin aldığı opsiyonlar,
type
Kullanılan formun işleme sokulabilmesi için type değeri submit olmalıdır. Başka bir opsiyon da kullanıcının girdiği tüm bilgileri silmektir. Bunun için type’dan sonra reset gelmelidir.
value
Buton içine bir mesaj yazacaksanız, bu opsiyonu kullanın. Kullanıcıyı bilgilendirmek amacıyla herhangi bir metin yazılabilir.
Reset seçeneği, formu tamamen temizlemez, sadece formdaki değerler eski hale dönerler.
Tipik bir örnek:
<input type="submit" value="Bu formu gönder" >
<input type="reset" value="Temizle" >
- Formumuzu oluşturmayı tamamladık. formun sonuna </FORM> sonlandırıcı etiketi konarak form kapatılır.
Tamamlanmış form ekranda şu halde görünür.
E-mail adresiniz :
İsminiz :
Buraya birşeyler yazabilirsiniz:
Deneme
<hr>
<p>
<form method="POST"
action="http://bilmemne.com/cgi-bin/deneme"><P>
E-mail adresiniz : <INPUT NAME="email" SIZE=38>>/P><P>
İsminiz : <INPUT NAME="name" SIZE=42><P>
Buraya birşeyler yazabilirsiniz: <P>
<TEXTAREA name="body" rows=10 cols=50>Something>/TEXTAREA>
<P>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle"></P>
</FORM>
<p>
<hr>
Yukarıdaki formu doldurup gönderin. Form, bilmemne.com adresi üzerinde bir programı çalıştıracaktır. Bu program değişkenlerin ismini ve aldıkları değerleri ekrana basacaktır.
Kullanıcının yazdığını okuyabilmek
Bundan sonra kullanıcının forma ne tür bilgiler girdiğini bulmak kaldı. Form bilgilerini okuyabilmek için tercihan perl veya shell bilmek gerekir. Burada örneği verilecek cgi-bin programlarını herhangı bir dilde yazabilirsiniz, buradaki örnekler, hemen herkesin aşina olduğu shell script ile yazılacaktır.
Şimdi aşağıdaki bilgilerin girilmesini isteyen bir form hazırlayalım ve .html formatında yazalım.
- Haftanın bir günü (gün)
- Bir sıfat (sıfat)
- Bir fiil (fiil)
Yarattığınız form, cgi-bin dizini altındaki (bu dizine yazma hakkı elde etmeniz gereklidir) form.cgi programını çalıştırsın.
Bir gün, iki insan ismi, bir sıfat ve bir fiil giriniz..
- Haftanın bir günü
- Bir sifat
- Bir fiil
<html>
<title> Form hazırlama </title>
<h3> Bir gün, iki insan ismi, bir sıfat ve bir fiil giriniz..</h3>
<hr>
<form method="POST"
action="http://www.muratolmez.com">
<UL>
<LI> Haftanın bir günü <input name="gun">
<LI> Bir sifat <input name="sifat">
<LI> Bir fiil <input name="fiil">
</UL>
<input type="submit" value="Formu postala">
<input type="reset" value="Ekranı temizle">
</form>
</html>
Yukarıda sadece çalıştırılmayı bekleyen bir form hazırladık. Aslında bu haliyle program çalışmayacaktır, çünkü henüz cgi-bin altına yerleştirmemiz gereken shell programımızı (kodu) yazmadık. Yazacağımız kodun amacı, kullanıcının girdiği bilgileri ekranda aynen göstermek.
Kod, programcının isteği doğrultusunda kolayca değiştirilebilir. Her ne kadar sitemizin amacı HTML öğretmek olsa da, aşağıdaki örneği vermekten kaçınmadık. Günümüzde web, ziyaretçilere birşeyler aktarmanın yanı sıra, onlardan da çeşitli taleplerde bulunan, etkileşimli bir hal almıştır.
##
# ayraç.sh
# Bu program, çağırıldığı zaman, ekrana $STRING_QUERY değişkeni
# içindeki değerleri basar. Program, $QUERY_STRING içindeki değişken
# sayısını 3 olarak kabul eder.
##
#!/bin/bash
echo "Content-type: text/plain"
echo
deger=`echo "$QUERY_STRING" | awk -F"&" '{ print $1 " " $2 " " $3 }'`
echo $deger
deger1=`echo "$deger" | awk '{ print $1 }'`
deger2=`echo "$deger" | awk '{ print $2 }'`
deger3=`echo "$deger" | awk '{ print $3 }'`
sabit1=`echo "$deger1" | awk -F"=" '{print $2}'`
sabit2=`echo "$deger2" | awk -F"=" '{print $2}'`
sabit3=`echo "$deger3" | awk -F"=" '{print $2}'`
echo $sabit1 $sabit2 $sabit3
<frame> Çerçeve
Frame teknolojisi ile hazırlanan sayfalarda (örneğin bu sitenin giriş sayfası) ekranı çerçevelere bölebilir ve istediğinizi ekranda sabit bırakıp, linkler tıklandığında sayfaların, istediğiniz çerçevede görüntülenmesini sağlayabilirsiniz. Bu sitede, ekran dikey iki çerçeveye bölündü ve soldaki dar olanı sitenin çeşitli bölümlerine linkler içeren, bir “gezinti çubuğu” şeklinde tasarlandı. Site içeriklerinin ise sağdaki ana bölümde görüntülenmesi sağlandı. <frame> etiketi <frameset> etiketi ile birlikte kullanılır. Ayrıntı için <frameset> etiketini de inceleyin.
Bağlı Özellikler
name=”metin”
Bu özellik, kullandığınız çerçevelere birer isim tanımlamanızı sağlar. Bu sayede, bir referans vermeniz gerektiğinde bu ismi kullanabilirsiniz.
<frameset> Çerçeve Hazırla
<frameset> etiketi, sayfalarınızı çerçevelere bölerek hazırlayabilmenizi sağlar. Bu sitede, sol kenarda bir çerçeve yer alıyor ve burada sitenin çeşitli bölümlerine linkler içeren düğmeler var.Siteye ait ekran iki parçaya ayrılmış durumda, siz bir sayfaya gitmek üzere, o sayfaya ait bağlantıyı tıklayınca, o sayfa ekranınızın belirli bir bölümünde görüntüleniyor, soldaki linkler kısmı olduğu gibi değişmeden kalıyor. Bu etki <frameset> ve <frame> etiketleri ile sağlanıyor. Sitenizin ana sayfasında kullanacağınız bu etiketlerle, bu etkiyi sağlayabilirsiniz. Kullanacağınız çerçevelerin sayısı ve yerleşimine göre kullanacağınız <frameset> etiketi sayısı değişir. Her çerçeve için ayrı bir <frameset> etiketi kullanmak zorundasınız. Sayfada oluşturulan her çerçeve, ayrı bir HTML belgesini işaret eder. Bu nednle frame teknolojisi kullanan bir sayfayı hazırlarken, önce çerçevelerde görüntülenecek sayfaları oluşturarak işe başlamalısınız. Çerçeveli sayfaları bir Excel ya da Word tablosu gibi düşünebilirsiniz. Kaç satır ve kaç sütundan oluşuyor? Örneğin “Bu site iki sütundan oluşuyor ve ikinci sütun kendi içinde iki satıra bölünmüş…” gibi.
Bağlı Özellikler
cols=”genişlik”
Sitenizi oluşturan çerçevelerin ekrandaki genişliklerini piksel cinsinden belirlemenizi sağlar.
rows=”yükseklik”
Sitenizi oluşturan çerçeveler için piksel cinsinden yüksekliği belirtmenizi sağlar.
onload=”script”
Siteniz çağırıldığında çalışmasını istediğiniz script varsa belirtmenizi sağlar.
onunload=”script”
Sitenizden ayrılırken çalışmasını istediğiniz bir script varsa belirtmenizi sağlar.
Örnekler
Çerçeveli sayfamız, üst kısmı komple bir başlık çerçevesi içeren, alt kısımda da gövde çerçevesinin yer alacağı iki çerçeveden oluşan bir sayfa olsun. Yukarıda söz edildiği gibi, önce iki sayfa hazırlayalim ve bunlardan başlık kısmında yer alacak olanı baslik.htm, gövdeyi oluşturacak sayfamızı da govde.htm adlarıyla kaydedelim.
!!!---------- BAŞLIK SAYFASI (baslik.htm)----------!!!
<HTML>
<HEAD>
<TITLE>Baslik Sayfasi</TITLE>
</HEAD>
<BODY>
<H1>ÇERÇEVELİ SAYFAMIZA HOŞ GELDİNİZ!</H1>
</BODY>
</HTML>
Bu sayfayı baslik.htm adıyla kaydettikten sonra aşağıdaki belgeyi oluşturup govde.htm adıyla kaydedin.
!!!---------- GÖVDE SAYFASI (govde.htm)----------!!!
<HTML>
<HEAD>
<TITLE>Govde Sayfasi</TITLE>
</HEAD>
<BODY>
<P>Çerçeve 1</P>
</BODY>
</HTML>
Şimdi gelelim frame tekniği kullanacağımız ana sayfamızı hazırlamaya (frame1.htm) …
!!!---------- FRAME (ÇERÇEVE) SAYFAMIZ (frame1.htm)----------!
<HTML>
<HEAD>
<TITLE>Frame Tekniği İle Hazırlanan Sayfalar...</TITLE>
</HEAD>
<FRAMESET ROWS="100, 400">
<FRAME SRC="baslik.htm">
<FRAME SRC="govde.htm">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Tarayıcı programınız frame tekniğini desteklemiyor. _
Yeni bir versiyon yüklemelisiniz</P>
</BODY>
</NOFRAMES>
</HTML>
Bu sayfayı da frame1.htm adıyla kaydettikten sonra, ( baslik.htm ve govde.htm dosyaları ile aynı dizinde olmalı! ) tarayıcınızda açıp bakın. Nasıl? İşte ilk çerçeveli sayfamız.
<h1> … <h6> Başlık Etiketleri
Yazılarımızı yazarken, konuları birbirinden ayırmak için başlık kullanırız. Bu başlıklar, genellikle gövde metnimizden daha büyük, daha farklı renkte, kısaca ayırıcı, dikkat çekici olurlar. HTML de bize web belgelerimizde başlıkları tek etiketle tanımlayabilmemizi sağlar. Bu etiketler, büyüklük kademesine göre değişen altı adet etikettir. Bu etiketler, büyükten küçüğe, <h1>, <h2>, <h3>, <h4>, <h5>, ve <h6> şeklindedir. Her biri kendi düzeyindeki sonlandırıcıları ile biter. (</h1>, </h2>, </h3>, </h4>, </h5>, ve </h6>) Bu konuyu HTML bileşenlerinin anlatıldığı bölümde işlemiştik. Ayrıntı için lütfen ilgili sayfamızı ziyaret edin.
Bağlı Özellik
align=”metin”
Başlığınızın sayfada yatay olarak nasıl hizalanacağını, buradaki metin bölümüne left, right ya da center yazarak belirtirsiniz.
<head> Belge Başlığı
Bir Web (HTML) belgesi <HTML> etiketi ile başlar ve </HTML> etiketi ile biter. HTML belgeleri ise iki ana kısımdan oluşur; BODY ve HEAD. Body etiketini belgemizin içeriğini taşır, ekranda görüntülenecek bilgiler <body> ve </body> etiketleri arasında yer alır.
HTML belgemizin <HEAD> kısmında ise belgemizin özelliklerini, ekranda nasıl görüntüleneceğini, bağlı olarak açılacak dosyaları, sayfamızın başlığını ve web belgemize ait diğer bilgileri taşıyan etiketler bulunur. Bu kısımda yer alan bilgiler tarayıcı penceresinde görüntülenmez. Belgemizi hazırlarken bu bilgileri taşıyan etiketlerin tümünü kullanmayabiliriz. Ancak bu web belgemizin kurallara uygun ve “iyi tasarlanmış” bir belge olmasını engelleyecektir. Örneğin, Internet arama motorları, buradaki bilgilere bakarak sayfamızı ve içeriğini tanırlar. HEAD kısmı en azından <title> bilgisini içermelidir. Bu kısmın içereceği diğer bilgiler, belgenin içeriğine ait anahtar sözcükler, belgenin dili, hazırlayıcısı, hangi programla üretildiği, kullanılan bir stil dosyası varsa bunun URI’ ı, hangi dil kodlamasıyla ekrana getirileceği ve benzeri bilgilerdir. Bu bilgilerin çoğu <meta> etiketi ile verilmektedir.
<hr> Yatay Çizgi
Belgelerinizde mevcut bölümleri ya da paragrafları ayırmak için yatay bir çizgi kullanabilirsiniz. Bunun için <hr> etiketini kullanmanız gerekir. (hr= Horizontal Rule – Yatay Çizgi) Bu etiketin sonlandırıcısı yoktur.
Bağlı Özellikler
align=”metin”
Yatay çizginizin sayfadaki hizalamasını belirtir.
noshade
Bu özellik bir değişken almayıp tek başına yazılmaktadır ve çizginizin gölgesiz görünmesini sağlar.
size=”piksel”
Çizginizin genişliğini (kalınlığını) piksel cinsinden belirtmenizi sağlar.
width=”piksel veya sayı”
Buraya vereceğiniz değer, çizginizin sayfadaki enini belirler. 50% olarak vereceğiniz değer çizginin sayfanın kullanılabilir alanının % 50′ si kadar yer kaplamasını sağlar. 50 olarak vereceğiniz değer ise piksel olarak yorumlanır ve çizginizin eni (uzunluğu) 50 piksel olur.
Örnek
<p>Aşağıdaki çizgi sayfamızın % 60'ını kaplar ve gölgesizdir.</p>
<hr align="center" noshade size=3 width=60%>
<p>Aşağıdaki çizgi 200 piksel genişliğindedir.</p>
<hr align="center" size=3 width=200>
Örneğimizin sayfamızdaki görünümü aşağıdaki gibidir.
Aşağıdaki çizgi sayfamızın % 60’ını kaplar ve gölgesizdir.
Aşağıdaki çizgi 200 piksel genişliğindedir.
<html> HTML Belgesi
Bir HTML belgesi bir çok etiketten oluşan çok sayıda bileşen içerir. Bu bileşenler iki temel bileşen olan <head> ve <body> etiketlerinin içeriğine dahildir. Bir web belgesi çok değişik özellikler içerebilir. Stil dosyaları, grafikler, metinler, linkler, Script dilleriyle yazılmış kodlar, DHTML (Dinamik HTML) efektlerine ait etiket ve kodlar… Ancak bir web belgesinin tüm içeriği <html> ve </html> etiketlerinin içinde yer alır.
Tarayıcı program, çağırılan bir sayfanın HTML belgesi olduğunu bu etiketin varlığını kontrol ederek anlar. Hazırladığınız sayfalarda <html> etiketinden önce ve </html> etiketinden sonra yer alan veriler, HTML belgesinin içeriğine dahil olmaz. Kısacası bu etiket, web belgenizin, bir HTML dosyası olduğunu bildiren etikettir.
Örnek
HTML bileşenlerinin anlatıldığı sayfalarımızda “İlk HTML dosyamızı oluşturalım” bölümünü ziyaret edin.
<i> İtalik Metin
<i> ve </i> etiketleri arasına aldığınız metin İTALİK olarak görüntülenir. Bu etiketle ortak etiket özelliklerinin bazıları kullanılabilir. (<class>, <lang> gibi)
Örnek
<p>Yazdığınız metin <i>italik</i> görünür.</p>
Yazdığınız metin italik görünür.
<iframe> Çerçeve Ekleme
inline frame sözcüklerinden türeyen bu etiketle, sayfa içerisinde, bir nesne gibi frame gösterilebilir. Grafikler ya da başka nesneler gibi bir çerçeve eklenebilir. Aşağıdaki grafiği inceleyin.
Bağlı Özellikler
src=”URI”
Sayfaya eklenen frame’in içerisinde görüntülenecek web belgesinin URI’si
name=”metin”
Eklenen frame’in adı. Frame’lere isimleri ile atıfta bulunulmaktadır.
width=”piksel”
Sayfada yer alacak frame’in piksel cinsinden genişliği
height=”piksel”
Sayfaya nesne gibi eklenen frame’in piksel cinsinden yüksekliği
align=”metin”
Frame’in yerleştiği sayfadaki hizalaması. top, middle, bottom, left ve right değerlerini alabilir.
frameborder=”piksel”
Sayfaya eklenin frame’in kenar çizgisi kalınlığı. Kenarlık istenmiyorsa “0” değeri girilir.
marginwidth=”piksel”
<img> etiketi ile de kullanılan bu özellik, sayfaya yerleştirilen nesne ile (burada bu nesne frame’dir.) nesne ile komşu olan diğer bileşenler (metinler, ya da diğer nesneler) arasında yatay düzlemde yer alacak uzaklığın piksel olarak boyutu.
marginheight=”piksel”
Frame ile etrafını saran metin ya da nesnelerin arasında dikey pozisyonda yer alacak, piksel cinsinden boşluk miktarı.
scrolling=”metin”
Frame içeriği, frame’ e ayrılan alana sığmadığında kaydırma çubukları eklenerek içeriğin görünmeyen kısmına ulaşma imkanı doğar, ya da ne olursa olsun frame içerisinde kaydırma çubuklarının bulunması istenmez. Bu attribute’ e atanacak değerle, kaydırma çubuklarının durumu kontrol edilir. yes, no ya da auto değerlerini alabilir.
Örnek
Yukarıdaki grafikte yer alan sayfaların kodları aşağıdaki gibidir. Alttaki
satırlar, sayfa içinde yer alacak frame sayfasına ait. Bu sayfa, normal bir web
sayfasıdır. Örneğimizde adı; iframe2.htm dir.
<html>
<head>
<title>Yeni Sayfa</title>
</head>
<body>
<h3>Frame Sayfamız</h3>
<p>Bu frame sayfası, <tt><iframe></tt> etiketi
sayesinde bir nesne gibi sayfaya yerleştirildi.</p>
<p>Bu sayfada yer alan bilgiler, frame teknolojisini
desteklemeyen browser'lar tarafından görüntülenemez.</p>
</body>
</html>
Sayfamıza <iframe> etiketi ile yerleştireceğimiz sayfamız, yukarıdaki kodlardan anlaşılacağı gibi, normal bir web belgesi…
Bu frame’i içeren sayfamızda bu frame’in yer almasını istediğimiz yerde şu kodlar yer alıyor;
<IFRAME SRC="iframe2.htm" TITLE="iframe sayfasi">
<!-- Alttaki kısma frame teknolojisini desteklemeyen browser'larda _
görünmesi istenilen içerik yazılır. -->
<H2>UYARI</H2>
<p>Browser'ınız frame desteklemiyor. İçeriğimizi aşağıda okuyun</p>
<p>içerik</p>
</IFRAME>
<img> Sayfalara Grafik Ekleme
Sayfalarınızda kullanmak istediğiniz grafikleri belirten etikettir. Sayfada görünmesi istenilen grafiğin URI’si, bu etiketin içerisinde “src” attribute’u ile belirtilir. Bu nedenle bu özelliğin (attribute) kullanılması zorunludur. Tarayıcı programlar tarafından tanınan tüm grafik formatlarını bu şekilde kullanabilirsiniz. En çok kullanılan formatlar, JPEG ve GIF formatlarıdır. Yine tarayıcılarca tanınan PNG (Portable Network Graphics) formatı da kullanılabilir, ancak bu formatın dosya boyutu diğerlerinden büyük olacağı için ekranda görüntülenmesi, özellikle bağlantı hızı yavaşsa, zaman alacaktır.
Bağlı Özellikler
src=”URI”
img etiketi ile görüntülenmesi istenilen grafiğin URI’si. Sitelere ait ana dizinin içinde “images” adında bir klasör oluşturarak, grafik dosyalarını burada tutmak genelde en sık kullanılan biçimdir.
alt=”metin”
Bazı kullanıcılar bağlantının hızlı olması için ya da başka nedenlerle, tarayıcısının ayarlarını değiştirerek, grafikleri görüntülenmesini engellemiş olabilir. Bu durumda sayfanızdaki grafiklerin yerinde boş kutular görüntülenecektir. Bu boş kutuların yerinde grafiğinize alternatif olacak bir metnin görüntülenmesini bu özelliği kullanarak sağlayabilirsiniz.
width=”piksel”
Grafiğin sayfada görüntülenecek genişliği. Bir grafik sayfada göründüğünden büyük ya da küçük olabilir. Tasarımcı bu attribute’lerle grafiğinin istediği boyutlarda olmasını sağlar. Ancak, bir grafik özgün boyutlarında görüntülenmezse birtakım istenmeyen sonuçlarla karşılaşılabilir. Örneğin, sayfanızda büyük bir grafiğin çok küçük bir görüntülenmesini istiyorsanız o grafiği bu boyutlarda hazırlamalısınız. Büyük grafiğin görüntülenme zamanı uzundur ve bu grafiğin ekranda olduğundan daha küçük görüntülenmesi, bu zamanı değiştirmez. Çünkü indirilen dosya aynı dosyadır, sadece daha küçük olarak görüntülenmektedir. Özel bir mazeretiniz olmadıkça grafiklerinizi web sayfanızda görüntülemek istediğiniz boyutta hazırlayın.
height=”piksel”
width gibi, bu özellikle de grafiğinizin sayfadaki yüksekliğini belirtirsiniz. width ve height özelliklerini kullanmazsanız grafiğiniz özgün boyutlarında görüntülenir.
align=”metin”
Grafiğin sayfada, yatay düzlemdeki hizalamasını belirtir.
hspace=”piksel”
Horizontal space, yatay boşluk… Grafiğinizi metinler arasında kullanabilirsiniz. Grafiğiniz bir köşede görünmekte ve metinleriniz onun alt, üst ve yanlarından devam etmektedir. hspace özelliğine atayacağınız değer, metinlerinizle grafiğiniz arasında yatay düzlemde yer alacak boşluğu piksel cinsinden belirtir.
vspace=”piksel”
Vertical space, dikey boşluk… Grafiğinizle onu saran metinler arasında dikey düzlemde yer alacak boşluğun piksel cinsinden miktarı.
border=”piksel”
Görüntülediğiniz grafiğin etrafında yer alacak çerçevenin kalınlığını piksel olarak belirtir. Çerçeve istemiyorsanız border=”0″ yazabilirsiniz.
usemap=”URI”
<a> etiketini incelediyseniz, HTML’de metinlere hatta grafiklere nasıl bağlantı verilebildiğini biliyorsunuz. Grafik üzerinde bir adrese link verilebilir. Böylece ziyaretçi grafiğin üzerini tıkladığında o adrese gider. Tek bir grafiği belirli bölgelere ayırarak, her bölgeye bir link vermek ve hangi bölge tıklanırsa ziyaretçinin o linkle verilen sayfaya gitmesini sağlamak da mümkündür. Bu işlem, <map>, <area> etiketleri ve <img> etiketi içinde kullanılan usemap attribute’u ile başarılır. Kullanımını daha iyi kavramak için <map> ve <area> etiketlerini inceleyin.
Örnekler
Sayfalarımıza grafik eklemek için, aşağıdaki örneklerin ilki yeterli olmakla birlikte, grafiğin istenilen özelliklerde görüntülenmesi için diğer özelliklerle parametreler bildirilir. İlk örneğe benzer bir etiket oluşturun ve bir grafik dosyasını sayfanıza ekleyin. Daha sonra, attribute’ları kullanarak ve bunların değerlerini değiştirerek neler olduğunu inceleyin.
<img src="images/ana_sayfa.jpg">
<img src="../images/animasyonlu_sayfa_basligi.gif" border="0" width="400" _
height="72" alt="Welcome to my homepage!!!">
<img src="images/antalya_giris.jpg" border="1" width="200" _
height="200" alt="Antalya'nın girişi..." vspace="10" hspace="10">
<input> Form Bilgi Giriş Nesnesi
Web belgesinde, ziyaretçinin bilgi girişi yapabileceği bir form alanı oluşturur. Sayfada ziyaretçiden adını girmesi için yer alacak bir metin kutusu, ya da ziyaretçinin şifre girmesi için bir şifre alanı, bazı seçenekler arasında seçim yapmasına imkan veren radyo düğmeleri, birden fazla seçeneği işaretleyebileceği kutular ve benzeri ögeler, <input> etiketi ile oluşturulur..
Bağlı Özellikler
type=”metin”
Bu attribute’ e verilebilecek değerler; text, password, checkbox, radio, submit, reset, file, hidden, image ve button olabilir. Bu değişkene göre bilgi girişi yapılacak ögenin tipi belirlenir.
name=”metin”
Input alanına verilecek isim. Çeşitli işlemler gerçekleştirilirken bu isim kullanılır.
value=”veri”
Input alanına bilgi girişi sırasında, input alanı için varsayılan bir değer atanacaksa, bu attribute ile bildirilir.
checked=”değişken”
Radyo düğmeleri ya da seçenek kutuları için, seçili olarak belirtilmesi istenilen seçenek.
size=”sayı”
Metin kutusu için, boyutunu belirleyen karakter sayısı.
maxlength=”sayı”
Metin kutuları için girilebilecek en fazla karakter sayısı.
src=”URI”
Kullanılan nesne bir grafikse, bunun URI’ si.
alt=”metin”
Grafiğe alternatif metin bilgisi.
align=”metin”
Input nesnesinin sayfadaki ya da bulunduğu bölümdeki hizalaması.
Örnekler
Aşağıda input etiketi için çeşitli örnekler ve örnek kodların altında kodların üreteceği input nesneleri görülüyor. “Adınız” yazan kutucuğa metin girin, alttaki şifre kutusuna da birşeyler yazarak test edin.
<input type="text" size="15" name="adiniz">
Yandaki kutucuğa metin girişi yapabilirsiniz.
<input type="password" size="12" name="sifreniz">
Yandaki kutucuğa metin girdiğinizde karakterler yıldız olarak görüntülenir.
<input type="checkbox" name="secenek1">
Seçenek 1 Buradaki seçenek düğmesi fare ile tıklanarak işaretlenebilir ve tekrar tıklayarak işaret kaldırılabilir.
<input type="radio" name="secenek1">
Seçenek 1
Seçenek 2 Buradaki radyo
düğmesi fare ile tıklanarak işaretlenebilir ve yanında yer alacak başka
seçeneklerin tıklanması ile seçenek değiştirilir.
<input type="submit" name="gonder" value="Gönder">
Bu kodlar ile formumuza bir submit (gönder) butonu eklenir. value özelliğine atayacağınız metin, butonun üzerinde görüntülenir. Bir değer vermezseniz buton yüzeyinde “submit” metni görünür. Bu butonun tıklanması ile, bu olaya bağlı form nesnelerine girilen veriler, onları bekleyen yere (server’da çalışan bir cgi programı, bir script v.s.) gönderilir.
<input type="reset" name="sifirla" value="Formu Sıfırla">
Bu şekilde, formunuzda bulunan değerleri varsayılan değerlere eşitleyen bir “reset” butonu ekleyebilirsiniz.
<input type="button" name="dugme1" value="Yaşımı Hesapla">
Gibi bir kodla görevi “submit” ya da “reset” gibi önceden belirlenmemiş ve tıklanması durumunda genellikle bir script’i çalıştıran genel amaçlı bir buton elde edebilirsiniz.
<ins> Araya Eklenen Metin
Bu etiket, bir metin bloğunda, araya sonradan eklenmiş başka bir metin bloğunu işaretlemek için kullanılır (insert). Eklenen metin genellikle altı çizili olarak görüntülenir.
Bağlı Özellikler
cite=”URI”
Eklenen kısmın ekleniş nedeni.
datetime=”datetime”
Eklentinin yapıldığı tarih ve saat.
Örnek
Aşağıdaki kodların sayfadaki görünümü kodların hemen altında yer alıyor.
<P>CENTER etiketi, tarayıcı penceresinde yatay _
olarak ortaya hizalanmış bir metin bloğu oluşturur.
<INS CITE= "http://www.w3.org/TR/REC-html40/appendix/ _
changes.html#h-A.1.2" DATETIME="1997-12-19T00:00:00-05:00"> _
HTML 4.0. ile CENTER etiketinin kullanımı uygun _
bulunmamaktadır.</INS></P>
CENTER etiketi, tarayıcı penceresinde yatay olarak ortaya hizalanmış bir metin bloğu oluşturur. HTML 4.0. ile CENTER etiketinin kullanımı uygun bulunmamaktadır.
<isindex> Tek Satırlık Giriş
<isindex> etiketi, tek satırlı metin girdisi tanımlar. Aşağıdaki örneğimizde de görülebileceği gibi, “prompt” ile verilen metin, input nesnesinin önünde görüntülenir. Bu etiket artık kullanılmamaktadır.
Bağlı Özellikler
prompt=”metin”
Input nesnemiz hakkında bilgi veren metin
Örnek
<isindex promt="Lütfen metninizi yazınız : ">
Lütfen metninizi yazınız :
<kbd> Girilecek Metin
Ziyaretçi tarafından girilecek bilgileri gösterir. Tarayıcılar tarafından genellikle sabit aralıklı karakterlerle gösterilir.
Örnek
<p>İstediğiniz görüntüyü elde edemezseniz, <kbd>Back</kbd> _
yazıp enter tuşuna basın.</p>
İstediğiniz görüntüyü elde edemezseniz, Back yazıp enter tuşuna basın.
<label> Form Etiketi
<label> etiketi, bir form nesnesi için
etiket tanımlar. Bu sayede, örneğin bir radio button ya da chechk box’ u seçmek
için üzerine tıkladığınız gibi, onu açıklayan metnin üzerine tıklayarak da
seçim yapabilirsiniz. Label tanımladığınız form nesnesine bir id değeri atamanız gerekir. id=”nesne1″ gibi…
Aşağıda, <label> etiketi tanımlanmış ve tanımlanmamış
iki örnek bulacaksınız.
Bağlı Özellikler
for=”id_adı”
İlişkilendirilmiş form nesnesinin “id” ile tanımlanan kimliği
accesskey=”karakter”
Tanımlanan kısayol tuşu
Örnekler
Aşağıdaki ilk örnek, <label> etiketi kullanılmadan oluşturulan bir checkbox nesnesini, ikincisi ise, <label> etiketi ile tanımlama yapılmış bir checkbox nesnesini oluşturmaktadır.
<input type="checkbox" name="secenek1">Seçenek 1
Bu örnek kodun üreteceği
nesne;
Seçenek 1
Buradaki “Seçenek 1” yazısını tıklayarak checkbox’ ı işaretleyemez ya da işareti iptal edemezsiniz. Fare ile checkbox’ ın üzerini tıklamanız gerekir, aşağıdaki örnekte ise “Seçenek 2” yazısını tıklayarak da checkbox’ ı işaretleyebilirsiniz.
<label for="secenek2" accesskey="2">
<input type="checkbox" name="secenek2" id="secenek2">Seçenek 2</label>
Bu kodla oluşturulan
nesnenin görünümü;
Seçenek 2
Alt+2 tuş bileşimine tıklarsanız, sayfanın neresinde olursanız olun, “Seçenek 2” nesnesi seçili duruma gelir. Spacebar’ a basarak (Boşluk Çubuğu) seçim yapabilir ya da seçimi kaldırabilirsiniz. Aynı zamanda “Seçenek 2” metnini tıklayarak da checkbox’ ı tıklamış olursunuz. Label tanımladığımız nesneye ait kodların, <label ……………….> etiketi ile, </label> etiketi arasında yer aldığına dikkat edin.
<legend> Form Alanı Belirleyici Başlık
<fieldset> etiketi ile gruplandırılan form alanları için bir başlık (caption) tanımlar.
Bağlı Özellikler
accesskey=”karakter”
Nesne için tanımlanacak kısayol tuşu
align=”metin”
Başlığın fieldset çerçevesi üzerindeki hizalaması
Örnek
<fieldset>
<legend accesskey=K>Kredi Kartı Bilgileri</legend>
<p>
<label accesskey=V>
<input type=radio name=card value=visa> Visa
</label>
<label accesskey=M>
<input type=radio name=card value=mc> MasterCard
</label>
<br>
<label accesskey=N>
Kart No : <input type=text NAME=number>
</label>
<br>
<label accesskey=S>
Son Kull. Tarihi : <input type=text name=sonkulta>
</label>
</P>
</fieldset>
Yukarıdaki kodların sayfada oluşturacağı görüntü aşağıdaki gibi olmalıdır.
Kredi Kartı Bilgileri
| Visa | MasterCard |
| Kart No : | |
| Son Kull. Tarihi : |
<li> Liste Elemanı
<ol> ve <ul> etiketleri ile oluşturulan listelerde, liste elemanlarının her biri <li> etiketi ile verilir. Sonlandırıcı etiketi yoktur.
Eğer <ul> etiketini kullanarak, sırasız bir liste oluşturuyorsanız, her <li> etiketi ile birlikte bir madde imi ya da grafik kullanabilirsiniz.
Örnek
Aşağıdaki örneği uyguladığınızda, sayfanızdaki görünümü örnek kodların altındaki gibi olmalıdır.
<ol>
<li>Liste Elemanı 1
<li>Liste Elemanı 2
<li>Liste Elemanı 3
<li>Liste Elemanı 4
<li>Liste Elemanı 5
</ol>
- Liste Elemanı 1
- Liste Elemanı 2
- Liste Elemanı 3
- Liste Elemanı 4
- Liste Elemanı 5
Madde imleri kullanmak ve her madde için ayrı biçim seçmek için;
<ul>
<li type="disc">Eleman1
<li type="circle">Eleman2
<li type="square">Eleman3
</ul>
gibi bir etiket dizisi kullanabilirsiniz. Bu etiket dizisinin oluşturacağı liste aşağıdaki gibi olacaktır.
- Eleman1
- Eleman2
- Eleman3
<link> Belge Bağlantısı
Web belgesinin <head> kısmında yer alabilecek bu etiket, web belgesiyle ilişkilendirilmesi gereken bir dosyanın URI’sini bildirir. Bu etiketle birlikte kullanılacak attribute’larla, dosyanın ne için kullanılacağı, URI’si ve benzeri özellikleri bildirilir.
Bağlı Özellikler
rel=”link_tipi”
Bir link’e verilen bağı belirtir. Buraya atanacak değerle, link verilen dosyanın ne iş için kullanılacağı belirtilir. Bu kısımda yer alabilecek değerler, alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help ve bookmark olabilir.
rev=”link_tipi”
Bir link’ten gelen bağı belirtir. Buraya atanacak değerle, link’ten gelen dosyanın ne iş için kullanılacağı belirtilir. Bu kısımda yer alabilecek değerler, alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help ve bookmark olabilir.
href=”URI”
rel veya rev özelliği ile bağlanan dosyanın yerini belirtir. (URI)
type=”içerik_tipi”
Bağlantılanan dosyanın içeriğini bildirir. Buradaki değişkenler; text/html, image/jpeg, model/vrml, video/quicktime, application/java, text/css, and text/javascript olabilir.
target=”hedef_çerçeve”
Verilen link, frame tekniği ile hazırlanan bir sayfada kullanılacaksa, hedef çerçevenin adı belirtilir.
Örnek
Sayfalarımızın ortak bir görünüm tarzına sahip olması için bir CSS dosyası oluşturduk. Dosyamız hedef sayfamız ile aynı klasörde yer alsın ve hedef sayfamız frame tekniği ile hazırlanmış olan hedef çerçevemizin adı da “anacerceve” olsun. Bu CSS dosyasının web belgemizi etkilemesi için, <head> kısmında bildirimi şöyle yapılır.
<html>
<head>
<title>Sayfa Basligi</title>
<link rel="text/css" target="anacerceve" href="stil_dosyasi.css">
</head>
<body>
...
...
...
</body>
</html>
<map> Grafik Haritası
Grafik haritası ile, tek grafik üzerinde birden fazla link verebiliriz. Örneğin bir insan yüzü grafiği üzerinde, kulak bölgesine tıklama yapıldığında, kulakla ilgili bilgileri içeren dosyaya, burun üzerine tıklandığında burunla ilgili bilgileri içeren dosyaya ulaşılabilecek şekilde linklerimizi ayarlayabiliriz. Bu etiket <area> ve <img> etiketleri ile birlikte çalışır. <map> etiketi ile bir isim tanımlanır ve bu etiket sonlandırılmadan, <area> etiketi ile grafiğin üzerinde link verilecek bölgelerin koordinatları verilir ve map etiketi sonlandırılır (</map>), son olarak <img> etiketi ile grafik dosyası tanıtılırken, map özelliğinin adı usemap attribute’u ile bildirilir.
Bağlı Özellikler
name=”metin”
Tanımlanan map bölümünün kullanılabilmesi için bir isminin olması gerekir. Bu attribute’un kullanımı zorunludur. Bu kısma map bölgesi için, bizim açımızdan anlam taşıyan makul bir isim verebiliriz. Elbette burada Türkçe karakterleri kullanmamaya dikkat etmelisiniz.
Örnek
Örneğimizde, “images” dizininde yer alan left_map_image1.jpg adlı bir grafik dosyasının üzerine çeşitli link alanları ve linkler tanımlayacağız. <area> etiketini de gözden geçirmeniz gerekebilir.
<map name="astromap">
<area href="mainpage.html" shape="rect" coords="3, 37, 101, 59">
<area href="html_giris.html" shape="rect" coords="27, 95, 101, 116">
<area href="css_giris.html" shape="rect" coords="16, 122, 101, 143">
<area href="mailto:htmlrehberi@hotmail.com" shape="rect" coords="35, 291, 101, 316">
</map>
<img border="0" src="images/left_map_image1.jpg" usemap="#astromap">
<menu> Menü Listesi
Bu etiket bir menü listesi başlatır. Bu menü listesi, aynen <ul> etiketi gibi, madde imli bir liste oluşturur. Kendine özgü attribute’u yoktur. Tüm etiketlerde ortak kullanılan attribute’ları alabilir.
Örnek
<menu>
<li>Menu elemanı 1
<li>Menu elemanı 2
<li>Menu elemanı 3
</menu>
Hazırladığınız örnek, aşağıdaki gibi görünür;
- Menu elemanı 1
- Menu elemanı 2
- Menu elemanı 3
<meta> Meta Verisi
Web belgelerinin <head> kısmında kullanılan bu etiket “meta verileri” adıyla anılan ve web belgesinin ekranda görüntülenmeyen kısmında yer alan bazı değerleri içerir. Bu değerler, web belgesiyle ilgili tarayıcı programlara ve internet üzerinde sınıflandırma yapan mekanizmalara, -örneğin arama motorlarına- gerekli bilgileri sağlar.
Bağlı Özellikler ve Örnekler
name=”isim”
Bu özellikle, meta verisinin özellik adı verilir. En sık kullanılan özellikleri arasında, contents, keywords, description ve author sayılabilir. Contents ve keywords kısmına vereceğiniz anahtar sözcüklerle, site içeriği hakkında arama motorlarına bilgi sağlamış olursunuz, description ile vereceğiniz kısa bir cümlelik tanım, sitenizin içeriği hakkında kısa bir tanım verebilecek bir meta verisini oluşturur. Author değeri ile site sahibinin adı verilir. Şimdi on-line bir manav sitesi tasarladığımızı varsayın ve bu sitenin giriş sayfasında vereceğimiz meta verilerini girelim.
<meta name="keywords" content="elma, armut, ayva, muşmula, _
musmula, muz, kiraz, vişne, visne, seftali, şeftali, _
kayısı, meyve, vitamin, taze">
Net üzerinde bir arama motoruna gidip arama yapan bir ziyaretçi, hangi sözcükleri yazarsa sitenizin adresi verilsin istiyorsanız, bu kısma o sözcükleri birer virgülle ayırarak yerleştiririsiniz.
<meta name="description" content="Türkiye'nin ilk on-line manavı">
Sitenizin içeriği hakkında kısa bir tanımlama
<meta name="author" content="Manav Web Tasarım Grubu">
Siteyi yayına hazırlayan ya da sahibi olan kişi, ya da kurumların adı.
http-equiv=”isim”
Web belgesiyle ilgili dil kodlaması, splash screen (giriş ekranı diyebiliriz), belge öznitelikleri gibi özellikleri belirtir. Buraya vereceğiniz expires değeri ile, web belgenizin belirleyeceğiniz bir tarihten sonra yayınlanmamasını sağlayabilirsiniz. Charset özelliği ile, tarayıcıya, belgenizi hangi dil kodlaması ile görüntülemesi gerektiğini belirtebilirsiniz.
<meta http-equiv="content" content-type="text/html; _
charset=windows-1254">
Bu satırlar, tarayıcıya web belgemizin bir html dosyası olarak dil kodlamasının Windows için Türkçe karakterlere göre seçileceğini gösterir. 1254 Türkçe, 1252 İngilizce(A.B.D.) dil kodlarıdır.
<meta http-equiv=expires content="Fri, 30 Jun 2000 23:59:59 GMT">
Bu kodlarla web belgemiz, 30 Haziran 2000 Cuma günü, Greenwich Saati ile, 23:59:59’da web ortamından kaldırılacaktır.
<meta http-equiv="content-style-type" content="text/css">
Belgemizde kullanılan stil dosyalarının, metin tipindeki CSS dosyaları olduğunu belirtir.
<meta http-equiv=refresh content="10; URL=http:// _
www.muratolmez.com/index2.html">
İki parametre içeren bu özellikle, index.html dosyamız 10 saniye görüntülendikten sonra, ekrandan kaybolacak ve yerine index2.html adındaki dosyamız görüntülenecektir.
<noframes> Çerçeveye Alternatif Metinler
Frame Teknolojisi yeni bir teknolojidir. Bu nedenle, eski sürüm tarayıcılar frame teknolojisi ile hazırlanan sayfaları görüntüleyemez. <frameset> ve <frame> etiketleri eski sürüm tarayıcılar tarafından icra edilmeden atlanmakta ve bir sonraki kodlar çalıştırılmaktadır. Giriş sayfasında frame kullanıldıysa, <noframes> etiketi ile frame’leri görüntüleyebilen tarayıcılara bu kısmı önemsememesi bildirilir. Etiketten hemen sonra da eski sürüm tarayıcıların yorumlaması için, <body> etiketi ile normal bir sayfa için içerikler yerleştirilir. Böylece frame desteklemeyen tarayıcılar için de ekranda bir içerik görüntülenebilmesi sağlanır.
Örnek
<html>
<head>
<title>Frame Sayfasi</title>
</head>
<frameset>
...
...Frame teknolojisine göre hazırlanan içerik.
...
</frameset>
<noframes>
<body>
...
...Eski sürüm tarayıcılar için frame kullanılmayan içerik.
...
</body>
</noframes>
</html>
<noscript> Scriptlere Alternatif İçerik
Script’leri desteklemeyen eski sürüm tarayıcılarda, scriptlerinizin ürettiği içerikler görüntülenemez. Ya da tarayıcı script dilini desteklemiyor olabilir. Bu durumda <noscript> etiketi ile, script’lerin çalıştırılamadığı durumlara alternatif içerikler hazırlanır.
<object> Nesne
Web belgenizde bulunan bir grafik (resim) ya da bir video, bir Java Applet ya da VRML bileşeni birer nesnedir. Kelime anlamı “nesne” olan bu etiket, sayfalarımıza yukarıda saydığımız nesneleri ekleyebilmemizi sağlar. Bir başka deyişle, sayfaya bir grafik eklemek için, <img> etiketi gibi, <object> etiketi de kullanılabilir. Ancak şimdilik diğer etiketleri kullanmak tarayıcı programların desteklemesi açısından daha uygun.
Bağlı Özellikler
data=”URI”
Eklenen nesneyle ilişkisi bulunan verilere ait URI
classid=”URI”
Nesne ile kullanılacak nesne uygulamasının URI’si
archive=”URI”
Daha hızlı veri aktarımını sğlayan classid veya data ‘yı içeren arşiv dosyalarının URI’si.
codebase=”URI”
Nesne ve bağlı URI’lerin (data, archive, classid) temel URI’si.
width=”piksel”
Sayfaya eklenen nesnenin piksel cinsinden genişliği.
height=”piksel”
Sayfaya eklenen nesnenin piksel cinsinden yüksekliği.
name=”metin”
Nesneyi tanımlayan isim. Nesnenin adı.
usemap=”URI”
Grafik haritası için URI
type=”content_type”
Nesne içeriğinin tipi. Burada verilebilecek değişkenler; text/html, image/jpeg, model/vrml, video/quicktime, application/java, text/css, ve text/javascript olabilir.
codetype=”content_type”
Kodlar için tip belirlemesi. Yukarıdaki değerleri alabilir.
standby=”metin”
Nesne yüklemesi tamamlanana kadar görüntülenecek metin.
tabindex=”sayı”
TAB tuşuna her basışınızda, ekrandaki bir nesne seçili duruma gelir. tabindex ile nesnelerinizin TAB tuşu basılınca seçilme sıralamasını belirleyebilirsiniz.
align=”metin”
Nesnenin yatay hizalama şeklini bildirir. (right, left, top, bottom, middle)
border=”piksel”
Nesnenin piksel cinsinden kenarlık kalınlığı.
vspace=”piksel”
Diğer bileşenler ile nesnenin üst ve alt kısmı arasında yer alacak boşluk miktarı.
hspace=”piksel”
Diğer bileşenler ile nesnenin sağ ve sol tarafı arasında yer alacak boşluk miktarı.
Örnek
<OBJECT DATA="images/ie50.jpg" TYPE="image/jpeg" _
TITLE="HTML Editör Programı" WIDTH=100 HEIGHT=100> _
Internet Explorer 5.0</OBJECT>
<ol> Numaralı Liste
Bir liste oluşturmaya yarayan bu etiketle, numaralı listeler oluşturulur. Liste elemanları <li> ile verilir. Aşağıdaki örnekleri inceledikten sonra <ul> etiketini de inceleyin. <ol> ve <ul> etiketleri ile alt maddeler içeren listeler de oluşturulabilir. Alt maddeler oluşturma şekli <ul> etiketinin anlatıldığı bölümde incelenmiştir.
Bağlı Özellikler
compact
Etiketin içine bu terim yazıldığında, liste daha az yer kaplar.
type=”sıra_sayısı_formatı”
Bu özelliği kullanmazsanız, 1′ de başlayarak sırayla artan sayılar kullanılır. a, A, i ve I da kullanılabilir.
Örnekler
| Örnek Kodlar | Görünüm |
| <ol compact><li>Madde 1<li>Madde 2<li>Madde 3</ol> | Madde 1 Madde 2 Madde 3 |
| <ol type=”a”><li>Madde 1<li>Madde 2<li>Madde 3</ol> | Madde 1 Madde 2 Madde 3 |
| <ol type=”A”><li>Madde 1<li>Madde 2<li>Madde 3</ol> | Madde 1 Madde 2 Madde 3 |
| <ol type=”i”><li>Madde 1<li>Madde 2<li>Madde 3</ol> | Madde 1 Madde 2 Madde 3 |
| <ol type=”I”><li>Madde 1<li>Madde 2<li>Madde 3</ol> | Madde 1 Madde 2 Madde 3 |
<optgroup> Seçenek Grubu
<select> etiketi ile hazırlanan menülerde, bir seçenek grubu oluşturmaya yarar.
Bağlı Özellikler
label=”metin”
Seçenek grubunun referans adı
disabled
Seçenek grubunu kullanılamaz yapar.
Örnek
<P>En sık kullandığınız tarayıcı hangisi ?
<SELECT NAME=tarayici>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x or higher">
Netscape Navigator 4.x ya da daha üst versiyon
</OPTION>
<OPTION LABEL="3.x">Netscape Navigator 3.x>/OPTION>
<OPTION LABEL="2.x">Netscape Navigator 2.x>/OPTION>
<OPTION LABEL="1.x">Netscape Navigator 1.x>/OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="4.x or higher">
Microsoft Internet Explorer 4.x ya da daha üst versiyon
</OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x>/OPTION>
<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x>/OPTION>
<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x>/OPTION>
</OPTGROUP>
<O PTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x ya da daha üst verisyon</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>
En sık kullandığınız
tarayıcı hangisi ?
<option> Menü Seçeneği
Sayfalarda görebileceğiniz form menülerinde, seçenekleri tanımlamaya yarayan etikettir. Örneğin, HTML Etiketleri giriş sayfamızda kullanılan seçenek menüsünde (etiket isimlerinin seçildiği menü) etiket adları <option> etiketileri ile verilmiştir.
Bağlı Özellikler
value=”metin”
Seçeneğe varsayılan olarak atanan değer.
selected
Attribute’lar arasına eklendiğinde, (seçeneklerden sadece birine eklenmelidir) o seçenek varsayılan olarak seçili durumda görülür.
disabled
Bu attribute , eklendiği seçeneği kullanılamaz durumda gösterir.
label=”metin”
Seçeneğe bir “label” atamayı sağlar. Yazımı uzun olan bir seçenek için alternatif kısa bir isim atanabilir.
Örnek
<SELECT NAME="Medeni Durumunuz :">
<OPTION SELECTED VALUE="">Lütfen seçiniz...</OPTION>
<OPTION>Bekar</OPTION>
<OPTION>Evli</OPTION>
<OPTION>Ayrı Yaşıyor</OPTION>
<OPTION>Boşanmış</OPTION>
</SELECT>
Bu kodlar bize aşağıdaki görüntüyü verir.
<p> Paragraf
Bu etiketle sayfalarda verilmesi istenilen metinler bildirilir ve her <p> etiketi, yeni bir “paragraf” oluşturur. Sonlandırıcı etiket isteğe bağlıdır. Kullanılmaması durumunda Cascading Style Sheet kullanan sayfalarda sorunlar yaşanabilir.
Bağlı Özellikler
align=”metin”
Oluşturulan paragrafın sayfada hangi yöne hizalanacağını belirtir. left, right, center ve justify değerlerini alabilir. justify değerini sadece <p> etiketi kullanabilir ve metninizin bulunduğu alanın iki yanına hizalanmasını sağlar.
Örnekler
<p align="center">Bu etiket bir paragraf oluşturur.</p>
<param> Nesne Parametresi
Bir parametre bildirmeyi sağlayan bu etiket, <object> ve <applet> nesneleri için değer sağlar. Daha sonra bu parametre, <object> ya da <applet> etiketinin içinde kullanılır. Bir nesne sayfada yerini almadan önce, bu parametreden değerini alır.
Bağlı Özellikler
name=”metin”
Parametre için bir isim tanımlamaya yarar.
value=”metin veya URI”
Parametrenin değeri. Bu bir URI de olabilir.
valuetype=”metin”
Parametreye atanan değerin değişken tipi.
type=”metin”
value değeri için bir URI belirtilmişse, bu URI’ nin tipi.
Örnek
<OBJECT CLASSID="java:Clock.class" CODETYPE="application/java" _
WIDTH=100 HEIGHT=100 TITLE="Gerçek bir saat!"
STANDBY="Şu anda saatin kaç olduğunu biliyor musunuz?">
<PARAM NAME=TYPE VALUE=ANALOG>
<PARAM NAME=BGCOLOR VALUE=WHITE>
<PARAM NAME=FGCOLOR VALUE=NAVY>
</OBJECT>
<pre> Biçimlendirilmemiş Metin
İşte benim bu siteyi oluştururken en çok kullandığım etiketlerden biri… Bu etiket, içerdiği metni, sayfada sabit aralıklı bir fontla, satır başlarına, yerleşimlere hiç dokunmadan aynen görüntüler. Metin editörünüzle <p> etiketi kullanarak metin girerken, örneğin iki kelimenin arasında 20 kez boşluk çubuğuna basarak uzuun bir boşluk bıraktınız. Tarayıcı bu boşluğu tek boşluk olarak algılar. Ya da metin editörünüzde metninizi yazarken satırın sonu geldi ve enter’ a basarak alt satırdan yazmaya devam ettiniz. Tarayıcı bunları görmez. O ardarda kelimeleri sıralar ve satırın bittiği yerde alt satıra geçme işini otomatik yapar. Oysa <pre> etiketi sizin yaptığınız değişiklikleri aynen korur.
Örnekler
Aşağıdaki iki örneği, alt alta bir web belgesinde kullanın (ama aynen gördüğünüz gibi yazmalısınız) ve tarayıcınızda deneyin. Farkı görüyorsunuz…
Örnek 1
<p>Ben bu
sitede örnekler kısmında
<pre>
etiketini kullandım</p>
Örnek 2
<pre>Ben bu
sitede örnekler kısmında
<pre>
etiketini kullandım</pre>
<q> Kısa Alıntı Metni
Belgenizdeki metinlerin içeriğinde kullanacağınız alıntı sözcükleri belirtmek için kullanılabilecek bir etikettir. <blockquote> etiketi gibi çalışır, ancak onun gibi ayrı bir paragraf olarak gösterilmez.
Bağlı Özellik
cite=”URI”
Alıntının kaynağı olarak bildirilecek URI
Örnek
<p>Hocamızın kullandığı <q>bakteri</q> terimi, binlerce türü kapsıyor.</p>
<s> Üstü Çizili Metin
Pek kullanılmayan bir etiket
olan <s>, kapsadığı metni üstü çizili
olarak gösterir.
Örnek
<p>Bu etiket, metni <s>üstü çizili</s> gösterir.</p>
<samp> Örnek Çıktı
Bilgisayar program kodları, script ve benzeri metin parçalarını, diğer metinlerden ayrı bir görünümde sunar. Sonuçta, bu da birçok biçimlendirme etiketi gibi kapsadığı metin parçalarının normal paragraf yazıtipinden farklı bir yazıtipi ile görüntülenmesini sağlar.
Örnek
<p>Aşağıdaki program kodlarını derleyip çalıştırmanız gerekiyor.<br>
<samp>for i=1 to 10 goto baslangic<br>
next</samp>
</p>
Örneğimiz şu şekilde görünür;
Aşağıdaki program kodlarını
derleyip çalıştırmanız gerekiyor.
for i=1 to 10 goto
baslangic
next
<script> İstemci Bilgisayarda Çalışan Kodlar
Bu etiketle, belgenin içinde bir bölüme, çalıştırılabilir bir script parçası eklenir. Script ile web sayfaları dinamik hale gelmektedir. Script için, normal bilgisayar programlama dillerinden türetilmiş yeni “diller” kullanılır ve bu program parçacıkları “derlenmeden” tarayıcının yorumlamasıyla çalışır. En çok bilinen ve en çok kullanılan “script dilleri”, JavaScript ve VBScript’ tir. Bu konu başlı başına bir uzmanlık konusudur ve ileride bu sitenin kapsamına dahil edilmesi düşünülmektedir.
Bağlı Özellikler
src=”URI”
Script’i bulunduran bir belgenin adresi.
type=”metin”
Script’ in yazıldığı script dilini bildiren tip.
defer
Bu özellik, script’ in belgeye bir içerik katkısında bulunmadığını bildirir. Çalıştırılması engellenmiş script’ i belirtir.
language=”metin”
Script’ in yazıldığı script dili.
charset=”charset”
Scrpit’ in lisan karakter kodlaması.
Örnek
Burada verilen örneği, siz de web sayfalarınızda kullanabilirsiniz. İşlevi, bulunduğu sayfanın herhangi bir frame içinde görüntülenmesini engellemektir. Bu script ile sitenize link içeren başka bir sitede sayfanız, o bağlantıyı tıklayan kişinin bilgisayarında, yeni bir tarayıcı penceresinde açılır. Bir frame içerisinde görüntülenemez.
<script language=JavaScript>
<!--Bu script sayfanızın başka bir sitenin frame'inde görüntülenmesini engeller.
if (top.location != document.location.href)
{top.location = document.location.href;}
-->
</script>
<select> Seçenek Oluşturma
Bu etiket, <option> etiketi ile tanımlanan seçenekleri içeren bir form nesnesi oluşturur, oluşturulan bu form nesnesi bir dropdown (aşağı açılan) menü nesnesidir. Etiketlere giriş sayfamızda, etiketleri seçebildiğiniz kutucuk, <select> etiketi ile oluşturulmuş ve tüm etiket adlarını <option> etiketi ile içeren bir form nesnesidir. Aşağıda bir dropdown nesnesi görüyorsunuz.
Bağlı Özellikler
name=”metin”
Form nesnesinin adını belirler.
multiple
Seçenekler arasında, b,rden fazla seçim yapmaya izin verilmesini sağlar.
size=”sayı”
Bir kerede görüntülenecek en fazla seçenek sayısı
disabled
Form nesnesini kullanılamaz yapar.
tabindex=”sayı”
Tab tuşuna basıldığında, form nesneleri üzerinde gezinen imlecin, kaçıncı sırada nesnemize geleceğini bildirir.
Örnek
Bu etiketle oluşturacağınız seçeneklerin seçilmesi durumunda bir olay meydana gelmesi için, tanımlanmış bir script kodu v.b. bir özelliğe bağlanmış olması gerekir, tek başına bir işlev yerine getirmez.
<select name="secenek_penceresi">
<option selected>Seçenek 1
<option>Seçenek 2
<option>Seçenek 3
</select>
Yukarıdaki örnekte ilk menü maddesi (Seçenek 1) ile kullanılan “selected” yükleminin işlevi, tahmin edeceğiniz gibi, varsayılan olarak seçili bulunan elemanı bildirmeye yarar.
<option> etiketlerinin kapatılmadığına dikkat edin.
<small> Küçük Metin
Bu etiket bloğunun içerdiği metin varsayılan yazıtipi boyutundan bir boy küçük görünür. <big> etiketinde olduğu gibi, kullanıldıkça etkisi bir kat artar. İki kez peş peşe yazıldığında iki boy küçük görünüm sağlar.
Örnek
<p>Bu etiket metinleri <small>küçük</small> gösterir.
(1 kez)</p>
Bu etiket metinleri küçük gösterir. (1 kez)
<p>Bu etiket metinleri <small><small><small>çoook küçük</small></small></small>
gösterir. (3 kez)</p>
Bu etiket metinleri çoook küçük gösterir. (3 kez)
<span> Katman Ekleme (Katman Belirteci)
<span> etiketi, bir belgenin, belirli bir kısmını, ayrı bir katman olarak içerebilir ve <div> etiketi gibi çalışır. Etiketin içeriği ayrı olarak biçimlendirilebilir, ayrı dil özellikleri verilebilir.
<strike> Üstü Çizili Metin
<strike> etiketi, bir metin biçimlendirme
etiketidir. Etiketin içerdiği metin bloğu, üzeri çizili olarak
gösterilir. Bu etiketi, bir metinden çıkarılmış kısımları, düzeltilmiş
kısımları göstermede yararlanabilirsiniz. <s>
etiketi de aynı işlevi görür.
Örnek
<p>Etiketin içerdiği metin bloğu <strike>üstü çizili</strike> _
olarak gösterilir.</p>
<strong> Önemli Metin Belirteci
<strong> etiketi, metin biçimlendirme etiketlerinden biridir. Etiket içerdiği metnin tarayıcı penceresinde koyu renkte gösterilmesini sağlar.
Örnek
<p>İçerdiği metnin <strong>koyu renkli</strong> _
görüntülenmesini sağlar.</p>
<style> Gömülü Stil Komutları Belirtici (CSS Belirtici)
Önemli etiketlerden biri…
Bu sitede yazıtiplerinde, renklerde, başlıklarda bir bütünlük buluyor
olmalısınız. Her sayfada, aynı düzeydeki her başlık birbiriyle aynı renkte,
aynı artalan renginde. Metinler, örnek kodlar herbiri aynı renkte ve uyumlu.
Arka plandaki grafik her sayfada mevcut.
Kısacası, sayfaların metin ve diğer biçimlendirmeleri, birbiriyle aynı. Bunu
her sayfa için ayrı ayrı düzenlemek, her örnek kod yazışta, renklerini v.s.
ayarlamak. başlıkları tek tek seçip renk ve artalan renklerini ayarlamak,
bunları eksiksiz ve hatasız takip etmek imkansız.
Bu biçimlendirmeleri bir kez belirliyor ve tüm sayfalarımızda kullanabiliyoruz. Bunu adı CASCADING STYLE SHEETS‘ ten gelen CSS tekniği. Bir süre sonra CSS ile ilgili bir bölüm hazırlayacağım. Bu işi gerçekleştirmek için üç yol var. Daha doğrusu, üç ayrı düzeyde stil belirleme var. Şu anda bu etiketin stil belirlemeye yaradığını bildirerek geçiyorum.
<sub> Alt Metin
Suyun formülünün H2O olduğunu sayfanızda nasıl yazacaksınız? SUBSCRIPT metin göstermede kullanacağınız etiket <sub>’ dır.
Örnek
Sülfürik asidin formülü, H2SO4 ‘tür.
<p>Sülfürik asidin formülü, H<sub>2</sub>SO<sub>4</sub>' tür.</p>
<sup> Üst Metin
Bir üstteki etiket alt metin (subscript) yazdırırsa, elbette bir de üst metin (superscript) yazdıran etiket vardır. <sup> etiketi üst metin yazdırmaya yarar. Üst metin??? “metrekare” için böyle benim gibi 9 harf yazmak yerine, m2 yazmayı tercih edersiniz sanırım.
Örnek
Arsa fiyatları 100,000,000 TL / m2 civarında.
<p>Arsa fiyatları 100,000,000 TL / m<sup>2</sup> civarında.</p>
<table> Tablo
İşte web sayfanızda tablo oluşturan etiket. Web sayfalarında bir tablo oluşturmaya <table> etiketi ile başlanır ve </table> etiketi ile son verilir. Bu iki etiket arasında, tabloyu oluşturan satırları, sütunları, başlık satırlarını v.s. bildiren diğer tablo etiketleri bulunur. Tablonuza bir satır eklemek için <tr> etiketinden yararlanırsınız. Eklediğiniz satıra hücreler (sütunlar) eklemek için ise <td> etiketini kullanırsınız. Ayrıca <thead>, <tbody>, <tfoot>, <th> gibi bileşenler de vardır, ancak, bir tablo oluşturmak için temelde <table>, <tr> ve <td> yeterlidir.
Bağlı Özellikler
border=”piksel”
Tablonuzun kenar çizgileri ekranda görünecek mi, görünecekse kaç piksel kalınlığında olacak. Bu attribute’ e 0 (sıfır) değerini verirseniz, tablonuz kenarlıksız görünür. (Bizim ana sayfadaki gibi)
cellpadding=”piksel”
Tablonuzun hücrelerindeki içerik, tablo kenarlıklarından kaç piksel içeride olsun istiyorsanız o değeri bu kısımda bildirmelisiniz.
cellspacing=”piksel”
Tablonun hücrelerinin arasında boşluk olsun istiyorsanız piksel cinsinden istediğiniz miktarı burada belirtmelisiniz.
align=”metin”
Tablonuzun, sayfada hizalamasını bu özellikle bildirirsiniz. Alacağı değerler, “center, left ve right” olabilir.
width=”piksel”
Tablo, sayfanızın ne kadar kısmını kaplayacak. İstediğiniz değeri bu kısımda yüzde ya da piksel cinsinden verebilirsiniz.
height=”piksel”
Tablonun sayfada kaç piksel yükseklikte görüneceğini bildirir.
Örnek
Basit bir tablo oluşturalım. Tablomuz 3 satır, 4 sütundan oluşuyor. Örnek kodları kolaylık olması için renklendirdim. Mavi etiket, tablo başlatıyor ve bitiriyor, yeşil etiketler, satırların başladığı ve bittiği yerleri belirliyor, kırmızı etiketler de hücrelerin başlangıç ve bitişlerini belirliyor. Her türlü veri, <td> ve </td> etiketlerinin arasında bulunur.
<table align="center" border="1" cellpadding="3" cellspacing="0" width="70%">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
<td>satır 1, hücre 3</td>
<td>satır 1, hücre 4</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
<td>satır 2, hücre 3</td>
<td>satır 2, hücre 4</td>
</tr>
<tr>
<td>satır 3, hücre 1</td>
<td>satır 3, hücre 2</td>
<td>satır 3, hücre 3</td>
<td>satır 3, hücre 4</td>
</tr>
</table>
| satır 1, hücre 1 | satır 1, hücre 2 | satır 1, hücre 3 | satır 1, hücre 4 |
| satır 2, hücre 1 | satır 2, hücre 2 | satır 2, hücre 3 | satır 2, hücre 4 |
| satır 3, hücre 1 | satır 3, hücre 2 | satır 3, hücre 3 | satır 3, hücre 4 |
Örneğimizi bir web sayfasında uyguladıktan sonra, satırlardan birinde, iki <td> etiketli satırı silip tarayıcıda yeniden görüntüleyin. Ne oldu?
<tbody> Tablo Gövdesi
Bir tablonun gövdesini tanımlar, bu etiket, <thead> ve <tfoot>’ la birlikte, eğer özel bir stil tanımlamadıysanız, tablonuzun biçimi üzerine hiçbir değişiklik yapmaz. Yani özel stil belirlemediyseniz, tablonuzu oluştururken bu etiketleri kullanmanıza gerek kalmaz.
Bağlı Özellikler
align=”metin”
Tablonun gövde hücrelerinde, içeriğin yatayda hizalanacağı yönü belirler. (left, right, center)
valign=”metin”
Tablonun gövde hücrelerine ait içeriğin dikey hizalamasını belirler. (top, middle, bottom)
<td> Tablo Veri Hücresi
Tablodaki hücre içeriklerini bulunduran etikettir, bir satırda kaç hücre varsa o kadar <td> </td> çifti var demektir. <table> etiketindeki örnekte, kırmızı renkli etiketleri inceleyin.
Bağlı Özellikler
align=”metin”
Hücre içeriğinin yatay hizalaması.
valign=”metin
Hücre içeriğinin dikey hizalaması.
nowrap
Hücre içeriği, hücreye sığmadığı zaman otomatik olarak alt satıra kaydırılır. (Word Wrap) Bu attribute, sözcük kaydırmayı engeller.
width=”piksel”
Hücrenin piksel cinsinden genişliği.
height=”piksel”
Hücrenin piksel cinsinden yüksekliği.
bgcolor=”metin”
Hücrenin arka plan rengi.
rowspan=”sayı”
Eveet, işte önemli bir attribute. Bu attribute’ e verilecek değer 1′ den yukarı ise, tablonun o hücresinin birden fazla satıra yayılacağını gösterir. Yani alt alta gelen birkaç hücre birleşerek bir kaç satırı kapsamıştır. Birleştirilen satırlarda, birer hücre kodu (<td></td>) eksiltilir.
colspan=”sayı”
Aynı şekilde, bu attribute ise, aynı satırda yan yana gelen birkaç hücrenin birleşerek birden çok sütuna yayılmasını sağlar. Birleştirilen hücre sayısının bir eksiği kadar hücre etiketi eksiltilir. Bu iki attribute için örnek verelim. <table> etiketindeki örnek kodu HTML Editor’ da yeniden yazın ve aşağıdaki değişiklikleri yapın.
Örnek
rowspan
satır 1, hücre 1 yazan satırın kodunu,
<td rowspan="2">satır 1, 2 hücre 1</td>
kodu ile değiştirin ve ikinci satırın ilk hücresini oluşturan
<td>satır 2, hücre 1</td>
kodunu silin, dosyanızı farklı bir adla kaydedip tarayıcınızda açın ve değişikliği inceleyin.
colspan
satır 3, hücre 1 yazan satırın kodunu,
<td colspan="3">satır 3, hücre 1, 2, 3</td>
ile değiştirin ve satırın 2. ve 3. hücrelerini oluşturan
<td>satır 3, hücre 2</td>
<td>satır 3, hücre 3</td>
kodlarını silin, dosyanızı yine farklı bir adla kaydederek tarayıcınızda açın ve değişikliği izleyin.
<textarea> Çok Satırlı Metin Girişi
Bir form alanı hazırladınız, ziyaretçi, adını, e-posta adresini ve siteniz hakkındaki düşüncelerini girecek. Adını ve e-posta adresini tek satırlık bir metin kutusuna girebilir, ama düşüncelerini yazacağı kutuyu farklı hazırlamanız gerekir. Daha büyük, gerekirse sol ve alt kenarlarında kaydırma çubukları olan bir kutu…
İşte <textarea> etiketi bu işi yapar.
Bağlı Özellikler
name=”metin”
Metin alanına atanan bir isim, buraya yazılan değerleri kullanırken, bu metin alanına referansta bulunmak için.
<tfoot> Tablo Altı
<tbody> ve <thead> etiketinde olduğu gibi, özel stil tanımlamaları yapılmış web sayfalarında, Tablonun en alt satırının farklı görünmesini sağlar. (Örneğin, GENEL TOPLAM satırı) Stil tanımlaması yapılmadıysa kullanılmasına gerek yoktur.
<th> Tablo Başlık Hücreleri
Tablolarınızda, tablo başlıklarını taşıyan hücreleri <td> etiketi yerine <th> etiketi ile oluşturabilirsiniz. Bu durumda, bu hücrelerin içeriği kalın ve ortaya hizalanmış olarak görünür.
Örnek
<table width="300" cellpadding="3" cellspacing="0" border="2">
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
</tr>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
<td>Hücre 3</td>
</tr>
</table>
Bu satırların ortaya çıkaracağı tablo aşağıdaki gibi olmalıdır.
| Başlık 1 | Başlık 2 | Başlık 3 |
| Hücre 1 | Hücre 2 | Hücre 3 |
<thead> Tablo Başlığı
Bir tabloya başlık oluşturmada kullanılan etikettir ve tablonun üzerinde görüntülenir. Yukarıdaki tabloyu oluşturan etiketlere bir ilave yaparak, bu etiketin işlevini örneklendirelim;
Örnek
Tabloyu oluşturan <table…. etiketinden sonra, ilk satırımızı oluşturan <tr> etiketinden önce aşağıdaki kod kullanılır.
<thead>TH ve THEAD Etiketlerinin İşlevlerine Örnek:</thead>
| TH ve THEAD Etiketlerinin İşlevlerine Örnek: Başlık 1 | Başlık 2 | Başlık 3 |
| Hücre 1 | Hücre 2 | Hücre 3 |
<title> Sayfa Başlığı
Tarayıcı pencerenizin başlık çubuğunda ne yazıyor? Eğer bir aksalık yoksa ve Internet Explorer kullanıyorsanız, aşağıdaki grafikteki gibi “Aceminin HTML Rehberi – Microsoft Internet Explorer” yazıyor olmalı. İşte bu başlık, <title> etiketi ile sağlanıyor. Bu etiket, web belgesinin <head> kısmında kullanılır.
Örnek
<html>
<head>
<title>Aceminin HTML Rehberi</title>
.....
</head>
<body>
.....
</body>
</html>
<tr> Tablo Satırı
Tablo oluştururken, satır başlangıcı bu etiket ile bildirilir. Her <tr></tr> ikilisi tabloya yeni bir satır ekler, ancak bu ikili tek başına ekranda görünür bir satır ortaya çıkarmaz, satır oluşturan bu etiketler eklendikten sonra, hücre oluşturan <td> etiketi kullanılır ve hücre içeriği <td></td> ikilisi arasına yerleştirilir.
Örnek
<table>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</table>
Yukarıdaki tablo etiketleri topluluğu, bize aşağıdaki tabloyu sunar;
| Hücre 1 | Hücre 2 |
| Hücre 3 | Hücre 4 |
<tt> Teletype Text – Daktilo Harfleri
<pre> etiketine benzer bir özellik arz eden bu etiketle, cümle içinde herhangi bir sözcüğü, eşit boşluklu yazı tipleri ile (Örneğin Courier New) daktilo harfleri gibi gösterebilirsiniz. Bu sitede, cümle içinde geçen etiket isimleri <tt></tt> ikilisi arasına yazılmıştır.
Örnek
<p>Bir web sayfası <tt><html></tt> etiketi ile başlar...</p>
Örneğimizin sağlayacağı görünüm;
Bir web sayfası <html> etiketi ile başlar…
<u> Altı Çizili Metin
<ul> Sırasız Listeler
<var> Vurgulayıcı
