Web Tutorial Indonesia 
Setelah mempelajari tentang sejarah HTML dan mempelajari bagaimana membuat tulisan supaya muncul pada halaman browser, sekarang saatnya kita untuk belajar lebih dalam tentang Struktur umum dalam HTML.
Dalam artikel pengenalan HTML kali ini kita akan membuat struktur umum dalam dokumen HTML, dalam struktur tersebut nantinya kita bisa menambahkan konten kita. Kita akan memulai dengan belajar tentang tag HTML, yang mana tag HTML akan kita gunakan dalam membangun file HTML dengan struktur pada umumnya.
Yang kita lakukan adalah dengan membuka browser Chrome, jika anda tidak memiliki browser chrome, anda bisa memakai browser apapun yang penting anda nyaman dalam menggunakannya.
Saya dalam tutorial kali ini menggunakan notepad sebagai teks editor, sekali lagi anda bisa menggunakan yang lain jika dirasa lebih nyaman menggunakan yang lain, tetapi perlu diingat seperti yang sudah saya jelaskan dalam tutorial sebelumnya bahwa menggunakan Microsoft Word tidak disarankan.
Penambahan Tag Doctype
Sekarang buka teks editor anda dan ketik kan seperti skrip dibawah ini:
|
1 |
<!doctype html> |
Skrip diatas disebut tag doctype, tag diatas menjelaskan bahwa jenis dokumen yang berada dibawah tag terbebut adalah dokumen HTML.
Sekarang terdapat banyak cara untuk membuat tag doctype untuk membuat dokumen HTML dan jenis tag doctype diatas disebut HTML5 doctype. Dalam tutorial kali ini dan seterusnya kita akan belajar tag HTML4, tag HTML4 yang akan kita pelajari adalah tag yang kompatibel dengan HTML5.
Oke, sekarang kita kembali ke teks editor dan save dokumen kita dengan nama “index.html” (tanpa tanda petik), mengapa kita memberi nama index.html? karena kita ingin server langsung membuka file tersebut dan menghiraukan file lainnya.
Penamaan “Index.html” pada sebuah dokumen html sangatlah sering dilakukan, karena jika kita memberi nama file dengan nama dan ekstensi tersebut dan menyimpannya dalam folder dalam server, maka server langsung membuka file tersebut dan membypass file lain, kita akan mempelajari tentang struktur file dalam website dalam tutorial yang lain.
Penambahan Tag HTML
Kembali pada file “Index.html”, kita akan menambahkan tag HTML beserta penutupnya dengan menyisipkan skrip:
|
1 2 3 |
<html lang="en"> </html> |
Sehingga skrip akhir menjadi seperti dibawah ini:
|
1 2 3 4 5 6 7 |
<!doctype html> <html lang="en"> </html> |
Pada skrip <html lang=”en”> disebut dengan tag HTML, dalam tag ini dilengkapi dengan atribut “lang” yang berarti bahasa, nilai dalam atribut tersebut adalah “en” yang menunjukkan bahwa bahasa yang terkandung dalam file HTML adalah bahasa Inggris. Jika anda belum mengetahui tentang definisi tag, anda bisa mempelajari dalam tutorial “STRUKTUR HALAMAN DALAM HTML”.
Dan skrip </html> berfungsi untuk menutup tag HTML sekaligus berfungsi sebagai tanda akhir dari dokumen HTML, setiap tag umumnya memiliki penutup kecuali beberapa tag memang tidak membutuhkan tag penutup.
Tag yang tidak membutuhkan penutup disebut Void Element, tidak membutuhkan tag penutup dikarenakan tidak membutuhkan isi dan sudah cukup dengan atribut.
Penambahan Tag Head
Selanjutnya, kita akan menambahkan tag head, tag ini berfungsi sebagai header dalam dokumen HTML kita. Tag ini jika dirender atau dijalankan tidak akan muncul dalam halaman browser, tag ini berguna untuk memasukkan tag meta atau sering disebut meta tag, memasukkan skrip CSS dan JS (Javascript).
Tambahkan tag head beserta penutupnya dengan menyisipkan skrip dibawah ini didalam tag HTML:
|
1 2 3 |
<head> </head> |
Sehingga skrip akhir kita menjadi seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html lang="en"> <head> </head> </html> |
Ingat pada tutorial sebelumnya, untuk membuat penutup tag, kita cukup memberikan tambahan garis miring setelah kurung buka.
Penambahan Meta Tag
Setelah kita menambahkan tag head, selanjutnya kita tambahkan meta tag diantara tag head tersebut, tambahkan skrip dibawah ini diantara tag head:
|
1 |
<meta charset="utf-8"> |
Sehingga skrip kita menjadi seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> |
Perhatikan skrip diatas, terpadapat atribut “charset” dalam meta tag kita, charset disini berarti “character set”, dan set yang telah ditentukan adalah “utf-8”, ini adalah set yang akan kita gunakan dalam membangun website kita.
Meta tag charset bersifat opsional dalam membangun halaman web, seperti atribute “lang” yang terdapat dalam tag HTML kita, dengan menerapkan tag-tag tersebut kita akan memberi spesifikasi halaman HTML dengan lebih baik. Oke, selanjutnya kita save file HTML kita.
Kita sudah melibatkan beberapa tag untuk membangun halaman HTML, tetapi kita masih memerlukan tag-tag yang lain untuk membuat halaman HTML yang sesuai dengan struktur pada umumnya.
Tutorial membangun struktur umum HTML ini akan kita lanjutkan dan selesaikan dalam tutorial “Pengenalan HTML: Struktur Umum Part 2”. Untuk mendownload atau ingin menjalankan skrip diatas, silahkan anda copy atau run skrip dibawah ini:
|
1 2 3 4 5 6 7 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> |
Happy Nyekrip! Terimakasih.
