Blogcular için Basit ve Korkutucu Olmayan Bir HTML Rehberi

Blog yazmak çok kazançlı bir iş olabilir, ancak blog yazarı olmak özellikle arama motoru optimizasyonu (SEO), web tasarımı, HTML (Köprü Metni İşaretleme Dili) ve muhtemelen WordPress ile ilgili olarak çok fazla uzmanlık bilgisi gerektirir.

Bu teknolojilerin her biri önemli olsa da, HTML muhtemelen hepsinin özüdür. Aslında, hiçbir blogcu, güçlü bir HTML bilgisi olmadan mesleğinde başarılı olamaz.

Blogger veya web tasarımcısı olmak için HTML uzmanı olmanıza gerek yok. Bununla birlikte, özellikle bir blogcu olmak için SEO ile ilgili olduğu için HTML'deki hayati kavramları bilmeniz gerekir.

H1 Öğesi Önemlidir

H1 veya Başlık 1, HTML'de genellikle en büyük başlık olan önemli bir başlıktır. HTML'ye yeni başlayanların çoğu için, H1 metni daha büyük göstermek için kullanılır, ancak durum her zaman böyle değildir. Aslında, H1'in anlamı bundan daha derine iner.

H1 etiketi, arama motoruna özel talimatlar verir. Arama motoruna söz konusu öğenin sayfanın ana başlığı olduğunu söyler. SEO açısından, bir sayfada yalnızca bir H1 öğesi olmalıdır.

Bir sayfaya birkaç H1 öğesi koymak, SEO çalışmanızı engelleyebilir ve arama motoru sıralamanızı olumsuz etkileyebilir, hiçbir blogcu bunu istemez.

Diğer HTML etiketleri gibi, H1 etiketi de bir açılış ve kapanış etiketi (<h1></h1>) içine alınır. Etiketler içinde alt, stil, sınıf, başlık, kimlik vb. gibi çeşitli niteliklere sahip olabilirsiniz.

Bu etiketler, h1 öğesinin özelliğini tanımlamak için kullanılabilir ve her web tasarımcısı ve blog yazarı bunları bilmelidir.

H2 Elemanı ve Diğer Başlıklar

H2 öğesi ayrıca her web tasarımcısı ve blog yazarı için önemli bir HTML öğesidir. Bu öğe genellikle H1 öğesinden daha küçüktür, ancak bazen seçtiğiniz stil özelliğine bağlı olarak daha büyük yapılabilir.

H2 öğesi SEO amaçları için de önemlidir. Arama motoru, bir blog gönderisindeki veya sayfasındaki ana alt başlıkların H2 öğeleri olmasını bekler.

Başka bir deyişle, H1 öğesinin aksine, bir sayfada birkaç H2 öğesi olabilir. Ancak alt alt pozisyonlar H3, H4 ve diğer alt pozisyonlar olabilir.

Bir web sitesi veya blog yazısı oluştururken, SEO açısından çıkarımları ve önemi nedeniyle başlık öğelerinin konumlandırılmasına dikkat etmelisiniz.

Tasarım, Görünüm ve Stil

Web geliştirme ve bloglamada görünüm ve tasarımlar önemlidir. Aslında istatistikler, bir web sitesindeki tüm ilk izlenimlerin %94'ünün tasarımıyla ilgili olduğunu gösteriyor. Ayrıca, kullanıcıların %90'ı, harika bir kullanıcı arayüzü tasarımına sahip olan bir web sitesinde alışveriş yapmaya devam edeceklerini söylüyor.

Bu istatistiklerle, bir web sitesinde ve bir blogda tasarımın önemli olduğu açıktır. Her web tasarımcısı, bir web sitesinin nasıl harika görüneceğini anlamalıdır. Bu, HTML öğesiyle ilgili olsa da, daha çok CSS'nin (Basamaklı Stil Sayfası) alanına girer.

Nitekim HTML, web sitesinin yapısıyla ilgilenirken, CSS sitenin tasarımı ve görünümü ile ilgilenir. Ne yazık ki, CSS'nin kendi sözdizimi ve dil stili vardır.

