Site Rengi

HTML Etiketleri ve Anlamları Nelerdir?

HTML Etiketleri ve Anlamları Nelerdir?

HTML Etiketleri ve Anlamları Nelerdir?
21.11.2021
26
A+
A-

HTML Etiketleri ve Anlamları Nelerdir?

HTML ile web sayfaları tasarlarken onlarca etiket kullanılmaktadır. Her sürümde bu etiketlere yenileri dâhil edilmiştir. HTML etiketleri ve anlamları şunlardır:

Meta etiketi web sayfalarının bilgi etiketi olarak kullanılır. Bu etiket, sayfayı ziyaret edenlere sayfanın yapısı ve içeriği hakkında bilgiler vermek için kullanılmaktadır. Bu etiket HTML kodlarında head etiketleri arasında yer alır ve tarayıcıda gözükmez. Meta etiketleri sayfaların açıklama (description), anahtar kelimeler (keywords), sayfa yazarı (author), son değiştirilme tarihi (last modified) ve diğer meta verilerini vermek için kullanılır. Ayrıca, bu etiketten gelen bilgilerle internet tarayıcıları sayfa yüklenirken nasıl görüntüleneceğine karar verir, arama motorları da indexleme ve anahtar kelimelerini alırlar. Yeni nesil arama motorları meta etiketlerden gelen bilgilerin yanında sayfaların gövde kısmındaki bilgileri de dikkate alarak arama yaparlar. Meta etiketlerinin kullanımına yönelik bazı örnekler aşağıda verilmiştir:

  • Web sayfasının açıklama verisi için kullanılması gereken meta etiket kullanımı: < meta name=”description” content=”HTML Etiketleri”/>
  • Web sayfasının anahtar kelime verisi için kullanılması gereken meta etiket kullanımı: < meta name=”keywords” content=”HTML ,CSS, Javascript”/>
  • Web sayfasının yazar verisi için kullanılması gereken meta etiket kullanımı: meta name=< “author” content=”Yazarlar”/>
  • Web sayfasının içeriği görüntülenirken Türkçe karakter sorunu yaşamamak için kullanılması gereken meta etiketinin kullanımı: < meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″>

Başlık etiketi altı adettir, bunlar sırasıyla; < h1>, < h2>, < h3>, < h4>, < h5> ve < h6>’dır. Bunlardan en küçük olanı < h6>, en büyük olanı < h1>’dir.

HTML Başlık Etiketi Kullanımı
HTML Başlık Etiketi Kullanımı

HTML’de paragraflar < p> etiketi ile belirtilir.

HTML Paragraf Etiketi Kullanımı
HTML Paragraf Etiketi Kullanımı

Satır atlamak için < br> etiketi kullanılır. Diğer yandan bu etiketin yeni bir paragraf oluşturmadığını da unutmamak gerekir. Ayrıca diğer etiketlerden farklı olarak sadece başlangıç etiketi ile kullanmak yeterlidir.

HTML Satır Atlama Etiketi Kullanımı
HTML Satır Atlama Etiketi Kullanımı

Yorum satırları, HTML kaynak kodu içerisine programcıların yazdıkları satırların veya blokların ne amaçla yazıldığını anlatmak için kullanılır. Bu etiketin içeriği, tarayıcılarda görüntülenirken dikkate alınmazlar. Örneğin; < !– Bu bir açıklama satırdır–>

Sayfalarda alıntılar yapılırken, herhangi bir eserden, kitaptan veya kişiden alınacak sözler, metinler veya resimler blockquote (< blockquote> ve < /blockquote>) etiketi içerisine alınarak verilir.

HTML Blockquote Etiketi Kullanımı
HTML Blockquote Etiketi Kullanımı

HTML’de metinlerle ilgili çok sayıda etiket vardır. Bu etiketler şunlardır:

  • HTML’de metni kalın olarak yazmak için < b> ve < /b> etiketi kullanılır.
  • HTML’de metni kalın, güçlü vurgu olarak yazmak için < strong> ve < /strong> etiketi kullanılır.
  • HTML’de metni italik olarak yazmak için < i> ve < /i> etiketi kullanılır.
  • HTML’de metni altı çizili olarak yazmak için < u> ve < /u> etiketi kullanılır.
  • HTML’de metni üst simge olarak yazmak için < sup> ve < /sup> etiketi kullanılır.
  • HTML’de metni alt simge olarak yazmak için < sub> ve < /sub> etiketi kullanılır.
  • HTML’de yatay çizgi için < hr> ve < /hr> etiketi kullanılır.
  • < strong> ve < b> etiketleri birbirinin yerine kullanılabilir.

