Temel etiketler

2. HTML Temel Etiketleri

Bu bölümü bitirdiğinizde,

 HTML ve etiket kavramlarının ne olduğunu,

 HTML komut yapısını,

 Örnek bir HTML dosyasının nasıl oluşturulduğunu,

 Temel HTML etiketlerinin neler olduğunu,

 Numaralı ve numarasız listelerin nasıl kullanıldığını,

 Liste madde biçimlendirmenin ne olduğunu ve nasıl

kullanıldığını ve

öğrenmiş olacaksınız.

2.1. HTML Yapısı

WEB (World-Wide WEB) sayfaları Hipermetin İşaretleme Dili (HTML -

HyperText Markup Language) olarak adlandırılan bir dil ile

hazırlanmaktadır. HTML, WEB ortamında kullanılan standart bir yazarlık

dildir. HTML bir işaretleme dilidir ve işaretleme etiketlerini kullanarak

içeriği biçimlendirmemizi sağlar. İşaretleme, HTML dilindeki etiketlerin yani

biçimlendirme tercihlerinin geçerli olacağı yerlerin belirtilmesi demektir.

Etiketlerin uygulanacağı yerin başlangıç ve bitiş yerleri ilgili komut ile

belirtilir ve istenen özellik uygulanır.

HTML, WEB sayfalarının görünümüyle değil, içeriğiyle ilgilenir. Kullanıcı

olarak WEB sayfamızın içeriğini biçimlendiririz, ancak WEB sayfasının asıl

görünümünü etkileyen, yazılım ve donanıma ilişkin pek çok değişken olduğu

için, son kullanıcı ekranında elde edilecek sonuçlar her zaman değişken

olacaktır. HTML dilinin gelişmesi ve standartların oluşturulması w3

Konsorsiyumu tarafından gerçekleştirilmektedir. Bu kuruluş HTML dili ile

ilgili standartları tanımlamaktadır. HTML için geçerli olan etiketler de bu

konsorsiyum tarafından belirlenmektedir. HTML diline yeni etiketler

eklendiğinde bu dilin yeni sürüm ortaya çıkmaktadır. Bu dil, ilk olarak HTML

2.0 olarak başlamış, daha sonra HTML 3.0, HTML 3.2, HTML 4.0 gibi farklı

sürümleri çıkmıştır. Şu an en son sürüm HTML 5.0 ile devam etmektedir.

WEB sayfalarına metin, resim, ses dosyası veya video dosyası biçiminde

farklı içerikler ekleyebiliriz. Bu işlemleri gerçekleştirmemizi sağlayan HTML

kodlarına etiket (tag) adı verilir. HTML diliyle bir WEB sayfası hazırlarken,

etiketlerin yardımıyla başlık, liste, tablo ve form düzenleme, veya resim,

film ekleme gibi işlemler gerçekleştirilir. HTML dilindeki bu etiketler,

belirlenen bir bölgeyi kapsar ve bunun dışındaki bölgeler bu etiket için

geçersizdir. Etiket kullanımına ilişkin örnek bir gösterim şu şekildedir:

HTML Kodu Açıklama

<HTML> Doküman için başlangıç etiketi

<BODY bgcolor=“yellow”> Sayfa içeriği için başlangıç etiketi

bgcolor=“yellow” ise bir özellik uygulamasıdır

<h1> İlk Başlık</h1> Görüntülenecek sayfa içeriği

<h1> metnin başlık biçiminde gösterimi için kullanılır

<p> İlk Paragraf </p>

Görüntülenecek sayfa içeriği

<p> metnin alt ve üst kısmına boşluk bırakarak paragraf

olarak gösterimi için kullanılır

</BODY> Sayfa içeriği için bitiş etiketi

</HTML> Doküman için bitiş etiketi

Değişik işletim sistemlerindeki değişik WEB tarayıcı programları bu etiketleri

farklı şekillerde yorumlayabilir. Bu durumda WEB sayfasının içeriği değil,

yalnızca görüntüsü değişmektedir. Ayrıca, HTML dosyası tarayıcı tarafından

Şekil 1 Bir WEB sayfası örneği

Şekil 2 HTML etiketi uygulaması

görüntülenirken, kullandığımız boşluklar, satır kesme (enter) ve sekme (tab)

karakterleri dikkate alınmaz ve yalnızca yazılan metin görüntülenir.

2.1.1. Örnek bir HTML Dosyası

Aşağıda basit bir HTML sayfasına ait içerik ve Şekil 6’da tarayıcıdaki

görünümü verilmektedir. Verilen örnekleri herhangi bir metin editörü

kullanarak yazıp, “.htm” uzantısı vererek kaydedip, daha sonra dosyayı

tarayıcı yazılımınızda açarak görüntüleyebilirsiniz.

