View
11
Download
0
Category
Preview:
Citation preview
PANDUAN PRAKTIKUM 515TEM INFDRMASI MANAJEMEN WEB DESIGN DAN MICROSOFT ACCESS
- PUSAT KOMPUTER • UNIVERSITAS MEDAN AREA
ANDRE HASUDUNGAN LUBIS, S.Ti, M.Sc
RDMADANSYAH SIAGIAN, S.Kom
•
UNIVERSITAS MEDAN AREA
< >
Pengantar Praktikum HTML
Javascript CSS (Cascading Style Sheets)
Pengantar Praktikum Web Design
UNIVERSITAS MEDAN AREA
<
Kata Pengantar
Puji syukur penulis panjatkan kehadirat Allah swr. karena
berkat rahmat dan karunia.::._NY A penulis dapat menyelesaikan
buku praktikum Sistem Informasi Manajemenyang dikhususkan
un tuk digunakan pada pelaksanaan praktikum bagi mahasiswa.
Buku ini berisi tentang pembuatan website yang
membahas tentang bahasa pemrograman html dan membahas
ten tang pengolah�n data base dengan Microsoft Access.
Pada kesempatan ini penulis mengucapkan terima kasih
kepada Bapak Drs. M. Erwin Siregar. MBA. selaku Ketua Yayasan
Pendidikan H�ji Agus Salim yang selalu mengingatkan kepada
setiap orang, khususnya penulis untuk terus berinovasi terhadap
hal-hal yang positif juga bermanfaat. Ucapan terima kasih ini juga
kami sampaikan kepada seluruh staf Pusat Komputer Universitas
Medan Area, yang telah banyak membantu penulis dalam
menyusun buku ini.
Penulis menyadari bahwa buku ini masih belum
sempurna,oleh karena itu saran dan kritik sangat diharapkan
untuk kesempurnaan buku praktikum ini. Semoga buku ini
bermanfaat bagi para pembacanya.
Medan, November 20 I 7
Penulis,
>
membahas tentang bahasa pemrograman
pengolah�n data base dengan Microsoft Access.
Pada kesempatan ini penulis mengucapkan terima
Bapak Drs. M. Erwin Siregar. MBA. selaku Ketua
Pendidikan H�ji Agus Salim yang selalu mengingatkan
orang, khususnya penulis untuk terus berinovasi terhadap
yang positif juga bermanfaat. Ucapan terima kasih
sampaikan kepada seluruh staf Pusat Komputer
Area, yang telah banyak membantu penulis
menyusun buku ini.
Penulis menyadari bahwa buku ini ma
sempurna,oleh karena itu saran dan kritik sangat
kesempurnaan buku praktikum ini. Semoga buku ini
UNIVERSITAS MEDAN AREA
( >
Daftar Isi
Kata Pengantar ........................................................................................................... i
Daftar Isi ................................................................................................................... .ii
Dasar-Dasar HTML5 . . . . . . . . . . . . . ... . . .... . . . . . . . . ... . . ... .. . ... . . . . ..... . . . . . . . . . . .... . . . . . . . . . . . . .. . . . ..... . . 1
Hyper links . ... ....... ... . . . . . . . ....... . . ..... .. . . ... . . . . .. .... . . . . . . . . . ... . . . . . . ... . . . ... ... . . . . . . . . . . ... . . . . . . . . . . . . . . . 20
Images . . . . . . . . . . . . . . . . . : ............ :."······························································-·······················2 3
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . : .................................................................... 27
Tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Form . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . .. . . . .... . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . .. . . . . . . . . . . . . .. . . . . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Javascript . . . . . . . . . . . ... . . . . . . . . . . . ... . .. ... . . ... . ... . . . . : ............................................... , ................ 49
Cascading Style Sheets . .. . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . .... . . . . . . . .. . . . . . . . . . . . . . . . . .. . . . . . . . . . . ... . . . .. . . .. . 53
Pengenalan Microsoft Access 20 I 0 . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . ... . . . . . . . . . . . 58
Operasi Tabel . . . . . . . . . .. ... ... . . . . . . . .. . . . . . ... . ... . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Membuat dan Mengatur Query . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . ... .... . . . . . 85
Mengolah Query .. . . . . . . . . ... . . . . . . . . . . . . . . . . .. . . . . . . . . . . . � . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . ... .. . . . . . . . . ... . .... . 94
Form Design . . ... . . . . . . . . . . . . . . . . . .. .. . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . ...... . ... . . 111
Control dan Command Button . . . . . . ...... . . . . . . ... . . . . . . . . . . ...... . . .. . . . . . . . ... ... . . . . . . . . . . . . . .. 117
Form. Relationship Table dan Rumus . . . . . . . . . . . . . ... . . . . . . . . . . . . . .. . . . . . . .. ... . ... . . . ..... 123
Report .......................................................................................................... 129
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . : .................................................................... ....................................................................
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . .... . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . .. . . . . . . . . . . . . .. . . . . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . ... . . . . . . . . . . . ... . .. ... . . ... . ... . . . . : ............................................... ............................................... , ................
Style Sheets . .. . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . .... . . . . . . . .. . . . . . . . . . . . . . . . . .. . . . . . . . . . . ... .Microsoft Access Access 20 I 0 . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . ... . . . . .
. . . . . . . . . .. ... ... . . . . . . . .. . . . . . ... . ... . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mengatur Query . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . ..Query .. . . . . . . . . ... . . . . . . . . . . . . . . . . .. . . . . . . . . . . . � . . . . . . . . � . . . . . . . . . . ... . . . . . . . . . . . . . . . . . . . . . . . . . . . ... .. . . . . . . . . .
UNIVERSITAS MEDAN AREA
HTML (HyperText Markup Language) merupakan bahasa
pe1mograman untuk menyusun halaman web yang diletakkan pada
sebuah web server. HTML bisa terdiri dari beberapa file yang
mendukung terbentuknya sebuah halaman web seperti pada gambar 1.
Gambar 1. Ilustrasi web page
Format penulisan sintak HTML5 secara umum masih seperti format
HTML versi sebelurnnya. HTML5 menggunakan encoding (charset)
UTH-8 yang didefenisikan pada setiap halaman html. Format sintak
HTML5 Seperti dibawah ini:
<body? Content of :h;, docl.ml'!nt •• • • • • <!body>
</ht.Jn!>
Tag-Tag Dasar HTML
Ada beberapa elemen barn yang disediakan di HTML5 untuk
mendukung pembuatan halaman website modem seperti: header
Pengantar Praktikum Web Design
Gambar 1. Ilustrasi web page ge g
penulisan sintak HTML5 secara umum masih seperti
versi sebelurnnya. HTML5 menggunakan encoding
yang didefenisikan pada setiap halaman html. Format
Seperti dibawah ini:
UNIVERSITAS MEDAN AREA
< >
footer, navigasi bars, sedebars, dan sebagainya. Beberapa elemen
barn HTML5 seperti terlihat pada tebel 1.
<.article>
<section> <nav>
<aside>
<header> <footer>
Tb 11 El a e emen-e emen b aru 1se 1a an d HTMLS
Mendefinisikan sebuah. arlikel pad a dokumen seperti : berita, komentar dan
Mendefinisikan sebuah section subuah dokumen Mendefinlkan link sebuah dokumen
Untuk menandai sebuah sidebar atau beberapa konten lainnya yang dianggap u.ntuk konten adalah iklan
Mendefinisikan header sebuah dokumen a tau section
fl>o.!:�.:;_�bua!l dok11men atau se�Jion
Mendefinisikan sebuah elem en
Elemen formjuga mengalami pengembangan pada HTML5. Elemen
elemen barn pada form seperti tabel 2.
Tbl'2El a e em en orm d HTMLS a
<dat:alist> Definisi awal untuk masukan <kevgen> Mendefinisikan sebuab field funtuk fonn)
Mendeflnisikan hasH dari sebuab kalkulasi
Untuk mendukung fasilitas gambar dan media HTML5 menyediakan
beberapa elemen seperti pada tabel 3 dan 4.
Mendefinisikan Mendefinisikan
emen me 1a d HTMLS
<audio> Mendefinisikan konten audio atau musik
<embed> Mendefinisikan containers untuk ekstemal <source> Men.definisikan suber untuk <audio> dan video <video> Mendefini.kun konten video atau film
<track.> Meodefinisikan track <audio> dan <video>
Pengantar Praktikum Web Design 2
Mendefinisikan sebuah elem en
formjuga mengalami pengembangan pada HTML5. Elemen
pada form seperti tabel 2.
Tbl'2El Tbl'2El Tbl'2El a Tbl'2El Tbl'2El e Tbl'2El em en orm d d HTMLS HTMLS a
Definisi awal untuk masukan Mendefinisikan sebuab field funtuk fonn)
Mendeflnisikan hasH dari sebuab kalkulasi
mendukung fasilitas gambar dan media HTML5 menyediakan
elemen seperti pada tabel 3 dan 4.
UNIVERSITAS MEDAN AREA
< >
Untuk elemen lain dari HTML5 seperti pada tabel 5.
Nama,Tag
Basic
Tabel 5. Elem en pada HTML5
DOCTYPE> untuk menentukan tipe dokumen
<html> untuk membuat sebuah dokumen HTML
<title>
<body>
<hl> to
<h6>
untuk membuat judul dari sebuah halaman
Tag untuk membuat tubuh dari sebuah halaman
untuk membuat heading
<p> untuk membuat paragraf · <br> satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
<!--... --> untuk membuat komentar
Formatting
Tag untuk membuat sebuah akronim (tidak disupport <acronym>
lagi di HTML5)
untuk membuat sebuah singkatan
<address> untuk membuat kontak alamat
<b> untuk membuat hurufbercetak tebal
Mengiso lasi bagian dari teks yang dapat di format
dalam arah yang berbeda dari teks lain di luamya
(tag baru HTML5)
r Praktikum Web Design 3
untuk membuat judul dari sebuah halaman
Tag untuk membuat tubuh dari sebuah halaman
untuk membuat heading
untuk membuat paragraf
satu baris putus
Tag untuk membuat perubahan dasar kata didalam
untuk membuat komentar
Formatting
Tag untuk membuat sebuah akronim (tidak disupport <acronym>
UNIVERSITAS MEDAN AREA
<
NamaTag Keterangan I Kegunaan <bdo>
<big>
arah teks
untuk membuat text berhuruf besar (tidak disupport Jagi di HTML5)
bl k t Tag untuk membuat sebuah bagian text yang dikutip < oc quo e> dari sumber lain
Tag untuk membuat jajaran teks menjadi ditengah <center> (tidak disupport lagi di HTML5)
<cite> membuat judul karya
<code> untuk membuat potongan kode komputer di antara text
<del> untuk membuat tcks yang telah dihapus dari
<dfn> Tag untuk membuat sebuah istilah definisi
Tag untuk membuat penekanan teks (tidak disupport <em> lagi di HTML5)
teks (tidak disupport lagi di HTML5) Tag untuk membuat font, warna, dan ukuran untuk <font>
Tag untuk membuat sebuah bagi'an dari teks yang <i> disesuaikan dengan mood
Tag untuk membuat teks yang telah dimasukkan ke <ins> dalam dokumen
<kbd> untuk membuat input keyboard
Tag untuk membuat teks ya_ng disorot I ditandai (tag <mark>
baruHTML5) <meter> untuk membuat pengukuran skalar
<pre> untuk membuat teks terform at
Pengantar Praktikum Web Oesign 4
>
membuat judul karya untuk membuat potongan kode komputer
antara text untuk membuat tcks yang telah dihapus dari
Tag untuk membuat sebuah istilah definisi
Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
teks (tidak disupport lagi di HTML5) Tag untuk membuat font, warna, dan ukuran untuk
Tag untuk membuat sebuah bagi'an dari teks yang disesuaikan dengan mood
UNIVERSITAS MEDAN AREA
>
l l ] l l ] l l l
< >
NamaTag Keterangan I Kegunaan
<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> untuk membuat kutipan pendek
Tag untuk membuat apa yang_harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)
<rt> Tag untuk membuat sebUah anotasi I pengucapan karakter (untuk tipografi Asia T imur)
<ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia T imur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp> Tag untuk membuat contoh keluaran dari program komputer
<small> untuk membuat teks kecil
Tag untuk membuat teks yang di coret tengah (tidak <strike> disupport lagi di HTML5)
<strong> untuk membuat teks penting
<sub> Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
<sup> Tag untuk membuat teks superscripted ( seperti dalam penulisan akar kuadrat)
<time> Tag untuk membuat tanggal I waktu (tag baru HTML5)
<tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
<u> Tag untuk membuat tcks yang memiliki Gaya yang berbeda dari teks biasa lainnya
Pengantar Praktikum Web Design 5
<ruby> Tag untuk membuat sebuah anotasi ruby tipografi Asia T imur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp> Tag untuk membuat contoh keluaran dari komputer
<small> untuk membuat teks kecil
Tag untuk membuat teks yang di coret tengah <strike> disupport lagi di HTML5)
<strong> untuk membuat teks penting
<sub> Tag untuk membuat teks subskrip (seperti penulisan Jat Kimia)
Tag untuk membuat teks superscripted ( seperti
UNIVERSITAS MEDAN AREA
<
Nama Tag Keterangan I Kegunaan <var> untuk membuat sebuah variabel
Tag untuk membuat kemungkinan garis-putus <wbr>
<form> Tag untuk membuat sebuah form HTML untuk input
•
>
untuk membuat sebuah kontrol input <input>
<textarea>
<button>
<select>
<optgroup>
<option>
<label>
<fieldset>
<legend>
<datalist>
Tag untuk membuat sebuah kontrol input multibaris (text area)
Tag untuk membuat sebuah tombol yang dapat diklik
Tag untuk membuat sebuah daftar drop-down
Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
untukmembuat pilihan dalam daftar drop-down
Tag untuk membuat sebuah label untuk sebuah elemen <mput> .
unsur terkait dalam bentuk
Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
Tag untuk membuat key-pair generator kolom input <keygen>
(tag baru HTML5)
t t untuk membuat hasil penghitungan (tag baru
<ou pu > HTML5)
Frames
Pengantar Praktikum Web Uesign 6
<optgroup>
Tag untuk membuat sebuah kontrol input multibaris (text area)
Tag untuk membuat sebuah tombol yang dapat
Tag untuk membuat sebuah daftar drop-down
Tag untuk membuat sebuah kelompok pilihan terkait dalam daftar drop-down
untukmembuat pilihan dalam daftar daftar daf drop-down
Tag untuk membuat sebuah label untuk sebuah elemen <mput> .
unsur terkait dalam bentuk
Tag untuk membuat sebuah caption untuk sebuah
UNIVERSITAS MEDAN AREA
< >
Nam.a Tag Keterangan I Kegunaan
<frame> untuk membuat sebuah window (bingkai) dalarn
sebuah frnmeset (tidak disupport lagi di HTML5)
<frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
Tag untuk membuat sebuah konten altematif untuk <noframes> pengguna yang tidak mendukung frame (tidak
disupport lagi di HTML5) <iframe> untuk membuat sebuah bingkai
<img> untuk membuat gambar
<map> untuk membuat gambar-peta
<area> untuk membuat area dalam gambar-peta
<canvas> Digunakan untuk menggambar grafik, melalui scnptmg (JavaScnpt ) (tag barn HTML5)
<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure> konten mandiri (tag baru HTML5)
Audio/Video
<audio> untuk membuat isi suara (tag barn HTML5)
<source>
Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag barn
HTML5)
<track> untuk membuat trek teks untuk elemen media
(<video> dan <audio>) (tag baru HTML5)
<video> Tag untuk membuat sebuah video a tau fi Im (tag baru HTML5)
Pengantar Praktikum Web Design 7
untuk membuat gambar
untuk membuat gambar-peta
untuk membuat area dalam gambar-peta
<canvas> Digunakan untuk menggambar grafik, melalui scnptmg (JavaScnpt ) (tag barn HTML5)
<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure> konten mandiri (tag baru HTML5)
Audio/Video
UNIVERSITAS MEDAN AREA
<
Keterangan I Kegunaa:n Links <a> untuk membuat hyperlink l
untuk rnembuat hubungan antara d�kurnen dan ,
I <link> I sumber daya ekstemal (paling sering digunakan
JI
link ke style sheet)
untuk me��vigasi 1i:;;- (tag baru -- _ J
<ul> membuat daftar dengan selain nornor I
untuk membuat daftar dengan nomor <li> untuk membuat sebuah item daftar
untuk membuat sebuah daftar direktori (tidak lagi di HTML5)
membuat sebuah daftar definisi untuk membuat istilah (item)
definisi <dd>
<menu>
<command>
a description of an-item in a definition list
Tag untuk mernbuat deskripsi dari item dalam daftar ·1 defims1 _J
untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag barn HTML5)
Tables
<table> untuk rnembuat tabel
<th> Tag untuk membuat sebuah sel header tabel
Pengantar Praktikum Web Oesigr. 8
_ _ _ membuat daftar dengan selain nornor
untuk membuat daftar dengan nomor untuk membuat sebuah item daftar untuk membuat sebuah daftar direktori (tidak
lagi di HTML5)
membuat sebuah daftar definisi untuk membuat istilah (item)
definisi a description of an
-item in a definition
Tag untuk mernbuat deskripsi dari item dalam
UNIVERSITAS MEDAN AREA
J J J J
J J J J J J J J
< >
· Nama Tag Keterangan I Kegunaan <tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
<col> properti kolom untuk setiap kolom
dalam elemen <colgroup>
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
<header> Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<footer> Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
elemen heading (<hi> sampai <hgroup>
<h6>) (tag baru HTML5)
<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
antar Praktikum Web Uesign 9
<col> properti kolom untuk setiap
dalam elemen <colgroup>
<colgroup> <colgroup> Menentukan Menentukan kelompok kelompok dari dari satu atau lebih lebih dalam dalam sebuah tabel untuk diformat
Style/Sections
e> Tag untuk membuat informasi style untuk
<div> Tag untuk membuat sebuah bagian dalam
<span> Tag untuk membuat sebuah bagian dalam
<header> Tag Tag untuk untuk membuat membuat sebuah sebuah header header untuk untuk atau atau bagian bagian (tag (tag baru HTML5) HTML5)
<footer> Tag Tag untuk untuk membuat membuat footer footer untuk dokumen bagian bagian (tag baru HTML5) HTML5)
UNIVERSITAS MEDAN AREA
<
Nama Tag
<details>
Keterahgan I Kegl}naah --Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru
HTML5)
>
<dialog> Tag untuk membuat sebuah kotak dialog a tau j en de la (tag baru HTML5)
<summary> Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
b URL dasar I target untuk semua URL
< ase> relatif dalam dokumen Menentukan standar wama, ukuran, dan font untuk
<basefont> semua teks dalam dokumen ( tidak disupport lagi di HTML5)
Programming
<script> untuk membuat script di sisi klien
<noscript> Tag untuk membuat sebuah konten altematif bagi pengguna yang tidak mendukung script di sisi klien
<applet> Tag untuk membuat sebuah java applet yang ditanam ( tidak disupport lagi di HTML5)
<embed> Tag untuk membuat sebuah wadah untuk aplikasi ekstemal (non-HTML) (tag baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek
Pengantar Praktikum Web Design 10
Tag untuk membuat informasi tentang dokumen
Tag untuk membuat metadata tentang dokumen HTML
URL dasar I target untuk semua relatif dalam dokumen Menentukan standar wama, ukuran, dan font semua teks dalam dokumen ( tidak disupport lagi
HTML5) Programming
untuk membuat script di sisi klien
Tag untuk membuat sebuah konten altematif
UNIVERSITAS MEDAN AREA
<
Latihan · .. ·
Buat sebuah folder baru dengan nama folder NPM pada drive D:\ di komputer. Pada latihan 1 ini menggunakan Tag dasar html.
1. Jalankan Notepad atau teks editor lain. 2. Ketikan baris-baris kode berikut. (ketik persis seperti yang terlihat
di buku ini).
<!DOCTYPE html>
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Latihan pertama, dasar-dasar html
</body>
</html>
. Kemudian klik menu File > Save atau Save As pada menu bar Notepad.
Praktikum Web Design 1 1
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Latihan pertama, dasar-dasar html
</body>
</html>
Kemudian klik menu File > Save atau Save As pada Notepad.
UNIVERSITAS MEDAN AREA
< > 4. Lalu ketika muncul jendela Save As seperti di bawah ini, pada
kotak isian File name ketiklah "latihan _ 1.html" (ketik teks persis tanpa tanda petik), kemudian di bagian Save as type ganti menjadi "All Files(*.*)".
5. Kemudian klik tombol Save. 6. Pada Windows Explorer, browser folder NPM yang sudah dibuat
sebelumnya. Kemudian klik ganda file latihan _I .html urituk menjalankannya. Lihat apa yang terjadi.
7. Akan tampil di aplikasi browser tampilan web seperti berikut.
Pengantar Praktikum Web Uesign 12
Kemudian klik tombol Save. Windows Explorer, browser folder NPM yang sudah
sebelumnya. Kemudian klik ganda file latihan _I latihan _I latihan .hmenjalankannya. Lihat apa yang terjadi.
tampil di aplikasi browser tampilan web seperti berikut.
UNIVERSITAS MEDAN AREA
> 1da iSlS
adi
uat
< >
Latihan 2. Mengatur Heading dan Paragraf
<hr> menunjukkan sebuah horizontal ruleatau garis horizontal, yaitu garis yang mendatar dari kiri ke kanan atau dari kanan ke kiri.
Ketikan baris-baris kode berikut, menggunakan aplikasi Adobe
Dreamweaver CS6, kemudian s1mpan dengan file name "latihan 2.html".
ow ... o .. a, .. File Edit View Insert Modify Format Comman,ls Sil:� Window Help
"ht.r.p: //www. w3. erg/TR/ ><ht.ml 1/DTD/x.ht.mll-tran,,it.ional .dtd">
<html :anlns="http://www. w3 .org/1999/x.html">
<head>
<meta .http-equiv="Contenc-Typeri content="text/html; charset=uct-8" />
<title>Lat.ihan 2</tit.le> </head>
is heading 1</hl>
i3 30me text.</p>
is heading 2</h2> !lome ct.her texc.</p>
Latihan 3. List dan Pel1onioral1
01 menunj ukkan sebuah ordered list yaitu daftar (list) beberapa item ang terstruktur atau berurutan. Sehingga, apabila item-item tersebut
diubah urutannya, maka makna yang tersirat dalam dokumen tersebut pun ikut berubah.
Pengantar Praktikum Web /Jesign 13
... o .. a, .. File Edit View Insert Modify Format Comman,ls Sil:� Window Help
"ht.r.p: //www. w3. w3. erg/TR/ ><ht.ml 1/DTD/x.ht.mll-tran,,it.ional
<html :anlns="http://:anlns="http://www. w3 .org/1999/x.html">
<head>
<meta <meta .hhttttp-equiv="Contenc-Typeri content="text/html; content="text/html;
<title>Lat.ihan 2</tit.le> </head>
is heading 1</hl> 1</hl>
i3 i3 30me text.</p>
is heading heading 2</h2> !lome ct.her texc.</p>
UNIVERSITAS MEDAN AREA
<
Item-item daftar tersebut, ditulis di dalam element <li> yang
menunjukkan list item. Kemudian, <li> ditulis didalam elemen <ol>.
<ol> di bagi atas beberapa macam yaitu dengan tipe angka, abjad,
angka romawi. Macam-macam type ordered list:
Jika type = "l" maka akan menampilkan 1, 2, 3, ... . Jika type = "a" maka akan menampilkan a, b, c, ... . Jika type = "A" maka akan menampilkan A, B, C, ... .
Jika type = "i" maka akan menampilkan i, ii, iii, ... .
Jika type = "I" maka akan menampilkan I, II, III, ... .
Ketikan baris-baris kode berikut, kemudian simpan dengan file name
"latihan 3 .html".
< ! DOCTYPE h.:llll >
<l:lcml>
<head>
<title>Lat:ihan 3</title>
</head>
<body>
<cl cype"""A">
<li>SD (Seltclah Dasar)</li> <li>SMP (Sekolah Henengah Pertama)
<ul>
<li>Kelas VII</1:1>
<l:i>Kelas VIII</li>
<li>Kela.s IX</li>
</ul>
</li>
<li>SMA (Seltolab Menengah Atas)</li>
</ol> </body> </htlf<l>
<ul> menunjukkan sebuah Unordered List atau Daftar Acak. HTML
<ul> element digunakan untuk merepresentasikan sebuah daftar item
atau koleksi beberapa item yang dapat disusun kembali secara acak
Pengantar Praktikum Web Design 14
>
baris-baris kode berikut, kemudian simpan dengan file name
h.:llll > l >
<title>Lat:ihan <title>Lat:ihan 3</title> 3</title>
cype"""A">
(Seltclah (Seltclah Dasar)</li> (Sekolah Henengah Pertama) Pertama)
<li>Kelas VII</1:1> VII</1:1>
<l:i>Kelas <l:i>Kelas VIII</li>
<li>Kela.s <li>Kela.s IX</li>
UNIVERSITAS MEDAN AREA
> < >
tanpa penomoran. Artinya, apabila item-item tersebut diubah
urutannya, tidak akan berpengaruh pada dokumen.
Ketikan baris-baris kode berikut, kemudian simpan dengan file name
"latihan ul.html".
<!DOCTYPE html>
<html>
<head><ci tle>La r.ihan lJL</ti tle></head>
<body>
<ul>
<l.i>Mobil</l:I.>
<l.i>Moto:i:
<ul>
<li>'famaha</li>
<li>Honda
<ul>
<li>Beac</li>
<li>Vario</li> <li>Supra X</li>
</ul>
</Ii>
<li>Suzuln.</ .!.i> </ul>
</li> <li>Sepeda</li>
</ul>
</body>
</hr:rll>
Latihan 4. Mengatur Format Text dan Warna Latar Text
HTML <p> element menunjukkan sebuah Paragraph, atau paragraf
buah teks.
HTML <sup> element merepresentasikan superscript teX"tyaitu teks
yang biasanya ditulis agak keatas setengah bagian dari teks normal
clan memiliki ukuran Jebih kecil. Kebalikan dari element <sup> ini
adalah element <sub> yang menunjukkan sub scriptyang ditulis agak
·ebawah dari teks normal.
=-:;iilntar Praktikum Web Design 15
<l.i>Moto:i:
<ul>
<li>'famaha</li>
<li>Honda
<ul>
<li>Beac</li>
<li>Vario</li> <li>Supra X</li>
</ul>
</Ii>
<li>Suzuln.</ <li>Suzuln.</ .!.i> </ul>
</li> <li>Sepeda</li>
</body>
</hr:rll>
4. Mengatur Format Text dan Warna Latar Text
UNIVERSITAS MEDAN AREA
( >
HTML <style> element digunakan untuk menyisipkan kode style atau
CSS ke dalam sebuah dokumen web (HTML).
Ketikan baris-baris kode berikut, kemudian simpan dengan file name
"latihan 4.html".
<!OOCTYPE html.>
<ht:ml>
<head>
<title>Latihan 1</title>
</head>
<body>
<p><b>Tbis cexi: is bold</b></i;i>
<p><i>This text is ital:i.c</i></p>
<p>This is<sub> subscript</sub> and <sup>superscripc</supx/p>
<p scyle="backgrou.."ld-color: pink">ceks a.nda. disin:i.</p>
<p style="colo=: gr·een; background-color :blue">ceks anda
</bcd;1>
</html>
HTML element hr menunjukkan sebuah line break (garis baru).
Elemen br sebaiknya digunakan hanya untuk garis baru yang benar
benar merupakan bagian dari sebuah konten, seperti digunakan pada
baris syair, puisi dan alamat.
HTML <span> element merupakan element inline ( elemen yang tidak
membentuk garis baru) yang digunakan untuk mengelompokkan
beberapa element yang dimaksudkan untuk memudahkan dalam
pemberian style ( dengan CSS). Misalnya, memudahkan untuk men
style element ketika digunakan bersama dengan global attributes, contohnya: attribute class, fang atau dir.
Pengantar Praktikum Web Design 16
<p><b>Tbis <p><b>Tbis cexi: cexi: is bold</b></i;i> bold</b></i;i>
<p><i>This <p><i>This text text is ital:i.c</i></p> ital:i.c</i></p>
<p>This is<sub> is<sub> subscript</sub> and <sup>superscripc</supx/p>
scyle="backgrou.."ld-color: scyle="backgrou.."ld-color: pink">ceks a.nda. disin:i.</p>
style="colo=: style="colo=: gr·een; background-color background-color :blue">ceks anda anda
element hr menunjukkan sebuah line break (garis
sebaiknya digunakan hanya untuk garis baru yang
merupakan bagian dari sebuah konten, seperti digunakan
puisi dan alamat.
UNIVERSITAS MEDAN AREA
r-
n-
( >
etikan baris-baris kode berikut, kemudian simpan dengan file name
"latihan 5.html''.
< ! DOCTYP.E trcml>
<hLrr.J.>
<head>
<Lit:le>Lacihan 5</citle>
</head>
<body>
<pxfont size="6">Tb.is is some cext!</font></p>
<p><font size="3" cclor="red">Tb.is is same text!</fontX/p>
<p><font size="2" cclor="blue">This is some cexi:!</fonc></p>
<p><font face="''erdana" ca·lor="green">'This is .3ome i::exc' </font></p>
<br>
<p align="right"YA righc-aligned paragraph.</p>
<p align="left">A left-aligned paragraph.</p>
<p align="center">JI. ceni;er-aligned paragraph. </p>
<hr width="SO-t" align=ncentern>
<hr s:ize=n5n, width=nso:tn align="centern>
<hr noshad.e si2e=05n widt-il'='-150%u aliqn=»center">
</ ody>
</ht.rr.J.>
· an baris-baris kode berikut, kemudian simpan dengan file name
-1atihan 6.html".
- <!DOCTYPE html> � <h 1111>
<head> <title>Latihan 6</title>
</head> <body>
<p>Aku cinta kamu <p>Aku rindu kamu
</body> < html>
ul
Praktikum Web Design
<span style="color:red">I love you</span></p>
<span style="color:blue">I miss you</span></p>
17
<p><font face="''erdana" face="''erdana" ca·lor="green">'This ca·lor="green">'This is .3ome
align="right"YA align="right"YA righc-aligned righc-aligned paragraph.</p> paragraph.</p>
align="left">A align="left">A left-aligned left-aligned paragraph.</p> paragraph.</p>
align="center">JI. ceni;er-aligned ceni;er-aligned paragraph. </p>
width="SO-t" align=ncentern>
s:ize=n5n, s:ize=n5n, width=nso:tn align="centern> align="centern>
noshad.e si2e=05n si2e=05n widt-il'='-150%u aliqn=»center"> aliqn=»center">
ody>
</ht.rr.J.> </ht.rr.J.>
baris-baris kode berikut, kemudian simpan dengan
6.html".
E html> html>
UNIVERSITAS MEDAN AREA
<
Ketikan baris-baris kode berikut, kemudian simpan dengan file na
"latihan 7.html".
1 <!DOCTYPE html> 2 <html>
<head> 4 <title>tatihan 7</title>
5 </head>
6 <body> 7 <p>Pelangi-pelangi alangkah indahmtJ,
g <span .style="background-color:red">Merah</s an>,
9. <span style="background-color; yellovi'' >Kuning< I span>,
<span style="background-color:green">Hijau</span>,
)
11 yang <span style= -coior·blue">Bil'u</span> 12 </p> '.l3 </body> 14 </html> 1s 1
Pengantar Praktikum Web Design 18
<span style= background cololor:grr:green">>Hijau</span>,
yang <span <span style= style= -coior·blue">lue">
UNIVERSITAS MEDAN AREA
) (
n>
KUIS/TUGAS. 1. Buatlah koding pemrograman dengan menggunakan syntak
HTML untuk menghasilk,an tampilan seperti berikut ini:
Utth·ersitu .\'1edaa Area, adalah po-guruan tinggi S\\.'aSta di Medan. Indonesia, yang di&ikan olcll Haji Ag:us Salim Siregar pada I � rahun 1983. Rcktor pada tahun 201 t adalah Pro[ Dr. H. A. Ya'kab MatoDdaag, :\fA.
ejarab Si11gkal.
Law belclcaog didirikannya Univers.� Medan Area. adalah sebagai seruatu \\.1.ljud �jabaran - yaitu rurut .serro m;mcerdaskan ktJhidupan bangsa serta 1r.grup.?kan wadah penampungan aspirasi don hasrar mnsyarakat yang tentS ! berkunbang u.ntuk ikmati pundfdikan tinggi. Nama Uuivetsitas Mednn Area diambil sebagai penghargaan mas p1!tjuangan mcmpat•hankon k=erdekaan olcb peJUMg·peJU•ng 1945 ct; sddtar kota Medan yang lebili dikenai dcng<m nama ._
l;m erntas Yledan Area memililci 7 fal"llh:as, yartu: _
I Je.0J<1:ig Pendid1kau Strara Satu (Sl}
L F almlras Teknik
2. F akultas Bivlogl 3. F ak.'lllras Pertanian 4. F ak-u!t21.s lsipol 5. F akultas Ekonomi
6. F akultas Huk.1.1:tn
7. Falmltas Psikologi
2. Buatlah koding pemrograman dengan menggunakan syntak
HTML untuk menghasilkan tampilan seperti berikut ini:
••koiit !Jehro
Arsilfftw
2. J\gO'�b,log.
Fault<t>� Manoij<tmeo
4. fa!rul«�> Hl3um '> f41rulti1Ststpol
tlinu Ka<nunib>i f.m.ltu� htu!tfl """";;;
Pengantar Praktikum Web Design 19
II
>
m;mcerdaskan ktJhidupan bangsa serta 1r.grup.?kan m;mcerdaskan ktJhidupan bangsa serta 1r.grup.?kan wadah penampungan aspirasi wadah penampungan aspirasi don don hasrar mnsyarakat yang tentS hasrar mnsyarakat yang tentS berkunbang u.ntuk ikmati ikmati ikmati pundfdikan pundfdikan tinggi. tinggi. Nama Uuivetsitas Mednn Nama Uuivetsitas Mednn Area Area diambil sebagai penghargaan
mcmpat•hankon k=erdekaan mcmpat•hankon k=erdekaan olcb olcb peJUMg·peJU•ng peJUMg·peJU•ng 1945 ct; sddtar kota Medan yang lebili dikenai dcng<m nama Yledan Area memililci 7 fal"llh:aYledan Area memililci 7 fal"llh:as, yartu: yartu: _
Je.0J<1:ig Pendid1kau Je.0J<1:ig Pendid1kau Strara Strara Satu (Sl}
F almlras Teknik
akultas Bivlogl F ak.'lllras Pertanian
4. F ak-u!t21.s lsipol F akultas Ekonomi
akultas Huk.1.1:tn
Falmltas Psikologi Psikologi
Buatlah koding pemrograman dengan menggunakan syntak
HTML untuk menghasilkan tampilan seperti berikut ini:
••koiit ••koiit !Jehro
UNIVERSITAS MEDAN AREA
< >
Hyperlinks dari HTML adalah membuat sebuah text, gambar maupun
animasi yang ketika di-klik akan pindah ke halaman lainnya. HTML
menggunakan tag <a>, yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> memiliki sebuah atribut href Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
Ketikan baris-baris kode berikut, kemudian simpan dengan file name
"latihan link 1.html".
< ! OOCTYl?E hcml>
<'html>
<head>
<cicle>Lacihan Link 1</cicle> </head>
<body>
<p>Klik disini <a href="hctp://www.llll'.a.ac.id">Universit:as Medan Area</a></p>
</body>
</ht:m.l>
Latihari ?� Link image dan eo,lors
HTML <img) element memiliki beragam attribute yang dapat ditulis
sesuai kebutuhan. Akan tetapi, hanya dua attribute yang wajib ditulis
pada setiap < img !> element, yaitu src dan alt attribute. src
attribute menujukkan sumber file tersebut berada, sedangkan alt menujukkan altematif text yang akan muncul sebagai pengganti
apabila gambar tersebut tidak dapat ditampilkan.
Pengantar Praktikum Web Design 20
baris-baris kode berikut, kemudian simpan dengan file
1.html".
hcml>
<cicle>Lacihan Link 1</cicle> <cicle>Lacihan Link 1</cicle>
disini <a href="hctp://www.llll'.a.ac.id">Universit:as Medan
UNIVERSITAS MEDAN AREA
Recommended