Banjarnegara, Jawa Tengah, Indonesia.
Apa Itu HTML? Fungsi dan Contohnya untuk Pemula
Iklan Bersponsor
Apa Itu HTML? Fungsi dan Contohnya – Bagi pemula yang akan memulai belajar web, hal pertama yang harus dipelajari tentu saja HTML. Kenapa HTML? Tentu saja karena bahasa tersebut merupakan kerangka dasar dari web. Jika kerangka pada manusia adalah tulang, maka pada web adalah HTML. Sebuah web tidak akan dapat berdiri secara baik tanpa adanya HTML di dalamnya.
Oleh karena itu, mempelajari HTML merupakan suatu keharusan bagi pemula yang akan belajar web development khususnya. Kemudian, setelah mempelajari HTML dapat melanjutkan ke CSS > JavaScript, PHP dan MySQL. Lalu, sebenarnya apa itu HTML? Berikut simak penjelasan mengenai apa itu HTML sampai akhir.
Apa Itu HTML?
Apa itu HTML? Pertanyaan tersebut muncul ketika seseorang yang baru akan mempelajari HTML. Secara umum, HTML (Hypertext Markup Language) merupakan sebuah bahasa markup yang digunakan untuk membuat halaman yang kemudian ditampilkan pada browser.
Sebagian orang menganggap bahwa HTML merupakan bahasa pemrograman. Namun, anggapan tersebut tidak tepat. Hal ini dikarenakan dari singkatannya saja kita ketahui bahwa HTML merupakan bahasa markup, salah satu syarat agar dapat disebut bahasa pemrograman adalah minimal dapat menyelesaikan operasi logika.
Sebagai contoh markup untuk membuat teks tebal di HTML kita dapat menggunakan tag pembuka <b> dan diakhiri dengan tag penutup </b>. Contohnya adalah <b>Teks Tebal</b> jika dijalankan dibrowser maka tampil Teks Tebal.
Struktur Dasar HTML
Setiap halaman yang dibuat dengan HTML paling tidak memiliki struktur dasar yang terdiri dari DTD, tag HTML, tag Head, dan tag Body. Pada halaman yang lebih kompleks lagi, akan sedikit lebih banyak struktur. Nah, berikut ini adalah contoh struktur dasar HTML yang bisa Anda pelajari sesaat.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<p>Hallo, saya lagi serius belajar HTML. Jangan ganggu ya!</p>
</body>
</html>Tag awal yang terdapat pada contoh struktur HTML di atas adalah DTD (Document Type Declaration). Tag ini digunakan untuk memberitahukan kepada browser bahwa dokumen yang akan diproses adalah sebuah halaman berisi HTML.
Tag selanjutnya yaitu <html> yang tepat berada setelah tag DTD. Semua tag HTML yang Anda gunakan harus berada di dalam tag pembuka <html> kemudian diakhiri dengan tag penutup </html>. Meskipun tanpa di dalam tag tersebut juga tetap berjalan namun direkomendasikan agar di alam tag <html>.
Kemudian setelah tag <html> terdapat tag <head>. Tag ini biasanya berisi data yang sifatnya tidak ditampilkan di browser seperti JavaScript, CSS, Encoding Karakter, bahkan hingga verifikasi mesin pencari seperti Google.
Jika tag <head> tidak ditampilkan di browser, maka tag <body> adalah kebalikannya yang akan ditampilkan semuanya oleh browser seperti paragraf, gambar, link dan sebagainya. Pada contoh di atas, browser akan menampilkan teks paragraf Hallo, saya lagi serius belajar HTML. Jangan ganggu ya!.
Fungsi HTML
Setelah kita berkenalan sedikit tentang apa itu HTML dan struktur dasarnya, berikutnya kita akan mengetahui tentang apa saja fungsi HTML.
1. Membuat Struktur Halaman
Fungsi utama dari sebuah halaman tentu saja digunakan untuk membuat struktur halaman web. Struktur tersebut dapat meliputi header, body, footer, navigasi hingga isi dari halaman web tersebut.
2. Menampilkan Multimedia
Fungsi kedua yang bisa kita gunakan adalah HTML dapat digunakan untuk menampilkan berbagai elemen HTML seperti menampilkan gambar, video, memutar audio, tabel, grafik bahkan pada versi terbaru HTML juga dapat membuat animasi.
3. Membuat Link
Link atau tautan aktif juga dapat dibuat mudah dengan HTML. Fungsi link atau tautan sendiri ini berfungsi untuk mengarahkan pengguna ke halaman atau website lain menggunakan link tertentu melalui fitur hyperlink.
5 Contoh Kode HTML untuk Pemula
Sebelum Anda memutuskan untuk belajar lebih lanjut mengenai apa itu HTML, berikut ini telah saya sajikan beberapa potongan kode HTML untuk pemula. Silahkan nanti Anda dapat menjalankannya secara mandiri.
1. Membuat Paragraf
Untuk membuat paragraf, kita dapat menggunakan tag <p> dan diakhiri dengan </p>. Sebagai contoh penggunaan tag tersebut adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<p>Ini adalah teks paragraf pertama. Agar lebih terasa efek dari tag paragraf, Anda dapat menambahkan teks lebih panjang di sini.</p>
<p>Ini adalah teks paragraf kedua. Agar lebih terasa efek dari tag paragraf, Anda dapat menambahkan teks lebih panjang di sini.</p>
</body>
</html>2. Menampilkan Gambar
Menampilkan multi media gambar, kita dapat menggunakan tag <img>. Sebagai contoh penggunaan tag tersebut adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<img src="link gambar di sini" title="Judul Gambar">
</body>
</html>3. Membuat Teks Tebal atau Miring
Jika Anda ingin membuat teks tebal dapat menggunakan tag <b> dan diakhiri dengan </b> dan teks miring menggunakan tag <i> lalu diakhiri dengan </i>. Sebagai contoh penggunaan tag tersebut adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<b>Teks Tebal</b>
<i>Teks Miring</i>
<b><i>Teks Tebal + Miring</i></b>
</body>
</html>4. Membuat Heading
Heading biasanya digunakan ketika kita akan membuat struktur artikel. Untuk membuatnya cukup mudah, kita hanya menggunakan tag <h1> – <h6>. Sebagai contoh penggunaan tag tersebut adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>5. Membuat Tabel
Pada contoh kode HTML yang terakhir kita akan membuat sebuah tabel menggunakan tag <table> dan diakhiri dengan tag penutup </table>. Sebagai contoh penggunaan tag tersebut adalah sebagai berikut.
<html>
<head>
<title>Judul Halaman | Afid Arifin</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>Nama</td>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
<tr>
<td>Afid Arifin</td>
<td>Teknik Informatika</td>
<td>Banjarnegara</td>
</tr>
<tr>
<td>Fulan</td>
<td>Teknik Informatika</td>
<td>Bandung</td>
</tr>
<tr>
<td>Fulanah</td>
<td>Teknik Informatika</td>
<td>Banjarnegara</td>
</tr>
</tbody>
</table>
</body>
</html>Penutup
Apa itu HTML? merupakan fondasi dari setiap halaman web yang kita temui di internet. Dengan memahaminya, Anda dapat membuat dan merancang sebuah halaman web. Fungsinya yang beragam memungkinkan kita untuk menyusun struktur konten dengan baik, mulai dari teks, gambar, hingga tautan. Dengan praktik dan eksplorasi lebih lanjut, keterampilan Anda dalam HTML tentu saja akan semakin berkembang.
Demikian artikel pada kesempatan kali ini mengenai apa itu HTML? Fungsi dan contohnya untuk pemula. Sekian dari saya dan selamat belajar dan semoga bermanfaat.
Anda mungkin menyukai postingan ini:
