BAB 1

INSTALASI WEB SERVER

PRAKTIKUM
A. Install Xampp Web Server
1. Dobel klik file XAMPP yang baru saja Anda download, nanti selanjutnya akan muncul
jendela “installer language” seperti di bawah ini:

2. Selanjutnya pilih bahasa. Pilih yang Bahasa Inggris (English). Klik OK.
3. Kadang pada proses ini muncul pesan error. Jika ada, abaikan saja dan lanjutkan dengan
klik OK dan YES.

4. Berikutnya akan muncul jendela yang isinya meminta Anda menutup semua aplikasi
yang sedang berjalan. Jika semua aplikasi sudah ditutup, maka klik tombol Next.
5. Selanjutnya Anda akan diminta untuk memilih aplikasi yang mau diinstal. Centang saja
semua pilihan dan klik tombol Next.

6. Kemudian Anda akan diminta untuk menentukan lokasi folder penyimpanan file-file dan
folder XAMPP. Secara default akan diarahkan ke lokasi c:\xampp. Namun jika Anda
ingin menyimpannya di folder lain bisa klik browse dan tentukan secara manual folder
yang ingin digunakan. Jika sudah selesai, lanjutkan dan klik tombol Install.
7. Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah muncul jendela seperti
di bawah ini, klik tombol Finish untuk menyelesaikannya.

8. Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini yang menanyakan
Anda apakah mau langsung menjalankan aplikasi XAMPP atau tidak. Jika ya, maka klik
YES.
 B. Cara Menjalankan Xampp Web Server
1) Bukalah aplikasi XAMPP, bisa melalui Start Menu atau Desktop, dan klik icon XAMPP. Atau, jika
Anda membukanya begitu proses instalasi selesai maka klik Yes seperti yang terlihat pada gambar di
atas.
2) Setelah terbuka, silahkan klik tombol Start pada kolom Action sehingga tombol tersebut berubah
menjadi Stop. Dengan mengklik tombol tersebut, artinya itulah aplikasi yang dijalankan. Biasanya
jika saya menggunakan XAMPP, yang saya start hanyalah aplikasi Apache dan MySQL, karena saya
tidak memerlukan aplikasi seperti Filezilla, dan lain-lain.
3)
4) Sekarang bukalah browser kesukaan Anda, dan coba ketikkan http://localhost/xampp di address bar.
Jika muncul tampilan seperti gambar di bawah ini, instalasi telah berhasil.

Selamat, akhirnya Anda berhasil menginstal aplikasi XAMPP. Sekarang komputer Anda
sudah berfungsi seperti server dan bisa menjalankan aplikasi-aplikasi berbasis web.

C. Menyimpan file web aplikasi

Simpan file projek php atau html yang akan di buat kedalam folder “htdocs” di dalam
folder xampp di drive C (sesuai lokasi instalasi xampp).

Kemudian jangan lupa menyalakan apache di xampp controller.

 BAB 2
HTML dan CSS Dasar

TEORI DAN PRAKTIKUM

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web. Sekarang kita akan
langsung masuk dan mencoba membuat dokumen HTML sederhana, agar konsep-konsep yang telah
dijelaskan sebelumnya menjadi lebih jelas.
Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan
antara HTML dan CSS:
 HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan
makna semantik.
 CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda lstinline{p} pada HTML.
Memberikan penanda lstinline{p} pada konten dalam HTML berarti menandakan konten tersebut berada
di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran teks, warna teks, spasi,
dan berbagai gaya tampilan dari paragraf tersebut.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal yang
membuat dokumen HTML menjadi, emph{well}, dokumen HTML.

Elemen, Tag, dan Atribut

Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis
HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.

Elemen
Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk
struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah
dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML
misalnya a, h1, div, span, em, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke halaman
lain:

<a>
Tag
Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai,
dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama
elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis
miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Atribut
Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen
memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan
oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen
tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk
menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan
berguna untuk elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat
diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class”
untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen tersebut
(href):

<ahref=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk
memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference).
Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari
sebuah elemen dilakukan.

Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang harus
dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:

<!DOCTYPE html>
<htmllang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.

Elemen DOCTYPE
Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan
oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah
HTML5.

Elemen HTML
Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML
merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.

Elemen head
Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang
berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal.
Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil
tampilan browser.

Elemen title
Memberikan judul dokumen.

Elemen body
Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada
pengguna.
Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode berikut:
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Pengenalan HTML</title>
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>
<p>
Paragraf kedua.
</p>
</body>
</html>

Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File ->
Open... pada browser).
Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan
Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan dari
kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil
olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa
elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh
browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan elemen p kedua,
sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat dua paragraf,
dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada
bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser
yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal ini
dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus
ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi jarak yang lebar antara
elemen h1 dengan elemen-elemen lainnya).

Dasar CSS
Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar
yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga
istilah tersebut akan dilakukan pada bagian selanjutnya.

Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif
untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML
dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector,
yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada
dokumen HTML:

