HTML bir programlama dili değildir, genelde tasarım ve şablon oluşturma amaçlı kullanılan bir dildir. Tanımı zengin metin işaret dili olarak geçer ama bu tarz tanımlamalarla kafanızı karıştırmamak için düz bir şekilde anlatacağım.
En basitinden bir giriş formu HTML ile yapılır fakat bu giriş formunun çalışması yani kullanıcı adı ve şifre girilip, giriş yap butonuna basınca işlem yapması için programlama dili gerekir. İşte HTML ile programlama diliarasındaki farkı ve birbirine bağlılığı burada anlamak mümkün. HTML tek başına bir işe yaramaz, sadece bir görüntü oluşturur ama
programlama diliyle yapılan kontrol ve işlemler bunların işlevsel olmasını sağlar, işlem yapmasını sağlar. Burada mantığı kavradıysanız kodları görünce ve işlemler yapmaya başladıkça farkı daha rahat görebileceksiniz.
Kod:
Bir html tagı “<” ile açılır ve “/>” ile kapatılır. HTML kullanacağımız bir sayfaya “<html>” tagıyla başlanır ve “</html>” tagıyla bitirilir.
<html> tagları içerisinde sayfamız iki bölümden oluşur;
Kod:
Head – Üst bilgiler kısmı
Body – Gövde,içerik kısmı
Head ( Üst bilgiler kısmı ) : Sitemiz ait anahtar kelimeler, açıklama, site başlığı gibi bilgileri kapsayan kısımdır. Bu kısımda sayfamızın özellikleri kodlanır, kullanıcıya hitap eden üye giriş forumları, yazılar
vb. bu kısımda kodlanmazlar.
Body ( İçerik kısmı ) : Adından da anlaşılacağı üzere kullanıcıya hitap eden, formlar, yazılar, görseller, linkler
vb. bu kısımda kodlanır ve sitemizin kullanıcıya yönelik tüm işlemlerini yapacağımız kısımdır.
Örnek bir html sayfası şu şekildedir;
Kod:
<html>
<head>
<title>Site Başlığı</title>
</head>
<body>
Site içerik kısmı.
</body>
</html>
Bu tarz bir sayfanın çıktısı şu şekilde olacaktır;
Bir site programlanırken ilk başta bu html yapı oluşturulur ve içerikle ilgili kodlamalar body tagları arasında yapılır. Html bunun yanı sıra yazıları biçimlendirme ve tasarım alanlarında da kullanılır biz bunların üzerinde fazla durmadan temel biçimlendirme kodlarından bahsedip bize başlangıç için asıl lazım olacak form oluşturma kodlarına gideceğiz.
Yazı biçimlendirmeye dair html kodlar şunlardır;
Kod:
<b> </b> – bold tagı ( Arasına alınan yazıyı kalın yapar. )
<i> </i> – italic tagı ( Arasına alınan yazıyı italik yani yatay yapar. )
<u> </u> – underline tagı ( Arasına alınan yazıyı altı çizili yapar. )
<h> </h> – head tagı ( Arasına alınan yazının başlık olduğunu belirtir ve başlık boyutuna taşır. )
<h1> </h1> – head 1 tagı ( Arasına alınan yazının 1.başlık olduğunu belirtir ve başka başlıklarda kullanılacaksa bu tag ana başlık için kullanılabilir çünkü; yazı boyutu daha büyüktür. )
<h2> </h2> – head 2 tagı ( Arasınan alınan yazının 2.başlık olduğunu belirtir boyut biraz daha küçüktür. )
<h3> </h3> – head 3 tagı ( Arasınan alınan yazının 3.başlık olduğunu belirtir boyut biraz daha küçüktür. )
head tagları 1 den 6′ya kadar gidebilir ve sayı arttıkça font küçülür. Her sayı bir sonraki başlığı belirtir.
<p> </p> – paragraf tagı ( Arasına alınan yazının bir paragraf olduğunu belirtir. )
<br> – break tagı ( Yazıdan sonra kullanılır ve kapatılma tagı gerektirmez, yazıdan sonra veya önce kaç kez <br> yazılırsa o kadar satır aşağı atlar. )
<img src=””/> – image tagı ( src kısmı source yani kaynak kelimesinden gelmektedir. Bu tag sayfamıza resim eklemek içindir. Eklemek istediğimiz resmin internet adresi src=” buraya” gelmelidir.İmage tagını kullanırken
<img src=”www.siteadi.com/resim.jpg”> </img> tarzı bir kullanım YANLIŞTIR.
<img src=”www.siteadi.com/resim.jpg”/> tarzı bir kullanım DOĞRUDUR.
Yazı ve metinlerle ilgili bu kadar biçimlendirme kodu şuan için yeterlidir. İlerleyen konularda bunların biraz daha gelişmiş hallerini göreceğiz. Şu aşamada size tavsiyem not defterini açarak oluşturduğumuz örnek html sayfasına bakarak bir html yapı oluşturup, body tagları içerisinde üstte vermiş olduğumuz biçimlendirme kodlarını test etmenizdir. Not defterini açın, kodları yazın daha sonra Dosya >> Farklı Kaydet kısmına tıklayıp dosya adı kısmında ki *.txt’i silin dosyaadi.html şeklinde düzenleyip kaydet’e tıklayın daha sonra o dosyaya gidip tıkladığınız da yazmış olduğunuz kodların sonucunu tarayıcınızda göreceksiniz.