Coding HTML: Fungsi, Elemen, hingga Contohnya

Ilustrasi melakukan coding. Foto: Unsplash.com

Bagi programer pemula, coding HTML merupakan topik yang umum dipelajari. Salah satu contoh HTML yang paling mudah ditemui adalah situs web.

Dikutip dari Hostinger, HTML atau HyperText Markup Language adalah bahasa markup standar untuk membuat halaman web. Melalui HTML, kamu bisa membuat struktur bagian, paragraf, dan tautan pada halaman web seperti tag dan atribut.

Bagi kamu yang penasaran mengenai HTML dan contoh coding-nya, simak pembahasan berikut ini.

Fungsi dan Cara Kerja HTML

Ilustrasi menyusun coding HTML. Foto: Unsplash.com

Selain berfungsi membangun situs web, HTML juga digunakan untuk menavigasi Internet sekaligus memasukkan tautan antara halaman terkait dengan situs web. HTML biasa digunakan untuk menyematkan hyperlink.

Mengutip sumber yang sama, HTML juga memungkinkan untuk mengatur dan memformat dokumen layaknya Microsoft Word. Fungsi itulah yang membuatnya bisa digunakan sebagai dokumentasi web.

HTML yang berwujud teks akan memberitahu peramban cara menampilkan semua berbagai elemen halaman seperti teks, gambar, dan multimedia lainnya pada halaman web individual. Dengan begitu, pengguna Internet bisa melihat informasi dengan mudah.

Elemen HTML

Ilustrasi menyusun elemen HTML.. Foto: Unsplash.com

Hampir seluruh halaman HTML terbagi atas serangkaian elemen HTML yang terdiri dari sekumpulan tag dan atribut. Menurut Hostinger, setidaknya ada tiga bagian utama elemen HTML, di antaranya sebagai berikut:

Opening tag

Bagian ini digunakan untuk menyatakan tempat elemen mulai berlaku dan biasanya tag disertai simbol ‘<>’. Misalnya, kamu menggunakan tag awal <p> untuk membuat paragraf.

Content

Content merupakan bagian keluaran yang bisa dilihat pengguna.

Closing tag

Bila opening tag hanya menyertakan simbol ‘<>’, closing tag disertai garis miring sebelum nama elemen. Misalnya, </p> untuk mengakhiri sebuah paragraf.

Contoh Coding HTML

Ilustrasi melakukan coding HTML. Foto: Unsplash.com

Bagi kamu yang ingin mempelajari coding HTML dari dasar untuk situs web, simak contoh di bawah ini yang dikutip dari Make Use Of. Dari contoh ini, kamu bisa berkreasi atau mengubah susunan HTML sesuai kebutuhan.

Membuat title page

Untuk membuat title page, kamu bisa mengikuti susunan berikut ini.

<head>

<title>My Website</title>

</head>

Membuat meta

Seperti title tag, metadata diletakkan di area header halaman web. Biasanya, komponen ini terdiri dari description, keywords, author, dan viewport. Berikut contoh coding-nya.

Perlu diketahui, tag viewport harus disertai "width=device-width, initial-scale=1.0" untuk memastikan tampilan halaman bisa dimuat dengan baik di berbagai perangkat.

Menyematkan gambar

Bila kamu ingin menyematkan gambar di halaman web pribadi, tambahkan tag gambar berupa <img>. Biasanya, tag tersebut digunakan bersamaan dengan atribut ‘src’ yang menentukan sumber gambar. Berikut susunan kodenya.

Nantinya, gambar muncul di halaman web kamu.

Menambahkan tabel

Kamu juga bisa menambahkan tabel melalui coding HTML berikut ini.

<table>

<tbody>

<tr>

<th>1st column</th>

<th>2nd column</th>

</tr>

<tr>

<td>Row 1, column 1</td>

<td>Row 1, column 2</td>

</tr>

<td>Row 2, column 1</td>

<td>Row 2, column 2</td>

</tbody>

</table>

Tag <table> dan </table> merupakan penanda awal dan akhir tabel. Sementara tag <tbody> berisi konten tabel. Setiap baris tabel diapit oleh tag <tr>.

Untuk setiap sel di tiap barisnya, kamu akan menemukan tag <th> yang menunjukkan header kolom dan tag <td> untuk data kolom. Kamu memerlukan salah satu tag tersebut untuk setiap kolom di setiap baris.

Itulah uraian seputar coding HTML beserta contohnya. Semoga informasi di atas bermanfaat!

(ANM)

Frequently Asked Question Section

Apa itu HTML?

HTML atau HyperText Markup Language adalah bahasa markup standar untuk membuat halaman web.

Apa fungsi HTML?

Selain membangun situs web, HTML juga berfungsi menavigasi Internet sekaligus memasukkan tautan antara halaman terkait dengan situs web. HTML juga banyak digunakan untuk menyematkan hyperlink.

Bagaimana cara kerja HTML?

HTML yang berwujud teks akan memberitahu peramban cara menampilkan semua berbagai elemen halaman seperti teks, gambar, dan multimedia lainnya, pada halaman web individual. Dengan begitu, pengguna Internet bisa melihat informasi dengan mudah.