HTML Temel Yapı! (Adım Adım Açıklama)

#HTML

Html temel kodları, html başlık ekleme, html paragraf ekleme, html buton ekleme, html link ekleme, html resim ekleme, html liste etiketleri,

Twitter Facebook WhatsApp

HTML Temel Örnekleri! (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 …

Bir cevap yazın Cevabı iptal et

İçerik Metası