Başlangıçta etiketlerin kullanım alanlarını anlamıyor olabilirsiniz ama sorun etmeyin, herşey zamanla kafanızda oturacaktır.
Tüm HTML sayfaları <!DOCTYPE> tanımı ile başlarlar. Bu tanım sayfanın HTML sürümünü temsil eder ve diğer tüm html etiketleri <html> etiketi içerisinde yazılmalıdır. Son kullanıcının göreceği her şey <body> etiketi içerisinde yazılır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
İçerik Kısmı Buraya!
</body>
</html>
Başlıklar <h1> ile <h6> etiketleri arasında tanımlanır.
<h1> en önemli başlıklar için, <h6> daha az öneme sahip başlıklar için kullanılır.
<h1>Başlık Örneği</h1>
<h2>Başlık Örneği</h2>
<h3>Başlık Örneği</h3>
<h4>Başlık Örneği</h4>
<h5>Başlık Örneği</h5>
<h6>Başlık Örneği</h6>
Paragraflar için <p> etiketi kullanılır.
<p>Bu kısma bir paragraf yazabilirsiniz.</p>
HTML'de bir adrese bağlantı verirken <a> etiketi kullanılır. Bu örnekte href bağlantıya tıklandığında gidilecek adresi belirlemek için kullanılır. Nitelikler, HTML etiketleri hakkında daha fazla bilgiyi belirlemek için kullanılır.
<a href="https://eminylmz.dev">eminylmz blog sayfasını ziyaret et</a>
HTML'de resimleri göstermek için <img>
etiket kullanılır. Hatırlarsanız, bazı etiketlerin kendi kendine kapandığından bahsetmiştik, bu etiket onlara bir örnektir. Ve nitelikler olmadan, <img>
etiketi hiçbir şey göstermez.
<img>
etiketinde resim yolunu belirlemek için src=""
, resim yoksa gözükecek alternatif yazı için alt=""
, genişlik ve yüksekliği ayarlamak için width=""
ve height=""
, üzerine gelince açıklama çıkartmak için title=""
niteliği kullanılır. Hepsini bir araya toplayıp test edecek olursak;
<img src="test.png" alt="Resim yoksa gözükür" title="Bu başlık üzerine gelince gözükür sadece" width="300" height="200">
HTML'de listeler <ul> ve <ol> etiketleri arasında <li> içerisinde tanımlanır. Örnek vermek gerekirse;
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Erik</li>
</ul>
Daha fazlasına birlikte ileriki derslerde göz atacağız.
Sorular (0)