HTML Etiketleri

Gold

Meryem Işık

ABONE OL

News

0 yorum

2,213 okunma

Okunuyor HTML Etiketleri

HTML derslerine kadlığımız yerden devam edelim. Geçen dersimizde Body Etiketi ve Parametrelerini incelemiştik. Bu dersimizde body etiketi içinde kullanılan HTML Etiketlerini inceleyeceğiz.

İçindekiler

Başlık Etiketleri

HTML’ de h1, h2, h3, h4, h5 ve h6 olmak üzere toplamda 6 adet başlık etiketi bulunuyor. Her birinin yazı boyutu birbirinden farklı. En küçük boyuta sahip başlık etiketi h6, en büyük boyuta sahip başlık etiketi ise h1 etiketidir. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
        <h1>H1 etiketi </h1>
        <h2>H2 etiketi </h2>
        <h3>H3 etiketi </h3>
        <h4>H4 etiketi </h4>
        <h5>H5 etiketi </h5>
        <h6>H6 etiketi </h6>
   </body>
</html>

Örnekte gördüğümüz üzere tüm başlık etiketlerinin boyutları birbirinden farklı.

<a> Etiketi

<a> etiketi bağlantı metinleri oluşturmak için kullanılır, bağlantılar başka sayfalara geçiş için kullanılır. Bu etiketin en önemli özelliği href özelliğidir. Bu özellik ile bağlantı oluşturmak istediğimiz sayfanın URL’ i belirtilir. Bağlantının farklı sayfada açılmasını istiyorsak target=”_blank” özelliğini tanımlamalıyız. CSS kullanarak linkleri biçimlendirebiliriz.

<a href="https://www.webodasi.com">Web Odası</a>

<a href="https://www.webodasi.com" target="_blank">Web Odası</a>

İlk örnekte webodasi.com sitesi aynı sayfada, ikinci örnekte ise farklı bir sayfada açılır.

Etiketi

P etiketi tarayıcı tarafından tanımlandığı zaman otomatik olarak boşluk (margin) verir. Yazmak istediğimiz metini p etiketi içine yazmalıyız. CSS kullanarak paragrafımızı biçimlendirebiliriz. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
      <p>Paragraf metniniz bu etiketler arasına yazılır.</p>
      <p>Paragraf metniniz bu etiketler arasına yazılır.</p>
   </body>
</html>

Etiketi

etiketi yazımızı kalın yazmamızı sağlar. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
      <p>Bu yazı  normal bir yazıdır.</p>
      <b> Bu metin b etiketi ile yazılmıştır </b>
   </body>
</html>

Etiketi

etiketi ile aynı görevi görür yani yazıyı kalın yazmamızı sağlar. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
    <p>Bu yazı  normal bir yazıdır.</p>
      <b> Bu metin b etiketi içine yazılmıştır </b>
      <br>
     <strong>Bu metin strong etiketi ile yazılmıştır.</strong>
   </body>
</html>

b etiketi ile strong etiketi arasındaki fark ne diye merak edebilirsiniz. Strong etiketi kelimenin gücünü ve önemini vurgulamak için kullanılır. Arama motorları tüm sayfayı taramak yerine strong etiketi ile tanımlanmış içeriklere bakacak şekilde hareket eder. Biz fazla sayıda b etiketi kullansak bile içeriğin arama motorlarında görüntülenmesini sağlayamayız. Bu doğrultuda strong etiketini kullanmamız gerekiyor.

Etiketi

Kapanışı olmayan diğer bir HTML Etiketlerinden birisidir. Metin içinde satır sonu belirler yani metnin bir alt satıra geçmesini sağlar. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
    <p>Bu <br>bir <br> deneme <br>yazısıdır.</p>    
   </body>
</html>

<hr> Etiketi

Tarayıcı ekranında yatay bir çizgi oluşturulmasını sağlar. Boyutunu, rengini vs CSS ile biçimlendirebiliriz. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
      <p>Bu bir deneme yazısıdır.</p>
	<hr>
   </body>
</html>

hr etiketini p etiketinin altında kullandığımız için çizgiyi p etiketinin altında oluşturdu. Üstte kullansaydık çizgimiz üstte oluşacaktı.

<img> Etiketi

HTML’in kapatılmayan diğer bir etiketidir. Hazırlamış olduğumuz siteye resim yüklemek isteyebiliriz. img etiketi sayesinde bu isteğimizi yerine getirebiliyoruz. Nasıl kullanıldığına bakalım;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
      <img src="resim1.jpg">
   </body>
</html>

Eğer resim doğru bir şekilde görüntülenmiyorsa resim yolu yanlış olabilir ya da uzantısı farklı olabilir. Bunlara dikkat edelim. img etiketinde kullanılan bazı parametreler var. Bunlar;

Width, eklenecek resmin pixcel cinsinde genişliğini belirtir.
Height, eklenecek resmin pixcel cinsinden yüksekliğini belirtir.
Border, eklenecek resme çerçeve çizilip pixcel cinsinden kalınlığını belirlemek için kullanılır.
Alt, fare ile resmin üzerine geldiğimizde yazılmasını istediğimiz metni belirtmek için ya da resim yüklenmediği zaman gösterilcek yazı için kullanılır.
Align, eklenecek olan resmin nasıl hizalanacağını belirtmek için kullanılır. Left ile kullanıldığı zaman resim sağa hizalı, right ile kullanıldığında resim sola hizalı, center ile kullanıldığında ise resim ortalanmış olarak sayfaya eklenecektir.

<pre> Etiketi

pre’ nin açılımı preview’ dir ve dilimizde ön izleme anlamına gelmekte. Editörde kodu nasıl yazdıysak tarayıcı ekranında o şekilde görüntülenmesini sağlar. Normalde yazdığımız bir yazıda alt satıra geçmek için br etiketini kullanıyoruz. pre etiketi sayesinde yazdığımız yazının tarayıcı ekranında nasıl görüntülenmesini istiyorsak o şekilde yazabiliyoruz. Kısacası yazdığımız kodların ön izlemesini verir. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>
      <pre>
          Ben
            yazımı
                istediğim 
                    gibi
                        yazabilirim.
      </pre>
   </body>
</html>

Umarım bloğumuzu faydalı bulmuşsunuzdur bugün sizlere HTML Etiketleri ile alakalı elimizden geldiğince bilgi vermeye çalıştık sürçü lisan ettiysek affola diyerek cümlemize son noktayı koyuyoruz.