Html Head Etiketleri (3. Ders Title, Style, Link, Meta) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / Html Head Etiketleri (3. Ders Title, Style, Link, Meta)

Html Head Etiketleri (3. Ders Title, Style, Link, Meta)

Html’de Head alanı sayfamızda görünmeyen ancak bütün bağlantıların gerçekleştiği alandır burada stil dosyalarından sayfa başlığına ve çeşitli anahtarın bağlantıları burada yapılmaktadır. title, style, base, link, meta, script, noscript gibi etiketler bu alana açılmaktadır. Temel Html öğrenirken ilk olarak bizim için önemli olan etiketler şunlardır.

<title>Yeni Sekmede Görünen Sayfa Başlığı</title>

title Sayfa Başlığını gösterir ve mutlaka kullanılması gerekir.

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9" />

Karakter Setini belirtir Türkçe Karakter Sorunlarını ortadan kaldırır. charset=iso-8859-9 veya charset=utf-8 kodlama diliyle Türkçe karakter sorunundan kurtulabilirsiniz.

<style type="text/css">

</style>

İlerde CSS kullanacak olsakta şuanda html için bu alanda yazacağımız kodlarla body içerisindeki kodlarımıza renk,boyut,şekil, vb. gibi birçok özelliği buradan tanıtacağız.

Yukarıdaki 3 Etiket alanı şuanki html derslerimiz için yeterli olacaktır ancak ileride css ve özellikler eklemeye başladıkça aşağıdaki head alanı gibi çeşitli tanımları dosyamıza ekleyeceğiz.

 

<!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" xml:lang="en">
<head>
	<title>Yeni Sekmede Görünen Sayfa Başlığı</title> 
	<!-- Sayfa Başlığını gösterir ve mutlaka kullanılması gerekir. -->
	
	<meta name="keywords" content="bilgisayar dilleri, programlama dilleri, yazılım">
	<!-- Sitenizin içerik konularını bildiren anahtar kelime etiketleriidir. -->
	
	<meta name="description" content="Sitenizin içeriği hakkında geniş bilgi">
	<!-- Sitenizin içeriği hakkında bilgi veren etikettir. -->
	
	<meta name="Author" content="Adınız, E-Posta Adresiniz">
	<!-- Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir. -->
		
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9" />
	<!-- Karakter Setini belirtir Türkçe Karakter Sorunlarını ortadan kaldırır. -->
		
	<link rel="stylesheet" type="text/css" href="stil.css">
	<!-- Dışardan Sayfamıza ekleyeceğimiz Css,JavaScript,jquery vb gibi ek dosyalrı belirtiriz. -->
	
	<style type="text/css">
	P {                 <!-- p Etiketinde yazacapımız yazılara -->
	font-family:arial;  <!-- yazının arial yazı tipinde olmasını -->
	font-size:45px;		<!-- yazının 45px büklüğünde olmasını -->
	text-align:center;  <!-- yazının sayfanın ortasında olmasını -->
	color:red;			<!-- yazının kırmızı renkte olmasını -->
	}
	</style>
	<!-- İlerde CSS kullanacak olsakta bu alanda
	yazacağımız kodlarla body içerisindeki kodlarımıza 
	renk,boyut,şekil, vb. gibi birçok özelliği buradan tanıtacağız.-->
</head>
<body>
	<p>Bu Bir Deneme Sayfasıdır...</p>
</body>
</html>

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Örnekteki 2 Değişiklik kafanızı karıştırmasın…

<!DOCTYPE> : Bildirimi bir etiket değildir sayfanın oluşturulduğu işaretleme dilinin sürümünü tarayıcıya belirten talimattır. Bu bildirim tarayıcılarda düzgün içeriği oluşturmak için, biçimlendirme dilinin kurallarını belirler. Bu bildirim html etiketinden hemen önce, HTML belgesindeki ilk şey olmalıdır. Her zaman sayfalarınızın doctype bildirimini tanımlayın. Bu tanımlama tarayıcıların sayfanızı doğru görüntülemesini sağlayacaktır.

<html xmlns=”http://www.w3.org/1999/xhtml”> : Html başlangıcını bu şekilde başlattık Xmlns özelliği XHTML için gereklidir. HTML’de geçersizdir. Html olarak kodlarımızı yazıyoruz ancak kurallara uygun yapmak için Xmlns sorgusunu yaptırdık.

Hakkında BilgeBank

İlgili Makale

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi:
%d blogcu bunu beğendi: