Scribd
Unggah
35 tayangan

Modul Web

Dokumen ini membahas tentang konsep dasar mendesain halaman web dengan HTML. Dokumen ini menjelaskan struktur dasar dokumen HTML, tag-tag dasar seperti header, paragraf, dan format teks, serta penggunaan font dalam HTML.

Diunggah oleh

ANDREAS ARIS SUHARTONO
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
35 tayangan

Modul Web

Dokumen ini membahas tentang konsep dasar mendesain halaman web dengan HTML. Dokumen ini menjelaskan struktur dasar dokumen HTML, tag-tag dasar seperti header, paragraf, dan format teks, serta penggunaan font dalam HTML.

Diunggah oleh

ANDREAS ARIS SUHARTONO
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Modul Siswa Multimedia-SMK Negeri 4 Semarang

Memperbaharui Isi Halaman Web

A. Internet dan Web


Internet berasal dari kata interconnection-networkin,yang merupakan sistem global dari seluruh
jaringan komputer diseluruh dunia yang berisi informasi dan sebagai sarana komunikasi data yang
berupa teks, suara, gambar, dan video. Jaringan ini terhubung melalui protocol TCP / IP.

Didalam internet terdapat beberapa macam fasilitas, salah satu diantaranya adalah web. Web
adalah fasilitas hypertext untuk menampilkan data berupa teks, gambar, bunyi, dan data multimedia
lainnya yang saling terhubung. Web ada dua macam, yaitu :
1. Web statis adalah web yang isinya tetap, jarang berubah dan isi informasinya searah hanya dari
pemilik website.
2. Web dinamis adalah web yang isinya selalu berubah-ubah, dan isi informasinya interaktif dua
arah berasal dari pemilik serta pengguna website.

Untuk membaca data dan informasi pada web, menggunakan web browser seperti Internet
Explorer, Mozilla Firefox, Opera, Ntescape, Google Chroome dll. Sedangkan untuk membuat web
dapat menggunakan berbagai macam software seperti Notepad, Microsoft Word, Macromedia
Dreamweaver, Joomla dll. Dan untuk pengguna sistem operasi Linux dapat menggunakan fasilitas
seperti joe, vi atau mcedit.

B. Konsep Dasar Mendesain Web


Dalam mendesain halaman web, penguasaan terhadap perintah – perintah HTML merupakan hal
yang esensial. Tetapi seorang webmaster juga harus memahami konsep mendesain web dengan
baik. Yang perlu diperhatikan pada saat mendesain web adalah dengan memperhatikan
keseimbangan objek dan seni dalam mendesain web.

Web yang baik mempunyai beberapa ciri, yaitu :


1. Pewarnaan yang serasi
Warna memiliki beberapa peranan, antara lain :
a. Warna dapat memberikan penekanan / penegasan dan aksen terhadap topic suatu situs
b. Warna mengidentifikasi tema
c. Warna dapat membedakan elemen satu dengan yang elemen lainnya pada suatu situs
2. Tipografi ( font ) yang menarik
Tipografi adalah seni dalam penggunaan huruf. Penggunaan ini meliputi pemilihan jenis huruf
( font ), ukuran, spasi dan bagaimana teks dapat dengan mudah dibaca. Prinsip penggunaan font
pada desain web adalah font harus tersedia pada komputer pengunjung. Oleh karena itu
sebaiknya menggunakan font standar seperti Times New Roman, Arial, Helvetica dan lain – lain.
3. Tata letak ( layout ) yang rapi

Halaman 1
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Suatu halaman web terdiri dari sejumlah komponen. Komponen tersebut dapat berupa judul
( header ), banner, gambar ( image ), tabel, content, kelompok teks atau footer. Tata letak dan
susunan yang baik dapat membuat halaman lebih seimbang, enak dilihat, penampilan cantik dan
mudah dibaca.
4. Bentuk yang menarik
5. Akses cepat

Halaman 2
Modul Siswa Multimedia-SMK Negeri 4 Semarang

HTML ( Hypertext Markup Languange )

