Anasayfa / Web Tasarım / HTML / HTML İçerik Gruplama Etiketleri (Ders 6)

HTML İçerik Gruplama Etiketleri (Ders 6)

<p>

Yazımızda paragraflar oluşturmak için kullanırız. Metin üzerinde, paragraflar arasında boşluk koyma gibi bazı yeteneklere sahiptir.

<hr>

Sayfamıza yatay çizgi eklemek için kullandığımız etikettir. Kapanma etiketi yoktur. Alabileceği bazı özellikler:

  • Width: Çizginin genişliğini belirler.
  • Align: Çizginin hizalanacağı yeri belirtir.
  • Color: Çizginin rengini belirlemeye yarar.

<br>

Yazımıza bir alt satırda devam etmek için kullanılır. Kapanma etiketi yoktur. <br> etiketi kullanılmadığı halde yazımız tek satır halinde devam edecektir. (Özel durumlar hariç. Örneğin <pre> etiketi)

<pre>

Yazımızın editörde yazıldığı gibi görünmesini sağlar. Yani kod yazarken yazıları nasıl yazdıysanız öyle gözükecektir. Gereksiz <br> kullanımını  azaltır.

<figure>

Sayfamıza medya dosyası eklememizi sağlar. <figure> etiketinin arasına video kaydı, fotoğraf, ses kaydı ekleyebilirsiniz.

  • İmg: Figure etiketinin içine resim eklememize olanak sağlar.
  • Audio: Figure etiketinin içine ses dosyası eklememize olanak sağlar.
  • Video: Figure etiketinin içine video eklememize olanak sağlar.
  • Track: <audio> ve <video> etiketleri ile eklenmiş olan dosyalara metin eklememizi sağlar. Buna verilebilecek en iyi örnek filmlerde kullanılan altyazı seçeneği.
  • Source: <img>, <audio> vs. etiketlerin arasına yazılır. Kaynak dosyasını ve ona ait birkaç özelliği belirtir.

<figcaption>

<figure> kısmının açıklamasını sağlamak için gösterilen medyanın altına bir altyazı ekler. Eklenen altyazı medyanın görsel kısmını etkilemez.

<div>

HTML-CSS dillerinin ortak kullanımının sık olduğu bölümdür. Bu etiket içindekileri kapsayan soyut bir etikettir. Css derslerimizde daha detaylı anlatılacaktır.

Ek Bilgi: Html dosyalarına yorum satırı eklemek için ‘<!–‘ ve ‘–>’ kullanılır.

Öğrendiklerimizi bir örnek ile pekiştirelim.

 <p>Bu bir paragraftır. <br>Burası paragrafın 2. satırıdır. </p>
<hr width="70%" color="red" align center>
<p>Burası 2. paragraftır.</p>
<pre>
Bu yazıda
'pre' etiketi
kullanılmıştır.
</pre>
<figure>
   <img src="resim_konumu.uzantısı">
   <figcaption>
      Resimin açıklama kısmı
   </figcaption>
</figure>
<p>Figure etiketi içerisinde img etiketine yapılanlar video ve audio etiketlerine de yapılabilir.</p> 

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

HTML Form Oluşturma 1. Kısım (Ders 9)

Bir web sayfasında formlar ile çalışmak için sadece html dilini bilmek yetmez. Bunun nedenini öğrenmek …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir