</html>
Hasilnya akan sama seperti contoh di atas.
Lalu bagaimana kalau gambarnya berada di internet atau website lain?
Nah, jika kita menggunakan gambar dari website lain..
..kita harus menuliskan alamat URL lengkap dari gambar tersebut.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
100 | D e s a i n W e b H T M L
<p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temp
le.jpg/320px-Borobudur_Temple.jpg" />
</p>
</body>
</html>
Hasilnya:
Gampang kan?
Nah, berikutnya kita akan pelajar format gambar apa saja yang bisa digunakan di HTML
dan juga atribut lainnya untuk <img>.
Silahkan lanjutkan..
Format File Gambar untuk HTML
Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar
memiliki tujuan masing-masing.
101 | D e s a i n W e b H T M L
Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas
ini tidak akan bisa ditampilkan di HTML.
Lalu, format apa saja yang didunkung oleh HTML?
Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:
Nama Nama Panjang Ekstensi
Format
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg, .pjp
image
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
WebP Web Picture .webp
Format file ini juga akan bergantung pada versi browser yang digunakan.
Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan
oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa
ditampilkan.
102 | D e s a i n W e b H T M L
Atribut untuk Tag <img>
Ada beberapa atribut yang sering digunakan pada tag <img>:
alt untuk teks alternatif untuk gambar;
width untuk menentukan lebar gambar;
height untuk menentukan tinggi gambar;
style untuk menentukan style CSS untuk gambar.
Mari kita coba satu per satu..
Atribut alt
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar
gagal ditampilkan.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
<p>
<img src="" alt="Candi Borobudur" />
</p>
</body>
</html>
Hasilnya:
103 | D e s a i n W e b H T M L
Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar
gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.
Apakah kita wajib menggunakan atribut alt?
Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya
teks alternatif akan dibaca oleh screen reader.
Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa
mengetahui informasi yang ada di komputer.
Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO.
Atribut width dan height
Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan
tinggi dari gambar.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
104 | D e s a i n W e b H T M L
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" width="200" height="150" alt="Sawah"/>
<img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
<img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
</p>
</body>
</html>
Hasilnya:
Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita
memberikan nilai 200, artinya.. kita memberikan nilai 200px.
Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran
gambar konsisten.
105 | D e s a i n W e b H T M L
Atribut style
Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen.
Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Style Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;"
/>
<img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
<img src="images/sawah.jpg" style="width: 100px;height: 100px;border-
radius: 100%;" />
</p>
</body>
</html>
Hasilnya:
106 | D e s a i n W e b H T M L
Perhatikan gambar di atas ☝️..
Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan
warnanya adalah merah.
Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan
pada pojok gambar.
Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan
lingkaran.
Membuat Gambar Background
Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita
bahas di sini.
Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS
dengan atribut background-image lalu diisi dengan URL dari gambar.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
<h1>Background dengan Gmabar</h1>
<p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>
Hasilnya:
107 | D e s a i n W e b H T M L
Membuat Link dengan Gambar
Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan
tag <img>. Tag <a> harus mengapit tag <img>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba klik gambar ini:</p>
<p>
<a href="https://www.petanikode.com">
<img src="images/sawah.jpg" width="160"/>
</a>
108 | D e s a i n W e b H T M L
</p>
</body>
</html>
Hasilnya:
Membuat Link pada Bagian Gambar
Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan
tag <map> dan <area>.
Contoh: 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba sentuh dan klik gambar ini:</p>
109 | D e s a i n W e b H T M L
<p>
<img src="https://www.w3schools.com/html/workplace.jpg"
usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" title="Computer" href="#!">
<area shape="rect" coords="290,172,333,250" title="Phone" href="#!">
<area shape="circle" coords="337,300,44" title="Coffee" href="#!">
</map>
</p>
</body>
</html>
Hasilnya:
Tag Tambahan untuk Gambar di HTML
Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu
tag <img>.
Diantaranya:
<figure> untuk membungkus gambar dan teks caption-nya;
110 | D e s a i n W e b H T M L
<picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda.
Mari kita coba:
Tag <figure>
Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption.
Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat
dengan tag <figcaption>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
111 | D e s a i n W e b H T M L
<p>
<figure>
<img src="images/sawah.jpg" width="300" alt="Sawah"/>
<figcaption>Landscape sawah dan langit</figcaption>
</figure>
</p>
</body>
</html>
Hasilnya:
Tag <picture>
Di era mobile seperti saat ini, website tidak hanya dibuka melalui komputer saja, tapi
juga smartphone.
Ukuran layar komputer dengan smartphone tentunya berbeda. Karena itu, website
harus bersifat responsif agar bisa menyesuaikan diri dengan media yang digunakan.
Nah, tag <picture> hadir untuk mengatasi masalah ini. Tag ini berfungsi untuk
menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu.
112 | D e s a i n W e b H T M L
Mari kita coba contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<picture>
<source media="(min-width: 650px)" srcset="images/sawah.jpg">
<source media="(min-width: 450px)" srcset="images/sawah-sm.jpg">
<img src="images/sawah.jpg">
</picture>
113 | D e s a i n W e b H T M L
</p>
</body>
</html>
LATIHAN ! Menampilkan image pada HTML
Buatlah sebuah halaman website dengan menampilkan gambar didalamnya , contoh
scriptnya seperti di bawah ini :
114 | D e s a i n W e b H T M L
PERTANYAAN ? Menampilkan image pada HTML
1. Jelaskan tag untuk menampilkan gambar pada halaman website ?
2. Sebutkan atribut-atribut yang terdapat pada image ?
3. Jelaskan cara menentukan ukuran gambar (image) pada website dengan html ?
115 | D e s a i n W e b H T M L
MEMBUAT LIST PADA HTML
8
Indikator hasil belajar :
Memahami tag untuk menampilkan list pada halaman website
Mencoba membuat tag untuk menampilkan list pada website
Membuat halaman website dengan menampilkan list
Membuat list pada HTML
Jika kamu diminta menuliskan daftar barang yang harus dibeli pada dengan HTML..
..apa yang akan kamu lakukan?
Mungkin kamu bisa membuatnya seperti ini:
<h1>Daftar Barang untuk diblie:</h1>
<p>- Flashdisk 64GB</p>
<p>- Kabel Data USB 3.0</p>
<p>- Kertas A4</p>
Hasilnya memang akan terlihat seperti sebuah list.
Tapi, ini bukanlah cara membuat list yang benar di HTML.
116 | D e s a i n W e b H T M L
Elemen List di HTML
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang
bisa dibuat di HTML:
1. Ordered List adalah list yang terurut;
2. Unordered List adalah list yang tak terurut;
3. dan Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan
dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
117 | D e s a i n W e b H T M L
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol>
<li>Jeruk</li>
<li>Durian</li>
<li>Pisang</li>
<li>Pepaya</li>
<li>Mangga</li>
</ol>
</body>
</html>
Hasilnya:
List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi
seperti I, II, III?
Gampang..
118 | D e s a i n W e b H T M L
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan
berikut ini nilai yang bisa diberikan:
a untuk alfabet a, b, c, dan seterusnya;
A untuk alfabet A, B, C, dan seterusnya;
i untuk angka romwari i, ii, iii, dan seterusnya;
I untuk angka romwari I, II, III, dan seterusnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
119 | D e s a i n W e b H T M L
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
</body>
</html>
Hasilnya:
2.Unordered List di HTML
120 | D e s a i n W e b H T M L
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-
nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan
tag <li>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
121 | D e s a i n W e b H T M L
</body>
</html>
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc).
Kita juga bisa menggantinya dengan atribut type.
Berikut ini nilai yang bisa diberikan untuk atribut type:
square untuk simbol persegi;
disc (default) untuk simbol lingkaran disc;
none tidak memakai simbol;
circle untuk simbol lingkaran;
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
122 | D e s a i n W e b H T M L
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h1>Pelajari juga:</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</body>
</html>
Hasilnya:
123 | D e s a i n W e b H T M L
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
124 | D e s a i n W e b H T M L
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul style="list-style-image:
url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Hasilnya:
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
125 | D e s a i n W e b H T M L
Ada tiga tag yang digunakan untuk membuat description list:
<dl> (description list) tag untuk memulai description list;
<dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
<dd> (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Description List</title>
</head>
<body>
<h1>Daftar istilah:</h1>
<dl>
<dt>Kopi</dt>
126 | D e s a i n W e b H T M L
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah
air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-
mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
Hasilnya:
List di dalam List (Nested List)
127 | D e s a i n W e b H T M L
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list
dengan unordered list.
Caranya, list yang di dalam ditulis di dalam tag <li>.
Contoh:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>List di dalam List</title>
</head>
<body>
<h1>Distro Linux dan Keluarganya</h1>
<ol>
<li>Debian
<ul>
<li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul>
<li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
</html>
Hasilnya:
128 | D e s a i n W e b H T M L
LATIHAN ! Menampilkan list pada HTML
Buatlah List pada html seperti contoh tampilan di bawah ini di bawah ini :
129 | D e s a i n W e b H T M L
PERTANYAAN ? Menampilkan list pada HTML
1. Jelaskan pengertian list pada html ?
2. Sebutkan jenis-jenis list pada html ?
3. Sebutkan jenis-jenis atribut pada list ?
4. Sebutkan atribut pada unordered list yang kalian ketahui ?
5. Jelaskan perbedaan tag <ol> dan <ul> ?
130 | D e s a i n W e b H T M L
9 Desain Header Olshop
Indikator Pencapaian :
Menjalankan aplikasi grafis berbasis raster
Menggunakan menu dan ikon untuk membuat grafis
Membuat desain header untuk website (olshop)
PEMBAHASAN MATERI
Adobe photoshop merupakan aplikasi grafis berbasis raster yang banyak digunakan untuk berbagai
kepentingan seperti publikasi, desain web, dan desain digital lainnya. Jika menggunakan Adobe Photoshop
dari awal tentu saja akan memerlukan waktu yang cukup lama, oleh karena itu pada kesempatan kali ini
kita akan langsung membuat sebuah desain header website untuk kepentingan olshop. Tool dan menu
yang kita gunakan tentu saja akan lebih banyak langsung praktik pada aplikasi. Berikut ini contoh tampilan
header yang sudah pernah dibuat dengan adobe photoshop.
Gambar diatas adalah contoh desain header yang sudah di konvert ke dalam bentuk .png atau .jpeg,
sebelumnya di desain dengan menggunakan adobe photoshop.
131 | D e s a i n W e b H T M L
Pada pertemuan kali ini kita akan lakukan tutorial pembuatan desain diatas, selanjutnya kalian dapat
membuat desainnya sesuai dengan kreatifitas kalian masing-masing. Oleh karena perhatikan langkah-
langkahnya agar kalian dapat membuatnya dengan baik.
LANGKAH-LANGKAH PEMBUATANNYA
Berikut ini langkah-langkah pembuatan desain header untuk website :
1. Jalankan aplikasi Adobe Photoshop pada PC atau laptop kalian.
2. Klik File --> New --> buat ukuran menjadi width=800 dan height=150 background =white
3. Tampilannya seperti di bawah ini :
4. Seleksi dengan menggunakan rectangle tool, kemudian berikan warna sesuai dengan keinginan
menggunakan Gradient Tools untuk membuat warna gradasi.
5. Klik Layer --> New Layer untuk membuat layer baru, gunakan Pen Tools untuk membentuk obyek
sesuai keinginan seperti di bawah ini, pilih Direc Selection Tool untuk menyeleksi obyek tersebut,
kemudian klik kanan dan pilik Make Selection.
6. Setelah terseleksi kalian dapat mewarnai sesuai dengan keinginan. Hasilnya seperti di bawah ini.
132 | D e s a i n W e b H T M L
7. Selanjutnya kita menambahkan teks dengan menggunakan Text Tools atau dengan lambang huruf T,
ketikkan sesuai dengan nama olshop yang akan kalian buat di webite.
8. Hasilnya seperti di bawah ini :
9. Tambahkan gambar di dalam desain tersebut sebagai background, ataur pada layer opacity agar
tampil transparan, seperti di bawah ini.
10. Kemudian tambahkan gambar lainnya sesuai keinginan mislanya gambar orang belanja, contohnya
seperti id bawah ini.
133 | D e s a i n W e b H T M L
11. Dengan demikian desain sederhana untuk header kita sudah selesai, namun jangan keburu ditutup
dulu aplikasi Adobe Photoshop-nya karena masih ada proses penyimpanan yaitu :
a. Disimpan dalam bentuk .psd atau editing Adobe Photohop
b. Disimpan dalam format web seperti .jpeg, JPG atau .png
12. Simpanlah pada folder yang telah kalian buat sebelumnya dan disatukan dengan file html yang kita
buat agar saat di jalankan gambar dapat tampil.
PERTANYAAN ?
1. Jelaskan pengertian aplikasi Adobe Photoshop ?
2. Apa perbedaan aplikasi grafis berbasis raster dan berbasis vektor ?
3. Sebutkan jenis-jenis seleksi pada aplikasi Adobe Photoshop yang kalian ketahui ?
4. Bagaimana cara memberikan warna gradient atau gradasi pada aplikasi Adobe Photoshop ?
5. Jelaskan cara menyimpan file Adobe Photoshop untuk di gunakan pada website ?
134 | D e s a i n W e b H T M L
MEMBUAT FORM PADA HTML
10
Indikator Pencapaian :
Memahami fungsi form pada sebuah website
Mengenal script untuk membuat form pada HTML
Membuat form dengan menggunakan script HTML
PEMBAHASAN MATERI
Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form.
Form dalam web bisa disamakan dengan formuliar di dunia nyata.
Form dapat diisi, kemudian diproses dengan program tertentu.
Pada tutorial ini, kita akan belajar cara membuat form di HTML.
Hanya membuat saja ya…
Tidak sampai memproses datanya.
Karena itu masuk ke dalam topik pembahasan yang lain.
Cara Membuat Form di HTML
Form di HTML dapat kita buat dengan tag <form>.
Tag ini memiliki beberapa atribut yang harus diberikan, seperti:
action untuk menentukan aksi yang akan dilakukan saat data dikirim;
method metode pengiriman data.
Contoh:
<form action="prosess.php" method="GET">
<!-- form field di sini -->
</form>
Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang
akan memproses form.
135 | D e s a i n W e b H T M L
Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk
memproses data form.
Ini nanti akan kita pelajari pada PHP.
Kode HTML di atas, tidak akan menghasilkan apa-apa.
Karena kita belum membuat field-nya.
Apa itu Field?
Field adalah ruas yang dapat diisi dengan data.
Contoh field:
<input type="text" name="info" />
Field memiliki beberapa atribut yang harus diberikan:
1. type merupakan type dari field.
2. name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam
program.
Latihan: Membuat Form Login
Sebagai latihan, mari kita buat form login.
Pada form login, terdapat beberapa field dan elemen:
1. Field untuk input username atau email;
2. Field untuk input password;
3. Checkbok untuk remember me;
4. Tombol untuk login.
Berikut ini kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
136 | D e s a i n W e b H T M L
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="password..." />
</p>
<p>
<label><input type="checkbox" name="remember" value="remember" /> Remember
me</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
137 | D e s a i n W e b H T M L
Sekarang perhatikan!
Pada kode di atas, kita membuat empat buah filed:
1. input username dengan tipe text;
2. input password dengan tipe password;
3. input remember dengan tipe checkbox;
4. input submit dengan tipe submit;
Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>.
Nanti tag <fieldset> ini akan membuat sebuah garis.
Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks pada fieldset.
Lalu, perhatikan juga atirbut yang digunakan pada setiap field.
Atribut placeholder untuk menampilkan teks sementara (placeholder);
Atribut value untuk membreikan nilai default pada field.
Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah
label dengan tag <label>.
Latihan: Membuat Form Contact
Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk
menghubungi atau kontak admin.
Silahakan ikuti kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
138 | D e s a i n W e b H T M L
<input type="text" name="name" placeholder="your name..." />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="your email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
139 | D e s a i n W e b H T M L
Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed ini harus
diisi dengan email saja.
Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan peringatan.
Latihan: Membuat Form Register
Semakin banyak latihan, semakin bagus.
Berikutnya kita akan coba membuat form registrasi.
Form ini berisi field untuk:
Input nama lengkap;
Input username;
Input email;
Input password;
Input jenis kelamin;
Input Agama;
Input Biografi.
dsb.
<!DOCTYPE html>
<html>
140 | D e s a i n W e b H T M L
<head>
<title>Registrasi</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Passowrd..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-
laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
141 | D e s a i n W e b H T M L
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select>
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
142 | D e s a i n W e b H T M L
Apa saja field baru yang ada di form tersebut?
1. Field radio;
2. Field <select><option>;
3. Field <textearea>.
Apa bedanya radio dengan checkbox?
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.
Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox.
Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya berbeda.
Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.
Latihan: Membuat Form Tingkat Lanjut
Field-field di atas merupakan jenis field yang sering digunakan dalam pembuatan form.
Masih ada jenis field lagi yang belum kita coba,
seperti meter, color, url, number, date, datetime, dsb.
Mari kita coba beberapa:
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Form</legend>
<p>
<label>Alamat Web:</label>
<input type="url" name="name" placeholder="Masukan URL Web..." />
</p>
<p>
<label>Tanggal Lahir:</label>
143 | D e s a i n W e b H T M L
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="10" max="90" name="umur" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser
versi terbaru.
144 | D e s a i n W e b H T M L
11 P PROJECT WEBSITE HTML
Petunjuk Pengerjaan
1. Bacalah petunjuk pengerjaan soal dengan teliti dan cermat.
2. Kerjakan soal berikut pada komputer yang telah disediakan untuk masing-masing siswa.
3. Waktu mengerjakan 90 menit.
4. Jika selesai mengerjakan silahkan dicoba untuk ditampilkan pada browser.
5. Jika sudah tampil pada browser silahkan disimpan pada folder yang telah disiapkan dan diberikan
nama sesuai dengan nama masing-masing siswa.
A. Komponen penilaian pembuatan e-commerce (4 komponen dengan nilai = 100 poin)
1. Desain header dengan adobe photoshop (Nilai : 20)
2. Struktur HTML (Nilai : 30)
3. Pembuatan tabel dengan script HTML (Nilai : 30)
4. Element dan atribut HTML (Nilai : 20)
B. SOAL 1 : Pembuatan Header dengan Adobe Photoshop
- Buatlah sebuah header web e-commerce dengan menggunakan aplikasi Adobe Photoshop
dengan ketentuan sebagai berikut :
Ukuran header adalah 800 X 150 px (lebar X tinggi)
Resolusi 72 pixel
Simpan dalam format .png
Contoh seperti di bawah ini :
C. SOAL 2 , 3 dan 4 : Buatlah Struktur , Tabel, Elemen dan Atribut HTML untuk kebutuhan web e-
145 | D e s a i n W e b H T M L
Commerce
- Dari struktur HTML di bawah ini ada beberapa komponen, elemen dan atribut yang kurang
silahkan ditambahkan pada tanda titik-titik.
- Diperbolehkan untuk modifikasi sesuai kebutuhan masing-masing.
Contoh Struktur Script HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UPRAK JH9</title>
</head>
<body align=center>
<p align=center><img src="header2.png">
</p>
<table align=center bgcolor=green width=800 height=30>
<tr width=800 height=30>
<td align=left><font color=white size=4>Beranda | Produk | Produk Baru | Pesan Barang |
Kontak</td>
</tr>
<tr>
<td><marquee><font color=yellow size=6>belanja aman bebas ongkir .... siapa
takut</font></marquee></td>
</tr>
</table>
<table align=center height=400 width=800 bgcolor=grey>
146 | D e s a i n W e b H T M L
<tr>
<td width=250 height=200>
<img src="jaket1.JPG" width=200 height=200></td>
<td widht=300 height=200>
<img src="jaket2.JPG" width=200 height=200></td>
...................................
...................................
<td widht=250 height=200>
<img src="sepatubooth2.JPG" widht=200 height=200></td>
<tr>
<td width=250 height=30><b> Jaket kulit asli hitam</b></td>
............................................
...........................................
<td width=250 height=30><b> Sepatu booth kuning</b></td>
<tr bgcolor=yellow>
<td width=250 height=30> <font size=5><b>Rp.750.000</b></td>
.................................................................
................................................................
<td width=250 height=30> <font size=5><b>Rp.250.000</b></td>
<tr bgcolor=Blue>
<td width=250 height=30><font size=3 color=white> <b><i>Ukuran S, M, L, Warna
Hitam</b></i></td>
.................................................................................................
<td width=250 height=30><font size=3 color=white> <b><i>Ukuran All size</b></i></td>
..............................................................................
147 | D e s a i n W e b H T M L
</tr>
</table>
<p align=center> copyright©Happy Family School
-sby
</body>
</html>
Tampilan Hasil Akhir seperti di bawah ini :
= Selamat Mengerjakan =
148 | D e s a i n W e b H T M L
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Modul Pembelajaran TIK JH 9
Discover the best professional documents and content resources in AnyFlip Document Base.
Search