Web Programlama

Body İçerisinde Yer Alan Temel HTML Etiketleri

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

Başlıklar (Headings)

HTML metni içinde H1 ile H6 aralığında ölçeklendirilmiş 6 farklı düzeyde başlık kullanılabilir. Burada H1 en büyük başlığı, H6 ise en küçük başlığı simgelemektedir.

Bir başlık elemanının genel yazılış biçimi,

<Hx>Başlık Metni</Hx>

şeklindedir. Burada x, 1 ile 6 arasında bir tamsayıdır ve başlığın düzeyini belirlemektedir.

HTML kodunuz içinde başlık düzeylerini atlatmamaya dikkat ediniz. Örneğin H1 ile başlayıp daha sonra H4'ü kullanmayın. Düzeyler birbirini sırasıyla izlemesi, arama motorları tarafından daha iyi bir konumda endekslenmeniz için de önemlidir.

Paragraflar (Paragraphs)

Oluşturacağınız Web sayfası üzerine yerleştireceğiniz metni ayrı paragraflar şeklinde ifade etmek için <p> ve </p> etiketlerini kullanmalısınız.

Listeler (Lists)

HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,

Numaralanmamış liste
Numaralanmış liste
Tanım listesi

şeklindedir.

Numaralanmamış liste

Numaralanmamış listeyi oluşturmak için <ul> ve </ul> etiketleri kullanılır. Bu etiketler arasına liste elemanlarını yerleştirmek için <li> etiketi kullanılır. Bu etiketi izleyen yere liste elemanı yerleştirilmelidir. <li> etiketinin </li> etiketiyle kapatılması zorunlu değildir.

Örneğin, aşağıdaki HTML kodunu birlikte oluşturalım:

<html>
  <head>
    <title>BASİT BİR HTML METNİ</title>
  </head>
  <body>
       <h3>Programlama Dilleri</h3>
        <ul>
         <li>Fortran</li>
         <li>Cobol</li>
         <li>Basic</li>
         <li>Pascal</li>
         <li>C/C++</li>
        </ul>
    </body>
  </html>

Numaralanmış Listeler

Numaralanmış liste (numbered list ya da diğer adı ile ordered list (sıralanmış liste)) gerçekte numaralanmamış liste ile benzer yapıdadır. Tek fark, bu tip bir listede <ol> etiket 'ının kullanılmasıdır. Diğer bir fark ise çıktıda görülür. Liste elemanlarına otomatik olarak bir numara verilmektedir.

Aşağıdaki HTML kodunu oluşturunuz:

<html>
  <head>
    <title>BASİT BİR HTML METNİ</title>
  </head>
  <body>
       <h3>Programlama Dilleri</h3>
       <ol>
        <li>Fortran</li>
        <li>Cobol</li>
        <li>Basic</li>
        <li>Pascal</li>
        <li>C/C++</li>
       </ol>
    </body>
</html>

İç İçe Listeler

Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir.

<html>
  <head>
    <title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
  </head>
  <body>   
      <h3>TÜRKİYE-ŞEHİRLER</h3>
       <ul>
          <li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li>
              <ul>
                 <li>Fatih</li>
                 <li>Bakırköy</li>
                 <li>Kadıköy</li>
              </ul>
          <li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li>
              <ul>
                <li>Çankaya</li>
                <li>Yenimahalle</li>
        </ul>
    </ul>
  </body>
</html>

Sınava Gir