HTML sayfalarında renkler İngilizce adlarıyla kullanılabildiği gibi 16’lık sayı düzenindeki “hexadecimal” değerleriyle de kullanılabilir. HTML’de renk kodları bir diyez (#) işareti ile başlar ve daha sonra altı basamaktan oluşan bölüm gelir. Örn: “#FFFFFF” gibi… www.ilginize.com HTML’deki renkler hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile gösterirler. Bu kombinasyonu seçerken en düşük değer 0 (hex #00) ve en yüksek değer de 255’tir (hex #FF). Web sayfalarında sıklıkla kullanılan ve birçok tarayıcının desteklediği 16 renk ve isimleri (İngilizce olarak da) aşağıdakilerdir:

HTML Renkler ve Kullanımları
HTML Renkler ve Kullanımları

Renklerin kullanımına örnek olması için < body bgcolor=”green”>etiket satırı verilebilir. Bu örnekte sayfanın arka plan rengi yeşil yapılır. Hexadecimal karşılığı da kullanılabilir, < body bgcolor=”#008000″>aynı sonucu verir.

< body> etiketi bilindiği üzere arka planları belirlemek için parametreler almaktadır. Bu parametrelere örnek olarak “bgcolor” ve “background” verilebilir. Sayfalara bgcolor parametresi ile arka plan rengi, background parametresi ile de arka plan resmi verilebilir.

< body bgcolor=”black”>
< body background=”bg.jpg”>

Font etiketi de renklerle çok sık kullanılan başka bir etikettir. Bu etiketin parametrelerinin alacağı değerler ile metinlerin renk, yazı tipi, boyut gibi özelliklerinin değiştirilmesi sağlanır.

< font face=…. size=…. color=…. > < /font>

Font etiketinin aldığı bu parametrelerin özellikleri şöyle özetlenebilir:

  • face= yazı tipinin adı (Times New Roman, Arial, Tahoma, Verdana gibi)
  • size= metnin büyüklüğü (1-7 arası)
  • color= metnin rengi (blue, black gibi renklerin İngilizce karşılığı ya da RGB renk değeri)

Link etiketi < a> … < /a> etiketi içinde, href=”” komutuyla kullanılır. Target parametresi ile de sayfanın nerede açılacağı belirtilebilir. Target parametresi kullanılırken; “_blank” değeri yeni bir sayfa olarak açılacaksa, “_self” değeri aynı pencere içinde açılacaksa, “_top” değeri de aynı pencere içerisinde üstten itibaren açılacaksa verilir. Eğer özel kodlama kullanılmıyor ise (örneğin CSS kullanılmıyor ise) linklerin altı çizgili ve mavi renkte görünürler.

< a href=”https://www.ilginize.com” target=”_blank”> HTML Etiketleri < /a>

Aynı sayfa içinde bağlantıyı diğer ifadeye link kurmak istersek de yine < a> etiketi kullanılabilir. Başka bir ifadeyle bu etiket ile aynı sayfa içinde belirlenmiş başka bir satır ya da paragrafa direkt geçiş yapılabilir.

Bağlantı başlığı aşağıdaki gibi belirlenir.
< a name=”link”> Bağlantı verilecek kelime < /a>

Sayfanın herhangi bir yerinde yukarıda belirtilen bağlantıya aşağıdaki gibi ulaşabiliriz.
< a href=”#link”>Bağlantıya git< /a>

HTML’de bir diğer etiket ise çerçeve (frame)’dir. Çerçeve etiketiyle aynı tarayıcı penceresinde birden fazla HTML sayfası görüntülenebilir. Tarayıcılarda her HTML sayfası bir çerçeve olarak görülür ve her çerçeve birbirinden bağımsız olarak çalışır. Bu etiket ile ilgili bilgiler özetlenecek olursa;

  • < frameset> ile pencerenin hangi formatta çerçevelere ayrılacağı belirlenir.
  • < frameset> kullanılırken satır veya sütunlar belirlenir.
  • < frame> etiketi ile de çerçevelerde hangi HTML sayfasının görüntüleneceği belirtilir.
  • HTML’de çerçeve etiketi ile tek bir sayfanın birden fazla bölüme ayrılması sağlanır.

Aşağıda verilen örnekte 2 sütundan oluşan çerçeveli bir sayfa bulunmaktadır. İlk çerçeve için ayrılan pencere genişliği %30’dur. İkincisine ise %70’i ayrılmıştır. “sol.html” birinci sütuna, “sag.html” ise ikinci sütuna yerleştirilmiştir:

HTML Çerçeve (Frameset) Etiketi Kullanımı
HTML Çerçeve (Frameset) Etiketi Kullanımı

Aşağıdaki tabloda ise sol ve sağ olarak ikiye bölünen pencerelerin web sayfaları ve içeriği verilmektedir.

HTML Çerçeve (Frameset) Etiketleri Kullanımı
HTML Çerçeve (Frameset) Etiketleri Kullanımı

Web sayfalarında istenilen yere istenilen genişlikte bir çerçeve yerleştirmek için iframe kullanılmaktadır. Aşağıda örnek bir iframe kod satırı verilmektedir.

< html>
< iframe src=”test.html” width=”250″ height=”400″ scrolling=”yes”>
< /html>

HTML’de tablolar < table> ….. < /table> etiketleri arasında oluşturulur. < table> etiketinden sonra < tr> ve < td> etiketleri kullanılır. Her satır oluşturulması için < tr>, her hücre oluşturulması için < td> etiketi yazılır.

HTML Tablo Etiketi Kullanımı
HTML Tablo Etiketi Kullanımı

Table etiketinin aldığı çok sayıda parametre vardır. Örnek bir tablo satırı şu parametreleri içerebilir:

< table border=”” cellspacing=”” cellpadding=”” height=”” width=”” bgcolor=”” align=”” valign=””>

  • border etiketi: Çerçevenin kalınlık değeri için kullanılır. border=”0″ şeklinde olursa tabloda çerçeve bulunmaz, 1 veya daha üzeri rakamlar kullanılırsa veya rakamlar arttırdıkça çerçevenin kalınlığı da artmış olur.
  • cellspacing, cellpadding etiketi: Hücrelerin içeriğinin satır ve sütunların uzaklığı cellspacing, sınırlara olan uzaklığı içinse cellpadding parametresi kullanılır.
  • bgcolor etiketi: < table bgcolor=”blue”> olarak kullanılırsa bütün tablo ya da < td bgcolor= “blue”> olarak sadece tek bir hücre renklendirilir.
  • align etiketi: Hücre içeriğinin yatay konumunu belirler ve “right, left, center” seçenekleri ile kullanılır.
  • valign etiketi: Hücre içeriğinin düşey konumunu belirler ve seçenekleri “top, bottom, middle” (üst, alt, orta)’dır.
  • rowspan, colspan etiketi: Aynı sütundaki hücreleri birleştirmek için rowspan, benzer olarak aynı satırdaki hücreleri birleştirmek için colspan tercih edilir.

Tabloları detaylandırmak istersek aşağıdaki farklı özellikleri de tablolara ekleyebiliriz.

  • < thead>……………. < /thead> başlık kısmını belirtir.
  • < th> …………… < /th> başlıktaki her bir alanı tanımlar.
  • < tbody> …………. < /tbody> içerik bölümünü ayırır.
  • < tfoot> ………….. < /tfoot> alt bölümü ayırır.
HTML Tablo Etiketi Kullanım Örneği
HTML Tablo Etiketi Kullanım Örneği

Yukarıdaki örnekte satır ve sütunlardan oluşan bir tablo örneği verilmiştir. Aşağıdaki örnekte ise hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametreleri kullanılmıştır.

HTML Tablo Etiketi Kullanımı
HTML Tablo Etiketi Kullanımı

HTML’de bir diğer etiket, Liste etiketidir ve 3 çeşidi vardır: Sıralı, sırasız ve tanımlamalı. Aşağıdaki tabloda en yaygın olan kullanım şekillerinden sıralı ve sırasız liste etiketine örnek verilmiştir. Sıralı listeler rakam, harf veya her ikisini iç içe kullanarak liste oluşturmayı sağlarken sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmayı sağlar. Tanımlama listeleri ise uzun metinlerde okumayı kolaylaştıran etikettir.

HTML Sıralı Liste Etiketi ve HTML Sırasız Liste Etiketleri Kullanımı
HTML Sıralı Liste Etiketi ve HTML Sırasız Liste Etiketleri Kullanımı

Sıralı ve Sıralamasız listelerde, liste ögelerini belirtmek için farklı semboller kullanılabilir. Aşağıda atanabilecek değerler ve açıklamaları verilmiştir.

Sıralamasız < ul> liste türleri :
disc
: İçi dolu daire
circle : İçi boş daire
square : İçi dolu ya da boş kare

Sıralamalı < ol> liste türleri :
1 : Onluk tabanda numaralama (1,2,3,4,…)
i : Küçük rakamlarla i, ii, iii, iv gibi Romen sayıları
I : Büyük rakamlarla I, II, III, IV gibi Romen sayıları
a : Küçük harflerle a, b, c gibi
A : Büyük harflerle A, B, C gibi

Tanımlı listeler başlık oluşturmak ve o başlıkların altında içerik paylaşmak için kullanılır. < dt> …… < /dt> etiketi ile başlıklar, < dd> …… < /dd> etiketi ile de başlıklara ait içerikler belirtilmektedir.

Formlar; < form> …… < /form> etiketleri arasında yazılır. Form değerleri action parametresinin içine yazılan dosyaya veri olarak gönderilir. Formlar sayesinde çeşitli anketler ve geri bildirim içeren sayfalar hazırlanabilir. Giriş (Input), Seçenek butonları (Radio Buttons), Kontrol kutuları (Checkboxes), Çok satırlı metin giriş alanı (textarea) kullanılan en yaygın form etiketleridir. Öncelikle aşağıdaki gibi basit bir form örneği yapalım:

HTML Form Etiketi Kullanımı
HTML Form Etiketi Kullanımı

Yukarıdaki örnekte, basit form elemanlarıyla iki adet (Adınız, Soyadınız) metin girişi yapılan bir form hazırlanmıştır. Bu form elemanlarını daha detaylandırmak mümkündür. Bunun için aşağıdaki örnek verilebilir.

< form name=”ornek” action=”veri.php” method=”post”>
Ad/Soyad : < input type=”text” size=”20″ name=”ad”>< br>
Doğum yeri : < input type=”text” size=”20″ name=”dogumyeriniz” >< br>
Doğum tarihi : < input type=”text” size=”10″ name=”dogumtarihiniz” >< br>
Cinsiyet : < input type=”radio” name=”cins” value=”erkek” >
Erkek < input type=”radio” name=”cins” value=”kadin”> Bayan< br>
Hobiler:< br>
< input type=”checkbox” name=”muzik” >Müzik dinlemek< br>
< input type=”checkbox” name=”kitap” >Kitap okumak< br>
< input type=”checkbox” name=”diger”>Diğer :< br>
< textarea rows=”4″ cols=”30″ name=”diger”>< /textarea>< br>
< input type=”submit” value=”GÖNDER”>
< input type=”reset” value=”SIL”>
< /form>

HTML Form Etiketleri Kullanımı
HTML Form Etiketleri Kullanımı

Yukarıdaki form kod satırlarını daha detaylı inceleyelim:

  • action: Formun gönderileceği dosyayı belirtir.
  • method: Formdaki bilgilerin hangi yöntemle (post/get) gönderileceğini seçmek için kullanılır.
  • type=”text”: Bir satırlık bir giriş alanı açar.
  • type=”checkbox”: Çok seçenekli soru hazırlanır.
  • type=”radio” : Tek seçenekli bir sorunun tek cevabını alınır.
  • type=”submit”: Formu action’la belirtilen dosyaya gönderen butondur.
  • < textarea rows=”” cols=””>: Çok satırlı metin alanları oluşturmak için kullanılır.

Method özelliği, form verilerinin gönderilme yöntemini belirtir. Veriler GET ve POST olmak üzere iki şekilde gönderilebilir.

Select ve option ise seçimlik listeler oluşturulurken kullanılan etiketlerdir. Option etiketi ile belirtilen listenin her bir elamanı oluşturulur ve fareyle seçilen bu elemanlardan biri select etiketinin değeri hâline gelir. Aşağıdaki örnekte Alfa Romeo select etiketinin değeri olmuştur.

HTML Select ve Option Etiketi Kullanımı
HTML Select ve Option Etiketi Kullanımı

HTML sayfalarında resimler < img> etiketi ile belirtilir. < img> etiketi özelliği gereği parametreler ile kullanılır ve bir bitiş etiketi bulundurmaz.

Sayfalarda resim görüntüleyebilmek için “src” parametresinin kullanılması zorunludur. Src, İngilizce source kelimesinin kısaltması, yani kaynak anlamına gelir. Buraya görüntülemek istenilen resim dosyasının yolu yazılır. “Alt” parametresi alternatif metin anlamına gelir. Başka bir ifadeyle, ilgili resmin üzerine fare gelip bir süre beklendiği zaman görünen metindir.

Örneğin; < img src=”resim.png” alt=”İlginize”>

Resim üzerinden başka bir belgeye bağlantı vermek için < img> etiketi < a> etiketi içerisinde kullanılmalıdır.

Aşağıda < img> etiketinin diğer parametreleri verilmiştir.

width : Piksel cinsinden resmin genişliğini belirtir.
height : Resmin yüksekliği belirtilir.
border : Resmin çevresindeki çizginin kalınlığı belirtilir.
align : Resmin yatay konumunu belirtir; left, right, center değerlerini alır.

YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.