Persiapan

Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa mengenai aplikasi
yang mendukung HTML dan CSS dan cara installasinya.
Sasaran:
Mahasiswa mampu mengenal dan memahami aplikasi-aplikasi pendukung
dalam belajar HTML dan CSS

Untuk mempelajari HTML dan CSS dengan mudah, ada beberapa hal yang harus
dilakukan. Seperti menginstall aplikasi-aplikasi yang dibutuhkan dan mendukung
dalam proses belajar coding HTML dan CSS.

1.1 Web Browser

Web browser merupakan tools utama yang digunakan untuk menampilkan
halaman web (homepage). Halaman ini pada dasarnya dibuat menggunakan
HTML dan CSS. Oleh karena itu, pastikan PC atau laptop Anda sudah terinstall
Web Browser seperti Internet Explorer (Windows), Safari (Mac) dan Firefox (Linux
Ubuntu).

Setiap web browser memiliki fitur yang berbeda dalam hal menampilkan halaman
web yang mendukung HTML dan CSS. Seperti contoh, halaman web yang anda
buat dapat ditampilkan dengan baik pada salah satu browser namun dapat acak-
acakan pada browser yang lain. Oleh karena itu, untuk menguji tampilan website
yang anda buat, diperlukan beberapa browser yang terinstall dalam komputer
anda.

Isu-isu kompatibilitas ini akan anda temui ketika mempelajari CSS nantinya yang
berhubungan dalam penampilan halaman web. Berikut ini adalah beberapa
browser yang dapat anda download dari Internet serta review singkat dari
browser tersebut.

1
Maxthon

Maxthon merupakan peramban web multi-platform mutakhir yang secara teratur

mengungguli browser top lainnya dan menawarkan kepada pengguna
pengalaman menjelajah dan berbagi pengalaman.

Maxthon 5 Cloud Browser memberikan fasilitas backup cloud berkinerja tinggi,

sinkronisasi dan kemampuan berbagi, dan enkripsi tingkat lanjut untuk
memastikan keamanan data pengguna.

Firefox

Web browser ini merupakan salah satu browser yang digemari oleh para
developer web karena Add-on yang beragam. Anda dapat mendownloadnya di
http://firefox.com

Google Chrome

Google Chrome merupakan web browser yang dibuat oleh Google dan memiliki
beberapa keunggulan seperti browser yang sangat ringan, cepat dan memiliki
beragam Add-on. Chrome juga memiliki engine browser yang dapat mendukung
fitur-fitur terbaru teknologi HTML dan CSS. Anda dapat mendownloadnya di
http://google.com/chrome

Safari

Safari adalah web browser dari Apple. engine webkit yang dimiliki safari
mendukung fitur-fitur terbaru HTML dan CSS. Browser ini tersedia untuk Mac dan
Windows saja. http://www.apple.com/safari

Internet Explorer

Browser ini merupakan bawaan dari sistem operasi windows yang notabene
adalah produk Microsoft. Namun saat ini, Microsoft telah meluncurkan browser
terbaru-nya dan direkomendasikan karena ringan yang bernama Microsoft Edge.

2
1.2 Text Editor
Halaman Web dibuat dengan menuliskan kode program HTML dan CSS tertentu.
untuk menulis kode program tersebut, anda membutuhkan sebuah text editor.

Editor teks yang akan Anda gunakan adalah editor teks ringan, tetapi penuh
dengan fitur kode HTML dan CSS yang berguna.

Notepad++

Notepad++ ini memiliki fitur yang beragam dan sangat digemari oleh para
programmer. Teks editor satu ini memiliki kelebihan untuk memperkaya diri
dengan plugin, kemampunan inilah yang menjadi pembeda dengan text editor
sejenisnya. Anda dapat mendownload Notepad++ di http://notepad-plus-plus.org.

Sublime

Sublime merupakan Text editor yang mudah digunakan dengan penampilan yang
simple namun enak dipandang. Sublime text ini merupakan aplikasi yang
berbayar. Anda dapat mendownload versi demo-nya (meskipun versi demo tapi
tidak ada batasan dalam penggunaannya).

Sublime text mendukung beberapa OS seperti 3ystem Operasi Windows, Linux

dan Mac, download di alamat berikut http://www.sublimetext.com/2

Gedit

Bagi pengguna Linux, OS ini sudah memiliki text editor bawaan yaitu GEdit.
GEdit dapat digunakan untuk menuliskan berbagai macam bahasa
pemrograman.

Anda pengguna Windows-pun dapat mendownload GEdit versi windows di situs

resminya http://projects.gnome.org

3
1.3 Add-On
Firebug

Firebug bisa kita gunakan untuk menjajaki perintah HTML yang ada pada
halaman web, melihat kode CSS yang digunakan dan kepada menguji script
javascript. Anda bisa menginstallnya depan browser Firefox. Untuk
menginstallnya cukup mengakar ke peranginan Add-on dan gagar add-on
firebug.

Jika anda memakai Google Chrome atau Safari, tidak usah menginstall firebug
karena kedua browser pakai engine webkit ini stop memegang tool arah-arah
yang dinamai pakai Developer Tool.

Web Developer Tools Add-on ini digunakan kepada mengetes halaman web dan
mengerjakan sejumlah perubahan/ralat temporer terhadap halaman web. Anda
bisa menginstallnya terbit add-on firefox atau terbit Chrome Web Store.

Itulah penjelasan-penjelasan yang diperlukan untuk belajar HTML dan CSS, tapi
yang terpenting adalah keberadaan Web Browser dan Text editor, sisanya adalah
optional yang keberadaannya, semata-mata membantu aktifitas kita dalam
inovasi membangun web. Sedangkan Firebug dan Developer tools bersifat
opsional, meskipun memiliki manfaat yang lumayan penting, tetapi anda tidak
harus menginstall keduanya. Kedua tools ini sangat konstruktif untuk menguji
dan mengedit kesalahan yang ditimbulkan dalam pengetikan kode perintah atau
lainnya.

4
 Pengenalan HTML
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa mengenai Bahasa
Pemrograman HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML

Ketika anda membuka halaman web tertentu, seperti facebook.com, twitter.com,

google.com dan lainya, halaman-halaman tersebut ditampilkan dengan kode
perintah HTML. Jadi dapat disimpulkan bahwa HTML merupakan bahasa dasar
yang berguna untuk menampilkan halaman web pada internet browser.

Buka Web browser anda lalu bukalah sebuah situs, http://www.google.com

misalnya.

1. Klik kanan pada area sembarang, kemudian klik “Inspect element”

