pengenalan perancangan web -...

Pengenalan Perancangan Web 2016

Ld.Farida | STMIK AMIKOM Yogyakarta

19

6. Image Gambar pada halaman sebuah web merupakan salah satu daya tarik pengguna.

Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan

bersamaan dengan teks). File gambar yang biasanya digunakan adalah format PNG,

JPG, GIF. Pemilihan sebuah gambar yang akan ditampilkan di sebuah halaman web,

harus memperhatikan kebutuhan. Setiap gambar yang ditampilkan akan menambah

waktu upload dan download, sehingga dapat memperlambat tampilan dari sebuah

halaman web. Tag yang digunakan untuk menyisipkan gambar dalam sebuah dokumen

HTML adalah tag <img>.

Penulisan sintaksnya adalah:

Tag <img> memiliki atribut antara lain:

Atribut Keterangan

src URL dari file image/direktori gambar

align Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom

width Lebar gambar dalam satuan pixel

height Tinggi gambar dalam satuan pixel

alt Menampilkan teks pengganti jika gambar tidak tampil di browser

border Memberi bingkai pada gambar

Contoh: latihan25.html

Catatan: untuk modifikasi gambar, ubah value dari atribut yang digunakan

6.1. Teks Alternatif untuk Image

Teks alternatif untuk image bermanfaat ketika sebuah browser tidak dapat

menampilkan gambar dikarenakan pengaturan mode teks atau pengguna yang memang

sengaja mematikan pengaturan untuk menampilkan sebuah gambar dengan tujuan

mempercepat tampilan informasi. HTML menyediakan atribut alt yang dapat digunakan

untuk membantu persoalan tersebut.

<img src=”namagambar” />

<html>

<head>

<title>Latihan Image HTML</title>

</head>

<body>

Contoh Posisi Image:

<p><img src=”gambar1.jpg” width=”70” height=”70” align=”bottom”

border=”1”> Image menggunakan atribut width, height, align(bottom), dan

border.</p>

</body>

</html>



20


6.2. Image sebagai Link

Link pada halaman HTML dapat juga dibuat dengan menggunakan image. Image

dapat dimanfaatkan sebagai icon pada menu atau tombol lainnya yang dapat

mempermudah pengguna ketika menggunakan sebuah halaman website.


<html>

<head>

<title>Latihan Image HTML Teks Alternatif</title>

</head>

<body>

Contoh Posisi Image:

<p><img src=”gambar1.jpg” width=”70” height=”70” align=”bottom”

border=”1” alt=”Gambar Pertama Saya”> Image menggunakan bantuan teks

alternatif.</p>

</body>

</html>

<html>

<head>

<title>Latihan Image HTML Teks Alternatif</title>

</head>

<body>

Contoh Image sebagai Link:

<p><a href=”latihan15.html><img src=”gambar1.jpg” width=”70”

height=”70” align=”bottom” border=”1”></a></p>

</body>

</html>



21

7. Tabel Tabel digunakan untuk menyajikan data dalam bentuk baris dan kolom. Umumnya

setiap kolom menunjukkan data sejenis dan setiap baris yang terdiri atas kolom-kolom

menunjukkan kelompok data dalam satu kesatuan.

Elemen-elemen yang ada di dalam tabel:

Elemen Keterangan

<table> ... </table> Mendefinisikan sebuah tabel dalam HTML

<caption>...</caption> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah di tengah atas tabel. Atribut align=”botton” dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: Judul dapat diberi tag apa saja.

<tr>...</tr> Menspesifikasikan sebuah baris tabel dalam tabel

<th>...</th> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah

<td>...</td> Mendefinisikan sebuah sel data tabel

Atribut yang ada di dalam tabel:

Elemen Keterangan

Align=[ left | center | right ] Alignment horizontal untuk sel

Background Gambar latar belakang tabel

Bgcolor Warna latar belakang

Border Tebal bingkai tabel

Bordercolor Warna bingkai tabel

Bordercolorlight Warna depan bingkai tabel

Bordercolordark Warna bayangan bingkai tabel

Colspan=n Jumlah n kolom sel digabung

Rowspan=n Jumlah n baris sel digabung

Nowrap Matikan wrapping dalam sel

Valign =[ top | middle | bottom ] Definisi alignment vertikal dalam sel


Next code...

<html>

<head>

<title>Pengenalan Tabel</title>

</head>

<body>

<table>

<tr>

<th width=50>NO</th>

<th width=200>NAMA</th>

<th width=120>NIM</th>

</tr>

<tr>

<td>1.</td>

<td>Andi</td>

<td>16.12.1111</td>

</tr>



22

7.1. Tabel dengan Atribut

Atribut bertujuan untuk mengatur tabel sesuai kebutuhannya. Berikut contoh tabel