p{
....
}

Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan seluruh
kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada
dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat
memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya
dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab.

Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang
dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p{
color: ...;
font-size: ...;
}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”). Kegunaan dari
kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan
warna pada elemen p, dan font-size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang
dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan
pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang
relevan. Daftar properti sendiri dapat dibaca di.

Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-
beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus
memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa
digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita
dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut
memberikan contoh value dari properti yang ada pada kode sebelumnya:

p{
color: #FFFF00;
font-size: 50px;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS
adalah seperti yang ditampilkan pada gambar berikut:

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan
memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.
Penyingkatan Nilai dari Property
Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang
diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

/*
Bentuk Panjang
*/
p{
margin-top : 10px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 20px;
}

/*
Bentuk Singkat (1)
*/
p{
margin: 10px 20px;
}
/*
Bentuk Singkat (2)
*/
p{
margin: 10px;
}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu,
sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property
margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan
left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini.
Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding,
border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan
baca dokumentasi property CSS yang bersangkutan.

Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain
yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan
referensi CSS, yaitu:

Referensi ke File Eksternal

Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS
seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.

Penulisan CSS pada Elemen Head

CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada
bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya
elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain.
Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus
dituliskan ulang pada dokumen lain juga.

CSS di dalam Atribut style pada Elemen

 Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen)
merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori”
kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan
desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara
dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan
setelah HTML selesai dibaca oleh browser).

Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah
dokumen HTML:

<!DOCTYPE html>
<htmllang="en">
<head>
<title>Pengenalan HTML</title>
<!-- Referensi pada Elemen Head -->
<style type="text/css">
h1{
color:red;
}
</style>

<!-- Referensi pada file eksternal -->

<linkrel="stylesheet"href="style.css">
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>

<!-- CSS langsung pada atribut style -->

<pstyle="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya
kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu.
Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru
dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan
file style.css dengan kode berikut:

p{
font-size: 50px;
}

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus berada di
dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika misalnya kita ingin
menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file.
Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan style/style.css pada
atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan lihat hasilnya,
seperti pada gambar berikut:

Hasil Eksekusi referensi-css.html

Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi kode.
Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak memiliki
CSS:

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada
gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen h1 berubah
menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks yang
sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak
tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang terpisah tersebut
berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal.
Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan.
Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna
juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali
browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file
yang sama).
 BAB 3
LAYOUT HALAMAN WEB

TEORI DAN PRAKTIKUM

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam
sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout,
yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh
akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya
ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan
CSS.
Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

Elemen-elemen Layout pada Dokumen Web :

Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya
elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun
nama halaman yang sedang ditampilkan.

Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain
seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan
konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada
pada bagian ini.

Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi
pengunaan, sitemap, ataupun link ke website lain.

Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar Elemen-elemen
Layout pada Dokumen Webdi atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus
mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar,
kita tidak akan dapat membuat layout yang bagus.
3.1 Praktikum
Untuk membuat layout seperti pada gambar di atas, kita dapat menggunakan kode HTML dan CSS
berikut:
Eksekusi kode, dan kita akan dapat melihat hasil eksekusi sebagai berikut:
3.2 TUGAS
A.Web Profile 2 Kolom
1. Buat File baru dengan nama web3_2kolom.php dengan ekstensi .php
2. Berkiblat pada Code Praktikum di ataspada Navigation web yang sudah kalian buat, rubah posisi
navigation ke atas header sehingga navigation dibawah Header hilang pindah keatasnya.
3. Pada Sidebar web yang sudah kalian buat, rubah posisi sidebar ke sebelah kanan web sehingga
sidebarsebelah kiri hilang pindah sebelah kanan web.
4. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada Laporan.

B. Web Profile 3 Kolom

1. Buat File baru dengan nama web3_3kolom.php dengan ekstensi .php
2. Buat dua Navigation, dengan posisi di atas dan di bawah Header.
3. Buat dua Sidebar, dengan posisi di kanan dan di kiriContent web.
4. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada Laporan.
 BAB IV
MENGELOLA IMAGE

TEORI DAN PRAKTIKUM

Untuk menambahkan gambar pada HTML, kita dapat menggunakan elemen img.
Elemen img sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag
penutup. Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua cara, yaitu
tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut. Berikut
adalah contoh penggunaan tag img :

Atribut alt, yang bersifat opsional, berguna untuk memberikan keterangan gambar secara semantik.
Keterangan ini juga akan ditampilkan ketika mouse diletakkan di atas gambar, dan ketika gambar
tidak dapat ditemukan.
Layaknya elemen-elemen lain pada HTML, kita dapat mengubah tampilan elemen img dengan
menggunakan CSS.

Mengubah Ukuran Gambar

