Pengenalan HTML
Yuliani Dwi Asih, [Link]
Rekayasa Perangkat Lunak
SMK Negeri 1 Bawang
PWPB - RPL SMKN 1 Bawang 1
Pengenalan HTML
Hypertext Markup Language (HTML) adalah bahasa standard yang digunakan untuk
menampilkan halaman web. Yang bisa dilakukan dengan HTML yaitu:
1. Mengatur tampilan dari halaman web dan isinya
2. Membuat tabel dalam halaman web
3. Mempublikasikan halaman web secara online
4. Membuat form yang bisa digunakan untuk mengamati registrasi dan transaksi via
web
5. Menambahkan objek-objek seperti citra, audio, video, animasi, java applet dalam
halaman web
6. Menampilkan area gambar (canvas) di browser
A. Tag dan Elemen HTML
Penanda perintah di dalam HTML biasanya disebut TAG. Tag digunakan untuk
menentukan tampilan dari dokuman HTML.
<BEGIN TAG> Isi dokumen </END TAG>
Tag ada juga yang tidak dipasangkan dengan format seperti berikut:
<TAG> Isi dokumen
Namun perlu diperhatikan bahwa tag <p> lebih baik diakhiri dengan tag </p>
karena untuk kedepannya, HTML mengharuskan penggunaan end tag. Dokumen
HTML diawali dengan tag <HTML> dan diakhiri dengan tag </HTML>
1. Head
Elemen HEAD merupakan kepala dari dokumen HTML. Tag <head>..... </head>
terletah diantara tag <html> ..... </html>
1. <HTML>
2. <head>
3. ......................
4. </head>
5. </HTML>
2. Title
Elemen TITLE merupakan judul dari dokumen HTML yang ditampilkan pada
judul jendela browser. Tag <title> ..... </title> terletak diantara tag <head> ....
</head> seperti pada contoh script berikut:
PWPB - RPL SMKN 1 Bawang 2
1. <HTML>
2. <head>
3. <title> Judul Halaman </title>
4. </head>
5. </HTML>
3. Body
Elemen ini untuk menampilkan isi dokumen HTML. Tag <body> ..... </body>
terletak di bawah tag <head> .... </head>. Elemen BODY mempunyai atribute-
atribute yang menspesifikasikan khususnya warna dan latar belakan dokumen
yang akan ditampilkan pada browser.
1. <HTML>
2. <head>
3. <title> Judul Halaman </title>
4. </head>
5. <body text=”a” bgcolor=”b” background=”url” link=”c”
alink=”d” vlink=”e”>
6.
7. ... isi dokumen yang akan ditampilkan ...
8.
9. </body>
10. </HTML>
Keterangan:
Bentuk dari tag HTML adalah <ELEMENT ATTRIBUTE=value>
Elemen : nama tag
Attribute : atribut dari tag
Value : nilai dari atribut
Text : memberikan warna pada text
Bgcolor : memberikan warna pada latar belakang dokuen HTML
Background : memberikan latar belakang dokumen HTML dalam bentuk
gambar
Link : memberikan warna untuk link
Alink : memberikan warna untuk link yang sedang aktif
Vlink : memberikan warna untuk link yang telah dikunjungi
Contoh:
a. Buka Visual Studio Code, kemudian tuliskan kode program berikut:
PWPB - RPL SMKN 1 Bawang 3
1. <HTML>
2. <head>
3. <title> Latihan HTML </title>
4. </head>
5. <body>
6.
7. Hallo,
8. tulisan ini akan tampak pada browser.
9.
10. </body>
11. </HTML>
Simpan dengan nama [Link] kemudian buka [Link] dengan
menggunakan browser
b. Buka Visual Studio Code, kemudian tuliskan kode program berikut:
1. <HTML>
2. <head>
3. <title> Latihan HTML </title>
4. </head>
5. <body bgcolor=”yellow” text=”red”>
6.
7. Hallo,
8. tulisan ini akan tampak pada browser.
9.
10. </body>
11. </HTML>
Simpan dengan nama [Link] kemudian buka
[Link] dengan menggunakan browser
PWPB - RPL SMKN 1 Bawang 4
c. Buka Visual Studio Code, kemudian tuliskan kode program berikut:
1. <HTML>
2. <head>
3. <title> Latihan HTML </title>
4. </head>
5. <body bgcolor=”#008000” text=”#0000ff”>
6.
7. Hallo,
8. tulisan ini akan tampak pada browser.
9.
10. </body>
11. </HTML>
Simpan dengan nama [Link] kemudian buka [Link]
dengan menggunakan browser
Gantilah warna-warnanya dengan warna lain sesuai tabel berikut:
black #000000 blue #0000ff olive #808000
white #ffffff fuchsia #ff00ff green #008000
red #ff0000 gray #808080 teal #008080
yellow #ffff00 silver #c0c0c0 navy #000080
lime #00ff00 maroon #800000 purple #800080
4. Paragraf dan Pemformatan Teks
Penulisan paragraf bisa menggunakan tag <p>. Adapun untuk memformat
tulisan/teks bisa menggunakan berbagai macam tag sesuai dengan keperluannya
sesuai dengan tabel berikut ini:
Tag Deskripsi
<b> Membuat teks tercetak tebal
<em> Membuat penekanan pada teks (emphasized)
<small> Membuat teks tercetak kecil
<i> Membuat teks tercetak miring
PWPB - RPL SMKN 1 Bawang 5
Tag Deskripsi
<strong> Menyatakan bahwa teks tersebut penting
<sub> Membuat teks tercetak sebagai subscript
<sup> Membuat teks tercetak sebagai superscript (pangkat)
<ins> Menyatakan teks yang diapit tag <ins> itu disisipkan
<del> Menyatakan teks yang diapit tag <del> itu dihapus (dicoret)
<mark> Menyatakan teks yang ditanai (highlighted). Efeknya seperti
tulisan yang diberi “stabilo”
Contoh:
a. Buka Visual Studio Code, kemudian tuliskan kode program berikut:
1. <HTML>
2. <head>
3. <title> Latihan HTML Tipe Tekx </title>
4. </head>
5. <body>
6. Ada tiga macam tipe tulisan yang paling sering
digunakan dalam penulisan dokumen apa saja. <br>
7. Ketiga tipe tersebut ialah tulisan <b>tebal</b>,
tulisan <i>miring</i>, dan tulisan <u>bergaris
bawah</u>, <br>
8. tulisan <b><u>tebal dan bergaris bawah</u></b>
atau tulisan <i><u>miring dan bergaris
bawah</u></i>. <br>
9. Bahkan bisa pula ketiga tipe tersebut sekaligus
bergabung menjadi satu tulisan <br>
10. <b><i><u>tebal, miring dan bergaris
bawah</u></i></b>
11. </body>
12. </HTML>
Simpan ke dalam [Link] kemudian bukalah [Link]
menggunakan browser
PWPB - RPL SMKN 1 Bawang 6
Perlu diketahui bahwa di dalam HTML untuk mengganti baris harus
menggunakan tag. Tag yang digunakan adalah <br>
b. Bukalah Visual Studio Code, kemudian tuliskan kode program berikut:
1. <HTML>
2. <head>
3. <title> Latihan HTML Tipe Tekx </title>
4. </head>
5. <body>
6. <font face=”verdana” size=”+8”>Pendahuluan</font>
7. <p style=”font-family: times”>
8. Latar Belakang <br>
9. Rumusan Masalah <br>
10. Tujuan Penelitian
11. </p>
12. </body>
13. </HTML>
Simpan ke dalam [Link] kemudian bukalah [Link]
menggunakan browser
Tag <font> sudah mulai ditinggalkan di HTML 4.01. Bahkan di HTML 5, tag
<font> sudah tidak didukung lagi. Sebagai gantinya bisa menggunakan CSS
(attribute style) dengan contoh seperti di atas.
B. Komentar
Komentar sangat berguna untuk memberikan keterangan pada kode program.
Dengan adanya komentar maka kode akan lebih mudah dibaca dan dimengerti
sehingga ketika ada kesalahan akan lebih mudah diperbaiki. Di dalam HTML ada
cara khusus untuk memberikan komentar.
Contoh:
Bukalah Visual Studio Code, kemudian tuliskan kode-kode berikut dan simpan
PWPB - RPL SMKN 1 Bawang 7
dalam file [Link]:
1. <HTML>
2. <head>
3. <title> Latihan HTML Komentar </title>
4. </head>
5. <body bgcolor=”blue” text=”green”> <!- warna BG jadi
biru -->
6. <h1>Hallo apa kabar?</h1>
7. </body>
8. </HTML>
Buka file [Link] pada browser
Contoh di atas memiliki komentar dengan kode program <!- warna background
jadi biru -->
C. List
Untuk menampilkan daftar dalam halaman web, HTML memiliki tag khusus untuk
itu. Jika daftar tersebut tidak terurut (tampil menggunakan bullet), maka tag yang
digunakan adalah <UL> yang berarti unordered list. Namun jika daftar tersebut
adalah daftar yang penting urutannya maka tag yang digunakan adalah <OL>
ordered list.
Contoh:
Bukalah Visual Studio Code, kemudian tuliskan kode berikut:
1. <html>
2. <head>
3. <title> Latihan List </title>
4. </head>
5. <body>
6. <h1 align=”center”>Tugas Akhir Kelompok </h1>
PWPB - RPL SMKN 1 Bawang 8
7. <ul>
8. <li> Pendahuluan
9. <ol>
10. <li> Latar Belakang
11. <li> Rumusan Masalah
12. <li> Tujuan
13. <li> Batasan Masalah
14. </ol>
15. <li> Daftar Pustaka
16. <ol>
17. <li> Definisi Website
18. <li> Hypertext Markup Language (HTML)
19. </ol>
20. </ul>
21. </body>
22. </html>
Simpan ke dalam file [Link] kemudian buka menggunakan browser
D. Frame
Fungsionalitas bukanlah satu-satunya faktor penting terhadap baik atau tidaknya
sebuah web. Tampilan adalah faktor lain juga yang penting agar sebuah website
mudah dan nyaman digunakan serta membuat pengunjungnya berkunjung lagi dan
lagi. Oleh karena itu, website harus terdesain tampilannya dengan baik.
Di dalam HTML ada dua buah cara dasar untuk mendesain layout sebuah website
yaitu frame dan tag div. Keduanya memiliki kelebihan dan kelemahan masing-
masing. Frame mudah digunakan tapi dari sisi tampilan kurang begitu indah. Tag
div agak ribet penggunaannya tapi tampilannya lebih rapi.
Frame digunakan untuk membagi jendela browser menjadi beberapa bagian
PWPB - RPL SMKN 1 Bawang 9
terpisah. Masing-masing bagian terdiri dari dokumen HTML tersendiri. Ini adalah
mekanisme paling sederhana dalam me-layout sebuah halaman web. Namun di
HTML 5, tag <frame> sudah tidak lagi digunakan.
Untuk membuat sebuah frame, tag yang digunakan adalah:
Tag <FRAMESET>
Tag <FRAME>
Tag <NOFRAME>, digunakan untuk menampilkan sebuah alternatif dokumen
atau menampilkan pesan jika browser tidak mendukung penggunaan frame.
E. Link
Link menjadi penghubung antara satu halaman dengan halaman lainnya. Link
merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika
link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan
Anchor, yaitu tag <A>.
Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF
digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut
NAME digunakan jika anchor akan digunakan sebagai tujuan.
Contoh:
Bukalah Visual Studio Code kemudian ketikan kode program seperti berikut:
1. <html>
2. <head>
3. <title> Latihan Hyperlink </title>
4. </head>
5. <body>
6. <h1 align=”center”>Daftar Isi </h1>
7. <ul>
8. <li> <a href=”[Link]”> Hypertext Markup
Language (HTML)</a>
9. <li> <a href=”[Link]”> Cascading Style
Sheet (CSS) </a>
10. </ul>
11. </body>
12. </html>
Simpan file tersebut dengan nama [Link], kemudian buat file lagi dan
ketikan kode program berikut lalu simpan dengan nama [Link]
PWPB - RPL SMKN 1 Bawang 10
1. <html>
2. <head>
3. <title> Latihan Hyperlink </title>
4. </head>
5. <body>
6. <h1> Belajar HTML itu seru... </h1>
7. </body>
8. </html>
Buat file lagi dengan nama [Link] dan isi dengan kode berikut:
1. <html>
2. <head>
3. <title> Latihan Hyperlink </title>
4. </head>
5. <body>
6. <h1> Percantik websitemu dengan CSS </h1>
7. </body>
8. </html>
Setelah itu buka browser dan jalankan [Link]
Apabila kita mengeklik link Hypertext Markup Language(HTML) maka akan
tampil [Link] seperti pada gambar di bawah ini.
PWPB - RPL SMKN 1 Bawang 11
F. Image
Tampilan halaman web akan lebih menarik jika ditambah media gambar. HTML
mendukung banyak format gambar seperti gif, jpeg, pcx, wmf, png, dan sebagainya.
Namun jika gambar kita ingin dikenali oleh mayoritas browser, maka gif dan jpeg
adalah format yang paling cocok. Untuk menambah gambar digunakan tag <IMG>
Tag <IMG> mempunyai atribut:
Atribut Keterangan
SRC Menunjukan URL atau direktori tempat file gambar berada
WIDTH Lebar gambar (dalam pixel)
HEIGHT Tinggi gambar (dalam pixel)
ALIGN Posisi teks disekitar gambar. Alternatif nilainya adalah TOP,
MIDLE, BOTTOM, LEFT, RIGHT. Atribut ini tidak dikenali
di HTML 5 dan mulai ditinggalkan di HTML 4.01
ALT Menampilkan teks pengganti gambar jika gambar tidak dapat
ditampilkan
Contoh:
Bukalah Visual Studio Code lalu ketikan kode berikut:
1. <html>
2. <head>
3. <title> Menyisipkan Gambar </title>
4. </head>
5. <body>
6. <h1> Rekayasa Perangkat Lunak </h1>
7. <img src=”[Link]” align=”middle”>
8. </body>
9. </html>
Simpan dengan nama [Link] kemudian buka menggunakan browser. Logo-
[Link] adalah nama file gambar. Ganti nama file gambar sesuai dengan nama file
gambar yang akan kalian tampilkan.
PWPB - RPL SMKN 1 Bawang 12
G. Form
Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user
untuk kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan
menggunakan skrip yang sesuai server-side. Untuk membuat sebuah form, tag
<FORM>, tag <TEXTAREA>, tag <SELECT>, tag <INPUT>
1. Tag Form
Tag <FORM>merupakan tag yang digunakan untuk mendefinisikan sebuah form.
Tag ini mempunyai dua atribut, yaitu METHOD dan ACTION.
Atribut Keterangan
METHOD Untuk menentukan metode pengolahan form. Pilihan
method adalah post dan get
ACTION Untuk menentukan URL atau lokasi dari file yang
digunakan untuk mengolah form tersebut
2. Tag Textarea
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multibaris. Tag
ini mempunyai beberapa atribut, yaitu:
Atribut Keterangan
NAME Mendefinisikan nama textarea
ROWS Menentukan beberapa jumlah baris textarea
COLS Menentukan lebar dari textarea
3. Tag Select
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini
memiliki beberapa atribut, yaitu:
Atribut Keterangan
NAME Mendefinisikan nama objek select
DISABLED Menentukan apakan dropdown list tidak diaktifkan
SIZE Menentukan beberapa pilihan yang akan ditampilkan
REQUIRED Menyatakan bahwa user harus memilih sebelum form
disubmit (baru di HTML 5)
MULTIPLE Mengizinkan untuk memilih lebih dari satu
AUTOFOCUS Memerintahkan browser agar drop-down list secara
otomatis mendapatkan fokus pada saat halaman
dimuat ke browser.
Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>.
tag <OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan
PWPB - RPL SMKN 1 Bawang 13
untuk memberi nama item pilihan dan SELECTED yang menunjukan pilihan
default.
4. Tag Input
Tag <INPUT> digunakan untuk membuat elemen-elemen yang digunakan untuk
informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag
ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu:
Atribut Keterangan
NAME Mendefinisikan nama dari elemen input. Atribut ini harus
dituliskan kecuali untuk type submit dan reset
SIZE Menentukan lebar dari elemen input
MAXLENGTH Menentukan jumlah maksimum karakter
VALUE Untuk kotak teks, menentukan teks tertulis, untuk checkbox
atau radio, menentukan nilai item yang dipilih. Untuk submit
dan reset, menentukan teks yang tertulis pada tombol
CHECKED Hanya digunakan untuk checkbox atau radio. Menentukan
pilihan default
TYPE Menentukan tipe input yang dibuat
Tipe input yang dapat dibuat adalah:
Text : digunakan untuk membuat kotak teks
Password : digunakan untuk membuat kotak teks, tetapi semua karakter
akan ditampilkan dengan tanda *
Check Box : digunakan untuk membuat suatu daftar pilihan yang dapat
dipilihlebih dari satu
Radio : digunakan untuk membuat suatu daftar pilihan yang hanya dapat
dipilih satu saja
Reset : digunakan untuk membuat tombol yang fungsinya untuk menghapus
semua isian form yang telah diberikan
Submit : digunakan untuk membuat tombol yang fungsinya untuk
mengirimkan data form agar diolah
CONTOH:
Buka Visual Studio Code kemudian tuliskan kode program berikut:
PWPB - RPL SMKN 1 Bawang 14
1. <html>
2. <head>
3. <title> Membuat Formulir </title>
4. </head>
5. <body>
6. <h1> Biodata Siswa </h1>
7. <form>
8. Isilah Form di Bawah Ini:
9. <hr>
10. Nama Lengkap: <input type=”text” name=”txtNama”><br>
11. Alamat: <textarea name=”txtAlamat”></textarea><br>
12. Jenis Kelamin:
13. <input type=”radio” name=”jenkel” value=”Laki-laki”>
Laki-Laki
14. <input type=”radio” name=”jenkel” value=”Perempuan”>
Perempuan <br>
15. Agama:
16. <select name=”agama”>
17. <option value=”Islam”> Islam
18. <option value=”Kristen”> Kristen
19. <option value=”Katholik”> Katholik
20. <option value=”Hindu”> Hindu
21. <option value=”Budha”> Budha
22. </select> <br>
23. Hobi (boleh pilih lebih dari satu):
24. <input type=”checkbox” name=”hobi” value=”memasak”>
Memasak
25. <input type=”checkbox” name=”hobi” value=”futsal”>
Futsal
26. <input type=”checkbox” name=”hobi” value=”basket”>
Basket
Simpan dengan nama [Link] kemudian buka menggunakan browser. Perlu
juga kita amati bahwa untuk satu jenis INPUT yang sama maka nilai dari atribut
NAME juga harus sama. Misal elemen INPUT checkbox dan radio.
PWPB - RPL SMKN 1 Bawang 15
H. Tabel
Tabel sering digunakan dalam website. Misalnya saja dalam menampilkan data
siswa, rekap keuangan, dan sebagainya. Dengan tabel biasanya tampilan data akan
terlihat lebih rapi. Tampilan data yang berasal dari database pun akan lebih nyaman
dilihat jika ditampilkan dalam bentuk tabel. Oleh karena itu, sangatlah penting
untuk mempelajari bagaimana pembuatan tabel di dalam web programming
khususnya HTML.
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
1. Tag <TABLE> : untuk mendefinisikan sebuah tabel
2. Tag <TR> : untuk mendefinisikan baris tabel
3. Tag <TH> : untuk mendefinisikan judul pada sel dalam tabel
4. Tag <TD> : untuk mendefinisikan isi setiap sel dalam tabel
Atribut untuk tag <TABLE> adalah sebagai berikut:
Atribut Keterangan
ALIGN Posisi horizontal tabel (center, justify, left, right)
BACKGROUND Menentukan gambar latar belakang tabel
BGCOLOR Menentukan warna latar belakang tabel
BORDER Menentukan tebal bingkai tabel
BORDERCOLOR Menentukan warna bingkai tabel
BORDERCOLORLIGHT Menentukan warna depan bingkai tabel
BORDERCOLORDARK Menentukan warna bayangan bingkai tabel
CELLSPACING Menentukan jarak spasi antar cell
CELLPADDING Menentukan jarak isi sel dengan bingkai
HEIGHT Menentukan tinggi tabel
WIDTH Menentukan lebar tabel
VALIGN Menentukan posisi vertikal teks dalam tabel (baseline,
top, bottom, middle)
Sedangkan atribut tag <TD> adalah:
Atribut Keterangan
ALIGN Posisi horizontal teks dalam sel (center, justify, left,
right)
BACKGROUND Menentukan gambar latar belakang sel
BGCOLOR Menentukan warna latar belakang sel
BORDER Menentukan tebal bingkai sel
PWPB - RPL SMKN 1 Bawang 16
Atribut Keterangan
BORDERCOLOR Menentukan warna bingkai sel
BORDERCOLORLIGHT Menentukan warna depan bingkai sel
BORDERCOLORDARK Menentukan warna bayangan bingkai sel
COLSPAN Menentukan jumlah kolom yang digabung
HEIGHT Menentukan tinggi sel
NOWRAP Nenentukan teks agar tetap satu baris
ROWSPAN Menentukan jumlah baris yang digabung
VALIGN Menentukan posisi vertikal teks dalam sel (baseline,
top, bottom, middle)
Contoh:
Buka Visual Studio Code kemudian tuliskan kode program berikut:
1. <html>
2. <head>
3. <title> Membuat Tabel </title>
4. </head>
5. <body>
6. <table border="1">
7. <tr>
8. <th bgcolor="#999999" scope="row">Klub</th>
9. <td>Nama Pemain</td>
10. <td>Tahun Lahir</td>
11. </tr>
12. <tr>
13. <th rowspan="3" bgcolor="#999999"
scope="row"><p>PERSIB 2012</p></th>
14. <td>Firman Utina</td>
15. <td>1981</td>
16. </tr>
17. <tr>
18. <td>Atep</td>
19. <td>1985</td>
20. </tr>
21. <tr>
22. <td>Dzumafo Epandi Herman</td>
23. <td>1980</td>
24. </tr>
25. <tr>
26. <th rowspan="2" bgcolor="#999999"
scope="row">Bandung FC 2011</th>
PWPB - RPL SMKN 1 Bawang 17
27. <td>Lee Hendrie</td>
28. <td>1977</td>
29. </tr>
30. <tr>
31. <td>Yaris Riadi</td>
32. <td>1973</td>
33. </tr>
34. </table>
35. </body>
36. </html>
Simpan file dengan nama [Link] kemudian jalankan di browser
PWPB - RPL SMKN 1 Bawang 18
DAFTAR PUSTAKA
Hidayatullah, P., & Kawistara, J.K. (2017). Pemrograman Web. Bandung: Informatika.
PWPB - RPL SMKN 1 Bawang 19