MODUL_HTML_TIK_XII

HTML 1
LKS 1
Kompetensi Dasar:
Menjelaskan TAG pembentuk desain web
Indikator:
 Mengidentifikasi web
 Mengidentifikasi HTML
 Menjelaskan cara menggunakan editor HTML
 Mengidentifikasi TAG HTML pembentuk desain web
I. EDITOR Penulisan HTML
Penulisan Html dapat dilakukan dibeberapa editor, dalam hal mempermudah dalam
kesempatan ini kita akan membahas penulisan html padaText Editor Notepad. Untuk
menjalankan Notepad dapat dilakukan dengan cara klik Program>Accessories>Notepad.
1. Mengenal Structure penulisan HTML
Struktur penulisan HTML:
<html>
<head>
<title> judul halaman web </title>
</head>
<body>
Informasi
…………
</body>
</html>

HTML 2
Catatan:
 Pada umumnya penulisan Tag HTML selalu berpasangan dan penulisan Tag
HTML boleh dengan huruf besar/kecil.
 Penulisan TAG: <tag> sebagai batas awal dan </tag> sebagai batas akhir teks
Penulisan Html dapat dilakukan dengan bentuk seperti di bawah ini:
<HTML></HTML>
maksudnya menggunakan code html untuk membuat halaman web
<HEAD> </HEAD>
untuk menuliskan metadata/informasimengenai halaman web
</TITLE> </TITLE>
Untuk menuliskan/menampilkan judul/title bar halaman web
<BODY > </BODY>
Untuk menuliskan konten halaman web
Perhatikan contoh halaman web di bawah ini!
Title/judul
Informasi

HTML 3
2. Membuat Title Bar/Judul Halaman Web
Tag yang digunakan adalah : <Title> ….</Title>
Bentuk Umum Penulisan Tag:
<title>judul halaman web</title>
Contoh:
3. Menyimpan File
Setelah mengetikkan source code di atas, simpan terlebih dahulu teks Anda dengan
cara:
 Buat folder Nama Anda
 Di dalam folder Nama buat folder dengan nama : Web01
 Pilih menu File dan sub menu Save, kemudian dalam kotak dialog klik Save as
type untuk memilih jenis file : all files. Ketik nama file :index.html. Perhatikan
tampilan di bawah.

HTML 4
Atau dengan cara:
Ketik nama file:“index.html”
Maka hasilnya akan terlihat seperti berikut:

HTML 5
4. Menambah Teks Judul Informasi
Sedangkan untuk menambahkan informasi/konten web berupa teks/tulisan bisa
langsung diketik pada bagian <body> ...</body>
Hasil di browser:
Heading (Format Judul Informasi)
Ada beberapa jenis format heading (judul informasi)
Tag yang digunakan: <Hn>teks judul informasi.</Hn>
n = angka (1 – 6) yang akan mempengaruhi tampilan heading

HTML 6
Contoh:
Coba untuk heading dengan nilai yang lain, perhatikan hasilnya!
Bagaimana hasilnya? ____________________________________________________
5. Menambah Informasi/konten halaman web
Konten halaman web yang merupakan Informasi, antara lain:
A. teks
B. gambar
C. tabel
D. formulir
A. Teks
Untuk informasi yang merupakan teks dapat diatur tampilannya.
a.Mengatur Tampilan Paragraf
Tag yang digunakan untuk penulisan paragraf adalah: <P>paragraf teks</P>
Ada beberapa jenis perataan paragraf yang harus dituliskan dengan menggunakan
atributalign:
 Left : paragraf rata kiri
 Right : paragraf rata kanan
 Center : paragraf rata tengah
 Justify : paragraf rata kiri - kanan

