HTML İLE WEB TASARIMA GİRİŞ

(1)

HTML İLE

WEB TASARIMA

GİRİŞ

(2)

BÖLÜM 1: HTML NEDİR? ... 1

GİRİŞ ... 2

HTML SAYFA YAPISI ... 2

İLK HTML DOSYASI ... 2

BÖLÜM 2: HTML ETİKETLERİ ... 4

GİRİŞ ... 4

BAŞLIK ETİKETİ ... 5

PARAGRAF ETİKETİ ... 5

SATIR ATLAMA ETİKETİ ... 6

BİÇİMLENDİRME ETİKETİ ... 6

LİSTELEME ETİKETİ ... 8

FONT ETİKETİ ... 10

BAĞLANTI ETİKETİ ... 12

TABLO ETİKETLERİ ... 14

RESİM ETİKETİ ... 25

FORM ETİKETLERİ ... 27

INPUT ETİKETİ ... 27

TEXTAREA ETİKETİ ... 29

SELECT ETİKETİ ... 30

BÖLÜM 3: HTML UYGULAMASI ... 32

GİRİŞ ... 32

RENKLER ... 34

TABLOLAMA ... 35

MENÜLER VE SAYFALAR ... 39

İÇERİK BÖLÜMÜ ... 41

GALERİ SAYFASI ... 43

(3)

BÖLÜM 1: HTML NEDİR?

GİRİŞ

 HTML, Hyper Text Markup Language'in kısaltmasıdır.

 HTML çeşitli anlamlara gelen kodlamalar(tag veya etiket) ve düz metinden oluşur.

 Bu kodlar ancak bir Web Tarayıcı (Internet Explorer, Firefox, Chrome) tarafından anlamlı hale getirilebilir.

 Bu kodlarla yazılmış dosyaların uzantıları genellikle html ya da htm'dir.

 HTML, en basit yolla bir not defteri ile yazılabilir.

 HTML kodları < ile başlayıp > ile biten anahtarlardır.

ÖRNEK KOD 1 <html>

Tüm HTML belgesi bu şekilde hazırlanmış kodlardan ve aralarında geçen yazılardan olu- şur.

HTML kodlarının içinde o koda ait özellikler olabilir. Bu özelliklere parametre denir. Pa- rametreler sayesinde o kodun diğer özellikleri de belirtilir. Bir HTML koduna birden fazla parametre eklenebilir.

Bir HTML kodu ile ilgili bir özellik(parametre) belirtilecekse tırnak işareti arasında özel- lik="değer" şeklinde yazılır:

ÖRNEK KOD

1 2

<font face="Arial" size="22" color="blue">

Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Ele- ment bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örne- ğin: <b>metin...</b>

Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />

Bu kodlar büyük-küçük harf fark etmeden yazılabilir. Yani <b> ile <B> arasında fark yoktur. Buna karşın uluslararası standartlar gereği küçük harf kullanmak daha yararlı- dır.

(4)

HTML SAYFA YAPISI

ÖRNEK KOD

1 2 3 4 5 6 7 8 9

<html>

<head>

<title>Sayfa Başlığı</title>

(Meta etiketler, scriptler, RSS yolları ve CSS dosyası) </head>

<body>

(Diğer tüm elementler ve düz metin) </body>

</html>

Yukarıda verilen HTML komutları en basit html sayfasının yapısını oluşturur. Tüm komutlar ilk ve son satırda bulunan <html>…</html> etiketleri içine yazılır.

<head>…</head> etiketleri içine o dosya ile ilgili bilgiler ve ayar komutları yazılır.

<body>…</body> etiketleri arasına web sayfamızı oluşturacak olan diğer komutlar ve yazılar yazılır.

İLK HTML DOSYASI

ÖRNEK KOD

1 2 3 4 5 6 7 8

<html>

<head>

<title>..::Bu sayfanın başlığıdır::..</title>

</head>

<body>

İlk html dosyam </body>

