11 Kasım 2012

HTML Etiketlerine Giriş

Merhabalar;

Günlük hayatta bile çok duymuşsunuzdur HTML kelimesini. İşte bu yazı HTML'nin ne olduğunu merak edip araştıranlar için. Bu yazıyla birlikte HTML'e yeni başlayanlara HTML etiketlerinin bir kısmını anlatacağım. Yazının sonunda siz de çok basitçe bir sayfa hazırlayacak hale gelebilirsiniz.

HTML ( Hyper Text Markup Language ), web sayfası oluşturmaya yarayan bir betik dilidir. HTML dosyaları server bilgisayarda .html veya .htm uzantıları ile saklanır. Bu dosyaların bir programlama dilinde olduğu gibi derlenmeye ihtiyacı yoktur. Hatta yeni başlayanlara tavsiyem, herhangi bir text dosyasında yazmanızdır. Sonra dosyanın uzantısını .html olarak değiştirip çift tıkladığınızda varsayılan browser'ınızda açılacak sayfa ile, yazdıklarınızın sonucunu görebilirsiniz.

  • Şimdi yavaş yavaş başlayalım. İlk olarak dediğim gibi bir text dosyası açın. İçine şunları yazın:

<html>
     <head>
         <title>İlk Sayfam</title>
     </head>
     <body>Sayfama Hoşgeldiniz</body>
</html>

Daha önce söylediğim gibi kaydedip belgeye çift tıkladığınızda varsayılan browserınızın sayfanızı açtığını göreceksiniz. Sayfanın browserda görülen başlığı "İlk Sayfam", içeriğindeki yazı da "Sayfama Hoşgeldiniz" 'dir. Etiketleri açıklamak gerekirse dikkatinizi çeken şey her etiketin açıldıktan sonra kapanması gerektiğidir. Bazı istisnalar dışında bu kural geçerlidir. < > işaretleri arasında yazdığımız etiket adıyla etiketi açmış oluyoruz ve </ > arasına aynı adı yazarsak etiketi kapatmış oluyoruz.

<html> <html> dosyanın başlayıp daha sonra bittiğini gösterir.
<head> </head> bu etiketlerin arasında sayfa hakkında bilgiler ve ayrıca meta etiketi ve yukarıda görüldüğü gibi title etiketi yer alır. Parametre almaz.
<title> </title> etiketleri arasında sayfanın browserdaki adı yazılır. Kısa ve sayfayı tam olarak ifade edebilen bir başlık olmalıdır.
<body> </body> etiketleri arasında ekranda gösterilecekleri yazıyoruz.

  • Şimdi biraz metin biçimlendirmeden bahsedeceğim. Sayfa içeriğindeki yazımıza bir başlık yapalım ve boyutunu istediğimiz gibi ayarlayalım. Text dosyanızı açın ve içine şunları yazın:

<html>
     <head>
          <title>İlk Sayfam</title>
     </head>
     <body>
          <h1>Başlık</h1>
          <h2>Başlık</h2>
          <h3>Başlık</h3> 
          <h4>Başlık</h4>
          <h4>Başlık</h4>
          <h5>Başlık</h5>
          <h6>Başlık</h6>Sayfama Hoşgeldiniz
    </body>
</html>

Bu yazdıklarımızı browserdaki sayfamızda şu şekilde görüyoruz:



Bu da demek oluyor ki <h1> </h1> etiketindeki numarayı değiştirmekle yazı boyutunu değiştirebiliriz. 1'den 6'ya doğru yazı boyutu azalmaktadır. 1'den 6'ya kadar herhangi bir etiketi kullanarak arasına yazdığınız yazılar bu rakama göre boyut alacaktır.







  • Bununla birlikte yazılarımızı başka özelliklerle de yazabiliriz. Örneğin text dosyanıza şunları yazın:
<html>
       <head>
           <title>İlk Sayfam</title>
       </head>
       <body> Sayfama Hoşgeldiniz <br/> 
            <b>kalın <br/> </b>
            <i>italik <br/> </i>
            <u>altı çizili <br/> </u>
            <tt>sabit genişlikli yazı tipi <br/> </tt>
            <del>üstü çizili <br/> </del>
            <big>büyük <br/> </big>
            <small>küçük  </small>
            <sub>alt indis  </sub>
            <sup>üst indis  </sup>
      </body>
</html> 



Yandaki çıktımızda görüldüğü gibi yukarıdaki son örnekte kullandığım etiketlerin ne işe yaradığını göstermek istedim. Burada farkettiyseniz çoğu yerde satır atlandı. Satır atlama, <br/> etiketi ile yapılır. Farkettiyseniz bu etiketin kapanışı yok. Bu yüzden satır atlayacağınız yerde <br/> yazmanız yeterlidir.


Daha önce kullanmadığım bir etiket de paragraf etiketi. <p> </p> şeklinde açılıp kapanır. Arasına yazılan yazının başka bir paragrafta yazdırılmasını sağlar.

Başlı başına kullanılan biçimlendirme etiketleri bunlar arkadaşlar. HTML serisine sonraki yazılarımda da devam edeceğim.

Yararlı olması dileğiyle. Hoşçakalın.


Hiç yorum yok:

Yorum Gönder