HTML Temel Yapı! (Adım Adım Açıklama)
Bu örnekler html nin temel özelliklerini gösterir.
Html Belgeleri
Tüm html belgeleri başlamadan önce bir html belge türü etiketi ile başlamalıdır:
<!DOCTYPE html>HTML belgesi kendi etiketi ile başlar ve biter. Bütün html kodlar bu iki etiket arasına yazılır.
<html> -- ile başlar.
</html> -- ile biter.Html belgesinin görünen kısmı;
<body>
-------
--------
----------
</body>etiketler arasındadır.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>See the Pen html belge formatı by ArmyYazılım (@armyyazilim) on CodePen.
HTML Başlıkları
HTML başlıkları;
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>See the Pen Html başlıkları by ArmyYazılım (@armyyazilim) on CodePen.
h1 den başlar ve h6 ile biter. h1 en önemli başlıklar için h6’da en az öneme sahip başlıklar için kullanılır.
HTML Paragrafları
Html paragrafları;
<p>paragraf</p>Etiketleri arasına yazılan yazıları kapsar.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>See the Pen html paragraf by ArmyYazılım (@armyyazilim) on CodePen.
HTML Bağlantıları
Html bağlantıları;
<a href="bağlantı linki">Bağlantı başlığı</a>etiketiyle tanımlandırılmıştır.
Örnek olarak;
<!DOCTYPE html>
<html>
<body>
<h2>HTML Linkleri</h2>
<p>Html link kullanımı aşağıdaki şekildedir.</p>
<a href="https://www.armyyazilim.com">ArmyYazılım</a>
</body>
</html>See the Pen html link by ArmyYazılım (@armyyazilim) on CodePen.
Bağlantının hedefi, href nitelikte belirtildi .
Nitelikler, HTML öğeleri hakkında ek bilgi sağlamak için kullanılır.
Daha sonraki bir bölümde nitelikler hakkında daha fazla bilgi edineceksiniz.
HTML Görüntüleri
HTML görüntüleri <img>etiketi ile tanımlanır .
Kaynak dosya ( src), alternatif metin ( alt), width ve heightözellikler olarak sağlandı:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Resimler</h2>
<p>Resimleri html dosyamızda bu şekilde gösteririz:</p>
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-2.png" alt="Resim açıklaması" width="300" height="140">
</body>
</html>See the Pen html resim by ArmyYazılım (@armyyazilim) on CodePen.
HTML Düğmeleri
HTML düğmeleri şu <button> etiketle tanımlanmıştır :
<button>Buton</button>See the Pen html buton by ArmyYazılım (@armyyazilim) on CodePen.
HTML Listeleri
HTML listeleri <ul>(sıralanmamış / madde işareti listesi) veya <ol>(sıralı / numaralı liste) etiketiyle, ardından <li> etiketlerle (liste öğeleri) tanımlanır:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>See the Pen html listeleme by ArmyYazılım (@armyyazilim) on CodePen.
Temel html etiketleri bunlardır ancak onlarca html etiketleri vardır. Bu onlarcasını anlamanız için ilk önce bu etiketleri anlamalısınız.
Diğer html makalelerinde görüşmek üzere…
İlginizi çekebilir…
WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …