Kali ini akan mencoba menggunakan 4 tag yang berhubungan dengan HTML, yaitu paragraf, heading, hypertext dan list. Berikut pembahasannya.
Paragraf
Tag ini digunakan untuk membuat paragraf yang termasuk kedalam elemen "block-level" yang akan membuat baris baru. Contohnya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>
Hasil di browser.
.png)
Dapat dilihat bahwa tiap paragraf akan membuat baris baru untuk elemen lainnya.
Dalam sebuah paragraf, kadang perlu penekanan pada kata-kata tertentu dalam sebuah paragraf. Ini dapat dilakukan dengan menebalkan atau memiringkan kata tersebut. Tag ini terdiri dari <em> untuk emphasis (menampilkan teks miring) dan <strong> untuk strong emphasis (menampilkan penebalan huruf). Berikut contoh penggunaannya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>HTML merupakan bahasa markup yang <strong>wajib dipelajari</strong> dalam <em>pemrograman web</em></p>
</body>
</html>
Hasil di browser.
.png)
Terdapat juga tag <b> (bold) dan <i> (italic) yang berfungsi sama dengan <strong> dan <em>. Namun banyak yang tidak menggunakan kedua tag itu lagi dan beralih ke CSS dikarenakan HTML hanya dibuat murni sebagai kerangka tampilan website, sedangkan semua efek tampilan ditangani oleh CSS.
Heading
Heading merupakan tag untuk menampilkan judul di HTML. Heading dibuat terpisah dari paragraf yang biasanya digunakan untuk membuat judul atau sub judul dari paragraf. Heading di HTML memilih 6 tingkatan, mulai dari <h1> (heading 1) hingga <h6> (heading 6). Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> memiliki huruf terkecil. Berikut contoh penerapannya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<h1>Teks Heading 1</h1>
<h2>Teks Heading 2</h2>
<h3>Teks Heading 3</h3>
<h4>Teks Heading 4</h4>
<h5>Teks Heading 5</h5>
<h6>Teks Heading 6</h6>
</body>
</html>
Hasil di browser.
.png)
Dengan menggunakan heading yang dapat dipadukan dengan paragraf sebelumnya, kita dapat membuat struktur konten sederhana halaman website.
Hypertext
Hypertext digunakan dalam teks untuk mengarahkan pengguna ke halaman lainnya (baik dalam website yang sama ataupun berbeda). HTML menggunakan tag <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference). Berikut contoh penggunannya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>Ini akan merujuk pada halaman <a href="https://www.google.com">Google</a></p>
</body>
</html>
Hasil di browser.
.png)
Alamat Absolute dan Alamat Relatif
Pada contoh diatas, atribut href merujuk pada URL Google (https://www.google.com) yang ditulis sebagai external link atau yang lebih dikenal dengan alamat absolute. Alamat absolute merupakan penulisan alamat dengan menyertakan link website seperti href="https://www.google.com" atau href="https://wikipedia.org". Alamat absolute dapat ditulis juga dengan link halamannya juga, misalnya "https://id.wikipedia.org/HTML"
Namun jika link yang dituju masih dalam website yang sama, maka tidak perlu menggunakan alamat absolute, tetapi cukup merujuk pada alamat file terhadap file halaman saat ini. Inilah yang disebut sebagai alamat relatif. Berikut contohnya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>Informasi lebih lanjut dapat dilihat pada <a href="info.html">halaman ini</a></p>
</body>
</html>
Hasil di browser.
.png)
Contoh diatas hanya untuk merujuk pada file "info.html" yang masih berada pada folder yang sama, lantas bagaimana dengan alamat relatif diluar folder saat ini? Misalnya terdapat folder lagi didalam folder saat ini dengan nama "bagian_halaman", maka alamat relatifnya menjadi href=”bagian_halaman/info.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../info.html”, untuk naik 2 folder diatasnya.
Atribut "target" pada Hypertext
Atribut ini akan menentukan halaman dari link hypertext akan dibuka pada halaman yang sama atau pada halaman baru. Secara default, setelah mengklik link hypertext, maka akan diarahkan ke link tersebut pada halaman yang sama. Namun apabila ingin dibuka di halaman baru, dapat menggunakan atribut "target:_blank". Contohnya menggunakan script yang sama dengan awal hypertext, hanya ditambahkan atribut target saja seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>Ini akan merujuk pada halaman <a href="https://www.google.com" target="_blank">Google</a> pada tab baru</p>
</body>
</html>
Ada 4 atribut pada "target", diantaranya :
- _blank : Ini akan membuka halaman dari link hypertext pada halaman baru.
- _self (default) : Ini akan membuka halaman dari link hypertext pada halaman yang sama.
_parent: Ini akan membuka link hypertext pada bingkai induknya. Jika tidak ada bingkai (frame) induknya, maka efeknya akan sama seperti menggunakan "_self"._top: Memuat link hypertext ke dalam keseluruhan halaman. Jika tidak ada bingkai induknya, maka efeknya akan sama seperti menggunakan "_self".
List
Terakhir yang akan dijelaskan adalah list. List dasar yang digunakan ada dua, yakni unordered list yang akan menampilkan list dalam bentuk bulatan atau kotak yang menggunakan tag <ul>, serta ordered list yang akan menampilkan list dalam bentuk angka atau huruf yang menggunakan tag <ol>. Untuk mengisi setiap baris listnya, gunakan tag <li>. Contoh penerapan keduanya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<p>Daftar bahasa pemrograman atau markup yang dipakai dalam pemrograman website</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
<p>Daftar atribut dalam tag a HTML</p>
<ol>
<li>_self</li>
<li>_blank</li>
<li>_parent</li>
<li>_top</li>
</ol>
</body>
</html>
Hasil di browser.
.png)
Selain kedua list ini, ada satu lagi yang akan dibahas, yakni description list. Emang tidak sepopuler kedua list sebelumnya, namun ini bisa dipakai untuk menampilkan penjelasan dari suatu istilah. Description list menggunakan tag <dl> (data list), lalu nama istilahnya menggunakan <dt> (data term), kemudian isi setiap barisnya menggunakan <dd> (data description) Misalnya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>
<dt>PHP</dt>
<dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>
</dl>
</body>
</html>
Hasil di browser.
.png)
Dari contoh diatas, isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya <dt>.
Kesimpulan
Ini hanyalah contoh beberapa tag dari ratusan tag HTML yang ada. Keempat tag ini masih digunakan dan untuk pengaturan tampilannya dapat menggunakan CSS.
){kind=link}
0 Komentar