Untuk mendesain halaman web perlu penguasaan tentang perintah HTML ( Hypertext Markup
Languange ). Untuk menulis perintah pada HTML menggunakan tag. Tag digunakan untuk memberikan
efek yang dikehendaki. Setiap perintah umumnya ditulis dengan menggunakan tag pembuka dan tag
penutup,sedangkan ada beberapa perintah yang tidak menggunakan tag penutup. Secara umum
penulisan tag dilakukan dengan format sebagai berikut :

A. Struktur dasar dokumen HTML


Struktur dasar dokumen HTML dapat dijelaskan dengan contoh sebagai berikut :

<html>
<head>
<title>Struktur Dasar HTML</title>
</head>
<body>
Isi dokumen HTML disini
</body>
</html>
<tag> teks yang diberi efek </tag>

Penjelasan :
1. Setiap dokumen HTML harus diawali tag <html> dan diakhiri tag</html>
Tag <html > adalah tag pembuka dokumen HTML
Tag </html> adalah tag penutup dokumen HTML
2. Bagian atas dokumen HTML yang merupakan kepala harus diawali tag <head> dan diakhiri
tag</head>
Tag <head> adalah tag pembuka untuk kepala dokumen HTML
Tag </head> adalah tag penutup untuk kepala dokumen HTML
3. Judul dokumen akan ditampilkan pada bagian kiri atas internet browser, harus diletakkan
diantara tag <title> dan diakhiri tag</title>
Tag <title> adalah tag pembuka untuk judul dokumen HTML
Tag </title> adalah tag penutup untuk judul dokumen HTML
4. Badan dokumen adalah isi seluruh dokumen HTML
Tag <body> adalah tag pembuka untuk isi dokumen HTML
Tag </body> adalah tag penutup untuk isi dokumen HTML

B. Tag – tag Dasar HTML


1. Header
 Penulisan tag header berada pada bagian badan dokumen<body>
 Tag <hx> dan tag </hx> adalah tag pembuka dan tag penutup header dimana x bernilai
antara 1 sampai dengan 6

Halaman 3
Modul Siswa Multimedia-SMK Negeri 4 Semarang

 Tag <h1> dan tag </h1> akan menampilkan header dengan ukuran terbesar
 Tag <h6> dan tag </h6> akan menampilkan header dengan ukuran terkecil
2. Paragraf
Sebuah paragraf diawali dengan tag pembuka paragraph <p> dan diakhiri dengan tag penutup
</p>
3. Ganti baris ( Break )
Pergantian baris dapat dilakukan dengan menggunakan tag <br>. Tag <br> adalah tag tunggal
dan tidak memiliki tag penutup
4. Menampilkan isi dokumen apa adanya
 Tag <pre> dan tag </pre> tag preformatted akan menampilkan isi dokumen apa adanya
5. Garis horizontal
Dibuat dengan menggunakan tag<hr>. Tag memiliki atribut, yaitu :

Atribut Keterangan
size Tebal garis dalam pixel
width Panjang garis dalam pixel / prosentase
position Posisi garis, value : center / right / left
noshad Efek bayangan

Contoh : <hr size=7 width=400> atau <hr size=7 width=60%>

6. Rata tengah
Menggunakan tag <center> dan tag </center>
7. Identasi (quotes )
Menggunakan tag <blockquote> dan tag </ blockquote >

C. Tag-tag Format Teks


Berikut ini merupakan perintah – perintah yang dapat digunakan untuk memformat teks :

Format Teks Tag Pembuka Tag Penutup Keterangan

Bold <b> </b> Menebalkan teks


Italic <i> </i> Menampilkan teks dengan bentuk miring
Underline <u> </u> Menampilkan garis bawah pada teks
Superscript <sup> </sup> Menampilkan teks dengan letak diatas
Subscript <sub> </sub> Menampilkan teks dengan letak dibawah

D. Font
Digunakan untuk menentukan jenis huruf menggunakan tag pembuka <font> dan tag penutup
</font>. Atribut pada tag <font>, adalah :

Atribut Keterangan
face Jenis teks , value : Arial, Verdana dll

Halaman 4
Modul Siswa Multimedia-SMK Negeri 4 Semarang

size Besar teks, value 1 s/d 7