<HTML>

<HEAD>

<TITLE>Bir WEB

sayfası</TITLE>

</HEAD>

<BODY>

<H1>Sayfama

Hoşgeldiniz…</H1>

</BODY>

</HTML>

Sayfa içeriğine bakıldığında basit bir HTML dosyasının <HTML> etiketi ile

başladığını, bunu <HEAD> etiketinin izlediğini ve bu belgede tarayıcının

başlık (<TITLE>) kısmında yer alan bilginin bulunduğunu görmekteyiz. Başlık

kısmından sonra içeriğin yer aldığı ana bölge (<BODY>) bulunmaktadır.

Dosyaya dikkat edilecek olursa şimdiye kadar bahsedilen bütün etiketlerin

başlama ve bitiş kodlarını içerdiği görülmektedir. HTML dosyası oluştururken

bütün etiketler <başlama>…</bitiş> şeklinde kodlanmalıdır.

2.2. Temel HTML Etiketleri

2.2.1. <HTML>

Her bir HTML dosyası <HTML> etiketi ile başlar ve </HTML> etiketi ile biter.

Bunun anlamı bu sayfa HTML olarak hazırlanmış demektir ve bütün HTML

kodları ve metinler

bu iki etiket arasına

yazılır (Şekil 7).

<HTML>

... diğer etiketler ...

... metinler ...

...resimler…

</HTML>

Şekil 3 HEAD bölümünde TITLE etiketi

uygulaması

Şekil 4 BODY etiketi uygulaması

2.2.2. <HEAD>

Bu kısım dosya ile ilgili başlık ve diğer bilgilerin (keyword, meta vb.) girildiği

dosya tanıtıcı kısımdır. Bu etiket arasında <TITLE>…</TITLE> etiketi

kullanılarak dosyanın başlığı belirtilir.

<HTML>

<HEAD>

<TITLE>Web sayfası

başlığı</TITLE>

</HEAD>

...

</HTML>

şeklinde kaydedilen bir HTML dosyası Şekil 8’deki gibi görülecektir.

2.2.3. <BODY>

<BODY> etiketleri arasındaki bilgiler, ekranda görüntülenecek içeriği kapsar.

Bu bölüm olmazsa veya etiketler arası boş bırakılırsa, ekranda boş bir sayfa

görüntülenecektir.

<HTML>

<HEAD>

<TITLE>

WEB sayfası

örneği

</TITLE>

</HEAD>

<BODY>

<H1> Sayfama

Hoşgeldiniz…</H1>

... Diğer kodlar,

metinler ve resimler ...

</BODY>

</HTML>

içerikli bir HTML dosyası tarayıcıda Şekil 9’daki gibi görüntülenecektir.

<BODY> etiketi için kullanılabilecek bazı özellikler vardır. Örneğin, HTML

dosyasının zemin rengini “BGCOLOR” (arka zemin rengi) özelliğini

kullanarak değiştirebiliriz. Renk tanımları için rengin ismi veya kodu

kullanılabilir.

<BODY> etiketi içerisinde Örneğin bir HTML dosyasının arka alan rengini,

rengin ismini vererek tanımlamak için kullanılacak komut şöyledir:

Şekil 5 BODY özellikleri uygulaması

RR onaltılık düzende kırmızı değeri, GG onaltılık düzende yeşil değeri ve BB

onaltılık düzende mavi değeri anlamına geldiğinden, HTML dosyasının arka

alan rengini renk kodu ile tanımlamak için kullanılacak komut ise şu

şekildedir:

Benzer şekilde HTML dosyasının arka alanına bir resim yerleştirmek için

<BODY> etiketi içerisinde “BACKGROUND” (arka alan) özelliğini eklememiz

gerekir. Örneğin,

kodu yazılmış bir sayfanın tarayıcıda arka planında resim görüntülenmiş

biçimde karşımıza gelecektir.

Yine, <BODY> etiketi içerisinde “TEXT” (metin) özelliğini kullanarak ve renk

değerini belirterek sayfamızda yer alan metinlerin rengini de değiştirebiliriz.

Bu özelliğinin kullanımını şu şekilde örneklendirebiliriz:

Bu kodu kullandığımızda,

<BODY> etiketi içerisinde

yer alan tüm metinler farklı

bir etiket kullanılarak

değiştirilmediği sürece

belirtilen renkte

görüntülenecektir. Ayrıca,

<BODY> etiketi içerisinde

kullanabileceğimiz tüm

özellikleri bir arada

kullanmamız da olasıdır.

Örneğin,

Bu metin, siyah zemin rengi üzerine beyaz olarak görünüyor.

İçerikli bir HTML dosyası tarayıcı ekranında Şekil 10’daki gibi görüntülenir.