HTML 7
Terdapat TAG untuk perataantengahselain menggunakan atribut align=”center”
<CENTER>paragraf teks</CENTER>
Cara penambahan atributalignpada paragraf
<P ALIGN = “jenis perataan”> paragraf teks </P>
Contoh:
<P ALIGN = “left”>Tujuh Keajaiban Dunia Baruadalah proyek ....</P>
Pada tag <P> penekanan tombol ENTER dan Spasi tidak memberikan pengaruh pada
tampilan halaman web. Jika memerlukannya gunakan tag <PRE>, dengan tag <PRE>
semua teks yang berada di dalamnya akan mengikuti sesuai dengan pengetikan yang
dilakukan
Bantuk penulisan:
<PRE>paragraf teks</PRE>
b. Mengatur Tampilan Karakter/Huruf
Tag yang digunakan untuk tampilan karakter/huruf adalah:
 <FONT>teks</FONT> : mengatur jenis huruf, ukuran dan warna
Ada beberapa atribut untuk tampilan huruf, yaitu:
o Size : ukuran huruf
Nilai atribut size dari 1 – 7
<font size=”4”>
o Face : jenis huruf
Nilai atribut face merupakan nama font yang dikenal (digunakan dalam aplikasi
ofice), seperti : Arial, Times New Roman
Catatan: atribut tidak dapat berdiri sendiri, tapi harus dituliskan bersama
dengan TAG HTML

HTML 8
<font face=”Arial”>
o Color : warna tulisan/huruf
Nilai dari atribut color bisa merupakan nama warna (bhs. Ingris) atau kode
warna (RGB dalam hex)
Warna yang dapat digunakan:
1. Red 5. Black 9. Aqua 13. Maroon
2. Green 6. White 10. Fuchsia 14. Olive
3. Blue 7. Yellow 11. Grey 15. Navy
4. Cyan 8. Lime 12. Silver 16. Purple
Bentuk penulisan:
<FONT COLOR =”WARNA”> atau
<FONT COLOR=”#KODE WARNA”> kode warna dalam hex (RGB),
merupakan campuran warna
red, green, blue
KODE WARNA : “#XXXXXX”
R G B
Nilai kode XX : 00 - FF
Contoh:
<font color=”red”> atau <font color=”#ff0000”>
Catatan: Beberapa atribut dalam tag Font dapat digabung atau dipakai
bersamaan sesuai keperluan.
Contoh:
<font face=”Arial” size=”4” color=”blue”>
 <B>teks</B> : mempertebal teks
 <U>teks </U> : _______________________________________
 <I>teks </I> : _______________________________________
 <Strong>teks</Strong> : style teks/tulisan menjadi tebal
 <SUP> : cetak naik
 <SUB> : _______________________________________

HTML 9
 <S>atau<Strike> : _______________________________________
Tambahkan tampilan informasi pada file index.html agar seperti tampilan di bawah
ini!
Tuliskan kode HTML-nya:
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
B. Menambah efek teks berjalan
Tag yang digunakan: <MARQUEE> ...</MARQUEE>
Teks yang akan diberi efek berjalan diapit oleh tag di atas.
Bentuk penulisan: <MARQUEE>teks</MARQUEE>
Teks tambahan

HTML 10
Atribute pada TAG MARQUEE:
a. Direction : menentukan arah pergerakan
Bentuk penulisan :
<MARQUEE direction=”arah”> teks </MARQUEE>
Arah : - left (dari kanan ke kiri)
- right (dari kiri ke kanan)
b. Behavior : tipe efek pergerakan
Bentuk penulisan:
<MARQUEE behavior=”tipe”> teks </MARQUEE>
Tipe: - scroll
- slide
- alternate
c. Loop : banyaknya pengulangan pergerakan
Bentuk penulisan:
<MARQUEE loop=”pengulangan”> teks </MARQUEE>
Pengulangan : - continuously
- angka (jumlah pengulangan)
d. Bgcolor : warna latar belakang teks yang diberi efek
Bentuk pengulangan:
<MARQUEE bgcolor=”warna”> teks </MARQUEE>
Atribut pada Marquee dapat digunakan secara bersamaan.
Contoh:
<Marquee bgcolor=”#800000” direction=”right” loop=”4” behavor=”alternate”>
Hello </Marquee>
Tampilkan hasil pada browser, apa yang terjadi? ____________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________

