Tak kenal maka tak sayang, begitu juga setiap kita ingin belajar sesuatu maka dilakukan pengenalan HTML terlebih dahulu. HTML atau Hyper Text Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, secara teknis HTML bukanlah bahasa pemrograman namun bahasa terstruktur yang fungsinya untuk menandai (Mark) bagian-bagian halaman, HTML terdiri dari beberapa susunan yaitu Tag, Elemen, danAtribut sehingga browser dapat menerjemahkan dokumen HTML ke bentuk visual dan suara.
Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.
Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks. seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan (Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.
Penmaan Dokumen HTML
HTML bisa berjalan di komputer klien dengan bantuan browser seperti; chrome, firefox, safari, opera, dll. Maka pastikan komputer telah terpasang salah satu aplikasi browser tersebut.
HTML memiliki ekstensi *.html, karakter * mewakili nama HTML yang diberikan oleh pembuat.
Dalam penamaan HTML tidak disarankan untuk menggunakan space atau spasi seperti pada contoh nama-nama file html berikut:
- halaman utama.html
- tampilan beranda.html
- halaman saya .html
Pemberian nama seperti atas memang berlaku dan bisa digunakan, namun akan bermasalah ketika dijalankan di-_browser_, karena browser akan mengganti spasi tersebut dengan karakter lain. Adapun contoh penulisan nama file HTML yang disarankan adalah:
- HalamanDepan.html
- Tampilan_Awal.html
- tampakAtas.html
- bab1.html
Memperhatikan huruf kecil/besar serta tanda lainnya sangat disarankan untuk meminimalisir kesalahan yang ditimbulkan ketika sudah dikembangkan secara jauh.
Struktur file HTML
Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Judul File HTML</title>
</head>
<body>
Website <strong><em>pertama</em></strong> saya
</body>
</HTML>
<!DOCTYPE HTML>
Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>
Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.
<head> … <head>
Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> … </title>
Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> … </body>
Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.
Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag?. Sebenarnya Anda bisa saja menuliskan kode HTML seperti ini :
<!DOCTYPE HTML><HTML><head><title>Judul File HTML</title></head><body>Website <i>pertama</i> saya</body></HTML>
Dan yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris? Nah loh?!
Untuk itu kita menambahkan indentasi, disetiap isi (konten)dari suatu tag. Misalnya :
<head>
<title>Judul File HTML</title>
</head>
Ini menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.
Struktur file HTML
Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Judul File HTML</title>
</head>
<body>
Website <strong><em>pertama</em></strong> saya
</body>
</HTML>
<!DOCTYPE HTML>
Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>
Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.
<head> … <head>
Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> … </title>
Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> … </body>
Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.
Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag?. Sebenarnya Anda bisa saja menuliskan kode HTML seperti ini :
<!DOCTYPE HTML><HTML><head><title>Judul File HTML</title></head><body>Website <i>pertama</i> saya</body></HTML>
Dan yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris? Nah loh?!
Untuk itu kita menambahkan indentasi, disetiap isi (konten)dari suatu tag. Misalnya :
<head>
<title>Judul File HTML</title>
</head>
Ini menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.
0 komentar:
Posting Komentar