Her Blogger'ın Bilmesi Gereken HTML Kodları

Her-Blogger'ın-Bilmesi-Gereken-HTML-Kodları

Bir blog başlatıyor ya da kişisel bir blog yönetmek istiyorsanız işte bilmeniz gereken Temel HTML Kodları ve nasıl kullanılacağı sevgili dostlar. HTML Kodları bloglama yönünde önemli bir role sahiptir.

Bugün her Blogger'ın bilmesi gereken bazı HTML Temellerini paylaşacağım. Bu HTML temelleri WordPress/Blogspot blogcuları için de faydalıdır.

İçindekiler

HTML Nedir?
Temel HTML Etiketleri ve Kodları

HTML Bildirimi ve Kök Element
<head> Etiketi
<body> Etiketi
HTML Başlıkları ve Paragraflar
Boş Etiket Kullanımı
HTML Bağlantıları
HTML İmajları
HTML Düğmeleri
HTML Listeleri
HTML Alıntıları

HTML Nedir?

HTML, Hypertext İşaretleme Dili'nin kısaltmasıdır. Web sayfaları veya web siteleri oluşturmak için HTML kullanırız. İnternette gördüğünüz her web sayfası HTML kodu kullanılarak yazılmıştır.

Tüm HTML öğeleri HTML etiketleriyle temsil edilir (örneğin <title>). Tarayıcılar bu HTML etiketlerini görüntülemez ancak HTML etiketleri sayesinde sayfanın içeriğini görüntülerler.

Temel HTML Etiketleri ve Kodları

HTML etiketleri, açı köşeli parantezlerle çevrili element adıdır. Blog gönderinizi düzenlerken birçok HTML etiketi görmüş olabilirsiniz. Temel HTML etiketleri şunlardır:

1. HTML Bildirimi & Kök Element

Belgenin HTML olduğunu bildirmek için başlangıçta bildirim etiketi kullanırız. Bunun örneği <!DOCTYPE html> şeklinde temsil edilir. Bu etiketin Blogger teması HTML düzenleyicisindeki HTML kodunun başında pratik bir örneğini görebilirsiniz.

HTML'nin kök elementi <html> dir. Bitiş etiketi ise </html>'dir.

Her HTML elementinin bir başlangıç etiketi (<etiket adı>) ve bir bitiş etiketi (</etiket adı>) vardır.

Kök element, HTML kodunun başlangıcında başlar ve HTML kodunun sonunda biter.

2. <head> Etiketi

Herhangi bir web sayfasının veya blog gönderisinin meta verileri <head> etiketleri arasında yer alır (yani <head> ve </head>). Meta açıklama, anahtar kelimeler, sayfa hakkında slug içerir.

Tarayıcılar baş içeriği görüntülemez ancak bu içerik, arama motorlarının web sayfanızı bulmasına yardımcı olur.

<head> etiketleri <html> etiketinin başlangıcından sonra ve <body> etiketinden önce yer alır.

3. <body> Etiketi

Bu, tüm verilerin web tarayıcısında görüntülendiği çok önemli bir etikettir. <body> ve </body> etiketleri arasındaki tüm veriler başlıkları, alt başlıkları, paragrafları içerir. Başlıca önemli HTML sayfası yapısı şu şekildedir:


<!DOCTYPE html>
<html>
  <head>
     \<title>Sayfa Başlığı BURAYA</title>
  </head>
  <body>
     \<h1>Başlık buraya</h1>
     \<p>Paragraf buraya.</p>
  </body>
</html>

4. HTML Başlıkları & Paragraflar

<body> etiketi içinde başlıklar kullanırken en önemli başlık için <h1> etiketini, bir sonraki önemli başlık için <h2> etiketini ve en az önemli başlıklar için <h6> etiketini kullanırız.

<h1>Başlık 1 buraya</h1>
<h2>Başlık 2 buraya</h2> ........ve böyle devam eder.

Benzer şekilde, paragraflar için HTML etiketleri kullanabiliriz. Bir paragrafın başlangıç etiketi <p> ve bitiş etiketi </p>'dir.

<p> Paragraf buraya.</p>

5. Boş Etiket Kullanımı

Boş elementler, içerik içermeyen etiketlerdir. Boş bir etiketi <br> şeklinde temsil edebiliriz. Bu etiketin bir bitiş etiketi yoktur. Satırlar arasında boşluk göstermek için kullanabilirsiniz.

6. HTML Bağlantıları

Metin içeriğinizde bağlantıları kullanmak için <a> etiketlerini kullanarak bağlantıları tanımlamanız gerekir:

<a href="https://blogdesteknet.blogspot.com/"> BLOGDESTEKNET </a>

Burada bağlantı mavi renkle gösterilirken, bağlantı metni kırmızı renkle gösterilir.

7. HTML İmajları

HTML imajları için etiket kullanımı HTML bağlantılarıyla aynıdır.

Burada <img> özniteliğini kullanırız.

<img src="image.png" alt="Resim" width="104" height="142">

Burada, resim adresi pembe renkle, alternatif başlık kırmızı renkle, resim genişliği mavi renkle ve resim yüksekliği turuncu renkle temsil edilmiştir.

8. HTML Düğmeleri

HTML düğmeleri temel olarak veri göndermek veya sıfırlamak için kullanılır. HTML düğmeleri oluşturmak için kullanılan etiketler <button> ve </button>'dir.

<button> Buraya Tıklayın </button>

9. HTML Listeleri

İki tür liste vardır: i) Sırasız Liste (Madde İşaretli Liste) ii) Sıralı Liste (Numaralı Liste)

Sırasız bir liste oluşturmak için HTML'yi şu şekilde tanımlamanız gerekir:

<ul>
<li>Blogger</li>
<li>SEO</li>
<li>Blogger ADSENSE</li>
</ul>

Benzer şekilde, sıralı bir liste oluşturmak için HTML'yi şu şekilde tanımlarız:

<ol>
<li>Blogger</li>
<li>SEO</li>
<li>Blogger ADSENSE</li>
</ol>

10. HTML Alıntıları

HTML Alıntıları için <blockquote> etiketlerinin yanı sıra alıntının orijinal kaynağına kredi vermek için cite özniteliğini kullanabilirsiniz.

Aşağıdaki örnekte en iyi şekilde gösterilmiştir:

<blockquote cite="https://blogdesteknet.blogspot.com/">
Eğer fakir doğarsanız, bu sizin hatanız değil,
ama eğer fakir ölürseniz, bu sizin hatanızdır
</blockquote>

Diğer İlgili Gönderiler:

Bu, blog başlatmadan önce bilmeniz gereken temel etiketler ve HTML kodlarıdır. Yukarıdaki rehber, blog gönderilerinizde kullanmanız (veya kullanmanız gereken) tüm temel kodların kullanımını içermektedir.

Yorumlarınızı kutu içine yazarak bu gönderi hakkındaki düşüncelerinizi benimle paylaşın.

Yazar Hakkında Blogdesteknet

Yazar Hakkında Bilgi