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
<meta>…/<meta> etiketleri aracılığıyla olur.
<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 bgcolor="red">
………
</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>
<h2>H2 ile yapılan başlık</h2>
<h3>H3 ile yapılan başlık</h3>
<h4>H4 ile yapılan başlık</h4>
<h5>H5 ile yapılan başlık</h5>
<h6>H6 ile yapılan başlık</h6>
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>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
<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>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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 X2
<sub>. . </sub> Alt simge H2
Aşağıdaki örnek kodu not defteri programına yazınız.
<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ş olabi-lir. Bütün bu şerâitten daha elîm ve daha vahim olmak üzere, mem-leketin 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.
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
<ol type="A">
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
<li>Portakal</li>
</ol>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
“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
<ol start="3">
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
<li>Portakal</li>
</ol>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
<ul> Etiketi:
Metni madde madde yazmak için kullanılır.
ÖRNEK KOD
1 2 3 4 5 6
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
<li>Portakal</li>
</ul>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
<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 type="disc">
<li>Elma</li>
</ul>
<ul type="circle">
<li>Armut</li>
</ul>
<ul type="square">
<li>Portakal</li>
</ul>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
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>
<FONT SIZE ="4"> Merhaba</FONT>
<FONT SIZE ="7"> Merhaba</FONT>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
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 yapabi-lirsiniz.
ÖRNEK KOD
1 2
<FONT size="5" COLOR="aqua"> Merhaba</FONT>
<FONT size="5" COLOR="#FF0000"> Merhaba</FONT>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
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 TiTi-mes 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.
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 ye-terlidir.
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/>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıda-ki çıktıyı verir.
<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>
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 bilgile-rin 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.
TABLO ETİKETİ
Bir web sayfasına tablo eklemek için <table>…</table> etiketleri kullanılır. Tablo eti-ketleri 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
<table border="2">
<tr>
<td>
1 satır ve 1 sütun </td>
</tr>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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.
Aşağıda tablolar konusunu daha iyi anlamanız için çeşitli örnekler verilmiştir.
<table border="2">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
<table border="2">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
ÖRNEK KOD
1 2 3
<table border="2">
<tr>
<td>
4
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="5">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
<table border="15">
<tr>
14
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="2" bordercolor="red">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="2" bordercolor="red">
<tr>
<td bordercolor="blue">
1. satır ve 1. sütun </td>
<td bordercolor="green">
1. satır ve 2. sütun </td>
</tr>
<tr>
<td bordercolor="pink">
2. satır ve 1. sütun </td>
<td bordercolor="black">
2. satır ve 2. sütun </td>
</tr>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="2" bgcolor="yellow">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki
<table border="2">
<tr>
<td bgcolor="yellow">
1. satır ve 1. sütun </td>
<td bgcolor="pink">
1. satır ve 2. sütun </td >
</tr>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="2" width="400">
<tr>
<td width="250" height="50">
1. satır ve 1. sütun </td>
<td width="150" height="50">
1. satır ve 2. sütun
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
Colspan: Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.
ÖRNEK KOD
<table border="1" width="200">
<tr>
27
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
Rowspan: Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.
ÖRNEK KOD
<table border="1" width="200">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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
<table border="3" bordercolor="red" cellspacing="10">
<tr>
<td>
Boşluk </td>
<td>
Kalınlık </td>
</tr>
<tr>
<td>
c </td>
<td>
d </td>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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.
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
<table border="3" cellspacing="0" cellpadding="10">
<tr>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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.
<table border="1" background="bilgisayar.png" width="250" he-ight="250">
<tr>
<td>
Boşluk
6 7 8 9 10 11
</td>
<td>
Kalınlık </td>
</tr>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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.
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
<table border="1" width="500" heigt="300">
<tr>
<td>
<img src="agac.jpg" width="300" height="250" border="3"
align="right" alt="Fareyi üzerinde bekletin">
</td>
</tr>
</table>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde aşağıdaki çıktıyı verir.
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 href="http://www.meb.gov.tr>
<img src="agac.jpg" width="300" height="250" border="3">
</a>
Yukarıdaki komutları not defterine yazıp html dosyası olarak kaydettiğinizde resme tıklayarak belirtilen adrese bağlantı verilebilir.
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
Ç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