Perubahan ukuran gambar dapat dilakukan dengan menggunakan properti width dan height,
seperti pada elemen-elemen lainnya. Yang perlu diperhatikan dalam perubahan ukuran ialah
bagaimana sebuah gambar dapat menyesuaikan ukuran yang tepat ketika kita hanya memberikan
salah satu dimensi. Misalnya, sebuah gambar dengan ukuran asli 800x600 akan secara otomatis
berubah menjadi 1024x768 meskipun kita hanya mengisikan nilai width saja. Browser secara
otomatis akan menghitung rasio panjang dan lebar gambar lalu menyesuaikan ukuran gambar dengan
nilai yang kita berikan.
Tetapi perlu diingat bahwa pengisian nilai width dan height dengan rasio panjang-lebar yang
tidak tepat tentunya akan menyebabkan gambar menjadi “tertarik”. Untuk lebih jelasnya, coba
jalankan kode berikut pada gambar yang diberi nama gambar.jpg:
kemudian jalankan dan lihat hasilnya.
Hal lain yang perlu dicatat yaitu bahwa meskipun perubahan ukuran gambar dapat dilakukan
secara otomatis oleh browser, sebaiknya perubahan dilakukan dengan sangat hati-hati. Ketika
memperkecil sebuah gambar yang berukuran 1024x768 menjadi 320x240 misalnya, meskipun
pengguna melihat gambar yang kecil, gambar yang harus diunduh oleh browser tetaplah
berukuran 1024x768. Resolusi gambar tentunya mempengaruhi ukuran, sehingga pengguna akan
mengambil gambar yang tidak diperlukan, dan menyia-nyiakan bandwidth. Jadi, selalu pastikan
gambar yang diberikan ke pengguna merupakan gambar yang optimal. Perubahan ukuran gambar
umumnya dilakukan untuk memastikan konten yang diisikan oleh pengguna tidak terlalu besar atau
kecil, sehingga mengganggu keseluruhan alur dokumen.

Perubahan Posisi Gambar

Seperti yang dapat dilihat pada kode sebelumnya, elemen img merupakan inline level element.
Menambahkan gambar pada tengah-tengah teks akan menyebabkan gambar tersebut diselipkan
ditengah-tengah teks, mengacaukan alur teks, seperti pada kode berikut:
untuk mendapatkan hasil sebagai berikut:

Penampilan gambar seperti ini tentunya sangat tidak optimal. Untuk menanggulanginya, kita
dapat membuat gambar menjadi block level element:

ataupun dengan memberikan properti float kepada gambar, seperti berikut:

1. Elemen Header Web
Dalam sebuah website profile, fungsi kepala website (header) adalah untuk meletakkan identitas
dari sebuah website, bisa berupa judul web beserta diskripsi dan logo lembaga atau pribadi yang
mewakili pribadi si empunya website tersebut.
Pada pembuatan header website profile umumnya berupa banner identitas web dengan format
gambar yang dipasang pada bagian header website. Untuk itu dalam desain web dibutuhkan tag
image yang berfungsi untuk menampilkan gambar serta mengaturnya. Untuk mempelajari tag image
html silahkan ikuti praktikum dibawah ini :

LATIHAN 1 :
1. Pada Web anda, tambahkan image header yang sudah anda buat, dengan syarat bahwa image
tersebut sudah di desain dengan sebaik mungkin dan sudah mengandung identitas dan logo
atau gambar yang mewakili kepilikan web tersebut!
2. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada
Laporan.
2. Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain
seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten,
atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

LATIHAN 2 :
1. Pada Web anda, tambahkan image untuk banner dari hasil desain anda. Image banner
tambahkan pada lokasi Sidebar anda!
2. Buat Image banner pda sidebar web sebanyak 2 buah!
3. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada
Laporan.

3. Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti
lisensi pengunaan, sitemap, ataupun link ke website lain.

LATIHAN 3 :
1. Pada Footer Web anda, tambahkan image logo dari hasil desain anda. Image logo letakkan
pada keterangan copyright!
2. Sertakan keterangan copyright pada footer dengan posisi center.
3. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada
Laporan.
 BAB V
NAVIGASI DAN LINK MENU

TEORI DAN PRAKTIKUM

Mayoritasi dari website yang kita kembangkan merupakan sebuah website yang terdiri dari
banyak halaman, dan seringkali jumlah persis dari halaman web yang akan kita bangun tidak
diketahui (karena bersifat dinamis). Untuk memppermudah pengguna dalam melakukan navigasi
pada website kita tentunya kita harus menyediakan menu yang mudah diakses dan dilihat oleh
pengguna.
Karena hal tersebut, elemen navigasi merupakan salah satu elemen yang paling penting dan
hampir selalu ditemukan dalam sebuah website. Bagian ini akan menjelaskan cara pembuatan
elemen navigasi dengan menggunakan list, serta elemen navigasi yang memberikan makna semantik
dalam dokumen web.
Elemen Navigasi
HTML menyediakan sebuah elemen untuk menandakan bagian navigasi dari sebuah dokumen,
yaitu elemen nav.
Seperti yang dapat dilihat, elemen nav digunakan hanya untuk blok navigasi utama, seperti
menu keseluruhan halaman. Menu-menu lain seperti daftar isi atau daftar halaman pada bagian kaki
website tidak perlu dimasukkan ke dalam sebuah nav, meskipun tentunya memasukkan elemen-
elemen tersebut ke dalam sebuah nav tidaka akn memberikan kerugian apapun.
Contoh pemakaian elemen nav ialah sebagai berikut:

<nav>
<ul id="main-menu">
...
</ul>
</nav>

