Html Nedir?

Html,Hiper Metin Isaretleme Dili (Ingilizce Hypertext Markup Language, ks. HTML) web sayfalarini olusturmak icin kullanilan standart metin isaretleme dilidir. Dilin son sürümü HTML5'tir(bu ders hazirlanirken)


Yukardaki tanimi özel olarak wikipedia'dan aldim,zira HTML acilimi konusunda cesitli tavsiyeler,kullanimlar bulunuyor,fakat dili yeni ogrenmeye baslamis bir kisi kesinlikle bu konulara takilmamalidir,sayfalar dolusu tarihce hikayeleride guzel bilgiler olmasina ragmen ben burda bahsetmeyecegim.isteyen arkadaslar baska kaynaklardan okuyabilir. Bu kaynakta(wikipedia) oldukca sade ve anlasilir bilgi bulmak mümkün,birkac dakika gidip okuyabilirsiniz.


ORNEK
<!DOCTYPE html>
<html>
<head>
	<title>Sayfa Baslıgı</title>
</head>
<body>
	<h1>Istanbul 7 Tepe</h1>
	<p>Html Ogreniyoruz...</p>
</body>
</html>

HTML'de hersey TAG(etiket) dedigimiz ifadelerle yapilir,ornegin kendimiz bir tag olusturmaya calisalim,ismide MERHABA TAG'i olsun isminden de anlasilacagi uzere bu tag'in gorevi MERHABA ile ilgili birsey olacaktir. iste bunu birazcik html KOD mantigina uyarlarsak
<merhaba>Merhaba Dünya!</merhaba>
Evet arkadaslar eger bizim gercekten merhaba adinda tag'imiz olsaydi! ve biz bu olusturdugmuz kodu,html belgemizde dogru yere yazsaydik tarayicida sadece 'Merhaba Dünya!' yazisini gorecektik.

Bu arada ,
<merhaba>Merhaba Dünya!</merhaba>
seklindeki kod'umuzda ilk merhaba ifadesi buyuktur - kucuktur arasinda ,fakat ikinci merhaba ifadesinde bir fazlalik var '/' isareti (slash) , bu isaret merhaba tag'inin sonu oldugnu gostermektedir.

Etiket baslar ve biter bu araya yazi da gelebilir,resimde,videoda yada diger etiketler.('tabi bazi etiketler bazi alt etiketleri kabul etmiyor')

DOCTYPE ETIKETI

  • Dokumanin türü hakkinda tarayiciya bilgi vermek icin kullanilir.
    Kullanim sekliyle HTML versiyonu da tanimlanir
  • Bütün HTML dosyalarinda DOCTYPE bildirimi olmalidir,bizim ornegimizde de DOCTYPE ifadesinden sonra sayfanin html belgesi oldugu gosterilmektedir. ( <!DOCTYPE html>)
  • DOCTYPE kullanim bicimi(yeni versiyon,xhtml versiyonlari,..) tarayicinin sayfayi goruntuleme bicimini etkiler.Yukardaki kullanim HTML5 kullanim bicimidir ve eskiden kullandigimiz ifadelere gore oldukca sade ve yazimi kolaydir. Bu sayfadaki egitimlerde HTML5 bicimi kullanilacaktir.

    HTML 4.01 icin ornek
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • Yazim seklinin büyük/kücük harf duyarliligi yoktur
    <!DOCTYPE html>
    yada
    <!doctype HTML>
  • DOCTYPE bildirimi bir HTML etiketi degildir,<!doctype html /> seklinde kullanimi yoktur

    Dogru Dosya tipi tanimi yapilmadiginda css kodlari bile yanlis sonuclar uretebilir,bunu sonraki derslerde ornek olarak vermeyi dusunuyorum .
Evet,<!DOCTYPE html> seklinde HTML5 versiyonunda dogru bir DOCTYPE tanimi yaptik,ve devam ediyoruz

HTML ETIKETI

2.satirda <html> seklinde baslayan etiketin son satirda </html> seklinde bittigini gordunuz mu? burda html etiketimiz kok elementtir ve diger etiketleri kapsar,(sayfanin tamamini) etiketlerin bir gorevi oldugnu soylemistik buda bir gorev degilmi,ayrica zamanla bu yapiyi daha iyi kavrayacaksiniz.

HEAD ETIKETI

3.satirda bu etiket baslar ve body etiketinden once son bulur.
peki ne ise yarar?
Web sayfalarinda bi kisminin gorunmedigi bazi verilerin tutuldugu bolumdur.
ne demek bi kisminin gorunmedigi?
head atiketi arasina bakarsak title adinda bir etiket goruruz ve bu etiket sayesinde web tarayicilarini actigimizda sol ustte sayfa basligi gorunur,yada fare imlecini uzerine getirdiginizde tamamini gorebilirsiniz.(iste bu gorunebilen verilere ornek) peki baska neler var?
bazi meta bilgileri,ornegin sayfanin karakter seti tanimi yapilabilir,yeni baslayan arkadaslar turkce karakterlerin sayfada duzgun goruntulenmediginden sikayet edebilirler.buraya utf-8 gibi bir karater seti tanimlanirsa sorun cozulur.

css,javascript dosyalari burda eklenebilir.

aslinda bu kisim birazcik uzun simdi gereginden fazla bilgi vermem dogru olmaz ayrica sizin kafanizida karistirir. devam eden derslerde cok daha guzel anlayacaksiniz merak etmeyin zor degil.

TITLE ETIKETI

Yukarda gorevini soylemistik.sayfamiza baslik atayabiliyoruz.yazmasakta sorun degil fakat yazilmasini kesinlikle oneriyorum zira Arama motorlari icin oldukca onemli.

BODY ETIKETI

Web sayfalarin gövdesini olusturan etikettir. yani tarayicida gorunen resimlerin,müziklerin,yazilarin... kodlandigi kisim burasidir,

Ornek Kodumuz tarayicida su ciktiyiverir:

Ekran goruntusune baktigimizda h1 etiketi oldukca siyah ve büyük font'ta cikti verdigini goruyoruz. bu tamamen h1 tag'inin standart gorevinden kaynaklaniyor.

p etiket'i ise daha kucuk font boyutuna sahip,tabiki bu onun tanimiyla alakali.

(yeni baslayan arkadaslar),yazdiklarimin tamamini anlamamis olabilirsiniz ki bu cok normal,lutfen bir miktar birseyler anladiysaniz bile derslere devam ediniz,anlasilmayan noktalar diger derslerde yerine oturacaktir.

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