HTML 11
C. Menambah Gambar
Menambah gambar sebagai konten informasi
Tag yang digunakan:
<IMG SRC = “nama file.eks”> file gambar harus dalam satu folder dengan file
html-nya
<IMG SRC = “/path/nama file.eks”>
Contoh:
<img src=”greatwall.jpg”>
Beberapa atribut pada tag gambar:
 Width : mengatur lebar gambar (dalam satuan pixel)
 Height : mengatur tinggi gambar (dalam satuan pixel)
 Align : mengatur perataan gambar (left, right, center)
Contoh:
<img src=”greatwall.jpg” width=”300” height=”200” align=”left”>
 Pindah baris
Tag yang digunakan: <BR>
Tambahkan tampilan informasi halaman web agar seperti gambar di bawah!
informasi

HTML 12
 Menambah Garis pada Halaman Web
Tag yang digunakan: <HR>
Atribut pada tag <HR>:
o Width : ______________________________________________
o Size : ______________________________________________
o Noshade : mengatur garis dengan bayangan/tidak
Contoh:
<hr size=”5” noshade=”NOSHADE”>
 Menambah Warna Background Halaman Web
Atribut yang digunakan adalah: BGCOLOR atau BACKGROUND
Atribut ini dituliskan pada tag <BODY>
 BGCOLOR : memberi latar belakang halaman web dengan warna solid
 BACKGROUND : latar belakang halaman web berupa file gambar
Contoh:
<body bgcolor=”warna/kode warna”>
<body bgcolor=”blue”> atau <body bgcolor=”#0000ff”>
<body background=”path/namafile.eks”>
<body background=”../images/sunset.jpg”> file gambar beda folder dengan file html
Tambahkan garis dan warna latar belakang (background) pada halaman web index.html
agar tampilan lengkap seperti gambar di bawah ini.

HTML 13
Tambahkan latar belakang untuk halaman web!

HTML 14
Tugas: Buat halaman web baru dengan tampilan seperti di bawah ini!
Sumber: www.aalil.com dan wikipedia
Simpan dengan nama file: hal2.html
 Membuat Hyperlink
Hyperlink antar halaman web
Tag yang digunakan : <A HREF>teks link</A>
Jeni-jenis hyperlink, antara lain:
 Link Relatif : link antar halaman salam 1 folder
Bentuk penulisan:
<a href = ”namafile_tujuan.html”>teks link</a>
Contoh:
Jika klik teks Next pada halaman index.html maka akan tampil hal2.html.

HTML 15
<a href=”hal2.html> Next </a> kode dituliskan di file index.html
 Link Absolute: link ke halaman dengan alamat pasti
Bentuk penulisan:
<a href = ”alamat_tujuan”>teks link</a>
Contoh:
<a href = ”http://www.google.com”>Link di sini</a>
Catatan: Untuk jenis link yang lain akan dibahas pada LKS berikutnya
Tugas: Buat link antar halaman web indexdengan hal2 (dari halaman index ke hal2 atau
sebaliknya)

HTML 16
II. Kesimpulan
1. Apakah yang dimaksud dengan Tag? ________________________________________
______________________________________________________________________
2. Apa kegunaan Tag <Hn>? _________________________________________________
Jelaskan perbedaan penggunaan n=1,2,3,…
______________________________________________________________________
______________________________________________________________________
2. Tuliskan jenis-jenis browser yang dapat digunakan _____________________________
______________________________________________________________________
3. Sebutkan editor-editor yang dapat digunakan untuk menuliskan source html
______________________________________________________________________
______________________________________________________________________
4. Tuliskan tag yang dapat digunakan untuk memperindah huruf dan pengaturan paragraf
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
5. Jelaskan perbedaan pengaturan paragraf menggunakan <P> dengan <PRE>!
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
6. Fungsi hyperlink adalah __________________________________________________
______________________________________________________________________
7. Jelaskan perbedaan Relatif dengan Absolut link! ________________________________
______________________________________________________________________
______________________________________________________________________

HTML 17
LKS 2
Kompetensi Dasar:
Menggunakan TAG pembentuk desain web
Indikator:
 Menggunakan TAG HTML untuk mengatur format font dan paragraf
 Menggunakan TAG HTML untuk mengatur tampilan konten web (Bullet/Numbering,
image, table, form)
 Menggunakan TAG HTML untuk membuat hyperlink
