HTML UYGULAMASI

GİRİŞ

Günümüzde sadece html kullanarak web sayfaları yapılmaz. Html dili ile birlikte, sayfa-nın tasarımı için CSS (Cascading Style Sheet) dili de kullanılır. CSS dili ayrı bir kitapçık konusu olacağı için burada işlenmeyecektir. Ancak sizler diğer kaynaklardan öğrenerek buradaki uygulamalarla birleştirebilirsiniz.

Html dilinde web sayfası yapmak için önce sayfanın bir şablonunu kâğıda çizmek önem-lidir. Kâğıda çizilen bu şablonu html etiketleri ve kuralları sayesinde kodlayarak web sayfası haline getiririz.

Aşağıda standart bir web sayfası türünün şablonu çizilmiştir.

BAŞLIK BÖLÜMÜ

MENÜLER

İÇERİK

FOOTER

Başka bir web sayfası türü ise menülerin solda, içeriklerin sağda olduğu web sayfaları-dır.

BAŞLIK BÖLÜMÜ

MENÜLER İÇERİK

FOOTER

Tasarım şablonunu kararlaştırdıktan sonra, web sayfasının renklerini, yazı boyutu ve yazı tipini belirlemek önemlidir. Her sayfanın biçimlendirilmesi aynı olmalıdır.

Renklerin gözleri yormayan, birbiriyle uyumlu renkler olmasına dikkat edilmesi gerekir.

Web sayfalarında yazı tipi olarak genellikle Tahoma, Arial, Verdana gibi tipler kullanılır.

Yazı boyutunu ise font etiketi ile belirleyeceğimiz için 1-7 arasında değerler vererek belirlememiz gerekecektir. Genellikle normal yazılarda <font size> değeri 3 olarak ayarlamak yeterli büyüklüğü sağlar. Başlıkların büyüklük değeri 4, küçük yazılar ise 2 büyüklüğünde olması gözleri yormayan, göze hitap eden web sayfaları oluşturmak için yeterli olacaktır.

Sayfamızın hangi bölümlerden oluşacağını yani hangi menüleri içereceğini önceden be-lirlemek önemlidir. Sayfaya daha sonradan eklenecek her menü tasarımda oynamalara neden olacağı için tekrar tekrar aynı komutların üzerinden geçmenizi sağlar. Buda boşa zaman ve emek kaybı olacaktır. Sayfa menülerini belirlemek için sayfanın ne ile ilgili olacağını belirlemek gerekir. Oluşturulacak web sayfasının kişisel web sayfası mı, eği-timle ilgili bir sayfa mı yoksa ticari bir sayfa mı önceden belirlenmesi gerekir.

Biz 4 sayfalık bir Atatürk konulu web sayfası oluşturacağız. Web sayfamızın menüleri ise;

 Ana Sayfa

 Hayatı

 İlke ve İnkılaplar

 Galeri

 İletişim

olarak belirlemek yeterli olacaktır.

Web sayfalarının isimlendirilmesinde dikkat edilmesi gereken kurallar vardır. Örneğin ana sayfanın dosya ismi index.html ya da default.html olmalıdır. Dosya uzantısı htm veya html olabilir. Sayfa isimlerinde Türkçe karakter ve boşluk, virgül, tırnak gibi ka-rakterler kullanılmaz. Aşağıda verilen kodları mutlaka ilgili dosya ismi ile kaydediniz.

RENKLER

Web sayfalarında renkleri belirtmek için sadece renk isimleri kullanılmaz. Tasarım prog-ramlarında renkler için hex kodları bulunur. Web tasarımı yaparken bu tür programlar renkleri belirlemek için yarayışlı olabilir.

Web sayfamızın arka rengini açık mavi olarak yapalım. Aşağıdaki kodu not defterine yazınız. Dosya ismi olarak index.html kullanabilirsiniz.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10

<html>

<head>

<title> Hoşgeldiniz </title>

</head>

Merhaba </font>

</body>

</html>

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.

