panduan praktikum - repository.uma.ac.id

24
PANDUAN PRAKTIKUM 515TEM INFDRMASI MANAJEMEN WEB DESIGN DAN MICROSOFT ACCESS - PUSAT KOMPUTER UNIVERSIS MEDAN AREA ANDRE HASUDUNGAN LUBIS, S.Ti, M.Sc RDMADANSYAH SIAGIAN, S.Kom UNIVERSITAS MEDAN AREA

Upload: others

Post on 02-Oct-2021

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PANDUAN PRAKTIKUM - repository.uma.ac.id

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

Page 2: PANDUAN PRAKTIKUM - repository.uma.ac.id

< >

Pengantar Praktikum HTML

Javascript CSS (Cascading Style Sheets)

Pengantar Praktikum Web Design

UNIVERSITAS MEDAN AREA

Page 3: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 4: PANDUAN PRAKTIKUM - repository.uma.ac.id

( >

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

Page 5: PANDUAN PRAKTIKUM - repository.uma.ac.id

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

Page 6: PANDUAN PRAKTIKUM - repository.uma.ac.id

< >

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

Page 7: PANDUAN PRAKTIKUM - repository.uma.ac.id

< >

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

Page 8: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 9: PANDUAN PRAKTIKUM - repository.uma.ac.id

>

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

Page 10: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 11: PANDUAN PRAKTIKUM - repository.uma.ac.id

< >

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

Page 12: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 13: PANDUAN PRAKTIKUM - repository.uma.ac.id

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

Page 14: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 15: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 16: PANDUAN PRAKTIKUM - repository.uma.ac.id

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

Page 17: PANDUAN PRAKTIKUM - repository.uma.ac.id

> 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

Page 18: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 19: PANDUAN PRAKTIKUM - repository.uma.ac.id

> < >

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

Page 20: PANDUAN PRAKTIKUM - repository.uma.ac.id

( >

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

Page 21: PANDUAN PRAKTIKUM - repository.uma.ac.id

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

Page 22: PANDUAN PRAKTIKUM - repository.uma.ac.id

<

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

Page 23: PANDUAN PRAKTIKUM - repository.uma.ac.id

) (

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

Page 24: PANDUAN PRAKTIKUM - repository.uma.ac.id

< >

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