HTML Tutorials : Tag Break & Horizontal Rule

By -

HTML Tutorials : Tag Break & Horizontal Rule

Setelah pada tutorial sebelumnya kita telah membahas mengenai tag q dan blockquote di HTML Tutorials : Formatting Teks #3. Di tutorial kali ini, kita akan membahas mengenai tag break dan tag horizontal line, serta atribut-atribut dari tag <hr>. Selengkapnya silahkan simak HTML Tutorials : Tag Break & Horizontal Rule.
------------------------------------------------------------------------------------------------

Tag Break

Tag Break merupakan tag khusus yang digunakan untuk membuat baris baru dalam kode HTML. Tag break dituliskan dengan <br> dalam HTML 5. Tag ini adalah tag yang berdiri sendiri. Artinya, yaitu bahwa dalam penulisan tag ini  cukup dengan tag pembukanya saja, tidak perlu diiringi dengan tag penutup. Secara default, tag ini akan ditampilkan sebagai baris baru tanpa penambahan margin atau jarak dengan elements setelah dan sebelumnya.
Dalam tag-tag yang kita bahas sebelumnya, Anda pasti menemui hal yang disebut elements tag. Nah di tag break ini, berbeda dengan tag sebelumnya karena tag break tidak memiliki elements. Hal ini sering disebut dengan empty elements dalam bahasa pemrograman.
Baca juga : HTML Tutorials Apa itu Elements
Anda yang menyimak perkembangan tutorial ini pasti tahu empty elements. Meskipun tag ini tidak membutuhkan tag penutup, Anda tetap bisa menambahkan penutup dengan menambahkan tanda slash atau garis miring (/).
Contoh :
1
2
3
4
5
6
7
8
9
10

11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | &lt;break&gt;</title>
</head>
<body>
<h1>HTML Tutorials : Tag Break & Horizontal Rule</h1>
Tag break dituliskan dengan <big><b>&lt;br&gt;</b></big> <br>
boleh juga dituliskan <big><b>&lt;br/&gt;</b></big>. <br/>
Kebanyakan web browser saat ini akan menampilkan kedua kode
tersebut dengan hasil yang sama.
<p>Tag break tidak memiliki margin.
</body>
</html>
Versi HTML 5 sudah mendukung penulisan tag break tanpa penutup slash. Anda hanya perlu menulis <br> untuk memberi perintah pada web browser membuat baris baru. Namun, jika Anda menggunakan versi HTML yang masih lawas seperti xHTML atau yang dibawahnya, maka Anda perlu menambahkan penutup slash (/) agar web browser menampilkan kode-kode HTML yang semestinya menjadi lebih rapih. Saat ini, hampir semua web browser sudah mentolerir jika Anda lupa menuliskan slash. Tetapi, dalam beberapa kasus, ada kemungkinan web browser akan menampilkan error karena dianggap sudah usang. So, saran saja bagi Anda yang menggunakan versi HTML yang sudah sangat tua, tambahkanlah slash sebagai penutup tag break ini.
mahaamesha.com
------------------------------------------------------------------------------------------------

Tag Horizontal Rule

Tag Horizontal Rule dalam HTML dituliskan dengan <hr>. Tag horizontal rule ini berfungsi untuk membuat garis lurus horizontal yang biasanya digunakan untuk membatasi bahasan tulisan satu dengan bahasan tulisan yang lain. Tag ini sama-sama dengan tag break sebagai tag yang berdiri sendiri tanpa tag penutup. Anda juga bisa menambahkan penutup berupa slash (/) di tag ini.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | &lt;hr&gt;</title>
</head>
<body>
<h1>HTML Tutorials : Tag Break & Horizontal Rule</h1>
Tag horizontal rule dituliskan dengan <big><b>&lt;hr&gt;</b></big> <hr>
boleh juga dituliskan <big><b>&lt;hr/&gt;</b></big>. <hr/>
<p>Keduanya menampilkan hasil sama.
<hr><hr/>
</body>
</html>

------------------------------------------------------------------------------------------------

Tag <hr> Color

Tag <hr> memiliki atribut yang dapat digunakan untuk memberikan warna dari garis horizontalnya. Anda hanya perlu menambahkan atribut color. Penulisannya adalah diawali dengan tag, spasi, lalu didikuti dengan nama atribut, tanda sama dengan, dan barulah value dari atributnya (diapit tanda petik dua). Konsep penulisan lebih jelasnya bisa Anda lihat di link berikut.
Baca juga : Pengertian dan Konsep Atribut HTML (+ Gambar Konsep)
Contoh :
Garis Pertama Berwarna Merah <hr color=”red”>
Garis Ketiga Berwarna Hijau <hr color=”green”>
Garis Kedua Berwarna Biru <hr color=”blue”>
------------------------------------------------------------------------------------------------

Tag <hr> Size dan Width

Selain atribut color, Anda juga dapat mengatur ukuran dan panjang dari garis horizontal berturut-turut dengan atribut size dan width. Atribut size digunakan untuk mengatur lebar dari garis, sedangkan width adalah panjangnya. Jangan lupa bahwa untuk mengatur panjang garis, kita menggunakan atribut width, bukan long. Jika Anda salah menggunakan atribut long, maka itu tidak akan memberikan pengaruh ketika dijalankan di web browser.
Atribut size biasanya menggunakan value dengan satuan pixels (px), sedangkan width menggunakan value dengan satuan percent (%).
Contoh : 
Garis Pertama Berwarna Merah
<hr color=”red” width=”85%”>
Garis Ketiga Berwarna Hijau
<hr color=”green” size=”10px” width=”90%”>
Garis Kedua Berwarna Biru
<hr color=”blue” size=”20px” width=”98%”>

------------------------------------------------------------------------------------------------
Kirimkan masukan saran yang membangun dengan menuliskan komentar di bawah artikel ini. Saran Anda akan sangat membantu dalam pengembangan kualitas blog ini. Next, pada tutorial selanjutnya, kita akan membahas tentang HTML Tutorials : Abbreviation, Address, Cite, BDO.

Created by mahaamesha :}


Comments

Post a Comment