Pelajaran 6-Belajar HTML
Apakah Anda berhasil membuat beberapa halaman sendiri? Jika tidak, berikut ini 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>
<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 meletakkannya di antara tag pembuka <em> dan tag penutup </em>, Anda dapat memberikan penekanan yang lebih kuat dengan menggunakan tag pembuka <strong> dan tag penutup </strong>.
Dengan cara yang sama Anda menekankan teks dengan meletakkannya di antara tag pembuka <em> dan tag penutup </em>, Anda dapat memberikan penekanan yang lebih kuat dengan menggunakan tag pembuka <strong> dan tag penutup </strong>.
Contoh 1:
<strong>Stronger emphasis.</strong>
Akan terlihat seperti ini di browser:
Stronger emphasis
Demikian juga, Anda dapat membuat teks Anda lebih kecil menggunakan small:
Contoh 2:
Contoh 2:
<small>This should be in small.</small>
Akan terlihat seperti ini di browser:
This should be in small.
Bisakah saya menggunakan beberapa elemen secara bersamaan?
Anda dapat dengan mudah menggunakan beberapa elemen pada saat yang sama selama Anda menghindari elemen yang tumpang tindih . Ini paling baik diilustrasikan dengan sebuah contoh:
Contoh 3:
Jika Anda ingin menekankan teks kecil, itu harus dilakukan seperti ini:
Contoh 3:
Jika Anda ingin menekankan teks kecil, itu harus dilakukan seperti ini:
<em><small>Emphasised small text</small></em>
Dan TIDAK seperti ini:
<em><small>Emphasise small text</em></small>
Perbedaannya adalah bahwa pada contoh pertama, kami menutup tag yang pertama kali kami buka terakhir. Dengan cara ini kita menghindari membingungkan diri kita sendiri dan browser.
Lebih banyak elemen!
Seperti yang disebutkan dalam Pelajaran 3 ada elemen yang dibuka dan ditutup dalam tag yang sama . Elemen yang disebut kosong ini tidak terhubung ke bagian tertentu dalam teks tetapi lebih merupakan label yang terisolasi. Contoh dari tag semacam itu <br />yang menciptakan pematahan paksa:
Contoh 4:
Some text<br /> and some more text in a new line
Akan terlihat seperti ini di browser:
Beberapa teks
dan beberapa teks lagi di baris baru
dan beberapa teks lagi di baris baru
Perhatikan bahwa tag ditulis sebagai kontraksi pembuka dan tag penutup dengan ruang kosong dan garis miring di akhir: <br />.
Elemen lain yang dibuka dan ditutup pada tag yang sama adalah <hr /> yang digunakan untuk menggambar garis horizontal ("hr" adalah singkatan dari "aturan horizontal"):
Contoh 5:
Elemen lain yang dibuka dan ditutup pada tag yang sama adalah <hr /> yang digunakan untuk menggambar garis horizontal ("hr" adalah singkatan dari "aturan horizontal"):
Contoh 5:
<hr />
Akan terlihat seperti ini di browser:
Contoh elemen yang membutuhkan baik tag pembuka dan tag penutup - seperti kebanyakan elemen lakukan - adalah ul, ol dan li. Elemen-elemen ini digunakan ketika Anda ingin membuat daftar.
uladalah kependekan dari "unordered list" dan menyisipkan bullet untuk setiap item daftar.olkependekan dari "daftar pesanan" dan nomor setiap item daftar. Untuk membuat item dalam daftar menggunakan litag ("item daftar"). Bingung? Lihat contohnya:
Contoh 7:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
Akan terlihat seperti ini di browser:
Itu saja untuk sekarang. Sekali lagi, bereksperimen dan buat halaman Anda sendiri menggunakan beberapa dari tujuh elemen baru yang Anda pelajari dalam pelajaran 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>
Stronger emphasis
Small text
Line shift
Horizontal line
List item
Contoh elemen yang membutuhkan baik tag pembuka dan tag penutup - seperti kebanyakan elemen lakukan - adalah ul, ol dan li. Elemen-elemen ini digunakan ketika Anda ingin membuat daftar.
uladalah kependekan dari "unordered list" dan menyisipkan bullet untuk setiap item daftar.olkependekan dari "daftar pesanan" dan nomor setiap item daftar. Untuk membuat item dalam daftar menggunakan litag ("item daftar"). Bingung? Lihat contohnya:
Contoh 7:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
Akan terlihat seperti ini di browser:
- A list item
- Another list item
Contoh 8:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
Akan terlihat seperti ini di browser:
- First list item
- Second list item
Fiuh! Apakah itu semuanya?
Itu saja untuk sekarang. Sekali lagi, bereksperimen dan buat halaman Anda sendiri menggunakan beberapa dari tujuh elemen baru yang Anda pelajari dalam pelajaran 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>
Akan terlihat seperti ini di browser:
Line shift
Horizontal line
- List
- Ordered list