Halo semua, seperti kita ketahui bahwa kegunaan dari HTML adalah untuk membuat halaman website. Nah supaya lebih jelas lagi pada artikel ini akan dijelaskan secara lengkap mengenai fungsi HTML.
Daftar Isi
Pendahuluan
Sebetulnya HTML (HyperText Markup Language) mirip dengan dokumen biasa, hanya saja dokumen HTML bisa memuat perintah-perintah yang ditandai dengan tag-tag atau kode HTML tertentu.
Contohnya saat kita ingin membuat tulisan tebal atau boldmaka harus menggunakan tag <b> tulisan yang ingin di bold </b> sehingga nantinya akan ditampilkan pada browser tulisan tebal. Penjelasannya yaitu :
- Tag <b> digunakan untuk mengaktifkan perintah cetak tebal
- Setelah perintah di atas kita harus menuliskan teks yang ingin ditebalkan
- Terakhir kita harus menutupnya dengan tag </b> , dengan tanda tersebut maka intruksi cetak tebal akan dinonaktifkan
Sebelum adanya HTML pengguna Mac tidak bisa melihat tampilan yang sama sebagaimana tampilan yang ada di komputer Windows.
Begitupun sebaliknya pengguna Windows tidak bisa melihat tampilan yang sama seperti pada saat menggunakan Mac. Namun dengan adanya HTML tampilan halaman web yang berisi teks, gambar, dan lainnya akan terlihat sama di semua platform seperi Windows, Mac, dan Unix.
Fungsi – Fungsi HTML Dasar
Di bawah ini adalah beberapa fungsi dasar HTML yang sering digunakan pada saat mendesain halaman website.
#1. Memasukan Gambar
Kita bisa memasukan atau menampilkan gambar di halaman web yang kita buat dengan perintah seperti di bawah ini :
<!DOCTYPE html> <html> <body> <h2>HTML Image</h2> <img src="pic_trulli.jpg" alt="Trulli" width="500" height="333"> </body> </html>
Maka hasilnya :
#2. Membuat Form
Pada jenis website yang interaktif biasanya terdapat sebuah form. Nah desain form tersebut dibuat menggunakan HTML. Contoh tag-tag yang bisa kita gunakan untuk membuat form pada halaman web yaitu :
<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html>
dan hasilnya :
Namun agar formnya memiliki fungsi tertentu seperti menyimpan data maka kita harus menambahkan file php atau javascriptnya.
#3. Menampilkan Tabel
HTML juga berfungsi untuk menampilkan atau membuat tabel pada website. Contoh tag-tag HTML untuk membuat tabel adalah :
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
dan hasilnya :
Atau contoh penerapan tagnya bisa juga dilihat pada video berikut :
#4. Menyunting atau Mengedit Teks di HTML
Untuk memformat tulisan seperti Bold, Italic, dan Underline kita juga bisa menggunakan HTML. Adapun perintah-perintah memformat tulisan contohnya seperti di bawah ini :
<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
Maka yang ditampilkan di browser yaitu :
#5. Menampilkan Video pada Website
Bagaimana jika kita ingin menampilkan video yang ada dari youtube ke halaman web yang sedang kita buat ? Gampang kok, contoh kode-kode yang digunakan yaitu :
<!DOCTYPE html> <html> <body> <video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html>
Dan hasilnya :
Masih banyak lagi fungsi dari HTML selain fungsi diatas di antaranya : Membuat Heading, Menampilkan Audio, Menggabungkan dengan Javascript, Menggabungkan dengan CSS, membuat header, footer, dan navigasi.
Penutup
Itulah penjelasan mengenai fungsi HTML yang disertai dengan beberapa contoh. Semoga bermanfaat dan jangan lupa tekan tombol sharenya.
qinanaslam asshawqi