KATEGORİLER

HTML Etiketler

HTML Etiketler Dersleri

1. <html> </html> Etiketi ;

Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır.

Örnek :

1 <html>
2 <head>... head etiketinin içeriği ....</head>
3 <body>
4   ....
5   body etiketinin içeriği
6   ....
7 </body>
8 </html>

2. <head> </head> Etiketi ;

Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.

<html>
  <head>
    <title>.....</title>
  </head>
  <body>
    ....
    body etiketinin içeriği
    ....
  </body>
</html>

3. <body> </body> Etiketi ;

HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.

Tablo 1.1. Body etiketinin bileşenleri

Girilecek Kod	Görevi
text = “renk”	Sayfanızdaki yazıların rengine `renk` ile belirtilen değeri verir.
link = “renk”	Sayfanızdaki bağların rengine `renk` ile belirtilen değeri verir.
vlink = “renk”	Sayfanızdaki ziyaret edilmiş bağların rengine `renk` ile belirtilen değeri verir.
alink = “renk”	Sayfanızdaki aktif bağların rengine `renk` ile belirtilen değeri verir.
bgcolor = “renk”	Sayfanızın arka plan rengine `renk` ile tanımlı değeri verir.
background = “resim_dosyası”	Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, `resim_dosyası` kullanacağınız resmin adını temsil eder.
topmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.
leftmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.
rightmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.
onload = “betik”	Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload = “betik”	Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.

Yukarıdaki tabloda kullandığım renk değeri HTML içinde kullanılan renk kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık tabanda sayılarla istediğimiz rengi elde edebiliriz.

Renk kodları hakkında kısa bir bilgi vermek gerekirse kodlar ikişer basamaklı üç bölümden oluşur. Aşağıdaki tablo bu konu hakkında kafanızda oluşan soru işaretlerinin silinmesinde size yardımcı olacaktır.

Tablo 1.2. Renk Kodlarının Yapısı

Kırmızı	Yeşil	Mavi
00...FF	00...FF	00...FF

2. Satırda ifade ettiğim aralıklara değişik değerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi oluşturmamız mümkündür. Kod kullanmanın yanı sıra renkleri doğrudan İngilizce adlarını yazarak da kullanabiliriz. Örneğin beyazın kodu olan #FFFFFF yerine white yazmamızda sonucu değiştirmeyecektir.

Tablo 1.3. Bazı Renkler ve Kodları

Renk Adı	Kodu
black (siyah)	#000000
maroon (k.kırmızı)	#800000
green (k.yeşil)	#008000
navy (lâcivert)	#000080
purple (k.mor)	#800080
teal (k.türkuaz)	#008080
oliver (hâki)	#808000
gray (gri)	#808080

Renk Adı	Kodu
silver (gümüş)	#C0C0C0
red (kırmızı)	#FF0000
lime (yeşil)	#00FF00
blue (mavi)	#0000FF
magenta (mor)	#FF00FF
aqua (türkuaz)	#00FFFF
yellow (sarı)	#FFFF00
white (beyaz)	#FFFFFF

Dikkat ederseniz her renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu altı basamak içinde F yada f bulunduğu basamaktaki rengin tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder.

<body text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000">

<body text="#000000" background="../resimler/arkafon.gif">

<body bgcolor="#334455" text=”#ffffff" topmargin="0">

Yukarıdaki birinci kod satırı sayfamızın arka plan rengini beyaz, yazıları siyah, bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır.

İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki “resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullanılır.

Yazdığım son satır ile de sayfamın arka fon ve yazı rengini belirliyor, sayfamın bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlıyorum.

4. <title> </title> Etiketi ;
Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.

<head>
<title>İlk HTML denemem</title>
</head>

5. <center> </center> Etiketi ;

Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar.

<center>
....
Burası etiketin yorum aralığı
.....
</center>
...
Burası center etiketinin yorum aralığının dışında

6. <hx> </hx> Başlık Etiketleri

Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.

Bu etiket ile birlikte bir önceki etiket olan etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align="center">Bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır.

<h1 align="center" style="color:black;">Bu başlıklar gittikçe küçülecek!!!</h1>
<h2 align="center" style="color:blue;">Bu başlıklar gittikçe küçülecek!!!</h2>
<h3 align="center" style="color:navy;">Bu başlıklar gittikçe küçülecek!!!</h3>
<h4 align="center" style="color:green;">Bu başlıklar gittikçe küçülecek!!!</h4>
<h5 align="center" style="color:maroon;">Bu başlıklar gittikçe küçülecek!!!</h5>
<h6 align="center" style="color:purple;">Bu başlıklar gittikçe küçülecek!!!</h6>

Yukarıdaki örneğin istemci çıktısı aşağıdakine benzer olacaktır.

Bu başlıklar gittikçe küçülecek!!!

7. , , <s> </s>, , <big> </big>, , <tt> </tt>
Bunlar yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir.

