HTML Head

HTML Dersleri
HTML Head

HTML <head>

HTML sayfamızın ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta>, <title>, <base>, <link>, <style>, <meta>, <script> elementleri yer alabilir.

HTML Head Elementleri

Tag	Description
<head>	Sayfa ile ilgili bilgiler tanımlar.
<title>	Sayfanın başlığını tanımlar.
<base>	Sayfadaki bağlantılar için bir adresi veya varsayılan hedefi tanımlar.
<link>	Sayfa belge ve harici kaynak arasındaki ilişkiyi tanımlar.
<meta>	HTML belgesi hakkında meta tanımlar.
<script>	Sayfa için istemci taraflı komut dosyası tanımlar.
<style>	Sayfa için stil bilgilerini tanımlar.

HTML <title> Elementi

HEAD etiketi içinde sadece bir kere kullanılarak sayfa içeriğini tanımlayan bir başlık eklenmesini sağlar. Atanan bu başlık, tarayıcı penceresinin başlığında gösterilir. Her HTML dokümanda mutlaka tanımlanmalıdır.<title> elementi içinde büyüktür (>) ve küçüktür (<) işaretleri kullanıldığı takdirde tarayıcı, bu işaretleri bir HTML kod başlangıcı veya bitişi olarak yorumlayacağı için kullanılmamalıdır. Bu işaretlerin kullanılması gerektiği yerlerde büyüktür için > küçüktür için < HTML özel karakterleri kullanılabilir.

Kullanım Örneği

<html>
    <head>
        <title>sayfa baslik bilgisi buraya yazılır</title>
    </head>
    <body>

    </body>
</html>

HTML <base> Elementi
Sayfamız içinde bulunan tüm bağlantılar için taban adresin (alan adının) tanımlanmasını sağlar. <base> elementi, <head> elementi içinde ve harici kaynaklara referans veren bağlantılardan önce kullanılmalıdır. Bir browser, sayfa içinde tam yolu belirtilmemiş herhangi bir bağlantının güncel sayfanın bulunduğu dizinde olduğunu kabul etmektedir. <base> elementi bağlantıların aranacağı alan adının ayrıca belirtilmesini sağlar.

Kullanım Örneği

<head>
<base href="http://www.ibrahimbayraktar.net/images/" target="_blank">
</head>

HTML <link> Elementi
<link> elementi, sayfanın <head> alanında sayfanın hazırlanması için gerekli harici dokümanlara erişim veya yüklenmesi için bağlantı oluşturulmasını sağlar.

Kullanım Örneği

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Link elementi Özellikleri
id= Kimliğini belirtir.
class= Sınıf adını belirtir.
style= CSS kuralları tanımlar.
title= Kısa bilgi belirtir.
lang= İçerdiği metnin lisanını belirtir.
dir= İçerdiği metnin yönünü belirtir.
charset= Bağlantı kaynağının karakter kodlamasını belirtir.
type= Bağlantı kaynağının içerik tipini belirtir.
href= URL adresini belirtir.
hreflang= Bağlantı kaynağının lisanını belirtir.
rel= Bağlantı kaynağının, elementin bulunduğu sayfanın nesi olduğunu belirtir.
rev= Elementin bulunduğu sayfanın, bağlantı kaynağının nesi olduğunu belirtir.
target= Hedef çerçevenin (frame) adını belirtir.
media= Stil şablon kurallarının geçerli olduğu medyayı belirtir.

HTML <meta> Elementi
<head> içinde kullanılarak, browser'a ve arama motorlarına sayfa ile ilgili veriler sağlamak için kullanılır. Bu veriler, isim-değer çifti şeklinde name ve content özellikleri kullanılarak belirtilir. Ayrıca http-equiv özelliği ile bir http başlığı belirtilip aynı şekilde content özelliği ile değeri atanabilir.

Kullanım Örneği

<head>
    <meta name="Author" content="ibrahim bayraktar" />
    <meta name="keywords" content="html, css, html5, programlama" />
</head>

Meta elementi Özellikleri
lang= İçerdiği metnin lisanını belirtir.
dir= İçerdiği metnin yönünü belirtir.
http-equiv= HTTP başlığının adını belirtir.
name= Özelliğin veya verinin adını belirtir.
content= Özelliğin veya HTTP başlığının değerini belirtir.
scheme= Özelliğin değerini yorumlamak için kullanılacak isteğe bağlı şemayı belirtir.

HTML <script> Elementi
İstemci taraflı çalıştırılabilir bir script tanımlanmasını veya harici dosyadan yüklenmesini sağlar. Tanımlanan bu scriptler browser'ların dahili script engine'i tarafından çalıştırılır. Eğer browser type özelliği ile belirtilen script lisanını tanımıyorsa ilgili script çalıştırılamayacaktır. HTML yorumlayıcıları uygun olan lisanı seçerek betiği çalıştırırlar.

Kullanım Örneği

<script type="text/javascript">

document.write("mesaj sayfa yuklendiginde eklendi..");

function merhaba() {
    alert("Merhaba!");
}
</script>

<button type="button" onclick="merhaba()">Mesajı Gör</button>

HTML <style> Elementi
<head> alanı içinde kullanılarak, sayfamızdaki elementleri görsel olarak biçimlendirmek içim CSS biçimlendirme kuralları tanımlanmasını sağlar.

Kullanım Örneği

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

HTML Head Elementleri Kaynaklar
http://www.w3resource.com/html/html/HTML-html-tag-and-element.php
https://www.w3.org/community/webed/wiki/The_HTML_head_element

/dev/null Web Günlüğü

Sayfalar

19 Kasım 2013 Salı

HTML Head

Hiç yorum yok:

Yorum Gönder