Tutorial Ngoding - Underline
Tutorial Ngoding kali ini membahas tentang cara menggunakan efek garis bawah atau biasa disebut underline pada pemrograman HTML. Style underline sering digunakan sebagai penanda bahwa teks atau tulisan tersebut penting.
Oke Langsung saja tanpa basa - basi :
Cara Penggunaan
Pertama, kita buat sebuah file HTML dan ketikan kode berikut dibawah.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial Ngoding Underline</title>
</head>
<body>
</body>
</html>
Selanjutnya kita akan membuat sebuah teks yang nantinya akan diberikan efek underline. Lihat kode berikut ini.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar Membuat Underline</title>
</head>
<body>
<p>Belajar Coding itu menyenangkan!</p>
</body>
</html>
Simpan dan berikut hasil awal sebelum diberikan efek underline pada HTML.
Belajar Ngoding itu menyenangkan!
Nah sekarang kita akan memberikan efek garis bawah pada baris teks tersebut. Pemberian efek dapat ditampilan satu kalimat penuh maupun hanya satu kata saja. Lihat contoh dibawah ini.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar Membuat Underline</title>
</head>
<body>
<p><u>Belajar Coding itu menyenangkan!</u></p>
<p><u>Belajar Coding</u> itu menyenangkan!!</p></body>
</html>
Hasilnya akan menampilkan efek underline seperti berikut:
Belajar Coding itu menyenangkan!
Belajar Coding itu menyenangkan!
Kita lihat tampilan diatas bahwa penggunaan underline dapat kita tentukan letaknya dengan mudah untuk mendapatkan hasil yang kita inginkan.
Penggunaan pada Elemen Lain
Kita juga dapat memberikan efek garis bawah di dalam elemen HTML lainnya asalkan masih berbentuk teks atau tulisan.
Contoh penempatan underline pada teks heading
<h1>Belajar Coding <u>Underline</u></h1>
Hasilnya akan seperti berikut:
Tutorial HTML Underline
Contoh penempatan pada elemen cetak tebal (Bold)
<p>Belajar Ngoding itu <b><u>MUDAH</u></b></p>
Hasilnya akan seperti berikut:
Belajar Ngoding itu MUDAH
Contoh penempatan pada elemen cetak tebal (Bold) dan cetak miring (Italic)
<p>Belajar Coding itu <i><b><u>Menyenangkan</u></b></i></p>
Hasilnya akan seperti berikut:
Belajar Ngoding itu MUDAH
Catatan
HINDARI dalam penggunaan garis bawah pada suatu teks atau kalimat memiliki style yang sama dengan penggunaan anchor link pada website. Misalnya, anchor link secara default berwarna biru maka underline tidak boleh diubah dengan warna biru juga.
Hal ini untuk menghindari visitor agar tidak bingung saat harus mengklik suatu anchor link.
Demikian tutorial belajar HTML kali ini, semoga bermanfaat dan share artikel ini ke yang lain yah! :D
Tidak ada komentar:
Posting Komentar