2.3. Listeleme Etiketleri

HTML sayfalarında farklı biçimlerde liste yapılabilir. HTML dilinde değişik

liste seçenekleri bulunmaktadır. Bunlar;

 Numaralı veya sıralı listeler (satır başlarında sıralı numaraları vardır)

 İşaretli veya sırasız listeler (satır başlarında özel bir karakter vardır)

Şekil 6 Sıralı liste örneği

Şekil 7 Sırasız liste örneği

2.3.1. Numaralı Listeler

Numaralı Listeler <OL> etiketi ile başlar ve </OL> etiketi ile biter. Liste

maddelerini belirtmek için <LI> etiketi kullanılır. Numaralı listelerde WEB

tarayıcısı numaraları otomatik olarak yerleştirir. Listeden bir eleman

çıkarıldığında veya listeye yeni bir eleman eklenildiğinde, numaralandırma

otomatik olarak tekrar yapılır ve düzenli

bir şekilde gösterilir. Liste elemanları

okunurluğu arttırmak için sağa doğru biraz

içeri kaydırılarak yazılır. Örneğin,

<P> Çeşitli Meyveler: </P>

<OL>

<LI> Elma

<LI> Armut

<LI> Portakal

<LI> İncir

<LI> Şeftali

</OL>

kodlaması tarayıcıda Şekil 11’deki gibi

görüntülenecektir.

2.3.2. Numarasız Listeler

Numarasız Listeler <UL> etiketi ile başlar ve </UL> etiketi ile biter. Liste

maddeleri yine <LI> etiketi ile başlar. Okunurluğu artırmak için liste

elemanları sağa doğru biraz kaydırılarak

yazılır. Numaralı listeden tek farkı liste

maddelerinin başında numara yerine özel

bir karakter görünmesidir.

<P> Çeşitli Meyveler: </P>

<UL>

<LI> Elma

<LI> Armut

<LI> Portakal

<LI> İncir

<LI> Şeftali

</UL>

şeklindeki HTML dosyası Şekil 12’deki gibi

görülecektir.

2.3.3. Liste Maddelerini Biçimlendirme

HTML sayfalarında sıralı yada sırasız listeler yaratıldığında tarayıcı bu

listedeki maddelerin başındaki karakterleri kendisi belirler, ancak bu

karakterler sonradan da belirlenebilir. Bunun için TYPE (tip) özelliği

kullanılır. Sırasız listeler için aşağıdaki üç seçenek kullanılabilir (Tablo 4).

Tablo 4 Sırasız liste seçenekleri

Seçenek Görünüm

TYPE=“DISC” İçi dolu bir daire.

TYPE=“CIRCLE” İçi boş bir daire.

TYPE=“SQUARE” İçi boş bir kare.

Sıralı listeler için ise Tablo 5’de görülen seçenekler kullanılabilir.

Tablo 5 Sıralı liste seçenekleri

Seçenek Görünüm

TYPE=“1” Liste elemanlarını numaralar (1, 2, 3)

TYPE=“A” Liste elemanlarının başına büyük harfler verir (A, B, C)

TYPE=“a” Liste elemanlarının başına küçük harfler verir (a, b, c)

TYPE=“I” Liste elemanlarını büyük Roma rakamları ile listeler (I, II, III, IV)

TYPE=“i” Liste elemanlarını küçük Roma rakamları ile listeler (I, ii, iii, iv)

Alıştırma ve Uygulama Önerileri

1. Daha önceden Word kelime işlemcisi kullanarak oluşturduğunuz bir

dosyayı “WEB sayfası olarak kaydet” seçeneğini kullanarak

kaydediniz. Kaydettiğiniz dosyayı “Notepad” metin editörü ile açarak

inceleyiniz.

2. Kendinizi tanıtmak amacı ile öğrendiğiniz tüm etiket türlerini

kullanarak örnek bir WEB sayfası oluşturunuz.

3. Aşağıdaki HTML kodlarını inceleyiniz. Her bir örnek için bulduğunuz

hataları not ediniz.

<HTML>

<HEAD>

<TITLE>

WEB sayfası örneği

<HEAD>

<BODY>

<H1> Sayfanın

Başlığı </H3>

... Sayfanın İçeriği

...

</BODY>

</TITLE>

</HTML>

<HTML>

<TITLE> Derslerim

</TITLE>

</HEAD>

<BODY

TEXT=”CC00FF”>

<H2> Derslerim </H2>

<UL>

<LI>Matematik

<LI>Fizik

</OL>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> Derslerim </TITLE>

</HEAD>

<P> Meyveler </P>

<LI>Karpuz

<LI>Portakal

<UL>

<LI>Elma

<LI>Armut

</OL>

</UL>

</HTML>