Hizmetlerimiz hakkında bilgi almak için tıklayın.
HTML Derslerinin 3. bölümüne hoşgeldiniz, HTML (Hyper Text Markup Language), web sayfalarının yapısını ve içeriğini oluşturmak için kullanılan temel programlama dilidir. Bizler de bu dilin niteliklerine bakarak kod örnekleriyle inceliyoruz.
HTML, web sayfalarının tasarlandığı temel yapı bloğudur. HTML, görsel ve işlevsel özelliklerin tanımlandığı kodlama dilidir. Bir web sitesinde görülen her şey HTML kodlarınca oluşturulur. HTML kodlaması yapılırken, sayfanın SEO (Arama Motoru Optimizasyonu) standartlarına uygun olması da oldukça önemlidir. Bu makalede HTML nitelikleri üzerine bilgi verilecek ve SEO için optimize edilmiş bir HTML kod örneği sunulacaktır.
HTML'de en sık kullanılan nitelikler şunlardır:
id Niteliği
id niteliği, sayfanın belirli bir kısmına benzersiz bir kimlik veren bir kodlama sistemidir. id niteliği, sayfa içinde tek bir parçanın özelleştirilmesine izin verir. Örneğin, bir sayfada bir başlık etiketi için bir id niteliği oluşturabilirsiniz ve bu nitelik altındaki özellikleri yalnızca bu başlık etiketi için özelleştirebilirsiniz.
Örnek:
<h1 id="baslik-etiketi">Bu sayfanın başlığı</h1>
class Niteliği
class niteliği, HTML kodlarının belirli gruplara ayrılmasını sağlar. Belirli stil özellikleri veya işlevler için bir grup tanımlamak gerektiğinde, class niteliği kullanılır. class niteliği, birden fazla öğeye aynı özellikleri uygulamak için idealdir.
Örnek:
<p class="mavi-yazi"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
alt Niteliği
alt niteliği genellikle resim etiketleri için kullanılır. Bu nitelik, resim yüklenmediğinde veya hatalı yüklendiğinde alternatif bir metin gösterir. Google botları da resimleri okuyamadığı için, alt niteliği sayesinde botların resim hakkında bilgi oluşturmasına yardımcı olur.
Örnek:
<img src="resim.jpg" alt="Manzara resmi">
Bu özelliklerin belirtildiği HTML kodlarının SEO için optimize edilmesi de oldukça önemlidir. Örneğin, sayfa başlığı (h1 etiketi) doğrudan sayfanın konusuyla ilgili olmalı ve içerikle birleşmelidir. Yine, sesli okuyucular veya botlar için çoklu başlıklar yapmak önemlidir. Kod örneğimiz aşağıdaki gibi olabilir:
<!DOCTYPE html>
<html>
<head>
<title> Örnek Sayfa Başlığı </title>
</head>
<body>
<header>
<h1> Örnek Sayfa Başlığı </h1>
<nav>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#"> Hakkımızda </a></li>
<li><a href="#"> İletişim </a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2> Bölüm 1 </h2>
<p> Bu bölümdeki içerik. </p>
</section>
<section>
<h2> Bölüm 2 </h2>
<p> Bu bölümdeki içerik. </p>
</section>
<section>
<h2> Bölüm 3 </h2>
<p> Bu bölümdeki içerik. </p>
</section>
</main>
<footer>
<p> © 2021 Örnek Web Sitesi </p>
</footer>
</body>
</html>
Bu kod örneğinde, h1 etiketi sayfa başlığını, h2 etiketleri ise bölümleri belirtmek için kullanılmıştır. Etiketlerin yanı sıra, class ve id nitelikleri de bazı yerlerde kullanılmıştır. Bu sayede, sayfanın SEO standartlarına uygun olduğu ve arama motorları tarafından daha iyi indekslenebileceği sağlanmıştır.
a href Niteliği:
Bu nitelik, bir sayfa veya dosyaya bağlantı oluşturmanızı sağlar. href niteliği için kullanılan örnek kod:
Örnek:
<a href="www.google.com">Google'a Git</a>
lang Niteliği
Bu nitelik, elementin hangi dilde olduğunu tanımlamanıza olanak tanır. lang niteliği için kullanılan örnek kod:
Örnek:
<div lang="tr">Türkçe içerik burada</div>
style Niteliği
Bu nitelik, belirli bir elementin görünümünü düzenlemenize olanak sağlar. style niteliği için kullanılan örnek kod:
Örnek:
<p style="color:red; font-size:20px;">Bu paragraf örnektir.</p>
src Niteliği
Bu nitelik, bir resim ya da video gibi multimedyal dosya için kaynak adresini belirtmenizi sağlar. src niteliği için kullanılan örnek kod:
Örnek:
<img src="resim.jpg" alt="Örnek Resim">
width ve height Nitelikleri:
Bu nitelikler, resim veya video gibi multimedyal dosyaların boyutlarını belirlemenizi sağlar. width ve height nitelikleri için kullanılan örnek kod:
Örnek:
<img src="resim.jpg" alt="Örnek Resim" width="500px" height="300px">
Bu nitelikler, HTML kodlarınızda doğru ve düzgün bir şekilde kullanıldığında, arama motorlarının sayfalarınızı daha iyi anlamasına ve sıralamasına yardımcı olabilir.
title Niteliği
title niteliği, bir öğe hakkında bazı ekstra bilgileri tanımlar.
title özniteliğinin değeri, öğenin üzerine fareyi getirdiğinizde bir araç ipucu olarak görüntülenecektir:
Örnek:
<p title="Ben Enes Alp">Bu bir paragraftır.</p>
Bu derste neler öğrendik?
<a> öğesinin href özelliği, bağlantının gideceği sayfanın URL'sini belirtir.
<img> öğesinin src özelliği, görüntülenecek görüntünün yolunu belirtir.
<img> öğesinin width ve height nitelikleri, görüntüler için boyut bilgisi sağlar
<img> öğesinin alt özelliği, bir resim için alternatif bir metin sağlar
style niteliği, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır.
<html> etiketinin lang özelliği, web sayfasının dilini bildirir.
title özniteliği, bir öğe hakkında bazı ekstra bilgileri tanımlar.
class niteliği, HTML kodlarının bölümlere ayrılmasını sağlar.
id niteliği, belirli bir bölüme benzersiz kimlik oluşturmayı sağlar.
4. Bölümde Görüşmek Dileğiyle!