</html>

Yukarıdaki komutları Not Defteri gibi bir programa yazıp kaydedelim.

(5)

Kayıt işlemi için Dosya -> Farklı Kaydet yolu izlenir. Açılan pencerede Dosya adı bölü- müne istenilen dosya ismi ve .htm uzantısı girilir. Dosya türü bölümünden “Tüm Dos- yalar” seçilir.

Kaydedilen dosyayı herhangi bir web tarayıcıda açtığınızda aşağıdaki gibi bir çıktı elde edilir.

Html etiketleri iç içe yazılabilir. Yukarıdaki örnekte <html> etiketi içine <body> etiketleri de yazılmıştır. İç içe yazılan etiketlerde dikkat edilmesi gereken şey ilk yazılan etiket en son kapatılır. Yukarıdaki örnekte <html> etiketi önce yazılmıştır ancak en son kapatılmıştır.

(6)

BÖLÜM 2: HTML ETİKETLERİ

GİRİŞ

Önceki bölümde Html sayfa yapısına giriş yapmıştık. Bu bölümde Html dilinde sık kul- lanılan komutları inceleyeceğiz. Bu komutlara geçmeden önce html, head, title ve body etiketlerini tek konu içinde incelemekte fayda var.

Daha öncede anlatıldığı gibi HTML komutları <html>…</html> etiketleri içine yazılır.

<head>…</head> etiketleri içine ise <title> yani sayfa başlığı ve sayfanın ayarlarının yapıldığı <meta>…</meta> etiketleri yer alır. Burada belirtilen <meta> etiketiyle ya- zılanlar sayfa içinde görünmez. Sayfanın arama motorlarında kullanılacak anahtar ke- limeleri, kısa açıklamaları, javascript dosyaları ya da style dosyalarının eklenmesi

<body>…</body> etiketleri arasına ise html dilindeki diğer tüm etiketler yazılır.

<body> etiketinin bazı parametreleri vardır.

<body> Etiketinin parametreleri:

Bgcolor: Sayfanın arka plan rengini belirlemek için kullanılır.

Background: Sayfanın arka planına resim eklemek için kullanılır.

ÖRNEK KOD

1 2 3 4 5

<Html>

………

</body>

</html>

BAŞLIK ETİKETİ

Başlık için <h1>, <h2>, <h3>, <h4>, <h5>, <h6> etiketleri kullanılır.

ÖRNEK KOD

1 2 3 4 5 6

<h1>H1 ile yapılan başlık</h1>

<h6>H6 ile yapılan başlık</h6>

(7)

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

PARAGRAF ETİKETİ

Paragraf için <p>…</p> etiketi kullanılır. Bu komut paragraf yapmak için kullanılır.

Üst ve alt satırdan bir boşluk bırakır.

ÖRNEK KOD

1 2 3

<p>Bu satır ilk paragraftır.</p>

<p>Bu satır 2. Paragraftır.</p>

<p>Bu satır son paragraftır.</p>

<p> Etiketinin parametresi:

Align: Yazılacak yazının sola, sağa, ortaya veya iki yana hizalı olmasını sağlar.

ÖRNEK KOD

1 2 3

<p>Bu satır ilk paragraftır. Sola Hizalı</p>

<p align="center">Bu satır 2. Paragraftır. Ortada</p>

<p align="right">Bu satır son paragraftır. Sağa hizalı</p>

(8)

SATIR ATLAMA ETİKETİ

Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda satır atlamak için

<br /> etiketi kullanırız.

ÖRNEK KOD

1 2

<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>

<p>Bu ikinci paragraf. <br/> Bu satır paragraf değildir.</p>

BİÇİMLENDİRME ETİKETLERİ

Aşağıdaki tabloda verilen etiketler arasına yazılan yazılar belirtilen şekilde biçimlendi- rilir.

ETİKET AÇIKLAMA UYGULAMA

<b>. . </b> Kalın biçimlendirme Metin