2. Lihatlah kode program yang muncul dari hasil inspect element, akan
terlihat seperti dibawah ini :
5
Pada baris pertama tertera <!doctype html>, hal ini menunjukkan bahwa halaman
yang sedang kita buka saat ini adalah HTML. Begitupun pada baris kedua tertera
<html>, kode tersebut menunjukkan bahkan kode-kode yang ditulis di dalamnya
adalah kode HTML.

2.1 Apa itu HTML?

Bahasa utama dalam membuat website adalah HTML atau Hyper-Text Markup
Language. Lazimnya semua halaman web ditulis menggunakan variasi HTML.
Dengan HTML, pengembang website dapat memastikan bahwa text, gambar dan
multimedia dapat menyatu dengan elemen lainnya ketika dijalankan di browser.

Standarisasi HTML diciptakan oleh sebuah lembaga konsorsium pada tahun

1997 yang bernama W3C atau World Wide Web Consortium. Dalam HTML, tag
digunakan untuk mendefenisikan struktur dan elemen menggunakan karakter <
dan >. Browser akan menampilkan halaman website dengan menggunakan tag
tersebut. Sebenarnya, HTML bukanlah satu-satunya standard development.

6
Akhir-akhir ini, beberapa tag untuk style content dihadirkan dalam bahasa yang
cukup kompleks.

Alhasil, W3C membuat keputusan yang sangat dibutuhkan untuk memisah antara
content dan style pada website; sehingga terciptalah style sheets. Saat ini,
penggunaan tag untuk style dokumen seperti <Font> sudah mulai ditinggalkan
progrmammer lebih menyukai penggunaan style sheets. Hanya tag untuk
menentukaan content saja yang masih dipertahankan sebagai inti HTML.

Saat ini perkembangan HTML sudah mencapai versi terbaru yaitu HTML5.
HTML5 ini memiliki pembaharuan fitur-fitur dari HTML lama. Fitur baru selalu
update dan ditambahkan ke HTML5 di setiap rilisnya

Perbedaan antara HTML dan HTML5

Salah satu fitur Teknologi Informasi adalah pembaruan / perubahan berkala yang
tidak dapat dihindari. Tidak ada bahasa yang tidak ditingkatkan atau versi baru.
Juga di HTML, tidak ada pengecualian. HTML5 pertama kali didesain ulang untuk
menyempurnakan pengalaman Internet bagi pengembang dan pengguna.
Seperti disebutkan di atas, keuntungan terbesar dari HTML5 dibandingkan
pendahulunya adalah memiliki tingkat audio dan video yang lebih tinggi yang
tidak disertakan dalam versi HTML di atas. Perbedaan lainnya, versi HTML tidak
mendukung JavaScript untuk berjalan dalam browser sedangkan HTML5
mengizinkan sepenuhnya JavaScript dapat berjalan di mode background

Ada banyak elemen baru yang diperkenalkan dalam HTML. Beberapa yang
paling penting adalah: summary, time, aside, audio, command, data, datalist,
details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas,
keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track,
video.

7
Manfaat HTML5 bagi Developer

HTML5 ingin agar developer mendapatkan lebih banyak fleksibilitas dalam

mendesain website dan karena itu justru banyak perkembangan yang signifikan
dan layak dibanggakan:

1. Penanganan error yang persisten:

Sebagian besar browser web memiliki kemampuan untuk menafsirkan HTML /

format standar. Namun hingga beberapa dekade lalu, tidak ada solusi efektif
untuk masalah ini. Ini berarti bahwa pengembang browser dapat menjalankan tes
HTML di browser yang berbeda untuk meningkatkan koreksi kesalahan atau
penanangan error oleh reverse engineering.

Algoritma parsing yang lebih berkembang yang digunakan di HTML5 memiliki

banyak manfaat. Survey membuktikan bahwa sekitar 90% website rentan
terhadap kode yang salah. Dengan ini, penanganan error yang ada bisa
membantu developer dalam pengerjaan.

2. Semantik yang lebih baik:

Untuk meluaskan kode, pengembangan dilakukan juga untuk kontribusi semantik

mulai berbagai element yang ada. Section, article, nav dan header dengan
sejumlah element baru yang kini beralih ke element div dan ini menjadi trik
pembetulan error yang lebih mudah

3. Dukungan lebih lanjut untuk fitur web application:

Tujuan pokok HTML adalah membuat browser dapat berguna sebagai platform
aplikasi. Kebutuhan website kini semakin tinggi, oleh karena itu HTML5
memberikan developer agar dapat mengendalikan secara luas seperti mengatur
performa website. Sebelumnya, web developer harus memanipulasi beberapa
teknik karena banyak teknologi server-side dan ekstensi browser belum tersedia.
Namun saat ini, penggunaan teknik berbasis JavaScript ataupun Flash mulai

8
ditingggalkan karena sudah tersedia element yang mampu menangani semua itu
di HTML5.

4. Website responsive di mobile menjadi lebih mudah:

Saat ini, HTML5 memberikan support untuk perangkat bergerak dengan jauh
lebih sederhana, sehingga halaman web bisa berjalan baik dan menyesuaikan
dengan perangkat akses yang digunakan seperti hp, tablet maupun smartphone.

5. Elemen canvas:

Elemen canvas merupakan salah satu fitur HTML5 yang paling banyak
diperbincangkan oleh web developer. Dengan menggunakan elemen canvas,
developer bisa menggambar menggunakan warna dan bentuk yang berbeda,
dengan menggunakan script (misalnya JavaScript).

6. Elemen menu:

Elemen menu merupakan spesifikasi elemen yang interaktif yang jarang

digunakan atau diperbincangkan oleh web developer. Meski begitu, elemen
menu ini layak digunakan untuk meningkatkan interaksi pada web, mobile dan
desktop agar lebih sederhana.

7. Atribut data yang mudah dikustom:

Sangat memungkinkan, Jika Anda ingin menambahkan atribut khusus sebelum

HTML5, tetapi acapkali kali itu berisiko; misalnya, di HTML4, atribut custom
kadang-kadang berhenti me-render page menggunakan baik, dan ini sering kali
menjadi penyebab dokumen menjadi salah . Atribut data- * pada HTML5 menjadi
solusi buat hal ini. terdapat beberapa kegunaan atribut ini, tetapi tujuan utamanya
adalah menjadi penyimpanan berita tambahan perihal elemen yang tidak selaras.
sekarang, data kustom bisa dimasukkan, dan memberikan developer
kemungkinan buat menghasilkan laman web yg menarik dan efisien tanpa wajib
menggunakan pencarian data pada sisi server atau panggilan dengan Ajax

9
8. Cookies:

