Pengenalan HTML
(Armayani Arsal)
Dokumen HTML
HTML adalah singkatan dari HyperText Markup Language. HTML merupakan
file teks yang ditulis menggunakan aturan-aturan kode tertentu untuk
kemudian disajikan ke pengguna melalui suatu aplikasi web browser.
Setiap informasi yang tampil di web selalu dibuat menggunakan kode HTML.
Oleh karena itu, dokumen HTML sering disebut juga sebagai web page
(halaman web). Untuk membuat dokumen HTML, kita tidak tergantung pada
aplikasi Text Editor apapun, bisa menggunakan Notepad, Emacs atau VI
editor dan editor lain pada umumnya.
Penamaan Dokumen HTML
Tidak ada aturan yang baku untuk penamaan suatu dokumen HTML. Artinya, kita bebas memilih nama untuk dokumen tersebut. Hanya ekstensinya saja yang perlu untuk diperhatikan. Suatu file teks akan dianggap sebagai dokumen HTML jika memiliki ekstensi “.htm” atau “.html”. Maka dari itu, setiap membuat dokumen HTML, kita harus menyimpannya ke dalam salah satu ekstensi tersebut.
Kerangka Dokumen HTML
Secara umum, dokumen HTML terbagi atas dua bagian, yaitu bagian header (kepala) dan body (badan). Bagian header diawali dengan tag <head> dan diakhiri dengan tag </head>, sedangkan bagian body diawali dengan tag <body> dan diakhiri dengan
Sertifikasi (OOP PHP) 2014
RakhmatArianto, S.ST, M.Kom
2
menggunakan tag </body>. Kedua bagian tersebut diapit oleh tag <html> dan </html>, yang digunakan untuk menandai bahwa dokumen yang kita buat adalah dokumen HTML. Untuk lebih jelasnya, berikut ini kerangka dari dokumen HTML.
Seperti yang tampak di atas, tag-tag dalam dokumen HTML dibuat secara berpasangan (meskipun tidak semua). Sebagai contoh, dokumen HTML diawali dengan tag <html> dan ditutup atau diakhiri dengan tag </html>. Begitu juga dengan tag <head>, yang juga ditutup dengan menggunakan tag </head>, serta tag <body> yang ditutup dengan menggunakan tag
</body>.
Bagian teks yang diapit oleh tanda <!-- dan --> merupakan komentar, yaitu bagian teks yang tidak ikut ditampilkan ke dalam web browser.
<!DOCTYPE html> <html> <head> <title>Selamat Datang</title> </head> <body> Halo para pengunjung, selamat datang di situs web ini. </body> </html>
Cobalah simpan dokumen di atas dengan nama Welcome.html dan jalankan file tersebut.
Membuat Dokumen HTML
Agar anda bisa lebih jelas dalam memahami kerangka dokumen di atas, pada bagian ini kita akan mencoba untuk membuat dokumen HTML sederhana. Silahkan ikuti langkah-langkah berikut ini:
- Jalankan suatu aplikasi Text Editor, misalnya Notepad, EditPlus atau yang dicontohkan sekarang menggunakan Eclipse Luna PHP Developper.
- Tuliskan kode berikut ke dalam Text Editor bersangkutan.
- Buka file Welcome.html dengan cara klik dua kali.
- Tampilan hasilnya seperti pada gambar di bawah ini.
Sekilas tentang Tag HTML
Seperti yang telah anda pelajari sekilas di atas bahwa dokumen HTML dibuat menggunakan tag-tag khusus, dan dengan aturan yang khusus pula. Terdapat beberapa hal yang perlu diperhatikan dalam penggunaan tag di dalam dokumen HTML, yaitu:
• Tag HTML selalu diapit oleh tanda kurung runcing, < dan >.
• Meskipun
kode HTML tidak bersifat case-sensitive (tidak berpengaruh pada
penggunaan huruf besar atau huruf kecil), namun tag HTML sebaiknya
ditulis menggunakan huruf kecil., misalnya <html>, <head>, </head>, <title>, dan sebagainya. Ini merupakan cara yang direkomendasikan oleh W3C.
• Tag HTML pada umumnya berpasangan, seperti tag <html> berpasangan dengan tag
</html>, tag <head> berpasangan dengan tag </head>, dan masih banyak lagi contoh tag berpasangan lainnya. Namun ada juga tag yang tidak memiliki pasangan, misalnya tag <br>, <hr>, <input>, <meta>, dan lain-lain. Untuk menandai bahwa tag tersebut tidak memiliki pasangan, maka sebaiknya kita membubuhkan tanda slash (garis miring) di belakang tag tersebut, misalnya pada tag <br />, <hr />.
• Untuk penggunaan tag bersarang, maka penulisannya harus terurut. Sebagai contoh, perhatikan kode berikut:
Pada contoh di atas, di dalam tag <b> terdapat penggunaan tag lain lagi, yaitu tag <i>. Dalam kasus seperti ini, tag <i> harus ditutup terlebih dahulu menggunakan tag </i> terlebih dahulu sebelum kita menutup tag <b> menggunakan </b>.<b> Anda harus <i> belajar </i> dengan giat. </b>
Atirbut Tag
Pada umumnya, tag-tag dalam HTML memiliki beberapa atribut yang nilainya bias ditentukan sesuai dengan keperluan. Atribut suatu tag harus ditulis dalam tag yang bersangkutan (sebelum tanda >). Berikut ini contoh tag dengan beberapa atribut di dalamnya.
Pada contoh di atas, kita menentukan atribut bgColor dan alink dari tag <body>. Atribut bgColor digunakan untuk menentukan warna layar (background) dari suatu halaman web, sedangkan #fffeee dan #cccccc merupakan nilai dari atribut tersebut.<body bgColor="#fffeee" alink="#cccccc">
Dari contoh yang ditampilkan di atas, kita bisa simpulkan bahwa bentuk umum penulisan atribut dari suatu tag adalah sebagai berikut:
<namaTag atribut1="NilaiAtribut1" atribut2="NilaiAtribut2" ... >
Berikut ini contoh kode yang akan menunjukkan penggunaan atribut bgColor di dalam tag <body>
Hasil dari kode program di atas kira-kira seperti ini:<!DOCTYPE html> <html> <head> <title>Atribut Tag</title> </head> <body bgcolor="#fffeee"> Demo menggunakan atribut tag HTML </body> </html>
Sampai di sini dulu postingan kali ini. Selanjutnya akan membahas tag umum pada HTML.
Referensi : Klik disini
Terimakasih kak. Artikel yang kakak buat sangat membantu saya untuk memenuhi tugas kuliah. Semangat terus ya kak untuk membuat artikelnya. Perkenalkan Nim saya 1922500053, Nama Muhammad Intan Arfies, Kelompok SI2K, link kampus saya https://www.atmaluhur.ac.id/
BalasHapusSalam kenal ya kak.
Terimakasih kak. Artikel yang kakak buat sangat membantu sekali untuk memenuhi tugas perkulihan saya Perkenalkan Nim saya 1922500206, Nama syahrul, Kelompok SI2K, link kampus saya https://www.atmaluhur.ac.id/
BalasHapus