<b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>,
<small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt>

kalın, eğik, ~~üstü çizili~~, altı çizili, küçük, büyük, daktilo yazısı

8. , 
Formül ve benzeri metinleri yazarken kullanılır.

H<sub>2</sub>SO<sub>4</sub> <br>
E = mc<sup>2</sup>

H₂SO₄
E = mc²

9. <hr> Etiketi ;

Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Bu etiket ile tanımlanabilecek üç değişik özellik vardır.

Tablo 1.4. hr etiketi içinde kullanılan kodlar

Girilecek Kod	Görevi
width = "genişlik"	Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır.
size = "kalınlık"	Çizilecek çizginin kalınlığını belirtir.
color = "renk"	Çizilecek çizginin rengini belirtir.

Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi


<hr width="100%" color="#0000F8" size="4">
çizer.

Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi

çizer.

10. ve Etiketi ;

BR etiketinin sonlandırıcısı () yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır.

Burada bir metin var
Bir alt satıra geçtiğimi sanıyorum!

Yukarıdaki metin ekran yan yana basılacaktır. Her ne kadar kodu yazarken satır atlayarak yazmış olsak bile browser bu kodu yorumlarken arada etiketi olmadığı için bu iki cümleyi yan yana basacaktır. Kodun doğru kullanımı

Burada bir metin var <br>
Bir alt satıra geçtim!

şeklinde olmalıdır.

ve etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir.

Tablo 1.5. etiketinin bileşenleri

Girilecek Kod	Görevi
align = "left"	Paragrafı sola dayalı olarak yazar.
align = "right"	Paragrafı sağa dayalı olarak yazar.
align = "center"	Paragrafı ortalar.
align = "justify"	Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir.
class = "css_etiketi"	Önceden tanımlı bir CSS dosyasındaki font-size, color... gibi özellikleri paragrafa uygular.
style = "css:tanımı1;css:tanımı2;..."	font-size, color... gibi css tanımlarını paragrafa uygular.

<p align="justify">
Burada bir metin var.<br>
Bir alt satıra geçtiğimi sanıyorum!   Daha önceki örneğe ek olarak
yazımı bir paragraf içinde yazıyorum.
</p>

Burada bir metin var.
Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak yazımı bir paragraf içinde yazıyorum.

11. <pre> </pre> Etiketi ;

Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler.

<pre>
switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}
</pre>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını vermek için kullanışlıdır.

<dt> ve <dd> etiketleri <dl> etiketinin yorum aralığı içinde kullanılır. <dt> etiketi terim, <dd> etiketi ise açıklaması için kullanılır. Bir örnekle kullanımı daha kolay anlaşılacaktır.

<dl>
  <dt>align = "left"</dt>
  <dd>Paragrafı sola dayalı olarak yazar.</dd>

  <dt>align = "right"</dt>
  <dd>Paragrafı sağa dayalı olarak yazar.</dd>
</dl>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

align = "left"

Paragrafı sola dayalı olarak yazar.
align = "right"

Paragrafı sağa dayalı olarak yazar.

13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>

Yukarıdaki bölümde anlatılan tanımlama listesinden başka iki tür liste daha vardır. <ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir.

Bu etiketlerle kullanılabilecek yardımcı kodları aşağıdaki tabloda belirttim.

Tablo 1.6. Liste kullanımı için yardımcı kodlar

Girilecek Kod	Görevi
type = "listeleme türü"	Bu alanda belirtilebilecek değerleri aşağıda bir tablo halinde verdim.
start = "değer"	Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır.
value = "değer"	Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. `start = "değer"` parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir `"değer"` belirtilebilir.

Sıralamasız liste (<ul>) türü değerleri:

Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır:

disc - İçi dolu bir daire görüntüler
circle - İçi boş bir daire görüntüler
square - İçi dolu ya da boş bir kare görüntüler

Tablo 1.7. Sıralı liste (<ol>) türü değerleri

Türü	Sıralama
1	Onluk tabanda numaralama (1,2,3,4,...)
i	Küçük rakamlarla romen sayıları (i,ii,iii,iv,...)
I	Büyük rakamlarla romen sayıları (I,II,III,IV,...)
a	Küçük harflerle alfabetik (a,b,c,...)
A	Büyük harflerle alfabetik (A,B,C,...)

Örnek:

<ol type="i">
  <li> Birinci öğe...</li>
  <li> İkinci öğe ...
     <ul type="square">
       <li>İkinci öğenin bir öğesi...
       <li>İkinci öğenin başka bir öğesi...
     </ul>
  </li>
  <li> Üçüncü öğe...</li>
</ol>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

Birinci öğe...
İkinci öğe ...
- İkinci öğenin bir öğesi...
- İkinci öğenin başka bir öğesi...
Üçüncü öğe...

14. <img> Etiketi ;

Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP'lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.

Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

html etiketler