SlideShare a Scribd company logo
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! _______________
___________________________________________________________________

More Related Content

PDF
MODUL_PHP_TIK_XII
PDF
MODUL_DREAMWEAVER_TIK_XII
PDF
MATERI_DELPHI_XI
PDF
Adobe dreamwaver
DOC
Macromedia dreamweaver-8
PDF
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
PPT
Pengenalan Macromedia Dreamweaver
PPTX
Proyek web
MODUL_PHP_TIK_XII
MODUL_DREAMWEAVER_TIK_XII
MATERI_DELPHI_XI
Adobe dreamwaver
Macromedia dreamweaver-8
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
Pengenalan Macromedia Dreamweaver
Proyek web

What's hot (18)

PDF
Tutoria html mysqdanphp
PDF
Modul 2-form html-css
PDF
Laporan pemrograman berbasis web
PDF
Macromedia dreamweaver 8
PDF
Pengenalan dreamweaver
PDF
Modul html
PDF
Modul HTML5
DOC
Modul Dasar HTML
PDF
Modul html
PDF
Tugas2 1300631019
PPT
Penggunaan html
DOCX
Tutorial web programing x rpl 1
PDF
Web html
DOCX
PHP & MySQL Basic
PDF
Makalah Desain web menggunakan dreamweaver 8
PDF
Tutoria contohl-koneksi-php-mysql
PDF
Tutorial html + my sql + php
PDF
Langkah demi langkah menguasai html 5 (versi alpha)
Tutoria html mysqdanphp
Modul 2-form html-css
Laporan pemrograman berbasis web
Macromedia dreamweaver 8
Pengenalan dreamweaver
Modul html
Modul HTML5
Modul Dasar HTML
Modul html
Tugas2 1300631019
Penggunaan html
Tutorial web programing x rpl 1
Web html
PHP & MySQL Basic
Makalah Desain web menggunakan dreamweaver 8
Tutoria contohl-koneksi-php-mysql
Tutorial html + my sql + php
Langkah demi langkah menguasai html 5 (versi alpha)
Ad

Viewers also liked (13)

PDF
Modul praktikum javascript
DOCX
PASCAL ( MODUL 11)
PDF
Tutorial dreamweaver
PDF
Dasar-dasar javascript
PDF
Modul delphi-7
PDF
Mi1274 alpro lanjut 6 - perulangan - 2 - for, do-while
PDF
MODUL_FLASH_TIK_XI
PDF
Dasar pemrograman
PDF
MATERI_ULEAD_XI
DOC
Kisi kisi ujian praktik
PDF
MATERI_FLASH_XI
PDF
Membuat file-presentasi-dengan-flash-mengenal-action-script1
PDF
Presentasi pengenalan peramban chromium pada blank on
Modul praktikum javascript
PASCAL ( MODUL 11)
Tutorial dreamweaver
Dasar-dasar javascript
Modul delphi-7
Mi1274 alpro lanjut 6 - perulangan - 2 - for, do-while
MODUL_FLASH_TIK_XI
Dasar pemrograman
MATERI_ULEAD_XI
Kisi kisi ujian praktik
MATERI_FLASH_XI
Membuat file-presentasi-dengan-flash-mengenal-action-script1
Presentasi pengenalan peramban chromium pada blank on
Ad

Similar to MODUL_HTML_TIK_XII (20)

PDF
Html dan php
PDF
Html dan php
PDF
Modul 1 - HTML
PDF
PDF
Modul web-design
PDF
Tutorial html + my sql + php
PDF
Modul css
PDF
Materi HTML SMK KELAS X (6) bahasa indonesia
PPT
Praktikum_Pengenalan_HTML
PPTX
Web dasar i
PDF
Modul web affif
PPT
pertemuan-2-html-hypertext-markup-language (1).ppt
PPT
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
PPT
Membuat_Frame pada html dengan mudah.ppt
DOCX
Tugas laporan aplikasi web nova muhdalifah
PDF
Andino Maseleno - Modul Web Programming
PPT
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
PPT
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
PDF
Bab i. html
PPTX
Presentation 1 - Desain dan pemrograman web 2
Html dan php
Html dan php
Modul 1 - HTML
Modul web-design
Tutorial html + my sql + php
Modul css
Materi HTML SMK KELAS X (6) bahasa indonesia
Praktikum_Pengenalan_HTML
Web dasar i
Modul web affif
pertemuan-2-html-hypertext-markup-language (1).ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Membuat_Frame pada html dengan mudah.ppt
Tugas laporan aplikasi web nova muhdalifah
Andino Maseleno - Modul Web Programming
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Bab i. html
Presentation 1 - Desain dan pemrograman web 2

Recently uploaded (20)

PPTX
Rancangan Aktualisasi Latsar CPNS Kementerian Agama 2025.pptx
PDF
AI-Driven Intelligence and Cyber Security: Strategi Stabilitas Keamanan untuk...
DOCX
Modul Ajar Deep Learning Prakarya Kerajinan Kelas 12 SMA Terbaru 2025
PDF
System Requirement Enterprise Resource Planning Jasa Penulisan dan Pembuatan ...
DOCX
Modul Ajar Deep Learning Prakarya Budidaya Kelas 12 SMA Terbaru 2025
PDF
GUIDE BOOK DMH SCHOLARSHIP...............................
PPTX
Patuh_Terhadap_Norma_PPKn_Kelas_7 oke.pptx
PPTX
Presentasi Al-Quran Hadits Kelompok XI.1
PPTX
Pembelajaran-Mendalam-RTL-dan-Umpan-Baliknya.pptx
PDF
Presentasi Aplikasi Persiapan ANBK 2025.pdf
PPTX
PPT Akidah Akhlak Kelompok 1 X-8 (4).pptx
PPTX
PPT REVISED - SEMINAR PEMBELAJARAN MENDALAM .pptx
PPTX
Materi Besaran, Satuan, Pengukuran.pptx
PPTX
PROGRAM KOKURIKULER KELAS 9 TEMA 1_20250811_075823_0000.pptx
DOC
RPP Deep Learning _ MGMP Wilayah 1 (1).doc
PPTX
Manajemen Risiko dalam Kegiatan Kepramukaan.pptx
PPTX
Materi-Geografi-Pendekatan-Konsep-dan-Prinsip-Geografi-Kelas-10.pptx
PPTX
SEJARAH BENDERA MERAH PUTIH - MATERI PRAMUKA
PPTX
Konsep & Strategi Penyusunan HPS _Pelatihan "Ketentuan TERBARU Pengadaan" (...
PPTX
!!!!Bahan Tayang Kompetensi Manajerial-AKUNTABILITAS KINERJA-DR Asep Iwa.pptx
Rancangan Aktualisasi Latsar CPNS Kementerian Agama 2025.pptx
AI-Driven Intelligence and Cyber Security: Strategi Stabilitas Keamanan untuk...
Modul Ajar Deep Learning Prakarya Kerajinan Kelas 12 SMA Terbaru 2025
System Requirement Enterprise Resource Planning Jasa Penulisan dan Pembuatan ...
Modul Ajar Deep Learning Prakarya Budidaya Kelas 12 SMA Terbaru 2025
GUIDE BOOK DMH SCHOLARSHIP...............................
Patuh_Terhadap_Norma_PPKn_Kelas_7 oke.pptx
Presentasi Al-Quran Hadits Kelompok XI.1
Pembelajaran-Mendalam-RTL-dan-Umpan-Baliknya.pptx
Presentasi Aplikasi Persiapan ANBK 2025.pdf
PPT Akidah Akhlak Kelompok 1 X-8 (4).pptx
PPT REVISED - SEMINAR PEMBELAJARAN MENDALAM .pptx
Materi Besaran, Satuan, Pengukuran.pptx
PROGRAM KOKURIKULER KELAS 9 TEMA 1_20250811_075823_0000.pptx
RPP Deep Learning _ MGMP Wilayah 1 (1).doc
Manajemen Risiko dalam Kegiatan Kepramukaan.pptx
Materi-Geografi-Pendekatan-Konsep-dan-Prinsip-Geografi-Kelas-10.pptx
SEJARAH BENDERA MERAH PUTIH - MATERI PRAMUKA
Konsep & Strategi Penyusunan HPS _Pelatihan "Ketentuan TERBARU Pengadaan" (...
!!!!Bahan Tayang Kompetensi Manajerial-AKUNTABILITAS KINERJA-DR Asep Iwa.pptx

MODUL_HTML_TIK_XII

  • 1. 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>
  • 2. 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
  • 3. 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.
  • 4. HTML 4 Atau dengan cara: Ketik nama file:“index.html” Maka hasilnya akan terlihat seperti berikut:
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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> : _______________________________________
  • 9. 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
  • 10. 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? ____________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________
  • 11. 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
  • 12. 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.
  • 13. HTML 13 Tambahkan latar belakang untuk halaman web!
  • 14. 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.
  • 15. 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)
  • 16. 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! ________________________________ ______________________________________________________________________ ______________________________________________________________________
  • 17. 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.
  • 18. 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:
  • 19. 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
  • 20. 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.
  • 21. 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
  • 22. 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 : __________________________________________________________
  • 23. 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
  • 24. 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
  • 25. 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>
  • 26. 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)
  • 27. 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! ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
  • 28. 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:
  • 29. 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
  • 30. 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:
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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.
  • 39. 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>
  • 40. 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>
  • 41. 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
  • 42. 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>
  • 43. 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
  • 44. 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>
  • 45. HTML 45 Latihan: Buat halaman web di bawah ini! Teks link
  • 46. 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
  • 47. HTML 47 Latihan: Buat halaman web dengan tampilan seperti di bawah ini! Sumber: www.gadgetterbaru.com Frame Inline
  • 48. HTML 48 Caranya: 1. Buat halaman web yang akan ditampilkan pada Frame Inline seperti di bawah ini dan simpan dengan nama: gadget2.html
  • 49. 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! _______________ ___________________________________________________________________