Her WordPress Kullanıcısının Bilmesi Gereken Temel HTML Kodları

Yayınlanan: 2019-04-24

HTML, internetteki hemen hemen her şeyin temelidir. İnternet içeriğinin üzerine inşa edildiği temel taşıdır ve onlarca yıldır öyledir. Sağlam bir HTML anlayışı olmadan, WordPress veya diğer herhangi bir web tasarımı ve geliştirme ile yaptığınız her şey bodur olacaktır. Şanslısınız ki, acemiden kıdemliye kadar her WordPress kullanıcısının neredeyse her gün kullandığı bir dizi temel HTML kodu var. Onları parçalayalım ve sizi hızlandıralım.

Youtube Kanalımıza Abone Olun

HTML nedir?

İşte hızlı sürüm: HTML, köprü metni biçimlendirme dili anlamına gelir; bu, bunun tam olarak bir programlama dili olmadığı anlamına gelir. HTML, bilgisayarınıza komut dosyası aracılığıyla bir şeyler çalıştırmasını emretmez. Bunun yerine, sayfanızda bulunan metni alır ve işaretler. İtalik, kalın, hizalama, boyut vb. HTML ayrıca size resimler ve bağlantılar ekleme yeteneği verir ve HTML5 ile en yeni sürüm onları ve metni heyecan verici yeni yollarla değiştirir.

HTML kodu, bayrakların içinde bulunur ve okunması oldukça kolaydır. Basit bir HTML sayfası şöyle görünebilir:

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

Bir tarayıcıda oluşturulduğunda, bu şöyle görünür:

Temel HTML Kodları

Gördüğünüz gibi, HTML o kadar kafa karıştırıcı değil. Aslında, daha önce hiç HTML kodu görmemiş olsanız bile, bahse girerim bu etiketlerin her birinin ne anlama geldiğini yalnızca bağlam yoluyla anlayabilirsiniz. Bu arada, web'deki kariyeriniz boyunca kullanacağınız en yaygın, temel HTML kodlarına bir göz atalım.

Gözü pek

Metninizi <strong> etiketlerine sardığınızda, tarayıcıya metni kalın yazmasını söylüyorsunuz. Basitçe <b> da kullanabilirsiniz, ancak Google ve diğer arama motorlarının semantik kodlamayı tercih etmesiyle, <strong> ile daha güvende olursunuz.

You can make <strong>text bold</strong> by using this tag.

italik

<Em> vurgu anlamına gelir ve HTML'de italik kullanmanın anlamsal yoludur. Bunu yapmak için <i>' yi de kullanabilirsiniz.

You can put <em>text in italics<em> by using this tag.

Altını çizmek

Aynı şey <u> ve altını çizmek için de geçerlidir. Genel olarak, bu çok az kullanılır çünkü bağlantıların altı çizili ve altı çizili metinler tıklayamazsınız, kötü bir kullanıcı deneyimi verir.

You can <u>underline</u> by using this tag.

Başlıklar

Muhtemelen tüm temel HTML kodlarından en çok kullanılanı çeşitli başlıklardır. İçeriğinizi bölümlere ayırmak için <h1>, <h2>, <h3>, <h4>, <h5>, <h6> kullanın.

Bunları hiyerarşik sırayla kullandığınızdan emin olun. Google, başlıkları iç içe yerleştirmenizi istiyor, bu nedenle <h2> öğesini <h3> altında değil, yalnızca <h1> altında kullandığınızdan emin olun.

Çoğu sayfada yalnızca tek bir <h1> bulunurken, Google artık daha fazlasına sahip olduğunuz için sizi cezalandırmıyor. Bir <h1> kullanmanın, sayfa (veya en azından sayfanın o bölümü) için yuvalamanızı sıfırladığını unutmayın.

<h2>H2 is the most commonly used header tag.</h2>

Bu sayfadaki HTML öğelerinin tüm başlıkları h2 şeklindedir .

resim

