Skip to main content

Memahami Fungsi HTML dalam 10 Menit

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.

Pendahuluan

Sebetulnya HTML 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 maka harus menggunakan tag <b> tulisan tebal </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

Di bawah ini adalah beberapa fungsi dasar HTML yang sering digunakan pada saat mendesain halaman website.

  • 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 :

Fungsi HTML

  • 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 :

fungsi HTML

Namun agar formnya memiliki fungsi tertentu seperti menyimpan data maka kita harus menambahkan file php atau javascriptnya.

  • 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 :

  • Menyunting Teks

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 :

  • Menampilkan Video

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 :

Fungsi HTML

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.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.