Web sayfamıza ne eklersek ekleyelim 5. Satıra yazdığımız renk kodu sayesinde sayfa rengimiz yukarıdaki gibi olacaktır. Aynı zamanda <font> etiketleri sayesinde sayfamız-daki tüm fontlar yukarısayfamız-daki boyutta ve tipte olacaktır.

TABLOLAMA

Daha öncede belirtildiği gibi günümüzde artık tablo kullanarak web tasarımı yapılmaz.

Bunun yerine CSS kullanarak tasarımlar oluşturulur. Ancak biz sadece html diliyle uy-gulama yapacağımız için tablolar kullanacağız.

Tabloları iç içe kullanabileceğimiz gibi, tek bir tabloyu colspan ve rowspan komutlarıyla bölerekte oluşturabiliriz.

Bu uygulamada ilk verilen tasarım örneği anlatılacaktır.

Daha önceden verilen komutlara tablo komutlarını ekliyoruz. Eklenen veya değiştirilen bölümler koyu yazılmıştır.

ÖRNEK KOD

<title> Hoşgeldiniz </title>

</head>

<table align="center" border="1" bordercolor="black" bgco-lor="white" cellspacing="0" cellpadding="3" width="800">

<tr><td height="100"> </td></tr>

<tr><td height="30">

Footer </td></tr>

</table>

</font>

</body>

</html>

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.

Sayfamızda kullanacağımız menüleri oluşturmak için yukarıda verilen kodu aşağıdaki gibi değiştirelim. Eklenen veya değiştirilen bölümler koyu yazılmıştır.

ÖRNEK KOD

<title> Hoşgeldiniz </title>

</head>

<tr><td height="100" colspan="5" bgcolor="#0f9fd5">

<Font size="12" color="white"><p align="center">ATA-TÜRK</p></font>

</td></tr>

<tr><td height="30" width="160" align="center">

Ana Sayfa

</td><td height="30" width="160" align="center">

Hayatı

</td><td height="30" width="160" align="center">

İlke ve İnkılapları

</td><td height="30" width="160" align="center">

Galeri

</td><td height="30" width="160" align="center">

İletişim </td></tr>

<tr><td height="400"colspan="5" >

İçerik </td></tr>

27 28 29 30 31 32 33

<tr><td height="30" colspan="5">

Footer </td></tr>

</table>

</font>

</body>

</html>

Yukarıdaki komutlarda 9. Satıra “colspan” parametresiyle 5 alttaki satırın 5 sütundan oluşacağı belirtilmiştir. Sayfanın en üstüne “ATATÜRK” başlığı farklı renklerle yazılmış-tır. 13.-23. Satırlar arasında her sütun genişliğinin 160 piksel olması ve yazıların orta-lanarak yazılması sağlanmıştır. Menüler belirlenmiştir. Diğer satırlara da “colspan” pa-rametresi eklenerek sayfa tasarımının bozulması engellenmiştir. En üst satıra başlık olarak “ATATÜRK” yazısı eklenmiştir. İstenirse bu bölüme logo resmi de eklenebilir.

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.

Footer bölümüne iletişim bilgilerini ve telif hakkı bilgilerini yazabilirsiniz.

Yukarıdaki kodların footer bölümünü düzenleyelim. Düzenlenen bölümler koyu renkle yazılmıştır.

ÖRNEK KOD

1 2 3

<html>

<head>

<title> Hoşgeldiniz </title>

</td></tr>

Ana Sayfa

</td><td height="30" width="160" align="center">

Hayatı

</td><td height="30" width="160" align="center">

İlke ve İnkılapları

</td><td height="30" width="160" align="center">

Galeri

</td><td height="30" width="160" align="center">

İletişim </td></tr>

İçerik </td></tr>

<p align="center"><font size="2" Color="#767a7b">

Tasarım: <a href="mailto:senolnamaldi@gmail.com">

Şenol Namaldı</a></font>

</p>

</td></tr>

</table>

</font>

</body>