Untuk memahami penggunaan bullet, numbering, dan tabel perhatikan tampilan halaman web
di bawah ini.

HTML 18
Untuk membuat halaman web di atas, diperlukan:
1. Numbering
Gunanya untuk memberi nomor urut dengan angka secar otomatis.
Tag untuk memberi nomor urut secara otomatis (numbering): <OL> ....</OL>
Tag untuk menandai teks dengan nomor urut: <LI>teks</LI>
Cara penulisan Tag:
<ol type=”tipe” start=”nilai_awal”>
Contoh:

HTML 19
Hasil:
Atribut Tipe yang dapat digunakan:
 1 hasil : 1, 2, 3, ...
 a hasil : a, b, c, ...
 A hasil : ___________________
 i hasil : ____________________
 I hasil : ____________________
Buat halaman web untuk menghasilkan tampilan seperti di bawah ini!
Simpan dengan nama: home.html

HTML 20
2. Bullet
Gunanya untuk memberi nomor urut dengan simbol secara otomatis
Tag yang digunakan: <UL> ....</UL>
Cara penulisan kode:
<ul type=”tipe” start=”nilai_awal”>
tipe : disc, circle, square
Contoh:
Hasil:
Tambahkan kode HTMLpada file home.html untuk menambah tampilan di bawah ini.

HTML 21
Hasil:
3. Membuat Tabel
Tabel merupakan salah satu bagian dari isi informasi pada halaman web, untuk itu
pembuatan tabel sangatlah penting. Tag yang digunakan untuk tabel adalah:
<TABLE>, <TR> dan <TD> yaitu:
- <TABLE> untuk inisialisasi/menandakan awal pembuatan tabel
- <TR> untuk membentuk baris tabel
- <TD> untuk membentuk kolom tabel

HTML 22
Contoh:
Kode untuk contoh di atas adalah:
Dari tampilan di atas terdapat ________________ kolom dan _______________ baris.
Atribut yang digunakan:
a. Pada Tabel<table width=”616” border=”1”>
 Width : _________________________________________________________
 Height : _________________________________________________________
 Border : menentukan penggunaan border pada table
 Align : mengatur perataan table pada halaman web
Contoh : <table width=”616” height=”400” border=”1” align=”center”>
b. Pada Kolom<td width=”247” height=”35”>
 Width : _________________________________________________________
 Height : ________________________________________________________
 Align : __________________________________________________________

HTML 23
Jenis perataan sel : left, right, center, justify
Contoh:
<td width=”247” height=”35” align =”center”>
Catatan: Pemberian nilai Width pada <table> dan <td>dapat berupa nilai prosen.
Contoh : <table width=”100%”>
Latihan:
Ubah nilai width pada <Table> dan <Td> dengan persen.Tampilkan di browser dan
perhatikan hasilnya.
2. Untuk Border
Untuk membuat border pada tabel diatas cukup ditambahkan atribut border=1 pada tag
<table>, maka hasilnya berubah menjadi:
3. Menambah isi sel
Cara menambahkan isi sel adalah dengan menuliskan teks/tag diantara <TD>…</TD>
Bentuk penulisan: <TD> teks </TD> atau
<TD> tag </TD>
Contoh:
<td>Tari Seudati</td> - teks
<td><img src=”tari-legong-bali.jpg" width="294" height="215" ></td> tag untuk
menampilkan objek gambar

HTML 24
Tambahkan kode html pada file home.html untuk menambah tampilan di bawah ini.
4. Membuat Judul Tabel
Setiap tabel biasanya mempunyai judul, maka untuk membuat judul kita gunakan Tag
<CAPTION>.
Penulisannya adalah <CAPTION >judul tabel</CAPTION >.
Misalnya: Buatlah judul tabel pada latihan di atas: Gambar Tarian Daerah
Catatan: Penulisan<Caption> dituliskan di dalam arean <Table>
5. Penggabungan Beberapa Sel
Untuk menggabungkan beberapa sel di dalam tabel digunakan TAG<TD COLSPAN =
N>dan TAG <TD ROWSPAN =N>
<TD COLSPAN =N> : menggabungkan N sel kolom menjadi 1
<TD ROWSPAN =N> : menggabungkan N sel baris menjadi 1
N = jumlah sel
Contoh:
A B C D
E F G H
I J K L
A B
E
F G H
J K L

