HTML Etiketler 1

WEB Tasarımı ve Programlama 09 Aralık 2018 - 16:31 352 KEZ OKUNDU 0 YORUM YAPILDI

HTML Etiketler 1
Sayfayı Paylaş...
  •  
  • 2
  • 1
  •  
  •  

HTML(Hyper Text Markup Language)

HTML, diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML ile sayfadaki metin, resim, animasyon ve diğer nesnelerin nerede nasıl görüntüleneceği ayarlanır.
 
HTML herhangi bir text (metin) editörü (Notepad,Word, Notepad++, Dreamweaver, …) ile hazırlanabilir. Biz Notepad++ üzerinde kodlama yapacağız.
 
Notepad++ ile kodlama yaparken web sayfamızda Türkçe karakter problemi yaşamamak için editörümüzün karakter kodlamasının UTF-8 olması gerekmektedir.
 
Aşağıdaki resimde notepad++’da UTF-8 ayarlarının nereden yapılacağı görülmektedir.
 
Bu ayar için Ayarlar–>Tercihler–>Yeni Belge–>Kodlama–>UTF-8 yolu takip edilir.
notepad++
NotePad++ UTF-8 Kodlama Ayarı
Adobe Dreamweaver programında varsayılan ayar UTF-8‘dir bu nedenle herhangi bir ayarlama yapmak gerekmemektedir.
 
Kaydedilecek olan web sayfalarının uzantısı .html olmalıdır. Ana sayfanın adı ise index.html olmalıdır. Öncelikle sitemizi barındıracak bir klasör oluşturduktan sonra tüm sayfalarımızı bu klasörün içine uzantısını .html vererek kaydetmekte yarar vardır.
 

HTML Yazım Kuralları

Programlama dillerinin kendilerine özgü kuralları vardır. HTML dilinin de kendine özgü bazı kuralları vardır. Bunlardan en önemlileri şunlardır:

  • Komutlar büyük ya da küçük harfle yazılabilir. (<html> veya <HTML>)
  • Komutlarda Türkçe’ye özgü karakterler kullanılmaz. (ç, Ç, ğ, Ğ, ı, İ, ö, Ö, ş, Ş, ü, Ü)
  • Komutlar <  > işaretleri arasında yazılır ve buna etiket (tag) adı verilir.
  • Bazı etiketler hariç her etiketin bir kapanışı vardır.(<html>…..</html>)
  • Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.  (<html><body><p></p></body></html>)
 
Kodların okunabilirliğini artırmak için bir etiket bitmeden başka bir etiket açılırsa sonradan açılan etiket girinti verilerek yazılmalıdır. (Girinti vermeden yazılan kodlar da çalışır, sadece görsel açıdan düzensiz görünür.)

Aşağıda iç içe açılmış ve kapatılmış HTML etiketleri görülmektedir.

Etiketlerin Açılış ve Kapanışları

Yeni HTML versiyonlarında her etiketin bir kapanışının olması gerekmektedir. İlk HTML versiyonlarında bazı etiketler kapatılmazken tüm bu etiketler de artık kapatılmaktadır.

Bir HTML etiketi; açılışı ile kapanışı arasında etkilidir. Kapanışın açılıştan farkı önüne / işaretinin konmasıdır.

Açılış               Kapanış

<etiket>……….</etiket>

Yeni HTML versiyonlarında açılış ile kapanış aynı anda şu şekilde yapılabilmektedir.

Açılış-Kapanış

<etiket/>

İç içe yazılmış olan etiketlerin kapanışında önce içteki etiketlerin kapatılmasına sonra dıştaki etiketlerin kapatılmasına dikkat edilir.

Aşağıda etiket kodlarının yazılışına ait örnek görülmektedir.

Aşağıda birden fazla iç içe HTML etiketi açma kapama örneği görülmektedir.

Yukarıdaki HTML kodu çalıştırıldığında sayfamızın görüntüsü şöyle olacaktır.

Burada dikkat ederseniz meta etiketinin kapanışı kendi içinde yapılmıştır. Diğer etiketler de ise; açılan bir etiketin kapanışı yapılmadan yeni bir etiket açıldığında ikinci açılan etiket kapatılmadan ilk etiket kapatılmamıştır.
 
Örneğin: <body> altında <ul> açıldığından; </ul> kapatıldıktan sonra </body> kapanışı gelmiştir.
 

Parametre Kullanımı

Bazı etiketleri biçimlendirmek için etiketin açılışına yazılan parametre denilen özellikler vardır. Bu özellikler (parametreler) sayesinde etikete ait diğer özellikler kullanılabilmektedir. Parametreleri yazarken şunlara dikkat edilmelidir.
  • Parametreler açılış etiketlerinin içine yazılır.
  • Her parametre bir boşluk ile ayrılır.
  • Parametreye eşittir (=) ile atanan değer çift tırnak içinde yazılır.
  • Her etiketin farklı parametresi olabileceğinden doğru parametreleri doğru etiketlerde kullanmalıyız.

Kullanımı:

Açılış                                                                                                       Kapanış

<etiket parametre1=“değer1” parametre2=“değer2” > .…. </etiket>

Örnek: body etiketinin bgcolor parametresine red değerini atayarak web sayfasının arkaplan rengini kırmızı yapalım.

<body bgcolor=“red”>

      ………….

</body>

HTML Etiketler 2 Konu Anlatımı için Tıklayınız…

web tasarımında temel ilkeler




BU KONULAR DA İLGİNİZİ ÇEKEBİLİR

HTML Etiketler 5

Bağlantı (Köprü - Link) Oluşturma

HTML Etiketler 4

Metin Düzenleme Etiketleri

HTML Etiketler 3

Listeleme Etiketleri

HTML Etiketler 2

Web Sayfasının Genel Yapısı

BU MAKALEYE YORUM YAP