Yazar: Merhaba değerli web tasarım meraklıları!
Bu yazımda sizlere html 5 dilinde yer alan temel etiketleri ve html 5’in iskelet yapısından bahsedeceğim. bir html 5 dökümanın iskeleti nasıl oluşturulur. tüm detaylı sizlere anlatacağım.
Html 5 html 4.0’dan çok farklı bir yapıdadır bir çok temel etiket kullanılmamaktadır. eğer genel olarak html’in genel yapısını biliyorsanız rahatlıkla html 5 teknolojisini öğrenebilirsiniz ve fazla kodlama yapmadan daha düzenli sayfalar oluşturabilirsiniz.
Html 5’de yer alan genel etiketlere birlikte bakalım ve ardından bu etiketler ile ilgili örnekler vererek açıklayalım.
İlk olarak ele alacağımız etiket div etiketidir. div etiketinin açılımı division anlımına gelmektedir, türkçesi ise bölüm anlamına gelir.
<div> etiketini sıkça kullanacağımız için mutlaka bilmemiz gerekir. <div> etiketi ile sayfalarımızı tasarlarken daha düzenli ve daha okunaklı bir iskelet yapısı oluşturabiliriz.
<div etiketini şu şekilde kullanabiliriz.
örnek:
<div>
<p>
bu paragraf div içerisinde yazılmıştır.
</p>
</div>
Yukarıdada belirttiğim gibi yazmış olduğum küçük yazıyı div etiketleri arasına almış oldum.
<div> etiketinin almış olduğu tüm parametreleri
başlıklı yazımdan okuyarak öğrenebilirsiniz.
İkinci olarak ele almamız gereken html 5 etiketimiz ise <section> etiketidir.
<section> etiketi, dilimizde kısım anlamına gelmektedir. bir sayfa tasarlarken aşırı <div> etiketi kullandığımızda div etiketlerini birbirinden ayırmak için kullanırız.
<section> etiketini bir örnek kullanarak gösterelim.
örnek:
<section>
<div>
<p>
birinci section içerisindeki birinci cümle.
</p>
</div>
<div>
<p>
Birinci section içerisindeki ikinci cümle.
</p>
</div>
<div>
<p>
Birinci section içerisindeki üçünce cümle.
</p>
</div>
</section>
<section>
<div>
<p>
İkinci section içerisindeki birinci cümle.
</p>
</div>
<div>
<p>
İkinci section içerisindeki ikinci cümle.
</p>
</div>
<div>
<p>
İkinci section içerisindeki üçüncü cümle.
</p>
</div>
</section>
Web tarayıcınızda sayfayı görüntülediğinizde yazmış olduğumuz cümlelerin ayrılmış olduğunu görebilirsiniz.
Bir web sayfasında mutlaka kullanacağımız temel etiketlerden birtaneside <header> etiketidir.
<header> etiketi bir web sayfasının üst kısmını temsil etmektedir. bu kısımda web sitemizin logosu, sosyal bağlantılar, üye girişi bağlantıları ve arama motorları yer alabilir.
<header> etiketinin kullanımını bir örnekle açıklayalım.
örnek:
<div id=”header”>
<p>
Bu eski header yapısıdır.
</p>
</div>
şimdi ise html 5 ile kullanılan header yapısını görelim.
<header>
<p>
html 5 ile artık böyle header yapılarını kullanıyoruz.
</p>
</header>
Html 5 ile gelen bir diğer temel etiketimiz ise, <nav> etiketidir. <nav> etiketi navigasyon yani yönlendirme anlamına gelmektedir.
Web sitemizdeki menülerimizi <nav> etiketi ile oluştururuz. bir örnek yaparak daha iyi anlatabiliriz.
örnek:
<nav>
<ul>
<li><a href=”#”>Ana Sayfa</a></li>
<li><a href=”#”>Hakkımızda</a></li>
<li><a href=”#”>projelerimiz</a></li>
<li><a href=”#”>ürünler</a></li>
<li><a href=”#”>hizmetlerimiz</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</nav>
Sayfayı web tarayıcınızda görüntülediğinizde sizlerde ne anlattığımı daha iyi anlayacaksınız.
Web sayfamızın alt kısmını belirlemek için kullanmamız gereken bir etiketimiz vardır. <footer> etiketi de html 5 ile gelen yeni bir etikettir. Web sitelerin footer kısmı ise alt kısımlarıdır bu kısımda web sitelerin telif kısmı, hangi tarihte yapıldığı gibi bir takım bilgiler yer almaktadır.
<footer> etiketini diğer etiketlerde olduğu gibi bir örnek yaparak açıklayalım.
örnek:
<footer>
© 2021 bu sayfanın tüm hakları tarafınıza aittir.
</footer>
Sayfayı kayıt edip görüntülediğinizde alt kısımda yazmış olduğumuz yazıyı görebilirsiniz.
Bir html 5 sayfasının genel iskelet yapısını oluşturan etiketlerin bir diğeride <aside> etiketidir.
<aside>> etiketi, yan menü yani slider olarak kullanılmaktadır. bu kısım içerisinde, arama kutucukları, çeşitli site bağlantıları ve ya sponsor bağlantıları yani reklam alanları yer alabilir. Web sitenizin sağında ve ya sol kısmında yer alır.
Bir örnek yaparsak sanırım kafanızda daha iyi şekillenecektir.
Örnek:
<aside>
<div>
<h2> Kategoriler </h2>
<ul>
<li> kategori 1 </li>
<li> kategori 2 <li>
<li> kategori 3 </li>
<li> kategori 4 </li>>
</ul>
</div>
</aside>
Html 5 ile kullanılan bir diğer etiketimiz ise <article> etiketidir. bu etiketi metin içeriklerini yazarken kullanırız. dilimizde makale anlamına gelmektedir.
<article> etiketini <section> etiketi ile kullanmanız tavsiyedir.
Bir örnek ile bunu gösterelim.
Örnek:
<div>
<section>
<h2> Deneme yazısı </h2>
<article>
<p>>
Html 4.0’dan sonra gelişen teknolojiyle birlikte html dilinde de bir yenilik gerekiyordu. işte bu dönemde bir web sayfasını belli bir standarta bağlı olarak html 5 tasarımı yapılmış ve 2012 yılında kullanılmaya başlandı.
<br>
Tam anlamıyla 2015 yılında html 5 teknolojisini tüm güncel tarayıcılarda kullanılmaya başlandı ve günümüzde de kullanılmaktadır.
<br>
Html 5 teknolojisi bildiğimiz html 4’ten çok farklı bir yapıya sahiptir. birçok etiket html 5 ile kullanımdan kaldırıldı ve yeni etiketler getirilmiştir.
<br>
Html 5 artık responsiv yani mobil uyumlu tasarımlar yapmamıza olanak sağlıyor. Günümüzün web teknolojisiyle birlikte masa üstünün yanısıra mobil kullanım yaygınlaştı, bu yüzdende mobil uyumlu tasarımlar yapmamız için böylesine geniş ve kapsamlı bir teknolojiye ihtiyacımız vardı.
<br>
Html 5 teknolojisi ile css, javascript kullanarak bir sayfa tasarlayabilir ve seo dostu bir sayfa oluşturabilirsiniz.
</p>
<p>
html (hiper text markup language )
<br>
html: internet’in yaygınlaştığı yıllarda bir web sayfası tasarlamak için yazılmış bir dildir. html ile bir web sayfası içerisinde metin dosyasını biçimlendirmek amacıyla ilk sürümü tasarlanmıştır.
<br>
sonraki sürümlerinde ise, bağlantı, ses dosyaları, grafikler, tablolar ve video dosyaları eklenebilecek şekilde tasarlanmıştır.
<br>
html 5 ile artık günümüzde daha esnek ve düzenli Web sitelerinin iskelet yapıları oluşturulmaktadır.
</p>
</aside>
</section>
</div>
Sayfayı tarayıcınızda görüntülediğinizde sizlerde düzenli bir yapıyı göreceksiniz. Html 5’in genel iskelet yapısını oluşturan etiketler bunlardır, sonraki yazılarımda ise artık html 5’in tüm yönlerini ve taglarını birlikte inceleyeceğiz ve kısa bir süre içerisinde html 5’i öğrenmiş olacağız.
Html 5 ile ilgili kafanıza takılan tüm sorularınızı yorum olarak bana yazabilir ve birlikte çözümler üretebiliriz. iyi bloglamalar herkese.
Bir önceki yazımız olan html 5 head etiketi ve kullanımı başlıklı makalemizde css tanımlaması, html 5 head etiketi ve html 5 head etiketi kullanımı hakkında bilgiler verilmektedir.