Merhaba Webkolog takipçileri!
Bugün sizlere web dünyasının vazgeçilmezi olan, her internet sitesinin temelini oluşturan HTML'den bahsetmek istiyorum. Web'in olmazsa olmazı HTML'i 4.01 versiyonu üzerinden bu dili daha yakından tanıyacağız.
---HTML Nedir ve Ne İçin Kullanılır?
HTML, açılımıyla HyperText Markup Language, web sayfalarının yapısını oluşturmak için kullanılan bir işaretleme dilidir. "İşaretleme dili" dememizin özel bir nedeni var: HTML, bir programlama dili değildir. Yani 2+2=4 gibi matematiksel işlemler yapma kabiliyetine sahip değildir. Peki ne işe yarar?
HTML, web sitelerinin sayfalarının tarayıcınızda nasıl görüneceğini belirleyen kodları barındırır. Web sayfanızdaki başlıklar, paragraflar ve diğer tüm içerikler HTML etiketleri ile düzenlenir. Aslında, CSS (tasarım) veya JavaScript (etkileşim) gibi diğer web teknolojilerini çalıştırmak için bile en temelde bir HTML belgesine ihtiyacınız vardır.
Bu arada şunu da unutmayalım, HTML olmadan web sayfası da olmaz. HTML, web sayfalarının temelidir.
---HTML Dosyaları ve Düzenleme
HTML kodları, genellikle ".html" veya ".htm" uzantılı metin tabanlı dosyalara yazılır. Bu dosyaları herhangi bir basit metin düzenleyici (örneğin Not Defteri) ile açıp düzenleyebilirsiniz. Ancak daha profesyonel ve kolay bir kodlama deneyimi için Visual Studio Code, Sublime Text gibi kod editörleri kullanmanızı şiddetle tavsiye ederim. Bu editörler, yazdığınız kodları renklendirerek, otomatik tamamlama özellikleriyle ve hata denetimiyle işinizi çok daha kolaylaştırır.
---HTML'in Temel Özellikleri
- Hiyerarşik Yapı: HTML belgeleri, tıpkı bir aile ağacı gibi hiyerarşik bir yapıya sahiptir. "Ebeveyn" (parent) ve "çocuk" (child) öğeler bulunur. Bir öğe, başka bir öğenin içinde yer alabilir ve bu da iç içe geçmiş bir düzen oluşturur.
- Görüntü Odaklıdır: HTML, XML'e benzer bir yapıya sahip olsa da, XML veri depolamak için kullanılırken, HTML web sayfasının görünümünü ve yapısını oluşturmak için kullanılır.
- Büyük/Küçük Harf Duyarsızlığı: HTML etiketleri büyük/küçük harfe duyarlı değildir. Yani
<html>ile<HTML>arasında tarayıcı açısından bir fark yoktur. Ancak iyi bir pratik olarak hep küçük harf kullanmanızı öneririm. - İstemci Taraflı Çalışır: HTML kodları, web sunucusunda değil, doğrudan web tarayıcınızda (istemci tarafı) yorumlanır ve çalıştırılır.
Genel Bir HTML Sayfası Nasıl Görünür?
Şimdi gelelim bir HTML sayfasının genel iskeletine. Tüm HTML belgelerinin belirli bir yapısı vardır. İşte tipik bir HTML 4.01 belgesinin temel yapısı:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Sayfa içinde görünecek alan
</body>
</html>Bu Yapıyı Anlayalım:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">: Bu kısım, tarayıcıya belgenin hangi HTML versiyonuna göre yazıldığını bildiren bir "belge türü bildirimi"dir. Burada HTML 4.01 Transitional versiyonunu kullandığımızı belirtiyoruz.<html>: Bu etiket, tüm HTML belgesini kapsayan en dıştaki etikettir ve "root" (kök) elementi olarak adlandırılır. Tüm diğer HTML etiketleri bu etiketin içinde yer alır.<head>: Bu bölüm, web sayfasının görünen içeriğini değil, sayfa hakkında meta bilgilerini (sayfa başlığı, stil dosyası bağlantıları, betik dosyaları vb.) içeren alandır. Buradaki bilgiler doğrudan tarayıcıda görüntülenmez, ancak sayfanın nasıl çalışacağını ve arama motorları tarafından nasıl indeksleneceğini etkiler.<title>:<head>etiketi içinde yer alan bu etiket, web sayfanızın tarayıcı sekmesinde veya pencere başlığında görünen başlığı belirler.<body>: Bu etiket, web sayfanızın tarayıcı penceresinde gerçekten görünen tüm içeriğini barındırır. Paragraflarınız, başlıklarınız ve diğer tüm görünen öğeler buraya yazılır.
HTML Kod Yazım Mantığı
HTML etiketleri genellikle açılış (<etiket>) ve kapanış (</etiket>) etiket çiftleri halinde kullanılır. İçerik, bu iki etiket arasına yazılır:
<etiket>İçerik</etiket>Bazı etiketler ise içerik barındırmaz ve tek başına kullanılır. Bu durumda kapanış etiketine gerek yoktur. Örneğin, ileride göreceğimiz görsel etiketleri böyledir:
<etiket />Etiketlere ek özellikler kazandırmak için "parametreler" veya "nitelikler" de kullanabiliriz:
<etiket parametre="değer">İçerik</etiket>
<etiket parametre="değer" />Son olarak, HTML'de kodunuzu daha anlaşılır hale getirmek için yorumlar ekleyebilirsiniz. Yorumlar, tarayıcı tarafından görüntülenmez ve sadece kaynak kodunda görünür:
<!-- Bu bir yorumdur ve sayfada görünmez -->HTML'in bu temel yapı taşlarını anladığımızda, web sayfaları oluşturmanın ne kadar da kolaylaştığını göreceksiniz. Önümüzdeki yazılarda, bu genel yapının içini nasıl dolduracağımızı, farklı metin öğelerini ve diğer kullanışlı etiketleri keşfedeceğiz.
Şimdilik bu kadar! HTML dünyasına ilk adımınızı attınız bile.
Webkolog'u takipte kalın!
Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!
0 yorum:
Yorum Gönder