yang memanfaatkan beberapa atribut align, border, bgcolor, dan width.

contoh: latihan29.html

7.2. Cellpadding dan Cellspacing

Cellpadding digunakan untuk membuat spasi lebih di antara sel dan bordernya.

Cellpadding membuat tampilan di dalam tabel menjadi lebih nyaman untuk dibaca

karena terdapat jeda ruang kosong antara tulisan dan tabelnya. Sedangkan Cellspacing

digunakan untuk menambah jarak antarsel. Ilustrasi dapat dilihat pada Gambar 7.1 dan

Gambar 7.2.

<tr>

<td>2.</td>

<td>Amir</td>

<td>16.12.1112</td>

</tr>

</table>

</body>

</html>

<html>

<head>

<title>Pengenalan Tabel</title>

</head>

<body>

<table border=”1” width=”50%”>

<tr bgcolor=”red”>

<th width=50>NO</th>

<th width=200>NAMA</th>

<th width=120>NIM</th>

</tr>

<tr>

<td align=”center”>1.</td>

<td align=”left”>Andi</td>

<td align=”center”>16.12.1111</td>

</tr>

<tr>

<td align=”center”>2.</td>

<td align=”left”>Amir</td>

<td align=”center”>16.12.1112</td>

</tr>

</table>

</body>

</html>



23

Gambar 7.1 Ilustrasi Cellpadding

Gambar 7.2 Ilustrasi Cellspacing


Next code...

<html>

<head>

<title>Pengenalan Tabel dengan Cellpadding dan Cellspacing</title>

</head>

<body>

<h3>Tabel dengan Cellpadding</h3>

<table border=”1” cellpadding=”10”>

<tr>

<th width=”30”>NO</th>

<th width=”200”>NAMA</th>

<th width=”120”>NIM</th>

</tr>

<tr>

<td>1.</td>

<td>Andi</td>

<td>16.12.1111</td>

</tr>



24

7.3. Colspan dan Rowspan

Colspan dan rowspan digunakan untuk mendefiniskan sel tabel yang dilebarkan

lebih dari satu baris atau satu kolom.


Next code...

<html>

<head>

<title>Belajar Tabel dengan Colspan dan Rowspan</title>

</head>

<body>

<h3>Daftar Nama Mahasiswa</h3>

<table border="1" >

<tr>

<th width="50" rowspan="2">No.</th>

<th width="250" colspan="2">Data Mahasiswa</th>

</tr>

<tr>

<th>Nama</th>

<th>NIM</th>

</tr>

<tr>

<td>1.</td>

<td>Andi</td>

<td>16.12.1111</td>

</tr>

<tr>

<td>2.</td>

<td>Amir</td>

<td>16.12.1112</td>

</tr>

</table>

<h3>Tabel dengan Cellpadding</h3>

<table border=”1” cellpadding=”10”>

<tr>

<th width=”50”>NO</th>

<th width=”200”>NAMA</th>

<th width=”120”>NIM</th>

</tr>

<tr>

<td>1.</td>

<td>Andi</td>

<td>16.12.1111</td>

</tr>

<tr>

<td>2.</td>

<td>Amir</td>

<td>16.12.1112</td>

</tr>

</table>

</body>

</html>



25

<tr>

<td>2.</td>

<td>Boni</td>

<td>16.12.1112</td>

</tr>

</table>

</body>

</html>



26

8. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari

pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman

HTML. Form biasa digunakan untuk membuat aplikasi web berbasis database dan

aplikasi pendaftaran. Untuk membuat form, digunakan tag awal <form> dan diakhiri

dengan tag penutup </form>.

Penulisan sintaksnya adalah:

Atribut Tag Form

Atribut Keterangan

Method Metode pengiriman data ke tujuan, yaitu: GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL POST : mengirimkan datanya secara terpisah

Action Menentukan lokasi dari script yang akan memproses data dari form

8.1. Jenis Masukan dalam Form

Jenis masukan dalam form dibedakan menjadi:

1. Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server.

Nilai yang dimasukkan dapat berupa angka ataupun teks;

2. Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih;

3. Check box, menyediakan beberapa pilihan, pilihan dapat lebih dari satu;

4. List, menyediakan pilihan dalam bentuk list pilihan (daftar). Dapat memilih lebih

dari satu;

5. Button, elemen yang mendefiniskan tombol untuk melakukan proses pada halaman

HTML;

6. Submit, elemen tombol yang digunakan untuk memanggil URL, setelah input selesai

dimasukkan;

7. Reset, elemen tombol yang digunakan untuk mengembalikan ke kondisi awal;

8. Image, digunakan sebagai pengganti button, berupa gambar yang berfungsi sama

seperti button;