color Warna teks, value : red, blue, lightblue (nama warna )
Hexadesimal : #000000 s/d #ffffff

Contoh :
<font face=Arial size=4 color=blue>

Latihan
I. Pilihlah salah satu jawaban yang tepat dengan memberi tanda silang ( X ) pada salah satu huruf
jawaban a, b, c, d atau e pada lembar jawaban !
1. Perintah yang harus dikuasai dalam mendesain halaman web adalah ….
a. HTML d. Pascal
b. Word e. SPSS
c. Excell
2. Kepanjangan dari HTML yaitu ….
a. Hypertext Markup Level d. Hypertext Modell Languange
b. Highlevel Markup Languange e. Hightext Markup Languange
c. Hypertext Markup Languange
3. Yang digunakan untuk menulis perintah pada HTML disebut ….
a. Tag d. Deklarasi
b. Text e. Formula
c. Variabel
4. Perintah yang digunakan untuk menulis diawal dokumen HTML adalah ….
a. <title> d. <body>
b. <head> e. </html>
c. <html>
5. [ 1 ] <h1>
[ 2 ] <br>
[ 3 ] <head>
[ 4 ] <title>
Yang merupakan bagian dari struktur dasar dokumen HTML, ditunjukkan oleh nomor :
a. 1 & 2 d. 2 & 3
b. 1 & 3 e. 3 & 4
c. 1 & 4
6. Tag penutup untuk isi dokumen HTML adalah ….
a. </close> d. </body>
b. </exit> e. </doc>
c. </html>
7. Tag pembuka untuk menampilkan header dengan ukuran terkecil adalah ….
a. <h1> d. <header6>
b. <h6> e. <h=6>
c. <header1>
8. Perintah yang digunakan sebagai tag pembuka untuk suatu paragraf adalah ….
a. <p> d. <par>
b. <br> e. <paragraph>

Halaman 5
Modul Siswa Multimedia-SMK Negeri 4 Semarang

c. <sup>

Halaman 6
Modul Siswa Multimedia-SMK Negeri 4 Semarang

9. [ 1 ] <h1>
[ 2 ] <br>
[ 3 ] <head>
[ 4 ] <title>
Yang merupakan bagian dari struktur dasar dokumen HTML, ditunjukkan oleh nomor :
a. 1 & 2 d. 2 & 3
b. 1 & 3 e. 3 & 4
c. 1 & 4
10. Fungsi dari tag <pre> adalah ….
a. Menampilkan garis bawah pada teks
b. Menampilkan isi dokumen apa adanya
c. Menampilkan teks dengan letak diatas
d. Menampilkan teks dengan letak dibawah
e. Menampilkan teks dengan bentuk miring
11. [ 1 ] <hr>
[ 2 ] <br>
[ 3 ] <font>
[ 4 ] <center>
Yang merupakan tag tunggal ditunjukkan oleh nomor :
a. 1 & 2 d. 2 & 3
b. 1 & 3 e. 3 & 4
c. 1 & 4
12. Tag yang digunakan untuk mengganti baris adalah ….
a. <br> d. <line>
b. <ln> e. <baris>
c. <break>
13. Atribut tag <hr> yang berfungsi untuk mengatur ketebalan garis adalah ….
a. face d. noshad
b. size e. position
c. width
14. [ 1 ] <underline>
[ 2 ] <subscript>
[ 3 ] <position>
[ 4 ] <width>
Yang merupakan tag format teks, ditunjukkan oleh nomor :
a. 1 & 2 d. 2 & 3
b. 1 & 3 e. 3 & 4
c. 1 & 4
15. Untuk membuat tampilan teks seperti CO2, menggunakan perintah ….
a. face d. subscript
b. size e. superscript
c. font

Halaman 7
Modul Siswa Multimedia-SMK Negeri 4 Semarang

II. Jawablah pertanyaan berikut dengan singkat dan jelas !


