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 <sup>text</sup>
Subscript <sub>text</sub>
Teks Bergaris <ins>text<ins>
<del>text</del>
<s>text</s>
LINE BREAKS (Enter) <br />
Horizontal Rules <hr />
White Space
Space  
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.