</html>

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.

MENÜLER VE SAYFALAR

Önceki kısımda sayfamızın genel hatlarını oluşturan tabloyu ve içerik hariç diğer kı-sımlarını yaptık. Şimdi ise sayfamızın menülerine bağlantı verip, verilen bağlantıların gideceği sayfaları oluşturalım.

Web sayfamızın menüleri ve menülerin bağlanacağı dosya isimlerini aşağıdaki gibi oluşturmak yeterlidir.

 Ana Sayfa  index.html

 Hayatı  hayat.html

 İlke ve İnkılapları  ilke.html

 Galeri  galeri.html

 İletişim  iletisim.html

Görüldüğü gibi dosya isimlerinde Türkçe karakter ya da boşluk kullanmadık. Ayrıca her sayfayı hangi konuyu içeriyorsa ona göre isimlendirdik.

Şimdi sayfamızdaki menülere yukarıdaki dosya isimlerini bağlantı olarak ekleyelim.

Aşağıdaki örnek kod kutucuğu sadece menülerin olduğu kısmı içermektedir. Hazırlaya-cağınız web sayfasında sadece bu bölümü değiştirmeniz yeterli olacaktır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13

<a href="index.html"><font Color="black">Ana Sayfa</font></a>

</td><td height="30" width="160" align="center">

<a href="hayat.html"><font Color="black">Hayatı</font></a>

</td><td height="30" width="160" align="center">

<a href="ilke.html"><font Color="black"> İlke ve İnkılapları

</font></a>

</td><td height="30" width="160" align="center">

<a href="galeri.html"><font Color="black"> Galeri</font></a>

</td><td height="30" width="160" align="center">

<a href="iletisim.html"><font Color="black">İletişim</font>

</a>

</td></tr>

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.

Şu anda oluşturduğumuz bağlantılara tıklasak bile sayfalar açılmayacaktır. Çünkü bu sayfaların bulunduğu dosyalar henüz projemizde bulunmamaktadır.

Bu sayfaları oluşturmak için kodlama yapılan not defterinde Dosya -> Farklı Kaydet seçeneğini seçip Kayıt Türüne “Tüm Dosyalar”ı seçeriz. Dosya ismi bölümüne ise sıra-sıyla yukarıda belirlediğimiz dosya isimlerini veririz. Aşağıdaki resimde galeri.html dosyasının oluşturulma şekli gösterilmiştir.

Web sayfalarında genellikle her sayfanın tasarımı aynıdır. Sadece içerik bölümleri farklıdır. Bu nedenle bizde ana şablonumuzu oluşturup diğer sayfalarımızı da bu şab-lona uyarlamış olduk. Böylece aynı kodları tekrar tekrar yazmamış oluruz.

İÇERİK BÖLÜMÜ

İçerik bölümü her sayfada farklı olacaktır. Bu farklılıklara göre tasarlanması gerekir.

Ana sayfada Atatürk’e ait bir fotoğraf ve Atatürk ile ilgili bir şiir veya düz yazı olması örneğimizi oluşturmak için yeterlidir.

Bu bölümde Tablolarımızı iç içe kullanmayı da öğrenmiş olacağız.

Yukarıdaki kodların içerik bölümünü düzenleyelim. Düzenlenen bölümler koyu renkle yazılmıştır.

<title> Hoşgeldiniz </title>

</head>

</td></tr>

Ana Sayfa

</td><td height="30" width="160" align="center">

Hayatı

</td><td height="30" width="160" align="center">

İlke ve İnkılapları

</td><td height="30" width="160" align="center">

Galeri

</td><td height="30" width="160" align="center">

İletişim </td></tr>

<tr><td colspan="5">

<table border="0" cellspacing="3" cellpadding="3">

<tr><td width="400">

<p align="center"><b>ATATÜRK</b></p><font size="2">

