Saya yakin, Anda pernah mendengar tentang HTML sebelumnya. Tapi tidak ada salahnya membaca kembali artikel ini
Dalam tutorial ini, kami akan benar-benar membahas dari awal hingga Anda dapat membuat halaman HTML Anda sendiri
Baik…
Mari kita mulai
Apa itu HTML?
Mari kita lihat pengertian HTML menurut wikipedia
HTML atau HyperText Markup Language adalah bahasa markup untuk membuat halaman web.
Apakah Anda mengerti artinya?
Jika Anda tidak mengerti, di sini saya jelaskan ...
Jadi, HTML adalah bahasa yang menggunakan markup atau penanda untuk membuat halaman web
Penanda atau markup ini, nanti kita sebut Tag
HTML berperan dalam menentukan struktur konten dan tampilan sebuah web
Jika kita bandingkan dengan ini
HTML seperti blok bangunan sebuah rumah. Batu bata ini dapat ditumpuk, hingga menjadi pondasi dasar
Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain yang melengkapinya yaitu CSS dan Javascript
CSS adalah bahasa khusus yang digunakan untuk mempercantik tampilan web
Kemudian Javascript bertanggung jawab untuk membuat halaman web menjadi hidup. Karena dengan Javascript kita bisa menentukan fungsi dan efek yang akan diterapkan pada website
Oh ya, pada tutorial ini. Kita akan fokus dulu membahas tentang HTML. Jika Anda ingin belajar CSS dan Javascript, silakan buka
- Tutorial CSS untuk Pemula
- Tutorial Javascript untuk Pemula
Oke, saya anggap Anda sudah paham apa itu HTML dan perannya dalam pengembangan web
Selanjutnya, mari kita pahami lebih baik. kita akan membahas sejarah dan asal usul HTML
Sejarah dan Asal Usul HTML
Sejarah lengkap HTML juga dapat dibaca di
- Sejarah dan Asal Usul HTML
Dalam tutorial ini, kita akan membahas secara singkat sejarahnya
Kisah awal kemunculan HTML dimulai pada tahun 1980
Saat itu seorang ilmuwan bernama Tim Berners-Lee sedang bekerja di CERN
CERN sendiri bukanlah perusahaan yang berhubungan dengan teknologi atau internet. CERN adalah singkatan dari bahasa Perancis. Dewan Eropa untuk Riset Nuklir
Yang berarti. Komisi Eropa untuk Riset Fisika Nuklir
Para peneliti di CERN membutuhkan suatu cara atau sistem untuk dapat saling berbagi dokumen penelitian
Tim kemudian mencoba membuat INQUIRE. Ini adalah perangkat lunak hypertext yang akan digunakan untuk berbagi dokumen
Kemudian pada tahun 1989, Tim memperkenalkan ide hypertext berbasis internet. Ini nantinya akan menjadi cikal bakal HTML
Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan insinyur sistem di CERN. Namun, proyek ini tidak secara resmi diadopsi oleh CERN
Pada akhir 1991, Tim Berners-Lee menerbitkan sebuah dokumen berjudul. "Tag HTML"
Dokumen ini berisi penjelasan tentang 18 tag awal yang menjadi konsep dasar HTML
HTML sebenarnya dirancang berdasarkan konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language).
SGML adalah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, daftar, judul, dll
Bisa dihitung
HTML merupakan implementasi dari SGML
Jika kita perhatikan, beberapa tag seperti <title>, <p>, <li>, dan <h1> hingga <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML
Salah satunya adalah Hyperlink, yang murni merupakan gagasan dari Tim Berners-Lee
Ide tentang HTML ini kemudian menyebar ke milis dan langsung menjadi perhatian berbagai ilmuwan komputer di seluruh dunia
Pengembangan dan Versi HTML
HTML memiliki beberapa versi, dari yang tertua hingga yang terbaru. Berikut adalah pengembangan dari versi HTML
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">0 HTML 1. 0 (Juni 1993) adalah versi HTML pertama, tetapi tidak dirilis secara resmi;
- HTML 2. 0 (24 November 1995) adalah versi HTML kedua yang secara resmi dirilis pertama kali di pasaran dan dirilis oleh IETF;
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">0 HTML3. 0 (28 Maret 1995) versi ini gagal beredar, karena banyaknya perubahan yang memicu perdebatan;
- HTML 3. 2 (14 Januari 1997) versi resmi yang dirilis oleh W3C untuk pertama kalinya
- HTML4. 0 (24 April 1998) versi yang diperluas dari yang sebelumnya;
- HTML4. 01 (24 Desember 1999) versi perbaikan dari HTML 4. 0;
- XHTML 1. 0 (26 Januari 2000) perpanjangan dari HTML 4. 01 dengan mengadopsi XML;
- XHTML 2. 0 (Agustus 2002—Juli 2006) versi kedua dari XHTML;
- HTML 5 (28 Oktober 2014) versi html saat ini
Versi <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">_2 adalah versi tidak resmi yang dirilis ke pasar. Bentuknya masih sebatas rancangan spesifikasi
Itu berarti
Tidak ada yang menggunakan versi <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">_2 untuk membuat web
Jadi, versi mana yang akan kita gunakan?
Tentunya versi terbaru yaitu HTML 5
Alat untuk Mempelajari HTML
Baik sekarang. Saatnya berlatih
Namun sebelum itu, sebaiknya siapkan beberapa alat yang akan digunakan untuk latihan
Perlengkapan yang harus anda siapkan adalah
1. Editor Teks untuk Menulis HTML
Kami akan menggunakan editor teks untuk menulis kode HTML. Anda bebas menggunakan editor teks apa pun
Notepad bisa, Notepad++ juga bisa
Apapun text editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML
Namun, pada tutorial ini. kita akan menggunakan editor teks Visual Studio Code
2. Peramban Web untuk Membuka HTML
Kami akan menggunakan browser web untuk membuka HTML. Anda juga bebas menggunakan browser web apa pun
Saranku. gunakan web browser terbaru, karena kita juga akan menggunakan HTML versi terbaru
Firefox atau Google Chrome, saya rasa sudah cukup
Membuat Dokumen HTML Pertama Anda
Sekarang waktunya telah tiba, Anda harus mencoba membuat dokumen HTML sendiri. Metodenya sangat sederhana
Mari kita mulai dengan membuka editor teks, lalu menulis kode berikut
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_
Setelah itu, simpan dengan nama <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">4
Kiat. bagi anda yang menggunakan Notepad di Windows, simpan nama file dengan tanda petik <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">5 agar berekstensi <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">6 bukan <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">7
Atau anda bisa mengaktifkan fitur show extension pada windows explorer, sehingga anda bisa mengetahui ekstensi filenya
Jalan. buka menu Lihat, lalu centang Ekstensi nama file
Oke. lebih jauh
Sekarang coba buka file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">_4 dengan web browser. lalu hasilnya
Senang. 🎉
Kami telah berhasil membuat halaman web pertama dengan HTML
Sekarang giliran saya yang menjelaskan maksud dari kode diatas, tapi sebelum itu. Saya akan menjelaskan terlebih dahulu tentang nama file untuk HTML
Nama file untuk HTML
Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML
1. ekstensi file HTML
Setiap file HTML harus memiliki ekstensi <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">_6, <html lang="en">0 (untuk XHTML), dan <html lang="en">1 saja. Jika Anda tidak menggunakan ekstensi ini, maka tidak akan terbaca oleh web browser
Misalnya seperti ini
Nama file adalah <html lang="en">_2
Jelas, ini bukan file HTML, tetapi file teks biasa. Jadi. browser akan menampilkan isi file apa adanya
2. Nama Khusus untuk Beranda
Jika Anda ingin membuat halaman untuk beranda, sebaiknya gunakan nama <html lang="en">3. Karena akan otomatis terbuka ketika website dikunjungi
Misalnya, saat Anda membuka <html lang="en">4. maka file HTML yang akan dibuka adalah <html lang="en">3 yang ada di server Petanikode
3. Hindari Beberapa Hal Ini
Penggunaan Ruang
Nama file HTML biasanya akan dicantumkan pada URL, jadi sebaiknya hindari penggunaan spasi pada nama file HTML, agar URL yang dibuat lebih baik
Spasi pada URL, biasanya akan otomatis berubah menjadi <html lang="en">6
Alih-alih spasi, Anda dapat menggunakan tanda min (<html lang="en">7) atau hapus skor (<html lang="en">8)
Jangan mengejek
Beri nama file HTML dengan file biasa, hindari penggunaan huruf kapital, campuran huruf besar dan kecil, dan juga penggunaan simbol
Contoh
- <html lang="en">_9
- <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_0
Meski nama ini bisa valid, tapi tidak enak dibaca. baik oleh manusia maupun mesin
Nah, selanjutnya kita akan belajar tentang kode-kode HTML
Struktur Dasar HTML
Berikut ini adalah kode HTML yang baru saja kita buat
Penulisan kode HTML selalu diawali dengan deklarasi DOCTYPE, kemudian tuliskan tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>1 dan di dalamnya terdapat tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>2 dan <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>3
Jika kita memperhatikan. Struktur dasar kode HTML terdiri dari tiga bagian penting
- Bagian Deklarasi
- bagian KEPALA
- Bagian tubuh
Mari kita bahas satu per satu
1. Bagian Deklarasi
Lihatlah kode pada baris pertama. <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_4
Ini adalah tag deklarasi untuk menentukan jenis dan versi dokumen. Pada contoh di atas, kami menentukan bahwa dokumen ini bertipe HTML dan versinya adalah HTML 5
Nah, untuk HTML versi 4. cara deklarasinya berbeda
Contoh untuk HTML4. 01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
Cukup lama bukan
Lalu bisakah kita tidak menulis kode ini <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>4?
tidak apa-apa. Dokumen HTML masih dapat dibuka di browser web. Tapi, hal ini tentunya akan melanggar aturan baku yang dibuat oleh W3C
Oh ya, kita bisa memeriksanya. apakah HTML yang ditulis sudah benar atau belum di https. // validator. w3. org/
Lagi…
Selanjutnya, di bawah tag deklarasi <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_4 ada tag pembuka untuk HTML
<html lang="en">
Tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>1 harus ada di setiap dokumen HTML
Pada tag ini kita beri atribut <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>8 untuk menyatakan bahwa isi dokumen HTML ini akan menggunakan bahasa Inggris
Nah di tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>1 ini, ada dua tag penting lagi. itu adalah. beri tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_2 dan beri tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>3
Setelah itu, tag HTML terakhir ditutup dengan <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>2
2. bagian KEPALA
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>2 dan ditutup dengan <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>4
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_
Pada bagian HEAD biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin
Suka
- Tag meta untuk SEO;
- Tandai <title>_ untuk judul;
- Tempat menulis kode CSS dan Javascript;
- dan lain-lain
3. Bagian tubuh
Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisan dimulai dari tag <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_3 dan ditutup dengan <!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>7
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>_
Di sinilah kita akan menulis banyak konten dengan berbagai tag. Saat ini kami baru saja mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf