Dalam tulisan ini, saya akan membahas mengenai pengenalan awal untuk memulai belajar HTML. Di dalam HTML, ada elements, attribute, data types, dan entities. Kenapa sangat penting untuk mengenal bagian ini? Jika Anda ingin menguasai HTML, tentu saja ini sangat penting. Berbeda dengan seseorang yang hanya "bisa". Setelah mengetahui bagian-bagian itu, kita akan berlanjut ke struktur umum HTML. Kemudian, akan saya bahas sedikit bagaimana cara kita supaya cepat menguasai HTML.
Elements
Elements atau biasa disebut tags ini merupakan hal yang harus kita ketahui. Karena dengan tag ini lah kita mendeskripsikan apa yang kita buat. Tag dalam HTML saat ini sangat banyak. Tergantung pada fungsinya. Ada tag untuk melakukan text processing seperti huruf tebal (bold). Ada juga tag untuk membuat inputan. Tapi, secara umum (dilihat dari struktur HTML) yang sering/wajib digunakan yaitu tag !doctype, html, head, title, dan body. Tag ditulis dengan memberikan simbol kurang dari (<) di awal, kemudian lebih dari (>) di akhir. Sehingga, penulisannya menjadi <tag> (tag untuk html berarti <html>). Kemudian, cara untuk menutup tag dengan memberikan garis miring (/) setelah simbol/tanda kurang dari. Maka, hasilnya akan menjadi <html>isi di dalam tag</html>. Walaupun beberapa tag tidak memerlukan ini, sebagai contoh tag untuk membuat baris baru yaitu br, tag ini hanya ditulis <br> saja.!doctype
Tag ini digunakan di awal baris. Tujuannya yaitu untuk mendeskripsikan tipe dokumen (doctype yaitu document type) yang kita tulis. Karena yang kita tulis adalah HTML, maka ditulis seperti ini:<!doctype html>Kode di atas merupakan penampakan dari penggunaan HTML5.
HTML
Sebenarnya, tag ini tidak wajib ditulis setelah penulisan !doctype. Walaupun aneh jika kita tidak menulisnya, tapi sah-sah saja. Karena, di awal dokumen kita telah mendeskripsikan dokumen tersebut. Tapi, lebih baik di tulis, karena ia merupakan salah satu tag dasar yang wajib ditulis di HTML4. Penulisannya:<html>
...
</html>
Head
Di dalam tag <html>, ada tag <head> yang fungsinya untuk meletakan informasi-informasi yang berhubungan dengan dokumen seperti tag <meta>. Di dalam tag <head> ada tag <title> yang fungsinya untuk mendeskripsikan judul dokumen. Tag ini juga merupakan tag dasar yang sangat penting. Penulisannya:<html>
<head>
...
</head>
</html>
Title
Di dalam tag <head>, ada tag <title> yang fungsinya untuk mendeskripsikan judul/nama dokumen yang kita tulis. Jika tag <title> tidak ada, maka di judul tab browser kita akan menjadi alamat URL. Isi dari tag <title> akan muncul di tab browser kita. Penulisannya:
<html>
<head>
<title>Judul Halaman</title>
</head>
</html>
Body
Nah, ini salah satu tag yang sangat penting. Di dalam tag <body> ini lah semua konten isi dokumen kita diletakkan. Posisinya ada di bawah penutup tag </head>. Namun tetap di dalam tag <html>. Penulisannya:
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
...
</body>
</html>
Comments
Sama halnya dengan bahasa pemrograman lainnya. HTML juga ada tag khusus yang akan diabaikan. Yaitu tag <!-- -->. Penulisannya:<!-- Isi Komentar yang akan Diabaikan -->Tapi, tahu kah Anda? Tag komentar dapat digunakan di browser Internet Explorer sebagai identifier untuk mengatasi kompabilitas versi. Contohnya:
<!--[if lt IE 7]> ... <![endif]-->Maksudnya, jika versi IE (Internet Explorer) kurang dari 7 (di bawah versi 7) maka lakukan (...). Biasanya, ini digunakan untuk memuat dokumen JavaScript tambahan untuk mengatasi masalah kompabilitas. Tulisan "lt" maksudnya lower than atau (di bawah/kurang dari).
Struktur Umum HTML
Dari tag umum yang ada di atas, maka struktur umum HTML seperti ini:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Attributes
Atribut (attribute) pada HTML bermacam-macam. Ada yang secara umum atribut tersebut dapat digunakan di semua tag, tapi juga ada yang khusus. Tapi, ada juga tag yang tidak memiliki atribut. Atribut bisa dibilang sebagai pengaturan tambahan untuk suatu tag. Contoh atribut yang umum yaitu style, title, onClick, class, id, dll. Cara penggunaannya:<tag atribut>Beberapa atribut memiliki pengaturan bawaan. Tapi, beberapa diantaranya tidak sehingga harus diatur oleh kita. Untuk aturan yang kita tulis, disebut data type di dalam HTML. Contoh:
<!-- contoh: -->
<input required>
<input id="username">Di dalam satu tag, kita bisa tambahkan berapa pun atribut. Seperti:
<input id="username" type="text" ...>Tag input merupakan salah satu tag yang tidak perlu ditutup dengan garis miring (di dalam HTML5, berbeda jika di dalam HTML4).
Data Types
Seperti yang saya sebutkan sebelumnya, data type (tipe data) merupakan sesuatu yang kita tulis di dalam atribut. Bisa berbentu angka (0-9), atau huruf (a-z), atau boolean (true/false). Kita dapat memasukan apa saja ke dalam data type, biasanya script dari JavaScript juga dimasukan melalui atribut onClick, onMouseOver, dll. Bahkan, script tersebut juga ada yang ditulis di dalam atribut href untuk membuat link pada tag <a>.Entities
Apa itu entities? Entites merupakan sebuah kode khusus yang hasil keluarannya diambil dari unicode ataupun alphanumeric. Simbol-simbol aneh yang tidak dapat kita ketik dapat kita tampilkan dengan entities. Contohnya:© <!-- Keluarannya: © -->
Langkah Belajar
Setelah membaca tulisan ini, langkah belajar berikutnya yaitu mempelajari elemen-elemen (tags) yang biasa digunakan seperti untuk membuat heading, paragraph, link, memuat gambar, dll. Setelah mengenal banyak elemen, barulah mulai pelajari atribut-atribut yang dapat digunakan. Cara tercepatnya adalah praktik dengan cara "mengotak-atik" kode yang ada. Coba ubah-ubah dan lihat hasilnya. Ambil source dari internet kemudian "otak-atik", begitulah cara tercepat supaya bisa menguasai HTML. Setelah belajar HTML, sebaiknya pelajari CSS (Cascading Style Sheet) yang digunakan untuk mendesain (mempercantik HTML). Tidak enak bukan jika yang kita lihat hanya hitam dan putih? Maka dari itu pelajari CSS setelah HTML sudah dirasa cukup kuat.Setelah mempelajari HTML dan CSS. Apakah cukup? Tentu saja belum. Saya sarankan Anda pelajari JavaScript (ECMA Script) untuk membuat halaman website yang interaktif. Dengan CSS3 kita sudah dapat membuat animasi, namun dengan JavaScript kita dapat membuat yang lebih keren!
0 komentar :
Posting Komentar
Komentar saya buka untuk umum termasuk Anonim. Gunakanlah bahasa Indonesia yang baik dan benar.