Materi

HTML
HyperText Markup Language
Apa itu HTML?
Pengertian HTML kalau kata wikipedia:

“HTML atau HyperText Markup Language merupakan sebuah bahasa markah

untuk membuat halaman web.”

Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau
penanda untuk membuat halaman web. Penanda atau markup ini, nanti akan
kita sebut dengan Tag.

HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah
web. Kalau kita ibaratkan nih, HTML itu seperti batu bata untuk membangun
rumah. Batu bata ini dapat disusun, hingga menjadi fondasi dasar.
Apa itu HTML?
Dalam membuat halaman web,
HTML tidak sendirian. Ada bahasa
lain lagi yang menjadi
pelengkapnya, yakni CSS dan
Javascript.

CSS adalah bahasa khusus yang

digunakan untuk memperindah
tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup.

Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun
efek yang akan diterapkan di website.
Sejarah dan Asal-usul HTML
Cerita awal kemunculan HTML dimulai dari tahun 1980,
saat itu seorang ilmuan bernama Tim Berners-Lee
sedang bekerja di CERN.

CERN sendiri bukanlah perusahaan yang berkaitan

tentang teknologi maupun internet. CERN adalah
singkatan dari bahasa prancis: Conseil Européen pour
la Recherche Nucléaire yang artinya: Komisi Eropa
untuk Penelitian Fisika Nuklir.

Para peneliti di CERN membutuhkan sebuah cara atau

sistem agar bisa saling berbagi dokumen hasil
penelitian.
 Sejarah dan Asal-usul HTML

Tim kemudian mencoba membuat ENQUIRE. Ini

adalah software hypertext yang akan digunakan
untuk berbagi dokumen.

Lalu di tahun 1989, Tim memperkenalkan ide tentang

hypertext berbasis internet. Ini nantinya akan
menjadi cikal-bakal HTML.

Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang
merupakan system engineer di CERN.

Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul: “HTML
Tags”, dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar
HTML.
 Sejarah dan Asal-usul HTML

HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal
dengan SGML (Standard Generalized Markup Language), SGML adalah sebuah
standar internasional untuk membuat dokumen dengan tanda (markup) seperti
paragraf, list, heading, dan lain-lain. Bisa dibilang HTML adalah implementasi dari
SGML.

Kalau kita lihat, beberapa tag seperti <title>, <p>, <li>, dan <h1> sampai
<h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML,
salah satunya adalah Hyperlink, yang murni hasil pemikiran Tim Berners-Lee.

Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera
menjadi perhatian berbagai ilmuwan komputer di seluruh dunia.
 Perkembangan dan Versi HTML

HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut
ini perkembangan versi HTML:
● [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
● HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertama kali
beredar di pasaran dan dirilis oleh IETF;
● [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak
perubahan yang memicu perdebatan;
● HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertama kali.
● HTML 4.0 (24 April 1998) versi pengembangan dari yang sebelumnya;
 Perkembangan dan Versi HTML

● HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
● XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi
XML;
● XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
● HTML 5 (28 Oktober 2014) versi HTML saat ini.

Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih
dalam draft spesifikasi saja, artinya tidak ada yang menggunakan versi [draft] untuk
membuat web. Lalu, versi mana yang akan kita pakai?, tentunya versi terbaru, yakni
HTML 5.
 Peralatan untuk Belajar HTML

1. Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Bebas
menggunakan teks editor apapun. Notepad boleh, Notepad++ juga boleh..
Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis
dokumen HTML.
2. Web Browser untuk Membuka HTML
Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebas
menggunakan web browser apapun, gunakan web browser yang terbaru, karena
kita juga akan menggunakan HTML versi yang terbaru. Firefox atau Google
Chrome sudah cukup.
 Membuat Dokumen HTML Pertama
Lalu simpan dengan nama
tulislah kode berikut. hello-world.html
 Membuat Dokumen HTML Pertama
Sekarang cobalah buka file hello-world.html dengan web browser maka hasilnya :

Selamat! 🎉
Kita sudah berhasil membuat
halaman web pertama
dengan HTML.
 Nama File untuk HTML
Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML :
1. Extensi file HTML
Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja.
Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web
browser.
2. Nama Khusus untuk Homepage
Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya
gunakan nama index.html. Karena ia akan otomatis dibuka saat website
dikunjungi.
 Nama File untuk HTML
3. Hindari Beberapa Hal ini
a. Penggunaan Spasi
Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya
hindari menggunakan spasi pada nama file HTML, agar URL yang
dibentuk lebih bagus. Sebagai ganti spasi, kamu bisa gunakan tanda
min (-) atau underscore (_).
 Nama File untuk HTML
3. Hindari Beberapa Hal ini
b. Jangan Alay!
Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan
huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan
simbol contohnya :
● HeLLoWORLD.html
● da*#$.html
Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh
manusia, maupun mesin.
 Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:

Penulisan kode HTML selalu dimulai dengan

deklarasi DOCTYPE, lalau menuliskan tag
<html> dan di dalamnya terdapat tag <head>
dan <body>.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting,
bagian Deklarasi, bagian HEAD, bagian BODY, mari kita bahas satu-per-satu:
 Struktur Dasar HTML
1. Bagian Deklarasi
Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.
Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada
contoh di atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah
HTML 5.
Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka
untuk HTML:
 Struktur Dasar HTML
1. Bagian Deklarasi
Berikutnya, di bawah tag deklarasi <!DOCTYPE
html> terdapat tag pembuka untuk HTML:
Tag <html> wajib ada di setiap dokumen HTML..
Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau
konten dokumen HTML ini akan menggunakan bahasa inggris.

Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head>
dan tag <body>, setelah itu barulah terakhir tag HTML ditutup dengan
</html>.
 Struktur Dasar HTML
2. Bagian HEAD
Bagian HEAD adalah bagian kepala
dari HTML. Dimulai dari tag <head>
dan ditutup dengan </head>.

Pada bagian HEAD, biasanya

digunakan untuk menuliskan tag-tag
yang akan dibaca oleh mesin.

Seperti:
● Tag meta untuk SEO;
● Tag <title> untuk judul;
● Tempat menulis kode CSS dan Javascript;
● dan lain-lain.