41 – Html Head Elemanı
<head> öğesi <html> etiketinden hemen sonra açılır ve <title>, <style>, <meta>, <link>, <script>, <base> ‘in kapsayıcı öğesidir.
Html <title> Etiketi
title web sayfasının başlığını tanımlar.
title açılan web sayfasının en üst kısmında veya sekmesinde gözükür.
Arama motorları bu başlığı sonuçlarda listeler.
Örnek Kullanımı <title>Html Dersleri </title>
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html title kullanımı</title>
</head>
<body>
<p>Bu sayfa html title konusunu anlatmaktadır...</p>
</body>
</html>Html <style> Etiketi
Html head içerisinde tanımlanan style etiketleri içerisinde sayfanın stil bilgileri, kodlamaları yazılır.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html style kullanımı</title>
<style>
p {color:red; font-size: 24px;}
</style>
</head>
<body>
<p>style etiketleri içerisinde stil yazılmış bir paragraf...</p>
</body>Html <link> etiketi
Head etiketleri içerisinde kullanılan html link öğesi (etiketi, elemanı ) sayfanın harici sayfalar ile bağlantısını sağlar.
Genel olarak sayfaya stil dosyalarını eklemek için kullanılır.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html style kullanımı</title>
<link rel="stylesheet" href="ornek.css">
</head>
<body>
<p> harici olarak eklenen ornek.css isimli stil dosyası bu paragrafı ve sayfayı biçimlendirdi.</p>
</body>
</html>Html <meta> Etiketleri
meta etiketleri web sayfasının görüntü ayarlarını, sayfanın açıklamasını, sayfanın yazarını, anahtar kelime bilgilerini, sayfanın dilini, sayfa ile ilgili bazı ayarları tutmak için kullanılır.
Meta Etiketi Kullanım Örnekleri
Sayfada kullanılan karakter setini tanımlamak:
Sayfanın hangi karakter seti ile yazıldığını belirtir.
<meta charset="UTF-8">Web sayfasının açıklaması:
Web sayfasının açıklamasını yapar.
<meta name="description" content="Ücretsiz Full Html Dersleri">Web sayfasının anahtar kelimeleri:
Sayfamız ile ilgili anahtar kelimeleri ekleyebiliriz.
<meta name="keywords" content="HTML, Html Dersleri, Html Video">Web sayfasının yazarını tanımlamak:
Sayfanın kimin tarafından yazıldığını belirtir.
<meta name="author" content="Mehmet Eser">Web sayfasını refresh etmek:
Bu ayar sayfayı 20sn de bir yenileyecektir.
<meta http-equiv="refresh" content="20">Web sayfasının görünümünü ayarlamak:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bu ayar tüm web sayfalarınızda olması gerekir. Sayfanın hangi cihazda görüntülendiğine göre daha iyi bir görünüm ile sunulmasını sağlar.
width=device-width genişliğin cihaz genişliğine göre ayarlanmasını sağlar.
initial-scale=1.0 sayfanın görüntülenen cihazdaki ölçeğini ayarlar. Bu bire bir oran vermektedir.
Html Meta Etiketi Örnek Kullanım
Örnek
<html>
<head>
<title>Html meta etiketleri</title>
<meta charset="UTF-8">
<meta name="description" content="Ücretsiz Html Dersleri">
<meta name="keywords" content="HTML, HTML Dersleri">
<meta name="author" content="Mehmet eser">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p> Html dersleri ........ ...</p>
</body>
</html>Html <script> Etiketi
html sayfasında javascript kullanabilmek için <script> etiketleri kullanılır.
Örnek
<html>
<head>
<title>Html Sayfasında Script Kullanımı</title>
<script>
function yaziGoster(){
document.getElementById("paragrafim").innerHTML="Herkese Merhaba"
}
</script>
</head>
<body>
<button type="button" onclick="yaziGoster()">Yazıyı Göster</button>
<p id="paragrafim"> </p>
</body>
</html>Html <base> Etiketi
Web sayfasında ki göreceli (relative) url ler için varsayılan url yi belirler. Relative url aynı sitede bir dosyaya veya bir resme ulaşırken site ismini yazmadan verilen url yoluydu. Örnek <img src=”/resim/logo.png”> Dikkat ettiyseniz https://www.yazilimdili.net yazmadık. Yazsaydık bu absolute (mutlak url) olacaktı.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html Sayfasında Base Etiketi Kullanımı</title>
<base href="https://www.yazilimdili.net/wp-content/html/html-ornek/" target="_blank">
</head>
<body>
<img src="resim/logo.png" width="300px;">
</body>
</html>