HTML'E GİRİŞ

HTML, HyperText Markup Language, browser'lardan görebileceğimiz (İnternet Explorer,Netscape gibi) internet dökümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı html'dir.Browser olmadan html kodları birşey ifade etmez.

HTML dökümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir.Bunun için notepad ve pico gibi editörler yeterlidir.

Her html dökümanı <html> ile başlar ve </html> ile biter.<> şeklinde görülen komutlara etiket (tag) adı verilir.İki ana kısımdan oluşmaktadır: <head>...</head> ve <body>...</body>. head'ın içine <title>...</title> etiketi gömülür.title, browser'ımızın en üstünde yazan açıklamayı içerir.

title'dan sonra head kapatılır ve ana kısım olan body' ye geçilir.Sayfamızda görüntülemek istediğimiz herşeyi body içine gömeriz.

Örnek:

<html>
<head>
<title>Başlık</title>
</head>
<body>
Merhaba Dünyalı
</body>
</html>

Herhangi bir web sayfasının html kodunu görmek istediğimiz zaman,mouse'ın sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.

METİNLER:

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.

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

H1 ile yapılan başlık

H2 ile yapılan başlık

H3 ile yapılan başlık

H4 ile yapılan başlık

H5 ile yapılan başlık

H6 ile yapılan başlık

Fontlar ve Metin Biçimleme:

Color, yazı karakterinin rengini,face yazı tipini (arial,verdana,tahoma gibi), size da boyutunu belirler. Size özniteliğinde kullanılan rakam 1'den 7'ye kadardır.

<b>...</b>: koyu renk yazı(bold)
<i>...</i> : italik
<p>...</p> : paragraf
<u>...</u> : alt çizgi (underline)
<center>...</center> : metni ortalar
<br> : satır atlama
<hr> : yatay çizgi (horizontal rule)

<div align="right">Bu yazı sağda yer alır</div>

<div align="left">Bu yazı solda yer alır</div>

<BODY bgColor=#00000> bu kod sayfanın tüm rengini siyah yapar.

<marquee bgcolor="#FF9830">ÜNYE İKTİSADİ VE İDARİ BİLİMLER FAKÜLTESİ</marquee> Buda kayan yazı kodları.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> bu Türkçe karakter destekleme kodudur <title>…</title> kodunun peşine yapıştırırsanız karakter sorununuz çözülecektir.

Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.

LİNKLER:

Linkler <a>...</a> etiketi içinde, href="" komutuyla belirtilir.

Örnek:

<a href="http://www.unyeiibf.8m.com/custom.html " target="_blank">ANA SAYFA </a>

ANA SAYFA

Bu örnekte bir de target özniteliği verilmiştir.Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir.Aynı pencerede açılmasını isterseniz de target="_top" olmalıdır,ya da hiç belirtmezseniz de olur.

<INPUT TYPE=BUTTON VALUE=' ANA SAYFA ' onClick="self.location.href=('http://www.unyeiibf.8m.com/custom.html')"> bu komutla buton oluşturabilirsiniz yapmanız gereken size yarayacak yerleri değiştirmek.

Eğer hazırladığınız dökümanlar arasında bir bağlantı kurmak istiyorsanız,<a> etiketini aşağıdaki gibi kullanmalısınız.

<a href="dosyaadi.html">Önceki sayfa</a>

Bir mail adresine link vermek istiyorsanız:

<a href="mailto:serkan.ozbas@mynet.com">Mail atmak için tıklayın.</a>

Mail atmak için tıklayın.

Bu linke tıklandığında bilgisayarda kullanıcıya ait mail programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.

Bu sayfada olduğu gibi aynı döküman içinde bağlantı kurmak istersek de:

<a href="#link">Linklere git</a>

kalıbını kullanırız,ve bağlantı kurmak istediğimiz yere,mesela linkler başlığına:

<a name="link">Linkler</a>

şeklinde bir ekleme yaparız.

RESİM EKLEME:

Resim ekleme:

şeklinde olur.Dikkat etmemiz gerekenler kulanacagimiz imajın ".jpg" ya da ".gif" formatında olması ve dizin yapısıdır.

Öznitelikler:

alt: Resme açıklama vermemizi sağlar.Mouse'ı resmin üstüne getirdiğimizde,alt özniteliğinde yazılan açıklama ekranda çıkar.Eğer resim açılmazsa,onun yerine açıklama görünür.

src="" : Resim dosyasının kaynağını belirtir.

