HTML Head Yapısı!

#HTML

Html head yapısı html belgelerinin teml yapısını oluşturur. Html belgesi bilgilerini html belgesine bağlanabilecek stil ve javascript dosyalarını içerir.

HTML Head Yapısı!
HTML Head Yapısı!

HTML <head> Elemanı

<head>Eleman meta verileri (veri hakkında bilgi) için bir kap olup  <html>etiket ve <body>etiket arasına yerleştirilir.

HTML meta verileri, HTML belgesine ilişkin verilerdir. Meta veriler görüntülenmez.

Meta veriler genellikle belge başlığını, karakter kümesini, stilleri, komut dosyalarını ve diğer meta bilgilerini tanımlar.

Bu etiketler meta açıklamaktadır: <title><style><meta><link><script>, ve <base>.

HTML <title> Elemanı

<title>Eleman belgenin başlığını tanımlar ve tüm HTML belgelerinde gereklidir.

<title> öğe:

  • tarayıcı sekmesinde bir başlık tanımlar
  • Sık kullanılanlara eklendiğinde sayfa için bir başlık sağlar
  • arama motoru sonuçlarında sayfa için bir başlık görüntüler

Basit bir HTML belgesi:

<!DOCTYPE html>
<html>

<head>
  <title>Sayfa Başlığı</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML <style> Öğesi

<style>Eleman tek bir HTML sayfası için stil bilgileri tanımlamak için kullanılır:

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

HTML <link> Elemanı

<link>Eleman dış stil sayfaları ile sayfamız için bağlantı kurmamız gerektiğinde kullanılır:

<link rel="stylesheet" href="mystyle.css">

HTML <meta> Elemanı

<meta>Eleman, sayfa açıklaması, anahtar kelimeler, yazar ve diğer meta kullanılan karakter kümesi belirtmek için kullanılır.

Meta veriler, tarayıcılar (içeriği görüntüleme), arama motorları (anahtar kelimeler) ve diğer web servisleri tarafından kullanılır.

Kullanılan karakter kümesini tanımlayın:

<meta charset="UTF-8">

Web sayfanızın bir tanımını tanımlayın:

<meta name="description" content="Web sayfanızın açıklaması">

Arama motorları için anahtar kelimeler tanımlayın:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Sayfanın yazarını tanımlayın:

<meta name="author" content="İbrahim Bozkurt">

Her 30 saniyede bir belgeyi yenile:

<meta http-equiv="refresh" content="30">

<meta>Etiketler örneği :

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Görünüm Çerçevesini Ayarlama

HTML5, web tasarımcılarının <meta>etiket aracılığıyla görünüm alanı üzerinde kontrolü ele almasına izin veren bir yöntem sunar .

Vitrin, kullanıcının bir web sayfasının görünür alanıdır. Cihaza göre değişir ve bir cep telefonunda bilgisayar ekranından daha küçük olacaktır.

<meta>Tüm web sayfalarınıza aşağıdaki görünüm öğesi eklemelisiniz :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bir <meta>görüntüleme çerçevesi öğesi, tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini kontrol etme talimatlarını verir.

Width = device-width kısmı, cihazın ekran genişliğini (cihaza bağlı olarak değişecek şekilde) takip edecek şekilde sayfanın genişliğini ayarlar.

Başlangıç ​​ölçeği = 1.0 bölümü, sayfa tarayıcı tarafından ilk yüklendiğinde ilk yakınlaştırma seviyesini ayarlar.

İşte viewport meta etiketi olmayan bir web sayfasına ve viewport etiketi ile aynı web sayfasına bir örnek <meta>:

HTML <script> Elemanı

<script>Elemanı, kullanıcı tarafı JavaScript’lerini tanımlamak için kullanılır.

Bu JavaScript “Hello JavaScript!” Yazıyor = “demo” kimliğine sahip bir HTML öğesine:

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

HTML <base> Öğesi

<base>Eleman bir sayfadaki tüm göreli URL’ler için temel URL ve baz hedef belirtir:

<!DOCTYPE html>
<html>
<head>
  <title>Sayfa Başlığı</title>
  <base href="https://armyyazilim.com/wp-content/uploads/2019/12/" target="_blank">
</head>
<body>

<img src="Untitled-1-26.png">
<p>Biz burda base etiketi ile üstteki dosya yolunu belirtmil olduk. Artık resim eklerken uzun uzun linkleri belirtmemiz gerekmeyecek sadece o yoldaki dosyanın adını yazsak yetiyor. Mesela burda img src bölümüne sadece "Untitle-1-26.png" yadığımız zaman bize "https://armyyazilim.com/wp-content/uploads/2019/12/Untitle-1-26.png" adresindeki resmi otomatik olarak gösterecektir. </p>

<p><a href="https://www.armyyazilim.com">W3Schools</a></p>
<p>base etiketinde yeni sekme özelliği olan "_blank" eklendiği için linklerimiz her zaman yeni sekmede açılacaktır.</p>

</body>
</html>

Çıkış;

See the Pen html base etiketi by ArmyYazılım (@armyyazilim) on CodePen.

<html>, <head> ve <body> çıkarılıyor mu?

HTML5 standardına göre; <html><body>ve <head>etiket atlanabilir.

Aşağıdaki kod HTML5 olarak doğrulanacaktır:

<!DOCTYPE html>
<title>Page Title</title>

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

Not:

ArmyYazılım <html> ve <body> etiketlerinin çıkarılmasını önermez . Bu etiketleri atlamak, DOM veya XML yazılımlarını çökertebilir ve eski tarayıcılarda hatalar üretebilir (IE9).

Bununla birlikte, <head>etiketi atlamak , bir süredir yaygın bir uygulama olmuştur.

HTML <head> Elemanları

EtiketAçıklama
<head> Belge ile ilgili bilgileri tanımlar.
<title> Belgenin başlığını tanımlar
<base>Sayfadaki tüm bağlantılar için varsayılan bir adres veya varsayılan bir hedef tanımlar.
<link> Belge ve dış kaynak arasındaki ilişkiyi tanımlar
<meta> HTML belgesi hakkındaki meta verileri tanımlar
<script> İstemci tarafı komut dosyasını tanımlar
<style> Bir belge için stil bilgilerini tanımlar

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt ///