Pengenalan Perancangan Web 2016

Transkripsi

1 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: <img src= namagambar /> Tag <img> memiliki atribut antara lain: Atribut 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 <title>latihan Image HTML</title> 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> Catatan: untuk modifikasi gambar, ubah value dari atribut yang digunakan 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.

2 Contoh: latihan26.html <title>latihan Image HTML Teks Alternatif</title> 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> 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 <title>latihan Image HTML Teks Alternatif</title> Contoh Image sebagai Link: <p><a href= latihan15.html><img src= gambar1.jpg width= 70 height= 70 align= bottom border= 1 ></a></p> 20

3 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 <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.... 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 Align=[ left center right ] Background Bgcolor Border Bordercolor Bordercolorlight Bordercolordark Colspan=n Rowspan=n Nowrap Valign =[ top middle bottom ] 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 <title>pengenalan Tabel</title> <table> <th width=50>no</th> <th width=200>nama</th> <th width=120>nim</th> <td>1.</td> <td>andi</td> <td> </td> Next code...

4 <td>2.</td> <td>amir</td> <td> </td> 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 <title>pengenalan Tabel</title> <table border= 1 width= 50% > <tr bgcolor= red > <th width=50>no</th> <th width=200>nama</th> <th width=120>nim</th> <td align= center >1.</td> <td align= left >Andi</td> <td align= center > </td> <td align= center >2.</td> <td align= left >Amir</td> <td align= center > </td> 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

5 Gambar 7.1 Ilustrasi Cellpadding Gambar 7.2 Ilustrasi Cellspacing 23 contoh: latihan30.html <title>pengenalan Tabel dengan Cellpadding dan Cellspacing</title> <h3>tabel dengan Cellpadding</h3> <table border= 1 cellpadding= 10 > <th width= 30 >NO</th> <th width= 200 >NAMA</th> <th width= 120 >NIM</th> <td>1.</td> <td>andi</td> <td> </td> Next code...

6 <td>2.</td> <td>amir</td> <td> </td> <h3>tabel dengan Cellpadding</h3> <table border= 1 cellpadding= 10 > <th width= 50 >NO</th> <th width= 200 >NAMA</th> <th width= 120 >NIM</th> <td>1.</td> <td>andi</td> <td> </td> <td>2.</td> <td>amir</td> <td> </td> 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 <title>belajar Tabel dengan Colspan dan Rowspan</title> <h3>daftar Nama Mahasiswa</h3> <table border="1" > <th width="50" rowspan="2">no.</th> <th width="250" colspan="2">data Mahasiswa</th> <th>nama</th> <th>nim</th> <td>1.</td> <td>andi</td> <td> </td> Next code...

7 <td>2.</td> <td>boni</td> <td> </td> 25

8 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: <form action= url method= get post >... </form> Atribut Tag Form Atribut Method Action 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 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.

9 8.2. Contoh-contoh Input 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 Name Rows Cols Mendefiniskan nama obyek textarea Menentukan jumlah baris textarea Menentukan lebar textarea 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 Mendefiniskan nama obyek select Menentukan berapa pilihan yang akan ditampilkan. Mengizinkan untuk memilih lebih dari satu contoh: latihan32.html 27 <title>mengenal Tag Textarea dan Tag Select</title> <table border= 1 > <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> <td>sinopsis</td> <td> <textarea name= sinosis cols=55 rows= 5 ></textarea> </td>

10 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 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. 28 contoh: latihan33.html <title>input Data Mahasiswa</title> <h4>tambah Data Mahasiswa</h4> <form method= post action= # > <table border= 0,5 > <td>nama</td> <td>: <input type= text name= nama size= 60 ></td> Next code...

11 <td>alamat</td> <td>: <textarea name= alamat cols= 50 rows= 5 ></textarea></td> <td>kelas</td> <td>: <select name= kelas > <option value= pilih selected>- Pilih Kelas -</option> <option value= 15S1SI01 >15-S1SI-01</option> <option value= 15S1SI02 >15-S1SI-02</option> <option value= 15S1SI03 >15-S1SI-03</option> <option value= 15S1SI04 >15-S1SI-04</option> <option value= 15S1SI05 >15-S1SI-05</option> </select> </td> <td>jenis Kelamin</td> <td>: <input type= radio name= gender value= P checked> Pria <input type= radio name= gender value= W > Wanita </td> <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> <td colspan=2> <input type= submit value= SIMPAN > <input type= reset value= RESET > </td> 29

12 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