<i>. . </i> İtalik biçimlendirme Metin

<u>. . </u> Altı çizgili biçimlendirme Metin

<sup>. . </sup> Üst simge X²

<sub>. . </sub> Alt simge H2

(9)

Aşağıdaki örnek kodu not defteri programına yazınız.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<html>

<head>

<title>

Atatürk’ün Gençliğe Hitabesi </title>

</head>

<body>

<p><h2><b>Atatürk’ün Gençliğe Hitabesi</b></h2></p>

<p><h4><i>Ey Türk Gençliği!</i></h4></p>

<p>Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini, ile- lebet, muhafaza ve müdafaa etmektir.</p>

<p>Mevcudiyetinin ve istikbalinin yegâne temeli budur. Bu te- mel, senin, en kıymetli hazinendir. İstikbalde dahi, seni bu ha- zineden mahrum etmek isteyecek, dâhilî ve haricî bedhahların ola- caktır. Bir gün, İstiklâl ve Cumhuriyeti müdafaa mecburiyetine düşersen, vazifeye atılmak için, içinde bulunacağın vaziyetin imkân ve şerâitini düşünmeyeceksin! Bu imkân ve şerâit, çok nâmü- sait bir mahiyette tezahür edebilir. İstiklâl ve Cumhuriyetine kastedecek düşmanlar, bütün dünyada emsali görülmemiş bir galibi- yetin mümessili olabilirler. Cebren ve hile ile aziz vatanın, bütün kaleleri zaptedilmiş, bütün tersanelerine girilmiş, bütün orduları dağıtılmış ve memleketin her köşesi bilfiil işgal edilmiş olabilir. Bütün bu şerâitten daha elîm ve daha vahim olmak üzere, memleketin dahilinde, iktidara sahip olanlar gaflet ve dalâlet ve hattâ hıyanet içinde bulunabilirler. Hattâ bu iktidar sahipleri şahsî menfaatlerini, müstevlilerin siyasi emelleriyle tevhit ede- bilirler. Millet, fakr ü zaruret içinde harap ve bîtap düşmüş olabilir.</p>

<p>Ey Türk istikbalinin evlâdı! İşte, bu ahval ve şerâit içinde dahi, vazifen; Türk İstiklâl ve Cumhuriyetini kurtarmaktır!

<u>Muhtaç olduğun kudret, damarlarındaki asil kanda mevcuttur!

</u></p>

</body>

</html>

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

(10)

LİSTELEME ETİKETLERİ

Bir metni madde madde yazmak veya sıralı şekilde yazmak için kullanılan etiketlerdir.

<ol>, <ul> ve <li> etiketleri kullanılır.

Listeleme etiketlerinde listedeki her madde <li>…</li> etiketleri arasına yazılır.

<ol> Etiketi:

Sıralı şekilde liste oluşturmak için kullanılır.

<ol> Etiketinin Parametreleri:

Type: Bu parametre sayesinde listenin rakamla ya da harfle başlaması ayarlanabilir.

ÖRNEK KOD

1 2 3 4 5 6

<li>Armut</li>

<li>Portakal</li>

</ol>

(11)

“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle olacaktır.

“A” harfi yerine “I” veya “i” harfleri de kullanılabilir. Type parametresi kullanılmadı- ğında sıralama sayılarla yapılır.

Start: Sıralamanın kaçtan başlayacağını belirtir.

ÖRNEK KOD

1 2 3 4 5 6

<li>Armut</li>

<li>Portakal</li>

</ol>

<ul> Etiketi:

Metni madde madde yazmak için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6

<ul>

<li>Armut</li>

<li>Portakal</li>

</ul>

(12)

<ul> Etiketinin Parametresi:

Type: Kullanılacak madde işaretinin şeklini belirlemeye yarar. Disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare) değerlerini alabilir.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9

</ul>

<li>Armut</li>

</ul>

<li>Portakal</li>

</ul>

