ByPcMan
WebMaster
html'in genel yapısıtag(element)'lar ve attribute(özellikler)
html tag(element) denilen birimlerden oluşmuştur. taglar < (küçük) işareti ile başlayıp > (büyük) işareti ile biten elemanlardır. her tag tarayıcı programa bir komut gibidir yani tarayıca bir şeyler belirtir. yazı yazmak için bir tag ,resim koymak için bir tag kullanılır. <img> tagı resim koymak için, <a> tagı link (tıklandığında başka sayfaya gitmenizi sağlayan yazı) koymak için , <table> tablo koymak için , <font> yazıların biçimi değiştirmek için kullanılır. html'de çok sayıda tag bulunur. bazı taglar açıldığı zaman kapatılması gerekir. her html sayfasının başında mutlaka olması şart olan <html> tagı mutlaka sayfanın sonunda </html> ile kapatılmalıdır. kapatma işlemi </tag> ile yapılır. taglar açılıp kapandığı yere yani arasındaki bölgede etkilidir. etkilenmeyen bölge <tag> etkilenen bölge </tag> kuralı geçerlidir. yani tag arasındakileri etkiler.
bazı tagların yardımcı ekleri vardır. bunlara attribute (özellik) denir. genel yapısı <tag özellik="değer ver"> etkilenen bölge </tag> şeklindedir. örneğin resim.gif diye bir resim dosyasını web sayfanıza koymak istiyorsanız <img> tagının src özelliği kullanılır. resim.gif dosyasını <img src="resim.gif"> </img> ile gösterebilirsiniz.
taglar arasındaki düzen
html'de taglar hiyerarşik bir yapıdadır. yani taglar içiçe kullanılabilir. bir web sayfasında bütün taglar <html></html> tagı arasındadır. bu tagın dışında başka bir tag kullanılamaz. her tag bu tagın arasında açılır ve kapanır. genel <tag1> <tag2> <tag3> </tag3> </tag2> </tag1> şeklinde bir alt üst ilişkisi vardır. açılan bir tag kapanmadan üst tag kapanamaz. en alttaki tag kapatılamalıdır. html'de içiçe taglarda alt tag ile üst tag aynı özelliğe değer veriyorsa alttaki tagın değeri geçerli olur. örneğin üstteki tag yazıların rengini kırmızı yap diyorsa ve altındaki tag yeşil yap diyorsa alttaki tagın arasındaki yazılar yeşil olur.
global taglar-genel yapı
html'de taglar hiyerarşik bir yapıdadır. en üstte <html> tagı bulunur.<html> tagı içinde iki bölüm vardır. <head> tagı arasında kalan bölüm ve <body> tagı arasında kalan bölüm. web sayfasını çok pencereli yapmak için frame kullanılınca head ve body tagı kullanılmaz. head tagı sayfanın kendisi ile ilgili bilgilerin bulunduğu yerdir. sayfanın gözüken kısmı body tagı arasında olur.
text biçimlendirme (renk,boy vs)
aslında biçimlendirme işlemleri artık css (style sheet)'ler ile yapılmaktadır. html ile biçimlendirme yapmak zordur. bu yünden style öğrenilmesi gerekir. biçimlendirme için için font etiketi kullanılabilir. aşağıda bir yazının boyunu 15 ve rengini kırmızı yapıyoruz.
<font color="red" size="15"> yazılar... </font>
liste
iki çeşit liste vardır. biri sırasızdır. her elemanın başına nokta, yıldız gibi işaretler konulur. sıralı listeler için her elemanın başına artarak devam eden 1-2-3,A-B-C gibi işaretler konulur. siz eleman eklediğiniz sürece kendiliğinde artar. (3 4 olur vs..) aşağıda hem sıralı hem sırasız liste kullanılıyor.
<!--sıralı liste-->
<ol>
<li> ali
<li> veli
<li> yusuf
</ol>
<!-- sırasız liste-->
<ul>
<li> istanbul
<li> ankara
<li> izmir
</ul>
resim yerleştirme
resim eklemek için img etiketi kullanılır. src özelliğine resim dosyasının adı yazılır. aşağıda bir resim ekliyoruz.
<img src="resim.gif"></img>
link ekleme
web sayfasında üzerine tıklandığında başka bir sayfaya bağlanmanızı sağlayan yazılara link deniyor. link koymak için a etiketi kullanılır. href attributesi ile bağlanılacak sayfanın adı verilir. aşağıda bir link yapılıyor.
<a href="http://w3.org">tıklayın w3'e bağlanın </a>
eğer sayfanız uzunsa sayfanın içindeki herhangi bir bölgeye link sağlayabilirsiniz. sayfanızın en sonuna sayfanın başına gönderen bir link koyabilirsiniz. bunun için bir yere isim verilir. aşağıda görülüyor.
<a name="test"> buraya isim verdik </a>
.....
.....
.....
<a href="#test"> isim verdiğimiz yere git (tıkla)</a>
tablo ekleme
html'deki tablo bildiğimiz gibi tablolar gibi kullanılabilir. bunun yanında tüm sayfanın yerleşimini düzenlemek içinde kullanılır. tablo için table etiketi kullanılır. yeni satır için tr, sütun için td kullanılır. aşağıda iki satır ve sütunlu tablo yaratılıyor.
<table>
<tr><td> 11 eleman <td> 12 elemen
<tr><td> 21 eleman <td> 22 eleman
</table>
tablolarda tüm hücrelerin satır ve sütu genişliği içindeki elemana göre belirlenir. eğer bir satırın veya sütunu diğerlerinden iki katı ve üç katı büyük veya küçük olmasını istiyorsanız colspan ve rowspan kullanacaksınız. burada en küçük hücrenin genişliği ve yüksekliği 1 kabul edilir. colspan ve rowspan onların ne kadar katı olacağını gösterir.
frame
bazı sitelerde bir penceresi içinde iki üç pencere görülür. bunlara frame denir. her framede ayrı bir web sayfası görünür. aşağıda iki tane frame yapılıyor. sol frame tüm pencerenin %20'sini (sütununu) alıyor ve geri kalanı sağdaki frame'e bırakıyor. frameset etiketi içinde frame'ler veya başka framesetler içerebilir. her frameset sütuna ve satıra göre ikiye bölünür.
<frameset cols="20%,*">
<frame name="sol" src="sol.html">
<frame name="sag" src="sag.html">
</frameset>
applet
applet'ler java ile yapılmış programcıklardır. bu programcıkları web sayfasına ekleyebiliyorsunuz. java dilinde bir applet programismi.class şeklinde .class uzantılıdır. bunu web sayfasına applet etiketi ile ekleyebilirsiniz. şimdi biz test.class appletini web sayfasına ekleyelim
<applet code="test.class" width="200" height="200"></applet>
yukardaki örnekte web sayfası ile test.class dosyası aynı klasörde olması gerekir.
uyarı: html4.0 ile birlikte applet etiketi yerine object etiketi kullanılmaktadır. code özelliği yerine classid kullanılmaktadır.
html yazış stili
html etiketleri yukarıdaki örneklerde görüldüğü gibi hiyerarşik bir yapı sergilerler. yaptığın sayfanın html kodu bu hiyerarşiyi rahat görmenizi sağlamalıdır. bir kodu aşağıdaki gibi yazsaydık anlayabilir miydiniz?
<html><head>
<title>welcome</title></head>
<body><center><font color="red" size="12">hello world</font>
</center>
</body></html>
eğer bir etiket başka bir etiketin içindeyse bir tab mesafesinde içeride olması çok iyi olur. bu her zaman kullanmayabilirsiniz.örneğin head ve body'yi içeriye almayabilirsiniz. yine eğer etiket açılışı ve kapanışı bir satıra sığacak kadar küçükse tek satırda yazılabilir. şimdi bu söylediklerimi koda uyguluyalım
<html>
<head><title>welcome</title></head>
<body>
<center><font color="red" size="12">hello world</font></center>
</body>
</html>
görüldüğü gibi html etiketini yok kabul ettik. yine head ve title tek satıra sığdığı için tek satır haline getirdik.ayrıca center ve font etiketinden oluşan grupta tek satır haline getirilmiştir. bu yazışın yararı hem hiyerarşik yapıyı görebilirsiniz hem de çok az satır kullanmış olursunuz. ancak eğer head etiketi içinde başka bir etiket eklediğinizde tek satıra sığmaz ve okunaklılık azalır. tekrar eski şekilde yazarsınız.
yazı ile etiket nasıl yazılacağıda önemlidir. <title>welcome</title> şeklinde görüldüğü gibi etiket ile yazı arasında boşluk bırakılmamıştır. aşağıda ki örnekte gereksiz boşluklar vardır.
<html>
<head>
<title>
welcome
</title>
</head>
<body>
<center>
<font color="red" size="12">
hello world
</font>
</center>
</body>
</html>
yazılar ile etiketler arasında boşluk, tab, enter yapmayın. etiket biter bitmez yazıya başlayın ve biter bitmez kapatın.