Belajar HTML Part 1
Apa itu HTML?
Tim Berners-Lee(2009)
[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 pertamakali 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 pertamakali.
- HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya;
- 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 speksifikasi 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
Notepad boleh, Notepad++ juga boleh..
Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Web Code
2. Web Browser untuk Membuka HTML
Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web browser apapun.
Membuat Dokumen HTML Pertamamu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>hello-world.html.
Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt.
Atau kamu bisa aktifkan fitur show extension pada Windows Explorer, agar bisa tahu ekstensi filenya.
Caranya.. masuk ke menu View, lalu centang File name extensions.
Sekarang cobalah buka file
hello-world.html dengan web browser.. maka hasilnya:
Selamat
Kita sudah berhasil membuat halaman web pertama dengan HTML.
Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu tentang nama file untuk 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.
Contohnya seperti ini:
Nama filenya adalah hello-world.txt.
Sudah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan menampilkan isi file tersebut apa adanya.
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.
Contohnya, saat kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka adalah index.html yang berada di server petanikode.
3. Hindari Beberapa Hal ini..
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.
Spasi pada URL, biasanya akan otomatis diubah menjadi %20.
Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau undescore (_).
Jangan Alay!
Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol.
Contoh:
HeLLoWORLD.htmlda*#$.html
Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh manusia, maupun mesin.
Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.
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:
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.
Nah, untuk HTML versi 4.. beda lagi cara deklarasinya.
Contoh untuk HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
O ya, kita bisa mengecek.. apakah HTML yang ditulis sudah benar atau tidak di https://validator.w3.org/
Berikutnya, di bawah tag deklarasi
<!DOCTYPE html> terdapat tag pembuka untuk HTML:<html lang="en">
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>.
2. Bagian HEAD
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan </head>.
<!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.
Seperti:
- Tag meta untuk SEO;
- Tag
<title>untuk judul; - Tempat menulis kode CSS dan Javascript;
- dan lain-lain.
3. Bagian BODY
Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag <body> dan ditutup dengan </body>.
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>
Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf.
Apa Selanjutnya?
Nah, sampai di sini dulu tutorial pertama ini..
Jika ada yang belum jelas, bisa ditanyakan melalui komentar.
Berikutnya silahkan pelajari tentang definisi tag, elemen, dan atribut:
Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML
Sumber: https://www.petanikode.com/html-dasar/
Komentar
Posting Komentar