HTML, web sayfası tasarım dilidir. İngilizce açılmış şekli: Hyper Text Markup Language (yani Hiper Metin Kodlama Dili). Her ne kadar böyle heybetli bir isime sahipse de, sizleri korkutmasın. Birkaç günlük bir çalışmayla, iyi web sitesi yapma yetisine ulaşabilirsiniz. Elbette HTML sanal ortamda her şey değildir, ama ilk kapıları size HTML açacaktır. Neyse lafı uzatmadan, konuya giriyorum.
HTML uygulamaları için derleyici bir programa ihtiyacınız yoktur. Basit bir metin editörü işinizi görecektir. Mesela ben “Notepad” kullanıyorum. Şimdi bir notepad açın ve yolculuğumuza başlayalım. (Notepad olması şart değil, bulamıyorsanız Internet Explorer’ın alet kutusundan “Görünüm/Kaynaklar” (“View/Source”) kısmını işaretleyin. Karşınıza bir notepad çıkacaktır, fareyle Dosya/Yeni (File/New) seçeneğini seçerek yeni bir sayfaya başlayın.)
Sayfa Yapısı
HTML dilinde çoğu kod için "AÇTIĞINI KAPAT" kuralı geçerlidir. Örneğin bir HTML sayfası <html> koduyla başlatılır ve </html> koduyla bitirilir. Şimdi ilk HTML uygulamamızı yapalım:
Bu uygulamada "merhaba" yazılı bir web sayfası yaptık. Bu sayfayı görmek için notepad'e yukarıdaki kodları yazın, ve deneme.html gibi bir isim ve html kök ismi ile kaydedin. Notepad sayfanızı web sayfası halinde kaydeder. Şimdi bu kayıtlı sayfayı (ismini "deneme.html" koymuştuk.) bulun ve açın. ("Windows Explorer" ile bulabilirsiniz, veya masaüstüne kaydetmişseniz masa üstüne bakın. Kaydettiğiniz dosyaları bulmakta sorununuz varsa, önce Windows Explorer, Windows Commander gibi yazılımların üzerinde çalışın ve bilgisayarın dosyalama sistemi üzerinde fikir sahibi olmaya çalışın.)
Geliştirilmiş Sayfa Yapısı
Bu ilk uygulamamızda sadece bir kod öğrendik: <html> Bir HTML uygulaması bu kodla başlar ve </html> koduyla kapatılır. (AÇTIĞINI KAPAT kuralı.) Web sayfasına yazdırmak istediğiniz metinleri ise doğrudan yazabilmektedsiniz.Tabi genellikle HTML sayfaları çok daha karmaşık olur, bu nedenle bu karmaşaya uygun, daha ayrıntılı bir iskelete ihtiyacımız var. Genelde web sayfaları şu iskelet üzerine yapılandırılır:
Kod:
<html>
<head>
<title>HTML Uygulaması Deneme:2</title>
</head>
<body>
merhaba
</body>
</html>
Bu uygulamayı yazın ve yine web formatında bu sayfayı açın. Yine web sayfamız bize "merhaba" diyecek. Peki bir değişiklik dikkatinizi çekti mi? Web sayfasının üzerinde artık "HTML Uygulaması Deneme:2" yazıyor. Bilin bakalım neden?
* <html>...</html>
* HTML kodlarının tamamı bu iki kodun arasına yazılır. <title>...</title>
* Web sayfasının en üstünde ve Windows çubuğundaki simge kutucuğunda, kullanıcıya sayfayı tanıtmak için kullanılan başlık yazısı bu iki komut arasına yazılır. <head>...</head>
* <title> komutundan başka bu kısma genelde JavaScript (veya VBScript) kodlarıyla oluşturulan fonksiyonlar yazılır. (Bunları ileriki derslerde göreceğiz. <body>...</body>
Web sayfasında görmek istediğimiz yapı buraya (gövdeye) yazılır. Örneğin görünmesi istenen metin, resim vb. araçlar için gerekli HTML kodları buraya girilir.
Bir web sayfasına başlamadan önce, bu iskeleti oluşturunuz. (Şimdiki uygulamalar için pek gerekli değilse de, alışmanızda fayda var.) İlk derslerde <head>...</head> arasına pek birşey yazmayacağız. Önce < body>...</body> arasında kullanacağımız kodları öğrenelim. (Ben yine de <head></head> kodlarını arası, boş da olsa inatla yazacağım; <title>...</title> kodlarının buraya yazılması şart olmamasına rağmen.)
Satır Oluşturma
Şu ana kadar öğrendiğimiz bölümle, metin içeren bir web sayfası tasarlayabiliriz; sadece metinden oluşan birçok web sayfası görmüşsünüzdür. (Özellikle akademik yayınlar, kurumsal dokümanlar vb.) Ancak şimdiki bilgilerimizle oluşturacağımız, sadece metine dayalı web sayfası kullanıma uygun olmayacaktır. Zira metin yazıyoruz ama paragraf yapamıyoruz. Veya paragraf başı yapamıyor, kalın veya italik yazılar kullanamıyor, yazıların büyüklük veya küçüklüklerini ayarlayamıyoruz. Yaptığımız şey, sözcükleri ard arda sıralamaktan ibaret. Denerseniz göreceksiniz ki, HTML birden fazla bırakılan boşlukları (space bar ile) görmüyor, sadece bir boşluk bırakıyor. Yani siz kod içinde paragraf yapsanız dahi, sayfa HTML formuna çevrildiğinde karşınıza sözcükler diziliminden başka birşey çıkmayacaktır. Bana inanmayabilirsiniz; sanal ortamın yalancısı çoktur, dilerseniz beraber tecrübe edelim. Örneğin Ömer Hayyam'ın bir dörtlüğünü yazalım güzelce, bakalım yazdığımız gibi çıkacak mı?
Kod:
<html>
<head>
<title>Ömer HAYYAM</title>
</head>
<body>
Ferman sende, ama güzel yaşamak bizde;
Senden ayığız bu sarhoş halimizde.
Sen insan kanı içersin, biz üzüm kanı;
İnsaf be Sultanım, kötülük hangimizde?
</body>
</html>
Binbir emekle yazdığımız dörtlük, web sayfası haline geldiğinde okunamaz hale geldi. (Lütfen siz de deneyin, böylece HTML'e ısınır, hem de yaptıklarımız aklınızda kalır. Yazmaya üşeniyorsanız, hiç olmazsa copy/paste yapıp deneyin.) Oysa bu yazıları <pre>...</pre> arasına yazsaydık böyle olmayacaktı. <pre>...</pre> arasına yazılan yazılar, paragraflar ve yapılan fazladan boşluklar dikkate alınarak web sayfasına yazdırılır. İnanmıyorsanız bakın:
Kod:
<title>Ömer HAYYAM</title>
</head>
<body>
<pre>
Ferman sende, ama güzel yaşamak bizde;
Senden ayığız bu sarhoş halimizde.
Sen insan kanı içersin, biz üzüm kanı;
İnsaf be Sultanım, kötülük hangimizde?
</pre>
</body>
</html>
Her ne kadar <pre>...</pre> kodları işimize yarıyorsa da, web sayfası tasarlarken uğraştığımız bir sürü curcuna içinde <pre> kullanmak biraz yorucu oluyor. Zira AÇTIĞINI KAPAT kuralına sadık o kadar çok kodla uğraşırız ki, <pre> komutunu kapatmayı (yani </pre> kullanmayı) unutabiliriz. Bu nedenle kullanımı daha kolay olan <br> ("break") kodunu öneririm. Bu kod, yazı editörlerinde "return" tuşunun yaptığı işlevi taşımaktadır. Şimdi Ömer Hayyam'ın başka bir dörtlüğünü (monotonluk olmasın) bu kodla yazalım:
Kod:
<html>
<head>
<title>Ömer HAYYAM</title>
</head>
<body>
Ey kör! Bu yer, bu gök, bu yıldızlar boştur boş!<br/>
Bırak onu bunu da gönlünü hoş tut hoş!<br/>
Şu durmadan kurulup dağılan evrende<br/>
Bir nefestir alacağın, o da boştur boş!<br/>
</body>
</html>
Gördüğünüz gibi dizeler yine oluştu. Tabi <pre> ile <br> kodlarının ayrı şeyler olduğunu unutmayın. <br> sadece satır atlatır, o kadar. <pre> ise metin editöründe yazılan formatı, web sayfasına taşır.
Yazı Formatı
Hazır ısınmışken bir kaç şey daha öğrenelim. Artık paragraf yapabiliyor, şiir yazabiliyoruz. Ama her şiir Ömer Hayyam'ın rubaileri gibi başlıksız değil. Bazı yazıları koyu (bold) veya eğik (italic) yazmak isteyebiliriz. Bu durumda kullanacağımız kodlar şunlardır: <b>...</b> ("bold") ve <i>...</i> ("italic"). Örneğin Cemal Süreya'nın "Ölmüştük" isimli şiirini yazalım:
Kod:
<html>
<head>
<title>Cemal SÜREYA</title>
</head>
<body>
<b>ÖLMÜŞTÜK</b><br/><br/>
Büyük bir ihtimalle ölmüştük<br/>
Şehir kan-kıyametti arkamızda,<br/>
Gökyüzünü katlamış bir köşeye koymuştuk<br/>
Yıldızlar kaldırımlara dökülmüştü bütün<br/>
Hamza bütün parmaklarını ortaya dökmüştü<br/>
Cebinde biriktirdiği parmaklarını,<br/>
Hamza son şarkıyı kırka bölmüştü,<br/>
Doğrusu iyi idare etmiştik<br/>
Doğrusu iyi haltetmiştik<br/>
Yaşayanlar unutmuştu bizi<br/>
Yaşayanlar seven sevene dünyada,<br/>
Biz öldüğümüzle kalmıştık<br/><br/>
<i>Cemal SÜREYA</i><br/><br/>
</body>
</html>
Öğrendiğimiz kodlar:
<html></html> HTML bu kodlarla başlar ve biter.
<title></title> Web sayfasının başlığı bu iki kodun arasına yazılır.
<head></head> Fonksiyonlar, <title> vb. bu kodların arasına yazılır.
<body></body> Web sayfasında görmek istediğimiz araçlarla (metin, şekil, form, tablo vb.) ilgili ifadeleri buraya yazılır.
<pre></pre> Metin editöründeki formatı, web formatına taşır.
<br> Bir satır aşağıya geçirir. (AÇTIĞINI KAPAT kuralı geçerli değildir.)
<b></b> Arasındaki ifadeyi kalın (bold) harflerle gösterir.
<i></i> Arasındaki ifadeyi eğik (italic) harflerle gösterir.
<u></u> Arasındaki ifadeyi altı çizili (underlined) harflerle gösterir.