Html ile Web İşlemleri 8 - Anlamsal HTML5 Etiketleri
ANLAMSAL HTML5 ETİKETLERİ
Anlamsal (semantik) etiket, bir web belgesinin genel düzenini oluştururken belgeyi daha anlamlı hâle getirmek için tasarlanmış etiketler kümesidir. HTML5’ten önceki sürümlerde anlamsal yetersizlik vardır. Tasarımcılar, bu sorunu class ve id kullanarak çözmeye çalışmıştır fakat bu çözüm, kodları daha karışık hâle getirmiştir. HTML5’te anlamsal etiketler (semantic elements) kullanılarak bu sorun çözülmüştür. HTML5 ile menü, içerik, sayfa alt bilgisi (footer) vb. kısımlar için anlamsal etiketler kullanılmaktadır. Anlamsal bir etiket hem tarayıcı hem de geliştirici için açıkça anlaşılır.
Anlamsal olmayan etiketlere örnek:
<div> ve <span> içeriği hakkında hiçbir bilgi vermez. HTML belgesinde bu etiketlere id özelliğini tanımlamadan bir anlam yüklemek zordur.
Anlamsal etiketlere örnek:
<form>, <table> ve <article> kutu modeline göre içeriğinde neyi barındıracağını açıkça tanımlar. HTML belgesinde bu etiketler içeriğinde neleri barındıracağı hakkında fikir verir.
DOCTYPE bildirimine göre HTML5 belgesinde kullanılabilecek etiketler ve açıklamaları Tablo 3.1’de verilmiştir.
|
Etiket |
Açıklama |
|
<canvas> |
Sayfada bir tuval
alanı oluşturur. Tuvale çizim javascript ile yapılabilir. |
|
<audio> |
Sayfaya ses oynatıcı
bir modül ekler. |
|
<video> |
Video oynatıcı bir
modül ekler. |
|
<progress> |
İşlem süreci göstergesi
ekler. |
|
<caption> |
Başlık olarak düşünülen
metinleri düzenler. |
|
<header> |
Sitenin başlık ve açıklama
içeriğini içine alır. |
|
<nav> |
Menüleri ve bir takım
zaruri işlevleri içine alır. |
|
<footer> |
Sitelerin en alt kısmını
içine alır. |
|
<action> |
Sitelerin ana içerik
kısmını içine alır. |
|
<aside> |
Ana içerikte yazılan
kısım <aside> ile ayrılır. |
|
<article> |
Makale, deneme tarzı
yazılar <article> ile yazılır. |
|
<embed> |
Dışarıdan eklenen
bileşenler (component) için kullanılır (swf uzantılı dosyalar vb.). |
|
<details> |
Detay bilgisi içerir.
|
|
<summary> |
Yazının başlığını
belirler. |
|
<time> |
Tarih ve saat
verilerini kapsar. |
|
<mark> |
Yazı içerisinde özellikle
üstünde durulan kelimeleri belirler. |
|
<figcaption> |
<figure>
elementinin başlığını belirler. |
|
<figure> |
Çeşitli medya içeriği
gruplarını belirler. |
|
<hgroup> |
Başlık grubunu
belirler. H1, H2 gibi başlık elementleri burada tanımlanabilir. |
|
<datalist> |
Düzenlenebilir
elemanlara otomatik tamamlama özelliği verilmesini sağlar. |
Modüler Sistem Konuları
BAĞLANTI (KÖPRÜ) OLUŞTURMA
4.1. Sayfa İçi Bağlantı Oluşturma
Html kodları kullanarak, sayfa içi bağlantılar oluşturabilirsiniz. Bir sayfadaki metne tıklayarak, aynı sayfanın başka bir bölümüne gidebilirsiniz. Bu işlem çapa olarak da adlandırılır.
Çapa oluşturma işlemi;
<a href="#...">...</a>, <a name="....">...</a> komutları kullanılarak yapılmaktadır.
<a href=”#...”> ile tıklanmasını istediğimiz metin; <a name=”...”> ile de karşımıza gelmesini istediğimiz bölüm belirlenir.
<a href="#ornek">Html Nedir?</a> <a name="ornek">Hyper Text Markup Language</a> Html Nedir? Hyper Text Markup Language
ÖĞRENME FAALİYETİ-4
AMAÇ
ARAŞTIRMA
Yukarıdaki kodları yazıp çalıştırdığımız zaman karşımıza aşağıdaki görüntü gelecektir.
Hiç yorum yok