4.1 a, href etiketleri

Peki yine de unutmadık ki sizlerden bir Java programcısı hazırlıyoruz, yani sadece 5 etiket öğrenmeniz yeterli.

İlk olarak, bu, metni hipermetne dönüştüren en önemli etikettir - bağlantı . HTML'de bağlantılar oluşturmak için bir etiket <a>(çapadan, bağlantıdan) kullanılır.

Varsayılan bağlantı şöyle görünür:

<a href="link-address">link text</a>

Burada mavi , kullanıcının gördüğü metindir ve yeşil , bağlantı metnine tıklandığında gideceği adrestir (bağlantı).

Bağlantılar içeren tipik bir HTML belgesi şöyle görünür:


<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

Hayır, genellikle şöyle görünür:



<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

Dünya mükemmel değil.

4.2 img etiketi ve src özelliği

Bir HTML sayfasına resim eklemek için bir etiket <img>(resim kelimesinden) kullanılır. Bu tek bir etikettir, kapanış etiketi yoktur. Etiketin genel görünümü:

<img src="image link">

Her şey çok basit. Bir resmi HTML belgenizde görüntülemek için, o resmin bağlantısını bilmeniz ve img. Deneyin, beğeneceksiniz.

4.3 Tablo öğesi

Ayrıca, bir HTML sayfası veri içeren bir tablo içerebilir. Ama burada düşünürseniz, tek bir etiketle idare edemezsiniz. Sonuçta, bir tablonun bir başlığı, satırları, sütunları ve hücreleri vardır. Hepsi kendi etiketleriyle geldi:

  • <table>- tablonun kendisi;
  • <tr>( table satır ) – satır tablosu;
  • <th>( table h başlık ) – tablo başlık hücresi;
  • <td>( t mümkün veri ) – tablo hücresi.

İşte 3'e 3'lük bir tablonun nasıl görüneceği html(fazladan bir başlık satırı ile)


<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

Şimdi tablolar nadiren kullanılmasına rağmen. Mesele şu ki, bir sayfayı bir telefondan görüntülerken, tabloyu farklı bir şekilde görüntülemek yararlı olabilir (ekrana sığmaz). Ancak yine de tabloların nasıl düzenlendiğini bilmeniz gerekiyor.

4.4 kimlik ve ad nitelikleri

Ve iki önemli nokta daha vardır: idve nitelikler name. Bunlar niteliklerdir, etiketler değildir, ancak çok sık kullanılırlar.

idetiket niteliği, ona belgenin tamamı içinde benzersiz olan bir ad vermenizi sağlar . Bu, HTML belgesinde verilen etiketin değerini veya parametrelerini değiştiren bazı JavaScript varsa kullanışlıdır. Ardından, unique yardımıyla idistediğiniz etikete doğru bir şekilde başvurabilirsiniz.

Bir öznitelik namebenzer bir işlevi yerine getirir, ancak değerinin sayfa içinde benzersiz olması gerekmez. Yani teorik olarak aynı ada sahip birkaç etiket olabilir. Bu, öğe gruplarıyla çalışmayı kolaylaştırmak için yapılır.

Örneğin, bir sayfada, her birinde yalnızca bir öğe seçebileceğiniz birkaç liste vardır. Ardından, listede yeni bir öğe seçerken, listenin kalan öğelerinin seçimini sıfırlamanız gerekir. Ancak diğer listelere dokunmayın. Aynı listenin tüm öğeleri aynı ada sahipse bu kolayca yapılabilir.

Herhangi bir etiket hem niteliklere idhem de name. Örnek:


<img id="image123" name="avatar" src="link to picture">