Resim eklemek, HTML'nin yaptığı en faydalı şeylerden biridir. İnterneti brütalist üsluplarından kopardı ve bugün olduğu yere giden yola çıktı. Tek yapmanız gereken istediğiniz resmin URL'sine sahip olmak ve tek bir <img src> ( resim kaynak etiketi anlamına gelir. Bunun gibi:

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

Resim etiketini kapatmanız gerekmediğini ve resmin görüntülenmesi için tırnak işaretlerinin gerekli olmadığını unutmayın. Birçok kişi hala kodu daha okunabilir hale getirmek için bunları kullanıyor.

<alt> niteliği, erişilebilirlik amacıyla gösterilen metindir ve arama motorları tarafından da indekslenir. Ekran okuyucusu ve diğer cihazları olan kişiler için interneti kullanmak için alternatif metin kesinlikle gereklidir. Resimleriniz için alternatif metne sahip olmak her zaman en iyi uygulamadır.

Bağlantılar

Peki. Bağlantılar. Bağlantılarla ilgili çok şey oluyor. Daha doğrusu, bağlantılarla yapabileceğiniz çok şey var. En basit haliyle, onu bir <a href> etiketi ile bir araya getireceksiniz . <a> bunun bir bağlantı olduğunu belirtir ve <href> tam anlamıyla bağlantı kurduğunuz yere köprü metni referansıdır (URL).

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Bağlantı kodunu basitçe bir </a> ile kapatacaksınız ve orada istediğiniz herhangi bir metni kullanabilirsiniz. Bu tıklanabilir bağlantının kendisi olacaktır ve buna bağlantı metni adı verilir.

Sayfada şu şekilde işlenir: Divi sayfamıza bir bağlantı ve bu bağlantı metnidir.

Ek olarak, HTML kodunu da yuvalayabilirsiniz. Bağlantı bayrakları arasına bir <img src> etiketi ekleyerek bir resmi tıklanabilir hale getirebilirsiniz.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Tıklanabilir bir resim bağlantısının burada nasıl işlendiğini görebilirsiniz:

Görüntü Bağlantısı için Temel HTML Kodları

Daha Fazla Bağlantı Özelliği

Ayrıca, belirli şekillerde davranmaları için bağlantılara epeyce farklı nitelikler ekleyebilirsiniz (URL'nizi yönlendiren olmaktan gizlemek veya bağlantıyı yeni bir pencerede açmak gibi). Sizin için en yararlı olanlardan bazıları

rel , bağlantı ve hedefi için bir tür ilişkiyi gösterir. Yönlendirme trafiğinin size geri izlenmesini önlemek için noreferrer gibi.
hedef , tarayıcıya bağlantıyı nerede açacağını söyler: örneğin, _blank onu boş bir sekmede açar.
nofollow , rel ile birlikte çalışır ve arama motorlarına hedef siteye herhangi bir bağlantı suyu aktarmak istemediğinizi söyler. Bu, tartışmalı içeriğe vb. bağlantı verirken iyidir. Ayrıca, insanların yorumlarınızda spam göndermesini engeller ve içeriğinizin tarafsız olarak görülebilmesini sağlar, çünkü görünürlük ve tıklamalar dışında öne çıkmanız için herhangi bir bonus sağlamazsınız.

Daha fazlası var, ama muhtemelen en sık göreceğiniz bunlar.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

üstü çizili metin

Eğer benim gibiysen, bazen sen ~~ihtiyaç~~ abartılı kelimeler kullanarak bir şaka yapmak istiyorum. Ya da bir şeyleri listeden işaretlemeniz (veya kodun kendisinin dediği gibi silmeniz) gerekebilir. Veya metinden geçen bir satırınız olması gereken başka bir şey.

İşte o zaman, üzerini çizmek istediğiniz metnin etrafında <del> kullanırsınız. Bazı insanlar için bu inanılmaz derecede yaygın bir koddur, bazıları ise asla kullanmayabilir. Ne olursa olsun, hatırlaması kolay bir şey.

You can use <del>this code</del> for strikethrough text in HTML.

Listeler

Listeler, bugünlerde web içeriğinin bir diğer önemli parçasıdır. Size sadece tonlarca boşluk bırakmak ve metin duvarlarını kırmakla kalmaz, aynı zamanda düşüncelerinizi sindirilebilir parçalar halinde düzenlemenize de izin verir.

Temel HTML kodlarıyla yapabileceğiniz iki tür liste vardır. 1, 2, 3 vb. numaralandırılmış sıralı listeler . Sırasız listeler , sayılar yerine madde işaretleri veya simgeler (site tasarımınıza bağlı olarak) kullanır.

Sırasız veya sıralı listeler için her listeyi sırasıyla <ul> veya <ol> ile sararsınız. Ve listedeki her öğe <li> içine sarılmalıdır.

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

Ve bu kodlar farkı göstermek için şöyle işlenir:

Bu, sıralanmamış bir listenin parçasıdır.
Öyleyse bu.

Ve bu şekilde sıralı bir liste oluşturdunuz.
Bu, listedeki bir bağlantıdır.
Ve bu bağlantı metni kalın , ancak bu kısım değil.

Ayrıca diğer kodları da listelere yerleştirebilirsiniz. Böylece metni kalınlaştırabilir, bağlantı ekleyebilir vb.

Alıntıları Engelle

WordPress kariyerinizin bir noktasında başka birinin web sitesinden alıntı yapmanız gerekecek. İşte burada <blockquote> devreye girer. Kopyaladığınız /yapıştırdığınız (ve özniteliklendirdiğiniz) metni <blockquote> açılış ve kapanış etiketleriyle çevreleyin ve hazırsınız.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Bir sayfada şöyle görünecek:

Bu metin, alıntı olduğunu belirtmek için özel bir stille görünecektir.

paragraflar

Paragraf HTML biraz garip. Kullandığınız CMS'ye ve oluşturucuya bağlı olarak, her satır sonunu otomatik olarak ayrı bir paragraf olarak oluşturabilir. WordPress, HTML yazdığınızda bunu yapar. Ancak, her şey bunu yapmaz. Bu nedenle, paragraflarınızı ayrı tutmanız gerekiyorsa ve bir metin duvarınız yoksa, her birini <p> içine sarın. Tarayıcı daha sonra her metin bloğunu tek bir sürekli blok yerine ayrı bir paragraf olarak görüntülemeyi bilecektir. Varsayılan olarak, tarayıcılar aksi söylenmedikçe satır sonlarını yok sayar.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Satırlar ve Satır Sonları

Paragraflarınız ve bölümleriniz arasında başka ayrımlar isteyebilirsiniz. İşte o zaman <hr> ve <br/> etiketlerini kullanabilirsiniz.

<hr> nerede olursa olsun bir ayırıcı satır ekler. Birçok kişi bunu bir kenar çubuğundaki veya bir web sayfasının ana bölümlerindeki widget'ları ayırmak için kullanır.

<br/> etiketi bir satır sonudur. Yeni bir paragrafa girmeden bir satırı kesmek için <p> ortasındaki <br/> işaretini kullanabilirsiniz (blok stili ve organizasyon adına). <br/> kendi kendine kapanan bir etikettir, yani içinde hiçbir içerik olamaz. Bu, kodun sonundaki eğik çizgi ile gösterilir.

Metni ve paragrafları istediğiniz yere ekleyerek onları bölmek için kullanabilseniz de, bu işe girmek için iyi bir uygulama değildir ve HTML, CSS ve JavaScript ile daha da geliştikçe, paragrafı hedeflemeniz gerekecektir. bazı şeyleri yapmak için öğe. Ayrım hakkında daha fazla bilgiyi buradan okuyabilirsiniz.

Toplama

HTML, internet ile etkileşim kurmak için kesinlikle gereklidir. İster web geliştirme ve tasarımına başlıyor olun, ister JavaScript'in bir şey olmadığı günlerden bir emektar olsun, herkes bunları aynı şekilde kullanır. Tüm sitelerimizin temellerini çalıştırmak için hala temel HTML kodlarını kullanıyoruz. Site ne kadar süslü olursa olsun veya özellikleri ne kadar gelişmiş olursa olsun, bir bağlantı koptuğunda veya olmaması gereken şeyler kalın olduğunda, yine de <a href> veya <strong> etiketlerinin olup olmadığını görmek için etrafta dolaşacaksınız. tamam yapıyor.

Bu günlerde en çok kullandığınız temel HTML kodları nelerdir?

Makale özellikli görsel enterlinedesign / Shutterstock.com