<!DOCTYPE html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
Inilah halaman web pertamaku
Menarik bukan...
</body>
</html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
Inilah halaman web pertamaku
Menarik bukan...
</body>
</html>
Sekarang coba simpan lalu buka kembali "webpertama.html" menggunakan browser.
Apa yang terjadi?
Kalian pasti berpikiran kenapa tulisan tersebut menjadi satu baris bukannya dua baris seperti yang diketikkan dalam file "webpertama.html".
Nah, hal itu terjadi karena browser tidak diberitahu bagaimana si browser harus menampilkan baris kode yang kita ketik. Hal tersebut juga berlaku dengan "ruang kosong" yang terdapat di antara tulisan. Lebih jelasnya perhatikan baris berikut:
Inilah halaman web pertamaku Menarik bukan...Ruang kosong antara kalimat "Inilah halaman web pertamaku" dan kalimat "Menarik bukan..." pada file HTML akan diabaikan atau tidak akan ditampilkan oleh browser dan hanya akan ditampilkan seperti berikut:
Inilah halaman web pertamaku Menarik bukan...Hal tersebut juga sama seperti kasus di awal karena si browser tidak diberitahu bagaimana si browser harus menampilkannya.
Kalau kita menginginkan tulisan tersebut berada pada baris yang berbeda maka kita harus menjelaskan kepada si browser dengan cara menambahkan tag <p> berikut ke dalam file "webpertama.html" :
<!DOCTYPE html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<p>Inilah halaman web pertamaku</p>
<p>Menarik bukan...</p>
</body>
</html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<p>Inilah halaman web pertamaku</p>
<p>Menarik bukan...</p>
</body>
</html>
Simpan "webpertama.html" dan buka kembali menggunakan browser dan apa yang terjadi?
Tag p berfungsi untuk memberitahukan kepada browser bahwa konten yang berada diantara tag <p> dan tag </p> adalah sebuah paragraf. Sehingga pada kasus ini, browser mengartikan bahwa konten atau kedua baris tulisan tersebut adalah dua paragraf yang berbeda.
Emphasis / Penegasan
Kita juga bisa memberikan penegasan pada suatu teks dalam sebuah paragraf menggunakan em (emphasis) dan strong (strong importance). Mari kita praktekkan, buka kembali "webpertama.html" menggunakan text editor kemudian tambahkan tag-tag yang diberi tanda merah berikut:
<!DOCTYPE html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<p>Inilah halaman <em>web</em> pertamaku</p>
<p><strong>Menarik</strong> bukan...</p>
</body>
</html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<p>Inilah halaman <em>web</em> pertamaku</p>
<p><strong>Menarik</strong> bukan...</p>
</body>
</html>
Simpan dan buka kembali file tadi menggunakan browser. Apa yang terjadi? Yup, kata "web" pada kalimat "Inilah halaman web pertamaku" tercetak miring dalam browser. Begitu juga dengan kata "Menarik" pada kalimat "Menarik bukan..." tercetak tebal.
Secara default, browser akan menampilkan tag <em> dengan cetak miring dan tag <strong> dengan cetak tebal. Namun kedua hal tersebut berbeda dengan tag <i> yang juga ditampilkan dengan cetak miring dan tag <b> yang ditampilkan dengan cetak tebal.
Perlu diingat bahwa HTML bukanlah bagaimana cara kita menyajikan atau mempresentasikan namun bagaimana cara kita memberikan sebuah makna atau arti maupun tujuan dalam setiap konten yang kita tuliskan.
Perbedaan tag <em> dengan tag <i> dan tag <strong> dengan tag <b> terletak pada tujuan dari tag tersebut. Untuk lebih jelasnya, mari kita bahas satu-persatu:
- Tag <i>. Pada awalnya, tag <i> tidak memiliki arti struktur apapun karena hanya digunakan untuk membuat tulisan menjadi miring (italic). Namun pada era HTML5, tag <i> bersifat "alternative voice" yang bertujuan untuk menandai kata atau bagian artikel yang berasal dari bahasa asing.
- Tag <b>. Sama seperti tag <i>, tag <b> digunakan untuk membuat tulisan menjadi tebal (bold). Namun pada era HTML5, tag <b> bersifat "stylistically offset" yang bertujuan untuk menandai sebuah kata kunci (keyword).
- Tag <em> atau "stress emphasis" digunakan untuk memberikan penekanan atau penegasan pada suatu kata atau kalimat. Misalnya "Panggil dokter sekarang!", menekankan betapa penting untuk segera memanggil dokter bukan perawat atau yang lainnya.
- Tag <strong> atau "strong importance" digunakan untuk menandai suatu kata atau kalimat penting.
Line breaks
Tag "Line break" digunakan untuk memisahkan baris seperti pada contoh berikut:
Inilah halaman web pertamaku<br>
Menarik bukan...
Menarik bukan...
Pada suatu kasus banyak yang secara "berlebihan" menggunakan tag <br>, misalnya untuk memisahkan antara dua blok tulisan atau paragraf. Namun, sebaiknya tag <br> tidak digunakan untuk memisahkan antara dua paragraf atau lebih. Sebagai saran, kita bisa menggunakan tag <p> karena setiap paragraf baru secara otomatis akan berada pada baris baru tanpa menggunakan tag <br>.
***
Daftar Tutorial HTML:
Tidak ada komentar:
Posting Komentar