HTML5 Belgesinin Yapısı | Gürkan ve Kalemi

Gürkan ve Kalemi

Tamamen Kişisel


HTML5 Belgesinin Yapısı

08 Temmuz 2017 @ HTML/XHTML


HTML5

Bir HTML5 belgesinin yapısından bahsedeyim bugün. Böylece aynı zamanda HTML5 belgesi nasıl oluşturulur, bunun üzerinde durmuş olalım. Aslında mantık, HTML’deki gibi aynı. En başta belge tanımlaması, altında html etiketi ve onun altında diğer HTML etiketleri. Başlayalım. Önce belge tanımlaması…

HTML5 belgemizin en tepesinde

<!DOCTYPE html>

yer alır. Bu şekilde HTML5 belgemizin türünü belirtmiş oluruz. Bundan sonra sayfanın dilini ve karakter kodlamasını sırasıyla şöyle belirtiriz:

<html lang="en">

Tabi Türkçe sayfalar için “en” değil “tr” yazmak gerekli.

<meta charset="UTF-8">

Ek stil dosyları (CSS) ile JavaScript (JS) dosyaları ise şöyle eklenir:

CSS:

<link rel="stylesheet" href="stylefile.css">

JS:

<script src="scriptfile.js"></script>

Buradaki en önemli fark, JS dosyalarını eklerken önceden, yukarıdaki kodda type="text/javascript" ve CSS dosyalarını eklerken yine yukarıdaki kodda type="text/css" kısmını kullanmak durumundaydık. Şimdi böyle bir kullanım gerekmiyor.

Böylece ilk belgemizin yapısı şöyle olacaktır:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>...başlık...</title>
...
</head>
<body>
...
</body>
</html>

Bunlar dışında belge içinde kullanabileceğimiz bazı etiketler var. Bunlar HTML5’e özel. En önemlileri; article, section, footer, figure, video, nav, aside, header. Bunları da sonraki konuda tanımlayalım.

HTML5 belgemizin ana hatlarından kabaca bahsettik. Şimdi de HTML5’te, div yapısından bahsedelim kısaca. HTML5’te elementler bir elemanın çeşitli özelliklerini ayarlamak için kullanılır özelliklerini içerebilir.

Diğer belirli elemanları sadece bazı özellikler için tanımlı olup, herhangi bir öğe genel olarak tanımlandığı gibi kullanılabilir. Tüm özellikleri bir isim ve bir değer ile aşağıdaki gibi kullanmak mümkün oluyor.

<div class="testDIV">...</div>

Bu div değeri için kullanabileceğimiz seçenekler ve bu seçeneklerin fonksiyonlarını şöyle tablo olarak verebiliriz:

Standart Özellikler
Nitelik Seçenek İşlev
accesskey Kullanıcı tanımlar Öğeye erişmek için bir klavye kısayolu belirtir.
align sağ(right), sol(left), orta(center) Etiketleri yatay olarak sağa, sola ve ortaya konumlandırır.
background URL (Bağlantı) Bir elemana arka plan görüntüsü yerleştirir.
bgcolor Sayısal, onaltılık (hexidecimal), RGB değerleri Bir elemana arka plan rengi atar.
class Kullanıcı tanımlar Cascading Style Sheets (CSS) ile kullanmak için bir elemana sınıf değeri atar.
contenteditable Doğru (true), Yanlış (False) değerlerinden birini alır. Bir elementin düzenlenebilir olup olmadığını belirtir.
contextmenu Menü kimliği (menu id) Bir eleman için bağlam menüsünü belirtir.
data-XXXX Kullanıcı tanımlar Özel nitelikler. Kullanıcı tanımlar. “data-” ile başlamalıdır.
draggable Sayısal, onaltılık (hexidecimal), RGB değerleri Bir kullanıcıya bir elemanı sürüklemek için izin verilip verilmediğini belirtir.
height Sayısal değer Tablolar, resimler ya da tablo hücrelerinin ve daha pekçok elementin yüksekliğini belirtir.
hidden Element gizleme Bir elemanın görünür olup olmayacağını belirtir.
id Kullanıcı tanımlar Cascading Style Sheets (CSS) ile kullanmak için bir elemana isim atar. Her div için ayrı ayrı tanımlanmalıdır.
item Liste öğesi Öğe grubuyla kullanılır.
itemprop Liste maddesi Madde grubuyla kullanılır.
spellcheck Doğru (true), Yanlış (False) değerlerinden birini alır. Öğenin yazım veya dilbilgisi kontrolüne tabi olup olmadığını belirtmek için kullanılır.
style (CSS) Stil dosyası Bir eleman için satır içi stil belirtir.
subject Kullanıcı tanımlar. Öğeye karşılık gelen elemanları belirtir.
tabindex Sekme numarası Bir elemanın sekme sırasını belirtir.
title Kullanıcı tanımlar. Ayrı pencerede açılan elemanın başlığını belirtir.
valign top (üstte), middle (ortada), bottom (aşağıda) Bir HTML öğesi içinde etiketleri dikey hizalar.
width Sayısal değer. Tablolar, resimler, ya da tablo hücrelerinin ve daha pekçok elementin genişliğini belirtir.

Yukarıdaki niteliklerden data, yeni bir özelliktir. Kullanımı için şöyle bir örnek verebiliriz:

<div class="ornek" data-subject="matematik" data-level="ileri seviye">...</div>

Burada data-subject ve data-level denilen iki özel nitelik HTML5 için son derece kullanışlı olmaktadır. Standart özellikler için de benzer şekilde, JavaScript API’leri veya CSS kullanarak bu özelliklerin değerlerini belirlemek mümkün olacaktır.


Yorum yapın...