9. Text area, elemen yang digunakan untuk menampung data dalam bentuk teks;

10. File,elemen button yang dapat memanggil file atau gambar dari storage;

11. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

<form action=”url” method=”get|post”>

....

</form>



27

8.2. Contoh-contoh Input

8.2.1. Text Area

Tag <textarea> digunakan untuk membuat suatu text area yaitu sebuah kotak teks

dengan multi baris. Di dalam text area, dapat dituliskan karakter yang tidak terbatas. Tag

<textarea> memiliki atribut antara lain:

Atribut Keterangan

Name Mendefiniskan nama obyek textarea

Rows Menentukan jumlah baris textarea

Cols Menentukan lebar textarea

8.2.2. Select Area

Tag <select> digunakan untuk membuat dropdown sederhana. Dropdown adalah

daftar yang dapat dipilih. Tag ini memiliki beberapa atribut yaitu:

Atribut Keterangan

Name Mendefiniskan nama obyek select

Size Menentukan berapa pilihan yang akan ditampilkan.

Multiple Mengizinkan untuk memilih lebih dari satu


<html>

<head>

<title>Mengenal Tag Textarea dan Tag Select</title>

</head>

<body>

<table border=”1”>

<tr>

<td>Pilih Jenis Buku</td>

<td>

<select name=”pendidikan”>

<option value=”komputer”>Komputer</option>

<option value=”kedokteran”>Kedokteran</option>

<option value=”psikologi”>Psikologi</option>

<option value=”ekonomi”>Ekonomi</option>

</select>

</td>

</tr>

<tr>

<td>Sinopsis</td>

<td>

<textarea name=”sinosis” cols=55” rows=”5”></textarea>

</td>

</tr>

</table>

</body>

</html>



28

8.2.3. Input

Tag <input> digunakan untuk membuat komponen-komponen yang digunakan

untuk meminta informasi dari user, misal kotak teks, kotak pilihan, tombol, dan lain-lain.

Tag <input> tidak memerlukan tag penutup. Tag ini memiliki beberapa atribut antara

lain:

Atribut Keterangan

Name Mendefiniskan nama obyek input. Atribut ini harus dituliskan kecuali untuk tipe submit dan clear.

Size Menentukan ukuran kotak teks.

Maxlenght Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks.

Value Kotak teks : Menentukan teks yang tertulis. Check box atau radio : menentukan nilai item yang dipilih Submit atau reset : menentukan teks yang tertulis pada tombol

Checked hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default

Type Menentukan tipe input yang dibuat

Tipe input antara lain:

a. Text digunakan untuk membuat kode teks;

b. Password digunakan untuk membuat kotak teks dengan menampilkan tanda *;

c. Check box digunakan untuk membuat suatu daftar pilihan yang dapat dipilih

lebih dari satu;

d. Radio digunakan untuk membuat suatu daftar pilhan yang hanya dipilih satu

saja;

e. File digunakan untuk memanggil file atau gambar dari storage

f. Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus

semua isi form yang telah diberikan

g. Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan

data form agar diolah.


Next code...

<html>

<head>

<title>Input Data Mahasiswa</title>

</head>

<body>

<h4>Tambah Data Mahasiswa</h4>

<form method=”post” action=”#”>

<table border=”0,5”>

<tr>

<td>Nama</td>

<td>: <input type=”text” name=”nama” size=”60”></td>

</tr>



29

<tr>

<td>Alamat</td>

<td>: <textarea name=”alamat” cols=”50” rows=”5”></textarea></td>

</tr>

<tr>

<td>Kelas</td>

<td>:

<select name=”kelas”>

<option value=”pilih” selected>- Pilih Kelas -</option>

<option value=”15S1SI01”>15-S1SI-01</option>





</select>

</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>:

<input type=”radio” name=”gender” value=”P” checked> Pria

<input type=”radio” name=”gender” value=”W”> Wanita

</td>

</tr>

<tr>

<td>UKM yang Diikuti</td>

<td>:

<input type=”checkbox” name=”amcc”>AMCC <br>

<input type=”checkbox” name=”jurnalistik”>JURNALISTIK <br>

<input type=”checkbox” name=”mayapala”>MAYAPALA<br>

<input type=”checkbox” name=”taekwondo”>TAEKWONDO

</td>

</tr>

<tr>

<td colspan=2>

<input type=”submit” value=”SIMPAN”>

<input type=”reset” value=”RESET”>

</td>

</tr>

</table>

</body>

</html>



30

REFERENSI

Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih

dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL.

Yogyakarta: Andi Offset.

Satya, Barka (2015). Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Arifin, Oki(2015). Modul Pengenalan Perancangan Web. STMIK AMIKOM Yogyakarta

pengenalan perancangan web -...

Documents