1. Tulislah struktur dasar HTML secara lengkap !
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
2. Jelaskan perintah berikut ini :
<hr size=10 width=600>
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
3. Jelaskan perintah berikut ini :
<font face=Calibri size=3 color=red>
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
4. Tulislah perintah yang digunakan untuk :
a. Membuat teks pada posisi tengah dokumen
………………………………………………………………………………………………………………………………………………
b. Memberi animasi teks dari kanan ke kiri dokumen
………………………………………………………………………………………………………………………………………………
c. Memberi animasi teks dari kiri ke bawah dokumen
………………………………………………………………………………………………………………………………………………
d. Memberi animasi teks dari bawah ke atas dokumen
………………………………………………………………………………………………………………………………………………
e. Memberi animasi teks dari atas ke bawah dokumen
………………………………………………………………………………………………………………………………………………

Halaman 8
Modul Siswa Multimedia-SMK Negeri 4 Semarang

A. Menampilkan Gambar
Browser dapat menampilkan gambar, dengan format sebagai berikut :
 BMP ( Windows Bitmap )
 GIF ( Graphical Interchange Format )
 JPEG ( Joint Photographic Expert Image )
 PNG ( Portble Network Graphic )
Penggunaan gambar sebaiknya tidak berlebihan, karena akan memperlambat load dokumen.
Perintah untuk menampilkan gambar adalah :

< img src = nama_file_gambar >

Atribut pada tag < img > tercantum pada tabel dibawah ini :

Atribut Value Keterangan


src Nama_file_gambar Misalnya : smkn4smg.bmp
alt Teks komentar alternatif Komentar ditampilkan jika gambar tidak ditemukan
align  Top, middle, bottom menentukan posisi teks
Top, middle, bottom, left, right
terhadap gambar
 Left, right menentukan posisi gambar pada
halaman
vspace Pixel Posisi gambar secara vertikal, dimulai dari sudut kiri
atas
hspace Pixel Posisi gambar secara horizontal, dimulai dari sudut
kiri atas
height Pixel / Prosen Tinggi gambar
width Pixel / Prosen Lebar gambar
border Pixel Nilai 0 diberikan untuk menghilangkan garis pada
gambar
Penggunaan atribut height dan width sebaiknya dihindari. Karena penggunaan height dan width
secara bersama-sama dapat menghailkan gambar yang tidak proporsional. Jadi jika terpaksa
digunakan sebaiknya tidak digunakan bersama-sama, sehingga atribut lain akan menyesuaikan.
Hindarkan pula memperbesar ukuran gambar, karena akan menurunkan resolusinya.

Contoh :

< img src = smkn4smg.bmp alt=logo_smk4smg vspace=100 hspace=200 width=70% >

B. Membuat Hyperlink
Hyperlink digunakan untuk menghubungkan antara dokumen web yang sedang dibuka dengan
dokumen lain. Link antar dokumen dapat dilakukan pada penyimpanan yang sama, dapat juga pada
komputer lain yang terhubung dalam uatu jaringan. Perintah yang digunakan sebagai berikut :
< a href = nama_dokumen > teks_penunjuk_link </a>

< a href = URL / nama_dokumen > teks_penunjuk_link </a>

Halaman 9
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Jika suatu link ingin ditampilkan pada halaman browser berbeda dapat ditambahkan atribut
target=blank().

Contoh :
< a href=Hardware.htm target=blank() > Toko Komputer </a>

C. Membuat List
Pada prinsipnya daftar ( list ) terdiri dari dua macam. Daftar berurutan disebut ordered list. Ordered
List dapat berupa urutan angka dan huruf. Daftar tidak berurutan yang biasa disebut unordered list.
Unordered list lebih dikenal dengan istilah bullet.
1. Ordered List
Daftar berurutan dibuat dengan struktur perintah sebagai berikut :
< ol >
< li >
< li >
< /ol >
Keterangan :
<ol> : tag pembuka untuk daftar berurut
</ol> : tag penutup untuk daftar berurut
<li> : tag tunggal yang tidak memerlukan tag penutup, menunjukkan letak daftar ditulis
Atribut pada ordered list tercantum pada tabel dibawah ini :

No Atribut Value Keterangan


1 type 1 Angka
I Upper Roman ( Romawi )
i Lower Roman
A Upper Case
a Lower Case
2 start 1…9 Permulaan value yang dikehendaki
A…Z
a…z

