Modul Ajar Desain Website

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah Yang Maha Bijaksana atas segala
limpahan rahmat dan hidayah-Nya kepada penulis, sehingga dapat menyelesaikan
penulisan modul praktikum Desain Website ini dengan lancar.

Penyusunan bahan ajar berupa modul ini secara khusus bertujuan untuk
mempermudah mahasiswa Program Studi Tatalaksana Studio Produksi untuk tetap
belajar selama pelaksanaan perkuliahan secara luring maupun daring (online).
Secara umum, modul ini diharapkan dapat memberikan referensi dalam proses
perkuliahan Desain Website yang diikuti oleh mahasiswa Akademi Komunitas
Negeri Pacitan dalam pelaksanaan perkuliahan dan sebagai referensi
dosen/pengajaran dan pengampu mata kuliah Desain Website di lingkungan
Akademi Komunitas Negeri Pacitan.

Dalam penyusunan modul bahan praktikum ini tidak terlepas dari bantuan
berbagai pihak, baik secara langsung maupun tidak langsung. Oleh karena itu,
penulis mengucapkan terima kasih kepada semua pihak yang telah membantu
kelancaran penulisan modul ini. Semoga segala dorongan dan bantuan yang telah
diberikan dinilai sebagai amal kebaikan dan mendapat pahala dari Allah SWT.

Penulis menyadari bahwa masih terdapat kekurangan dalam penyusunan
modul bahan praktikum ini, oleh karenanya penulis mengharapkan kritik maupun
saran yang bersifat membangun untuk penyempurnaan penyusunan modul bahan
praktikum selanjutnya.

Pacitan, Juli 2021

Modul Ajar Desain Website Penulis

Gramandha Wega Intyanto, S.ST., M.T. ii

DAFTAR ISI

Cover ............................................................................................. i
Kata Pengantar.............................................................................. ii
Analisis Instruksional .................................................................... iii
Rancangan Pembelajaran.............................................................. iv
Materi Pembelajaran

BAB I ....................................................................................................... 1
BAB II......................................................................................................12
BAB III.....................................................................................................22

Modul Ajar Desain Website iii

Gramandha Wega Intyanto, S.ST., M.T.

Analisis Instruksional Mat

Modul Ajar Desain Website iv

Gramandha Wega Intyanto, S.ST., M.T.

takuliah Desain Website

v

AKADEMI KOMUNITAS PACITAN

JURUSAN TEKNOLOGI MULTIMEDIA
PROGRAM STUDI TATA LAKSANA STUDIO PROD

RENCANA PEMBELAJAR

Nama Mata Kuliah KODE Rumpun MK
Desain Website
VMB024103 Matakuliah Bid

Nama KoordinatorPengemban

Gramandha Wega Intyanto, S.ST

Capaian CPL-PRODI (Capaian Pembelajaran Lulusan Program Studi) Y
Pembelajaran (CP)
P3 Menguasai konsep yang terkait dengan kom

KU1 Mampu menerapkan pemikiran logis, kritis,
pengetahuan dan teknologi yang memperh

KU2 Mampu menunjukkan kinerja mandiri, berm

KU9 Mampu mendokumentasikan, menyimpan,
mencegah plagiasi.

KK4 Mampu merancang dan dan melaksanakan
server administrasi jaringan.

CP-MK (Capaian Pembelajaran Mata Kuliah)

CPMK Mahasiswa mampu mengetahui sejarah, de

memodifikasi, dan membuat desain website

Sub-CPMK1 Mahasiswa mampu mendefinisikan konsep

Sub-CPMK2 Mahasiswa mampu menjelaskan dan mend

Sub-CPMK3 Mahasiswa mampu memilih posisi tata leta

website (C3, A3, P3)

Modul Ajar Desain Website v

Gramandha Wega Intyanto, S.ST., M.T.

DUKSI

RAN SEMESTER (RPS)

BOBOT (sks) SEMESTER Tgl Penyusunan
4 28 Juli 2021
dang T = 2
Ka PRODI
ng RPS Koordinator Bidang Keahlian
(Jika Ada)

T., M.T. Mochammad Syarul Munir, S.Kom.,
M.T.

Yang Dibebankan Pada Mata Kuliah

mponen dasar sistem operasi komputer dan teknologi multimedia.

, sistematis dan inovatif dalam konteks pengembangan atau implementasi ilmu.
hatikan dan menerapkan nilai humaniora yang sesuai dengan bidang keahliannya.

mutu, dan terukur.

, mengamankan, dan menemukan kembali data untuk menjamin kesahihan dan

manajemen administrasi jaringan yang terkait dengan pengembangan bidang

efinisi, konsep dasar teknologi website serta dapat merancang, mengukur,
e secara terstruktur, terukur, bertanggung jawab secara mandiri dan kelompok.
dasar, perkembangan teknologi website dan desain website. (C1, A3, P3)
demonstrasikan tentang HTML, CSS, JavaScript, dan PHP. (C2, A3, P3)
ak, objek dan teks sesuai dengan teori user-interface dan estetika pada desain

v

Deskripsi Singkat Sub-CPMK4 Mahasiswa mampu membuat struktur desa
MK
Bahan Kajian / Sub-CPMK5 Mahasiswa mampu mengukur dan menilai r
Materi
Pembelajaran Sub-CPMK6 Mahasiswa mampu merancang dan mengkr
Daftar Referensi
secara kelompok. (C6, A3, P3)
Media Pembelajaran
Team Teaching Mata kuliah ini membahas tentang konsep dasar, perkemban
dan terstruktur
1. Sejarah, pengertian, konsep dasar, dan perkembangan tek
2. Bahasa scripting HTML (Hypertext Markup Language) dan
3. Bahasa pemrograman JavaScript dan PHP (Preprocesor Hy
4. Konsep dasar tata letak, objek, dan teks; kajian tentang te
5. Tahapan-tahapan pada perancangan desain website: wire
6. Tahapan merancang desain website secara terukur, Kerja
Utama:
1. Ahmad Zainudin, S.ST, M.T, Modul Praktikum Internet Pro
2. Achmad Solichin, Modul Praktikum Pemrograman Web II,
3. Jennifer N Robbins; Learning Web Design Third Edition,O
4. Jon Duckett; HTML & CSS design and build websites, 201
5. Christopher Schmitt; CSS Cookbook, 3rd, O’Reilly Media,
6. Lawson Bruce,Remy Sharp; Introducing HTML5 New Ride
7. Husein Alatas, Proyek Pembangunan Responsive Web De
8. Teach Yourself PHP, MySQL and Apache in 24 Hours, Sam

Pendukung:
1. URL : https://www.w3.org/TR/2004/REC-webarch-200412
2. Wang, Paul,. Katila, Sanda. 2003. An Introduction to Web
3. Thomas A. Powel. 2010. HTML & CSS: The Complete Refer
4. Ducket, Jon. 2004. Beginning Web Programming with HTM
5. Greenspan, Jay., Bulger, Brad. 2001. MySQL/PHP Database
6. Lerdorf, Rasmus., Tatroe, Kevin., MacIntyre, Peter. 2006. P
7. Holzner, Steven. 2009. Ajax A Beginner’s Guide. McGraw-H
8. Deitel, Harvey, Deitel, Paul. Introduction to World Wide W
Perangkat lunak:
Visual Studio Code, Browser, XAMPP MySQL, Adobe XD
Gramandha Wega Intyanto, S.ST., M.T., Mochammad Syarul

Modul Ajar Desain Website v

Gramandha Wega Intyanto, S.ST., M.T.

ain website: wireframe, mockup, prototype, dan layout. (C3, A3, P3)
rancangan dan desain website. (C5, A3, P3)
reasikan desain website yang terstruktur, terukur, serta mempresentasikan

ngan teknologi website dan proses perancangan desain website secara terukur

knologi website
n CSS (Cascading Style Sheets).
ypertext).
eori user-interface dan estetika pada desain website.
eframe, mockup, prototype dan layout
asama dan kolaborasi desain website berkelompok

ogramming, PENS Surabaya
, Universitas Sriwijaya
O’Reilly Media, 2007.
11
2010
ers, 2011
esign dengan Bootstrap 3 & 4, Lokomedia,Yogyakarta, 2015Julie c. Meloni, Sams
ms; Bk&CD-Rom edition, 2002.

215/
Design+Programming. Brooks/Cole Book.
rence, Fifth Edition. The McGraw-Hill: United States.
ML, XHTML, and CSS. Wiley Publishing: Canada.
e Applications. M & T Books: New York.
Programming PHP, Second Edition. O’Reilly Media: United States.
Hill: United States.
Web

