Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 101 Ders Programı
Sınava Gir

Çok Kullanılan Body Etiketleri

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

<pre> etiketi

Sabit genişlikli bir yazıtipi içinde bir metin oluşturmak istediğiniz takdirde, HTML'in <pre> </pre> etiketini kullanabilirsiniz. pre terimi, İngilizce preformatted (önceden biçimlendirilmiş) sözcüğünden alınmıştır. Bu etiket ayrıca metin içindeki boşlukları, satır başlarını ve tab'ları da anlamlı hale getirir.

<pre> etiketi, width özelliğiyle birlikte kullanılarak bir satır içinde yer alabilecek en fazla karakter sayısı da belirlenebilir. <pre> </pre> etiketleri arasında hiperlinkler (hyperlink) kullanılabilir. Bununla birlikte, <pre></pre> etiketleri arasında, diğer etiketlerin kullanılmasından kaçınmak gerekir.

Aşağıdaki örnekte ülkeler ve nüfusları önceden belirlenmiş bir biçimde web sayfası üzerine yerleştirilmek isteniyor. HTML kodunda ilerde daha ayrıntılı olarak ele alacağımız hiperlink oluşturma ve bu bağlantı tıklandığı takdirde buna bağlı dosyayı ekranda görüntülemeyle ilişkili küçük bir örnek de yer almaktadır.

Aşağıdaki HTML kodu çağrılınca ekranda alt çizgili ve mavi renkte bir "DAHA FAZLA BİLGİ İÇİN" ifadesi belirecektir. Bu bir hiperlink'tir ve tıklandığında X.htm dosyası çağrılmaktadır.

<pre> etiketinin kullanımını hiperlink ile birlikte anlatan örneğimiz aşağıdadır:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
  </head>
  
<body>   
    <h3>TÜRKİYE-ŞEHİRLER</h3>
    <h3>ÜLKELER VE NÜFUSLARI</h3>
<pre>
ÜLKE ADI       NÜFUSU (MİLYON KİŞİ)
TÜRKİYE           65  
AVUSTURYA         8
ABD               230
ALMANYA           80
<a href="X.htm">DAHA FAZLA BİLGİ İÇİN</a>
</pre>
</body>

</html>

Yukardaki sayfa ekrana geldiği zaman, fareyle DAHA FAZLA BİLGİ İÇİN hiperlinkini tıkladığınızda, X.htm adlı HTML dosyası çağırılacaktır.

Aşağıda ise, X.htm adlı HTML dosyasının içeriği görülmektedir:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
    </head>
  <body>
   <h3>TÜRKİYE-ŞEHİRLER</h3>
<h3>ÜLKELER VE NÜFUSLARI</h3>
    <pre>
     ÜLKE ADI       NÜFUSU (MİLYON KİŞİ)       KBMG($)     KITA
     TÜRKİYE        65                         3100        AVRUPA-ASYA          
     AVUSTURYA      8                          25000       AVRUPA
     ABD            230                        32000       KUZEY AMERİKA
     ALMANYA        80                         29000       AVRUPA
  </body>
</html>

 

<br> etiketI

<br> etiketi, bulunduğu konumdan itibaren bir satırı sona erdirerek yeni bir satırın başına geçilmesini sağlar.

Aşağıdaki örnek kod incelenerek <br> etiketinin kullanımı görülebilir:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
    </head>
  <body>   
    <h3>ÜLKELER VE NÜFUSLARI</h3>
   <p>Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
   Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel 
ülkelerinden biridir.</p>
  <p>Macaristan bir diğer Orta Avrupa <br>ülkesidir.
  Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke 
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
    </body>
</html>

 

<hr> etiketi

<hr> etiketi, tarayıcı penceresinde yatay bir çizgi üretir. Bu çizginin uzunluğu kod içinde belirtilebilir.

<hr> etiketini nasıl kullanacağınızı aşağıdaki örneğimizle görelim:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
    </head>
  <body>   
    <h3>ÜLKELER VE NÜFUSLARI</h3>
   <p><hr>
   Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
   Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel 
ülkelerinden biridir.</p>
  <p><hr>
  Macaristan bir diğer Orta Avrupa <br>ülkesidir.
  Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke 
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
 </body>
</html>

 

<em> etiketi

Bir metnin istenilen kısmını belirgin hale getirmek için kullanılır.<em> ve </em> etiketleri arasındaki kısım tipik olarak italik biçimde görüntülenir.

<em> etiketinin nasıl kullanıldığını görmek için aşağıdaki örneği inceleyelim:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ALGORİTMA TANIMI</title>
    </head>
  <body>   
    <dfn>ALGORİTMA </dfn>
    <p>Algoritma bir problemi çözmek için izlenmesi gereken<em> işlem adımları kümesidir.</em></p>
    </body>
</html>

<em> etiketi etkisindeki kısım “işlem adımları kümesidir” şeklinde italik olarak belirgin hale getirilmiştir.

 

<s> ve <strike> etiketleri

Uygulandıkları metnin üzerine bir çizgi çizilmesini sağlarlar.

<s> ve <strike> kullanımı için aşağıdaki örneği inceleyebilirsiniz:

<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
    </head>
  <body>
    <h3> TEKNOKRATLAR </h3> 
     <s>Bütün mimarlar</s> yüksek, mühendisler de <br>
     Bir sen kaldın<strike> alçak mimar</strike> ey Sinan Usta!<br>
Cemal Süreya
    </body>
  </html>

 

<strong> etiketi

İşaret edilen metni özellikle vurgulamak için kullanılır. Bu vurgulama bold (koyu) yazı karakteriyle gerçekleştirilir.

<strong> etiketinin kullanımını aşağıdaki örnekten görebilirsiniz.

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÖRNEKLER</title>
    </head>
  <body>
    <h3> DİVAN EDEBİYATI </h3> 
    <dfn>FUZULİ</dfn><br><br>
    <strong>Öyle sermestemki idrak etmezem dünya nedür<br>
            Men kimem saki olan kimdür mey-i sahbah nedür</strong>
    </body>
</html>

<u> etiketi

İşaretlediği metnin altına bir alt çizgi çekilmesini sağlar.

<u> etiketinin nasıl kullanıldığını aşağıdaki örnekten görebilirsiniz:

<html>
  <head>
  <meta charset="UTF-8">
  <title>ÖRNEKLER</title>
    </head>
  <body>
    <h3> ÖNCE <u>DÜRÜST</u> OLUNUZ </h3> 
     <h3>BUNUN DIŞINDAKİ <u>HER ŞEY İKİNCİ PLANDADIR</u> </h3> 
  </body>    
  </html>

Sınava Gir