HTML Belgeleri

Bu derste genel anlamda HTML/XHTML hakkinda bilgi verilecektir, daha sonra asagda anlatilan her konu icin ayri ayri derslerle web egitimimize devam edecegiz.


<!DOCTYPE html>
<html>
<body>

<h1>Ben bir basligim</h1>
<p>Ben bir paragrafim</p>
</body>
</html>
  • Tum HTML Belgeleri daha önce ogrendigimiz gibi belge türünü bildirmekle baslar.( <! DOCTYPE html> )
  • Daha Sonra belge <html> ile baslar ve </html> ile biter
  • Html belgesinin gorunen ogeleri <body>... </body> arasinda yer alır
Daha onceki ornekte head,title vs vardı peki burda neden yok diyen arkadaslar mutlaka vardir, elbette belgelerimizde title,head vs olacak ama bu ilk asamalarda olmasada olur belge bu sekilde daha sade ve anlasilir,

Html Basliklari / Heading Tags

Html'de 6 adet baslik etiketi bulunmaktadir h1 ile baslar ve h6'ya kadar devam eder. asagdaki ornekte de gorulecegi gibi h1 buyuk boyutta yazılar uretir,h6'ya dogru yazi boyutu kuculur.
Peki neden boyle?
cunku h1 en onemli basligi ifade eder h6 ya dogru onem sirasida duser. h1 ana baslik h2,h2 vs de alt basliklar olarak kullanilabilir.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sayfa Baslıgı</title>
</head>
<body>
	<h1>Ben h1 Etiketiyim</h1>
	<h2>Ben h2 Etiketiyim</h2>
	<h3>Ben h3 Etiketiyim</h3>
	<h4>Ben h4 Etiketiyim</h4>
	<h5>Ben h5 Etiketiyim</h5>
	<h6>Ben h6 Etiketiyim</h6>
</body>
</html>
simdi bu kodlarin ciktisina bakalim


HTML Paragraf / Paragraph Tag

HTML'de paragraflarimizi p etiketiyle olusturacagiz

<p>Burda bir sürü yazi var.</p>
[ tabiki bu kodun belgede body icerisine yazilacagini hepimiz biliyoruz :) ]

HTML Linkler

Internetin en meshur terimlerinden biride link sanirim.linkler ne yapar ?
tiklandiklari zaman baska bir web sayfasina sizi goturebilir,yada ayni web sayfasini farkli bolumlerine sizi goturebilir. bir sürü ornek sayilabilir son 1 tane daha,tiklandiginda sizi sonraki/onceki slide ogesine goturebilir.

simdi sunu dusunmeniz oldukca yerinde olacaktir,"hangi etiketle yapacagiz bunu?"
HTML mantigini sanirim ufak ufak kaptiniz evet a etiketi ile

<a href="http://www.cnnturk.com">CNN'den Haberler</a>

bu kodu body icine yazip ekran goruntusune bakinca sadece "CNN'den Haberler" yazisini gorecegiz ve alti cizili sekilde. burda a etiketinin href isminde bir niteligi bulunuyor,ve cnn web sayfasinin adresini gosteriyor,iste "CNN'den Haberler" yazisini tikladigimizda gitmek istedigimiz adresi burda belirtiyoruz.
Nitelikler HTML ogelerine ek bilgiler vermek icin kullanilir ve 1 tanede de olabilir cok daha fazlada.(img etiketine bakabilirsin)

HTML Görüntüler

Web sayfalarinda bir resim gostermek istedigimizde img etiketini kullaniriz.


<img src="resim.jpg" alt="Burda Resim Var" title="Guzel Bir Resim" width="150px" height="100px" />
		

Burda Resim Var
img elementine ait niteliklere bakalim
  • src:Kaynak resmin adresi
  • alt:src kaynaginda bu isimde resim yoksa ,kullaniciya gosterilecek alternatif metin
  • title:imleci resim uzerine getirdigimizde imlecin yaninda gorunecek kucuk aciklama metni(Deneyin ve gorun)
  • width:Resmin genislik degeri (px,%,... olabilir)
  • height:Resmin yukseklik degeri (px,%,... olabilir)
  • (width/height orani bozulursa resim de duzgun gorunmeyecektir)

Yeri gelmisken aciklayalim
biz yukarda img etiketini degisik tarzda kullandik belki bazi arkadaslar su formatta bekliyordu
<img> .... </img>
fakat biz <img /> seklinde kullandik sagdaki /(slash) isaretei XHTML kurallari geregi img taginin bittigini gosterir,nedir XHTML diyenlere kisaca HTML'in daha kuralci hali diyebilirim biz yukarda img tagindaki /(slash) isaretini yazmadan da ayni sonucu alabilirdik,ama XHTML derki actigin taglari kapat.
img'nin <img> .... </img> seklinde kullanimi olsaydi zaten kapatma problemi yoktu.bunun gibi bitakim ornekler daha bulunmaktadir ornegin; hr etiketi ile sayfada duz bir cizgi cizebiliriz ve kullanimida cok basit
<hr> seklinde yazmak yeterlidir.fakat kodumuz XHTML kurallarina uygun olsun diyerek bunu soyle yazabiliriz <hr />
baska bir ornek p tagi icinde text yazdiginizi dusunun bazen tum textler yan yana gelmesinde yazi alt satirdan baslasin isteyebiliriz
ORNEK:
<p>Merhaba<br>Dünya! </p>
seklindeki bir kod su sekilde gorunur

Merhaba
Dünya!

iste ortadaki br etiketi derki alt satira gec!
aslinda suan da HTML kurallarini cignemedik fakat XHTML formatinda br su sekilde yazilir <br/>(yani br kapatildi)

  • 1)img'nin <img> .... </img> kullanimi yok Dogrusu <img /> son slash XHTML uyumu icin
  • 2) hr'nin <hr> .... </hr> kullanimi yok Dogrusu <hr /> son slash XHTML uyumu icin
  • 3) br'nin <br> .... </br> kullanimi yok Dogrusu <br /> son slash XHTML uyumu icin

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com