 |
| Megenal Apa Itu HTML |
HTML singkatan dari Hypertext Markup Language yaitu gabungan dari dua istilah : hypertext dan markup language.
Hypertext ialah dokumen berisi tautan yang memungkinkan pengguna dapat terhubung dengan halaman lain.
Sedangkan markup language merupakan bahasa komputer yang tersusun dari sekumpulan kode untuk memberikan informasi.
Jadi, apa itu HTML? singkatnya HTML merupakan bahasa markup yang digunakan untuk membuat sebuah struktur halaman website.
Hanya dengan HTML, kamu sudah bisa membuat websitemu sendiri, meskipun akan jauh lebih menarik jika dikombinasikan dengan CSS dan Javascript.
Mengenal Perkembangan HTML
HTML pertama kali dikenalkan pada tahun 1991 oleh Tim Berners-Lee yang merupakan satu ahli fisika di lembaga penelitian CERN, Swiss.
Kala itu HTML diciptakan untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain secara sederhana dan juga efektif.
berikut berkembangan dari HTML ini :
HTML1 (1991)
Mempermudah ilmuwan untuk mengakses berkas-berkas yang ada di berbagai komputer
HTML2 (1995)
Dapat menampilkan sebuah form dalam suatu dokumen. Versi inilah yang menjadi titik awal lahirnya website interaktif.
HTML3 (1997)
Hadirnya fitur FIGURE yang dapat meletakkan tabel dan juga gambar.
Lanjutan versi ini adalah HTML3.2 yang memudahkan kamu menggunakan script diluar HTML seperti Javascript.
HTML4 (1998)
Memiliki penambahan fitur pada perintah dasar HTML, yaitu text, link, table, image, dan form.
Lanjutan versi ini adalah HTML4.01 yang membawa perbaikan script XHTML1.0, dan kini sudah dapat digunakan semua browser karena telah dipublikasikan secara internasional.
HTML5 (2014)
Menjadi versi terbaik karena dilengkapi dengan fitur canggih, seperti embed video dan audio.
selain itu, versi ini memungkinkan kamu untuk membuat tampilan website dengan menggunakan gabungan HTML, CSS, dan Javascript.
Kini, HTML telah berkembang menjadi bahasa markup yang telah digunakan lebih dari 93 persen website di seluruh dunia.
Hingga saat ini, HTML5 merupakan versi terbaru dengan fitur paling canggih.
Berkat kecanggihan itu, kini HTML5 sudah digunakan lebih dari 89 persen website di seluruh dunia.
Mengenal Tag, Atribut, dan Elemen HTML
Untuk mempermudah kamu dalam belajar HTML, kamu harus mengenal istilah tag, atribut, dan elemen terlebih dahulu.
Tag
Merupakan tanda awal dan akhir perintah yang dibaca oleh web browser. Dibuat dengan kurung siku <...> dan di dalamnya berisi nama tag.
Tag ditulis secara bersamaan, yaitu pembuka dan penutup. penulisan tag penutup hanya ditambah garis miring (/) di depan nama tag </...>.
Setiap tag memiliki fungsi dan perintah yang berbeda. Misalnya <em> untuk membuat penekanan pada teks atau memiringkan teks.
Perlu kamu ketahui kalau tidak semua tag HTML memiliki pasangan penutup. Misalnya saja tag <img>.
| Tag | Fungsi Tag |
|---|---|
| <html> | Tag awal halaman HTML yang mencakup semua konten dan elemen. |
| <head> | Membuat halaman yang meliputi deskripsi di hasil pencarian Google, CSS, dan lainnya. |
| <title> | Membuat judul website |
| <body> | Bagian isi website |
| <h1> sampai <h6> | Bagian heading pada artikel |
| <p> | Membuat paragraf |
| <!-- --> | Membuat komentar |
Atribut
Artibut merupakan informasi atau perintah yang berada di dalam tag pembuka untuk mengontrol prilaku elemen.
Tag <img> ini memiliki artibut src dan alt yang mengharuskan browser untuk menampilkan gambar gelas.jpg dengan keterangan Gelas Kaca.
| Atribut | Digunakan pada Tag |
|---|---|
| src | <img>, <embed>, <audio>, <iframe> |
| href | <a>, <link> |
| action | <form> |
| autoplay | <audio>, <video> |
Jumlah atribut dalam sebuah tag bisa lebih dari satu. Namun, kamu tidak bisa sembarangan memasukkan atribut di semua tag karena mereka memiliki pasangannya masing-masing.
Elemen
Elemen merupakan komponen yang berisi mulai dari tag pembuka hingga tag penutup.
Sebuah kode yang terdiri dari teks dan simbol mulai dari tag pembuka, isi tag atau konten, hingga tag penutup.
Misalnya : <p>Hello World!</p>
Dalam satu elemen tidak hanya berisi satu tag saja, namun juga bisa berisi elemen lainnya. Jadi elemen itu nantinya akan berisi banyak tag. Elemen itu disebut nested elements. Berikut contohnya :
<html> <body> <h1>Heading Satu</h1> <p>Paragraf artikel</p> </body> </html>
Pada elemen di atas, tag <html> memiliki tag lain yaitu <body>, sedangkan tag <body> memiliki dua tag lain yaitu <h1> dan <p>.
Mengenal Struktur Dasar HTML
Berikut ini struktur dasar dari bahasa HTML :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Keterangan :
| Tag | Keterangan Tag |
|---|---|
| <!DOCTYPE html> | Deklarasi dari type dokumen HTML |
| <html></html> | Disebut elemen utama HTML karena semua elemen berada di dalamnya |
| <head></head> | Berfungsi untuk memasukkan suatu konten yang tidak dimunculkan namun tetap diakses pertama kali. Biasanya untuk meletakkan beberapa kode pemanggil seperti CSS, Javascript dan lainnya. Juga biasanya untuk meletakkan konten lainnya seperti keyword, deskripsi, dan lainnya. |
| <title></title> | Judul dari halaman website yang akan muncul pada bagian tab browser. |
| <body></body> | Berisi konten yang akan ditampilkan browser ketika pengunjung mengakes halaman tersebut. |
Mengenal Cara Kerja HTML
File dokumen HTML dapat kamu buat menggunakan aplikasi teks editor seperti notepad, yang nantinya kamu simpan dengan ekstensi .html atau .htm.
dokumen HTML ini akan berisi komponen-komponen seperti heading, dan isi konten (seperti pada struktur HTML di atas).
Kemudian kamu bisa langsung membukanya dengan browser.
Untuk saat ini, saya merekomendasikan untuk menggunakan browser chrome karena browser ini yang paling banyak mendukung elemen-elemen pada html.
Browser nantinya akan membaca file HTML tersebut dan menampilkan halaman website.
Penutup
HTML merupakan bahasa markup dan merupakan dasar dari pembuatan sebuah website.
Untuk saat ini, HTML5 merupakan versi terbaru dan terbaik dengan beberapa fungsi tag yang lebih sempurna.
Pada dasarnya, HTML merupakan kerangka dasar untuk membuat website yang nantinya akan digabungkan dengan bahasa pemrograman lain seperti CSS, Javascript, bahkan PHP.