Ders 1: HTML Nedir ve Blogger'da Nerede Kullanılır?

Merhaba değerli Blogger dostları! Blogunuzun tasarımına küçük dokunuşlar yapmak, yazılarınızı daha profesyonel göstermek veya hazır kodları şablonunuza sorunsuz eklemek mi istiyorsunuz? O halde her şeyin temelindeki o gizemli dili öğrenmenin vakti geldi: HTML.

Bu dersimizde, HTML'in mantığını çok basit bir şekilde kavrayacak ve Blogger panelinde bu kodlarla nerede, nasıl oynayacağımızı öğreneceğiz.

1. HTML Nedir? (En Basit Anlatımla)

Açılımı HyperText Markup Language (Hiper Metin İşaretleme Dili) olan HTML, bir programlama dili değildir. HTML bir işaretleme dilidir.

Şöyle düşünün: Bir ev inşa ediyorsunuz. HTML bu evin tuğlaları, kolonları ve duvarlarıdır; yani iskeletidir. Evin boyası, fayansları ve dekorasyonu CSS; musluktan su akması veya ışıkların yanıp sönmesi gibi işlevler ise JavaScript'tir.

HTML, tarayıcınıza (Chrome, Edge, Safari) şu emri verir:

"Hey tarayıcı! Bu gördüğün düz bir yazı değil, bu bir başlık! Şu aşağıdaki ise bir paragraf!"

2. Etiket (Tag) Mantığı: HTML'in Altın Kuralı

HTML kodları etiketlerden (tag) oluşur. Bu etiketler küçüktür < ve büyüktür > işaretleri arasına yazılır.

Neredeyse tüm HTML etiketlerinin bir açılışı ve bir kapanışı vardır. Kapanış etiketinin başına bir eğik çizgi / koyulur.

<etiket_adı>Burası içeriğin geleceği yerdir</etiket_adı>

Canlı Örnek: Bir metni kalın yazmak istiyorsak <b> (bold) etiketini kullanırız:

Bu yazı normal, ancak <b>bu yazı kalın</b> olacak.
⚠️ Blogger İçin Önemli Kural: Açtığınız her etiketi kapatmayı unutmayın! Kapatılmayan bir etiket, blogunuzun tüm tasarımının aşağıya doğru kaymasına veya bozulmasına neden olabilir.

3. Blogger'da HTML ile Çalıştığımız 2 Ana Yer
Blogger'da HTML kodlarını kullanabileceğimiz iki farklı dünya vardır. Biri sadece o yazıya özeldir, diğeri ise blogun tüm şablonunu ilgilendirir.
A) Yazı Editörü (HTML Görünümü)
Bir yazı yazarken, sol üst köşedeki Kalem simgesine tıkladığınızda önünüze iki seçenek gelir:
Oluşturma Görünümü: Microsoft Word gibi, görerek yazdığınız alan.
HTML Görünümü: Yazınızın arkasındaki kod dünyası.
Eğer internetten bir kod bulduysanız (örneğin bir iletişim formu, buton veya müzik çalar) ve bunun sadece tek bir yazının içinde görünmesini istiyorsanız, yazıyı HTML Görünümü'ne alıp kodu oraya yapıştırmalısınız.
B) Tema Düzenleme Alanı (Tema > HTML'yi Düzenle)
Blogger panelinden Tema sekmesine gelip Özelleştir butonunun yanındaki oka tıklayarak HTML'yi Düzenle dediğiniz yerdir.
Burası blogunuzun kalbidir. Binlerce satırlık kod görürsünüz. Blogun genel tasarımı, yazı tipi ayarları, sayaç kodları veya reklam doğrulama kodları (Google AdSense gibi) her zaman buraya eklenir.

 İlk Pratik: Yazı Editöründe Kod Deneyelim!
Hemen şimdi blogunuzda yeni bir taslak yazı açın ve şu adımları takip edin:
Sol üstteki kalem simgesine tıklayıp HTML Görünümü'ne geçin.
Editörün içindeki her şeyi silin ve aşağıdaki kodu aynen yapıştırın:
Merhaba, bu benim blogumun ilk HTML denemesi! 
<br><br>
Aşağıdaki kelime <b>kalın</b> yazılmıştır.
Şimdi tekrar kalem simgesine tıklayıp Oluşturma Görünümü'ne dönün.
Kodların kaybolduğunu, yerine <br> etiketleri sayesinde alt satıra geçildiğini ve <b> sayesinde kelimenin kalınlaştığını göreceksiniz.
Blogger Arşivim Notu: Otomatik Boşluk Hatası!
Blogger'ın HTML görünümünde çalışırken sık yaşanan bir durum vardır: HTML görünümünde her Enter tuşuna basıp alt satıra geçtiğinizde, Blogger bunu otomatik olarak bir satır boşluğu (<br> veya <p>) olarak algılayabilir.
Çözüm: HTML kodları yazarken satırlar arasında upuzun boşluklar bırakmak yerine kodları peş peşe yazmaya özen gösterin. Web tarayıcıları kodun yan yana veya alt alta olmasını önemsemez, sadece etiketlere bakar.

1. Dersin Sonu. İlk adımı attık! Bir sonraki dersimizde blog yazılarımızın okunabilirliğini ve SEO (Arama Motoru) puanını doğrudan etkileyen Metin Biçimlendirme ve Başlık (Heading) Etiketlerini öğreneceğiz.

html,dersleri,ders