Elemen nav tidak akan terlihat pada hasil eksekusi dikarenakan elemen ini hanya merupakan
penampung yang memiliki makna semantik, sama seperti header, footer, maupun article.
Menu Vertikal Menggunakan List
Sebuah menu dikatakan vertikal jika menu tersebut ditampilkan secara menurun ke bawah.
Menu vertikal sederhana tentunya sangat mudah dibuat dengan menggunakan list, karena sifat dasar
dari list yang memang sudah menurun ke bawah. Misalkan jika kita memiliki list sebagai berikut:
<ul id="simple">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

Kita dapat mengaplikasikan CSS untuk menggantikan warna latar belakang dari setiap li,
kemudian menghilangkan penanda daftar, memberikan lebar yang sama, dan berbagai pengukuran
lainnya sehingga didapatkan kotak penuh yang menyerupai menu, seperti berikut:

#simple {
margin: 0;
padding: 0;
width: 125px;
}

#simple li {
background: linear-gradient(-45deg, #0044a1, #005ddc);
border-bottom: 1px solid #FFF;
list-style: none;
padding: 0.5em;
text-align: center;
width: 100px;
}

sehingga kita akan mendapatkan tampilan:

Menu Vertikal, Hampir Jadi

 Tentunya dapat dilihat dengan jelas bahwa teks dari menu tersebut belum benar-benar selesai,
dan kita perlu menambahkan sedikit kode untuk mengubah teks di dalam menjadi terlihat, tidak
bergaris bawah, serta memenuhi keseluruhan blok. Kodenya adalah sebagai berikut:

#simple li:hover {
background: linear-gradient(-45deg, #006cff, #5ca1ff);
}

#simple li a {
color: white;
display: block;
text-decoration: none;
}

sehingga hasil akhir dari menu sederhana ini adalah:

Menu Vertikal (Menu “About” di-hover)

Perhatikan bahwa pada kode CSS di atas, kita menambahkan

properti display: block pada #simple li a. Hal ini dimaksudkan untuk memastikan pengguna dapat
melakukan klik pada bagian manapun dari menu untuk berpindah tempat. Coba hapus properti ini
untuk melihat efeknya!
Hal lain yang perlu diingat dalam pembuatan menu ialah bahwa kita harus memberitahukan
pengguna dengan mudah di mana ia berada sekarang. Pemberitahuan ini biasanya dilakukan dengan
melakukan sesuatu yang berbeda pada menu yang sedang aktif agar pengguna dapat melihat dengan
jelas keberadaan dirinya. Misalnya, kita dapat mengubah warna latar dan teks serta menebalkan teks
ketika pengguna sedang berada dalam satu halaman. Keberadaan pengguna dapat ditandai dengan
sebuah class baru, yang diberikan secara dinamis sesuai dengan halamannya.
Kode HTML untuk mendapatkan efek tersebut ialah:
<ul id="simple">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li class="active"><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

dan CSS yang harus ditambahkan:

#simple li.active {
background: #FFF;
}

#simple li.active a {
color: #0044a1;
font-weight: bold;
}

sehingga kita bisa mendapatkan hasil:

Menu Vertikal (Menu “Contact” Aktif) | Demo

Menu Horizontal Menggunakan List
Sebuah menu tentunya tidak selalu berbentuk vertikal. Seringkali kita menemukan menu yang
bersifat horizontal pada sebuah website, yang hampir selalu menjadi metode navigasi untuk fitur-
fitur utama dari sebuah website. Bagaimanakah kita membuat menu horizontal menggunakan list?
Menu Horizontal dengan Display:Inline
Cara yang paling sederhana untuk membuat menu horizontal dengan menggunakan list ialah
mengubah properti display dari elemen li menjadi bernilai inline. Dengan mengubah properti ini,
elemen li yang awalnya merupakan block level element akan berubah menjadi inline level element,
dan dapat saling tersusun secara horizontal.
 Begitu mengubah nilai properti display menjadi inline, penanda daftar akan langsung hilang,
dan setiap elemen dalam daftar akan saling bergabung. Idealnya, kita harus memberikan jarak secara
manual menggunakan paddingataupun margin.
Kode HTML di bawah:

<ul id="inline">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

dipadukan dengan CSS berikut:

#inline {
margin: 15px auto;
padding: 0;
}

#inline li {
display: inline;
margin-left: 15px;
margin-right: 15px;
}

akan menghasilkan daftar seperti berikut:

Menu Horizontal Menggunakan Display:Inline

Sayangnya, pembuatan menu seperti ini memiliki sedikit kekurangna, yaitu kita tidak dapat
sepenuhnya mengontrol margin dan padding dari setiap elemen. Secara standar, browser akan
menambahkan satu spasi diantara setiap elemen li. Untuk menanganinya, kita dapat
menggunakan float.
Menu Horizontal dengan Float
Seperti namanya, menu horizontal dengan float dibuat dengan menggunakan properti float.
Pengunaan float akan memungkinkan kita memiliki kontrol penuh akan penampilan keseluruhan dari
sebuah elemen.
Kode HTML berikut:

<ul id="float">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

dibuat menjadi sebuah menu horizontal dengan menggunakan kode CSS berikut:

#float {
margin: 15px auto;
padding: 0;
}

#float li {
float: left;
list-style: none;
margin-left: 15px;
margin-right: 15px;
}