2. Unordered List
<ul>
<li>
<li>
</ul>
Keterangan :
<ul> : Tag pembuka untuk daftar tidak berurut
</ul> : Tag penutup untuk daftar tidak berurut

Atribut pada unordered list tercantum pada tabel dibawah ini :

Halaman 10
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Atribut Value Keterangan


type square Bullet kotak
circle Bullet lingkaran
disk Bullet lingkaran hitam

D. Rangkaian Escape
Tidak semua karakter pada web terdapat pada keyboard. Untuk menampilkan karakter – karakter
khusus dapat dilakukan dengan menyalin dari Character Map atau menggunakan rangkaian escape.
Rangkaian escape ini ditulis dengan didahului symbol & diakhiri symbol, seperti tampak pada tabel
dibawah ini :

Rangkaian Escape Keluaran


&lt; <
&gt; >
&amp; &
&quot; “
&copy; ©
&deg; °
&frac13; ⅓
&frac35; ⅗
E. Menampilkan Komentar
Penulisan komentar bertujuan untuk memberi penjelasan atau mempermudah pemahaman
membaca file tersebut.

Contoh :
<! Komentar ditulis pada bagian ini, namun pada saat menampilkan pada browser, maka komentar
tidak akan ditampilkan>

Keterangan :
Tag <!komentar> merupakan tag tunggal

F. Membuat Tabel
1. Tabel, Baris dan Kolom
Tag <table> digunakan untuk membuat tabel pada halaman web.
Dua unsur pokok pembentuk tabel adalah baris ( table row ) dan kolom ( table data ).
<tr> : Tag untuk membuat suatu baris
<td> : Tag untuk membuat suatu kolom
Tag <table>, <tr>, <td> merupakan tag yang memerlukan tag penutup untuk mengakhirinya.

Perintah dasar membuat tabel :


<table>
<tr>
<td> </td>

Halaman 11
Modul Siswa Multimedia-SMK Negeri 4 Semarang

</tr>
</table>

Atribut pada tag <table>, tercantum pada tabel dibawah ini :

Atribut Value Keterangan


border 0 s/d n Tebal border tabel. Jika border=0 maka tabel tidak
tampak
bgcolor Warna tabel, value : red, blue, Warna background tabel
lightblue ( nama warna ) atau
hexadecimal : #000000 s/d #ffffff
align Center, justify, left, right Perataan teks pada cell tabel
valign Baseline, top, bottom, middle Perataan teks pada cell secara vertical
Pixel, prosentase
width Pixel Lebar tabel dalam pixel atau prosentase
cellspacing Pixel Jarak ( spasi ) antar cell
cellpading Pixel Jarak ( spasi ) antar border dan teks dalam cell

Atribut pada tag <tr> dan <td>, tercantum pada tabel dibawah ini :

Atribut Value Keterangan


bgcolor Warna tabel, value : red, blue, Warna baris atau kolom
lightblue ( nama warna ) atau
hexadecimal : #000000 s/d #ffffff
align Center, left, right Perataan teks pada cell
width Pixel / Prosentase Lebar cell

2. Memberikan Judul dan Header Pada Tabel


Untuk memberi judul pada tabel dapat menggunakan perintah <caption>. Header adalah baris
pertama pada tabel yang berisi keterangan pada tiap – tiap kolom. Header dibuat dengan tag
<th>, seperti contoh berikut ini :
<table border=”1”>
<caption>Creating Table</caption>
<tr>
<th> Header 1 </th>
<th> Header 1 </th>
<th> Header 1 </th>
</tr>

3. Menggabungkan Cell ( Split )


Pada kolom <td> terdapat atribut untuk menggabungkan kolom yaitu colspan. Sedangkan
atribut untuk menggabungkan baris adalah rowspan.

G. Membuat Frame

Halaman 12
Modul Siswa Multimedia-SMK Negeri 4 Semarang

1. Frame secara kolom dan baris


Frame atau bingkai berguna untuk membagi halaman web menjadi sejumlah bagian (window).
Pembuatan frame dapat dilakukan secara baris ( row ) atau kolom ( col ) dengan menggunakan
perintah <frameset>. Setiap frame dapat diisi dengan dokumen html atau dibuat frame baru
(sub frame). Pada pembuatan frame tidak diperlukan tag <body>.

