Dasar-dasar HTML
Kegiatan
Belajar 2: Dasar-dasar HTML
a.
Tujuan
Kegiatan Pemelajaran
1)
Peserta
diklat dapat mengenali obyek-obyek web dan tag-tag HTML dalam pembuatan
halaman-halaman web.
2)
Peserta
diklat dapat mengenali fitur-fitur pengelolaan file halaman web.
3)
Peserta
diklat dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk membangun
halaman web yang disimpan dalam format HTML.
b.
Uraian
Materi 2
1)
HTML
HTML yang
merupakan kepanjangan dari Hyper Text MarkUp Language memiliki fungsi
untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web
(WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang
hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan
sebagai program.
Pada awalnya HTML
dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language).
Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka
HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format
dokumen yang berorientasi pada aplikasi.
File-file HTML merupakan
dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan
maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal
ini digunakan Notepad.
Struktur
dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut :
Gambar 3. Struktur Dasar HTML.
Keterangan :
a)
<html>
</html> : mendefinisikan bahwa teks yang berada diantara kedua tag
tersebut adalah file HTML.
b)
<head>
</head> : mendefinisikan head dalam sebuah file HTML.
c)
<title>
</title> : mendefinisikan judul yang hendak ditampilkan pada browser.
d)
<body>
</body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan
sebagai isi halaman web.
2)
Format Teks Dasar dalam HTML
a)
Heading,
HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan
dengan font lebih besar dan tebal daripada teks normal.
<h1>heading level
1</h1>, <h2>heading level 2</h2>dst.
Gambar
4. Tag Heading.
b)
Paragraf,
setiap ada paragraf baru diawali dengan <p>
<p>paragraf
satu</p>, dst.
c)
List,
HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi.
·
Tidak
bernomor (unordered list) :
<ul>
<li>satu
<li>dua
<li>tiga
</ul>
Gambar
5. Tampilan dari Tag Unordered List
·
Bernomor
(ordered list) :
<ol>
<li>satu
<li>dua
<li>tiga
</ol>
Gambar 6. Tampilan dari
Tag Ordered List
·
Definisi
(definition list) :
<dl>
<dt>
<dd>
<dt>
<dd>
</dl>
Gambar
7. Tampilan dari Tag Definition List
d)
Performatted
Text, dalam HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh.
Agar format tampilan sesuai dengan sourcenya, maka diperlukan tag <pre>.
<pre>
Nama :
Saya
Tanggal : Lahir
</pre>
Gambar
8. Tampilan dari Tag Preformatted Text
e)
Extended
Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam,
digunakan tag <blockquote>.
<p>paragraf
satu</p>
<blockquote>
<p>paragraf masuk ke
dalam</p>
</blockquote>
Gambar 9. Tampilan dari Tag
Blockquote
f)
Ganti
baris (line break), untuk menulis alamat surat dengan baris-baris pendek, tidak
bagus jika menggunakan tag <p>(spasi terlalu lebar). Maka digunakan tag
<br> untuk ganti baris.
Karangmalang.<br>
Yogyakarta.<br>
55281
g)
Garis
datar (horizontal rule), untuk membuat garis horizontal yang digunakan untuk
membatasi bagian-bagian digunakan tag <hr>. Yang dapat diikuti dengan
penentuan ukurannya dengan atribut size dan width.
<hr
size=”4” width=”75%”>
h)
Memformat
karakter,
<b> atau <strong> untuk membuat teks Bold.
<i> atau <em> untuk membuat teks Italic.
<tt> atau <code> untuk membuat teks typewriter.
Gambar 10. Hasil Format Karakter
Gambar 10. Hasil Format Karakter
3)
Dasar Link HTML
1)
Relative
dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat
dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut
sebagai relative link. Misal :
a
href=”Harga/index.html”>Daftar Harga</a>
Alamat (URL) dokumen
secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link,
disebut link absolute :
a
href=”http://gmail.google.com”>E-mail Google</a>
2)
Link
ke suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di
dua.html, caranya adalah :
Pada dokumen satu.html,
dituliskan :
<a
href=”dua.html#BT”>Tiga</a>
Pada bagian yang dituju,
dituliskan :
<a
name=”BT”>Tiga</a>
3)
Link
ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di
atas :
Pada dokumen satu.html,
dituliskan :
<a
href=”#BT”>Tiga</a>
Pada bagian yang dituju,
dituliskan :
<a
name=”BT”>Tiga</a>
4)
Mailto,
link yang langsung menuju ke alamat e-mail.
<a
href=”mailto:saya@gmail.com?subject=Masuk ga?”>
Kirim
E-mail</a>
4)
Menyisipkan Gambar
1)
Atribut
ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya.
Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan
atribut height dan width.
<img
src=”foto.fpg” height=”200” width=”100”.
2)
Pelurusan
gambar, posisi gambar terhadap teks sebelum dan sesudahnya bisa fleksibel,
misalnya lurus atas :
<img
src=”foto.bmp” align=”top”>
3)
Teks
alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser
tidak mampu menampilkan gambar tersebut.
<img
src=”foto.jpg” alt=”Foto”>
4)
Atribut
border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan
tanpa garis tepi.
<img
src=”foto.gif” border=”10”>
5)
Gambar
sebagai hyperlink.
<a
href=”registrasi.html”><img src=”foto.gif”></a>
6)
Gambar
sebagai background
<body
background=”file_gambar.jpg”>
7)
Background
warna
<body
bgcolor=”red” text=”white” link=”green”>
5)
Membuat Tabel
Tabel
merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari
kolom dan baris. Berikut contoh untuk membuat sebuah tabel yang terdiri dari 2
kolom dan 2 baris.
Gambar 11. Tag HTML untuk Membuat
Tabel
Keterangan :
a)
<table>
</table> : mendefinisikan bahwa teks di dalamnya merupakan tag-tag
pembuatan tabel.
b)
<table
border=2> : mendefinisikan penentuan ada atau tidaknya serta ukuran border
pada tabel.
c)
<tr>
</tr> : table row, mendefinisikan bahwa teks di dalamnya akan berada
dalam satu baris. Banyaknya tag <tr></tr> menunjukkan banyaknya
baris pada suatu tabel.
d)
<td>
</td> : table division, mendefinisikan isi dari suatu kolom, tag ini
selalu berada di dalam tag <tr></tr>. Banyaknya tag
<td></td> diantara tag </tr></tr> menunjukkan banyaknya
kolom dalam suatu baris.
Gambar 12.
Hasil Pembuatan Tabel
6)
Membuat Frame
Frame HTML digunakan untuk membuat
tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya
merupakan satu halaman HTML yang terpisah. Frame bernmanfaat saat suatu halaman
HTML pada suatu bagiannya gerganti-ganti isi, sedangkan pada bagian lainnya
relatif tetap, sehingga lebih menghemat bandwidth internet.
Berikut contoh pembuatan
frame :
Gambar 13.
Tag HTML untuk Membuat Frame
Keterangan :
a)
Menentukan
banyaknya baris dan tinggi masing-masing frame. Di sini dibuat dua baris dengan
tinggi 80 pixel untuk baris pertama, dan tinggi baris kedua memanfaatkan sisa
ruang pada web browser (dinyatakan dengan tanda *).
b)
Memberikan
nama pada frame pertama yang telah dibuat dan menentukan nama file yang akan
ditampilkan dalam frame tersebut.
c)
Membagi
baris kedua menjadi 2 kolom dengan ukuran kolom kiri 150 pixel dan kolom kanan
memanfaatkan sisanya.
d)
Memberikan
nama frame paling kiri pada baris kedua dengan nama left_menu dan menentukan
file menu.html menjadi isi pada frame ini. Frame sebelah kanan dinamai
main_page dengan file isi.html sebagai isinya.
e)
Mengakhiri
pembuatan frame.
Gambar 14.
Tampilan Halaman Web dengan Frame
7)
Membuat Form
Form
merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk
menjaring informasi dari pengguna. Macam-macam form :
a)
Input,
dengan tipe : text, password, checkbox, radio button, reset, submit dan hidden.
b)
Textarea.
c)
Select.
Berikut ini contoh tag
pembuatan form :
Gambar 15.
Tag HTML untuk Pembuatan Form
Gambar 16.
Tampilan Macam-Macam Form
c.
Rangkuman
2
1)
Pengenalan terhadap tag-tag HTML belum memerlukan web
editor (software web design) seperti Macromedia Dreamweaver, MX
tetapi cukup menggunakan teks editor (misalkan : Notepad).
2)
Dasar-dasar HTML mencakup struktur dasar dokumen HTML dan
format teks dasar HTML.
d.
Tugas
2
1)
Ketiklah lagi tag-tag HTML pada masing-masing contoh pada
uraian materi di atas dengan menggunakan Notepad. Kemudian simpan menjadi file
HTML (dengan ekstensi *.html) dan taruh di dalam folder yang sama. Jalankan dokumen – dokumen
HTML tersebut pada browser dan amati!
2)
Cari
sumber bacaan maupun buku referensi yang menjelaskan secara detail tentang dasar-dasar
HTML.
e.
Tes
Formatif 2
1)
Apa yang anda ketahui tentang HTML dan web editor?
Buatlah halaman HTML untuk menampilkan formulir
isian biodata anggota, seperti gambar 17 menggunakan editor Notepad
Gambar 17.
Form Isian Biodata Anggota
f.
Kunci
Jawaban Formatif 2
1)
HTML
adalah Hyper Text MarkUp Language, yang berfungsi memformat dokumen teks
biasa untuk bisa digunakan pada WWW.
Web
editor dapat
diartikan sama dengan pengertian dari software web design, yaitu
sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain dan
mengedit halaman-halaman web, baik yang bersifat statis maupun dinamis.
2)
Dokumen
HTML-nya :
Gambar 18. Tag-tag HTML Halaman Isian
Biodata
Gambar 18. Tag-tag HTML Halaman Isian
Biodata
g.
Lembar
Kerja 2
Alat
dan Bahan
PC (Personal Computer) yang
telah dilengkapi dengan web browser dan editor teks Notepad.
Kesehatan dan Keselamatan
Kerja
1)
Berdo’alah
sebelum memulai kegiatan belajar.
2)
Bacalah
dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
3)
Pastikan
komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.
4)
Jangan
meletakkan benda yang dapat mengeluarkan medan elektromagnetik di dekat
komputer (magnet, handphone, dan sebagainya).
5)
Gunakanlah
komputer sesuai fungsinya dengan hati-hati, jangan bermain game.
6)
Setelah
selesai, matikan komputer sesuai prosedur yang aman!
Langkah Kerja
1)
Siapkanlah
semua peralatan yang akan digunakan!
2)
Periksa semua kabel penghubung pada PC.
3)
Nyalakan
PC dan jalankan program editor notepad dan web browser Internet
Explorer.
4)
Kerjakan
Tugas 2 dan Tes Formatif 2 di atas.
5)
Apabila
menemui kesulitan dalam memahami materi yang ada, segera tanyakan denga
instruktur.
6)
Setelah
selesai, matikan komputer dan rapikan seperti semula.