Hasil eksekusi:

Menu Horizontal Menggunakan Float | Demo

dan tentunya kita dapat memodifikasi sedikit kode CSS lagi untuk membuat menu menjadi lebih
indah:

#float li {
background: linear-gradient(#687587, #404853);
float: left;
 list-style: none;
padding-bottom: 10px;
padding-top: 10px;
}

#float li a {
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: white;
font-variant: small-caps;
text-decoration: none;
padding: 10px 15px;
}

#float li a:hover {
background: #454d59;
color: #d0d2d5;
}

dengan hasil:

LATIHAN :
1. Pada Navigasi Web anda, tambahkan List Menu dan Link sesuai dengan konsep Web Desain
anda!
2. Buat List Menu dan Link minimal 5 buah!
3. Jalankan di web browser dan buat screenshoot dan kesimpulan dari percobaan anda pada
Laporan.
 BAB VI
CONTENT DAN PEMFORMATAN TEXT

TEORI DAN PRAKTIKUM

A. HEADING
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
html. html menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file heading.html
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Heading Level 1</h1><! Tulisan ini tidak memiliki pengaruh >
<h2>Heading Level 2</h2><! dan tidak akan muncul di browser>
<h3>Heading Level 3</h3><! Manfaatnya hanya sebagai keterangan saja>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
B. PARAGRAF
Untuk membuat paragraf digunakan tag <p> . Setelah tag <p> Anda bisa menulis isi
paragraf dan paragraph tersebut harus diakhiri dengan penutup </p> . Anda bisa mengatur posisi
paragraf dengan attribut align .
Atribut align diikuti dengan posisi yang diinginkan. left untuk rata kiri, center untuk
rata tengah dan right untuk rata kanan.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file paragraf.html
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p align="right"> PERHATIKAN! Paragraf ini rata kanan : If you can’t
find your answer through the forums, or you wish to contact me for
any other reason, the best place to write is books@sitepoint.com.
SitePoint has a well-manned email support system set up to track your
inquiries, and if the support staff are unable to answer your
question, they send it straight to me. Suggestions for improvement as
well as notices of any mistakes you may find are especially
welcome.</p>
<p align="center">
PERHATIKAN! Paragraf ini berada di tengah : Craig plays bass guitar
in Melbourne rock band Look Who&rsquo;s Toxic, 4 and indulges in all
the extracurricular activities you&rsquo;d expect of a computer
nerd/musician approaching 30 (other than role playing&mdash;somehow
he never got into that).</p>
<p align="left">PERHATIKAN! Paragraf ini rata kiri : All rights
reserved. No part of this book may be reproduced, stored in a
 retrieval system or transmitted in any form or by any means, without
the prior written permission of the publisher, except in the case of
brief quotations embedded in critical articles or reviews.</p>
</body>
</html>

C. BLOCKQUOTE
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Dengan perintah ini
browser akan menampilkan teks menjorok ke dalam (meng‐identasi teks) atau menampilkan teks
dalam bentuk huruf miring.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file blockquote.html
<html>
<head>
<title>blockquote</title>
</head>
<body>
 <h3>Sesuatu yang perlu dicoba</h3>
<blockquote>
Trademark Notice<br>
Rather than indicating every occurrence of a trademarked name as such, this book uses the
names only in an editorial fashion and to the benefit of the trademark owner with no intention
of infringement of the trademark.</blockquote>
</body>
</html>

D. PREFORMATTED TEXT
Preformatted Text (pre) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan
dalam dokumen html. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti
terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file performatted.html
<html>
<head>
<title>Preformatted Text</title>
</head>
<body>
<pre>All rights reserved. No part of this book may be reproduced,<br>
stored in a retrieval system or transmitted in any form or <br>by any
means, without the prior written permission of the<br> publisher,
except in the case of brief quotations<br> embedded in critical
articles or reviews.
</pre>
 </body>
</html>

E. BEGIN ROW
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <br> membuat baris baru
tanpa memberi baris kosong di bawahnya.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file beginrow.html
<html>
<head>
<title>Begin Row</title>
</head>
<body>
<p>Software-software yang dibutuhkan yaitu:
<br> Adobe Photoshop
<br> Adobe Dreamwaever
<br> Adobe Flash
</body>
</html>
F. UKURAN FONT
Untuk mengatur huruf dokumen html digunakan tag <font size>. Tag <font size> memiliki
beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file font_size.html
<html>
<head>
<title>Ukuran font</title>
</head>
<body>
<font size=1>Ukuran font 1</font><br>
<font size=2>Ukuran font 2</font><br>
<font size=3>Ukuran font 3</font><br>
<font size=4>Ukuran font 4</font><br>
<font size=5>Ukuran font 5</font><br>
<font size=6>Ukuran font 6</font><br>
<font size=7>Ukuran font 7</font>
</body>
</html>

G. JENIS FONT
 Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face harus diisi
dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file font_face.html
<html>
<head>
<title>Jenis Font</title>
</head>
<body>
<font size=5>
<font face ="Comic Sans MS">Comic Sans MS --- ABCdef123</font><P>
<font face ="Small Fonts">Small Fonts --- ABCdef123</font><P>
<font face ="Symbol">Symbol --- ABCdef123</font><P>
<font face ="WingDings">WingDings --- ABCdef123</font><P></font>
</body>
</html>