CSS'nin birçok versiyonu yayınlanmıştır ancak güncel ve en çok kullanılan versiyonu CSS3'tür. Ayrıca, stili SCSS, LESS'te yazmak ve ardından bunları CSS'ye dönüştürmek de mümkündür.

CSS'de tanımlanan stillerin çoğu, HTML'de satır içi olarak da tanımlanabilir. Bununla birlikte, CSS'de bir stil tanımlamak, yapıyı tasarımdan ayırdığı için işleri daha düzenli hale getirir.

CSS, gövdeyi, başlığı, başlıkları, paragrafları vb. tanımlar. Stiller, özelliklerinden virgülle ayrılır. Örneğin, gövdenin rengini, yazı tipi boyutunu ve arka plan rengini ayarlamak için şunları elde ederiz:

gövde{
kırmızı renk;
yazı tipi boyutu: 14 piksel;
arka plan rengi: mavi;
}

Bir stil tanımlarken, bir "sınıf", "id", "eleman" vb. için stil tanımına özel dikkat gösterilmelidir.

Diğer Önemli HTML Öğeleri

Başlıklar bir web sayfasındaki tek önemli HTML öğesi değildir, bağlantılar, resimler ve listeler gibi diğer bazı öğeler de önemlidir ve her web tasarımcısı ve blog yazarı nasıl çalıştığını bilmelidir.

Bağlantılar

Bağlantılar, bir web sayfasındaki bağlantı etiketi (<a></a>) ile tanımlanır, dofollow veya nofollow bağlantıları olabilir.

Dofollow bağlantıları, bağlantı suyunu sayfanıza aktararak arama motorunda üst sıralarda yer almanızı sağlar. Sayfanıza ne kadar çok dofollow bağlantısı bağlanırsa, o kadar fazla geri bağlantınız ve yetkiniz olur, örneğin <a href=”http://mywebsite.com” ></a>

Ayrıca, nofollow bağlantıları sitenize bağlantı suyu aktarmaz ve bu nedenle bağlantılar, arama motorlarından gelen botların bağlantılarınızı takip etmesine izin vermez, örneğin <a rel=”nofollow” href “http://mywebsite.com”></ bir>

resim

<img> tarafından tanımlanan resim etiketi, her web tasarımcısının ve blog yazarının bilmesi gereken özel bir HTML etiketidir. Diğer HTML etiketlerinin aksine, resim etiketinin bir kapanış etiketi yoktur.

Bu resim etiketi, bir blog gönderisinde, sayfasında veya bir web sitesinde resmin önemi nedeniyle blogcular için önemlidir. Trafik alan çoğu blog gönderisinin en az bir resmi vardır ve bu nedenle bir gönderiye nasıl resim etiketi ekleneceğini bilmek önemlidir.

Resim etiketinin tanımlanması çok kolaydır. src'yi ve muhtemelen alt ve başlık öğelerini belirtmeniz gerekir. İşte bir örnek <img src=”https://mysite.com/img.jpg” alt=”görselim” başlık=”görsel başlığım”>

Listeler

Çoğu zaman bir blog yazarken, makaleyi daha düzenli ve net hale getirmek için madde işaretleri ve listeler eklemek istersiniz. HTML listeleri bunu yapmak için ideal öğelerdir.

İki tür liste vardır – sıralı ve sırasız listeler. Adından da anlaşılacağı gibi, sıralı listeler Arap veya Romen rakamlarıyla numaralandırılmıştır, ancak sırasız listeler madde işareti ile tasarlanmıştır.

ol ile sıralı listeler tanımlayabilirsiniz. Örnek <ol><li>HTML</li><li>CSS</li></ol>. Benzer şekilde, sırasız listeler ul ile tanımlanabilir. Örnek <ul><li>HTML</li><li>CSS</li></ul>

Sonuç olarak, her blog yazarı ve web tasarımcısı bazı temel HTML kavramlarını anlamalıdır. HTML ve CSS iç içe olduğundan, CSS'yi anlamak da önemlidir. Bu, çekici bir web sitesi veya blog sayfası oluşturmanıza yardımcı olacaktır.