FONT ETİKETİ

<FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır.

Font Etiketinin Parametreleri:

Size: Yazının büyüklüğünü belirlemek için kullanılır (1-7 arası değerler alır).

ÖRNEK KOD

1 2 3

<FONT SIZE ="1"> Merhaba</FONT>

(13)

Color: Yazı tipi etiketi içerisinde metnin rengini değiştirmek için kullanılır. Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği yapabilirsiniz.

ÖRNEK KOD

1 2

<FONT size="5" COLOR="aqua"> Merhaba</FONT>

<FONT size="5" COLOR="#FF0000"> Merhaba</FONT>

Face: Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır. Örneğin Face=" Ti- mes New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.

Belirtilen tüm farklı parametreler aynı anda kullanılabilir ancak aynı parametre birden fazla kullanılamaz. Örneğin <font face="Arial" size="3" face="Verdana"> şeklindeki kullanımlar yanlıştır. Face parametresi aynı etiket içinde iki kez kullanılamaz.

ÖRNEK KOD

1 <font face="Algerian" size="7" color="purple">Merhaba</font>

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

(14)

BAĞLANTI ETİKETİ

Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar, dokümanlar, resimler arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link, köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.

 Herhangi bir web sayfasına bağlantı oluşturmak için adresten önce http:// kulla- nılır.

 Hazırlamış olduğumuz site içerisinde link vermek için dosya yolunu yazmak yeterlidir.

 Bir dosyaya bağlantı vermek için o dosya yolunun ve adının tam olarak belirtil- mesi gerekir.

ÖRNEK KOD

1 2 3 4 5

<a href="http://www.meb.gov.tr"> Milli Eğitim Bakanlığı</a><br/>

<a href="index.html">Ana Sayfa</a><br/>

<a href="okul.jpg">Resmi Gör</a><br/>

<a href="dosyalar/resim/resimler.zip">Dosyayı indir</a><br/>

<a href>…</a> Etiketinin Parametresi:

Target: Bu parametre ile verilen bağlantının hangi pencerede açılacağı belirtilir.

target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar.

target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar.

target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağ- lar.

target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.

target="çerçeve(frame) adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır.

ÖRNEK KOD

1 <a href="http://www.meb.gov.tr" target="_blank"> MEB </a>

(15)

Yukarıdaki örnekte verilen bağlantıya tıklandığında yeni pencerede açılacaktır.

 E-posta adresine bağlantı oluşturmak için e-posta adresinden önce “mailto:” ön eki kullanılır.

ÖRNEK KOD

1 <a href="mailto:posta@eposta.com"> E-posta Gönder </a>

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

E-posta Gönder bağlantısına tıklandığı zaman konu, bilgi ve e-posta adresi gibi bilgilerin girilebileceği, aşağıdaki şekilde görünen e-posta gönderme programı açılacaktır.

İstenilen bilgiler yazıldıktan sonra “Gönder” düğmesine tıklandığında, e-postamız gön- derilmiş olur.

(16)

TABLO ETİKETİ

Bir web sayfasına tablo eklemek için <table>…</table> etiketleri kullanılır. Tablo etiketleri diğer etiketlerden daha farklı kullanım yapısına sahiptir.

Satır ve Sütun Etiketleri

1. Satır 1. sütun

1. Satır 2. sütun

1. Satır 3. sütun

1. Satır 4. sütun 2. Satır

1. sütun 2. Satır

2. sütun 2. Satır

3. sütun 2. Satır

4. sütun

Yukarıdaki gibi bir tablo oluşturmak için sütun ve satırların kesiştiği hücrelerin oluş- ması gerekir. Bu nedenle <table> etiketi tek başına tablo oluşturmak için yeterli de- ğildir. <table> etiketi içine bir satır ve bir sütun eklemek için <tr> ve <td> etiketle- riyle birlikte kullanılması gerekir.

ÖRNEK KOD