HTML 25
Jika tinggi kolom suatu tabel melebihi ukuran tulisan yang diperlukan biasanya akan terjadi
tampilan dimana data bisa ada di bagian tengah atau atas sel. Untuk mengatur hal tersebut
digunakan atribut.
Atribut yang digunakan: VALIGN
Bentuk penulisan
<TD VALIGN=”perataan”> data </TD>
Perataan : - top : data berada di bagian atas sel secara vertikal
- middle : data berada di bagian tengah sel secara vertikal
- bottom : data berada di bagian bawah sel secara vertikal
<html>
<body>
<table border>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td valign=”top”>I</td>
<td valign=”top”>J</td>
<td valign=”top”>K</td>
<td valign=”top”>L</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table border>
<tr>
<td>A</td>
<td colspan=”3” align=”center”>B</td>
</tr>
<tr>
<td rowspan=”2” valign=”middle”>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td valign=”top”>J</td>
<td valign=”top”>K</td>
<td valign=”top”>L</td>
</tr>
</table>
</body>
</html>

HTML 26
Tugas:
 Buat halaman web di bawah ini. (halaman data pengunjung/wisatawan asing)
Sumber : - BPS Pusat
- BPS Provinsi DKI Jakarta
 Atur tampilan halaman agar lebih menarik (warna teks dan background halaman web
yang harmonis)

HTML 27
Kesimpulan
1. <CAPTION> digunakan untuk _______________________________________________
____________________________________________________________________________
2. Jelaskan kegunaan dan penggunaan Tabel! ______________________________________
____________________________________________________________________________
____________________________________________________________________________
3. Jelaskan perbedaan tag <table width=”616” height=”400” align=”center”> dengan <td
width=”247” height=”35” align =”center”>!
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
4. Jelaskan perbedaan penggunaan nilai dalam bentuk prosen dengan pixel!
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
5. Jelaskan penggunaan COLSPAN dan ROWSPAN!
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
6. Jelaskan perbedaan penggunaan atribut ALIGN dengan VALIGN!
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

HTML 28
LKS 3
Kompetensi Dasar:
Membuat desain web dengan Tag HTML
Indikator:
 Membuat layout halaman web dalam bentuk tabel dengan TAG HTML
 Membuat layout halaman web dalam bentuk Frameset dengan TAG HTML
 Membuat/Create web site dengan TAG HTML
1. Tabel Sebagai Layout Halaman Web
Table selain digunakan untuk menampilkan data, dapat juga digunakan sebagai desain/layout
halaman web.
Contoh layout halaman web:

HTML 29
Perhatikan tampilan di bawah ini!
Buat tampilan halaman web di bawah ini menggunakan table.
Caranya:
 Buat layout halaman web dengan table dengan ukuran table 3 x 3 tanpa border
 Baris I, untuk judul kolom: Kesehatan, Teknologi, Gaya Hidup (beri warna pada sel)
Memberikan Warna Tabel
Atribut yang digunakan bgcolor dan background
 Latar belakang tabel
o Warna penulisan: <table bgcolor=”warna”>
o Image penulisan :<table background=”path/namafile.eks”>
 Latar Belakang Sel
o Warna penulisan :<td bgcolor=”warna”>
o Image penulisan : <td background=”path/namafile.eks”>
Jika menggunakan warna sebagai latar belakang, atur warna teks agar terlihat jelas.
 Baris III, gabungkan sel 1 dan 2 menjadi 1
 Buat table dengan ukuran 1 x 1 pada kolom 3 baris III dan beri warna