<p align="center" >Türk’ü ölümden Odur kurtaran Odur yeniden Türklüğü kuran.<br/>Yaptığı ordu Düşmanı kovdu. Ulusu, yurdu Odur yaratan.<br/>Türk’ün dileği Onun ereği. Yüce yüreği Türklüğe vatan.<br/>Bu memleketi, Cumhuriyeti Canıyle etti Bize armağan.<br/> Atamızsın sen, Adımız senden. Yürür izinden Sana inanan.<br/> Ülküm yürüsün, Türklük büyüsün Sen Atatürk’sün Ey yüce Başkan!</p></font>

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<p align="right"><i>Hasan Ali YÜCEL</i></p>

</td><td>

<img src="ataturk.jpg" width="400" border="2">

</td></tr>

</table>

</td></tr>

<p align="center"><font size="2" Color="#767a7b">

Tasarım: <a href="mailto:senolnamaldi@gmail.com">

Şenol Namaldı</a></font>

</p>

</td></tr>

</table>

</font>

</body>

</html>

Daha önceki kodlarımızda 24. satırda belirtilen height değeri silinmiştir.

25.-39. Satırlar arasına tablo ekleme kodlarıyla tablo içine tekrar tablo eklenmiştir.

Eklenen tablonun border değeri 0 olduğu için herhangi bir kenarlık görünmez. Eklenen bu tablo iki sütuna bölünmüş ve sağ tarafa resim, sol tarafa bir şiir eklenmiştir.

Yukarıdaki komutları index.html dosyası içine yazarak kaydettiğinizde aşağıdaki çık-tıyı verir.

GALERİ SAYFASI

Galeri sayfasında Atatürk ile ilgili beğendiğiniz resimleri sergileyebilirsiniz. Örneği-mizde internetten bulunan 8 farklı resmi bu sayfaya ekledik.

Daha öncede belirtildiği gibi diğer sayfalarla farklı olarak sadece içerik bölümünü de-ğiştirilerek galeri sayfası oluşturuldu.

Aşağıda verilen kodları galeri.html dosyası içine yazıp kaydediniz.

ÖRNEK KOD

<title> Hoşgeldiniz </title>

</head>

</td></tr>

Ana Sayfa

</td><td height="30" width="160" align="center">

Hayatı

</td><td height="30" width="160" align="center">

İlke ve İnkılapları

</td><td height="30" width="160" align="center">

Galeri

</td><td height="30" width="160" align="center">

İletişim </td></tr>

<table border="0" cellspacing="3" cellpadding="3">

<tr><td width="200">

<a href="resimler/1.jpg"><img src="resimler/1.jpg"

border="1" width="150"></a>

</td><td>

<td width="200">

<a href="resimler/2.jpg"><img src="resimler/2.jpg"

border="1" width="150"></a>

</td><td>

<td width="200">

<a href="resimler/3.jpg"><img src="resimler/3.jpg"

border="1" width="150"></a>

</td><td>

<a href="resimler/4.jpg"><img src="resimler/4.jpg"

border="1" width="150"></a>

</td></tr>

<a href="resimler/5.jpg"><img src="resimler/5.jpg"

border="1" width="150"></a>

</td><td>

<td width="200">

<a href="resimler/6.jpg"><img src="resimler/6.jpg"

border="1" width="150"></a>

</td><td>

<td width="200">

<a href="resimler/7.jpg"><img src="resimler/7.jpg"

border="1" width="150"></a>

</td><td>

<a href="resimler/8.jpg"><img src="resimler/8.jpg"

border="1" width="150"></a>

</td></tr>

</table>

</td></tr>

<p align="center"><font size="2" Color="#767a7b">

Tasarım: <a href="mailto:senolnamaldi@gmail.com">

Şenol Namaldı</a></font>

</p>

</td></tr>

</table>

</font>

</body>

</html>

Yukarıdaki komutları galeri.html dosyası içine yazarak kaydettiğinizde aşağıdaki çıktıyı verir.

NOTLAR

………

……….………

……….………

………

………

……….………

………

……….………

………

………

……….………

………

………

……….………

………

……….………

………

………