Pengenalan Perancangan Web 2017

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan Perancangan Web 2017"

Bambang Sanjaya
6 tahun lalu
Tontonan:

1 5. Marquee Marquee merupakan tag non-standard elemen HTML yang menyebabkan suatu teks/gambar bergerak ke atas dan ke bawah, kanan atau kiri secara otomatis. Tulisan berjalan ini dapat digunakan untuk menuliskan kata-kata penting di sebuah halaman web. Penulisan sintaksnya adalah: <marquee> Text atau Gambar di sini</marquee> Terdapat beberapa atribut yang dapat digunakan untuk marquee, antara lain: Atribut Fungsi bgcolor mengatur background dari teks yang diberi efek marque width mengatur lebar dari area teks-nya (dinyatakan dalam px atau %) height mengatur tinggi dari area teks (dinyatakan dalam px atau %) direction mengatur gerakan dari teks tersebut (up, down, left, right) scrollamount mengatur kecepatan dari gerakan teks (angka dalam px), semakin tinggi angka digunakan, akan semakin cepat gerakan dari teksnya behaviour mengatur efek dari gerakan (slide, scroll, alternate) loop menentukan jumlah pengulangan onmouseover digunakan untuk menghentikan efek ketika disorot (hover) mouse onmouseout digunakan untuk melanjutkan efek bila mouse sudah tidak menyorot Contoh: latihan22.html 18 <title>contoh Marquee 1</title> <marquee bgcolor= blue >Marquee dengan atribut width</marquee> <marquee width= 50% >Marquee dengan atribut width</marquee> <marquee height= 50px >Marquee dengan atribut height</marquee> <marquee direction= left >Marquee dengan atribut direction left</marquee> <marque direction= right >Marquee dengan atribut direction right</marquee> <marque direction= up >Marquee dengan atribut direction up</marquee> <marque direction= down >Marquee dengan atribut direction down</marquee>

2 Contoh: latihan23.html <title>contoh Marquee 2</title> <marquee scrollamount= 15 >Marquee dengan atribut scroolamount</marquee> <marquee behavior= scroll >Marquee dengan atribut behavior scroll</marquee> <marquee behavior = slide >Marquee dengan atribut behavior slide</marquee> <marquee behavior = alternate >Marquee dengan atribut behavior alternate</marquee> Contoh: latihan24.html <title>contoh Marquee 3</title> <marquee direction= left bgcolor= green loop= 2 behavior= slide >Marquee dengan atribut loop</marquee> <marquee direction= down scrollamount= 2 onmouseover= this.stop() onmouseout= this.start() > Marquee akan berhenti bergerak ketika disorot mouse dan bergerak kembali ketika sudah tidak disorot</marquee> 19

3 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 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 <title>latihan Image HTML</title> Contoh Posisi Image: <img src= gambar1.jpg width= 70 height= 70 align= bottom border= 1 > Image menggunakan atribut width, height, align(bottom), dan border. 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.

4 Contoh: latihan26.html <title>latihan Image HTML Teks Alternatif</title> Contoh Posisi Image: <img src= gambar1.jpg width= 70 height= 70 align= bottom border= 1 alt= Gambar Pertama Saya > 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 <title>latihan Image HTML Teks Alternatif</title> Contoh Image sebagai Link: <a href= latihan15.html><img src= gambar1.jpg width= 70 height= 70 align= bottom border= 1 ></a> 21

5 REFERENSI Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika. Khafidli, M. Firgiawan. (2011). Trik Menguasai HTML5, CSS3, PHP Aplikatif. Yogyakarta: Lokomedia. Enterprise, Jubile. (2014). HTML 5 Manual Book. Jakarta: Elex Media Komputindo Pidie, Ghazali. Modul Langkah Demi Langkah Menguasai HTML5. 22

dokumen-dokumen yang mirip

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