HTML yani HyperText Markup Language, adından da anlaşılacağı üzere bir çeşit işaretleme dilidir. Hatta tam Türkçe çevirisiyle “Köprü Metni Biçimlendirme Dili” diyebiliriz. Bu dil ile tasarım ve şablonlar oluşturabilir; bir web sitesi hazırlamak için bu dili kullanabilirsiniz. HTML metin tabanlı bir dildir. Birçok insanın sandığının aksine bir programlama dili değildir. HTML’in bir programlama dili olamamasının nedenlerinin en başında metin tabanlı olması yatmaktadır. Yani siz HTML ile sayısal değerleri işlemlere sokup döngüler veya diziler oluşturamazsınız. Ayrıca diğer yazılım dillerinin aksine HTML ile kendi başına çalışan bir program yazamazsınız. Bu dili kullanabilmek ve yorumlayabilmek için muhakkak bir web browser’a ihtiyacınız vardır. HTML bir web sitesinin en temel yapı taşıdır. HTML’in görevini, tasarım ve şablonlar oluşturularak boş bir web sayfasına belirli şekiller ve biçimler vererek bir web sitesine dönüştürmek, şeklinde özetleyebiliriz. İnternet üzerinde dolaşırken karşılaştığınız web sayfalarına bir göz attığınızda genel olarak hepsinin yazılardan, resimlerden ve videolardan oluştuğunu göreceksiniz. Bu sitelerin birbirlerinden ayıran en bariz fark sitenin yerleşim biçimi yani şablonu bir başka değişle template’i ve kullanılan renkleridir. HTML bir web sitesinin temel taşıdır ancak yalnızca HTML kullanarak güzel bir web sitesi tasarlamanız pek mümkün olmayacaktır.
Sitenizin Genel İşleyişinde HTML haricinde Nelere İhtiyacınız Var?
Bir web sitesi oluşturulurken ilk olarak web sitesi tasarımcısı sitenin kullanıcı arayüzünü photoshop gibi bir programda tasarlar. Daha sonra yazılımcı tasarlanan bu web sayfalarını HTML kodları ile yazarak sayfanın şablonlarını oluşturur. Ve işte tam da buradan sonra CSS kodları devreye girer. CSS kodları ile hazırladığınız şablonların boyutlarını, renklerini, biçimlerini, şekillerini ve site içerisinde kullanacağınız yazı tiplerinden tutun sitenin mobil uyumlu olmasına kadar her türlü işlemi uygulayabilirsiniz. Dilerseniz bu CSS kodlarını HTML içerisine gömersiniz dilerseniz ayrı bir klasör içerisine yazıp HTML içerisine çağırma linki ekleyebilirsiniz. Ancak bizim tavsiyemiz HTML ile CSS kodlarını ayrı dosyalarda bulundurmanız yönünde olacaktır. Sonuç olarak, yukarıda bahsettiğimiz gibi iyi bir web sitesi tasarlayabilmeniz için HTML’nin yanında CSS de bilmeniz çok önemlidir. Bunlara ek olarak, eğer daha ileri seviye web siteleri tasarlamak istiyorsanız. Javascript programlama diliniöğrenmeniz gerekmektedir. Javascript ile web sitenize hareketli görseller, açılır menüler, oyunlar ve animasyonlar hazırlayabilirsiniz. Yukarıda CSS ile HTML kodlarına müdahale edebildiğimizden bahsetmiştik. Javascript ile hem HTML hem de CSS kodlarına müdahale edip dönüştürüp, düzenlemeniz mümkündür. Bunlara ek olarak sitenin backend kısmı bulunmaktadır. Bu kısma çok fazla değinmeyeceğiz ancak şunu bilmenizde fayda vardır. Bir sitenin backend kısmı kullanıcı kayıt ve giriş panelini yazdığınız yerdir. Ve bu kısım PHP, ASP .NET tarzı programlama dilleri kullanılarak yazılmaktadır.
HTML İçin Gerekli Programlar
Html kodu yazmanız için herhangi ekstra bir programa ihtiyacınız bulunmamaktadır. Notepad kullanarak Html kodları yazıp çalıştırabilirsiniz. Bunun için tek yapmanız gereken notepad içerisine Html kodlarını ekledikten sonra dosyayı kaydederken dosyanıza verdiğiniz ismin sonuna .html eklemeniz yeterli olacaktır. Bu şekilde kaydettiğiniz dosyanın iconu kullandığınız browser’ın iconuna dönüşecektir. Ancak notepad de kod yazarken hatalı veya eksik yazarsanız Notepad size herhangi bir uyarıda bulunmayacaktır veya notepad de kod yazarken yazdığınız kodları tamamlama gibi bir özelliğe sahip olamayacaksınız. Bu saydığımız iki özelliği de bulabileceğiniz pek çok program mevcuttur ancak biz size Adobe Dreamweaver’ı kullanmanızı önerebiliriz.Ücretli olsa da gerçekten işinizi çok kolaylaştıracak bir programdır. Bunun haricinde notepad++ veya atom gibi programları da kullanabilirsiniz. Bu iki programda kodları tamamlama özelliği mevcuttur ancak yazdığınız hatalı veya eksik kodları bu programlar size göstermez.
HTML’in Genel Kod Yapısı
Html in genel kod yapısı çok basit anlaşılır bir yapıdadır. Genel olarak yapısı şu şekildedir:
<html>
<head>
<title>Sitenizin Adı</title>
</head>
<body>
<div id=”menü”>Web Siteniz</div>
<div class=”menü”>Web Siteniz</div>
</body>
</html>
Yukarıda yazdığımız bir web sitesini oluşturmanız için gereken en temel kalıptır. Bu yapının ne olduğunu açıklamadan önce bilmeniz gereken bir nokta vardır. < > bu iki işaret içerisine yazılan şeylere Html de etiket yani tag denmektedir. Ve bu yazdığınız taglerin neredeyse her birinin bir açılış ve bir de kapanış noktası bulunmaktadır. Kapanışı ise </ > bu şekilde yine aynı tag’i yazarak belirtmekteyiz.
Yukarıdaki örnek üzerinden anlatırsak; ilk olarak bir <html> tagi görmektesiniz ve bunu kapanışı en sonda </html> şeklinde yer almaktadır. Peki bu tag ne işe yaramaktadır? Şöyle ki <html> bize bu yazdığımız dökümanın bir html dökümanı olduğunu belirtir ve bunun içerisine yazdığımız her şey sitenin içerisinde yer alır. En başında açılıp ve en sonunda kapanmasının sebebi de budur. Daha sonra bunun içerisinde ilk olarak <head></head> açılış ve kapanış tag’lerini görmektesiniz. Bu arada dilerseniz bu şekilde yan yana da yazabilirsiniz ancak temiz bir görünüm olmayacağı için pek tavsiye etmiyoruz. <head> tag’i döküman bilgilerini tanımlama bölümüdür. Yani bu bölge içerisinen web sitenizin browser üzerindeki gördüğünüz başlığı yukarıda da gördüğünüz gibi <title></title> etiketi arasına yazarak ekleyebilirsiniz. Dilerseniz yanına sitenizin ufak bir ikonununu ekleyebilirsiniz. Ayrıca bu bölgede CSS ve Javascript gibi kodlarınızın bulunduğu dosyaların linklerini verebilirsiniz.
Ve şimdi en çok kod yazacağınız bölge olan <body></body> tag’ine gelelim. Sitenizin tamamı bu tag arasında yer alacaktır. Adı üzerinde gövde olan bu tag içerisine sitenizin tüm şablonlarını hangi yapıda düzenleyecekseniz ona göre eklemeniz gerekmektedir. Ve bu şablonlar düzenlenirken genellikle <div></div> tag’i kullanılmaktadır. Bu tag size body içerisinde içi boş herhangi bir boyutu veya özelliği olmayan alanlar yaratacaktır. Sizler bu divlere verdiğiniz id veya class’lar ile onları CSS üzerinden çağırıp onlara renk, şekil, resim ve boyut ekleyip bir site haline getireceksiniz. HTML in genel yapısı bu şekildedir.
