Tahap 6: Beberapa lebih elemen ~ SERSAN

Apakah Anda berhasil membuat beberapa halaman Anda sendiri? Jika tidak, berikut adalah contohnya:

 <html> <head> <title>My website</title> </head> <body> <h1>A Heading</h1> <p>text, text text, text</p> <h2>Subhead</h2> <p>text, text text, text</p> </body> </html>

Sekarang apa?

Sekarang saatnya untuk mempelajari tujuh elemen baru.
Dengan cara yang sama Anda menekankan teks dengan menempatkan antara tag openning  dan tag penutup  , Anda dapat memberikan penekanan yang lebih kuat dengan menggunakan tag openning  dan tag penutup  .
Contoh 1:

 <strong>Stronger emphasis.</strong>
 <strong>Stronger emphasis.</strong>

Akan terlihat seperti ini di browser:

Penekanan kuat.

Demikian juga, Anda dapat membuat teks Anda yang lebih kecil menggunakan small :
Contoh 2:

 <small>This should be in small.</small>
 <small>This should be in small.</small>

Akan terlihat seperti ini di browser:

Ini harus dalam kecil.

Dapatkah saya menggunakan beberapa elemen pada saat yang sama?

Anda dapat dengan mudah menggunakan beberapa elemen pada saat yang sama selama Anda menghindari tumpang tindih elemen. Hal ini paling baik diilustrasikan dengan sebuah contoh:
Contoh 3:
Jika Anda ingin menekankan teks kecil, harus dilakukan seperti ini:

 <em><small>Emphasised small text</small></em>
 <em><small>Emphasised small text</small></em>

Dan TIDAK seperti ini:

 <em><small>Emphasise small text</em></small>
 <em><small>Emphasise small text</em></small>

Perbedaannya adalah bahwa dalam contoh pertama, kami menutup tag pertama kita terakhir dibuka. Dengan cara ini kita menghindari membingungkan diri kita sendiri maupun browser.

Lebih elemen!

Seperti disebutkan dalam Tahap 3 ada unsur-unsur yang dibuka dan ditutup pada tag yang sama. Ini yang disebut elemen kosong tidak terhubung ke suatu bagian tertentu dalam teks tetapi lebih merupakan label yang terisolasi. Sebuah contoh dari tag adalah   yang menciptakan satu baris paksa:
Contoh 4:

 Some text<br /> and some more text in a new line
 Some text<br /> and some more text in a new line

Akan terlihat seperti ini di browser:

Beberapa teks
dan beberapa lagi teks dalam baris baru

Perhatikan bahwa tag tersebut ditulis sebagai kontraksi pembukaan dan penutupan tag dengan ruang kosong dan garis miring di akhir:   .
Elemen lain yang dibuka dan ditutup pada tag sama <hr /> yang digunakan untuk menggambar garis horizontal ("jam" singkatan dari "horizontal rule"):
Contoh 5:

 <hr />
 <hr />

Akan terlihat seperti ini di browser:

Contoh unsur-unsur yang perlu kedua tag pembuka dan tag penutup - sebagai elemen kebanyakan - adalah ul , ol dan li . Unsur-unsur ini digunakan bila Anda ingin membuat daftar.
ul adalah singkatan dari "daftar unordered" dan peluru sisipan untuk setiap item daftar. ol adalah singkatan dari "daftar teratur" dan nomor masing-masing item daftar. Untuk membuat item dalam daftar menggunakan li tag ("item daftar"). Bingung? Lihat contoh:
Contoh 7:

 <ul> <li>A list item</li> <li>Another list item</li> </ul>
 <ul> <li>A list item</li> <li>Another list item</li> </ul>

akan terlihat seperti ini di browser:

Sebuah item daftar
Item lain daftar

Contoh 8:

 <ol> <li>First list item</li> <li>Second list item</li> </ol>
 <ol> <li>First list item</li> <li>Second list item</li> </ol>

akan terlihat seperti ini di browser:

Pertama daftar item
Kedua daftar item

Fiuh! Apakah itu semua?

Itu saja untuk saat ini. Sekali lagi, percobaan dan membuat halaman Anda sendiri menggunakan beberapa dari tujuh elemen baru yang Anda pelajari dalam Tahap ini:

 <strong>Stronger emphasis</strong> <small>Small text</small> <br /> Line shift <hr /> Horizontal line <ul>List</ul> <ol>Ordered list</ol> <li>List item</li>
 <strong>Stronger emphasis</strong> <small>Small text</small> <br /> Line shift <hr /> Horizontal line <ul>List</ul> <ol>Ordered list</ol> <li>List item</li>

These icons link to social bookmarking sites where readers can share and discover new web pages.