MODUL
FORMAT TEKS PADA HTML
A. Tujuan Pembelajaran
1. Mampu memahami struktur dasar dokumen
HTML
2. Mampu membuat dokumen HTML yang baik dan
benar
3. Mampu memanfaatkan elemen-elemen dasar
untuk menampilkan informasi
B. Materi Pembelajaran
1. 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 dimasukka sebagai
perubahan besar berikutnya pada standar HTML. Atas dasar ini, maka penting
sekali untuk mengenal dan memahami HTML5 dengan baik.
2. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html> dan
diakhiri dengan komplemennta, yakni tag </html> tag. Dokumen HTML juga
menyertakan tiga pasang tag.
·
Tag <head> dan </head>
: digunakan untuk menyatakan informasi mengenai dokumen HTML
·
Tag <title> dan
</title> : digunakan untuk menambahkan title di judul browser.
·
Tag <body> dan </body>
: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.
Bentuk struktur dokumen HTML yang standar 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 -->.
3. 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. 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).
d. HTML Validator Untuk
menghasilkan dokumen HTML yang valid, sangat disarankan memasang validator,
misalnya berupa add-on pada browser Firefox.
C. Latihan Praktikum
1. Membuat Dokumen HTML
Secara garis besar,
struktur dokumen HTML terdiri dari dua bagian: header dan body. Header
mendefinisikan informasi mengenai dokumen, sedangkan body mendefinisikan tubuh
atau isi dokumen. Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai
berikut:
a. Buka editor teks
b. Ketikkan teks (kode-kode HTML) berikut:
c. Simpan dokumen HTML dengan nama
modul1_latihan1.html dan letakkan di lokasi direktori web, misal D:\xampp\htdocs\modul1.
Perhatikan, Modul1 merupakan direktori web dan sebaiknya buat subdirektori di dalamnya.
Bagaimanapun,
dokumen HTML memang bisa ditampilkan dengan mengklik ganda dimanapun lokasinya.
Namun perlu diperhatikan, langkah ini bukanlah cara untuk menjalankan halaman
web di server lokal.
2. 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.
a. Pastikan bahwa file dokumen
sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya
adalah www. Untuk paket web server lainnya, termasuk Apache (versi
tunggal) adalah htdocs.
b. Pastikan bahwa web server
sudah dijalankan.
c. Buka web browser, kemudian
ketikkan alamat URL yang merujuk ke lokasi dokumen. Perhatikan contohnya
seperti Gambar 2.
3. Format Teks
HTML
menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.
·
Heading
Heading merupakan salah satu elemen
penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag
<h1><h2><h3><h4><h5><h6> dan diakhiri
dengan </h1></h2></h3></h4></h5></h6>.
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.
·
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 />.
·
Fontase
HTML menyediakan sejumlah elemen yang
dapat dimanfaatkan untuk mengatur font, seperti huruf tebal, huruf miring,
garis bawah, dan masih banyak lagi. Sebagai tambahan, disini 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 < dan karakter >
dinyatakan dengan >
·
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.
4. Preformatted Text
Adakalanya
kita menginginkan agar teks yang tertulis di editor teks dapat ditampilkan apa
adanya. Pada kasus seperti ini, kita bisa memanfaatkan keberadaan tag
<pre>. Tag ini akan menampilkan teks dengan font Courier dan tetap
mempertahankan spasi serta baris baru.
5. Garis Horizontal
Di HTML,
garis horizontal direpresentasikan melalui tag <hr />. Meskipun
kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit
berbeda, namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.
6. Menggunakan List
HTML
mendukung list dalam bentuk terurut (ordered), tak terurut (unordered),
dan definisi (definition). Untuk setiap bentuk list ini, terdapat
list item – dinyatakan melalui tag <li> berpasangan – yang
merepresentasikan item-item list.
7. Pewarnaan
Untuk
memberikan warna background, HTML menyediakan atribut bgcd or di tag
<body>. Atribut ini dapat diisi dengan nama warna – misalnya red atau
kode heksadesimal – misalnya #FFFFFF. Khusus untuk elemen-elemen lain tertentu,
tersedia atribut cd or yang memungkinkan kita melakukan pewarnaan. Sama seperti
bgcd or nilai atribut ini juga dapat berupa nama warna atau kode heksadesimal.
D. Tugas Praktikum
Buatlah
halaman web sederhana yang melibatkan teks, garis, dan warna. Dimana terdapat
minimal sebuah heading dan garis berwarna dan halaman utama dengan latar
belakang warna sembarang. !
E. Referensi
1. Prasetya, Didik Dwi. 2017. Jurusan
Teknik Elektro FT UM.
Komentar
Posting Komentar