Sebelum ada HTML5, web developer harus memanfaatkan cookies jika ingin
menyimpan data variabel. HTML5 menyediakan fitur penting untuk mendukung
penyimpanan lokal (local storage). Object localStorage merupakan bagian global
window namespace dan bisa diakses darimanapun yang diinginkan saat
menggunakan script.

Manfaat HTML5

.HTML5 memengaruhi peralihan acuan developer maupun pemakai biasa.

Beberapa diantaranya adalah:

Browser di peranti mobile lebih jarang crash daripada native application. Hal ini
tidak terjadi sebelumnya, masa dimana HTML belum terlalu support perluasan
mobile web.

Ketergantungan akan website mobile sangat tinggi karena lebih dari 30 persen
pemakai ponsel tidak sanggup mendownload aplikasi. Sehingga jika saat ini
pemakai ponsel butuh jasa perusahaan tetapi tidak sanggup men-download
aplikasinya, mereka dapat login ke website perusahaan tersebut.

Pengurangan akan penerapan Adobe Flash memungkinkan penggunaan

JavaScript dan MPEG4 bagian dalam hubungannya pakai HTML5 memajukan
menjadi lebih baik. Terlebih lagi mulai tahun 2021 Adobe Flash menarik diri dari
peredaraan produknya di dunia, sehingga tidak memungkinkan lagi jika
menggunakan Adobe Flash dalam penyusunan HTML. Dukungan audio dan
video pada HTML5 secara penuh, artinya pemakai tidak harus lagi mendownload
plugin tambahan untuk menampilkan multimedia di website.

2.2 Membuat Website dengan cepat

Sudah siap membuat website? Kita mulai membuat website hanya dalam 1 menit!

1. Bukalah Notepad (All Programs > Accessories > Notepad)

10
 2. Ketikkan teks berikut :

3. Pilih menu File > Save As

4. Beri nama‚ “latihan1.html” (tanpa tanda kutip)
5. Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.

6. Sekarang klik dua kali file html kalian atau drag ke web browser kalian.

Contoh di atas merupakan cara sederhana untuk membuat file HTML, mudah
bukan?

11
2.3 Pengenalan Tag HTML
Seperti yang telah kita bahas sebelumnya, bahwa HTML merupakan bahasa
Markup, artinya bahasa HTML semata-mata digunakan untuk me-markup suatu
dokumen. Sebagai contoh kita analogikan membuat dokumen di Microsoft Word
atau tools Word Processing lainnya.

Ketika kita membuat dokumen word, biasanya akan mengerjakan formatting teks.
seperti menebalkan tulisan, memiringkan tulisan, memberi garis bawah teks,
Membuat Heading, Menulis list (Daftar) dan lain sebagainya. Pada HTML,
formatting ini dapat kita kutip sebagai Proses Markup dengan memakai tag HTML

Misalnya, untuk mem-format suatu teks menjadi miring kita tambahkan tag <em>
atau <i>. Edit file sebelumnya, menjadi seperti berikut :

Dan ketika dibuka kembali pada browser, anda dapat melihat kata pertama
menjadi miring.

<em> . . . </em> disebut dengan Tag HTML, yang berfungsi untuk memformat
dokumen HTML. Setiap tag pasti memiliki pasangan yaitu tag penutupnya.
Artinya hanya teks yang berada di dalam tag tersebut yang akan diberi format
miring. Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama
tagnya. Berikut ini adalah anatomi dari tag HTML :

Setiap tag HTML dapat menjadi “isi” dari tag HTML lainnya, untuk membuat suatu
hierarki dari dokumen HTML.

12
Setiap tag HTML dapat dimasukkan beragam atribut yang berguna untuk
menampilkan informasi-informasi tertentu, semisal atribut id dan class yang
berguna untuk me-nama-i suatu tag sebagai referensi CSS atau javascript.

Untuk menebalkan tulisan atau teks, kita bisa memakai tag <strong> atau <b>,
seperti contoh berikut:

2.4 Struktur file HTML

Setiap dokumen HTML memiliki aturan penulisan, terdapat tag yang harus kita
ketikkan dan sudah menjadi keharusan. Jika kita rubah latihan sebelumnya
menjadi dokumen HTML yang benar maka struktur kodenya menjadi sebagai
berikut:

Mudahkan?, baik, saya jelaskan tiap baris kode secara detail.

<!doctype html>

Merupakan Tag awal dari tiap dokumen HTML, tag ini berguna untuk memberi
informasi ke browser bahwa dokumen yang sedang dibuka merupakan dokumen
HTML. Tag ini harus dicantumkan pada tiap dokumen HTML yang kita buat.

<html> . . . </html>

13
Pembuka isi dokumen HTML dimulai dari <html>, semua kode HTML yang kita
buat harus ditulis di dalam tag ini, perhatikan juga bahwa setiap tag <html> wajib
memiliki tag penutup </html>.

<head> . . .</head>

Tag Head berfungsi untuk menampung beragam informasi terkait dokumen

HTML, untuk lebih jelasnya akan kita bahas pada bab selanjutnya. tulisan yang
terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web
browser.

<title> . . .</title>

Title merupakan salah satu contoh informasi yang terdapat di dalam tag Head.
Title akan menampilkan teks pada judul browser atau pada tab browser.

<body> . . .</body>

Nah, apa yang ingin kita tampilkan pada browser akan ditulis di dalam tag ini, tag
body merupakan tag pembuka dari badan dokumen HTML

Sebenarnya kita bisa juga menuliskan coding HTML seperti ini :

Browser akan menampilkan hasil yang sama, namun kita akan mengalami
kesulitan ketika memahami dan membaca script HTML diatas. Tidak akan
menjadi masalah jika Semisal dokumen HTML yang kita buat hanya 5 baris.
namun bagaimana jika lebih dari 50 baris? Pasti akan menyulitkan kita sendiri.

Untuk itu kita dapat memberikan indentasi, pada tiap isi (konten) dari suatu tag.
Misalnya :

14
Hal ini menunjukkan bahwa tag title berada di dalam tag head. Selain itu kita juga
dapat mengecek apakah suatu tag sudah ditutup atau belum.

15
 Memuat Gambar
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara menyisipkan
gambar dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa <img>

Setelah kita memahami dan mempraktikkan struktur dari sebuah file HTML.
Selanjutnya kita akan mempelajari materi tentang cara memuat/menampilkan
sebuah gambar dan memahami apa itu atribut HTML.

Untuk menampilkan gambar pada file HTML, kita harus menggunakan tag <img>.
Lalu dimanakah posisi gambar tersebut? Di dalam tag <img> kah?

3.1 Mengenal Atribut HTML

Setiap tag HTML boleh mempunyai satu atau lebih atribut, atribut ini berguna
untuk menampung informasi yang berkaitan dengan tag tersebut.

