06-25-2015, 11:56 PM
HTML, HyperText Markup Language, tarayıcı (browser)'lardan görebileceğimiz (Internet Explorer, Netscape gibi) internet dokümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları birşey ifade etmez.
HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.HTML, *.sHTML gibi uzantılarla kaydedilir. Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.
Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body> . . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konulur. title, tarayıcımızın en üstünde gözükür ve oluşturulan sayfanın başlığıdır.
Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir. Meta etiketleri için detaylı bilgiye [/url]buradan ulaşabilirsiniz.
title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
Herhangi bir web sayfasının HTML kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.
Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.
Çift taraflı etiketler içiçe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir.
<br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.
----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
BASİT HTML ETİKETLERİ
Başlıklar:
6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır.
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır.
<font> etiketi HTML 4. 0 'da desteklenmemektedir ama yine de taracıyıcılar <font> etiketi ile yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında <font> etiketi kullanılmaktadır. Başlangıç seviyesi için <font> etiketi kullanmak yeterliyken ilerki seviyeler için stilleri kullanmanız tavsiye edilir.
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
[b][i]LİSTELER:
[/i][/b]
[b][i]Üç çesit liste vardır:
[b]i. Sıralı Liste(Ordered List):
[/b][/i][/b]
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
TABLOLAR
Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.
Örnek :
----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bağımsız Değişkenler:
border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.
cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.
bgcolor: <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece tek bir hücre renklendirilir.
align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.
valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.
colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.
Örnek :
[b][i][b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b][/i][/b]
rmlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları hazırlayabilirsiniz. Ayrıntılı bilgi için [url=http://www.bidb.odtu.edu.tr/ccmscontent/articleRead/articleId/117]buraya tıklayın.
Örnek:
#Sabit Alınırsa Sevinirim :)
HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.HTML, *.sHTML gibi uzantılarla kaydedilir. Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.
Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body> . . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konulur. title, tarayıcımızın en üstünde gözükür ve oluşturulan sayfanın başlığıdır.
Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir. Meta etiketleri için detaylı bilgiye [/url]buradan ulaşabilirsiniz.
Kod:
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
Herhangi bir web sayfasının HTML kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.
Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.
Kod:
<body bgcolor="yellow">Çift taraflı etiketler içiçe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir.
Kod:
<b><i>Bu bir yanlış örnektir. </b></i>
<b><i>Doğrusu budur. </i></b><br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.
----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
BASİT HTML ETİKETLERİ
Başlıklar:
6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır.
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
Kod:
<font color="red" face="arial" size="3">. . </font>Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır.
<font> etiketi HTML 4. 0 'da desteklenmemektedir ama yine de taracıyıcılar <font> etiketi ile yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında <font> etiketi kullanılmaktadır. Başlangıç seviyesi için <font> etiketi kullanmak yeterliyken ilerki seviyeler için stilleri kullanmanız tavsiye edilir.
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
[b][i]LİSTELER:
[/i][/b]
[b][i]Üç çesit liste vardır:
[b]i. Sıralı Liste(Ordered List):
[/b][/i][/b]
HTML etiketi
Etiketin Web Sayfasındaki görüntüsü
Etiketin Web Sayfasındaki görüntüsü
Kod:
<ol type="1">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Mısır
<li>Cips
</ol>
<ol type="a">Içkiler:
<li>Bira
<li>Votka
<li>Şarap
<li>Viski
<li>Rakı
</ol>Etiketin Web Sayfasındaki görüntüsü
-
Çerezler:
- Kavurga
- Çekirdek
- Mısır
- Cips
-
Içkiler:
- Bira
- Votka
- Şarap
- Viski
- Rakı
[b][i]----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/i][/b]
TABLOLAR
Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.
Örnek :
Kod:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr>
</table>Bağımsız Değişkenler:
Kod:
<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.
cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.
bgcolor: <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece tek bir hücre renklendirilir.
align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.
valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.
colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.
Örnek :
Kod:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
<tr><td>6. hücre</td><td>7. hücre</td></tr>
</table>rmlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları hazırlayabilirsiniz. Ayrıntılı bilgi için [url=http://www.bidb.odtu.edu.tr/ccmscontent/articleRead/articleId/117]buraya tıklayın.
Örnek:
Kod:
<form name="kimlik" action="gonder.php" method="get">
Isim/soyad : <input type="text" size="20" name="isim"><br>
Doğum yeri : <input type="text" size="20" name="dogumyer" ><br>
Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br>
Cinsiyet : <input type="radio" name="cins" value="erkek" > Erkek <input type="radio" name="cins" value="kiz"> Kiz<br>
Hobiler:<br>
<input type="checkbox" name="muzik" >Müzik dinlemek<br>
<input type="checkbox" name="manti" >Manti açmak<br>
<input type="checkbox" name="bungee" > Bungee Jumping<br>
<input type="checkbox" name="aikido">Aikido<br>
<input type="checkbox" name="halay">Halay çekmek<br>
<input type="checkbox" name="diger">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SIL">
</form>
----*-*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
action: formun gönderileceği adresi belirtir.
[b][size=x-small][font=Arial, Helvetica, sans-serif]method="get":[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif]Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]method="post":[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif]Formdaki bilgiler bir adrese postalanacaksa kullanılır. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="text" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif] Tek satırlık bir metin alanı açar. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]size="" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif]Bu metin alanının boyutunu belirler. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="checkbox" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif] Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="radio" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif] Tek seçenekli bir sorunun tek yanıtı alınır. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="submit" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif] formu [/font][/size][i][size=x-small][font=Arial, Helvetica, sans-serif]action[/font][/size][/i][size=x-small][font=Arial, Helvetica, sans-serif]'la belirtilen dosyaya yönlendiren bir buton yaratır. [/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="reset" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif]Bu butona basınca form boş hale gelir[/font][/size]
[b][size=x-small][font=Arial, Helvetica, sans-serif]type="password" :[/font][/size][/b][size=x-small][font=Arial, Helvetica, sans-serif] Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür. [/font][/size]
<textarea rows="" cols=""> :type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.Kod:
----*-*--------------------------------------------------------------------------------------------------------------------------------------
Listeleme:
[size=x-small][font=Arial, Helvetica, sans-serif][b]Select[/b] ve [b]option [/b]etiketlerini kullanarak seçimlik liste (menü) oluşturabiliriz. [b]Option[/b] etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri [b]select[/b] etiketinde belirtilen değişkenin değeri haline gelir.[/font][/size]
[size=x-small][font=Arial, Helvetica, sans-serif][b]Örnek:[/b][/font][/size]
<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>#Sabit Alınırsa Sevinirim :)
