Beberapa contoh tag dan attribut telah saya bahas meskipun dalam bentuk sangat sederhana, kali ini saya akan bahas mengenai tag frame.
Tag frame merupakan salah satu sistem penunjang sebagai nilai tambah dalam sebuah situs web. Semakin sederhana dan mudah sistem navigasi akan semakin baik pula nilai tambah pada situs tersebut.
Seandai nya kita menginginkan pembagian sebuah halaman web ke dalam blok terpisah dan masing-masing blok tersebut diisi oleh halaman web lain, misalanya kita ingin membagi halaman web kita menjadi dua kolom, kolom sebelah kiri untuk halaman navigasi dan halaman sebelah kanan diisi dengan halaman sebenarnya.
Pembagian halaman tersebut dilakukan dengan menggunakan tag frame dan berikut merupakan contoh syntax dari tag frame :
Seandai nya kita menginginkan pembagian sebuah halaman web ke dalam blok terpisah dan masing-masing blok tersebut diisi oleh halaman web lain, misalanya kita ingin membagi halaman web kita menjadi dua kolom, kolom sebelah kiri untuk halaman navigasi dan halaman sebelah kanan diisi dengan halaman sebenarnya.
Pembagian halaman tersebut dilakukan dengan menggunakan tag frame dan berikut merupakan contoh syntax dari tag frame :
<HTML>
<HEAD>
<TITLE>Dasar pembuatan 12 Frame</TITLE>
</HEAD>
<FRAMESET COLS="35%,35%,30%" ROWS="25%,25,%25%,25%">
<FRAME SRC="1.html">
<FRAME SRC="2.html">
<FRAME SRC="3.html">
<FRAME SRC="4.html">
<FRAME SRC="5.html">
<FRAME SRC="6.html">
<FRAME SRC="7.html">
<FRAME SRC="8.html">
<FRAME SRC="9.html">
<FRAME SRC="10.html">
<FRAME SRC="11.html">
<FRAME SRC="l2.html">
</FRAMESET>
</HTML>
Hasil ..
| FRAME 1 | FRAME 2 | FRAME 3 |
| FRAME 4 | FRAME 5 | FRAME 6 |
| FRAME 7 | FRAME 8 | FRAME 9 |
| FRAME 10 | FRAME 11 | FRAME 12 |
Marquee
Dalam perancangan sebuah situs banyak sekali yang bisa kita tambahkan untuk mempercantik tampilan web kita, berikut beberapa contoh code animasi teks menggunakan fungsi marquee, mungkin sobat semua sudah mengetahui apa yang namanya marquee.
contoh Slide-in text:
<marquee behavior="slide" direction="left">Belajar bersama</marquee>
maka hasilnya akan seperti ini :
contoh scrolling text:
<marquee behavior="scroll" direction="left">Belajar bersama</marquee>
maka hasilnya akan seperti ini :
contoh Text bouncing back and forth:
<marquee behavior="alternate">Your bouncing text goes here</marquee>
maka hasilnya akan seperti ini :
contoh Text Scrolling Upwards:
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
maka hasilnya akan seperti ini :
contoh Change the Scrolling Speed:
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>
maka hasilnya akan seperti ini :
contoh Change the Scrolling Speed:
<marquee behavior="scroll" direction="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg879pE9uyKGBsPrXUEdutO7-IAae_i5tPvnejnxaoRIp9KBLqDAwtCifOGLK6gAgrsXK2TIjpA7MmAQMrXRhp4M4Je7Ab-e_hZ0ZfbvC8tt3C0tpDSULVB6aQl9c40F5iaw_P7gMoqhqZ4/s400/LogoCreativoltz.png" width="200" height="100" alt="smile" /></marquee>
maka hasilnya akan seperti ini :
Sekian dulu tutor dari saya yang sangat sederhana ini, mudah-mudahan bisa bermanfaat dan mohon maaf atas segala kekurangannya
contoh Slide-in text:
<marquee behavior="slide" direction="left">Belajar bersama</marquee>
maka hasilnya akan seperti ini :
contoh scrolling text:
<marquee behavior="scroll" direction="left">Belajar bersama</marquee>
maka hasilnya akan seperti ini :
contoh Text bouncing back and forth:
<marquee behavior="alternate">Your bouncing text goes here</marquee>
maka hasilnya akan seperti ini :
contoh Text Scrolling Upwards:
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
maka hasilnya akan seperti ini :
contoh Change the Scrolling Speed:
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>
maka hasilnya akan seperti ini :
contoh Change the Scrolling Speed:
<marquee behavior="scroll" direction="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg879pE9uyKGBsPrXUEdutO7-IAae_i5tPvnejnxaoRIp9KBLqDAwtCifOGLK6gAgrsXK2TIjpA7MmAQMrXRhp4M4Je7Ab-e_hZ0ZfbvC8tt3C0tpDSULVB6aQl9c40F5iaw_P7gMoqhqZ4/s400/LogoCreativoltz.png" width="200" height="100" alt="smile" /></marquee>
maka hasilnya akan seperti ini :
Sekian dulu tutor dari saya yang sangat sederhana ini, mudah-mudahan bisa bermanfaat dan mohon maaf atas segala kekurangannya
Terimakasih
Wenks@Creativoltz
Anda baru saja membaca artikel yang berkategori Tutorial
dengan judul TUTOR DASAR HTML 5. Anda bisa bookmark halaman ini dengan URL http://creativoltz.blogspot.com/2012/05/tutor-dasar-html-5.html. Terima kasih!