2. Perintah dasar frame


Frame dibuat dengan dua buah perintah dasar :
a. Untuk menentukan bentuk frame dapat menggunakan perintah :
Tag < frameset cols= > : Membentuk frame secara kolom
Tag < frameset rows= > : Membentuk frame secara baris
Tag penutupnya adalah </frameset>.
Contoh :
< frameset cols = 40%, * >, artinya frame dibuat secara kolom menjadi dua bagian, yang
bagian pertama memiliki lebar 40%, sedangkan yang kedua memiliki lebar sisanya yaitu 60%
< frameset rows = 30%, * >, artinya frame dibuat secara baris menjadi dua bagian, yang
bagian pertama memiliki lebar 30%, sedangkan yang kedua memiliki lebar sisanya yaitu 70%
b. Tag <frame src >, perintah untuk menentukan dokumen sumber ( source ) pengisi tiap
bagian frame. Tag <frame src> adalah tag tunggal yang tidak memiliki tag penutup.
Contoh :
<html>
<frameset cols = 40%,*>
<frame src = HalamanWeb1.htm >
<frame src = HalamanWeb2.htm >
</frameset>
</html>

Atribut pada tag <frameset> tercantum pada tabel dibawah ini :

Atribut Value
cols Pixel / Prosentase
rows Pixel / Prosentase
border 0 s/d n

Atribut pada tag <frame>, tercantum pada tabel dibawah ini :

Atribut Value
src Nama dokumen, misalnya : Latihan1.htm
name Identifier misalnya : frame1, digunakan untuk
memberi nama area frame
marginwidth Pixel. Digunakan untuk menentukan margin kiri
dan margin kanan
marginheight Pixel. Digunakan untuk menentukan margin atas

Halaman 13
Modul Siswa Multimedia-SMK Negeri 4 Semarang

dan margin bawah


scrolling  Yes, menampilkan scrollbar vertical dan
horizontal
 No, tidak menampilkan scrollbar
 Auto, menampilkan atau tidak tergantung
kebutuhan (default )
noresize Tidak ada. Berfungsi suapaya frame tidak dapat
diubah ukurannya.

3. Targetting pada frame


Untuk menampilkan suatu link pada frame tertentu dibutuhkan atribut target ( targetting ).
Misalnya terdapat frame kolom dengan dua bagian. Bagian pertama berisi daftar link yang bisa
di klik, sedangkan bagian kedua merupakan area untuk menampilkan link tersebut. Seperti
contoh berikut ini :

Daftar Link :
Area ini untuk menampilkan situs “Ilmu Komputer” dan
Ilmu Komputer “Suara Merdeka“
Suara Merdeka
Atribut target diletakkan pada tag <a href=http://www.ilmukomputer.com
target=nama_area_frame>
4. Target khusus
Target khusus adalah target suatu link yang tidak diarahkan pada nama area. Target khusus
harus diawali symbol “_” ( underscore ). Target khusus yang dapat digunakan :
a. target=_blank
Target ini akan menampilkan link pada window baru ( jendela browser baru )
b. target=_parent
Target ini akan menampilkan link pada window induk frameset saat ini
c. target=_self
Target ini akan menampilkan link pada window yang sama dengan link tersebut diletakkan
(default)
d. target=_top
Target ini akan menampilkan link pada window teratas

Halaman 14
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Latihan

I. Pilihlah salah satu jawaban yang tepat dengan memberi tanda silang ( X ) pada salah satu huruf
jawaban a, b, c, d atau e pada lembar jawaban !
1. [ 1 ] png
[ 2 ] psd
[ 3 ] cdr
[ 4 ] gif
Format gambar yang dapat ditampilkan di browser ditunjukkan pada nomor ….
a. HTML d. Pascal
b. Word e. SPSS
c. Excell
2. Perhatikan perintah dibawah ini !
< img src = mobil.jpg >

Fungsi dari perintah diatas adalah ….

a. Mengedit garis d. Mengedit warna gambar


