Ders_26 HTML Head Elemanı

HTML <head> Elemanı

  • <head> ve </head> tagları arasındaki html elemanlarına meta dataları (verileri) denir. Yani <head> elemanının yavru elemanları birer meta bilgisidir.
  • Meta verileri, html dökümanımız hakkında web tarayıcıyı bilgilendirir.
  • Meta verileri, html dökümanımızda gösterilmez.
  • <title>, <style>, <meta>, <link>, <script>, <base> taglarının herbiri, meta verisi içeren birer html elemanıdır.

<html> ve <body> Elemanlarını İhmal Etmek

Html, çok da hassas bir dil sayılmaz. Yani kuralları çok da katı değildir. Html uzantısı ile kaydedilmiş (deneme.html) bir dosyaya <html> ve <body> elemanlarını koymadan, aşağıdaki kodları yazarsak:

<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

bu kodlar, çalışaktır ve sayfamıza yansıyacaktır. 

Hatta herhangi bir tag kullanmadan, sadece yazı yazsak da yine tarayıcımız bu yazıyı yansıtacaktır.

  • Html geliştiricileri, <html> ve <body> taglarını ihmal etmemizi önermezler.
  • <html> tagı dökümanımızın kaynağıdır. Bu taga eklediğimiz her özellik bütün dökümanımızı etkileyecektir. Örneğin sayfamızın dilini burada ilan etmeliyiz: <html lang="tr"(Sayfamızın dilini ilan etmek, sayfa okuyucuları ve arama motorları için önemlidir.)
  • <html> ve <body> taglarını ihmal etmek, html dökümanımızı XML dili ile kombine edip, güçlendirmek istediğimizde sorun çıkaracaktır.
  •  <body> tagını ihmal etmek, IE9 dan daha eski sürümlerde de sorun çıkarır.

<head> Elemanını İhmal Etmek

  • Html5 standartlarına göre <head> tagı ihmal edilebilir.
  • Varsayılan olarak, web tarayıcıları, <body> elemanından önceki bütün html elemanlarını <head> olarak algılar. Aşağıdaki html dökümanı html5 standardına uygundur:
!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

Her halükarda eksik taglar, tavsiye edilmez.

HTML <title> Elemanını

<title> elemanı, dökümanımızın ana başlığıdır.
<title> elemanı, bütün HTML/XHTML dökümanlarında gereklidir.
<title> elemanı:

  • Tarayıcımızın toolbarında bir başlık oluşturur. (adres çubuğunun üst tarafında)
  • Sayfamız, sık kullanılanlara eklendiğinde, ordaki başlığı olur.
  • Arama sonuçlarında bir başlık olarak gösterilir. 

HTML <style> Elemanını

  • <style> elemanı, dökümanımızda, bir CSS stili tanımlamızı sağlar.
  • <style> elemanı içerisinde, html elamanlarının stillerinin nasıl olacağını ilan edier. 
Aşağıdaki CSS koduna dikkat edelim:

<style>
body {background-color:yellow;}
p {color:blue;}
</style>

CSS stilleri hakkında fikir edinmek için lütfen bakınız: Ders_15

HTML <meta> Elemanını

  • <meta> elemanı; anahtar kelimeler (keywords), yazar adı (author), safa açıklaması (description) gibi meta bilgileri ile sayfamızın tanımı oluşturmamızı sağlar.
  • <style> bilgileri, web tarayıcıları, arama motorları ve diğer web servisleri tarafından kullanılır.
Bazı meta verileri ve ilan ettikleri veriler şöyledir:
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Arama motorlarına sayfa içeriğine ait anahtar kelimeler verir.
  • <meta name="description" content="Free Web tutorials on HTML and CSS"Web sayfamızı kısaca tanımlamamızı sağlar.
  • <meta charset="UTF-8"> Bu eleman, türkçe karakterlerin de sayfamızda sorunsuz görünmesini sağlar.
  • <meta name="author" content="Hege Refsnes"> Sayfanın yazarını ilan eder.
  • <meta http-equiv="refresh" content="30"> Sayfanın her 30 saniyede bir kendini yenilemesini sağlar.

HTML <base> Elemanını

  • <base> elemanı; sayfamızdaki linkler için temel bir kaynak adres (url) gösterir
  • <base> elemanı; head elamanının içinde tanımlanmalıdır.
  • <base href="resimler/" target="_blank"> kodu ile şunu dedik: resimler adında bir klasörümüz vardır ve url'si de budur. Bu <base> elemanı tanımlandıktan sonra, artık bu klasörün içindeki bir dosyaya link vermek için linkin href özelliğine href="resimler/resmim.jpg" yazmak yerine href="resmim.jpg" yazmak yeterli olacaktır. Ayrıca target="_blank" özelliği ile de sayfamızdaki bütün linklerin boş (blank) bir sayfada açılmasını sağladık.
  • Bu eleman, bir sayfada hep aynı klasördeki ya da aynı adresteki kaynaklara link verilmesi durumunda kullanışlı bir elemandır. Fakat sayfamızdaki linklerin kaynakları, farklı farklı yerlerde bulunuyor ise, bu eleman çok da kullanışlı olmayabilir. 

Hiç yorum yok:

Yorum Gönder