1 <table border="2"> Tablo böyle olmaz</table>

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

Yukarıda da görüldüğü gibi satır ve sütun etiketleri kullanılmadığı zaman tablo oluş- mayacaktır.

ÖRNEK KOD

1 2 3 4 5 6 7

<tr>

<td>

1 satır ve 1 sütun </td>

</tr>

</table>

Tablo oluşturma işleminde dikkat edilmesi gereken en önemli husus <table>, <tr> ve

<td> etiketlerinin en küçük tabloda bile aynı anda kullanılmasıdır.

(17)

Aşağıda tablolar konusunu daha iyi anlamanız için çeşitli örnekler verilmiştir.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10

<tr>

<td>

</tr>

</table>

ÖRNEK KOD

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

<tr>

<td>

1. satır ve 1. sütun </td>

</tr>

<tr>

<td>

</tr>

</table>

ÖRNEK KOD

1 2 3

<tr>

<td>

(18)

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

</table>

(19)

Tablo Etiketlerinin Parametreleri

Border: Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama sürecinde bu seçenek sıklıkla kullanılmaktadır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<tr>

<td>

</tr>

<tr>

<td>

</tr>

</table>

ÖRNEK KOD

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

<tr>

<td>

</tr>

<tr>

<td>

(20)

14 15 16 17 18

<td>

</tr>

</table>

Sizde border değerini değiştirerek farklı tablolar oluşturabilirsiniz.

Bordercolor: Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<tr>

<td>

</tr>

<tr>

<td>

</tr>

</table>

(21)

Bordercolor parametresi <td> etiketiyle de kullanılabilir ancak bazı web tarayıcılarda bu özellik desteklenmez. Aşağıdaki örnek kod Internet Explorer da çalışırken Chrome ile çalışmayacaktır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<tr>

</tr>

<tr>

</tr>

</table>

Bgcolor: Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştir- mek için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10

<tr>

<td>

</tr>

</table>

(22)

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10

<tr>

1. satır ve 2. sütun </td >

</tr>

</table>

Width: Tablo veya sütun genişliğini pixel cinsinden ayarlamak için kullanılır.

Height: Tablo veya satırın yüksekliğini pixel cinsinden ayarlamak için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<tr>

</tr>

<tr>

</tr>

</table>

(23)

Colspan: Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<tr>

a </td>

<td>

b </td>

<td>

c </td>

</tr>

<tr>

d </td>

<td>

e </td>

</tr>

<tr>

<td>

f </td>

<td>

g

(24)

27 28 29 30 31 32 33 34 35

</td>

<td>

h </td>

<td>

ı </td>

</tr>

</table>

Rowspan: Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<tr>

<td>

a </td>

<td>

b </td>

f </td>

</tr>

<tr>

c </td>

<td>

d </td>

</tr>

<tr>

<td>

e </td>

</tr>

</table>

(25)

Colspan ve rowspan değerlerini değiştirerek bu konuyu daha iyi kavrayabilirsiniz.

Cellspacing: Tablo kenarlığının boşluğunu ve kalınlığını ayarlar.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<tr>

<td>

Boşluk </td>

<td>

Kalınlık </td>

</tr>

<tr>

<td>

c </td>

<td>

d </td>

</table>

Cellspacing değeri 0 yapıldığında aşağıdaki gibi bir çıktı elde edilir.

Cellspacing değerini değiştirerek bu özelliği daha iyi kavrayabilirsiniz.

(26)

Cellpadding: Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar ola- cağını belirlemek için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<tr>

<td>

Boşluk </td>

<td>

Kalınlık </td>

</tr>

<tr>

<td>

c </td>

<td>

d </td>

</table>

Cellpadding değeri 0 yapıldığında aşağıdaki gibi bir çıktı elde edilir.

Cellpadding değerini değiştirerek bu özelliği daha iyi kavrayabilirsiniz.

Background: Tablonun veya istenilen hücrenin arka plânına resim eklemek için kulla- nılır.

