Modul Web

SMK
WIDYAGAMA
MALANGJUDUL JOB SHEET :
Dasar-dasar HTMLUNIT KOMPETENSI :
A. Tujuan Pembelajaran
a. Memahami struktur dasar dokumen HTML
b. Mampu membuat dokumen HTML yang baik dan benar
B. Petunjuk
Awali setiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan.
Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
Tanyakan kepada guru apabila ada hal-hal yang kurang jelas.
C. Dasar Teori
a. HTML
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.
b. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html> dan diakhiri dengan
komplemennya, yakni tag </html> tag. Sebagai tambahan, 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 title bar
browser.
1
Jurusan Rekayasa Perangkat Lunak
SMK Widyagama Malang
Tag<body> dan</body>: digunakan untuk melingkupi semua teks yang

terdapat di halaman HTML.
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<!dandiakhiridengantag>.
D. Latihan
a. Membuat Dokumen HTML
Peralatan yang
diperlukan
untuk membuat
dokumen
HTML
sangat
sederhana, yakni sebuah editor teks, misalnya notepad++. Di editor inilah nantinya
kita menuliskan elemen-elemen HTML untuk membentuk suatu halaman aplikasi
web.
Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
<html>
<head>
<!Inibariskomentar,tidakdiproses>
<title>Inijuduldokumen</title>
</head>
<body>
Iniadalahteksdibody
</body>
</html>
3. Simpan dokumen HTML dengan nama latihan1.html dan letakkan di lokasi

direktori web. Untuk mengetahui hasil pembuatan dokumen HTML, klik ganda
file yang telah Anda buat. Hasilnya akan terlihat seperti Gambar 1.
Gambar 1 Tampilan halaman web

2
b. 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. Letakkan file dokumen di direktori web, misalnya untuk web server Wamp
lokasi defaultnya adalah di folder www.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL.
c. Format Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk
pemformatan teks.
Heading
Teks dalam dokumen umumnya mempunyai judul topik. Pada HTML, judul ini
disebut dengan Heading. Heading juga bisa digunakan untuk menunjukkan tingkat
keberartian suatu teks yang dituliskan. 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.
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
</body>
Simpan dengan nama heading.html
3
Gambar 2. Tampilan heading 1-6
Elemen heading menyediakan atribut align yang dapat digunakan untuk

mengatur posisi teks.
<body>
<h1align="right">Heading1iniadadikanan</h1>
<h2align="left">Heading2iniadadikiri</h2>
<h3align="center">Heading3iniadaditengah</h3>
</body>
Simpan dengan nama posisi_heading.html
Gambar 3. Mengatur posisi heading
Paragraf
Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari
kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag

<p>...</p>. Tag<p>...</p> sebenarnya merupakan tag pasangan, meski dalam
implementasinya kerap kali diabaikan.
4
<body>
<p>Iniparagrafpertama.Iniparagrafpertama.Iniparagrafpertama.Iniparagraf
pertama.Iniparagrafpertama.Iniparagrafpertama.Iniparagrafpertama.Ini
paragrafpertama.Iniparagrafpertama.Iniparagrafpertama.Iniparagrafpertama.
Iniparagrafpertama.</p>
<p>Iniparagrafkedua.Iniparagrafkedua.Iniparagrafkedua.Iniparagrafkedua.
Iniparagrafkedua.Iniparagrafkedua.Iniparagrafkedua.Iniparagrafkedua.Ini
paragrafkedua.Iniparagrafkedua.Iniparagrafkedua.Iniparagrafkedua.Ini
paragrafkedua.Iniparagrafkedua.</p>
<p>Iniparagrafketiga.Iniparagrafketiga.Iniparagrafketiga.Iniparagraf
ketiga.Iniparagrafketiga.Iniparagrafketiga.Iniparagrafketiga.Iniparagraf
ketiga.Iniparagrafketiga.Iniparagrafketiga.Iniparagrafketiga.Iniparagraf
ketiga.Iniparagrafketiga.</p>
</body>
Simpan dengan nama paragraf.html

Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan
memanfaatkan atributalign. Sebagai contoh, dokumen berikut akan menghasilkan
paragraf rata tengah, kiri kanan, dan kanan.
<head>
<title>DemoParagraf</title>
</head>
<body>
<palign="center">
Iniparagrafratatengah.
<palign="justify">
Paragrafiniratakanankiri.Paragrafiniratakanankiri.Paragrafiniratakanan
kiri.Paragrafiniratakanankiri.Paragrafiniratakanankiri.Paragrafinirata
kanankiri.Paragrafiniratakanankiri.Paragrafiniratakanankiri.Paragraf
iniratakanankiri.Paragrafiniratakanankiri.Paragrafiniratakanankiri.
Paragrafiniratakanankiri.Paragrafiniratakanankiri.Paragrafiniratakanan
kiri.
<palign="right">
Iniparagrafratakanan.
</body>
Simpan dengan nama posisi_paragraf.html
5
Gambar 4. Mengatur posisi paragraf
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/>.
<body>
Membuatbarisbaru<br/>
Membuatbarisbaru<br/>
<p>

