HTML kodlamaya başladıysanız bu temel HTML kodlarını bilmeniz gerekir. Bu basit HTML kodlarını adınız kadar iyi bilmeniz de fayda olduğunu belirtmek isterim. Hazırladığınız web sayfalarında bu etiketleri bir yada bir kaç sefer sayfanızda kullanırsınız. Bir sonraki bölümlerde onlar hakkında bilgi edineceksiniz.
HTML Kodlarının basit kullanımlarını bu yazıda ele alacağım anacak daha detaylı kullanımlar için sitedeki HTML menüsünü kullanmanızı tavsiye ederim.
Temel HTML Belgesi
<!DOCTYPE html>: Bu etiket HTML belgesinin türünü belirtmek için kullanılır. HTML5 formatında kodlandığını göstermek için bu şekilde kullanılır.
<html>:HTML etiketlerinin kapsayıcı etiketidir.<body> ve <head> etiketleri bu etiket içinde tanımlanır.
<head> :Sayfa dili, başlığı ve gerekli düzenlemelere ait etiketlerin yer aldığı etikettir.
<body> : Site tasarımında kullanıcıların gördüğü kısımları oluşturduğumuz kapsayıcı etikettir.
<title> : Sitenin başlığını tanımak için kullanılır. Bu etiketin yeri <head> etiketlerinin arasıdır.
<meta charset="utf-8"> :Türkçe karakter seti dahil bir çok dil setini içerdiğini belirtmek için kullanılır.
Standart bir HTML belgesi aşağıdaki gibi tanımlanmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Tasarim Kodlama</title> </head> <body> </body> </html> |
Yukarıdaki temel iskelet kodlarını ve aşağıdaki basit kodları kullanarak, HTML kodları ile web sayfaları için basit işlemler yapmak mümkün olacaktır.
Başlık Etiketleri (Hx)
Başlık etiketleri bir kitaptaki başlıklar gibidir. SEO içinde önemli olan bu etiket ile 6 farklı başlık oluşturulabilir. SEO açısından her sayfada en az 1 tane başlık bulunması gerektiğini belirtmek isterim.
HTML aslında 6 başlık öğesini destekler: h1, h2, h3, h4, h5 ve h6. h1 en önemli başlıklar içindir, h2 daha az önemli alt başlıklar içindir. Genellikle, sayfanız çok uzun ve karmaşık olmadıkça h1, h2 ve h3’ten daha fazlasını kullanmanız gerekmez.
|
1 2 3 4 5 6 7 8 |
<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 Etiketi (<p>)
P öğesi, metin paragrafları oluşturmanıza olanak sağlar. Çoğu tarayıcı, her paragraf arasında dikey bir boşluk bırakarak paragrafları görüntüler ve metni güzelce ayırır.
Metin parçaları arasına boş satırlar eklemek için <br> etiketlerini kullanarak yalnızca metin paragrafları oluşturabilirsiniz, bunun yerine p öğelerini kullanmak daha iyidir. Yalnızca düzenli değil, tarayıcılara, arama motorlarına ve diğer insanlara sayfanızın nasıl yapılandırıldığı konusunda daha iyi bir fikir verir.
İşte bir paragraf örneği:
|
1 2 3 |
<p> Kedim Şanslı'nın birçok maceraları var. Dün bir fare yakaladı ve bu sabah iki tane yakaladı! </p> |
Satır Sonu (<br>)
Bir metni yatay olarak bölmek için kullanılır. Kullanıldığı yerde metni bir alt satırdan devam etmek için kullanılır. <br/> öğesini ne zaman kullanırsanız, takip eden her şey bir sonraki satırdan başlar. Bu etiket, aralarında girilecek hiçbir şey olmadığından, etiketleri açıp kapatmanıza gerek olmayan boş bir öğe örneğidir.
|
1 2 3 |
<p>Örnek bir içerik <br> Burası yazının devamı</p> |
Div Etiketi (<div>)
Div öğesi, sayfa içeriğinize daha fazla yapı eklemek için kullanabileceğiniz genel bir kapsayıcıdır. Örneğin, bir div öğesinde birlikte benzer bir amaca hizmet eden birkaç paragraf veya başlığı gruplandırabilirsiniz. Tipik olarak, div elemanları şöyle şeyler için kullanılır:
- Sayfa üstbilgileri ve altbilgileri
- İçerik sütunları ve kenar çubukları
- Metin akışı içindeki vurgulanan kutular
- Sayfanın reklam noktaları gibi belirli bir amacı olan alanlar
- Resim galerileri
Div öğelerinize sınıf ve / veya id özellikleri ekleyerek, div’leri stillendirmek ve konumlandırmak için CSS’yi kullanabilirsiniz. Bu, CSS tabanlı sayfa mizanpajlarını oluşturmak için temel oluşturur.
Sayfadaki kenar çubuğunun içeriğini içermek için bir div kullanan örnek:
|
1 2 3 4 5 6 7 |
<div id = "sidebar"> <h1> Kenar Çubuğu Başlığı </h1> <p> Kenar çubuğu metni </p> <p> Daha fazla kenar çubuğu metni </p> </div> |
Bağlantı Etiketi (<a>)
Bir web sayfasındaki en önemli öğelerden biri olan< a>, diğer içeriğe bağlantılar oluşturmanıza olanak sağlayan etikettir. İçerik, kendi sitenizde veya başka bir sitede olabilir.
Bir bağlantı oluşturmak için, bağlantı için kullanmak istediğiniz içeriğin etrafına <a> ve </a> etiketleri sarın ve bağlantı yapılacak URL’yi <a> etiketinin href özniteliğine sağlayın.
www.yazilimkodlama.com’a bağlanan bir metni nasıl oluşturacağınız:
|
1 2 3 |
<a href="http://www.yazilimkodlama.com/">Sitemi ziyaret edin!</a> |
Resim Etiketi (<img>)
<img> öğesi görüntüleri web sayfalarınıza eklemenizi sağlar. Bir resim eklemek için önce resmi web sunucunuza yükleyin, sonra yüklenen resim dosya adına başvurmak için bir <img> etiketi kullanın.
İşte bir örnek:
|
1 2 3 |
<img src="benimfotom.jpg" alt="Benim Fotom"> |
Buton Etiketi (<button>)
Web sitelerinizde etileşimli içerikler oluşturmak, sitenizin daha ilgi çekici olmasını sağlar. JavaScript ile birlikte güç bulan bu etiket sayfanızda kullanıcılarla etileşime girmek için kullanılır.
İşte basit bir buton örneği:
|
1 2 3 |
<button>Buraya Tıkla</button> |
Yatay çizgi (<hr>)
Yatay çizgiler, belgenin bölümlerini görsel olarak ayırmak için kullanılır. <hr> etiketi, belgedeki geçerli konumdan sağ kenar boşluğuna bir çizgi oluşturur ve çizgiyi buna göre keser.
Örneğin, aşağıda verilen örnekteki gibi iki paragraf arasında bir satır vermek isteyebilirsiniz
|
1 2 3 4 5 6 7 |
<p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> |
şimdi bana kalırsa biraz daha örnek atmalısını