Html ile ilgili genel bilgiler anlatacağımız bu dersi orta seviyedeki arkadaşlar için hazırladım.
HTML KODLARI
■HTML kodları İngilizce konuşma diline göre hazırlanmıştır.
■Her HTML kodu "< >"(tag) arasına yazılır.(<html> gibi)
■Her HTML koduna Tag denir.
■Türkçe karakterlere dikkat edilir.((i,I) doğru bir kullanımken (İ,ı) yanlış bir kullanımdır)
■Büyük harf küçük harf duyarlılığı yoktur. <html>,<HTML>
■Her açılan kod kapatılır.(istisnalar vardır)
<html>.................</html>
HTML KODLARIYLA ÖRNEK BİR WEB SAYFASI
<HTML>
<HEAD>
<TITLE>
Merhaba
</TITLE>
</HEAD>
<BODY>
Bu Benim İlk Web Sayfam
</BODY>
</HTML>
Başlığı Merhaba,içeriği Bu Benim İlk Web Sayfam olan html kodlarını not defterinde yazdık.Bu bizim ilk dosyamız olduğu için kaydederken 'index.html' adıyla farklı olarak kaydettik. Artık dosyamız bir web dosyası oldu.
Hazırladığımız web dosyasında yapılacak değişiklikler için web dosyamıza gelip "sağ tıkla-birlikte aç-not defteri" yolunu izleriz.
METİN DÜZENLEME ETİKETLERİ
<HX>
Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini tanımlar. 'x' değeri 1'den 6'ya kadar değer alabilir. Sayı arttıkça yazı büyüklüğü azalır. <hx> ile kullanılacak parametrelerden birisi align'dır. Align kullanıldığı sayfadaki yatay yerini belirler. Left (sola yaslı), right (sağa yaslı), center (ortala), justify (her iki yana yaslı) değerlerini alabilir. Align="justify" html 4.0 etiketi olduğu için bazı tarayıcılarda sorun çıkarmaktadır. <h1 align="center"> Bilgi </h1> yazdığınızda "Bilgi"kelimesini ortalı bir şekilde yazacaktır.
Örnek :
<html>
<head><title>Başlık Komutları</title>
</head>
<body>
<h1>HTML KOMUTLARI</h1>
<h2>HTML KOMUTLARI</h2>
<h3>HTML KOMUTLARI</h3>
<h4>HTML KOMUTLARI</h4>
<h5>HTML KOMUTLARI</h5>
<h6>HTML KOMUTLARI</h6>
<body>
</html>
Metni Ortalamak ([ortala]metin[/ortala])
Eğer bir paragrafı ortalanmış olarak yazmak istiyorsanız (ya da kullandığınız resim vb. ortalanmış görünmesini istiyorsanız) [ortala] yazarak başlayın ve bu özelliği yine [/ortala] ile kapatın. Böylece metinleriniz sayfa ortasında yer alacak.
Listeleme (<li>metin</li>)
Listelemek istediğiniz nesneleri <li> ile başlayarak yazın ve sonlandırmak istediğinizde </li> ile kapatabilirsiniz.
Örnek :
metin
tablo
link
<html>
<head><title>listeleme</title>
</head>
<body>
<li>metin</li>
<li>tablo</li>
<li>link</li>
<body>
</html>
Bazı Kodlar:
Dikkat edin bazı yazıları derste birden çok kez yazmış olabilirim.
<font face="arial">örnek</font>:
Metnin yazı tipi içindir. Arial yerine istenilen yazı tipi yazılır.
<I>örnek</I> :italik yazı
<b>örnek</b> :kalın
<u>örnek</u> :altı çizili yazı
<font size="1">örnek</font>:
Metnin büyüklüğü içindir. 1 ile 7 arasında rakamlar verilebilir.
<font color="red">örnek</font> :
Metnin rengi içindir. Red yerine istenilen renk ismi ya da kodu yazılır.
<a href="örnek.html">örnek</a> :
Link vermek içindir.
  :