b. Mengedit gambar e. Merubah tekstur gambar
c. Menampilkan gambar
3. Fungsi atribut vspace pada tag<img> adalah ….
a. Memberi komentar d. Mengatur posisi gambar secara vertikal
b. Mengatur tinggi gambar e. Mengatur posisi gambar secara horizontal
c. Mengatur ketebalan garis
4. Untuk menghubungkan antara dokumen web yang sedang dibuka dengan dokumen lain
menggunakan perintah ….
a. hyperlink d. escape
b. cellspacing e. list
c. cellpading
5. Yang dimaksud dengan ordered list adalah ….
a. Daftar tidak berurutan berupa angka dan huruf
b. Daftar berurutan berupa angka dan huruf
c. Daftar berurutan berupa angka
d. Daftar berurutan berupa huruf
e. Daftar berurutan berupa simbol
6. Rangkaian escape yang ditulis untuk menampilkan tanda © adalah ….
a. &lt; d. &quot;
b. &deg; e. &fraq13;
c. &copy;

Halaman 15
Modul Siswa Multimedia-SMK Negeri 4 Semarang

7. Tag yang digunakan untuk membentuk suatu baris pada tabel adalah ….
a. <td> d. <colspan>
b. <tr> e. <rowspan>
c. <table>

Halaman 16
Modul Siswa Multimedia-SMK Negeri 4 Semarang

8. Fungsi atribut width pada tag <table> adalah ….


a. Mengatur lebar tabel d. Mengatur tinggi pada tabel
b. Mengatur jarak pada sel e. Mengatur kolom pada tabel
c. Mengatur baris pada tabel
9. Perintah yang digunakan untuk memberi judul pada tabel adalah ….
a. title d. header
b. name e. title name
c. caption
10. Baris pertama pada tabel yang berisi keterangan pada tiap – tiap kolom disebut ….
a. row d. header
b. title e. column
c. caption
11. Pada tag <td> terdapat atribut untuk menggabungkan kolom yaitu ….
a. rowspan d. columnspan
b. colspan e. columnmerge
c. colsmerge
12. Fasilitas yang digunakan untuk untuk membagi halaman web menjadi sejumlah bagian dalam
bentuk baris atau kolom disebut ….
a. table d. cellspacing
b. frame e. cellspading
c. escape
13. Perintah yang dapat digunakan tanpa memerlukan tag <body> adalah ….
a. table d. hyperlink
b. frame e. marquee
c. escape
14. Perintah yang dapat digunakan untuk menampilkan link pada window induk adalah ….
a. target=_namearea d. target=_self
b. target=_parent e. target=_top
c. target=_blank
15. Perintah yang dapat digunakan untuk menampilkan link pada window yang sama adalah ….
a. target=_namearea d. target=_self
b. target=_parent e. target=_top
c. target=_blank
II. Jawablah pertanyaan berikut dengan singkat dan jelas !
1. Jelaskan perintah berikut ini :
a. < img src = semarang.jpg alt=semarang vspace=200 hspace=300 width=50% >
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
b. < a href=Kesehatan.htm target=blank() > Kesehatan </a>
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
c. < frameset cols = 20%, * >
……………………………………………………………………………………………………………………………………………

Halaman 17
Modul Siswa Multimedia-SMK Negeri 4 Semarang

2. Sebutkan 2 hal yang perlu kita hindari pada saat menampilkan gambar di dokumen HTML !
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
3. Tulis struktur dasar perintah dibawah ini :
a. Membuat unordered list
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
b. Membuat ordered list
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
c. Membuat tabel
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
4. Tulislah cara membuat komentar “ Program Membuat Tabel” pada dokumen HTML Anda !
………………………………………………………………………………………………………………………………………………….
5. Jelaskan disertai dengan gambar perintah dibawah ini !
<html>
<frameset cols = 40%,*>
<frame src = HalamanWeb1.htm >
<frame src = HalamanWeb2.htm >
</frameset>
</html>
………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………….

Halaman 18
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Halaman 19
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Halaman 20
Modul Siswa Multimedia-SMK Negeri 4 Semarang

Halaman 21

Anda mungkin juga menyukai