HTML adalah singkatan dari “HyperText Markup Language” (Bahasa Markah Hiperteks). Ini adalah bahasa markah standar yang digunakan untuk membuat dan memformat halaman web. HTML digunakan untuk mengatur struktur dan konten dasar suatu halaman web, termasuk teks, gambar, tautan, audio, video, dan elemen-elemen lainnya.
HTML bekerja bersama dengan bahasa pemrograman lain seperti CSS (Cascading Style Sheets) untuk mengatur tampilan dan tata letak halaman, serta JavaScript untuk menambahkan interaksi dan fungsionalitas dinamis ke halaman web.
Berikut ini merupakan struktur dasar dari html yaitu :
HTML menggunakan tag atau elemen yang diletakkan di dalam tanda kurung sudut (< >) untuk mengelompokkan dan memformat konten. Misalnya, tag <p> digunakan untuk memformat paragraf teks, tag <img> untuk menyisipkan gambar, dan tag <a> untuk membuat tautan atau hyperlink.
Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<…>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Ada 2 bagian Tag yaitu :
- left angle bracket (<…>)
- right angle bracket (</…>) atau biasa disebut closing tag
Untuk membuat HTML perlu disiapkan sebuah web browser sebagai penampil hasil HTML yang dibuat, visual studio code beserta extensionnya untuk sebagai media menulis HTML nya dan mempermudah pembuatannya.
Berikut ini beberapa Tag HTML pada umumnya :
- Heading, sebagai title pada umumnya seperti pada sebuah artikel
<h1> <h2> <h3> <h4> <h5> <h6>
- Paraghraf. Jika ada baris kosong / white space (spasi yang lebih dari 1) akan dianggap 1 spasi
<p>
- Bold dan Italic, menebalkan dan memiringkan tulisan seperti di Microsoft Word
<b> <i>
- Underline (garis bawah), Superscript (tulisan berpangkat atas), Subscript (tulisan berpangkat bawah)
<u> <sup> <sub>
- Line Break (baris baru), Horizontal Rule (garis horizontal)
<br> <hr>
- Strong (penebalan teks), Emphasis (memiringakn teks), Blockquote (kutipan teks panjang), Quote (kutipan pendek)
<strong> <em> <blockquote> <q>
- Abbreviation (singkatan dari), Acronym (kepanjangan dari)
<abbr> <acronym>
- Cite (mendefinisikan judul karya kreatif), Definition Element (menentukan istilah yang akan didefinisikan dalam isinya)
<cite> <dfn>
- Deleted (mendefinisikan text yang telah dihapus dari dokumen), Inserted (mendefinisikan text yang telah ditambahkan ke dokumen)
<del> <ins>
Berikut ini beberapa attribute HTML yang biasa digunakan :
- <a href=””> (menuju alamat url yang diinputkan)
- <p align=””> (membuat perataan teks)
- <abbrv title=””> (menampilkan title teks)
List HTML
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:
- Ordered List adalah list yang terurut
- Unordered List adalah list yang tak terurut
- Description List adalah list yang berisi definisi
Link HTML
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen yang bisa diklik dan nanti akan membuka halaman lain sesuai alamat URL yang diberikan.
- <a href=”https://www.google.com”> (untuk ke halaman google)
- <a href=”about.html”> (ke halaman sendiri/file lain)
- <a href=”html/about.html”> (ke file di folder lain)
- <a href=”mailto:[email protected]”> (menuju ke email)
- <a href=”#tes”> (ke section tertentu di halaman sendiri)
Table HTML <table>
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel. Berikut ini merupakan struktur membuat table.
- <thead> untuk membungkus bagian kepala tabel
- <tbody> untuk membungkus bagian body tabel
- <tr> untuk baris
- <th> untuk judul pada header
- <td> untuk sel
- attribute colspan untuk lebar kolom
- attribute rowspan untuk lebar baris
Form HTML <form>
Salah satu cara untuk mengambil informasi dari user ialah menggunakan form.
- Field (bagian yang dapat diisi dengan data),
Untuk type ada beberapa seperti text, password, radio (lingkaran kecil), checkbox (sebuah kotak kecil), file (untuk mengisi file), dan button
- List (membuat beberapa item sebagai mengisi data)
Image HTML <img>
Untuk menampilkan gambar di HTML yaitu :
<img src=”” height=”” width=”” title=”” align=”” alt=””>
- src, lokasi gambar
- height dan width untuk tinggi dan lebar dari gambar
- title, judul dari gambar
- align, perataan letak gambar
- alt, teks alternatif untuk gambar
Video HTML <video>
Untuk menambahkan video di HTML yaitu :
<video src=”” height=”” width=”” poster=”” controls autoplay preload=”” loop>
- src, lokasi video
- height dan width untuk tinggi dan lebar dari video
- poster, menentukan cover dari video
- controls, mengaktifkan kontrol video
- autoplay, agar video diputar otomatis
- preload, menentukan apakah video harus dimuat saat halaman dimuat
- loop, memutar video terus menerus
Audio HTML <audio>
Untuk menambahkan audio hampir sama dengan video :
<audio src=”” controls autoplay preload=”” loop>
Division <div>
Sebagai pembungkus beberapa tag biasa disebut box.