Boşluk bırakma kodu
<a href="http://örnek.com.tr" target="_blank">örnek</a> :
istenilen linkin bağlantısını yeni bir pencerede açar.
<p align="center">örnek</p> :
Metni ortalar.
SATRANÇ TAHTASININ HTML KODLARI
<html>
<head>
<title>
satranc.html
</title>
</head>
<body>
SATRANÇ Tahtası
<table border='1'>
<tr width='40' height='40>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='black'>   </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
</tr>
<tr width='40' height='40>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
<td bgcolor='white'>              </td>
<td bgcolor='black'>              </td>
</tr>
</table>
</body>
</html>
TABLO
Widht=' ' -------->Genişlik
Height=' ' -------->Yükseklik
Hücre Kenarı Renkli --------> <TABLE BORDER=' ' BORDERCOLOR=' '
Hücre İçi Renkli --------> <TD BGCOLOR=' '
Hücre Kenarı Kalınlık --------> BORDER=' '
Tablo Oluşturmak --------> <TABLE> </TABLE>
Yatay Hücre --------> <TR> </TR>
Dikey Hücre --------> <TD> </TD>
Yazı Hücrede Sağda Olsun --------> <TD ALIGN='RİGHT'>
Yazı Hücrede Solda Olsun --------> <TD ALIGN='LEFT'>
Yazı Hücrede Ortada Olsun --------> <TD ALIGN='CENTER'>
Yazı Hücrede Altta Olsun --------> <TD VALIGN='BOTTOM'>
Yan Yana İki Hücreyi Birleştirmek --------> <TD COLSPAN='2'>
Alt Alta İki Hücreyi Birleştirmek --------> <TD ROWSPAN='2'
Yazının Etrafındaki Çerçeveni Kalınlığı --------> <TABLE BORDER=' '>
1. LİNK OLUŞTURMA
<a> link oluşturma komutu
uygulama
4 tane dosya oluşturup linkler verilip çalıştırılacak
dosya isimleri
index.html
tarihce.html
resimler.html
iletisim.html
dosya içerikleri
index.html
<HTML>
<HEAD>
<TITLE>
ana sayfa
</TITLE>
</HEAD>
<BODY bgcolor="red" >
<A href="tarihce.html">Tarihçe </a>
<br>
<a href="resimler.html">Resimler </a>
<br>
<a href="iletisim.html">İletişim </a>
</BODY>
tarihce.html
<HTML>
<HEAD>
<TITLE>
tarihçe sayfası
</TITLE>
</HEAD>
<BODY bgcolor="yellow" >
tarihçe sayfası
<br>
<a href="index.html">
ana sayfaya dönmek için tıklayınız </>
</BODY>
</HTML>
resimler.html
<HTML>
<HEAD>
<TITLE>
ana sayfa
</TITLE>
</HEAD>
<BODY bgcolor="blue" >
resimler sayfası
<br>
ana sayfaya dönmek için
<a href="index.html"> tıklayınız </>
</BODY>
</HTML>
iletisim.html
<HTML>
<HEAD>
<TITLE>
iletişim
</TITLE>
</HEAD>
<BODY bgcolor="green" >
iletişim sayfası
<br>
<a href="index.html"> ana sayfaya dönmek için tıklyınız
</a>
</BODY>
</HTML>
* Web sayfasındaki bir dökümana boşluk bırakılacaksa  
komutu kullanılır
verilen linkin yeni pencerede açılabilmesi için
<a target="_balank"> tag i kullanılır
internetteki bir siteye link vermek için
< a href="http://www.google.com" target="_blank" > Google </a> google sitesine linki yeni pencerede açılacak şekilde link verir
NOT: explorer browser ında açılan pencere engellendiğinden bazen yeni pencerede linki çalıştırmayabilir.
Font:
<font> artık önemsiz bir etiket olmuştur. Gelecek nesil HTML dillerinde bunun kullanılması söz konusu olmayacaktır.
Bir çok kişinin halen bunu kullanmasına karşın, bu komutu artık unutmanızı ve yerine stilleri kullanmanızı öneririz.
HTML <font> Etiketi
<p>
<font size="2" face="Verdana">
Bu bir paragraf.
</font>
</p>
<p>
<font size="3" face="Times">
Bu da başka bir paragraf
</font>
</p>
Font Parametreleri
Parametre
Örnek
Açıklama
size="number"
size="2"
Punto büyüklüğü
size="+number"
size="+1"
Puntoyu 1 arttır
size="-number"
size="-1"
Puntoyu 1 düşür
face="face-name"
face="Times"
Yazı tipi belirle
color="color-value"
color="#eeff00"
Yazı rengi belirle
color="color-name"
color="red"
Yazı rengi belirle
<font> Artık Kullanılmamalıdır!
<font> etiketi HTML 4 ve XHTML dillerinde artık geçersiz olmuştur.
World Wide Web Consortium (W3C) bunun yerine style sheets (CSS) kullanılmasını önerir.
<html>
<body>
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça
metin. Bu bir parça metin.
</td>
<td width="50%" valign="top">
Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka
bir metin. Başka bir metin. Başka bir metin.
</td>
</tr>
</table>
</body>
</html>
Arkadaşlar kodlar burada düzgün görülmüyor ama gerçekte denerseniz iki bloktan oluşur.
Bu Kodları Yazdığımızda karşımıza aşağıdaki gibi bir görüntü çıkar
Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin.
Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin.
TABLO İŞLEMLERİ
- Kod:
-
<HTML>
<HEAD>
<TITLE>
tablo oluşturma
</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="400">
<TR height="40" align="center" valign="top">
<TD width="100"> SNO </TD>
<TD width="150"> ADI </TD>
<TD width="150">SOYADI </TD>
</TR>
<TR bgcolor="red" height="40" align="center" valign="top">
<TD align="left" valign="top"> 1 </TD>
<TD align="left" valign="middle"> Merve </TD>
<TD align="left" valign="bottom" >ÖZCAN </TD>
</TR>
<TR bgcolor="yellow" height="40" align="center" valign="top">
<TD> 2 </TD>
<TD> Şamil </TD>
<TD>SARITAC </TD>
</TR>
<TR bgcolor="red" height="40" align="center" valign="top">
<TD> 3 </TD>
<TD> EMRE </TD>
<TD>AKBUDAK </TD>
</TR>
<TR bgcolor="yellow" height="40" align="center" valign="top">
<TD> 4</TD>
<TD> A.KADİR </TD>
<TD> KILINÇ</TD>
</TR >
<TR bgcolor="red" height="40" align="center" valign="top">
<TD> 5 </TD>
<TD> MUSTAFA </TD>
<TD>KANALCI </TD>
</TR>
<TR bgcolor="yellow" height="40" align="center" valign="top">
<TD> 6 </TD>
<TD> YUNUS EMRE </TD>
<TD> AKBUDAK </TD>
</TR>
</TABLE>
Örnek -1 tablolarda satır sütun birleştirme
- Kod:
-
<HTML>
<HEAD>
<TITLE>
tablo satır sütun birleştirme
</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD> ADI</TD>
<TD>SOYADI </TD>
<TD colspan="2"> NOTLAR</TD>
</TR>
<TR>
<TD>DFD</TD>
<TD>DFD</TD>
<TD>DFD</TD>
<TD>DFD</TD>
</TR>
<TR>
<TD>D </TD>
<TD rowspan="2"> DF</TD>
<TD> DF</TD>
<TD>DF </TD>
</TR>
<TR>
<TD>f </TD>
<TD colspan="2"> d</TD>
</TR>
</TABLE>
</BODY>
</HTML>
WEB SAYFASINDA HİZALAMA
web sayfası hazırlanırken istenilen resim ve dökümanları hizalamak için tablolar kullanılır.
satır ve sütunlara yükseklik bilgisi vererek hizalama işlemleri yapılabilir.
- Kod:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {color: #BD4D09}
.style3 {
color: #FB5200;
font-weight: bold;
}
.style4 {color: #FFFFFF}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<p> </p>
<table width="830" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#00FF99" bgcolor="#B9CFFF">
<tr>
<td height="180" colspan="7" bgcolor="#333366"> </td>
</tr>
<tr>
<td width="40" height="70"> </td>
<td height="70" colspan="5"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td height="70" align="center" valign="middle" bordercolor="#FF0000" bgcolor="#B0FFC2"><span class="style3">Ana Sayfa </span></td>
<td height="70" align="center" valign="middle" bordercolor="#FF0000" bgcolor="#B0FFC2" class="style3">Hakkımızda</td>
<td height="70" align="center" valign="middle" bordercolor="#FF0000" bgcolor="#B0FFC2" class="style3">Resimler</td>
<td height="70" align="center" valign="middle" bordercolor="#FF0000" bgcolor="#B0FFC2" class="style3">Tarihçe</td>
<td height="70" align="center" valign="middle" bordercolor="#FF0000" bgcolor="#B0FFC2" class="style3">İletişim</td>
</tr>
</table></td>
<td width="40" height="70"> </td>
</tr>
<tr>
<td height="20" colspan="7"> </td>
</tr>
<tr>
<td width="40" height="230"> </td>
<td width="170" height="230"><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" valign="middle" bgcolor="#586D80" class="style3">Dost Siteler </td>
</tr>
<tr>
<td height="40" align="left" valign="middle" bordercolor="#00FF00" bgcolor="#C8FBD7"><span class="style2">Google</span></td>
</tr>
<tr>
<td height="40" align="left" valign="middle" bgcolor="#C8FBD7" class="style2">Malatya valilği </td>
</tr>
<tr>
<td height="40" align="left" valign="middle" bgcolor="#C8FBD7" class="style2">Malatya Belediyesi </td>
</tr>
<tr>
<td height="40" align="left" valign="middle" bgcolor="#C8FBD7" class="style2">malatyaspor</td>
</tr>
<tr>
<td height="40" align="left" valign="middle" bgcolor="#C8FBD7" class="style2">hotmail</td>
</tr>
</table></td>
<td width="20" height="230"> </td>
<td width="310" height="230"><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="30" colspan="2" align="center" valign="middle" bgcolor="#52591E" class="style3"><div align="justify">Haberler</div></td>
</tr>
<tr>
<td width="100" height="100" bgcolor="#CCCCCC">resim</td>
<td width="210" bgcolor="#FFFFCC">metin</td>
</tr>
<tr>
<td width="100" height="100" bgcolor="#CCCCCC">resim</td>
<td width="200" bgcolor="#FFFFCC">metin</td>
</tr>
</table></td>
<td width="30" height="230"> </td>
<td width="210" height="230"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" valign="middle" bgcolor="#52591E" class="style3">Duyurular</td>
</tr>
<tr>
<td height="200" bgcolor="#CDD1D1"> </td>
</tr>
</table></td>
<td width="40" height="230"> </td>
</tr>
<tr>
<td height="20" colspan="7"> </td>
</tr>
<tr>
<td width="40" height="160"> </td>
<td height="160" colspan="3"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td height="160">resim galerisi </td>
</tr>
</table></td>
<td width="40" height="160"> </td>
<td width="210" height="160"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td height="160">reklam</td>
</tr>
</table></td>
<td width="40" height="160"> </td>
</tr>
<tr>
<td height="20" colspan="7"> </td>
</tr>
<tr>
<td width="40" height="90"> </td>
<td height="90" colspan="5" bgcolor="#CCCCCC"><span class="style4">Bu site Mehmet Şimşek tarafından hazırlanmıştır </span></td>
<td width="40" height="90"> </td>
</tr>
<tr>
<td height="20" colspan="7"> </td>
</tr>
</table>
<p> </p>
</body>
</html>
Konu: HTML Kısa Öğretim 
Perş. Nis. 15, 2010 8:41 pm