Perangkat keras :
PC Stand Alone & LCD Projector
Munir, S.Kom., M.T.

vi

Matakuliah 1. Literasi Komputer

prasyarat (Jika ada) 2. Metodologi Desain

Minggu Sub-CPMK Indikator Kriteria & Bentuk
Ke- (Kemampuan Penilaian

akhir yg
direncanakan)

(1) (2) (3) (4) K
[
1,2 Sub-CPMK-1: - Ketepatan Kreteri: T
Mahasiswa mampu mendefinisikan Ketepatan dan M
mendefinisikan pengetahuan tentang penguasaan r
konsep dasar, teknologi website; Bentuk not-test: p
perkembangan  Tulisan makalah k
teknologi website - Ketepatan  Presentasi p
dan desain website. mendefinisikan konsep t
(C1, A3, P3) dasar tentang teknologi Mandiri w
website; w
Kreteri: [
- Ketepatan 1
mendefinisikan K
perkembangan tentang k
teknologi website. k
T
3 s.d. 7 Sub-CPMK-2: k
w
[
1
K

Modul Ajar Desain Website vi

Gramandha Wega Intyanto, S.ST., M.T.

[Estimasi Waktu] Materi Pembelajaran Bobot
[Pustaka] Penilaian
Tatap Daring
muka/Luring (7) (%)
(6)
(5) Sejarah, pengertian, (8)
 Google Scholar konsep dasar,
Kuliah & Diskusi  Google Meet perkembangan 10
[TM: 1x(2x50”)]  eLearning: teknologi website, dan
Tugas-1: desain website.
Menyusun https://elearnin
ringkasan tentang g.aknpacitan.ac.
pengetahuan, id/
konsep dasar,
perkembangan
teknologi
website, desain
website
[PT+BM:
1+1x(2x60”)]
Kuliah & Diskusi
kelompok
kolaboratif
Tugas-2: Studi
kasus pada desain
website
[PT+BM:
1+1x(2x60”)]
Kuliah & Diskusi

ii

Mahasiswa mampu - Ketepatan menjelaskan Ketepatan dan [
menjelaskan dan pengetahuan tentang penguasaan T
mendemonstrasikan HTML, CSS, JavaScript, Bentuk not-test: D
tentang HTML, CSS, PHP;  Praktek bahasa p
JavaScript, dan PHP. d
(C2, A3, P3) - Ketepatan menguji script dan l
coba dan pemrograman u
mendemostrasikan  Menyusun [
bahasa script HTML, laporan uji coba 1
CSS dan bahasa  Kuis-1 K
pemrograman [
Javascript, dan PHP. T
D
p
d
l
u
[
1
K
[
T
D
p
d
l
u
J
[
1

Modul Ajar Desain Website vi

Gramandha Wega Intyanto, S.ST., M.T.

[TM: 2x(2x50”)]  Menggunakan Dasar bahasa script 25
Tugas-3: Visual Studio HTML, bahasa script
Demostrasi Code, Browser CSS, bahasa
praktek uji coba pemrograman
dan menyusun  Google Meet JavaScript, bahasa
laporan tentang  eLearning: pemrograman PHP.
uji coba HTML
[PT+BM: https://elearnin
1+1x(2x60”) g.aknpacitan.ac.
Kuliah & Diskusi id/
[TM: 2x(2x50”)]
Tugas-4:
Demostrasi
praktek uji coba
dan menyusun
laporan tentang
uji coba CSS
[PT+BM:
1+1x(2x60”)]
Kuliah & Diskusi
[TM: 2x(2x50”)]
Tugas-5:
Demostrasi
praktek uji coba
dan menyusun
laporan tentang
uji coba
JavaScript
[PT+BM:
1+1x(2x60”)]

iii

K

[

T

D

p

d

l

u

[

1

8 UTS/Evaluasi Tengah Semester: melakukan validasi hasil penilian, evalua

9,10 Sub-CPMK-3: - Ketepatan dalam Kreteri: K

Mahasiswa mampu menetukan posisi Ketepatan dan [
memilih posisi tata peletakkan bidang dan penguasaan T
letak, objek dan teks teks; Bentuk not-test: M
sesuai dengan teori -Ketepatan menentukan  Ringkasan t
user-interface dan keserasian pemilihan d
estetika pada desain warna; artikel journal u
website. (C3, A3, P3) -Ketepatan menentukan dan roadmap [
tata letak terukur 1
dengan teori pada user-

interface dan estetika.

11,12 Sub-CPMK-4: - Ketepatan sistematika Kreteri: K
Mahasiswa mampu perancangan dan Ketepatan dan [
membuat struktur mendesain wireframe, penguasaan T
desain website: mockup, dan prototype Bentuk not-test: M
wireframe, mockup, pada website;  Tulisan makalah p
prototype, dan w
layout. (C3, A3, P3) - Ketepatan menjelaskan perancangan [
dan menggunakan toeri desan website 1
desain layout grid;

Modul Ajar Desain Website ix

Gramandha Wega Intyanto, S.ST., M.T.

Kuliah & Diskusi  Visual Studio

[TM: 2x(2x50”)] Code, Browser,

Tugas-6: XAMPP MySQL
Demostrasi  Google Meet
praktek uji coba  eLearning:
dan menyusun
laporan tentang https://elearnin
uji coba P g.aknpacitan.ac.
[PT+BM: id/

1+1x(2x60”)]

asi dan perbaikan proses pembelajaran berikutnya

Kuliah & Diskusi  Google Scholar Konsep dasar tata 10
10
[TM: 2x(2x50”)]  Google Meet letak, objek, dan teks;
Tugas-7:  eLearning: kajian tentang teori
Mengkaji artikel user-interface dan
terkait desain UI https://elearnin estetika pada desain
dan estetika g.aknpacitan.ac. website.
untuk website id/

[PT+BM:

1+1x(2x60”)]

Kuliah & Diskusi  Google Scholar Tahapan-tahapan
[TM: 2x(2x50”)]  Google Meet pada perancangan
Tugas-8:  Adobe XD desain website:
Mengkaji artikel  eLearning: wireframe, mockup,
perancangan prototype dan layout.
website
[PT+BM:
1+1x(2x60”)]

x

13 Sub-CPMK-5: - Ketepatan dalam  Kuis 4 K
Mahasiswa mampu menjelaskan teori-teori [
mengukur dan pengukuran ui/ux Kreteri: T
menilai rancangan website; Ketepatan dan M
dan desain website. penguasaan m
(C5, A3, P3) - Ketepatan dan Bentuk not-test: p
ketelitian pengolahan  Praktek d
14,15 Sub-CPMK-6: data dan analisi data. s
Mahasiswa mampu penilaian dan [
merancang dan - Ketepatan membuat menganalisa 1
mengkreasikan kerangka kerja mulai sampel desain K
desain website yang dari mockup hingga website k
terstruktur, terukur, screen layouts dan  Kuis 3 [
serta produksi pada desain T
mempresentasikan website; Kreteri: M
secara kelompok. Ketepatan, r
(C6, A3, P3) - Efektifitas presentasi penguasaan, kerja p
dan demonstrasi kelompok k
pembuatan website. Bentuk not-test: p
 Tulisan laporan t
[
perancangan 1
 Produk desan K
k
website k

T
M
m
p
w
b

Modul Ajar Desain Website x

Gramandha Wega Intyanto, S.ST., M.T.

Kuliah & Diskusi https://elearnin Pengukuran dan 5
[TM: 2x(2x50”)] g.aknpacitan.ac. perancangan desain 40
Tugas-9: id/ website.
Menyusun
makalah  Google Meet Tahapan merancang
perancangan  eLearning: desain website secara
desain website terukur, Kerjasama
secara mandiri https://elearnin dan kolaborasi desain
[PT+BM: g.aknpacitan.ac. website berkelompok.
1+1x(2x60”)] id/
Kuliah & Studi
kasus  Google Meet
[TM: 2x(2x50”)]  eLearning:
Tugas-10:
Menyusun https://elearnin
ringkasan tentang g.aknpacitan.ac.
pengetahuan, id/
konsep dasar, dan
perkembangan
teknologi website
[PT+BM:
1+1x(2x60”)]
Kuliah & Diskusi
kelompok
kolaboratif
[TM: 2x(2x50”)]
Tugas-11:
Membuat dan
merancangan
produk desain
website secara
berkelompok

x

 Presentasi [
kelompok 1

t
[
1
T
M
l
m
n
d
b
16 UAS/Evaluasi Akhir Semester: melakukan validasi penilaian akhir dan men

Catatan:
1. Capaian Pembelajaran Lulusan PRODI (CPL-PRODI) adalah k

merupakan internalisasi dari sikap, penguasaan pengetahua
diperoleh melalui proses pembelajaran.
2. CPL yang dibebankan pada mata kuliah adalah beberapa cap
digunakan untuk pembentukan/pengembangan sebuah mata
ketrampilan khusus dan pengetahuan.
3. CP Mata kuliah (CPMK) adalah kemampuan yang dijabarkan s
dan bersifat spesifik terhadap bahan kajian atau materi pemb

Modul Ajar Desain Website x

Gramandha Wega Intyanto, S.ST., M.T.

[PT+BM:
1+1x(2x60”)]

teknologi website
[BT+BM:
1+1x(2x60”)]
Tugas-12:
Menyusun
laporan dann
mempresentasika
n hasil produk
desain
berkelompok
nentukan kelulusan mahasiswa

kemampuan yang dimiliki oleh setiap lulusan PRODI yang
an dan ketrampilan sesuai dengan jenjang prodinya yang

paian pembelajaran lulusan program studi (CPL-PRODI) yang
a kuliah yang terdiri dari aspek sikap, ketrampulan umum,

secara spesifik dari CPL yang dibebankan pada mata kuliah,
belajaran mata kuliah tersebut.

xi

4. Sub-CP Mata kuliah (Sub-CPMK) adalah kemampuan yang dij
diamati dan merupakan kemampuan akhir yang direncana
terhadap materi pembelajaran mata kuliah tersebut.

5. Indikator penilaian kemampuan dalam proses maupun hasil
yang mengidentifikasi kemampuan atau kinerja hasil belajar m

6. Kreteria Penilaian adalah patokan yang digunakan sebagai u
penilaian berdasarkan indikator-indikator yang telah ditetapka
penilaian konsisten dan tidak bias. Kreteria dapat berupa kuan

7. Bentuk penilaian: tes dan non-tes.
8. Bentuk pembelajaran: Kuliah, Responsi, Tutorial, Seminar ata

Praktik Lapangan, Penelitian, Pengabdian Kepada Masyarakat
9. Metode Pembelajaran: Small Group Discussion, Role-Play

Cooperative Learning, Collaborative Learning, Contextual Lear
10. Materi Pembelajaran adalah rincian atau uraian dari bahan k

sub-pokok bahasan.
11. Bobot penilaian adalah prosentasi penilaian terhadap setiap

tingkat kesulitan pencapaian sub-CPMK tsb., dan totalnya 100
12. TM=tatap muka, PT=penugasan terstuktur, BM=belajar mandi

Modul Ajar Desain Website xi

Gramandha Wega Intyanto, S.ST., M.T.

jabarkan secara spesifik dari CPMK yang dapat diukur atau
akan pada tiap tahap pembelajaran, dan bersifat spesifik

belajar mahasiswa adalah pernyataan spesifik dan terukur
mahasiswa yang disertai bukti-bukti.
ukuran atau tolok ukur ketercapaian pembelajaran dalam
an. Kreteria penilaian merupakan pedoman bagi penilai agar
ntitatif ataupun kualitatif.
au yang setara, Praktikum, Praktik Studio, Praktik Bengkel,
t dan/atau bentuk pembelajaran lain yang setara.
& Simulation, Discovery Learning, Self-Directed Learning,
rning, Project Based Learning, dan metode lainnya yg setara.
kajian yg dapat disajikan dalam bentuk beberapa pokok dan
p pencapaian sub-CPMK yang besarnya proposional dengan
0%.
iri

ii

BAB I
KONSEP DASAR TEKNOLOGI WEBSITE

DAN DESAIN WEBSITE

A. Pendahuluan
Membahas mengenai konsep dasar teknologi website, sejarah, istilah teknologi
website dan desain website. Modul pembelajaran ini dipergunakan untuk
pertemuan ke-1 dan ke-2 untuk mata kuliah Desain Website.

B. Capaian Pembelajaran

Mahasiswa mampu mendefinisikan konsep dasar, perkembangan teknologi

website dan desain website

Indikator:
• Ketepatan mendefinisikan pengetahuan tentang teknologi website;
• Ketepatan mendefinisikan konsep dasar tentang teknologi website;
• Ketepatan mendefinisikan perkembangan tentang teknologi website.

C. Materi

1.1. Pengertian Website
Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang

saling berhubungan yang umumnya berada pada peladen yang sama berisikan
kumpulan informasi yang disediakan secara perorangan, kelompok, atau
organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server
web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan area
lokal (LAN) melalui alamat Internet yang dikenali sebagai URL. Gabungan atas
semua situs yang dapat diakses publik di Internet disebut pula sebagai World Wide
Web atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman
beranda situs Internet umumnya dapat diakses publik secara bebas, pada
praktiknya tidak semua situs memberikan kebebasan bagi publik untuk
mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan
pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat
menjadi anggota untuk dapat mengakses isi yang terdapat dalam situs web
tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita,
layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya

Modul Ajar Desain Website 1

Gramandha Wega Intyanto, S.ST., M.T.

dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan
komersial tertentu.

Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa
(plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-
instruksi berbasis HTML atau XHTML, kadang-kadang pula disisipi dengan sekelumit
bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan
ditampilkan seperti layaknya sebuah halaman pada monitor komputer.

Halaman-halaman web tersebut diakses oleh pengguna melalui protokol
komunikasi jaringan yang disebut sebagai HTTP, sebagai tambahan untuk

meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web dapat
pula mengimplementasikan mekanisme pengaksesan melalui protokol HTTPS.

1.2. Sejarah Website
Penemu situs web adalah Sir Timothy

John "Tim" Berners-Lee, sedangkan situs
web yang tersambung dengan jaringan
pertama kali muncul pada tahun 1991.

Maksud dari Tim ketika merancang situs
web adalah untuk memudahkan tukar
menukar dan memperbarui informasi pada
sesama peneliti di tempat ia bekerja. Pada

tanggal 30 April 1993, CERN (tempat di Gambar 1.1. Berners-Lee
mana Tim bekerja) mengumumkan bahwa Robert
WWW dapat digunakan secara gratis oleh
publik.

Sebuah situs web bisa berupa hasil kerja dari perorangan atau individu, atau
menunjukkan kepemilikan dari suatu organisasi, perusahaan. biasanya
pembahasan dalam sebuah situs web merujuk pada sebuah ataupun beberapa
topik khusus, atau kepentingan tertentu. Sebuah situs web bisa berisi pranala yang
menghubungkan ke situs web lain, demikian pula dengan situs web lainnya. Hal ini
terkadang membuat perbedaan antara situs web yang dibuat oleh individu ataupun
perseorangan dengan situs web yang dibuat oleh organisasi bisnis menjadi tidak
begitu jelas.

Modul Ajar Desain Website 2

Gramandha Wega Intyanto, S.ST., M.T.

Situs web biasanya ditempatkan pada server web. Sebuah server web
umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk
menangani pengaturan nama ranah, serta menangani layanan atas protokol HTTP
yang disebut sebagai Server HTTP (bahasa Inggris: HTTP Server) seperti Apache
HTTP Server, atau Internet Information Services (IIS).

1.3. Perkembangan Website
Supaya bisa berkomunikasi dengan semua komputer yang tersambung ke

Internet, digunakan sebuah protokol komunikasi yang menggunakan TCP/IP
(Transmission control protocol/Internet Protocol). Setiap komputer yang terhubung
ke Internet mempunyai sebuah alamat, misalnya 192.168.14.96. Untuk
memperoleh informasi atau data di Internet, kita dapat mengaksesnya dengan
mengetikkan suatu alamat web pada address bar. Alamat suatu situs di Internet
disebut nama domain. Jadi, nama domain adalah alamat permanen situs di dunia
Internet yang digunakan untuk mengidentifikasikan sebuah situs. Dengan kata lain,
Domain Name adalah alamat yang digunakan untuk menemukan suatu situs pada
Internet.

Kaitannya dengan protokol komunikasi TCP/IP, nama domain dapat
diibaratkan seperti buku telepon, kita menggunakan sebuah nomor untuk
memanggil seseorang. misalnya ketika kita mengakses situs www.wikipedia.com
maka penjelajah web Internet Explorer akan menghubungi sebuah IP misalnya
202.68.0.134.

Istilah umum dan nama domain adalah URL (Uniform Resource Locator) yang
merupakan sarana untuk menentukan alamat yang akan dipakai untuk mengakses
Internet. Alamat URL merupakan alamat khusus untuk file tertentu yang bisa
diakses oleh Internet. Alamat URL mencangkup semua jenis file lain yang bisa
diakses oleh Internet, misalnya file html, zip, rar, jpg, gif, dan png.

Alamat URL yang lengkap adalah sebagai berikut: Protokol://nama-
host/path/nama file

a. Protokol menunjukan jenis protokol yang akan digunakan, yaitu http, ftp,
dan sebagainya;

b. Nama host adalah nama host (domain) yang dipanggil;
c. Path adalah lokasi atau direktori tempat file-file diletakkan pada web

server;
d. Nama file adalah nama file yang dipanggil.

Modul Ajar Desain Website 3

Gramandha Wega Intyanto, S.ST., M.T.

Contoh yang kita gunakan untuk menjelaskan yaitu laman website Wikipedia
berikut ini: http://www.wikipedia.co.id/artikel/ensiklopedia.htm, disini dapat
dijabarkan sebagai berikut:

a. URL diatas menggunakan protokol http;
b. Nama domain adalah www.wikipedia.co.id;
c. Path atau direktori yang dituju adalah artikel;
d. Nama file yang diakses adalah ensiklopedia.htm.

Secara garis besar, situs web bisa digolongkan menjadi 3 bagian yaitu:
a. Situs web statis

Situs web statis merupakan situs web yang memiliki isi tidak dimaksudkan
untuk diperbarui secara berkala sehingga pengaturan ataupun
pemutakhiran isi atas situs web tersebut dilakukan secara manual.
b. Situs web dinamis
Situs web dinamis merupakan situs web yang secara spesifik didisain agar
isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala
dengan mudah. Sesuai dengan namanya, isi yang terkandung dalam situs
web ini umumnya akan berubah setelah melewati satu periode tertentu.
Situs berita adalah salah satu contoh jenis situs yang umumnya
mengimplementasikan situs web dinamis.

1.4 Alat Penjelajah Website
Penjelajah web (bahasa Inggris: web browser) adalah perangkat lunak yang

berfungsi untuk menerima dan menyajikan sumber informasi di Internet. Sebuah
sumber informasi diidentifikasi dengan pengidentifikasi sumber seragam (bahasa
Inggris: uniform resource identifier) yang dapat berupa halaman web, gambar,
video, atau jenis konten lainnya.

Gambar 1.2. Logo Web Brower

Meskipun penjelajah web terutama ditujukan untuk mengakses Internet,
sebuah penjelajah juga dapat digunakan untuk mengakses informasi yang
disediakan oleh server web dalam jaringan pribadi atau berkas pada sistem berkas.

Modul Ajar Desain Website 4

Gramandha Wega Intyanto, S.ST., M.T.

Beberapa penjelajah web yang populer adalah Google Chrome, Firefox, Internet
Explorer, Opera, dan Safari.

1.5 Komponen Dasar Dalam membangun website
a. HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language)
merupakan bahasa markah yang digunakan
untuk membuat sebuah halaman web. Markah
atau markup tersebut biasanya di sebut tag.
Gambar 1.3. Logo HTML 5 HTML ini merupakan standar Internet yang
didefinisikan dan dikendalikan penggunanya
oleh World Wide Web Constortium (W3C). w3c.org. HTML dibuat oleh
kolaborasi Cailliau TIM dengan Berners-lee Robert (merupakan lembaga
penelitian fisika energy tinggi di Jenewa) ketika mereka bekerja di CERN
tahun 1989.
b. CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) merupakan aturan
untuk mengatur beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan
seragam. CSS bukan merupakan bahasa
pemrograman. CSS sendiri merupakan sebuah
Gambar 1.4. Logo CSS 3 teknologi internet yang direkomendasikan oleh
World Wide Web Consortium atau W3C pada
tahun 1996.[6] CSS dapat mengendalikan ukuran gambar, warna bagian
tubuh pada teks, warna tabel, ukuran border, warna border, warna
hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin
kiri, kanan, atas, bawah, dan parameter lainnya.
c. JavaScript
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di
bawah nama Mocha, yang nantinya namanya diganti
menjadi LiveScript, dan akhirnya menjadi JavaScript.
JavaScript merupakan salah satu teknologi inti World
Wide Web selain HTML dan CSS. JavaScript
Gambar 1.5. Logo JS membantu membuat halaman web interaktif dan
merupakan bagian aplikasi web yang esensial

Modul Ajar Desain Website 5

Gramandha Wega Intyanto, S.ST., M.T.

d. PHP
PHP (Hypertext Preprocessor) sebelumnya disebut Personal Home Pages.
PHP adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam
HTML. PHP banyak dipakai untuk memprogram situs web dinamis. PHP
dapat digunakan untuk membangun sebuah CMS. Pada awalnya PHP
merupakan kependekan dari Personal Home Page (Situs personal). PHP
pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu.
PHP masih bernama Form Interpreted (FI), yang wujudnya berupa
sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber
terbuka, maka banyak pemrogram yang tertarik untuk ikut
mengembangkan PHP.

1.6 Desain Website
Perancangan web (web design) adalah istilah umum yang digunakan untuk

mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau
hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan
menggunakan sebuah browser web atau perangkat lunak berbasis web. Tujuan dari
web design adalah untuk membuat website—sekumpulan konten online termasuk
dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat
berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat
interaktif ataupun statis.’

Tahapan atau alur desain website yang efisien untuk pada designer website
yaitu berikut:

a. Kebutuhan client
Desainer web sering berpikir tentang proses desain web dengan fokus pada
hal-hal teknis seperti wireframes, kode, dan manajemen konten. Namun
desain yang hebat bukan saja tentang cara Anda mengintegrasikan tombol
media sosial atau bahkan visual yang menarik. Desain hebat sebenarnya
adalah membuat situs web yang sesuai dengan strategi menyeluruh. Salah
satunya kebutuhan dari client, dimana semakin jelas informasi yang
dikumpulkan dari klien semakin detail proses perancangan yang Anda
lakukan. Berikut ini beberapa hal penting yang perlu digali dari klien, yaitu:
 Dengarkan ide mereka

Modul Ajar Desain Website 6

Gramandha Wega Intyanto, S.ST., M.T.

 Kuesioner Klien
b. Riset, Ide, dan Sketch

Kebanyakan desainer website langsung menggunakan beberapa aplikasi
untuk proses desain website, seperti Photoshop, illustrator, adobe XD, dsb.
Padahal, untuk mempermudah proses desain kita sebaiknya kita
menggambar atau membuat sketching di kertas. Berikut ini hal-hal yang
perlu dipertimbangkan, yaitu:
 Sketching
 Kompilasikan Inspirasi Anda
 Kenali competitor bisnis klien Anda
c. Wireframe
Wireframe adalah blueprint website Anda.
Ini adalah hal yang membantu memberikan
website Anda struktur visual. Beberapa
desainer memiliki kecenderungan untuk
memasukkan elemen desain ke wireframe.
Pada proses melakukan wireframe Anda
sebaiknya memiliki tujuan untuk menata
letak dari elemen pada layout nantinya.
Anda juga bisa menggunakan aplikasi atau
tools dalam merancang wireframe seperti
Proto.io, wireframe.cc, Adobe XD, bahkan
aplikasi desain seperti illustrator,
Photoshop, dsb. Berikut ini hal-hal yang Gambar 1.6. Wireframe
perlu di perhatikan dalam perancangan
wireframe, yaitu:
 Letak Elemen
 Hirarki Informasi
 Interaktif
d. Perencanaan Konten
Setelah kerangka website sudah dirancang dan tersedia yaitu proses
perencanaan konten, dimana konten sendiri memiliki dua tujuan penting,
yaitu:
 Mendorong keterlibatan dan tindakan

Modul Ajar Desain Website 7

Gramandha Wega Intyanto, S.ST., M.T.

 Search Engine Optimization (SEO)
e. Style Tiles

Style tiles atau yang lebih dikenal dengan nama style guides atau panduan
style adalah kumpulan desain untuk visual branding sebuah web yang biasa
berisi font, warna, dan element interface yang akan membantu
menyampaikan identitas website ini kepada pengunjung website. Style tiles
juga biasa sesuai dengan diskusi client. Elemennya biasa terdiri dari logo,
typography, warna, dan voice brand itu sendiri. Berikut ini adalah contoh
Style Tiles. Beberapa pertimbangan dalam melakukan style tiles, yaitu:
 Visualisasi Konsep
 Menjaga konsistensi
 Efisiensi waktu
f. Prototype
Prototyping adalah proses dimana Anda membangun model website Anda
sebelum Anda membangun websitenya. Beberapa desainer suka mendesain
prototype desain website mereka dengan Photoshop. Jika Anda tidak terlalu
suka Photoshop, Anda juga bisa menggunakan framework web seperti
inVision dan UXpin. Berikut ini tiga langkah dalam membuat prototype, yaitu:
 Prototype
 Test
 Fine Tune
g. Testing Website
Setelah visual dan konten sudah siap, tahapan selanjutnya yaitu uji coba
website. Uji secara menyeluruh setiap halaman untuk memastikan semua
tautan berfungsi dan situs web dimuat dengan benar di semua perangkat
dan browser. Kesalahan mungkin disebabkan oleh kesalahan pengkodean
yang kecil, dan meskipun seringkali sulit untuk menemukan dan
memperbaikinya, lebih baik lakukan sekarang daripada menyajikan situs
yang rusak kepada publik. Uji pemeriksaan juga dilakukan halaman meta
judul, deskripsi dan tiap kata pada judul meta.
h. Launch Website
Hal penting yang perlu diingat tentang tahap peluncuran bukan berarti Anda
sudah selesai dengan projek ini. Proyek desain web sendiri bisa dibilang tidak
pernah selesai. Setelah situs dirilis, Anda dapat terus menjalankan pengujian

Modul Ajar Desain Website 8

Gramandha Wega Intyanto, S.ST., M.T.

pengguna pada konten dan fitur baru, memantau analisis, dan memperbaiki
pesan branding Anda.

Pada proses perancangan/desain web pemilihan layout yang dibutuhkan untuk
mengatur bagaimana isi sebuah konten website. Jenis-jenis website diantaranya
yaitu:

a. Fixed Layout
Tata letak situs web dengan fixed layout
memiliki layout dengan lebar tetap, dan
komponen di dalamnya memiliki lebar
persentase atau lebar tetap. Yang penting
elemen container (wrapper) diatur agar tidak
bergerak. Berapa pun resolusi layar yang
dimiliki pengunjung maka menampilkan atau

Gambar 1.7. Fixed Layout terlihat ukuran lebar dan tinggi yang sama
dengan pengunjung lainnya. Contohnya pada

Gambar 1.7., ukuran sudah fixed sehingga ketika pengunjung dengan
resolusi monitor berbeda-beda akan ditampilkan ukuran yang tetap.
b. Liquid Layout

Dalam tata letak situs web memiliki model
liquid layout, juga disebut sebagai tata letak
yang dapat beradaptasi/fleksible, sebagian
besar komponen di dalamnya memiliki
persentase lebar/tinggi, dan dengan
demikian menyesuaikan dengan resolusi
layar pengguna. Gambar 1.8. menunjukkan
layout website yang cair (liquid). Sementara
Gambar 1.8. Liquid Layout beberapa desainer mungkin memberikan
lebar yang ditetapkan ke elemen tertentu
dalam tata letak yang lancar, seperti margin, tata letak secara umum
menggunakan lebar persentase sehingga tampilan disesuaikan untuk setiap
pengguna.
c. Responsive Layout
Desain Web Responsif (bahasa Inggris: Responsive Web Design (RWD))
adalah sebuah metode atau pendekatan sistem web desain yang bertujuan

Modul Ajar Desain Website 9

Gramandha Wega Intyanto, S.ST., M.T.

memberikan pengalaman

berselancar yang optimal dalam

berbagai perangkat, baik mobile

maupun komputer meja. Dengan

metode ini, web akan beradaptasi jika

dibuka dari perangkat mobile

berukuran kecil maupun perangkat

Gambar 1.8. Responsive Design komputer meja dengan ukuran
monitor besar. Ukuran huruf, user

interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan

resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan

pengalaman mudah membaca, nyaman dan melihat informasi web tersebut

sesuai penggunaan perangkat yang dimiliki.

D. Rangkuman
• Situs web (bahasa Inggris: website) adalah sekumpulan halaman teks dan
gambar yang saling berhubungan yang umumnya berada pada peladen
yang sama berisikan kumpulan informasi yang disediakan secara
perorangan, kelompok, atau organisasi.

• Web browser merupakan laman yang digunakan untuk membuka HTML.

• Komponen utama pada website yaitu HTML, CSS, JavaScript.

• HTML (Hypertext Markup Language) merupakan bahasa markah yang
digunakan untuk membuat sebuah halaman web. Markah atau markup
tersebut biasanya di sebut tag

• CSS (Cascading Style Sheet) merupakan aturan untuk mengatur beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

• JavaScript membantu membuat halaman web interaktif dan merupakan
bagian aplikasi web yang esensial

• Perancangan web (web design) adalah istilah umum yang digunakan untuk
mencakup bagaimana isi web konten ditampilkan.

Modul Ajar Desain Website 10

Gramandha Wega Intyanto, S.ST., M.T.

• Tahapan dalam perancangan desain website yaitu kebutuhan client, riset,
ide, dan sketch, wireframe, style tiles, perencanaan konten, prototype,
launch website.

• Jenis-Jenis Layout: Fixed Layout, Liquid Layout, dan Responsive Layout

E. Latihan atau Tugas
. Susulah makalah tentang:
• Ringkasan pengetahuan, konsep, dan perkembangan teknologi website
beserta desain website
• Berikan contoh-contoh studi kasus pada desain website

*Wajib diberikan referensi dari hasil penyusunan Anda!

2. Buatlah file presentasi berupa PowerPoint sesuai dengan makalah yang Anda
buat!

F. Daftar Pustaka
Ahmad Zainudin, S.ST, M.T, Modul Praktikum Internet Programming, PENS

Surabaya
Achmad Solichin, Modul Praktikum Pemrograman Web II, Universitas

Sriwijaya
Jennifer N Robbins; Learning Web Design Third Edition,O’Reilly Media,

2007.
Jon Duckett; HTML & CSS design and build websites, 2011
Christopher Schmitt; CSS Cookbook, 3rd, O’Reilly Media, 2010
Situs akses simulasi dan pembelajaran website, Link URL:

https://www.w3.org/TR/2004/REC-webarch-20041215/
Wang, Paul,. Katila, Sanda. 2003. An Introduction to Web

Design+Programming. Brooks/Cole Book.
Thomas A. Powel. 2010. HTML & CSS: The Complete Reference, Fifth

Edition. The McGraw-Hill: United States.
Ducket, Jon. 2004. Beginning Web Programming with HTML, XHTML, and

CSS. Wiley Publishing: Canada.

Modul Ajar Desain Website 11

Gramandha Wega Intyanto, S.ST., M.T.

BAB II
KONSEP DASAR HTML
(Hypertext Markup Language)

A. Pendahuluan
Membahas mengenai konsep dasar HTML (Hypertext Markup Language) dan cara
menggunakan HTML untuk membangun website, dimana mahasiswa. Modul
pembelajaran ini dipergunakan untuk pertemuan ke-3 untuk mata kuliah Desain
Website.

B. Capaian Pembelajaran
Mahasiswa mampu menjelaskan dan mendemonstrasikan tentang HTML. (C2, A3,
P3)
Indikator:

- Ketepatan menjelaskan pengetahuan tentang HTML;
- Ketepatan menguji coba dan mendemonstrasikan bahasa script HTML.

C. Materi
2.1. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah bahasa scripting yang digunakan
untuk menampilkan sebuah website. HTML termasuk dalam bahasa scripting yang
gratis, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh
banyak orang di banyak negara dan bisa dikatakan sebagai sebuah bahasa yang
dikembangkan bersama-sama secara global.

Bahasa HTML mengalami perkembangan, standard terbaru HTML adalah
HTML5 yang dirilis pada tahun 2010, beberapa kelebihan yang dimiliki HTML 5:

a. HTML5 dirancang khusus untuk menangani konten website tanpa
memerlukan plugin (seperti flash);

b. Penanganan kesalahan yang lebih baik;
c. HTML5 memiliki elemen semantic, gambar dan multimedia baru;
d. HTML5 mempunyai elemen form baru dan API baru sehingga

pengembangan aplikasi web lebih mudah;
e. HTML5 merupakan cross-platform, dirancang untuk bekerja pada

beberapa tipe perangkat keras (PC, Tablet, Phone, TV, dll).

Modul Ajar Desain Website 12

Gramandha Wega Intyanto, S.ST., M.T.

Dokumen HTML adalah dokumen teks yang dapat diedit oleh editor teks
apapun. Dan disimpan dengan file extension .html. Dokumen HTML punya
beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol “ < ”
dan berakhir dengan sebuah symbol “ > ”.
2.2. Struktur Dasar HTML (Hypertext Markup Language)

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag
akhir. Tag berakhir termasuk simbol/diikuti oleh tipe elemen, misalnya </HEAD>.
Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen
HTML standar terlihat seperti ini:

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Selamat Datang HTML</title>
5. </head>
6. <body>
7. <p>Halo dunia!</p>
8. </body>
9. </html>

Keterangan :
1. Tag HTML secara default dimulai dari <html> dan diakhiri dengan </html>.
2. tag <head> ... </head> merupakan tag kepala sebelum badan. tag kepala ini

akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag
<meta> dan <title>. Tag <meta> merupakan informasi atau header suatu
dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML

secara otomatis dalam jangka waktu tertentu;
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang

akan dipanggil;
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag

<meta> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <title> ... </title> adalah tag judul. Sebaiknya setiap halaman web

memiliki judul, dan judul tersebut dituliskan di dalam <title> ... </title>. Judul
ini akan muncul dalam title bar dari browser.
4. tag <body> ... </body> adalah tag berisi konten dari suatu halaman web.

Modul Ajar Desain Website 13

Gramandha Wega Intyanto, S.ST., M.T.

2.3. Elemen-elemen Pada HTML (Hypertext Markup Language)

i. Teks

1. Headings

Heading biasanya digunakan untuk penulisan judul, bab, sub bab, dsb.

Terdapat 6 jenis dengan skala 1 s.d. 6, semakin ke arah 6 maka semakin

kecil ukuran font-nya.

<h1>text</h1> text

<h2>text</h2> text

<h3>text</h3> text

<h4>text</h4> text

<h5>text</h5> text

<h6>text</h6> text

Paragraf

Untuk membuat teks paragraf pada HTML, diantara kalimat harus

menggunakan taq pembuka <p> dan taq penutup </p>. Hasil seperti pada

Gambar 1.1 yang terdapat pada tulisan “Helo dunia! (<p> Helo dunia

</p>)”.

2. Tipe Teks

Bold <b>text</b>

Italic <i>text</i>

Strong <strong>text</strong>

Emphasis <em>text</em>

Superscript ^text

Subscript _text

Teks Bergaris <ins>text<ins>

<del>text</del>

<s>text</s>

LINE BREAKS (Enter) <br />
Horizontal Rules <hr />
White Space
Space &nbsp
3. Tipe Kata-Kalimat
<blockquote>text</blockquote>
Quotations Blockquote <q>text</q>
Tanda petik <cite>text</cite>

Citations

Modul Ajar Desain Website 14

Gramandha Wega Intyanto, S.ST., M.T.

Definitions <dfn>text</dfn>
Abbreviations (gelar) <abbr>text</abbr>
Acronyms (singkatan) <acronym>text</acronym>
Author details <address>text</address>
A. Simbol

Gambar 2.1. Simbol

b. List

Pada HTML untuk membuat daftar atau list pada halaman website ada 3
macam jenis berbeda, berikut ini beberapa jenisnya:

1. Ordered Lists meraupkan list atau daftar yang berupa nilai angka.
Biasanya digunakan untuk melakukan langkah-langkah dan
sebagaimana yang lain.
<ol> … </ol> untuk mengawali list yang menggunakan nomer
<li> … </li> untuk tiap nomer pada setiap daftar atau list

2. Unordered Lists merupakan list atau daftar yang poin titik (bullet
point).
<ol> … </ol> untuk mengawali list yang menggunakan nomer
<li> … </li> untuk tiap nomer pada setiap daftar atau list

3. Definition Lists merupakan daftar atau list terdiri dari seperangkat
istilah bersama dengan definisi untuk masing-masing istilah. Taqnya

Modul Ajar Desain Website 15

Gramandha Wega Intyanto, S.ST., M.T.

bias dilihat dan contoh penggunaannya dapat dilihat pada gambar

2.1.

<dl> … </dl> <dl> taq untuk membukan elemen pada daftar

definisi (definition lists). Dan </dl> untuk menutuk

diakhir daftar definisi

<dt> … </dt> taq untuk kata yang akan didefinisikan.

<dd> … taq yang digunakan untuk penjelasan dari kata yang

</dd> didefinisikan.

Pada list atau daftar ada tambahan untuk membuat beberapa sub topik

dari daftar yaitu dengan menggunakan nested list yaitu dengan tambahan

elemen taq <li> atau bisa disebut dengan nested list.

c. Link atau Hyperlink

Link atau dalam bahasa Indonesia disebut tautan merupakan fitur untuk
penentu web karena taq ini digunakan untuk melakukan pindah satu
halaman web ke halaman web lainnya ketika Anda mengaktifkan atau
mengklik.

Cara penulisan link (tautan) yaitu tautan dibuat menggunakan elemen <a>.
Pengguna dapat mengklik apa saja antara tag <a> dan tag penutup </a>
pembuka. Anda tentukan halaman mana yang ingin Anda tautan
menggunakan atribut href. Contoh penulisan yang jelas dapat dilihat pada
Gambar 2.2.

Gambar 2.2. Penulisan tautan (link)

Berikut ini beberapa penentuan jenis tautan:
1. Tautan dari satu web ke satu web lainnya.
2. Tautan dari satu halaman ke halaman lainnya di situs web yang sama.
3. Tautan dari satu bagian halaman web ke bagian lain dari halaman

yang sama
4. Tautan yang terbuka di jendela browser baru
5. Tautan yang memulai program email Anda dan alamat email yang

baru ke seseorang.

Modul Ajar Desain Website 16

Gramandha Wega Intyanto, S.ST., M.T.

d. Tabel

Tabel biasanya digunakan untuk memasukkan data ke dalam grid atau

kotak yang berupa kolom dan baris, hal ini juga sama dengan pada kondisi di

HTML. Berikut ini akan dibagi beberapa proses pembuatan tabel pada HTML.

Basic table structure <table>
<tr>
<td>

Table heading <th>

Spanning columns <th or td colspan = “jumlah kolom”>

Long tables <thead>
<tbody>
<tfoot>

e. Form

1. Menambahkan Text Input pada Form

Text input <Input type=”text” name=”nama_form”
size=”ukurannya” maxlength=”jumla
<input type="text" name="email" />

<input type="submit" name="subscribe"
value="Subscribe" /> h limit

karakter(huruf atau angka)”/>

Password input Kondisi sama dengan text input kecuali
untuk typenya menggunakan password

(type=”password”)

Text area <textarea></textarea>
Bias juga didalam texarea diberi

attribute

Search input (HTML5 <input type="search" name="search" />
saja) <input type="submit" value="Search" />

Date input (HTML5 saja) <input type="date" name="depart" />

2. Membuat pilihan pada Form

Radio Button <Input type=”radio” name=”nama_form”
value=”nama pilihan” checked=”checked

/>

Checkbox <input type="checkbox" name="nama
attribut" value="nama pilihan

checkbox" />

Drop Down List Box <select name="nama_jenis_pilihan">

Modul Ajar Desain Website 17

Gramandha Wega Intyanto, S.ST., M.T.

<option

value="nama_pilihan">nama_pilihan1

</option>

<option

value="nama_pilihan">nama_pilihan2

</option>

</select>

Multiple Select Box <select name="nama pilihan"
size="jumlah pilihan yang akan

keluar" multiple="multiple">

<option value="nama_pilihan "

selected="selected">

nama_pilihan1</option>

<option value=" nama_pilihan2">

nama_pilihan2</option>

</select>

3. Membuat Submitting pada Form

File input box <input type="file" name="user-song"
/><br />

<input type="submit" value="Upload" />

Submit button <input type="text" name="email" />
<input type="submit" name="subscribe"

value="Subscribe" />

Image button <input type="text" name="email" />
<input type="image"

src="images/subscribe.jpg"

width="100" height="20" />

Beberapa tambahan pada Form yaitu :

Label pada Form <label>text</label> atau dengan
<label for=”nama”>text</label>

Membuat grup pada <fieldset>
elemen <legend>Contoh Grup </legend>
<fieldset>

Cara memberikan label pada Form yaitu dengan memberikan taq

elemen <label>text</label>

f. Gambar

Pada website untuk mempercantik dan menambahkan deskripsi pada
website biasanya ditambahkan dengan gambar, salah satu contohnya Anda
menyertakan logo, foto, ilustrasi, diagram dan bagan pada website.

Adapun beberapa hal yang perlu dipertimbangkan pada saat memilih dan
menambahkan gambar pada website, agar tercapai nilai estetika yang
menarik. Berikut ini beberapa step pada posisikan gambar:

Modul Ajar Desain Website 18

Gramandha Wega Intyanto, S.ST., M.T.

1. Pemilihan gambar sesuai dengan kondisi website;

2. Pemilihan format gambar yang akan digunakan;

3. Tampilan gambar dengan ukuran yang tepat;

4. Optimalkan gambar untuk digunakan dengan web, agar web bisa

dibuka dengan lebih cepat.

Cara meletakkan gambar diusahakan satu folder pada file html atau pada

folder yang disediakan untuk gambar, tetapi ketika proses upload pada

hosting, gambar harus ikut di upload.

Taq menambah image <img src="lokasi/namagambar.format"

alt="mendeskripsikan gambar"

title="judul gambar" />

Ukuran gambar <img src="lokasi/namagambar.format"
(dalam satuan pixel) alt="mendeskripsikan gambar"
title="judul gambar" width=”600”

height=”450”/>

Posisi (align) <img src="lokasi/namagambar.format"
 left = kiri alt="mendeskripsikan gambar"
 right = kanan title="judul gambar" width=”600”
 top = atas height=”450” align=”posisi”/>

 middle = tengah

 bottom = bawah

g. Flash
Cara paling populer menambahkan flash ke halaman website yaitu dengan

menggunakan JavaScript. Ada beberapa skrip yang memungkinkan Anda
untuk melakukan ini tanpa mendalam memahami menggunakan Bahasa
JavaScript.

Script yang akan kita coba yaitu dengan menggunakan SWF Object. Kamu
dapat memperoleh Salinan contoh script-nya secara gratis di google,
kemudian Anda bisa melihatnya hasil menggunakan script tersebut.

h. Audio

Pada audio, sejauh ini untuk format yang paling popular untuk
menempatkan audio pada halaman web yaitu mp3. Seperti dengan video,
ada 3 tipe rute yang biasa ditempuh untuk memasukkan audio pada HTML,
sebagai berikut:

1. Menggunakan service hosted (ada beberapa situs yang memungkinkan
Anda untuk mengunggah audio seperti SoundCloud.com dan
MySpace.com

Modul Ajar Desain Website 19

Gramandha Wega Intyanto, S.ST., M.T.

2. Menggunakan kode HTML manual.

Menambahkan audio <audio src="audio/test-audio.ogg"
pada halaman site controls autoplay>
<p>Pada browser ini tidak men-support

format audio Anda</p>

</audio> >

Multiple Video Sources <audio controls autoplay>

<source src="audio/test-audio.ogg" />

<source src="audio/test-audio.mp3" />

<p>Pada browser ini tidak men-support

format audio Anda</p>

</audio>

i. Video <video src="video/puppy.mp4"
Menambahkan Video poster="images/puppy.jpg"
pada halaman width="400" height="300"
preload
Multiple Video Sources controls
loop>
<p>Video bermain salju</p>
</video>

<video poster="images/puppy.jpg"
width="400"
height="320" preload controls loop>
<source src="video/puppy.mp4"
type='video/
mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/puppy.webm"
type='video/
webm;codecs="vp8, vorbis"' />
<p>Video bermain salju</p>
</video>

D. Rangkuman
 Hypertext Markup Language (HTML) adalah bahasa scripting yang
digunakan untuk menampilkan sebuah website.
 Dokumen HTML adalah dokumen teks yang dapat diedit oleh editor teks
apapun. Dan disimpan dengan file extension .html. Dokumen HTML punya
beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol
“ < ” dan berakhir dengan sebuah symbol “ > ”.

Modul Ajar Desain Website 20

Gramandha Wega Intyanto, S.ST., M.T.

 Struktur pada HTML dimana elemen HTML dimulai dengan tag awal, yang
diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuk simbol/diikuti
oleh tipe elemen, misalnya </head>.

 Elemen-elemen pada HTML yaitu teks, list, link, table, form, gambar, flash,
video, audio. Dimana tiap element memiliki beberapa cara/taq untuk
menginstruksikan.

E. Latihan atau Tugas
1. Buatlah website sederhana berbasis HTML saja, yang di dalamnya struktur
dan element pada HTML, kemudian buat layout sederhana yang di dalamnya
terdapat struktur dan keseluruhan dari elemen-element pada HTML (teks,
list, link, tabel, form, gambar, flash, video, audio)!
2. Buatlah laporan praktikum dari hasil percobaan mulai dari judul hingga hasil
dari percobaan, kemudian tambahkan rangkuman dan kesimpulan dari
percobaan yang dibuat.

F. Daftar Pustaka
Jennifer N Robbins; Learning Web Design Third Edition,O’Reilly Media,

2007.
Jon Duckett; HTML & CSS design and build websites, 2011
Christopher Schmitt; CSS Cookbook, 3rd, O’Reilly Media, 2010
Wang, Paul,. Katila, Sanda. 2003. An Introduction to Web

Design+Programming. Brooks/Cole Book.
Thomas A. Powel. 2010. HTML & CSS: The Complete Reference, Fifth

Edition. The McGraw-Hill: United States.

Modul Ajar Desain Website 21

Gramandha Wega Intyanto, S.ST., M.T.

BAB III
KONSEP DASAR CSS
(Cascading Style Sheet)

A. Pendahuluan
Membahas mengenai konsep dasar CSS (Cascading Style Sheet) dan cara
menggunakan CSS pada implementasi di HTML untuk membangun website, dimana
mahasiswa. Modul pembelajaran ini dipergunakan untuk pertemuan ke-4 untuk
mata kuliah Desain Website.

B. Capaian Pembelajaran
Mahasiswa mampu menjelaskan dan mendemonstrasikan tentang CSS. (C2, A3, P3)
Indikator:

- Ketepatan menjelaskan pengetahuan tentang CSS;
- Ketepatan menguji coba dan mendemonstrasikan bahasa script CSS.

C. Materi
3.1 Pengertian CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) digunakan untuk memberikan estetika pada
halaman laman html. Semisal menentukan latar belakang halaman, semua paragraf
ingin memiliki warna dan jenis font yang sama, dan sebagainya yang berkaitan
dengan estetika lainnya.

Pada modul praktikum ini, diharapkan mahasiswa mampu mempelajari CSS
secara dasar mulai dari cara kerja tentang CSS, penulisan CSS dan aturan aturan-
aturan penggunaan CSS dengan HTML.

Cara penulisan CSS, ditulis pada bagian <head> setelah </title> bisa dibagi 2
yaitu

1. CSS ditulis secara external atau di luar dari laman.
2. CSS ditulis secara internal atau ditulis pada satu laman HTML.
Aturan Penulisan CSS, yaitu dibagi menjadi selector dan declaration. Pada
selector menunjukkan elemen mana yang aturan akan di berlaku, kemudian aturan
yang sama dapat berlaku untuk lebih dari satu elemen jika dipisahkan nama elemen
dengan koma. Pengertian declaration yaitu menunjukkan cara atau parameter
untuk pengaturannya. Gambar penulisan elemen CSS dapat dilihat pada Gambar
3.1.

Modul Ajar Desain Website 22

Gramandha Wega Intyanto, S.ST., M.T.

Gambar 3.1. Bagian dari elemen CSS
Pada declaration sendiri terdapat dua bagian, yaitu pada bagian pertama
properti dan bagian kedua nilai, dan diantara keduanya diberi tanda titik dua (colon
(:)), kemudian setelah properti nilai diakhiri titik koma (semi-colon (;)). Gambar
terkait bagian dari declaration ditunjukkan pada Gambar 3.2.

Gambar 3.2. Penulisan Declaration
Selanjutnya pada elemen CSS terdapat banyak tipe selector yang dapat
mahasiswa gunakan untuk aturan pada laman HTML. Pada Gambar 3.3 beberapa
selector CSS yang umumnya digunakan.

Gambar 3.3. Selector CSS
3.2 Elemen-Elemen CSS

a. Warna
Warna merupakan hal yang penting dalam sebuah tampilan halaman web.

Warna memiliki fungsi menarik terhadap ketertarikan pengunjung web tetapi

Modul Ajar Desain Website 23

Gramandha Wega Intyanto, S.ST., M.T.

jika tidak tepat memberikan komposisinya maka dapat berdampak pada
tampilan web yang membosankan. Warna dalam betuk digital memiliki tiga
warna dasar yaitu merah, hijau dan biru. Biasa disebut dengan RGB kependekan
dari Red, Green, Blue. Setiap unsur warna di layar monitor dibentuk dari
percampuran tiga warna tersebut.

Gambar 3.4. Warna Dasar RGB

Layar monitor terdiri dari ribuan titik yang disebut pixel yang jika komputer
dinyalakan dapat mengeluarkan warna sesuai nilai yang diberikan. Pada proses
memasukkan warna ke dalam CSS ada tiga bentuk cara prosesnya yang pertama
yaitu memasukkan nama warnanya yang sekitar ada berjumlah 147 warna yang
terdaftar, kedua memasukkan hexa-code-nya, dan yang ketiga dengan nilai RGB
nya Rentang nilai warna RGB adalah 0-255.

Gambar 3.5 Cek Nilai Warna Dengan Aplikasi Editor Foto

Contoh input warna dengan nilai RGB adalah rgb (200, 200, 200), 200
pertama nilai dari R, 200 kedua nilai dari G, 200 ke tiga adalah nilai dari B.
Berapa nilai dari suatu warna secara sederhana Anda bisa menggunakan

Modul Ajar Desain Website 24

Gramandha Wega Intyanto, S.ST., M.T.

aplikasi editor foto seperti Photoshop atau GIMP atau dengan mengakses situs
colorschemedesigner.com.

Jenis Warna Kode Warna di Website
Warna RGB : Nilainya dari warna
merah, hijau, biru dengan skala Rgb(102,205,170)
nilai 0 sampai dengan 255 #66cdaa
Warna Hex : Dimana pemberian MediumAquaMarine
warna RGB dengan nilai presentasi
kode hexadecimal
Nama Warna : dimana pemberian
source warna dengan nama
warnanya

a.1. Kontras
Pada proses pengaturan kontras dapat digunakan dalam satu halaman

web dengan menggunakan background dan foreground, contoh kontras
pada Gambar 3.6.

Gambar 3.6. Contoh Kontras

Pada low kontras harus memperhatikan warna dari background karena
teks tidak akan terbaca saat cahaya terang seperti di luar ruangan. High
kontras akan mudah terbaca di kondisi apapun. Medium kontras yaitu
mengurangi kontras sedikit akan tetapi masih mudah dibaca, misal caranya
dengan mengurangi kontras sehingga warnanya menjadi abu-abu gelap
dengan background putih atau dengan tulisan putih pada background gelap.

a.2. Opacity
Pada CSS 3 telah ada properti untuk mengatur opacity dengan

representasi nilai 0%-100% dengan format penulisan 0.0 sampai dengan 1.0.
(contoh 0.5 bernilai 50% dan 0.15 bernilai 15%). Properti RGBA pada CSS 3
dapat mengatur warna seperti mengatur warna menggunakan RGB dengan
menambah nilai opacity. Pada penggunaan RGBA tidak semua browser dapat
me-recognize, browser yang tidak dapat me-recognize RGBA akan membuat
menjadi warna solid tidak ber- opacity. Seperti contoh Gambar 3.7.

Modul Ajar Desain Website 25

Gramandha Wega Intyanto, S.ST., M.T.

Gambar 3.7. Hasil Pengaturan Opacity
a.3. Warna HSL

CSS 3 juga terdapat pilihan pengaturan warna dengan nilai Hue,
Saturation, dan Lightness values. Hue adalah warna asli yang terepresentasi
dalam lingkaran warna dengan nilai sudut 0 sampai dengan 360o seperti pada
Gambar 3.8.

Gambar 3.8. Lingkaran Warna

Saturasi adalah nilai dari tingkat keabuan yang direpresentasikan dengan
nilai 0% sampai dengan 100%. Lightness adalah gradasi dari putih hingga
hitam yang nilainya direpresentasikan juga dengan persentase, seperti 0 %
adalah hitam, 100% putih, dan 50% normal, seperti Gambar 3.9.

Gambar 3.9. Representasi Saturasi Dan Lightness.

b. Teks

Pada pengaturan font ada beberapa script taq yang dibutuhkan yaitu jenis font,

ukuran font, model font, transformasi text, dekorasi text.

Jenis font font-family: nama_font;

Contoh: font-family: Arial, Verdana, sans-serif;

Ukuran font https://www.CSSfontstack.com/

font-size: ukuran;

Contoh:
Satuan (px, %, em)

Modul Ajar Desain Website 26

Gramandha Wega Intyanto, S.ST., M.T.

Model font font-style: model_font;

Mentransformasi Contoh : font-style: italic;
teks atau biasanya Pilihan (normal, italic, oblique)
change case text
Dekorasi pada teks text-transform: jenis_transform;

Contoh: text-transform: uppercase;
Pilihan (uppercase, lowercase, capitalize)

text-decoration: jenis_dekorasi;

Contoh: text-decoration: underline;
Pilihan (none, underline, overline, line-through, blink)

c. Border, Padding, dan Margin

margins

border

padding

Gambar 3.10. Ilustrasi Border, Margin, dan Padding

Border adalah kotak untuk membingkai teks atau gambar. Margin merupakan

pengaturan batas teks dengan tepi teks. Padding adalah batas border dengan teks

yang ada di dalam border. (Gambar 3.10.)

Border border-color: border-top-color
warna; border-right-color

border: ukuran thin border-bottom-color
jenis_border warna; border-left-color
border-top-width

Contoh: 3px medium border-right-width
thick border-bottom-
border: dotted widthborder-left-
#0088dd; width

Padding padding-top
padding-right
Pading: padding_top padding-bottom
padding_right padding padding-left
bottom padding left

Contoh:

padding: 10px 5px 3px 1px;

Margin margin-top

Modul Ajar Desain Website 27

Gramandha Wega Intyanto, S.ST., M.T.

margin: margin_top margin-right
margin_right marginbottom margin-bottom
margin left margin-left

Contoh:

margin: 10px 5px 3px 1px;

d. Gambar

Pada CSS pengaturan untuk gambar ada beberapa cara mulai dari mengatur

ukuran gambar, posisi gambar, gambar digunakan sebagai background.

Ukuran gambar img.class_name{
width: ukuran lebar;
Posisi gambar Float: height: ukuran tinggi;}
 Left
 right Img.align-left{
float: left;
margin-right: ukuran_margin;}

Gambar sebagai Background-repeat : Body{
background  Repeat: gambar Background-
image:url(“images/header.gif”);
akan muncul Background-repeat: repeat-x;}
berulang

memenuhi halaman

web.

 Repeat-x: gambar

akan berulang

kesamping atau

horisotal.

 Repeat-y: gambar

akan berulah secara

vertikal.

 No-repeat: gambar

tidak berulang

Background- Body{
posistion: posisi-x Background-
posisi-y; image:url(“images/header.gif”);
Background-repeat: repeat-x;
Background-posistion: 50% 50%}

Modul Ajar Desain Website 28

Gramandha Wega Intyanto, S.ST., M.T.

D. Rangkuman
 CSS (Cascading Style Sheet) digunakan untuk memberikan estetika pada
halaman laman html. Semisal menentukan latar belakang halaman, semua
paragraf ingin memiliki warna dan jenis font yang sama, dan sebagainya yang
berkaitan dengan estetika lainnya
 Cara penulisan CSS, ditulis pada bagian <head> setelah </title> bisa dibagi 2
yaitu:
1. CSS ditulis secara external atau di luar dari laman.
2. CSS ditulis secara internal atau ditulis pada satu laman HTML.
 Elemen-elemen html yang dapat diatur oleh CSS yaitu warna, teks, margin,
border, padding, dan gambar

E. Latihan atau Tugas
1. Buatlah website sederhana berbasis HTML dengan CSS saja, yang di
dalamnya struktur dan element pada CSS yang dijelaskan pada modul,
kemudian buat layout sederhana yang di dalamnya terdapat struktur dan
keseluruhan dari elemen-element pengaturan pada CSS (warna, teks,
margin, border, padding, dan gambar
2. Buatlah laporan praktikum dari hasil percobaan mulai dari judul hingga hasil
dari percobaan, kemudian tambahkan rangkuman dan kesimpulan dari
percobaan yang dibuat.

F. Daftar Pustaka
Jennifer N Robbins; Learning Web Design Third Edition,O’Reilly Media,

2007.
Jon Duckett; HTML & CSS design and build websites, 2011
Christopher Schmitt; CSS Cookbook, 3rd, O’Reilly Media, 2010
Wang, Paul,. Katila, Sanda. 2003. An Introduction to Web

Design+Programming. Brooks/Cole Book.
Thomas A. Powel. 2010. HTML & CSS: The Complete Reference, Fifth

Edition. The McGraw-Hill: United States.

Modul Ajar Desain Website 29

Gramandha Wega Intyanto, S.ST., M.T.