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:
Kod: Tümünü seç
<html>
merhaba
</html>
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: Tümünü seç
<html>
<head>
<title>HTML Uygulaması Deneme:2</title>
</head>
<body>
merhaba
</body>
</html>
* <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: Tümünü seç
<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>
Kod: Tümünü seç
<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>
Kod: Tümünü seç
<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>
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: Tümünü seç
<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>
<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.
Volkan Derinbay'a tşkler.