İlk önce, HTML nedir onu anlatayım: HTML bir şekillendirme dilidir, yani bir sayfadaki yazıların ve resimlerin ne şekilde yazıldığını ve nerede durduğunu falan anlatmaya yarar (aynı Word dokümanları gibi). El ile rahatça yazılabilecek bir dil olan HTML, Internet Explorer, Mozilla Firefox, Opera veya Safari gibi bir sürü web tarayıcısı ile görülebilir. İnternette gezdiğiniz tüm sayfalar HTML dilinde yazılmıştır.
BASİT HTML
Dediğim gibi, HTML istenirse el ile yazılabilir bir dildir. Deneyin: notepad'i (veya en sevdiğiniz yazı editörü programını) açın, içine alooowww yazın ve deneme.html olarak kaydedin. Bu dosyaya çift tıkladığınızda web tarayıcınız açılacak ve hakikaten de içinde alooowww yazacak! Bir not: bu deneme yazınızı değiştirmek çok satırlı bir yazı yazacaksanız, satır değiştirmek için <br> yazabilirsiniz... İşte, ilk HTML'inizi yazdınız, dolayısıyla an itibariyle çay-kahve-sigara-ihtiyaç molasına çıkabilirsiniz...
DAHA KARMAŞIK HTML
Yaklaşık 3 dakika çalışıp çay içip geri geldiniz, dolayısıyla artık sizi yorma hakkına sahibim: an itibariyle HTML'de yazı yazdık, peki bu yazının şeklini ve rengini nasıl değiştireceğiz? Nasıl resim koyacağız? Birkaç şeyi yan yana koyabilir miyiz?
HTML'de "komut" için olan kelimeler < ve > karakterleri arasına yazılır. Örneğin, <font color=#ff0000>bu yazı kırmızı olacak</font> yazıp gene deneme.html olarak kaydedersek o zaman karşımıza kırmızı bir mesaj çıkacaktır... bu yazı kırmızı olacak gibi yani! Mesela, resim koymak için img komutu kullanılabilir. Örneğin <img src="resim.jpg">, veya benim web sayfamdaki Ben kimim? sayfasındaki gibi sağda duran resim için <img src="resim.jpg" align="right">. Veya, başka bir sayfaya doğru bir link vermek için a komutu kullanılabilir, mesela <a href="deneme2.htm">deneme2.html sayfasına git</a>. Yazımın sonuna doğru tüm bu komutların listelerine nasıl olaşacağınızı da anlatacağım.
HTML'de enteresan komutlardan biri tablodur. Size bir tablo örneği mesela <table> <tr> <td>bir</td> <td>iki</td> </tr><tr> <td>üç</td> <td>dört</td> </tr> </table> yazınca ortaya çıkan olay şu şekilde olur:
Başka bir deyişle, table komutu yeni bir tablo yaratır, tr komutları satırları ayırır, son olarak td komutları da bir sağdaki sütuna geçer. Bir tablonun her karesi için de arka plan rengi (bgcolor veya resim için background), içindeki yazının şekli (style), tablonun etrafındaki çizgilerin boyu (border) veya boylar (uzunluk için width, yükseklik için height) gibi şeyler değiştirilebilir. Dolayısıyla ne olur, şahane bir şekilde bir sayfada tonla elemanı istediğiniz gibi dizebilirsiniz...
GELİŞMİŞ HTML
Az önce size style alt komutundan bahsetmiştim. Bu alt komutu kullanabileceğiniz komutlardan biri div: bu komut, bir HTML katmanı anlatır. Katmanlar üst üste konabilir veya yeri, ölçüleri ve hatta geçirgenliği değiştirebilir. Örneğin, benim web sayfam bu şekilde çalışmaktadır: aslında, web sayfamın her penceresi bir katman içinde durur, siz de üzerine tıkladıkça üste çıkar ve geçirgenliği değişir. Her açtığınız yeni bölümde de yeni bir katman yaratılıp içeriği dinamik olarak değiştirilir...
Buna ek olarak, kimi komutlar tüm sayfaya uygulanır: örneğin, Ali'nin FTP arayüzü sayfasının stili <style>BODY{background:#FEFEFE; font-family:tahoma,arial,helvetica;color:#000000; cursor:default}TD{font-size:13}H1{font-size:20}A{text-decoration:none; color:#2B5796}A:hover{color:#FF6262; text-decoration:underline}</style> ile sayfanın başında bir kez yazılmıştır... Buna ek olarak, çok isteyenler bir CSS dosyası yazıp onu tüm sayfaları ile bağlayabilirler...
RAHAT BİR ŞEKİLDE HTML YAZMAK
Tabii ki bir çok insan böyle konular ile çok da uğraşmak istemiyor, tasarım işini bir programın yapmasını istiyor. Bunu yapan editörlere WYSIWYG (What You See Is What You Get - Ne Görüyorsan Onu Alırsın) editörü deniliyor, ve piyasada tonla var: Microsoft'un var (hem FrontPage hem de Visual Web Developper - her ikisinin de Express, yani ücretsiz sürümleri var), Mozilla'nın var, hatta online olanlar bile var (wysiwygpro adlı bir online yazılım, daha doğrusu bir web sayfası... Evet, web sayfası yapan bir web sayfası!). Bu editörler size istediğiniz gibi görünen ama elle yazılmış bir koddan genelde daha büyük bir HTML kodu üretecektir (yani sayfa daha büyük olacaktır). Öte yandan, HTML komut adları (genelde "HTML tag" denir), onların özellikleri (yani alt komutları) gibi konuları öğrenirken çok işinize yarayabilir.
DEVAMI
Bir sonraki yazımda HTML'in diğer bir önemli yüzü olan JavaScript'ten bahsedeceğim, sonra da DHTML ile neler yapılabileceğini anlatacağım ayrı bir yazıda... Haydi şimdi siz biraz egzersis yapın, öğrendiklerinizi sınayın :)