Pengenalan HTML (Hyper Text Marup Language)



HTML dan XHTML

HTML (HyperText Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.

Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML.

Perkembangan HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun 2009.HTML5 dibangun oleh konsorsium W3C untuk dimasukkan sebagai perubahan besar berikutnya pada standar HTML. Atas dasar ini, maka penting sekali untuk mengenal dan memahami HTML5 dengan baik.

Struktur Dokumen HTML

Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan komplemennya, yakni tag</html> tag. Dokumen HTML juga menyertakan tiga pasang tag :

1. Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen HTML.
2. Tag <title> dan </title>: digunakan untuk menambahkan title di title bar browser.
3. Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.

Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatkan sebagai berikut:



Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai berikut:


Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag <!-- dan diakhiri dengan tag -->.

Persiapan Kebutuhan

Pada praktikum awal ini, meskipun dokumen HTML bisa ditampilkan tanpa menggunakan web server, namun di sini diwajibkan tetap menggunakan. Selain itu, praktikum ini juga menuntut pembuatan kode-kode yang baik, benar, dan valid.Berikut ini adalah kebutuhan- kebutuhan yang minimal diperlukan :

a. XAMPP/WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b. Web Browser
Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya juga memanfaatkan browser lain.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).

Latihan Pengenalan HTML

Membuat Dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi. Di mana header mendefinisikan informasi mengenai dokumen, sedangkan bodi mendefinisikan tubuh atau isi dokumen.

Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:

3. Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi direktori web (C:\wamp\www atau C:\xampp\htdocs) Perhatikan, www dan htdocs merupakan direktori web dan sebaiknya buat subdirektori di dalamnya.

Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik ganda di mana pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah cara untuk menjalankan halaman web di server lokal.

Publikasi Halaman Web

Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.

Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen. Perhatikan contohnya seperti Gambar 2.


Format Teks

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.

1. Heading

Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe dengan nilai 1-6.

Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar.



Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.



2. Paragraf

Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan.



Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri kanan, dan kanan.



Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya, gunakan tag line break <br />.



3. Fontase

HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi.

Sebagai tambahan, di sini juga akan dijelaskan mengenai cara mencetak tag. Seperti diketahui, tag <p> di dokumen secara otomatis akan diterjemahkan sebagai paragraf. Adapun untuk mencetak karakter <p> di layar, kita perlu menggunakan nama entitas. Sebagai contoh, karakter < dinyatakan dengan nama entitas &lt; dan karakter > dinyatakan dengan &gt;.




4. Karakter Khusus

Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter khusus yang dapat digunakan beserta nama entitasnya.