(2011 eks-Sirkuit

HTML 30
 Ketikkan konten/informasi
Mengatur Jarak Gambar Dengan Teks
Tampilan gambar pada halaman web akan terlihat tidak baik jika terlalu dekat dengan teks,
maka akan diberikan cara pengaturannya.
Atribut yang digunakan: VSPACE & HSPACE
Atribut tersebut dituliskan pada TAG <IMG >
VSPACE : mengatur jarak spasi atas/bawah gambar dengan teks
HSPACE : mengatur jarak spasi kiri/kanan gambar dengan teks
Bentuk penulisan:
<IMG src =”path/namafile_gambar.eks” vspace=”n” hspace=”n”>
N = nilai jarak dalam angka dengan satuan pixel
Contoh:
<IMG Src =”../images/tanahlot.jpg” vspace=”10” hspace=”10”>
Latihan:

HTML 31
 Buat desain layout halaman web menggunakan table dengan ukuran 3 x 2
 Baris I & baris II masing-masing jadikan 1 kolom
 Baris I, Masukkan gambar banner sebagai latar belakang dan tambahkan tulisan
“WISATA INDONESIA”
 Baris II tambahkan teks seperti pada gambar di atas
 Baris III kolom 1, masukkan konten
 Baris III kolom 2, masukkan konten
 Simpan dengan nama: bali.html
 Simpan kembali dengan nama lain, yaitu: komodo.html
 Hapus konten tentang tanah lot, kemudian isikan dengan informasi tentang pulau
komodo seperti tampilan halaman web di bawah ini!
Sumber: wikipedia
 Buat link antar halaman bali.html dengan komodo.html menggunakan teks link pada
halaman web di atas
Teks link

HTML 32
2. Membuat frameset dan frame
Frameset dalam html digunakan untuk membangun web page yang memungkinkan
penampilan beberapa web page ditampilkan dalam satu windows browser. Windows
dalam browser dibagi menjadi beberapa windows yang disebut frame. Frameset hanya
digunakan sebagai halaman index (halaman awal). Nama frame predefined terdiri dari:
mainFrame : frame bagian tengah, digunakan untuk konten/isi halaman web
topFrame : frame bagian atas, digunakan untuk tampilan banner
leftFrame : frame bagian kiri, digunakan untuk tampilan menu
Bentuk penulisan membentuk Frameset:
<frameset Rows| cols =”ukuran1, ukuran2,...”>
<frame src=”namafile.html” name=”namaframe”>
.....................
</frameset>
Contoh tampilan dengan frameset
Membuat layout tampilan frameset seperti dengan table
Banyaknya frame
sejumlah ukuran yang
dibuat

HTML 33
Bentuk frameset yang digunakan terdiri dari 4 frame dan memerlukan 4 halaman web
dalam sekali tampilan.
atas
tengah
mainframe
kanan
Cara membuat layout halaman web dengan frameset:
1. Buat halaman-halaman web pembentuk frameset
a. Buat halaman banner dan beri namafile: banner.html
b. Buat halaman menu dengan namafile: menu.html
c. Buat halaman-halaman konten sebagai informasi (2 halaman web, informasi
tentang P. Bali dan P. Komodo)
Buat Halaman web seperti gambar di bawah untuk P. Bali (Tanah Lot) dengan
nama file: bali.html
Menampilkan file : banner.html
Menampilkan file :promo.html
Menampilkan file: konten/informasi
Menampilkan file :menu.html

HTML 34
Buat halaman web seperti gambar di bawah untuk P. Komodo dengan nama file:
komodo.html
d. Buat halaman promosi dengan namafile: promo.html

HTML 35
2. Membentuk frameset
Cara membuat layout frameset:
 Bentuk frameset terbentuk dari: 3 baris(rows) dan 2 kolom (cols)
<frameset rows=”200,40, *”>
<frame src=”banner.html” name=”atas”>
<frame src=”menu.html” name=”tengah”>
<frameset cols=”70%,30%”>
<frame src=”bali.html” name=”mainframe”>
<frame src=”promo.html” name=”kanan”>
</frameset>
</frameset>
Simpan frameset dengan nama: index.html

HTML 36
Menampilkan konten yang lain pada frameset.
Link halaman web dengan menentukan tempat/target dimana halaman web akan ditampilkan di
frameset.
Bentuk penulisan
<a href=”namafile.html” target=”name frame”>teks link</a>
Latihan:
Buat link, jika klik teks komodo di file menu.html akan tampil informasi tentang P. Komodo di
posisi mainframe di frameset.
<a href=”komodo.html” target=”mainframe”>komodo</a>
Tuliskan kode di atas pada file menu.html (karena teks link komodo terdapat di file menu.html)
Tugas:
Buat halaman home dan tambahkan halaman untuk tempat pariwisata lain seperti:
Borobudur, Danau Toba, dan tempat wisata lain pada web site Wisata Indonesia.
width =70%
width =30%
Height
=200px
Height
=40px
Height
sisanya

HTML 37
Kesimpulan
1. jelaskan perbedaan penggunaan tabel sebagai layout dan konten data!
___________________________________________________________________
2. Tuliskan pengaturan-pengaturan frame____________________________________
3. Pengaturan jarak teks dengan gambar ada dua sebutkan __________dan _________
3. Menurut kamu lebih mudah menggunakan frameset atau tabel sebagai layout halaman
web? _______________________________________________________________
Mengapa? ___________________________________________________________
____________________________________________________________________
5. Mana yang lebih baik menurut kamu? _______________________________________
Mengapa? _____________________________________________________________
______________________________________________________________________
Projek:
Buatlah web site:
 Pribadi
 Sekolah

HTML 38
LKS 4
Kompetensi Dasar:
Membuat desain web dengan Tag HTML
Indikator:
 Membuat layout halaman web dalam bentuk tabel dengan TAG HTML
 Membuat layout halaman web dalam bentuk Frameset dengan TAG HTML
 Membuat /Create website dengan TAG HTML
Dalam suatu web site terkadang memerlukan masukan dari pengunjung atau formulir untuk
memasukkan/memberikan data yang diperlukan, maka pada LKS 4 ini akan diberikan cara
untuk membuat form.
Perhatikan Formulir di bawah ini.

HTML 39
Membuat Form
Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web dapat
memasukkan input input melalui halaman-halaman HTML.
Jenis-Jenis objek form:
 Text Field untuk input data dengan jumlah karakter tidak terlalu panjang
 Radio Button untuk memilih 1 dari beberapa pilihan data dalam bentuk lingkaran kecil
 Check box untuk memilih beberapa pilihan data dalam bentuk kotak kecil (dapat
memilih lebih dari 1)
 List/Menu untuk membuat pilihan data dalam bentuk listbox/combobox
 Button untuk membuat tombol perintah tertentu
 Submit untuk membuat tombol submit data
 Reset untuk membuat tombol reset data
 Text Area untuk input data dengan jumlah karakter yang cukup panjang (memo)
Caranya:
1. Pembuatan Form
Bentuk penulisan:
Diawali dan diakhiri : <Form> ………..</Form> dituliskan di bagian <body>
2. Menambah objek-objek pada Form
Agar tampilan rapi/rata dapat menggunakan table atau menggunakan format
paragraph <pre>

HTML 40
 Text Field
<input type=”text” name=”namafield” size=”ukuran lebar”>
<FORM>
<TABLE>
<TR>
<TD> Nama </TD>
<TD><input type="text" name="nama1"size="20"><input type="text"
name="nama2"size="20">
</TR>
<TABLE>
</FORM>
Buat dan lengkapi kode html untuk menampilkan formulir seperti gambar di bawah
dengan menggunakan Text Field!
 List
<Select name=”namadaftar”>
<option selected> pilihan 1
<option> pilihan 2
…..
</Select>
<Form>
<select name="propinsi">
<option>DKI Jakarta
<option>Banten
<option>Jawa Barat
</select>
</Form>

HTML 41
Tambahkan kode html untuk menampilkan objek formulir seperti gambar di bawah
dengan menggunakan List dan Text Field!
 Radio Button
<Input type=”radio” name=”nama_variabel” checked>data pilihan
<input type=”radio” name=”pil1”>Laki-laki <input type=”radio”
name=”pil2”>Perempuan
Tambahkan kode html untuk menampilan objek radio button pilihan jenis
kelamin pada formulir!
Lengkapi tampilan formulir dengan gambar di bawah sesuai dengan objek form
yang diperlukan!
 Checkbox
<Input type=”checkbox” > data pilihan
<Input type=”checkbox”> Hiburan dan Film

HTML 42
Tambahkan data-data pilihan ke dalam formulir agar tampilan seperti gambar di
bawah ini!
 Button
Terdapat 3 jenis:
1. Submit <Input type=”Submit”>
2. Reset <Input type=”Reset”>
3. Button <Input type=”Button” value=”teks_tampilan”>
<Input type=”button” value=”Proses”>
Tambahkan kode html pada formulir untuk menampilkan tombol Proses dan Reset
 Textarea
<Textarea name=”nama_var” cols=”ukuran lebar” Rows=”jml_baris”>
Komentar<textarea name="textarea" cols="50" rows="5"></textarea>

HTML 43
Tugas: Buat tampilan formulir seperti di bawah ini!
Formulir pengajuan passport
Sumber: www.imigrasi.go.id
Menambah Transisi Halaman Web
Efek transisi akan terlihat pada saat halaman web yang diberi transisi ditampilkan.
TAG yang digunakan: <META>
Atribut:
 http-equip: menentukan kapan/pada peristiwa apa efek ditampilkan (event)
beberapa event:
a. Page-Enter
b. Page-Exit
c. Site-Enter
d. Sit-Exit

HTML 44
Bentuk penulisan:
<Meta http-equiv=”event”>
 Conten: menentukan durasi dan jenis efek yang digunakan
Bentuk penulisan atribut:
<Meta content=”revealTrans(Duration=durasi, Transition=no efek)”)>
No efek : 0 - 25
Contoh:
<head>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=23)">
</head>
Catatan: efek akan terlihat jika menggunakan IE
Membuat Link Dalam Satu Halaman Web
Terkadang ada halaman web dengan konten/isi yang panjang hingga menampilkan scrollbar.
Untuk melihat memudahkan melihat paragraf bagian bawah halaman dan agar lebih cepat
dapat menggunakan link, contoh: wikipedia
Cara membuatnya:
a. Menentukan tempat tujuan link
Bentuk penulisan:
<a name=”nama_tujuan”>
Contoh:
<a name=”Bab_4”> Bab 4 </a>
b. Melalukan link
Bentuk penulisan:
<a href=”#nama_tujuan”> sudah dibuat sebelumnya pada atribut name
Contoh:
<a href=”#Bab_4”> lihat bab 4 </a>

