PAYLAŞ
HTML, Etiket, Tag, XHTML, CSS
(Son Güncelleme: 18 Şubat 2017)

HTML (Hyper Text Markup Language – İşaretlenmiş Üstün Yazı Dili gibi bir çeviri yapılabilir) en temel web yayını kodlama dilidir. Yayın aktarımı için HTTP (Hyper Text Transfer Protocol) kullanan HTML, diğer bazı programlama dilleri gibi derleme gerektirmeyen düz metin dosyalarından oluşur. Bununla birlikte HTML dosyaları, içeriğinde web sayfasının nasıl görüntüleneceğini belirleyen etiketler ve etiketlerin düzen seçenekleri ile şekillenmektedir. Aslında bir web sayfasının görünen yüzünün arkasında bir çok etiket ve kodlar bulunduğundan emin olabilirsiniz.

Web sayfanızda göstereceğiniz tüm içeriğin sunucu tarafından doğru yorumlanarak görünmesini istediğiniz şekilde ekrana yansıtılması için HTML düzenlemeye ihtiyaç duyulacaktır. Dolayısıyla dilerseniz kendi sayfanızı tasarlayın, dilerseniz hazır sistemler kullanın, HTML bilgisi işiniiz daima kolaylaştıracaktır. 

HTML dilinde kodlanmış bir dosyanın uzantısı .html ya da .htm olacaktır. HTML dosyaları aynı zamanda güncel bir çok sunucuda varsayılan olarak çağırılan dosyalardır. Sunucu başka bir şekilde yapılandırılmadıysa, o sunucuda barınan bir alan adının yayın dizini çağırıldığında ziyaretçi ekranına gelen dosya index isimli html dosyası olacaktır. Özellikle Unix – Linux tabanlı sunucularda ilk çağırılan dosyalar index.html, index.htm, default.html, default.html olup Windows tabanlı sunucularda default isimli dosya tercih edilmektedir. Bunlar genel yapılandırmalar olup elbette sunucu yönetimince farklı bir yapılandırma tercih edilmiş olabileceğinden kesinlik arz etmez.

HTML, her türlü web programlamasında kullanılmakta olan temel dildir. Ancak güncel web projelerinde dinamik içerik ihtiyacı sebebiyle HTML tek başına yeterli olmamakta, bununla birlikte diğer dillerde de gömülü olarak kullanılabilmektedir. Böylelikle HTML’in statik ya da dinamik tüm web sitelerinde kullanıldığını söyleyebiliriz.

HTML dosyalarının düz metinlerden ibaret olacağını belirtmiştik. Bu sebeple bir HTML dosyası oluşturmak için notepad gibi basit bir metin düzenleyici ya da Notepad++ gibi gelişmiş metin-kod düzenleyiciler veya web yayıncıları için geliştirilen Frontpage, Dreamwever gibi profesyonel düzenleyiciler tercih edebilirsiniz. Ben Notepad++ öneriyorum.

Bir HTML dosya 3 bölüm, dolayısıyla 3 ana etiketten oluşur.

  1. Bölüm: <html> Etiketi. HTML etiketi bir HTML dosyasının tümünü içine alan ana etikettir. Bütün bir HTML dosyası bu etiket içinde <html> </html> açma-kapama etiketleri arasında bulunacaktır. HTML açma etiketi <html> olup HTML sonlandırması da </html> şeklindedir.
  2. Bölüm: <head> Etiketi. HEAD etiketi ziyaretçilerimizin web sayfamızda görmediği ama bizim tarayıcı vasıtasıyla tanıtma, sunma amaçlı kullandığımız bilgi lanıdır. Bu alanda arama motorlarına ilgili sayfa hakkında temal bilgileri sunabilir, varsa sayfaya çağırdığımız sitil dosya yolu, sayfa dili, yazar-sahip bilgisi gibi ekrana yazdırılmayan diğer bilgileri sunabiliriz. Sayfada çağıracağımız-çalıştıracağımız bazı dış betikleri de (javascriptler gibi) bu alanda belirtiriz. HEAD etiketi <head> ile başlar ve </head> ile biter.
  3. Bölüm: <body> Etiketi. BODY etiketi aslında isminden de çağrıştırdığı gibi bir HTML sayfasının görünen gövdesidir. BODY etiketi içinde ne yaparsak, web sayfamızda bir etki oluşturacak, ziyaretçilerimize dilediğimiz şekilde bir sunum yapabilmemize hizmet edecektir. Ziyaretçilerimiz için HTML sayfamız BODY içerisinde başlayacak ve bitecektir. BODY etiketi <body> ile başlar ve </body> ile biter.

Şimdi buraya kadar gördüğümüz ile bir HTML dosyası oluşturalım. Öncelikle bir notepad belgesi açıp içine hiç bir şey yazmadan index.html ismiyle kaydedelim ve bu dosyayı HTML isimli klasörümüzün içine atalım. Bu dosyayı ders boyunca denemelerinizi yaparak tarayıcıdan değişimleri takip etmek için kullanabilirsiniz.

index.html dosyamıza bu aşamada çift tıklarsak, dosyanın boş beyaz bir sayfa şeklinde varsayılan tarayıcımızda ve hata vermeden açıldığını göreceğiz. Buradan anladığımız üzere Bir HTML dosyası -var olmak için- içeriğe ya da başka bir bağlantıya ihtiyaç duymaz. Ancak elbette asli amacı web sayfamızın içeriğini amaçladığımız şekilde göstermek olduğundan biz onu gerçek bir HTML dosyası haline getireceğiz.   

3 ana bölümden oluştuğunu söylediğimiz web sayfamızda ana bölümlerin konumlanması da unutmamalıyız ki doğru şekilde olmalıdır. index.html dosyamızı açalım ve şunları yazalım:

HTML Dosyanın Temeli
1
2
3
4
5
<html>
<head></head>
<body>
</body>
</html>

Doğru kullanılan etiket açma kapamalarının birbiri ile aynı satırda ya da doğru sırayla olduğu müddetçe farklı satırlarda olması sorun teşkil etmeyecektir. Bu, HTML sayfamız içinde kullanacağımız tüm etiketler için söz konusudur. Burada yeri gelmişken etiket kullanımı hakkında bir noktaya daha değinelim. HTML etiketler aslında BÜYÜK HARF ya da küçük harf ile yazılabilir. Yorum farkı oluşmaz, tarayıcılar her ikisini de aynı şekilde yorumlar (şimdilik). Ancak HTML 4 sürümden itibaren tavsiye edilen küçük harf kullanımıdır ve XHTML (ayrıca değineceğiz) uyumlulukta arananlardan biri de küçük harfli etiketlerdir. Dolayısıyla biz örneklerimizde buna riayet edeceğiz.

Kodlamaya başlarken etiketler hakkında bir bilgiden daha bahsetmekte fayda var. Etiketlerimiz bazı özel niteikler içerebilir. Nitelikler başlangıç etiketleri içerisinde yer alır ve birer değer içerir. Bununla ilgili örneğimizi <head> etiketi içinde yer vereceğimiz etiketlerde görmeye başlayacağız.

Sonraki yazımızda çok kullanılan etiketlere bakacağız.

 

BİR CEVAP BIRAK

Yorumunuzu ekleyin
Buraya adınızı yazın