HTMLE GİRİŞHTML, HyperText Markup Language, browserlardangörebileceğimiz(İnternet Explorer,Netscape gibi) internetdökümanlarını yaratmayayarayan bir işaretleme dilidir. İnternetüzerindeki tüm sayfalarınkaynağı htmldir.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, pico,wordpad gibieditörleryeterlidir.Bunların yanında Dreamweaver,Homesite gibi bu işiçinhazırlanmış ve kodlamayı kolaylaştıran programlar da vardır. 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. titledan 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: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: <font color=red face=arial size=3″> 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)
Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın. Renkler : HTMLdökümanlarında renkler yaİngilizce isimleriyle,ya da hexadecimaldeğerleriyle belirtilir.Ensık kullanılan ve hemen hemen bütünbrowserların desteklediği 16renkler aşağıdakilerdir: Renk Renk adı: Renk Renk adı: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Renklerin hex-codelarını aşağıdaki linkten bulabilirsiniz. 16 milyon renk kodu için tıklayın
Örnek : <body bgcolor=green> Bu örnekte artalan yeşile döner. <body bgcolor=#008000″> aynı sonucu verir. Örnek : <font color=#4B0082″> => Font rengi indigo oldu. LİNKLER:Linkler <a></a> etiketi içinde, href=" komutuyla belirtilir. Örnek: <a href=http://alnumel.page.tl target=_blank>alnumel ana sayfa</a> 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. <a href=http://alnumel.page.tl target=_blank>alnumel ana sayfa</a> 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:izmirhack@hotmail>Mail atmak için tıklayın.</a> Mail atmak için tıklayın.Bulinketıklandığında bilgisayarda kullanıcıya ait mail programı açılırvegö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: <img src=resim.jpg> şeklinde olur.Dikkat etmemiz gerekenler kulanacagimiz imajın .jpg ya da .gif formatında olması ve dizin yapısıdır. Öznitelikler: <img src=" width=" height=" border=" alt="> 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>Içkiler:
<li>Bira
<li>Votka
<li>Sarap
<li>Viski
<li>Raki
</ol> Çerezler: - Kavurga
- Çekirdek
- Misir
- Cips
Içkiler: - Bira
- Votka
- Sarap
- Viski
- Raki
Ö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: - Kavurga
- Çekirdek
- Misir
- 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>Içkiler:
<li>Bira
<li>Votka
<li>Sarap
<li>Viski
<li>Raki</li>
</ul> Çerezler: - Kavurga
- Çekirdek
- Misir
- Cips
Içkiler: - Bira
- Votka
- Sarap
- Viski
- Raki
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 demakarna vetürevlerini. Lazanya favorimdir. Pizza ve mantıya dabayılırım.
<dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukçalezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.
<dt>Et ve ben
<dd>Etseven bir insanımdır. Her çeşit kebabı afiyetle yerim.Kırmızı olsun,beyaz olsun, hemen hemen bütün etleri yerim. Balıkseçerim ama.
</dl> Karbonhidrat ve ben Ençokbol karbonhidratli yemekleri severim,özellikle de makarnavetü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 Etsevenbir insanimdir. Her çesit kebabi afiyetle yerim. Kirmizi olsun,beyazolsun, 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: <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 ö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,middledı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 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> İsim/soyad :
Doğum yeri :
Doğum tarihi :
Cinsiyet : Erkek Kız
Hobiler:
Müzik dinlemek
Mantı açmak
Bungee Jumping
Aikido
Halay çekmek
Diğer : | 
Buradasınız: 
