Html - Head

konuya girmeden once head etiketinin kullanildigi konumu gosterelim.

<!DOCTYPE html>
<html lang="en">
<head>
.
.
</head>
<body>
	
</body>
</html>
head etiketi icinde meta verileri,sayfa basligi,stil dosyalari,script dosyalari vs kullanilabilir. simdi bunlari ayri ayri inceleyelim

HTML - title

title ogesi sayfa icin baslik belirlememizi saglar,ve kullanimi onerilmektedir!
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<title>Css Dersleri</title>
 </head>
 <body>
 	
 </body>
 </html>

HTML - style

style ogesi ile sayfamiza stil tanimlamalari yapabiliriz.
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<title>Css Dersleri</title>
 <style>
#header{font-size:20px;}

h2{
	color:red;
}
 </style>
 </head>
 <body>
 	
 </body>
 </html>

HTML - link

CSS dersinde bahsettigimiz css kodlarini harici bir dosyaya yazabiliriz ve istedigimiz dokumana ekleyerek kullanabiliriz.
<!DOCTYPE html>
 <html lang="en">
 <head>
 	<title>Css Dersleri</title>
 	<link rel="stylesheet" href="stil.css">
 </head>
 <body>
 	
 </body>
 </html>

HTML - script

Kullanim bicimi yine CSS gibi, sayfa ici bir script kullanimi
<!DOCTYPE html>
 <html lang="en">
 <head>
 	<title>Css Dersleri</title>
 	<script>
		alert("Merhaba javascript");
 	</script>
 </head>
 <body>
 	
 </body>
 </html>

Harici bir javascript dosyasini belgemize ekleyelim
<!DOCTYPE html>
 <html lang="en">
 <head>
 	<title>Css Dersleri</title>
 	<script src="dosya.js"></script>
 </head>
 <body>
 	
 </body>
 </html>
Sayfa yukleme hizi arama motorlari acisindan oldukca onemli,ozellikle son yillarda script dosyalarinin belge sonunda dokumana eklenmesi onerilmektedir,(belgenin yuklenme suresini dusurmek icin)

Html - meta

meta etiketini sayfa karakter seti tanimlamasi,anahtar sozcuklerin tayini,sayfa aciklamasi,yazar bilgisi yada arama motorlarina birtakim bilgiler sunmak icin kullanabiliriz.

Karakter seti tanimlamasi
<meta charset="UTF-8">


Anahtar Kelimeler
<meta name="keywords" content="html,css,javascript,php,java">


Sayfa tanimi
<meta name="description" content="Hic bilmeyenler icin html dersleri">


Yazar Bilgisi
<meta name="author" content="John Simit">


Belirli bir surede sayfa yenilensin(ornek 5sn)
<meta http-equiv="refresh" content="5">


Asagdaki kodla arama motoruna diyoruzki(tabi bizi anliyorsa) bu sayfayi dizine ekleme,baglantilarida takip etme.
<meta name="robots" content="noindex,nofollow" />

Html meta - Viewport Ayari

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport:En basit ifadesiyle bir web sayfasinin gorunur alaninidir,cihaza gore degisir

yukardaki kodda "device-width" degeri cihazin genisligini temsil ediyor.
initial-scale ise sayfanin acildiginda hangi yakinlastirma seviyesinde olacagini belirtir,

Asagdaki kodda ise genisligi 500px olarak belirledik
<meta name="viewport" content="width=500, initial-scale=1" />
Mobil uyumlu bir sayfadan viewport ayari cikarildiginda tarayicilar sayfayi ekrana sigdirma cabasina girebilir ki,buda okunamayacak kadar kucuk yazilara neden olabilir
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
Yukardaki gibi kullanimida var fakat onerilen bir kullanim sekli degil zira kullanicinin kontrolu kisitlaniyor.
Aslinda bütün derdimiz kullaniciya onu fazla yormadan(kaydirma cubuklari,kucuk fontta yazilar,cok kucuk yada buyuk resimler...) icerik sunabilmektir. Css Konusunda Cihazin ekran boyutuna gore icerigi nasil ozellestirilebildigni gorecegiz.

Html-base

Bir sayfada yer alan tum Goreli URL'lerin taban URL'sini ayarlamamizi saglar.ayrica eger bir link kullanimissa target degeride burda verilebilir.

<head>
	<title>Html-Base</title>
	<base href="http://www.siteismi/images/" target="_blank"/>
</head>
yukardaki kodun sayfamizda oldugunu varsayalim.
<img src="resim.jpg" alt="Resim" />
tarayici resmi
http://www.siteismi/images/resim.jpg
seklinde arayacaktir.

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