Assalamu'alaikum Warahmatullaahi Wabarakatuh
Artikel ini merupakan artikel keempat dari Seri Belajar HTML. Bagi yang belum membaca artikel sebelumnya, silahkan baca Belajar HTML Part 3 - Mengenal Elemen dan Atribut.
Dalam artikel ini BatWeber akan membahas tentang Heading dan Paragraf. Pada artikel Belajar HTML Part 2 - Dasar Heading, Paragraf, Link, dan Gambar kita sudah membahas dasar-dasarnya. Sekarang kita akan sedikit membahas lebih jauh.
A. HEADING
- Heading didefinisikan dengan tag <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>
- Heading <h1> menandakan heading atau judul utama, terus beranak ke anak-anak judul <h2> sampai <h6> . Semakin bawah, maka judul semakin kurang penting.
- Perlu diperhatikan bahwa heading hanya digunakan untuk heading atau judul. Bukan untuk membuat sebuah tulisan menjadi berhuruf besar atau bold.
- Heading penting bagi mesin pencari untuk melihat struktur dari sebuah website. Semakin sebuah website memiliki struktur heading yang bagus, maka semakin bagus sebuah website dalam search engine.
a. Membuat Garis Horizontal
Dalam penggunaan heading biasanya kita juga menggunakan sebuah garis horizontal untuk mempertegas sebuah judul konten website. Untuk membuat sebuah garis horizontal, kita bisa menggunakan tag <hr>. Untuk contoh penggunaannya silahkan ketik script berikut :
<html> <head> <title>Judul / Heading</title> </head> <body> <h1>
Heading 1</h1>
<hr /> <h2>
Heading 2</h2>
<hr /> <h3>
Heading 3</h3>
<hr /> <h4>
Heading 4</h4>
<hr /> <h5>
Heading 5</h5>
<hr /> <h6>
Heading 6</h6>
<hr /> </body> </html>
Simpan dengan nama hr.html dan buka pada web browser. Berikut tampilan yang akan kita dapatkan :
b. Elemen <head> HTML
- Perlu diketahui dan diingat bahwa <heading> berbeda dengan <head>
- <heading> merupakan konten yang akan ditampilkan pada badan HTML
- <head> hanya berisi meta data yang tidak akan ditampilkan pada badan halaman.
- Beberapa contoh meta data pada head adalah tag : <title>, <meta>, <link>, <style>, dll
- Elemen <head> ditempatkan antara tag pembuka <html> dengan tag pembuka <body>
Berikut contoh penggunaan <head> :
<html> <head> <title>Head</title> <meta charset='UTF-8'> </head> <body> </body> </html>
Dalam script di atas, elemen yang berada antara tag <head> dan </head> tidak akan ditampilkan.
B. PARAGRAF
- Seperti yang pernah kita bahas pada Belajar HTML Part 2 - Dasar Heading, Paragraf, Link, dan Gambar, bahwa paragraf dalam HTML diawali dengan tag <p> dan tag penutup </p>
- Semua yang berada di antara tag tersebut akan didefinisikan sebagai satu paragraf.
a. Membuat Baris Baru dengan Tag <br>
Permasalahan pertama, bagaimana jika kita ingin membuat sebuah baris baru tanpa membuat paragraf baru? Ketik script berikut :
<p>
Ini merupakan sebuah paragraf dengan <br> baris baru di dalamnya</p>
Simpan dengan nama br.html kemudian jalankan pada web browser. Berikut tampilan yang akan kita dapatkan :
b. Menulis Preformatted Text untuk menampilkan teks apa adanya.
Untuk menggunakan preformatted text kita harus menggunakan tag <pre> dan tag penutup </pre>. Maka teks yang berada di dalamnya akan ditampilkan apa adanya. Coba ketik script berikut pada Notepad++ Anda :
Tulis apa adanya seperti di atas, beserta tag-tagnya. Simpan misal dengan nama preformatted text.html.
Jalankan file tersebut pada web browser. Berikut tampilan yang akan dihasilkan :
Demikian seri Belajar HTML untuk kali ini, semoga bermanfaat. Jika ada yang ingin didiskusikan silahkan tulis di kolom komentar. Terima kasih,
Wassalamu'alaikum Warahmatullaahi Wabarakatuh.
0 komentar:
Post a Comment
Terima kasih atas kunjungannya, semoga artikel ini bermanfaat. Silahkan berikan komentar Anda.