ÖRNEK KOD

1 2 3 4 5

<tr>

<td>

Boşluk

(27)

6 7 8 9 10 11

</td>

<td>

Kalınlık </td>

</tr>

</table>

Burada dikkat edilmesi gereken konu, eklenecek resim dosyasının yolunu doğru yaz- maktır.

RESİM ETİKETİ

Web sayfalarına resim eklemek için <img src> etiketi kullanılır.

ÖRNEK KOD

1 <img src="res1.jpg">

Resim Etiketinin Parametreleri

Width: Eklenilecek resmin pixel cinsinden genişliğini gösterir.

Height: Eklenilecek olan resmin pixel cinsinden yüksekliğini gösterir.

Border: Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır.

Border=”0” olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da ar- tar.

Alt: Fare ile resmin üzerine gelindiğinde yazılmasını istediğiniz metni belirlemek için kullanılır.

(28)

Align: Eklenilecek olan resmin nasıl hizalanacağını belirtmek için kullanılır. Left değeri ile kullanıldığı zaman resim sola hizalı, right değeri ile kullanıldığında resim sağa hi- zalı, center ile kullanıldığında ise resim ortalanmış olarak sayfaya eklenecektir.

ÖRNEK KOD

1 2 3 4 5 6 7 8

<tr>

<td>

<img src="agac.jpg" width="300" height="250" border="3"

align="right" alt="Fareyi üzerinde bekletin">

</td>

</tr>

</table>

Web sayfalarında sadece yazılara bağlantı eklenmez. Aynı zamanda resimlere de bağ- lantı eklenebilir. Bunun için <a href><img src>….</a> etiket grubu kullanılır.

ÖRNEK KOD

1 2 3

</a>

Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde resme tıklayarak belirtilen adrese bağlantı verilebilir.

(29)

FORM ETİKETİ

Çeşitli web sayfalarında bulunan iletişim, bize ulaşın gibi bölümler formlar aracılığıyla yapılır. Html dilinde form oluşturmak bir web sayfası için yeterli değildir. Formlar oluş- turulduktan sonra içindeki bilgilerin kaydedilmesini ve işlenmesini sağlayan kodlar ek- lenmelidir.

Bir web sayfasında form oluşturmak için gereken tüm form nesneleri

<form>…</form> etiketleri arasına yazılır.

<form> Etiketinin parametreleri:

Action: Formdaki bilgilerin hangi web sayfasına gönderileceğini belirtmeye yarar.

Method: Formdaki bilgilerin nasıl gönderileceğini belirtir. “POST” ve “GET” değerlerin- den birini alabilir.

POST metodu ile forma girilen veriler gizlice gönderilir, kullanıcı bu bilgileri göremez.

GET metodunda ise formdaki bilgiler adres çubuğuna yazılarak gönderilir.

Genellikle POST metodu kullanılır.

INPUT ETİKETİ

<input type> etiketi <form> etiketinin içinde kullanılır. Formda kullanılacak olan bilgi girişi nesnelerini eklemek içindir.

<input> Etiketinin parametreleri:

Name: Input etiketine isim vermek için kullanılır. Forma girilen veriler bu isimler sa- yesinde diğer sayfalara aktarılır.

Maxlength: Forma girilecek bilginin en fazla kaç karakterden oluşacağını belirtir.

Size: Input öğesinin genişliğini ayarlamak için kullanılır.

Value: Input öğesinin alacağı değeri belirtir.

Type: Input öğesinin türünü belirtir.

Type parametresinin alacağı değerler ile hangi form öğesinin ekleneceği belirlenir. Bu öğeler aşağıda belirtilmiştir.

Text:

Metin kutusu eklemek için kullanılır.

ÖRNEK KOD

1 2 3 4 5 6 7

<p>Kimlik No: <input type="text" name="kimlikno" size="15"></p>

<p>Ad Soyad: <input type="text" name="adsoyad" size="25"

