Html Kodları Nedir? 5 Dakikada Html Öğren
Html Kodları Nedir? Html web sayfalarını oluşturmak için kullanılan basit bir metin işaretleme dilidir. Html asla bir programlama dili değildir. Ancak html i tanıyan ve yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.
Html’in temel görevi görüntü, video, yazı gibi elementler bulunan sayfaları birbirine bağlamak ve tarayıcılar tarafından düzgün görüntülenmesini, doğru taranmasını sağlamaktır. Html estetik açıdan hiç bir şeye benzemez lakin CSS ve JavaScript gibi programlama dilleri ile beraber kullanıldığında hoş görünümlü ve dinamik siteler yaratılabilir. Html kullanarak arama motorlarına web sitemizin içeriğinde ne olduğunu içerik kısımlarını belirtiriz. SEO öğrenmek isteyen, Html de bilmek zorundadır. Örneği şu şekilde:
<p> Şu anda yazının başında ve sonunda gördüğünüz etiketler arama motorlarının burada ne olduğuyla alakalı bilgi sahibi olması için koyduğum html etiketidir. Bu etiket de tahmin edeceğiniz üzere paragraf etiketidir. </p>Html Etiketleri
.html
Html etiketi tarayıcılara dosyanın html ile yazıldığını belirtir. Dosya uzantı adı da .html dir. Her html dosyası html ile başlamak ve html ile bitmek zorundadır.
<html> </html>Head
Head etiketi html sayfasının ilk kısmıdır. Bu kısıma yazılan kodlar sayfa içerisinde görünmez.
<head> </head>Title
Title bir başlık etiketidir. Tile a yazdığınız başlık tarayıcı penceresinde gözükecektir. Bu başlık sayfanız ile uyumlu olmalı sayfa içeriğinizi tanımlamalı.
<title> </title>Body
Body sayfanızın en uzun ve sayfa içeriğinizi yazacağınız kısımdır.
<body> </body>Basic Html İskeleti
İçerik olmadan görünen temel html iskeleti. Çalışmaya bu iskelet ile başlarsınız.
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Pencere Başlığı</title>
</head>
<body>
Sayfa içerik kısmı.
</body>
</html>Başlıklar
H1 den başlayan ve H6 kadar küçülen başlıklar ve alt başlıklar. Bu başlıkları içeriğinize göre doğru kullanmalısınız.
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>Paragraf
Oluşturduğumuz sayfadaki metinleri ifade etmek için, metinlerin paragraf olduğunu işaret etmek için kullanırız.
<p> Lorem ipsum dolor sit am </p>Listeler Yapmak
Html ile çeşitli varyasyonlarda liste yaratabilirsiniz bunlar: Numaralandırılmış listeler, numaralandırılmamış listeler, tanım listeleri.
Numaralandırılmamış listeleri oluşturmak için <ul> etiketi ile başlıyoruz ve ul etiketine eleman eklemek için ise <li> etiketini kullanıyoruz.
<ul>
<li>Eleman 1</li>
<li>Eleman 2</li>
<li>Eleman 3</li>
<li>Eleman 4</li>
<li>Eleman 5</li>
</ul>Numaralandırılmış (sıralanmış) listeleri oluşmak için <ol> etiketi ile başlıyoruz ve içerisine az önceki örnekteki gibi <li> etiketini ekliyoruz.
<ol>
<li>Eleman 1</li>
<li>Eleman 2</li>
<li>Eleman 3</li>
<li>Eleman 4</li>
<li>Eleman 5</li>
</ol>Link Oluşturmak
Html in en büyük özelliklerinden bir tanesi link oluşturmaktır. Bir kelimeyi yada bir resmi bağlantıya dönüştürebiliriz.
<a href="ozantozanoglu.com">Ana Sayfa</a>Html Linklerinde Target Özelliği
Oluşturduğumuz linkteki web site adresinin nasıl açılacağını nerede açılacağını belirtebiliriz.
_blank sayfayı yeni bir pencerede açar.
_self sayfayı aynı çerçevede açar.
_parent sayfayı bir üst çerçevede açar.
_top sayfayı en üst çerçevede açar.
<a href="ozantozanoglu.com" target="_blank">Ana Sayfa</a>
İmajlar (Resimler) Nasıl Olmalı
Html de resim kodlaması yaparken resminizi url yada dosya yolunu belirtmeniz gerekmektedir. İnternet sayfanızın hızlı açılmasını istiyorsanız resim uzantınız WEBP olmalı ve mutlaka alt etiketi girmelisiniz. Çünkü bu resminizin ne ile alakalı olduğunu anlatır.
<img src="köpekresmi.webp"
alt="sevimli köpeğim bana sevgiyle bakıyor">
<img src="url" alt="kırmızı kadın elbise">En Sık Kullanılan Etiketler
<pre>
Sabit genişlikte bir yazı tipi eşliğinde bir metin oluşturmak istediğinizde kullanabileceğiniz bir etikettir. Satır boşluklarını ve metin içerisindeki boşlukları bu etiket ile daha anlamlı bir hale getirebilirsiniz.
<pre> Lorem ipsum dolor sit amet. </pre><br>
Satır atlmak veya satır başına dönmek için kullanılır.
<p> Lorem ipsum dolor sit amet <br>
lorem ipsum amet sit dolor </p><hr>
<hr> etiketi sayfanıza genişlemesine bir çizgi çeker ve yazılarınızı veya sayfanızın herhangi bir bölümünü birbirinden ayırabilirisiniz.
<h1> Güncel Ekmek Fiyatları </h1>
<hr><em>
Metnin istenilen kısmını belirginleştirmenizi sağlar. Bu etiketin görünümü tipik bir italic font şeklindedir.
<p><em>Lorem ipsum</em> dolor sit amet</p><s> ve <strike>
Üstü çizili metin yazmanızı sağlar.
<s> Lorem ipsum </s>
<strike> Lorem ipsum </strike><strong>
Metni vurgulamak ve güçlendirmek için kullanılır.
<strong> Lorem ipsum dolor sit amet </strong><u>
Altı çizili metin yazmanızı sağlar.
<u> Lorem ipsum dolor sit </u><b>
Yazılarınızı kalın yani bold şekilde yazmanızı sağlar.
<b> Lorem ipsum dolor sit </b><i>
Yazılarınızı eğik yani italic bir şekilde yazmanızı sağlar.
<i> Lorem ipsum dolor </i>Öğrendiklerinizi Uygulama Zamanı
Öğrendiğiniz html kodları ile kendi sayfanızı oluşturmak isterseniz aşağıdaki online tool u kullanabilirsiniz.
Free online HTML editor – onlinehtmleditor.dev
Bültene Abone Ol
- SEO Eğitimi – Bire bir SEO Eğitimi Alın
- E-İhracat Nedir ve Nasıl Yapılır?
- Sosyal Medya Pazarlama Süreci ve Adımları
- Dijital Pazarlama Nedir? > Dijital Pazarlama Kanalları
- 404 Hatalı Sayfalar Hakkında 3 SEO Uzmanının Açıklamaları