** Eğer artalanda bir imajın çıkması istenirse:

<body background="resim.jpg"> şeklinde yazılır.

LİSTELER:

Üç çeşit liste vardır:

i.Sıralı Liste(Ordered List):

Örnek:

<ol type="1">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Misir
<li>Cips
</ol>
<ol type="a">taşıtlar:
<li>binek
<li>inek
<li>oto
<li>moto
<li>keto
</ol>

Çerezler:

1. Kavurga

2. Çekirdek

3. Misir

4. Cips

taşıtlar:

a. binek

b. inek

c. oto

d. moto

e. keto

Örnekte görüldüğü gibi type özniteliği sıralı listenin türünü belirler.

type: {1,a,A,I,i}

Listeye bir değer vererek istediğimiz sayıdan başlatabiliriz:

Örnek:

<ol start="199">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Misir
<li>Cips
</ol>

Çerezler:

199. Kavurga

200. Çekirdek

201. Misir

202. Cips

ii.Sırasız Liste(Unordered List):

Örnek:

<ul type="circle">Çerezler:
<li>Kavurga
<li>Çekirdek
<li>Misir
<li>Cips</li>
</ul>
<ul type="disk">taşıtlar:
<li>kamyon
<li>minibüs
<li>otobüs
<li>oto
<li>motor</li>
</ul>

Çerezler:

Kavurga
Çekirdek
Misir
Cips

taşıtlar:

kamyon
minibüs
otobüs
oto
motor

Gene burda da type özniteliği sıralı listenin türünü belirler.

type:{square,disc,circle}

iii.Tanımlama Listeleri (Definition List):

Örnek:

<dl>
<dt>Karbonhidrat ve ben
<dd>En çok bol karbonhidratlı yemekleri severim,özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım.
<dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.
<dt>Et ve ben
<dd>Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama.
</dl>

Karbonhidrat ve ben

En çok bol karbonhidratli yemekleri severim,özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantiya da bayilirim.

Sebze ve ben

Sebzeyle aram pek iyi degildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun disinda dolma, sarma da güzeldir.

Et ve ben

Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kirmizi olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balik seçerim ama.

TABLOLAR:

Tablolar <table>....</table> etiketleri arasında yapılır.<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 :

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

1. hücre	2. hücre	3.hücre
4. hücre	5. hücre	6. hücre

Öznitelikler:

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 özniteliği 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 özniteliği kullanılır. Birleştirilen hücreye ait <td>..</td> etiketini silinir.

Örnek :

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

1. hücre	2. hücre	3. hücre
4. hücre	5. hücre
4. hücre	6. hücre	7. hücre

FORMLAR:

Formlar <form>...</form> etiketleri arasında yapılır.

Örnek:

<form name="kimlik" action="gonder.php" method="get">
İsim/soyad : <input type="text" size="20"><br>
Doğum yeri : <input type="text" size="20"><br>
Doğum tarihi : <input type="text" size="10"><br>
Cinsiyet : <input type="radio" name="cins"> Erkek <input type="radio" name="cins"> Kız<br>
Hobiler:<br>
<input type="checkbox">Müzik dinlemek<br>
<input type="checkbox">Mantı açmak<br>
<input type="checkbox"> Bungee Jumping<br>
<input type="checkbox">Aikido<br>
<input type="checkbox">Halay çekmek<br>
<input type="checkbox">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="SİL">
</form>

action: formun gönderileceği adresi belirtir
method="get":Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post":Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text" : tek satırlık bir metin alanı açar
size="" :Bu metin alanının boyutunu belirler
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı oluşturur.Buraya girilen her karakter * şeklinde görünür.
<textarea rows="" cols=""> :type=“text” gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullanırız.cols metin alanının uzunluğunu,rows ise yüksekliğini pixel cinsinden verir.

Listeleme:

Örnek:

<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>

ÇERÇEVELER

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız.

Örnek:

<html><head>
<title>Cerceveler</title></head>
<frameset rows="*,*,*">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>

Örnek:

<html><head>
<title>Cerceveler</title></head>
<frameset cols="*,*,*">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>

Örneklerde gördüğünüz * miktarı eşit miktarda kaç tane çerçeve olacağını gösterir.<frameset> etiketinde kaç tane * belirttiysek o kadar <frame src=""> belirtmemiz gerekir.* yerine pixel cinsinden bir sayi ya da % cinsinden oran da belirtebiliriz.cols, sayfaların yanyana çıkmasini, rows ise üstüste çıkmasını sağlar.