maxlength="11"></p>

<p>Meslek: <input type="text" name="meslek" value="Öğ- renci"></p>

</form>

(30)

Password:

Şifre giriş işlemleri için kullanılır.

ÖRNEK KOD

1 2 3

<p>Şifre: <input type="password" name="sifre"></p>

</form>

Reset:

Formdaki bütün girilen verileri temizlemek için kullanılır.

Value parametresi ile reset düğmesi üzerine istenilen metin yazılır.

Submit:

Formu action parametresinde belirtilen sayfaya göndermek için kullanılır.

Value parametresi ile submit düğmesi üzerine istenilen metin yazılır.

ÖRNEK KOD

1 2 3 4 5 6

<p>Kullanıcı Adı: <input type="text" name="k_adi">

<p>Şifre: <input type="password" name="sifre"></p>

</form>

(31)

CheckBox:

Formda birden çok seçeneğin seçilmesini istediğimiz durumlarda kullanılır.

Checked parametresini kullanarak sayfa yüklendiği zaman, seçili olması istenilen de- ğer belirlenir.

Radio:

Formda sadece bir tane değer seçilmesini istediğimiz durumlarda kullanılır.

Checked parametresini kullanarak sayfa yüklendiği zaman, seçili olması istenilen de- ğer belirlenir.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9

<p><b>Hobileriniz</b></p>

<p><input type="checkbox" name="onay1" checked="on"> İnternet <input type="checkbox" name="onay2">Kitap

<input type="checkbox" name="onay3">Müzik</p>

<p><b>Medeni Hali</b></p>

<p><input type="radio" name="medeni_d" value="1">Evli <input type="radio" name="medeni_d" value="2">Bekar</p>

</form>

TEXTAREA ETİKETİ

Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken <Textarea>…</ Textarea> kullanarak forma, birden fazla satırdan olu- şan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir.

(32)

ÖRNEK KOD

1 2 3 4 5

<p><b>Adres</b></p>

</textarea></p>

</form>

SELECT ETİKETİ

Açılan kutu veya Liste Kutusu eklemek için <select><option> etiketleri kullanılır.

Multiple parametresiyle listedeki değerlerin birden çok seçilip seçilemeyeceği belirlenir.

Listeye eklenecek seçenekler <option> etiketi içine yazılır.

ÖRNEK KOD

1 2 3 4 5

<p><b>Sınıfınız</b></p>

</select>

</form>

(33)

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11

<p><b>Sevdiğiniz Sporlar</b></p>

<option>Futbol</option>

<option>Basketbol</option>

<option>Voleybol</option>

<option>Tenis</option>

<option>Yüzme</option>

<option>Buz hokeyi</option>

</select>

</form>

(34)

BÖLÜM 3: 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.

(35)

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 belirlemek ö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.

(36)

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>

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ıdaki boyutta ve tipte olacaktır.

(37)

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 uygulama 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<html>

<head>

</head>

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

<tr><td height="100">

<p align="center">En üst</p>

</td></tr>

Menüler </td></tr>

İçerik </td></tr>

Footer </td></tr>

</table>

</font>

</body>

</html>

(38)

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<html>

<head>

</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ı

İlke ve İnkılapları

Galeri

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

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

İçerik </td></tr>

(39)

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” parametresi 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.

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>

(40)

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

</head>

</td></tr>

Ana Sayfa

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

Hayatı

İlke ve İnkılapları

Galeri

İ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>

(41)

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.

(42)

Ö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>

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

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

</font></a>

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

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

</a>

</td></tr>

Ş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.

(43)

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.

ÖRNEK KOD

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<html>

<head>

</head>

</td></tr>

Ana Sayfa

Hayatı

Galeri

<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>

(44)

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.

(45)

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<html>

<head>

</head>

</td></tr>

Ana Sayfa

Hayatı

Galeri

<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">

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

</td><td>

<td width="200">

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

</td><td>

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

</td></tr>