Pada tag <img> kita akan menggunakan atribut src untuk menunjukkan lokasi
gambar :

<img src>

Selanjutnya guna memasukkan nilai pada atribut, kita gunakan tanda operator
sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.

<img src=”gambar.jpg”>

Tag <img> termasuk tag spesial karena tidak memiliki tag penutup (Self Closed
Tag). Hal ini dikarenakan tag ini tidak memiliki konten seperti :

<title>Ini adalah Konten tag title</title>

16
Sebagai pengganti penutup, kita perlu menambahkan tanda slash (/) sebelum
kurung tutup:

<img src=”gambar.jpg”/>

Baiklah, mari kita coba untuk menampilkan gambar pada file HTML.

1. Buatlah file HTML baru dengan nama latihan2.html

2. Pilihlah sebuah gambar (semisal: logo.png) dan simpan satu folder

dengan file HTML anda.
3. Kemudian, Ketikkanlah coding HTML berikut :

4. Selanjutnya, bukalah browser, kita akan melihat gambar yang tampil pada
file HTML.

17
Setiap tag img, selain memiliki atribut src guna menunjukkan lokasi gambar, kita
juga perlu menyertakan atribut alt yang diperuntukkan sebagai teks alternatif
ketika gambar tidak berhasil tampil atau gambar hilang.

<img src=”logo.png” alt=”Ini adalah teks alternatif”/>

Dan atribut <img> lainnya adalah atribut width dan height, yang berguna untuk
memberikan ukuran lebar dan tinggi dari gambar tersebut. Meskipun ini tidak
dilakukan juga tidak masalah, karena gambar secara otomatis akan terpanggil
dengan ukuran sebenarnya, namun pengaturan ukuran lebar dan tinggi sangat
dianjurkan untuk mempercepat proses loading gambar.

<img src=”logo.png” alt=”Ini adalah teks alternatif” width=377

height=377 />

18
 Anda tidak perlu memberi tanda kutip pada nilai lebar dan
panjang. Nilai ini bisa anda dapatkan dengan mengklik
kanan gambar tersebut dan pilih menu properties. Pada
tab details akan anda temui ukuran gambar tersebut.

Dengan penambahan atribut alt, ketika gambar yang

dimaksud hilang/gagal termuat maka akan muncul
sebuah icon broken file, dan isi dari atribut alt akan
ditampilkan disana

3.2 Cara penulisan lokasi file

Jika kita menyimpan gambar tersebut pada sebuah folder seperti berikut.

Maka kita perlu menambahkan nama folder tersebut diikuti dengan tanda slash
(/) dan nama file gambar yang akan dimuat:

<img src=”images/logo.png” alt=”Ini adalah teks alternatif” />

Apabila dalam folder tersebut ada folder lagi, dan gambar yang ingin kita muat
ada di dalamnya maka penulisannya menjadi seperti dibawah ini :

<img src=”images/folder1/folder2/logo.png” alt=”Ini adalah teks

alternatif” />

19
 Membuat Link
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara mentautkan
halaman lain dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa link <a
href>

Kita akan sering menemukan link pada sebuah website. Link ini akan menjadikan
sebuah konten atau elemen HTML bisa di klik dan akan mengarahkan/membawa
kita ke halaman web lainnya. Ketika belum diberi style, lazimnya suatu link
ditampilkan berwarna biru dan bergaris bawah.

4.1 Link Standar

Link atau anchor (pengait) bisa dibuat dengan membubuhkan tag pada teks yang
akan kita jadikan link.

Klik <a>disini</a> untuk mendownload

Dengan penulisan tag <a> diatas, kita belum melihat perubahan pada teks “disini”
karena kita belum “manautkannya” ke halaman web lain. Untuk itu kita perlu
menggunakan attribut href untuk menunjukkan alamat web yang akan dituju
ketika link di klik.

Klik <a href=”http://www.alamatujuan.com”>disini</a> untuk

mendownload

Baiklah, mari kita coba berlatih membuat file HTML baru dan membuat link untuk
menautkannya ke file latihan-latihan sebelumnya.

1. Buatlah file baru dengan nama latihan3.html, kemudian simpan di folder

yang sama dengan latihan-latihan sebelumnya.

20
2. Ketikkan kode berikut pada file latihan3.html

3. Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah

link yang akan mengait ke file latihan3.html tepat sebelum penutup tag
body (</body>)

4. Simpanlah hasil coding anda, dan bukalah file latihan3.html pada browser.
Anda dapat mengklik linknya satu persatu.

21
 Ketika link “buka latihan 1” di klik, browser akan menampilkan file latihan1.html

Dan Klik link “Kembali ke halaman utama” untuk menampilkan latihan3.html

kembali.

Jika kita perhatikan, pada kode yang terdapat dalam latihan3.html, ada beberapa
tag yang belum dijelaskan, yaitu tag <h1> dan <br>.

Tag <br> berfungsi untuk memindahkan teks ke baris baru, sehingga teks yang
dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda
menghapus tag <br> ini, maka teks akan ditampikan satu baris.

22
Untuk membuat link yang mengacu ke halaman web lain, pastikan anda
menyertakan http:// pada atribut href link tersebut.

<a href=”http://www.google.com”> Buka Google </a>

Jika anda tidak menyertakan http:// maka link tersebut tidak akan bekerja
sebagaimana mestinya

23
Setiap link yang diklik akan ditampilkan di window/tab yang sama, bagaimana jika
anda ingin membuka link tersebut di tab/window baru? Tambahkan atribut
target=“_blank”.

<a href=”http://stekom.ac.id” target=”_blank”‛> ariona.net </a>

4.2 Link Email

Kita juga bisa menambahkan link email, link ini berisi alamat email yang ketika
diklik, aplikasi untuk mengirim email akan otomatis terbuka dan tujuan email
secara otomatis terisi dengan alamat yang telah ditentukan.

Untuk membuat link email, kita perlu menambahkan coding mailto:alamat@email

di dalam atribut href.

<a href=”mailto:[email protected]”>Kirim Email</a>

Selain tipe link-link di atas, masih banyak lagi tipe link lainnya, seperti link No.
Telp, Aplikasi dan lainnya

24
 Uraian:
Heading
Bab ini memberikan pengetahuan kepada mahasiswa tentang penggunaan
Heading dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa
heading <h>

Heading berfungsi untuk menampilkan penjudulan pada suatu dokumen HTML.

Seperti halnya skripsi atau buku yang memiliki bab dan subbab-subbab di
dalamnya. Untuk menampilkan penjudulan dalam HTML, kita gunakan tag <h1>
untuk judul utama dan untuk judul subbabnya kita bisa menggunakan tag <h2>
sampai dengan <h6>.

