HTML Nedir? Web Sayfalarının Temel Yapısını Anlama
HTML, web sayfalarının içeriğini ve yapısını tanımlayan işaretleme dilidir. Belge türü bildirimi, kök yapı, başlık ve gövde bölümleriyle sayfanın nasıl organize edildiğini belirler. Etiket, öğe ve öznitelik kavramları; başlık, paragraf, liste, bağlantı ve görsel gibi içeriklerin oluşturulmasını sağlar.
Bu yazıda (5)
HTML (HyperText Markup Language), web tarayıcılarının okuyup görüntülediği belgelerin içeriğini ve yapısını tanımlayan standart işaretleme dilidir. Bir web sayfasındaki metnin başlık mı, paragraf mı, bağlantı mı yoksa liste öğesi mi olduğunu belirtir; sayfanın renklerini ve etkileşimli davranışlarını ise tek başına belirlemez.
HTML’nin tanımı ve web sayfalarındaki rolü
HTML, programlama dilinden farklı olarak bir web belgesindeki içeriğin anlamını ve düzenini işaretlerle tanımlar. Metin, görsel, bağlantı ve benzeri içeriklerin belge içinde hangi konumda ve hangi işleve sahip olduğunu belirtir. Örneğin bir metni <h1> etiketiyle çevrelemek, onun sayfanın ana başlığı olduğunu ifade eder; <p> etiketi ise metni paragraf olarak tanımlar. Tarayıcı bu işaretleri ziyaretçiye doğrudan göstermez. HTML kodunu yorumlayarak başlığı, paragrafı veya bağlantıyı ekranda uygun biçimde oluşturur.
HTML’nin çalışma mantığı, belgenin içeriğini yapısal parçalar hâline ayırmaya dayanır. Bir sayfada ana başlık, açıklama paragrafı ve maddelerden oluşan bir liste varsa HTML bu parçaların her birini ilgili öğelerle belirtir. Böylece tarayıcı, düz bir metin yığını yerine düzenlenmiş bir belge oluşturabilir. HTML ile bir görsel de sayfaya eklenebilir; görselin hangi dosyadan alınacağı ilgili öznitelikle belirtilir. Benzer biçimde, bir bağlantı öğesi kullanılarak başka bir belgeye veya konuma geçiş sağlanabilir.
Örneğin aşağıdaki yapı, tarayıcıya bir başlık ve açıklama metni sunar:
<h1>Ogreniyo</h1> <p>Temel web bilgilerini öğrenin.</p>Tarayıcı sonucu yalnızca metin olarak değil, başlık ve paragraf arasındaki yapısal farkı dikkate alan bir sayfa olarak işler. HTML dosyası yerel depolamadan okunabilir veya bir web sunucusundan tarayıcıya gönderilebilir; tarayıcı da belgeyi yorumlayarak görünür web sayfasına dönüştürür. HTML dosyasının tarayıcıda görüntülenmesi, dosyanın açılması ve tarayıcının bu işaretleri işlemesi sürecidir.
HTML belgesinin temel yapısı
HTML belgesi, sayfanın hangi tür belge olduğunu ve içeriğin nasıl düzenlendiğini belirleyen katmanlı bir yapıya sahiptir. En dışta genellikle <html> kök öğesi bulunur. Bu öğenin içinde, tarayıcıya belge hakkında bilgi veren <head> bölümü ile ziyaretçiye sunulan içeriği taşıyan <body> bölümü yer alır. Bu düzen, belgenin ayarlarıyla görünen içeriğini birbirinden ayırır.
Belgenin başındaki <!DOCTYPE html> bildirimi, belgenin HTML5 olarak ele alınmasını ve tarayıcının standartlara uygun görüntüleme modunu kullanmasını ister. Bu satır bir HTML öğesi gibi sayfa içeriği oluşturmaz; tarayıcıya belge türü hakkında bilgi verir. Bildirim bulunmadığında tarayıcılar farklı, eski uyumluluk kurallarına dayanan bir görüntüleme moduna geçebilir.
<head> bölümü sayfada doğrudan görünmeyen belge bilgilerini içerir. Örneğin <title> öğesi, tarayıcı sekmesinde görünen sayfa başlığını tanımlar. <meta> öğeleri de sayfa hakkında meta veriler belirtmek için kullanılabilir. Ziyaretçinin sayfa içinde gördüğü başlıklar, paragraflar, listeler ve görseller ise çoğunlukla <body> bölümüne yazılır.Basit bir HTML belgesi şu şekilde organize edilebilir:
<!DOCTYPE html> <html> <head> <title>Örnek sayfa</title> </head> <body> <h1>Sayfama hoş geldiniz</h1> <p>Bu metin gövde bölümünde görüntülenir.</p> </body> </html>Burada <html>, belgenin kökünü; <head>, belgeye ilişkin bilgileri; <body> ise görünür içeriği kapsar. Etiketlerin iç içe yerleşmesi, bir öğenin başka bir öğenin içinde bulunduğunu ve belgenin hiyerarşik yapısını gösterir. Anlamsal HTML yaklaşımı da öğeleri yalnızca görüntü biçimine göre değil, taşıdıkları anlama göre seçmeyi amaçlar.
Etiket, öğe ve öznitelik kavramları
HTML kodunu anlamak için etiket, öğe ve öznitelik arasındaki farkı ayırmak gerekir. Etiket, köşeli ayraçlar arasında yazılan işaretleme parçasıdır. Örneğin <p> bir başlangıç etiketi, </p> ise ona karşılık gelen bitiş etiketidir. Öğe ise başlangıç etiketi, içerik ve bitiş etiketinin birlikte oluşturduğu bütündür. Bu nedenle <p>Bir açıklama.</p> ifadesinin tamamı bir paragraf öğesidir; içindeki metin de bu öğenin içeriğidir.
Birçok öğe başlangıç ve bitiş etiketiyle kullanılır. Başlangıç etiketi öğenin başladığını, eğik çizgi içeren bitiş etiketi ise öğenin sona erdiğini bildirir. Öğeler iç içe de bulunabilir. Örneğin bir bağlantı öğesinin içinde metin veya görsel yer alabilir. Bu iç içelik, HTML belgesinde üst öğe ve onun alt öğeleri arasında hiyerarşi kurulmasını sağlar. Bazı öğeler ise içerik taşımaz ve kapanış etiketi kullanmaz. <br> satır sonu oluştururken, <img> bir görseli belgeye ekler.
Öznitelik, bir öğe hakkında ek bilgi veren ve genellikle başlangıç etiketi içinde yazılan ad-değer çiftidir. Bir bağlantının hedefini href, bir görselin kaynağını src özniteliği belirleyebilir. Örneğin: <a href="https://example.org">Örnek sayfaya git</a> <img src="gorsel.jpg" alt="Manzara" width="300">
İlk satırdaki href, bağlantının gideceği adresi tanımlar. İkinci satırdaki src görsel dosyasını belirtir; width ise görselin genişliğiyle ilgili ek bilgi verir. Böylece aynı öğe türü, farklı öznitelik değerleriyle farklı kaynaklara veya özelliklere bağlanabilir. Öznitelik yazılmadığında ilgili öğe için varsayılan davranış kullanılabilir. Kısaca etiket işaretin kendisi, öğe işaret ile içeriğin oluşturduğu yapı, öznitelik ise bu yapıya eklenen bilgidir.
HTML ile içerik ve yapı oluşturma
HTML, metin ve medya içeriklerini anlamlı bir belge düzenine yerleştirir. Başlıklar içeriğin önem ve hiyerarşi düzeyini, paragraflar açıklama metinlerini, listeler ilişkili maddeleri, bağlantılar başka konumlara geçişleri gösterir. Bu yaklaşımda amaç yalnızca metni ekranda biçimlendirmek değil, her parçanın belge içindeki görevini belirtmektir. Tarayıcı bu yapıya göre varsayılan bir görünüm oluşturabilir; görünümün ayrıntıları daha sonra CSS ile değiştirilebilir.
Yaygın öğeler farklı içerik ihtiyaçlarına karşılık gelir. <h1> ana başlık için, <h2> daha alt düzeydeki bir bölüm başlığı için kullanılabilir. <p> paragraf oluşturur. <ul> ve <ol> listeyi, <li> ise listedeki tek bir maddeyi belirtir. Bir bağlantı için <a> kullanılır ve bağlantının hedefi href özniteliğiyle verilir. Görsel eklemek için <img> kullanılır; bu öğe src özniteliğiyle dosya kaynağını belirtir. Örneğin bir ders sayfasının iskeleti şöyle kurulabilir:
<h1>Fotosentez</h1> <p>Bitkilerin ışık enerjisini kullanarak besin üretme süreci.</p> <ul> <li>Işık</li> <li>Su</li> <li>Karbondioksit</li> </ul> <a href="dersler.html">Diğer derslere geç</a>Bu örnekte HTML; başlığı, açıklamayı, maddeleri ve geçiş bağlantısını birbirinden ayırır. İçerik arttıkça öğelerin iç içe düzenlenmesi, sayfanın hangi bölümünün ne işe yaradığını takip etmeyi kolaylaştırır. Görsel sunumun ayrıntılarını HTML etiketlerine rastgele görünüm bilgileri eklemek yerine CSS ile ayırmak, yapının ve tasarımın daha düzenli yönetilmesini sağlar. Formlar ve kullanıcıdan veri alma ise HTML’nin burada ele alınmayan ayrı bir kullanım alanıdır.
HTML, CSS ve JavaScript arasındaki temel görev ayrımı
HTML sayfanın içeriğini ve yapısını kurar. CSS renk, yazı tipi, boşluk ve yerleşim gibi görünüm özelliklerini düzenler; JavaScript ise sayfanın davranışını ve değişen içeriğini programlamaya yardımcı olur. Bu üç teknoloji birlikte kullanılabilir, ancak HTML’nin temel görevi yapı ve anlamı tanımlamaktır.
Bir haber sitesinde haber başlığının, açıklama paragrafının, madde listesinin ve başka haberlere giden bağlantıların farklı görevlerle sunulması HTML yapısıyla sağlanır. Renk, yazı boyutu ve sayfa düzeni değişse bile bu içerik parçalarının ne olduğu HTML öğeleriyle tanımlanır.
Etiket ile öğeyi karıştırmamak ayırt edici noktadır: <p> yalnızca etikettir, <p>Metin</p> ise paragraf öğesidir. href bağlantının hedefini, src ise görsel kaynağını belirtir; <head> belge bilgilerini, <body> görünür içeriği taşır.
Sık sorulan sorular
HTML bir programlama dili midir?
HTML, programlama dilinden çok web belgesinin içeriğini ve yapısını tanımlayan bir işaretleme dilidir. Hesaplama ve davranış için genellikle JavaScript gibi bir betik dili kullanılır.
HTML etiketi ile HTML öğesi arasındaki fark nedir?
Etiket, köşeli ayraçlarla yazılan işaretleme parçasıdır. Başlangıç etiketi, içerik ve bitiş etiketinin birlikte oluşturduğu yapı ise öğe olarak adlandırılır.
HTML dosyasında head ve body ne işe yarar?
head bölümü başlık ve meta veriler gibi belge bilgilerini içerir. body bölümü, tarayıcıda sayfa içeriği olarak görüntülenen başlık, paragraf, liste ve diğer öğeleri taşır.
HTML ile CSS arasındaki temel fark nedir?
HTML içeriğin ve yapının ne olduğunu tanımlar; CSS bu içeriğin renk, yazı, boşluk ve yerleşim gibi görsel özelliklerini düzenler.
- •Wikipedia (EN) — HTML — HTML / girisen.wikipedia.org