HTML 45
Latihan:
Buat halaman web di bawah ini!
Teks link

HTML 46
Caranya:
1. Buat tujuan link
Tujuan adalah kolosium, ketik tag di samping kata judul paragraf Kolosium
<a name=”kolosium”></a>
2. Membuat link
Teks link adalah Kolosium, ketikkan tag mengapit kata Kolosium
<a href="#koloseum">Koloseum</a>
Menambah Frame Inline pada Halaman Web
Frame Inline adalah frame yang menampilkan informasi dalam sebuat halaman web (frame
dalam halaman web)
Bentuk penulisan:
<IFRAME src=”namafile.html” name=”namaframe” Width=”ukuran” Height=”ukuran”>
</IFRAME>
Judul paragraf

HTML 47
Latihan:
Buat halaman web dengan tampilan seperti di bawah ini!
Sumber: www.gadgetterbaru.com
Frame Inline

HTML 48
Caranya:
1. Buat halaman web yang akan ditampilkan pada Frame Inline seperti di bawah ini dan
simpan dengan nama: gadget2.html

HTML 49
2. Buat halaman web seperti di bawah ini dan simpan dengan nama: gadget.html
Kesimpulan:
1. Tuliskan jenis-jenis objek dalam form!
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2. Menurut kamu mana yang lebih baik, membuat formulir dengan table atau
menggunakan format paragraph <pre>. Jelaskan!
___________________________________________________________________
___________________________________________________________________
3. Jelaskan manfaat penggunaan Frame Inline dalam halaman web! _______________
___________________________________________________________________

MODUL_HTML_TIK_XII

More Related Content

What's hot (18)

Viewers also liked (13)

Similar to MODUL_HTML_TIK_XII (20)

Recently uploaded (20)

MODUL_HTML_TIK_XII