Site yapmak için kullanılan 4-5 dil vardır, bunların en kolayı ve ilk öğrenilmesi gerekeni HTML`dir. Çünkü diğer dilleri öğrenmeden önce HTML bilginizin olması gerekir. HTML dili ile oluşturulan dosyalar exe uzantılı dosyalar gibi tek başına çalışamazlar, bir yorumlayıcı programa ihtiyaç duyarlar. Bu tür internette gezindiğimiz programlara Browser (Tarayıcı) denir. Windows`un yanında gelen internet Explorer bu iş içindir, fakat başka firmaların da browserları vardır. En çok kullanılanlar arasında Netscape Navigator, Mozilla ve Opera yeralır. Her browser, sayfaları değişik yorumlayabilir, birinde belli olmayan bir hata diğerinde ortaya çıkabilir. Bir tasarımcının yaptığı sitesiyi, herkesin düzgün görmesi açısından tüm browser`larda denemesi gerekir.
Sanırım artık başlayabiliriz; HTML kodlarını düz metin (text) yorumlayıcı bir programda yazabilirsiniz. Örnek olarak Windows`taki not defteri veya Dos altında çalışan Edit programı gibi. Word programıyla da yapılabilir ama dosyayı text formatında kaydetmeyi unutmayın. Öte yandan sırf HTML için yazılmış programlar da vardır.
Browser açısından HTML dilinde iki unsur vardır.
Birincisi tag`ler (etiket - komut) : Bunlar browser programı açısından yorumlanması gereken kodlardır.
< > şeklinde köşeli parantez içine konulur ve hiçbir zaman sayfada yazıldığı şekliyle görüntülenmez. Her Tag`in kendine has özellikleri vardır, bunlar da attribute (özellik) olarak adlandırılır.
İkinci unsur : Köşeli parantez dışında kalan yazılardır. Bun tür yazılar yazıldığı şekliyle görüntülenir.
Köşeli parantez içinde yazılan tüm etiketler gerektiği yerde kapatılmalıdır yoksa sayfa düzgün yorumlanmaz. Her açılan etiket sağa yatık / slash işaretiyle kapatılır. Örneğin sayfanın en başında açılan <html> tagi sayfanın en sonunda </html> şeklinde kapatılır. Yani açılış ile kapatılış arasında, sağa yatık / slash işareti farkı vardır. Bundan sonra kırmızı olarak yazılmış bölümdeki tüm kodları, not defterinde yazın veya kopyalayın ve dosyanın soyadını .html yaparak kaydedin. Kaydettiğiniz dosya not defterinin simgesi şeklinde değilde browser programınızın simgesi şeklinde ise tamamdır. Ayrıca daha iyi kavrayabilmeniz açısından kodların hepsini elle yazmanızı öneririm.
Bir HTML sayfasında olmazsa olmaz öğeler vardır. Bunlar sırasıyla
<html>
<head> <title>
ilk web sayfam </title>
</head>
<body>
buraya içerik yazılır.
</body>
</html>
Taglerin açıldığı ve kapandığı yerlere dikkat edin. Şimdi bu olmazsa olmaz etiketlerin ne işe yaradığını görelim. Kodun en başına yazılan <html> etiketi yazdığımız kodun dilinin HTML olduğunu yorumlayıcı browser programına bildirir ve browserda kodu bu dile göre icra eder. <head> etiketi kodun baş kısmında olduğumuzu bildirir. Bu kısıma title, meta, style ve script kodları yazılır, şimdilik buraya kafanızı takmayın. <title> etiketi, sayfaya isim verir. Bu etiketten sonra gelen karakterler browser programının en üst çubuğunda gözükür ve sayfanın ismini ifade eder. Yani bu okuduğunuz pencerenin üstünde yazan TASARIM KURSU "HTML' E Giriş - 1" yazısı gibi. İsim yazıldıktan sonra etiketin </title> şeklinde kapandığına dikkat edin. Eğer kapatmamış olsaydık, bundan sonra yazacağımız herşey browser tarafından sayfanın ismi olarak değerlendirilirdi. O yüzden açtığımız etiketleri gerektiği yerde kapatmamız şart.
<body> etiketi kodun gövdesini oluşturur. <body> </body> etiketleri arasına yazılan her komut ve yazı sayfanın gövde kısmını oluşturur, dolayısıyla ziyaretçinin görmesini istediğiniz yazı, resim, v.s unsurları bu kısma koymalısınız. Bu kısımda bittikten sonra body etiketi </body> şeklinde kapatılır. En son ise html etiketi </html> şeklinde kapatılarak sayfa bitirilmiş olur.
Bu kodları yazdıktan sonra sayfayı .html soyadıyla kaydedin, mesela index.html Dosyanın simgesi browserınızın simgesi haline gelmelidir. Not defteri şeklinde olursa soyadını .html yapmalısınız. Bu dosyayı kullandığınız browser`da açtığınızda yaptıklarınızı görebilirsiniz. Sayfanın kodunda bir değişiklik yaptığınızda bunları görebilmeniz için dosyayı kaydedip, browser`daki yenile butonunu tıklamanız yeterli olacaktır.
İşte ilk öğrenilecek bilgiler bunlar zannedildiği kadar da zor değilmiş değil mi?
Şimdi işin biraz daha derinine inelim. Her etiketin özellikleri vardır, bu özelliklere attribute dendiğini daha önceden telaffuz etmiştik. Attribute`lar etiketin parantezinin içine yazılır. Etiketten sonra bir aralık verilerek yazılan attribute, daha sonra = eşittir ve " çift tırnak işareti içinde vereceğimiz değer yazılır. Örneğin body tag`inin attribute`larını inceleyelim. Örnekte diğer zorunlu tagleri yazmadım sadece body tagini yazıyorum ama sizin olucak değişiklikleri görmeniz için diğer zorunlu tagleride yazmanız şart.
<body bgcolor="ffffff" background="resim.jpg" link="red" vlink="green" alink="yellow" text="000000">
Örnekteki attribute`ları inceleyecek olursak, bgcolor attribute`u sayfanın zemin rengini belirler. Renk, 6 haneli ASCII biçiminde olur. Mesela 6 tane f karakteri "ffffff" beyaz rengi, 6 tane 0(sıfır) karakteri "000000" ise siyah rengi ifade eder. Öte yandan bu karakterlerin yerine rengin ingilizce karşılığı da yazılabilirsiniz. İstediğiniz bir rengin ASCII kodunu çıkaran Color Picker gibi programlar da vardır. background attribute`u sayesinde sayfanızın zeminine bir resim koyabilirsiniz. Buraya da koyacağınız resim dosyasının adını yazmanız gerek. Örnekte resim.jpg adlı bir dosya kullanılmıştır. Siz bunun yerine kendi dosyanızın ad ve soyadını yazmalısınız. Bu dosya herhangi bir formatta olabilir. Ama jpg veya gif formatında olması hem dosyanın küçük olması bakımdan hem de çok kullanılan bir format olmasından dolayı tercih edilir. link attribute`u tıklanmamış liklerin rengini, vlink daha önceden ziyaret edilmiş linklerin rengini ve alink attribute`u ise seçilen linkin rengini belirler. Son olarak text attribute`u yazıların rengini belirler. Attribute`lardan sonra yazılacak değer, = eşittir işaretinden sonra " " tırnak işaretleri arasına alınır. Örnekte görüldüğü üzere sayfanın görünüşünü etkileyen tüm renkler body taginin attribute`ları ile belirtilir.
Bunları belirledikten sonra sayfaya yazacağımız yazıların, koyacağımız resimlerin ve linklerin nasıl yapıldığına geçelim, diğer sayfaya...