Setiap level judul mempunyai fontsize yang berbeda. Sebagai latihan, marilah
kita buat file HTML baru dengan nama latihan4.html lalu ketikkan kode HTML
berikut:

Coding diatas jika dijalankan akan menghasilkan tampilan seperti berikut:

25
Fungsi penjudulan diatas adalah agar suatu dokumen HTML menjadi lebih
terstruktur seperti sebuah dokumen resmi layaknya skripsi/paper yang
mewajibkan adanya perbedaan antara Bab utama dan sub-babnya.

26
 List
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara membuat
LIST dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa <ol>
dan <ul>

Sebuah daftar (LIST) bisa mempunyai penomoran angka atau abjad ataupun
hanya sebuah simbol. Dalam HTML, Ordered List merupakan daftar yang
menggunakan penomoran sedangkan Unorder list merupakan daftar yang
menggunakan simbol.

6.1 Ordered List

Ordered list atau Daftar berurutan bisa dibuat dengan menggunakan tag <ol>
(singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li>
(singkatan dari list item). Seperti contoh, amatilah kode HTML berikut :

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan

daftar item.

Pakailah Ordered list, ketika sebuah list/daftar memakai urutan yang benar,
seperti cara menghidupkan laptop dan lain sebagainya.

Apabila ditampilkan pada browser, maka akan menghasilkan tampilan seperti

berikut :

27
6.2 Unordered List
Berbeda dengan Order list, Unordered list akan menampilkan awalan simbol
pada setiap item. Symbol bisa berupa lingkaran atau persegi (nantinya bisa kita
rubah dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul>
dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

Mari kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka
kita bisa melihat hasil seperti berikut :

Lingkaran hitam akan menjadi default symbol tiap item.

28
6.3 Definition List
Data list mempunyai struktur berbeda. Biasanya data list ini dipakai untuk
membuat daftar istilah disertai definisinya seperti halnya dalam kamus.

Tag dt (definition term) digunakan untuk menampung istilah yang akan

didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya.
Berikut contoh pemakaian dari Definition List :

29
6.4 Nested List
Daftar/list bersarang (disebut nested list) merupakan sebuah daftar yang memiliki
daftar lagi di dalam itemnya. Seperti contoh pada latihan berikut ini.

Buatlah file baru dengan nama file latihan5.html kemudian ketikkan coding HTML
berikut

Jika hasilnya dijalankan, maka browser akan menampilkan seperti berikut:

30
Yang perlu kita pahami dan perhatikan adalah di mana kita harus menempatkan
tag <ol> atau <ul> jika kita ingin meletakkannya pada suatu item, yaitu sebelum
penutup tag list item (<li>).

31
 Division
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara membuat
grup dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa <div>

Kita bisa membuat suatu group dari tag-tag HTML yang kita buat dengan
menggunakan tag <div>, seperti pada contoh kasus berikut :

Setiap halaman web yang kita buka, jika kita perhatikan akan memiliki empat
bagian/group. Keempat bagian/group ini yaitu :

1. Header merupakan bagian kepala website yang berisi logo, nama, slogan,
menu website dan lainnya.
2. Content merupakan bagian yang berisi isi dari website itu sendiri, jika website
berupa weblog, maka contentnya berisi postingan terbaru atau informasi
lainnya.
3. Sidebar merupakan bagian yang berada di samping Content dan biasanya
berisi iklan, kategori artikel dan widget atau hiasan situs lainnya.
4. Footer merupakan bagian kaki dari website yang pada umumnya diisi
dengan tag website tersebut, misalnya copyright © 2021 by someone.

Dalam struktur HTML, kita bisa membagi bagian-bagian tersebut dengan

memakai tag <div> (division/bagian) dan untuk memberi nama setiap div kita
pakai atribut id atau class. Berikut ini contoh pemakaian tag div jika kita terapkan
pada bagian-bagian website yang telah kita sebutkan diatas:

32
Jika kita menjalankannya pada browser, kita tidak akan menjumpai apapun
karena tag div ini tidak akan menampilkan efek visual. Tag ini hanya digunakan
untuk menjadikan dokumen HTML lebih terstruktur dengan membagi-bagi
dokumen ke dalam bagian-bagian yang lebih spesifik.

7.1 ID dan Class

Untuk programmer pemula termasuk kita, ketika belajar HTML & CSS pasti akan
menanyakan hal yang sama. Dikarenakan atribut ID dan Class berfungsi untuk
memberi nama tag HTML. Nahh, apa perbedaan dari keduanya?

7.1.1 ID

Atribut ID dipakai untuk memberi nama elemen HTML yang mempunyai

karakteristik unik/berbeda. Tidak diperkenankan ada dua atau lebih elemen yang
mempunyai ID yang sama. Amatilah contoh dibawah ini :

33
Pemakaian atribut ID pada contoh di atas adalah SALAH, dikarenakan ada dua
ID yang bernama sama, yaitu “menu” pada tag <div> dan <ul>.

Amatilah contoh sebelumnya, bahwa kita memakai ID yang berbeda untuk tiap
div yaitu, header, content, sidebar dan footer karena semuanya mempunyai
struktur dan kegunaan yang berbeda dalam suatu dokumen HTML.

7.1.2 Class

Class dipakai untuk memberi nama elemen yang mempunyai

karakteristik/struktur sama dan bisa dipakai berulang kali dalam markup (Kode
HTML). Seperti contoh, Amatilah coding HTML berikut :

Pada Kode HTML di atas, kita memakai class “merah” pada suatu list item, karena
nantinya list item yang mempunyai class merah akan diwarnai background
merah.

Jika kita simpulkan, ketika kita mempunyai beberapa elemen dengan

karakter/format yang sama, pakailah Class sebagai penamaannya dan pakailah
ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.

7.2 Child, Parent dan Siblings

Child-parent dan sibling merupakan hubungan antar tag yang mempunyai
tag/konten didalamnya. Amatilah contoh berikut :

34
Dalam contoh coding HTML tersebut :

<div id=”wrapper”> disebut Parent, dan tag HTML yang ada di dalamnya
disebut dengan Child(<div id=”content”>).

Begitu juga dengan <div id=”content”> disebut parent untuk <div

id=”article”> dan <div id=”sidebar”>.

dan hubungan antara <div id=”article”> dan <div id=”sidebar”> disebut

dengan sibling, atau saudara

35
 Form
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara membuat
formulir dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa
<form>

Form ini biasa dipakai untuk mengumpulkan data dari pengunjung website.
Biasanya, dalam sebuah website terdapat satu atau lebih form, seperti form
pencarian, registrasi dan lain sebagainya. Sebuah form, bisa jadi mempunyai
beragam kontrol, seperti text input, Button, Combo box dan lainnya.

Sebuah form diawali dengan tag <form> Top of Form, dan setiap kontrol-kontrol
yang dibutuhkan ditempatkan di dalam tag ini.

FORM atau sering disebut sebagai FORMULIR sering kita jumpai seperti formulir
pendaftaran siswa baru, formulir pembuatan KTP dan lain sebagainya.

36
Control-control Form

Setiap control pada form bisa dibuat dengan mamakai tag <input>. Dan yang
membedakan tipe dari control tersebut berada pada atribut type (tipe kontrol).
Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :

8.1 Label
Label dipakai untuk menambahkan keterangan pada setiap input data. Jika kita
amati formulir pendaftaran situs yahoo misalnya, yang disebut dengan label
merupakan bagian yang ditandai seperti berikut ini:

37
<label for=”Name”> Keterangan Input </label>
Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi label.

8.2 Text
Text merupakan control input ini bisa diisi dengan teks yang mempunyai kata
yang pendek hanya satu baris.

Apabila text input yang akan ditampilkan ingin mempunyai nilai, maka kita perlu
tuliskan nilai tersebut di dalam atribut value.

Dengan begitu, ketika halaman dibuka, text input ini secara otomatis akan terisi
dengan nilai dari atribut value.

38
8.3 Text Area
Fungsinya seperti Input Text, Tetapi Textarea bisa diisi lebih dari satu baris, bisa
dipakai untuk isian yang panjang, seperti alamat, deskripsi, atau biodata.

Berbeda dengan kontrol lainnya yang menggunakan tag <input>, text area
memiliki tag sendiri yaitu <textarea>. Dan apa yang terdapat di dalam tag ini
adalah value dari kontrol tersebut.

8.4 Combo Box

Combo Box merupakan kontrol ketika diklik memiliki beberapa pilihan. Formatnya
sama seperti pembuatan Daftar/List namun dengan tag yang berbeda.

39
8.5 Submit/Button
Submit atau Button merupakan tombol yang bisa di klik. Pemakaian atribut value
pada kontrol ini bisa merubah text yang ada di dalamnya.

<input type=”submit” value=”kirimkan data” />

40
Mari kita coba memanipulasi kontrol-kontrol yang telah kita pelajari sebelumnya
menjadi satu form utuh. Bukalah file baru, simpan dengan nama file latihan6.html,
lalu ketikkan coding HTML berikut pada file latihan6.html

Apabila coding diatas dijalankan padad browser, hasilnya seperti berikut:

41
 Tabel
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara membuat
tabel dengan perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding HTML berupa
<table>

Tabel merupakan cell gabungan kolom dan baris, Untuk membuat tabel dalam
HTML, kita bisa menggunakan tag <table>.

Untuk membuat baris tabel, kita gunakan tag <tr> singkatan dari table row

Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag

<tr> (table data) yang digunakan di dalam tag <tr>.

Untuk menggabungkan kolom atau baris (merge-cell), kita perlu menambahkan

atribut colspan (untuk merge horizontally) atau rowspan (untuk merge vertically).

42
Jika coding diatas kita tampilkan dalam browser, maka tabel tersebut tidak akan
memiliki garis, untuk menampilkan garis pada tabel kita bisa memberi nilai atribut
border=1 pada tag <table> atau kita bisa menambahkan border lewat CSS
nantinya.

Sebagai latihan, kita tuliskan kode tabel di atas dan tambahkan beberapa data
lagi, lalu simpan dalam file latihan7.html

43
9.1 Struktur tabel yang dianjurkan
Agar format tabel sesuai dengan ketentuan, Kita dapat menggunakan tag
<thead> untuk baris yang menjadi Judul tabel, <tbody> untuk data/isi dari tabel
dan <tfooter> untuk kaki tabel (bisa diisi sama dengan <thead> atau lainnya).

9.2 Kesalahan dalam penggunaan <table>

Tag table dipakai untuk memformat data tabular/data yang membutuhkan format
tabel dalam menampilkannya, seperti contoh pemakaian tabel yang
menampilkan data nilai berikut :

No Nama Nilai Akhir Index

1 Ridho 95 A
2 Roma 85 A
3 Rame 75 B

44
Masih banyak yang memakai tabel untuk keperluan tampilan sebuah website,
seperti menggunakan tag table untuk membuat layout 2 kolom, 3 kolom, atau 4
kolom sebagaimana contoh berikut :

Pemakaian tag <table> untuk keperluan layout ini menyalahi aturan/fungsi dari
tag table tersebut.

45
 Studi Kasus 1 -Konversi
desain
Uraian: ke HTML
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara konversi
desain ke perintah HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan konversi desain ke HTML

Sebagai seorang web developer, Kita harus dapat mengkonversi suatu desain
web ke dalam bahasa HTML dan CSS. Proses konversi dari desain ke dalam
coding HTML ini dinamakan Pembuatan Markup, yang dilanjutkan dengan proses
Styling (Penambahan CSS).

Pada bab ini kita akan belajar membuat markup dari sebuah desain web yang
telah disiapkan. Kita buat desain web yang simple dulu..

46
10.1 Pesiapan
Terlebih dahulu, buatlah folder baru dengan nama “Latihan Markup” dan buatlah
file HTML baru dengan nama “latihan-markup.html”. Dalam folder tersebut buat
lagi satu buah folder dengan nama “images” untuk menyimpan seluruh gambar
yang diperlukan dalam file HTML yang kita buat. Lalu copy gambar ke dalam
folder images tersebut.

10.2 Wrapper
Kita mulai dari pembuatan sebuah div untuk menampung seluruh konten situs
yang akan dibuat. Kita akan memakai div dengan id wrapper. Kita akan mengatur
posisi div ini rata-tengah, jadi setiap browser di zoom-in atau di zoom-out, konten
situs tetap berada di tengah.

10.3 Header
Kita mulai dari pembuatan header, perhatikan gambar berikut :

Baiklah, pertama kita buat sebuah div dengan nama id header. Dalam gambar di
atas bisa kita amati terdapat gambar logo, lalu Menu (kita buat dengan unordered
list) dan terakhir sebuah text input untuk pencarian.

47
Semuanya telah kita pelajari pada bab-bab sebelumnya. Jadi, Markup untuk
bagian header adalah seperti berikut :

10.4 Content
Mari kita lanjutkan dengan membuat proses markup Content/isi Situs.

48
Jika kita perhatikan, disana terdapat tiga Artikel yang memiliki penampilan dan
struktur yang sama, untuk itu kita akan menggunakan penamaan dengan Class
pada div ini. Namun sebelumnya, kita tulis sebuah div untuk menampung artikel
yang akan kita buat dengan nama “daftar-artikel”.

Kita masuk ke detail setiap artikel. Di dalam artikel ini terdapat sebuah gambar,
judul artikel, tanggal, ringkasan dan sebuah link “watch this”. Sudah terbayang
bagaimana kode HTML nya?

Selanjutnya anda tinggal Copy div class artikel ini sebanyak tiga kali. Sehingga
menjadi seperti berikut :

49
50
10.5 Sidebar
Kita lanjutkan dengan pembuatan sidebar, perhatikan apa yang terdapat di dalam
sidebar.

Setiap item dalam sidebar memiliki judul.

Pertama terdapat deskripsi singkat
tentang situs, dan sebuah menu navigasi
berdasarkan kategori. Sama seperti menu
sebelumnya, kita buat dengan
menggunakan unordered list.

51
10.6 Footer
Terakhir, kita buat markup untuk bagian footer.

Bagian ini hanya memiliki text copyright, kita pasti bisa membuat markup dari
bagian footer ini :

52
53
Kita akan memberikan komentar di setiap penutup div agar kita tidak bingung
membedakan penutup div yang satu dengan yang lainnya,. Komentar ini tidak
akan ditampilkan pada browser.

Pemberian komentar bisa dilakukan dengan menambahkan <!-- dan ditutup

dengan--> contohnya :

Jika kita buka file HTML tersebut, maka yang akan kita lihat hasilnya seperti
berikut :

54
55
 Cascading Style Sheet
(CSS)
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara
mempercantik penampil HTML
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding CSS

11.1 Pengenalan CSS

CSS merupakan Cascading Style Sheet, berguna untuk mempercantik tampilan
HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti
menentukan posisi, merubah warna teks atau background dan lain sebagainya.

Perhatikan contoh kode CSS berikut :

Selector

Selector merupakan elemen/tag HTML yang akan diberi style. kita dapat
menuliskan langsung nama tag yang akan diberi style tanpa perlu menambahkan
tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh
tag h1 yang terdapat dalam file HTML. Jika tag HTML yang ingin diberi style
memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress
(#).

56
Apabila tag yang diberi style memiliki Class, maka penulisan selector dapat
dilakukan dengan tanda titik (.) diikuti dengan nama class.

Apabila kita hanya menggunakan satu selector, seperti contoh kode CSS di atas,
maka seluruh tag h1 yang terdapat dalam file HTML akan mempunyai style yang
sama. Nah, apabila kita ingin hanya memberi style pada tag h1 yang hanya
terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :

Kode tersebut akan memberikan perintah pada browser untuk mengatur style
pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan
child dari class artikel).

Kita juga bisa memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya
ketika kita memiliki dua atau lebih tag dengan warna background yang sama, dari
pada menuliskan kode seperti ini :

Kita bisa menggabungkan selector dengan menambahkan tanda koma pada

nama tag yang ingin diberi style.

57
Property dan Value

Property merupakan sifat-sifat yang akan kita terapkan pada selector, seperti
warna text, warna background, jarak antar elemen, garis pinggir dan lain
sebagainya,

Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ).
Setiap property diakhiri dengan titik koma (;), jika kita tidak mengakhirinya maka
browser tidak akan mengetahui maksud dari property tersebut.

Property-property pada CSS sangat mudah dimengerti karena lebih mirip bahasa
kita sehari-hari. Misalnya property color untuk merubah warna text kita gunakan,
property background-color untuk merubah warna background kita gunakan,
property font-size untuk merubah ukuran huruf kita gunakan.

Sebenarnya kode CSS ini sangat mudah difahami, karena kata-kata yang
digunakan sudah tidak asing lagi, amati contoh kode CSS sebelumnya, jika kita
ubah ke bahasa kita sehari-hari, kira-kira menjadi seperti berikut : “Hey Brow
(Browser) Cari tag h1 yang terdapat di dalam class artikel, jika ditemukan/ada,
ubah warnanya menjadi merah, warna background menjadi biru dan ukuran huruf
menjadi 20 pixel.” Cukup perkenalan dengan CSS-nya, lalu yang menjadi
pertanyaan besar anda saat ini adalah : “Dimana saya mengetikkan kode
tersebut?”

58
11.2 Penulisan CSS
Penulisan kode CSS ada 3 cara , yaitu inline, internal dan external. Ketiganya
dapat kita lakukan sesuai dengan kebutuhan. Berikut ini contoh pemakaian dari
metode-metode tersebut:

Inline

Penulisan kode CSS dengan metode inline ini dapat kita lakukan langsung pada
tag yang ingin diberi style dengan memakai atribut style.

Dengan metode ini, Kita tidak perlu menuliskan selector karena kita akan
menuliskan CSS langsung pada tag yang ingin diberi style.

Sebenarnya cara ini tidak dianjurkan, karena kita akan mencampurkan antara
“Format” dan “Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan
perubahan pada CSS.

Internal

Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.

Metode kedua ini dianjurkan untuk melakukan uji style, atau ketika kita hanya
memiliki satu halaman web.

59
External

Metode External ini membuat file CSS dan dipanggil di dalam tag head. File CSS
memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.

Pemanggilan file CSS dilakukan dengan menggunakan tag link:

Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu
sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat.
Pemanggilannya sama dengan pemanggilan gambar atau link.

60
 Box-Model
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang cara membuat box
model
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding class box

12.1 Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML.
Misalnya jarak antar <div> dan tag-tag HTML lainnya.

Sebagai contoh, buatlah file HTML baru dengan nama latihan8.html, lalu
tambahkan kode berikut:

Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :

Berikut adalah tampilan yang akan kita peroleh :

61
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita
menambahkan margin bawah (margin-bottom) sebesar 50px.

Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat
menghapus property margin-bottom dan perhatikan perbedaannya.

12.2 Padding
Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML dalam
contoh sebelumnya jarak antar <div>, namun coba perhatikan antara text (Box
ke x) dengan garis pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box
tersebut.

Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen
dengan elemen tersebut.

Sebagai contoh tambahkan kode CSS berikut, pada class box yang kita buat
sebelumnya:

62
Dan sekarang, anda dapat melihat jarak antara text yang berada di dalam box.

Perlu diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box
juga akan berubah.

Misalnya kita menentukan ukuran lebar dari .box sebesar 100px. Ketika kita
menambahkan padding-left sebesar 20px, maka total lebar dari .box tersebut
menjadi 120px.

Jadi jika anda ingin ukuran .box tetap 100px, kita harus menghitung ulang width
dari box tersebut. Misalnya kita ubah menjadi 80px. Dengan begitu, 80px + 20px
menjadi 100px.

12.3 CSS-Shorthand
Pada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat
memiliki lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin-top,
margin-right, margin-bottom, dan margin-left.

63
Daripada menuliskan seluruh property tersebut, kita bisa menggunakan CSS-
Shorthand yaitu menggabungkan seluruh value (top, right, bottom, dan left) ke
dalam satu property.

Sebagai contoh, kita akan menggunakan CSS-shorthand untuk Property margin

menjadi seperti berikut :

Masing-masing dari nilai tersebut adalah :

bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini memiliki urutan
searah jarum jam dan dimulai dari margin-top.

Kita juga bisa bermain-main dengan property margin ini, perhatikan dengan
seksama contoh berikut:

• Ketika kita memberikan satu nilai pada property margin, ini artinya kita
memberikan nilai tersebut pada seluruh sisi.

Dengan penulisan seperti ini, maka nilai dari margin-top, right, bottom dan
left adalah 20px;

64
 • Ketika kita memberikan dua nilai pada property margin, berarti nilai
selanjutnya mengikuti nilai sebelumnya. Contohnya seperti ini :

Pada contoh di atas berarti kita memberikan nilai margin-top dan right
bukan?, nah nilai dari margin-bottom akan disamakan dengan nilai
margin-top dan margin-left sama dengan margin-right

• Dan ketika kita menuliskan tiga nilai, maka nilai yang tidak diisi akan
mengikuti nilai yang diisi, sama halnya ketika kita memberi 2 nilai.

Pada contoh di atas, kita memberikan nilai untuk top, right dan bottom.
Sedangkan untuk left akan disamakan dengan right.

Penggunaan nilai seperti ini juga berlaku pada padding, dan property-property
sejenis lainnya

12.4 Border
Property border digunakan untuk memberikan garis pinggir pada elemen,
setidaknya ada tiga property yang harus anda set, yaitu color, style dan width.

namun anda juga dapat menggunakan CSS shorthand sehingga menjadi seperti
berikut :

65
jadi jika kita ubah contoh kode di atas menjadi CSS-shorthand, kodenya menjadi
seperti berikut :

Cobalah tambahkan kode tersebut pada latihan sebelumnya dan yang akan anda
dapatkan adalah seperti berikut :

Sama halnya dengan Padding, penambahan property border juga akan merubah
ukuran dari .box.

Jadi, seperti yang saya jelaskan sebelumnya. Ketika anda ingin membuat ukuran
lebar .box tetap 100px, maka anda harus menghitung ulang width dari .box
tersebut.

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya
jika kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena
5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran .box tersebut.
Sehingga ukuran .box berubah kembali menjadi 110px.

66
Untuk itu kita kurangi width dari .box tersebut menjadi 70px sehingga : 70px
(width) + 20px (padding) + 10px (border) = 100px.

Dalam dunia CSS, kasus seperti ini disebut dengan box-model. Terdapat dua
property yang mempengaruhi ukuran dari sebuah box yaitu padding dan border.
Perhatikan skema box model berikut untuk contoh kasus di atas :

67
 Javascript
Uraian:
Bab ini memberikan pengetahuan kepada mahasiswa tentang penggunaan
javascript
Sasaran:
Mahasiswa mampu memahami dan mempraktikkan coding Javascript

13.1 Pengenalan Javascript

Javascript merupakan bahasa pemrograman web yang berjalan disisi
Client/Browser. Javascript biasa digunakan untuk memanipulasi element-
element HTML dan menambahkan Style secara otomatis atau lebih
sederhananya membuat dokumen HTML menjadi lebih Interaktif.

Untuk menambahkan Script javascript pada dokumen HTML, kita dapat

menggunakan tag script dan diletakkan di dalam head atau di area manapun di
dalam tag body.

kita akan membuat contoh sederhana dari javascript ini, tambahkan script berikut
pada latihan sebelumnya atau anda dapat membuat file HTML baru dengan nama
file latihan14.html.

68
Script tersebut akan menampilkan MessageBox dengan teks “Hello I am
Javascript” ketika file HTML dibuka.

Berikut contoh lain dari penggunaan Javascript yang bisa anda lihat dalam file
latihan15.html:

69
Penjelasan Script :

Pertama, kita buat sebuah variabel nama. Kemudian kita meminta Javascript
untuk menanyakan nama pengunjung lalu menyimpannya di dalam variabel
nama.

Selanjutnya, Kita memilih, apakah variabel nama terisi (pengunjung mengetikkan

nama), maka akan ditampilkan Message Box dengan teks “Apa kabar (Nama
yang dimasukkan)!, Senang berkenalan dengan Anda”.

70
Jika pengunjung tidak memasukkan nama (langsung mengklik ok atau cancel)
maka akan ditampilkan message box “Hhmm sepertinya anda tidak mau
berkenalan dengan saya.”.

Script tersebut adalah contoh sederhana dari penggunaan Javascript, Anda

dapat mempelajarinya secara lanjut di http://www.w3schools.com/js/.

71
13.2 jQuery
jQuery, adalah library atau sekumpulan kode javascript siap pakai untuk
memanipulasi elemen HTML dengan mudah dan cepat. Kita bisa mendownload
jQuery di situs resminya http://www.jquery.com.

Untuk menggunakan jQuery, kita diharuskan menyertakan jQuery dengan

menggunakan tag Script.

Berikut ini adalah contoh sederhana penggunaan jQuery untuk memanipulasi

HTML, tambahkan script berikut pada file latihan anda.

Penjelasan Script :

Block kode ini memastikan script dijalankan setelah file HTML selesai dimuat.

Script tersebut akan merubah warna body dengan menambahkan atribut style
yang memiliki nilai “background-color:red”.

72
13.3 jQuery Plugin
jQuery Plugin merupakan plugin/suplemen untuk menambah fungsionalitas dari
jQuery. Plugin ini biasanya dibuat untuk memudahkan pengguna dalam membuat
suatu aplikasi. Salah satunya adalah membuat Slider, Slideshow dan lain
sebagainya.

Kita tinggal memanggil library plugin jquery tersebut seperti anda memanggil file
javascript, selanjutnya tinggal memanggil fungsi yang disediakan oleh library
tersebut.

Sebagai contoh, ada sebuah plugin jQuery Slider dan kita akan menerapkannya
pada elemen HTML yang memiliki id slider, Plugin tersebut menyediakan fungsi
“slider()” untuk membuat markup HTML kita menjadi sebuah slider. jadi anda
tinggal mengetikkan script berikut :

Kita dapat mencari plugin-plugin jQuery yang anda butuhkan di internet atau anda
dapat mencari sebagian plugin jquery di
http://www.jquery4u.net/category/plugins/

73
74