Loremipsumdolorsitamet,consecteturadipisicingelit,<br/>
seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
<br/>
Utenimadminimveniam,quisnostrudexercitationullamcolaboris
nisiutaliquipexeacommodoconsequat.
</body>
Simpan dengan nama membuat_baris_baru.html
Gambar 5. Membuat baris baru

6
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<
dan karakter> dinyatakan dengan>.
<body>
<b>Menggunakantag<b>...</b></b><br/>
<strong>Menggunakantag<strong>...</strong></strong>
<br/>
<i>Menggunakantag<i>...</i></i><br/>
<em>Menggunakantag<em>...</em></em><br/>
<u>Menggunakantag<u>...</u></u><br/>
<strike>Menggunakantag<strike>...</strike></strike>
<br/>
</body>
Simpan dengan nama entitas.html
Gambar 8. Menggunakan style font
7
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.
KarakterDesktipsiTag HTMLCent¢Pound£Yen¥
Euro€Copyright©Registered®Trademark™
<body>
£Pound<br/>
€Euro<br/>
©Copyright<br/>
®Registered<br/>
™Trademark<br/>
</body>
Simpan dengan nama karakter_khusus.html
Gambar 9. Karakter-karakter khusus

d. 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.
8
<body>
<pre>
No|Nama
|Alamat
|PT.Bintang
|Jl.TerusanSurabaya
|PT.SinarJaya|Jl.Tidar
|PT.Mitra
|Jl.Galunggung
|PT.Harapan
|Jl.Jombang
|PT.Barokah
|Jl.Bondowoso
</pre>
</body>
Simpan dengan nama preformatted.html
Gambar 10. Tampilan preformatted text
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.
<body>
Membuatgarishorizontal<hr/>
<p>
Loremipsumdolorsitamet,consecteturadipisicingelit,<br/>
seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.<br/>
Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquip
exeacommodoconsequat.
<hr/>
</body>
9
Simpan dengan nama horizontal_rule.html
Gambar 11. Garis horizontal
7. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor
di tag<body>. Atribut ini dapat diisi dengan nama warnamisalnya red atau kode
heksadesimalmisalnya #FFFFFF. Khusus untuk elemen-elemen lain tertentu,
tersedia atributcolor yang memungkinkan kita melakukan pewarnaan. Sama
sepertibgcolor, nilai atribut ini juga dapat berupa nama warna atau kode
heksadesimal.

<bodybgcolor="aqua">
<h3align="center">Heading3</h3>
<fontcolor="red">Fontberwarnamerah</font><br/>
<fontcolor="#FF0000">
Fontberwarnamerah(menggunakannilaiheksa)</font>
</body>
Simpan dengan nama pewarnaan.html
Gambar 11. Pewarnaan pada HTML

10
Soal Latihan
1. Apa kepanjangan dari HTML? Jelaskan!
2. Apa kepanjangan dari WWW?
3. Ada berapa pasang tag utama dalam HTML? Sebutkan dan jelaskan masingmasing tag tersebut!
4. Tag apa yang digunakan untuk menuliskan judul pada tittlebar web browser?
5. Tag apa yang digunakan untuk menuliskan isi dari web?
6. Tuliskan apa yang telah kamu ketahui tentang heading?
7. Tuliskan contoh kode bagaimana meletakkan heading di posisi sebelah
kanan?
8. Apa fungsi dari tag <p>?
9. Apa fungsi dari tag <pre>?
10. Apa fungsi dari tag <hr>?
11. Apa fungsi dari tag <br>?
12. Tuliskan kode untuk cara memberi warna biru pada huruf?
Tugas untuk ditulis di blog masing-masing:
Tulislah bagaimana cara memberi warna pada garis horizontal seperti di
bawah ini?
11

Modul Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web

Diunggah oleh

Hak Cipta:

Format Tersedia

SMK

Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.

Tanyakan kepada guru apabila ada hal-hal yang kurang jelas.

Tag<body> dan</body>: digunakan untuk melingkupi semua teks yang

3. Simpan dokumen HTML dengan nama latihan1.html dan letakkan di lokasi

Gambar 1 Tampilan halaman web

b. Publikasi Halaman Web

Simpan dengan nama heading.html

Gambar 2. Tampilan heading 1-6

Elemen heading menyediakan atribut align yang dapat digunakan untuk

Simpan dengan nama posisi_heading.html

Gambar 3. Mengatur posisi heading

kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag

implementasinya kerap kali diabaikan.

Simpan dengan nama paragraf.html

Simpan dengan nama posisi_paragraf.html

Gambar 4. Mengatur posisi paragraf

Simpan dengan nama membuat_baris_baru.html

Gambar 5. Membuat baris baru

Simpan dengan nama entitas.html

Gambar 8. Menggunakan style font

Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan

Simpan dengan nama karakter_khusus.html

Gambar 9. Karakter-karakter khusus

Simpan dengan nama preformatted.html

Gambar 10. Tampilan preformatted text

Simpan dengan nama horizontal_rule.html

Gambar 11. Garis horizontal

Simpan dengan nama pewarnaan.html

Gambar 11. Pewarnaan pada HTML

Anda mungkin juga menyukai