0'dan itibaren HTML eğitim seti - body, header, nav, section, aside, div, footer etiketleri Ders # 4

"0'dan itibaren HTML eğitim seti - body, header, nav, section, aside, div, footer etiketleri Ders # 4"

Merhaba değerli arkadaşlar HTML 5 derslerimize kaldığımız yerden devam ediyoruz. Bugün sizlere HTML 5'te body, header, nav, Section, Side, div, Footer etiketlerinden bahsetmek istiyorum.

 

body

 

Bu etiket hakkında genel olarak konuşursak, web sitesinde gördüğümüz her şey bu etikette görüntülenir. Tarayıcıda body etiketinin dışında yazılan hiçbir şeyi göremiyoruz. 

Vücut etiketleri: 

Etiketi aç ve kapat - "<body> kodları </body>"

Tarayıcıda görmek istediğimiz tüm kodlar bu etiketlere yazılmalıdır.

Bir dosyada birden fazla gövde etiketi kullanmak, sözdizimi hatası olarak kabul edilir.

Başlık etiketindeki anahtar kelimeler veya açıklayıcı meta etiketler, gövde etiketi içinde kullanılırsa değerlerini kaybeder.

Gövde etiketinin sonuna yazılan script dosyaları sitenin daha hızlı çalışmasını sağlar. 

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

 

Yukarıdaki örnek bir html5 şablon kod bloğudur. Ve dediğimiz gibi tarayıcıda görmek istediğimiz tüm kodları body etiketleri arasına yazmamız gerekiyor.

 

<header> </header>  

 

Tarayıcımıza HTML5 üzerinden girilen başlık etiketi, adından da anlaşılacağı gibi sitenin ana başlık bölümünü oluşturur. Başlık etiketi, gövde etiketinden sonra gövde etiketinin içine yerleştirilir. Örneğin, sitedeki üst menü veya başlık reklam bölümleri başlık etiketinin içinde bulunur. İçeri 

<nav> </nav> etiketini kaydeder. Not: Header etiketi, Head etiketi ile aynı işleve sahip değildir.

 

<nav> </nav>

 

Başlık etiketinin içindeki nav etiketi, html5 aracılığıyla geldi. İşlev, başlık bölümünde yer alan başlık menüsü bölümlerini ayırmaktır. Örneğin başlık kısmında site menüsü ve kullanıcı menüsü varsa nav etiketini aşağıdaki gibi kullanabiliriz.

 

<header> 
	<nav> Ana Menü </nav> 
	<nav> Kullanıcı Menüsü </nav> 
</header>

 

<section> </section>

 

Bu etiket tarayıcılarımıza HTML5 aracılığıyla girildi. Bootstrap, satır sınıfıyla hemen hemen aynı işlevi yerine getirir. Bölüm etiketi, bir alanı bölüm olarak tanımlamak için kullanılır.

 

<aside> </aside>

 

Tarayıcımıza HTML5 üzerinden giren bir sonraki etiket asit etiketidir. Bu etiket, Bölüm etiketinin içinde bulunur. Ve yukarıda belirtildiği gibi, bölüm etiketi tarafından alınan bölümleri böler. Örneğin, yukarıda belirtildiği gibi 2 bölüm vardır. Birincisi bir kenar çubuğu, ikincisi ise resim, başlık ve makale içeren ana bölümdür. Görselin ve metin adının aynı anda bulunduğu bölüm asit etiketi ile 2 kısma ayrılmıştır. Örnek olarak aşağıdaki kod bloğuna bakalım.

 

<section> 
	<aside> 
		<h1> Makale Başlığı </h1> 
		<img src = "Makale Resmi"> 
	</aside> 
	<aside> Makale Yazma </aside> 
</section>

 

Bir bölüm etiketi içinde herhangi bir sayıda asit etiketi kullanılabilir. 

 

<div> </div>

 

HTML5'in ortaya çıkmasından önce, sitelerin tamamen div tarafından oluşturulduğunu söyleyebiliriz. Html 5'ten sonra kod ve sözdizimi sayfaları çokça yazılırken, sözdizimi sayfalarına daha az erişim sağlayarak, html5 etiketleri olmadan yalnızca div etiketlerini kullanarak bir web sitesi oluşturmak çok uygun oldu. Elbette bu, html5'in önceki sürümünün, yani html'nin kendisinin, html5'ten çok daha kolay olduğu anlamına gelmez. Google, bing, yandex vb. html5 üzerinden. gibi sitelerde ara Başka bir deyişle, çok acı çekenlerin çok ileri gittiğini söyleyebiliriz, ayrı bir derste sözdizimi hatalarından bahsedeceğiz. Kısacası, herhangi bir metin için böyle bir div etiketi kullanabilirsiniz. 

 

<footer> </footer>

 

 

Bu, tarayıcılarımıza HTML5 ile giren bir sonraki etiket ve html5 kod bloğunu tamamlayan son koddur. Altbilgi etiketi, sayının son bölümünü tamamlar. yalnızca gövde etiketleri arasında. Herhangi bir etikette bölüm veya div olarak kullanmak sözdizimi hatasıdır. Temel olarak, altbilgi bölümü, site veya sitenin iletişim bölümü hakkında ve komut dosyası kodlarını içerir. 

 

Sorularınızı bu dersin yorumlar bölümünde bize iletebilirsiniz. her birinize iyi şanslar

Aykhan Gasimzade Aykhan Gasimzade verified icon
Full Stack Developer

Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.