H. MANIPULASI TEKS
Untuk memberi efek, dekorasi atau pun manipulasi teks pada html diantaranya adalah
menebalkan, tulisan miring(italic), memberi coretan dan lain‐lainnya
Contoh :
Ketik dengan program Sublime Text dan simpan dengan nama file manipulasiteks.html
<html>
<head>
<title>Manipulasi Teks</title>
 </head>
<body>
<! PSYSICAL STYLE>
<B>Tebal</B><br><! untuk menebalkan teks >
<I>Miring</I><br><! untuk membuat teks terlihat miring>
<U>Garis Bawah</U><br><! untuk menggarisbawahi teks>
<S>Tercoret</S><br><! untuk memberikan coretan pada teks>
<STRIKE>Tercoret juga</STRIKE><br><! untuk memberi coretan pada teks >
<BLINK> Berkedip</BLINK><br><! untuk membuat teks berkedip >
<TT>Seperti mesin tik</TT><br><! untuk menampilkan teks dalam font
typewriter>
<BIG>Tulisan Besar</BIG><br><! untuk membesarkan teks >
<SMALL>Tulisan Kecil</SMALL><br><! untuk mengecilkan teks >
Teks <SUB>subcript</SUB><br><! untuk membuat teks subscript>
Teks <SUP>supercript</SUP><br><br><! untuk membuat teks superscript>
</body>
</html>

I. WARNA FONT
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi
nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red,
 Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green
Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk
Blue.
Contoh:
Ketiklah dengan program Sublime Text dan simpan dengan nama file warna_font.html
<html>
<head>
<title>Warna Font</title>
</head>
<body>
<font size=5>
<font color="red">Warna merah... </font><p>
<font color= "#FF0000" size="5">Yang ini warna merah </font><p>
<font color= "#00FF00" size="5">Kalo yang ini hijau </font><p>
</font>
</body>
</html>

LATIHAN :
1. Buka kembali code web yang anda bikin sebelumnya, duplikat file web yang sudah anda bikin
sebelummya dan simpan dengan nama file yang baru dengan format .php.
2. Pada layout Content, isikan Artikel yang sesuai dengan tema menu (Profil, Sejarah, Kontak dll.).
3. Atur Format penulisan sesuai dengan pembahasan pada bab ini, tentukan kepala judul artikel
(Heading), tentukan jenis huruf, ukuran huruf, warna, dan format huruf yang lain pada artikel.
4. Link kan halaman baru yang sudah dibuat dengan menu link yang sesuai.
5. Bikin minimal 3 halaman menu.
6. Setelah berhasil, silahkan tunjukkan pada Intruktur untuk mendapatkan koreksi dan masukan!
 BAB VII
FORM

TEORI DAN PRAKTIKUM

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form
untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman
web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan membahas cara
penggunakan tag form di dalam HTML.
Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya
hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan
bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabelMySQL. Untuk
pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHPdan JavaScript.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input,
textarea, select dan option.

