Pengenalan Perancangan Web 2016

Pengenalan Perancangan Web 2016 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 . Penulisan sintaksnya adalah:

Tag memiliki atribut antara lain: Atribut src align width height alt border

Keterangan URL dari file image/direktori gambar Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom Lebar gambar dalam satuan pixel Tinggi gambar dalam satuan pixel Menampilkan teks pengganti jika gambar tidak tampil di browser Memberi bingkai pada gambar

Contoh: latihan25.html Contoh Posisi Image:

Image menggunakan atribut width, height, align(bottom), dan border.

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

19

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.

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 Contoh: latihan26.html Contoh Posisi Image:

Image menggunakan bantuan teks alternatif.

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. Contoh: latihan27.html Contoh Image sebagai Link:

20

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 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 Mendefinisikan sebuah tabel dalam HTML 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. Menspesifikasikan sebuah baris tabel dalam tabel Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah Mendefinisikan sebuah sel data tabel

Atribut yang ada di dalam tabel: Elemen Align=[ left | center | right ] Background Bgcolor Border Bordercolor Bordercolorlight Bordercolordark Colspan=n Rowspan=n Nowrap Valign =[ top | middle | bottom ]

Keterangan Alignment horizontal untuk sel Gambar latar belakang tabel Warna latar belakang Tebal bingkai tabel Warna bingkai tabel Warna depan bingkai tabel Warna bayangan bingkai tabel Jumlah n kolom sel digabung Jumlah n baris sel digabung Matikan wrapping dalam sel Definisi alignment vertikal dalam sel

Contoh: latihan28.html

21



Next code... Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016

NO	NAMA	NIM
1.	Andi	16.12.1111
2.	Amir	16.12.1112

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

NO	NAMA	NIM
1.	Andi	16.12.1111
2.	Amir	16.12.1112

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.

22

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016

Gambar 7.1 Ilustrasi Cellpadding

Gambar 7.2 Ilustrasi Cellspacing

contoh: latihan30.html

23

Tabel dengan Cellpadding

Next code...

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016

NO	NAMA	NIM
1.	Andi	16.12.1111
2.	Amir	16.12.1112

Tabel dengan Cellpadding

NO	NAMA	NIM
1.	Andi	16.12.1111
2.	Amir	16.12.1112

7.3.

Colspan dan Rowspan Colspan dan rowspan digunakan untuk mendefiniskan sel tabel yang dilebarkan lebih dari satu baris atau satu kolom. contoh: latihan31.html

24

Daftar Nama Mahasiswa

Next code... Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016

No.	Data Mahasiswa
	Nama	NIM
1.	Andi	16.12.1111
2.	Boni	16.12.1112

25

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 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

dan diakhiri dengan tag penutup

. Penulisan sintaksnya adalah:

....

Atribut Tag Form Atribut Method

Action

Keterangan Metode pengiriman data ke tujuan, yaitu: GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL POST : mengirimkan datanya secara terpisah 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. 26

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 8.2. Contoh-contoh Input 8.2.1. Text Area Tag 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 Name Rows Cols<br /> <br /> Keterangan Mendefiniskan nama obyek textarea Menentukan jumlah baris textarea Menentukan lebar textarea<br /> <br /> 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 Name Size Multiple<br /> <br /> Keterangan Mendefiniskan nama obyek select Menentukan berapa pilihan yang akan ditampilkan. Mengizinkan untuk memilih lebih dari satu<br /> <br /> contoh: latihan32.html<br /> <br /> 27<br /> <br /> <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”>

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 8.2.3. Input Tag digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misal kotak teks, kotak pilihan, tombol, dan lain-lain. Tag 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. contoh: latihan33.html

28

Tambah Data Mahasiswa

Next code...

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016

Nama	:
Alamat	:
Kelas	: <select name=”kelas”> - Pilih Kelas - 15-S1SI-01 15-S1SI-02 15-S1SI-03 15-S1SI-04 15-S1SI-05
Jenis Kelamin	: Pria Wanita
UKM yang Diikuti	: AMCC JURNALISTIK MAYAPALA TAEKWONDO

29

Ld.Farida | STMIK AMIKOM Yogyakarta

Pengenalan Perancangan Web 2016 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

30

Ld.Farida | STMIK AMIKOM Yogyakarta