PANDUAN PRAKTIKUM - Repository UMA

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

<

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

Daftar Isi

Kata Pengantar ... i

Daftar Isi ... .ii

Dasar-Dasar HTML5

. . . .

.

^{. . . .}

. . .

. . . ... .

.

^{. .}

.

^{. .}

.

. . . .

.

^.

.

. . . ..

.

^{. . . . ... ... . . . .}

.

^{. . . .}

.

^.

.

^{. . .}

¹

Hyper links

^{. .}

.

^{. .}

...

^.

.

^{. .}

.

^{. . . ... ...}

. .

^.

..

^{. . . .}

.

^.

.

^{. .}

.

^...

.

^{. . . . ....}

..

^... . . .

.

. . . .

.

^{. ....}

.

^{. .}

.

^{. ..}. . . .

.

. . . ... . .

20

Images

. . .

: ... :."···-··· 2 ³ 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

^.

.

. . . ...

.

. . . .

.

^{. ..}. . . . . . . . . . . .

� � ..

^{. . . ....}. . . ... . . .

.

^{. .}

.

^{. . ... ... .}

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:

footer, navigasi bars, sedebars, dan sebagainya. Beberapa elemen barn HTML5 seperti terlihat pada tebel _1.

<.article>

<section>

<nav>

< a ^s i d ^e>

<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 ₃ 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 <a u d i o > 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 ^a HTMLS

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 ₃ dan 4.

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>

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

>

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 Timur)

<ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (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 Timur) (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

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

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

Keterangan ^I Kegunaa:n

L i n ks

<a> untuk membuat hyperlink l

untuk rnembuat hubungan antara d�kurnen dan ^,

I ^{<l ink >} I sumber daya ekstemal (paling sering digunakan

J I

link ke style sheet)

untuk me��vigasi ^1i:;;- (tag baru

--

^_

J

<ul> membuat daftar dengan selain nornor ^I untuk membuat daftar dengan nomor

<li> u ^nt u ^k 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 ^rnemb ua ^t t ^{a b e l}

<th> ^Tag untuk membuat sebuah sel header ^tabel

Pengantar Praktikum Web Oesigr. 8

_ _ _

membuat daftar dengan selain nornor untuk membuat daftar dengan nomor u ^nt u ^k 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

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)

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

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.

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 .h menjalankannya. Lihat apa yang terjadi.

tampil di aplikasi browser tampilan web seperti berikut.

>

1da iSlS adi

uat

<

Latihan 2. Mengatur Heading dan Paragraf

<hr> menunjukkan sebuah horizontal rule atau 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 .h ht tt tp-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>

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>

< >

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 te X" ty aitu 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 s ub s c r i p tyang 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

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_subscript 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_subscript 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.

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>

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 col olor:gr r:green"> >Hijau</span>,

yang <span <span style= style= -coior·blue"> lue">

)

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:a Yledan 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

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