A. Pengertian tag <form>

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan
diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan
seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan
untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan
dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get
(dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form
akanterlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method
postbiasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user.
Data hasil form tidak akan terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:
<form action="prosesdata.php" method="post">
...isi form...
</form>
 B. Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk,
mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya
dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima
input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang
berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai
tampilan awal dari text
 <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang
diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk
inputan yang sensitif seperti password.
 <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di
centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type
checkboxmemiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan
membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh
inputancheckbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu
diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa
memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
 <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya
diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol
submit berubah sesuai inputan nilai value.

C. Mengenal tag <textarea>

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak
baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20">
Text yang diisi dapat mencapai banyak baris
</textarea>
Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
 D. Mengenal tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari
nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah
berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai,
maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam
tampilan form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai awal.
Contoh penggunaanya adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga" selected>Pilihan 3</option>
</select>

E. Mengenal Atribut: Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web
server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari
atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai berikut:
<input type="text" name="username">
<input type="text" name="email">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing
akan dibedakan menurut atribut name.
Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat
sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML berikut, lalu save
sebagaiformulir.html
Contoh penggunaan tag form, ketiklah file html di bawah ini dan simpan dengan nama : form.html
<html>
<head>
<title>Formulir</title>
</head>
<body>
<form action="#" method="get">
<h3>Formulir Biodata</h3>
<table width="400" border="1" cellpadding="0" cellspacing="2"
bordercolor="#666666">
<tr>
<td width="100">Nama</td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="textarea"></textarea></td>
</tr>
<tr>
<td>Tempat</td>
<td><input type="text" name="textfield2"></td>
</tr>
<tr>
<td>Tanggal Lahir </td>
<td><select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select2">
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>
<select name="select3">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select></td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td><input name="radiobutton" type="radio" value="radiobutton">
Pria
<input name="radiobutton" type="radio" value="radiobutton">
Wanita</td>
</tr>
<tr>
<td>Hobi</td>
<td><input type="checkbox" name="checkbox" value="checkbox">
Olah raga </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" name="checkbox2" value="checkbox">
Baca Buku </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" name="checkbox3" value="checkbox">
Internetan</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit">
<input name="Reset" type="reset" id="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
LATIHAN
1. Pada Menu di Navigasi, tambahkan Link Menu “Registrasi”
2. Duplikat File Index.php dan simpan dengan nama daftar.php
3. Tambahkan Form Pendaftaran seperti pada Praktikum kedalam Layout Content.
4. Link kan Form file daftar.php ke dalam menu Registrasi.
5. Jalankan di Browser dan Buat Laporan
 BAB VIII
TABEL

TEORI DAN PRAKTIKUM

Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan
membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan
data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTMLini kita akan
membahas cara penggunaannya.
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu
tag <tabel>, tag <tr>,dan tag <td>:
 Tag <tabel> digunakan untuk memulai tabel
 Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
 Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML, ketik pada Sublime Text
Sintaks dibawah ini dan simpan dengan nama file : tabel_1baris.html
<html>
<head>
<title>Tabel 1 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0"><!mengawali
membuat tabel>
<tr><! mengawali membuat baris>
<td>1 baris </td> <! Membuat 1 baris dan 1 kolom>
</tr> <! Mengakhiri baris pertama>
</table> <! Mengakhiri membuat tabel>
</body>
</html>

Keterangan : Lebar tabel=200 ; jumlah baris =1 ; jumlah kolom=1

Simpan dengan nama file : tabel_2baris.html
<html>
<head>
<title>Tabel 2 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> baris ke 1 </td>
</tr>
<tr>
<td>baris ke 2 </td>
</tr>
</table>
</body>
</html>
Keterangan : Lebar “width” tabel=200 ; jumlah baris =2 ; jumlah kolom=1

PRAKTIKUM 8.1
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :
(nama_siswa)_Latihan03.html
Keterangan :
‐ Warna background : #66FFCC
‐ Cellpadding="2"
‐ Border=”1”
‐ Lebar tabel : 300

Untuk selanjutnya kita akan membuat dua kolom.

Simpan dengan nama file : tabel_2kolom.html
<html>
<head>
<title>Tabel 2 Kolom</title>
</head>
<body>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
</body>
</html>
Keterangan : Lebar tabel=300 ; jumlah baris =1 ; jumlah kolom=2

PRAKTIKUM 8.2

Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :
(nama_siswa)_Latihan04.html
Keterangan :
‐ Title : Latihan 04
‐ Warna background : #00CCFF
‐ Cellpadding="2"
‐ Border=”3”
‐ Lebar tabel : 800

Kita akan membuat 2 baris dan 2 kolom.

Ketik file html di bawah ini dan simpan dengan nama file : tabel_2baris_2kolom.html
<html>
<head>
<title>Tabel 2 Baris 2 Kolom</title>
</head>
<body>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> Kolom 1 , Baris 1 </td>
<td>Kolom 2, Baris 1 </td>
</tr>
<tr>
<td>Kolom 1 , Baris 2 </td>
<td>Kolom 2, Baris 2 </td>
</tr>
</table>
</body>
</html>

Keterangan : Lebar tabel=300 ; jumlah baris =2 ; jumlah kolom=2

Simpan dengan nama file :table.html

<html>
<head>
<title>Citra Utama - menyediakan perangkat komputer</title>
</head>
<body>
<h1 style="font:Arial, Helvetica, sans-serif; color:#003399">TOKO KOMPUTER
CITRA UTAMA</h1>
<h2 style="font:Georgia, 'Times New Roman', Times, serif;
color:#FF0000">DAFTAR HARGA BARANG </h2>
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>Nama Barang </th>
<th>Harga</th>
</tr>
<tr>
<td>Motherboard ASUS </td>
<td align="center">Rp. 700.000,- </td>
</tr>
<tr>
<td>VGA</td>
<td align="center">Rp. 500.000,- </td>
</tr>
<tr>
<td>Sound Card </td>
<td align="center">Rp. 200.000,- </td>
</tr>
<tr>
<td>Flashdisk 4GB</td>
<td align="center">Rp. 100.000,- </td>
</tr>
</table>
</body>
</html>

Colspan : menggabungkan beberapa kolom

<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td bgcolor="#0000FF">Biru</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru muda</td>
<td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
</html>

PRAKTIKUM 8.3
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :
(nama_siswa)_Latihan05.html
Keterangan :
‐ Title : Latihan 05
‐ Warna background : # 00FFCC
‐ Cellpadding="2"
‐ Border=”2”
‐ Lebar tabel : 600

Rowspan : menggabungkan beberapa baris

<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td align="center" bgcolor="#0000FF">Biru</td>
<td rowspan="4" align="center">warna-warna</td>
<td align="center" bgcolor="#00CCFF">Biru muda</td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
</html>

PRAKTIKUM 8.4
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :
(nama_siswa)_Latihan06.html
Keterangan :
‐ Title : Latihan 06
‐ Warna background : # 00FFCC
‐ Cellpadding="2"
‐ Cellspacing=”2”
‐ Border=”2”
‐ Lebar tabel : 600
LATIHAN :
1. Pada Menu “Profil” setelah menuliskan Identitas anda tambahkan 1. Tabel Riwayat Pendidikan dan
2. Daftar Prestasi Anda.
2. Jalankan di Browser dan Buat Laporan
 BAB IX
CAROUSEL SLIDER IMAGE

TEORI DAN PRAKTIKUM

Carousel biasanya di tempatkan pada halaman utama sebuah website. Carousel berbentuk slider yang
setiap itemnya akan bergeser secara otomatis berdasarkan waktu yang sudah ditentukan.
Website banyak menggunakan Carousel untuk mendukung tampilan agar lebih menarik dan
interaktif. Informasi yang ditampilkan pada carousel juga akan langsung manjadi perhatian pengunjung,
sebab secara tidak sengaja pergantian slide disertai keterangan singkat akan menimbulkan keingintahuan
pengunjung untuk melihat keseluruhan informasi secara lebih detail.
Bootstrap juga sudah menyediakan class carousel untuk menampilkan slider content. Penggunaanya
tidak jauh berbeda dengan jumbotron, bisa di tempatkan di dalam dan diluar container. Untuk membuat
sebuah carousel dengan bootstrap ada beberapa class yang harus kita gunakan, yaitu
class carousel, carousel-inner, carousel-item dan carousel-caption.
Untuk memulai Membuat Sebuah Carousel dengan Bootstrap, maka terlebih dahulu kita
menyediakan gambar yang akan dijadikan sebagai background slide. Pada contoh ini, direktori utama
website adalah folder bootstrap dan terdapat 3 file gambar yang diletakkan pada folder images.
Strukturnya direktorinya seperti gambar dibawah.

Jika gambar sudah siap, contoh penggunaan class-class carousel bootstrap untuk membuat slider
seperti berikut:
 Pada contoh diatas, untuk membuat carousel dimulai dari baris 11 sampai 52. Baris 11 terlebih dahulu
kita harus membuat class carousel beserta id carousel, di sini id-nya adalah contoh-carousel. Id ini
nanti digunakan sebagai indikator untuk mengatur control item per slide. Lihat penggunan id carousel
pada list <li data-target> baris 12 sampai 13. Untuk data-slide-to dimulai dari 0. Jadi, jika kita ingin
slidernya sebanyak 3 item maka nilainya berurut dari 0-2.
 Selanjutnya pada baris 7 terdapat class carousel-inner dengan role listbox. Class ini nantinya akan
berisi item-item yang akan dijadikan slider.
 Baris 18 sampai 26 adalah class untuk membuat item slider yang pertama. Pada baris 18, dimulai
dengan membuat class item karena ini item slider yang pertama maka sertakan active dalam class item
tersebut. Baris ke 19 sertakan gambar yang pertama. Gambar kita yang pertama tadi namanya slide-
1.jpg dan berada dalam folder images, jadi pemanggilannya images/slide-1.jpg
 Kemudian pada baris 20 sampai 25 membuat isi content dari slider yang pertama. Pada baris 20
terlebih dahulu dibuatkan class carousel-caption kemudian isikan contentnya. Di contoh ini judul
content menggunakan font <h1> dan keterangannya dalam paragraf <p> serta terdapat dua button.
 Baris 27 sampai 34 untuk membuat item slider yang kedua dan baris 35 sampai 42 untuk membuat
item slider yang ketiga.
 Baris 44 sampai 47 untuk membuat tombol control prev dan next pada slider. Baris 44 dan 45 untuk
membuat icon Prev atau < pada tampilan desktop dan baris 46 untuk membuat tulisan prev pada
tampilan smartphone.

Sama halnya dengan baris 48 sampai 51 untuk membuat tombol > dan tulisan next pada smartphone.
Hasil carousel dengan bootstrap ketika ditampilkan di browser adalah seperti gambar dibawah:
LATIHAN
1. Buka Kembali file index.php
2. Implementasikan Slide Image Carousel ke Layout Header web anda, dibawah Header image yang
sudah anda buat sebelumnya.
3. Isikan Foto terkait diri atau Lembaga selaku tema dari web profil anda.
4. Jalankan di Browser dan Buat Laporan
 BAB X
GALERI PHOTO

Dalam sebuah web profile, galeri foto sangat penting dan selama ini menu ini selalu disediakan
oleh setiap web profile. Dalam bab ini kita akan belajar bagaimana membuat sebuah halaman galeri foto
menggunakan style Bootstrap. Berikut ini langkah langkahnya :
Buat sebuat file dengan extensi .php dan ketikkan code dibawah ini :

Berikutnya tambah script di dalam tab body, dengan code seperti gambar di bawah ini :
Dan hasilnya akan seperti gambar di bawah ini.
LATIHAN :
1. Pada Menu di Navigasi, tambahkan Link Menu “Galeri Foto”
2. Duplikat File Index.php dan simpan dengan nama galeri.php
3. Implementasikan Galeri Foto yang berhasil anda buat ke Layout Content di file galeri.php.
4. Link kan Form file galeri.php ke dalam menu “Galeri Foto”.
5. Foto foto pada Galeri Foto adalah Foto yang sesuai dengan tema Web Profil yang anda buat.
6. Jalankan di Browser dan Buat Laporan