Cara membuat tulisan berjalan (marquee)

 – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara Membuat Tulisan Berjalan (Marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah : 

bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks 

direction="left/right/up/down" » Mengatur arah gerakan teks 

behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan 

Scroll » teks bergerak berputar

Slide » teks bergerak sekali lalu berhenti

Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo) 

title="pesan" » Pesan akan muncul saat mouse berada di atas teks 

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya. 

scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik 

loop="angka|-1|infinite" » Mengatur jumlah loop 

width="lebar" » Mengatur lebar blok teks dalam pixel atau persen 


Agar lebih jelas akan Kang Rohman sertakan contohnya : 

Contoh marquee dari gerakan : 

<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee> 

Contoh hasilnya : 

marquee dari kanan ke kiri 

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down . 

Contoh marquee dengan variasi hurup dan warna latar belakang : 

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>

Contoh hasilnya : 

marquee dengan variasi hurup

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain. 

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee> 

Contoh hasilnya : 

silahkan tunjuk ke sini 

Contoh kode marquee yang di dalam nya terdapat link : 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a>
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
</marquee> 

Contoh hasilnya : 

cara membuat blog
Membuat blog 
Pasang IklanPasang Iklan 
Membuat blog 
cara membuat blog

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini. 

Cara Memasang Tulisan Berjalan Di Blog

Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalah cara memasang kode marquee di sidebar blogger. 

1. Silahkan login ke blogger dengan akun anda.
2. Klik pada nama blog anda.
3. Klik menu Tata Letak
   
4. Klik Tambah Gadget 
   
5. Klik pada widget HTML/Javascript 
6. Pasanglah kode marquee yang telah anda buat sesuai degan yang Kang Rohman terangkan diatas. 
7. Klik tombol Simpan
8. Selesai.

Semoga artikel cara membuat tulisan berjalan (marquee) ini dapat bermanfaat bagi anda.

Cara membuat Frame

Kegunaan Frame biasanya digunakan untuk membuat suatu halaman yang interaktif di dalam dokumenHTML. Dengan Frame kita dapat menampilkan lebih dari satu halaman web dalam halaman browser yang sama. Setiap dokumen HTML dapat ditampilkan didalam Frame dan setiap frame adalah bebas antara satu dengan yang lain.berikut cara membuat frame pada website..

Contoh penggunaan tag Frame:

<html> <head> <title>Frame</title> </head> <frameset rows="*,80" cols="*" frameborder="NO" border="0" framespacing="0"> <frameset cols="80,*" frameborder="NO" border="0" framespacing="0"> <frame src="UntitledFrame-2" name="leftFrame" scrolling="NO" noresize> <frame src="Untitled-3" name="mainFrame"> </frameset> <frame src="UntitledFrame-3" name="bottomFrame" scrolling="NO" noresize > </frameset> <noframes><body> </body></noframes> </html>

Tag Frame:

<frameset> ... .......</frameset> = Mendefinisikan frameset

<frameset rows> ...<fremset>   = Frame baris Untuk mengatur tinggi baris frame. Ukuran dalam pixel atau %. 

<frameset cols> ... <frameset>  = Frame kolom Untuk mengatur lebar kolom frame. Ukuran dalam pixe atau %.

<frame> ......... </frame>          = mendefinisikan jendela (sub) frame

<noframes> ... </noframes>      = mendefinisikan browser yang tidak mendukung frame

<iframe> ....... </iframe>           = mendefinisikan inline (sub) frame


Src                = Berisi URL yang menjadi sumber dari frame

Name            = nama yang digunakan untuk tujuan/target link. 

Scrolling        = menentukan apakah frame bisa digulung atau tidak. Diisi dengan Yes/No/Auto. 

Marginwidth  = jarak antara tepi kiri/kanan frame dengan tulisan dalam frame (satuan pixel). 

Noresize       = Mencegah pengguna untuk mengubah ukuran dari frame. 

Border          = Mengubah ketebalan pembatas frame

BorderColor  = Memberikan warna pada pembatas frame

FrameBorder = Pembatas frame. Dapat dihilangkan dengan memberi nilai NO


Contoh Lain:

a. Frameset Vertikal 

<html> <head><title>FRAMESET VERTIKAL</title> </head> <body> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </body> </html

b.Frameset Horoisontal

<html> <head><title>CONTOH PENGGUNAAN FRAMESET HORISONTAL</title> </head> <body> <frameset rows="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </body> </html>

c. Penggunaan Noframe

<html> <head><title>CONTOH PENGGUNAAN NOFRAME</title> </head> <body> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> <noframes> <body>Your browser does not handle frames! </body> </noframes> </frameset> </body> </html>

d. Penggunaan Navigation Frame 

<html> <head><title>CONTOH PENGGUNAAN NAVIGATION FRAME</title> </head> <body> <frameset cols="120,*"> <frame src="frame_isi.html"> <frame src="frame_a.html" name="showframe"> </frameset> </body> </html>

File : frame_isi.html

<html> <body> <a href ="frame_a.html" target ="showframe">Frame a</a><br> <a href ="frame_b.html" target ="showframe">Frame b</a><br> <a href ="frame_c.html" target ="showframe">Frame c</a> </body> </html>

e. Penggunaan iframe

<html> <head><title>CONTOH PENGGUNAAN iFRAMESET</title></head> <body> <iframe src="frame_a.html"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>

Tutorial CSS - Cara Memasukan Script CSS ke Dalam HTML

Sekarang saya akan menulis tentang Cara Memasukan Script CSS ke Dalam HTML. Seperti yang saya katakan pada tulisan saya sebelum nya, bahwa tutorial kali ini sangat penting dan wajib di ketahui bila anda ingin lebih mengetahui mengenai CSS.

Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara yang dapat dilakukan. Yaitu bisa dengan cara Inline Style, header style dan juga bisa dengan menggunakan Linked CSS.

1.  Untuk pertama-tama kita bahas terlebih dahulu mengenai cara Inline style, Inline style merupakan salah satu cara yang dapat dilakukan untuk menggunakan atau memasukan sript CSS ke dalam HTML dengan cara menuliskan Script CSS satu persatu ke dalam HTML.

Untuk lebih jelasnya perhatikan Sript di bawah ini :

<html>

<header>

<title>Belajar CSS</title>

</header>

<body>

<p style="color : red"> Teks ini berwarna merah </p>

<p style="color : Blue"> teks ini berwarna biru </P>

<p style="color : green"> teks ini berwarna hijau </p>

</body>

</html>

Dapat terlihat komposisi Sript CSS di atas menggunakan style="property : value"> menjadi style="color : red".

Untuk melihat hasilnya anda bisa copy sript di atas ke dalam notepad, lalu safe dengan format ( .HTML ).

dapat terlihat terjadi perbedaan warna di setiap kalimatnya.

2.  Yang ke dua anda bisa menggunakan header style, dimana kita dapat menuliskan sript CSS pada bagian header. Di mana bagian script html terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan bagian CSS terletak di bagian Header.

Keunggulan dengan menggunakan cara ini kita tidak perlu menuliskan satu per satu sript HTML tapi cukup hanya dengan menuliskan Script CSS yang di butuhkan maka script CSS dapat digunakan di setiap tag HTML. Untuk lebih memahainya silahkan lihat contoh di bawah ini :

<head>

<title> Belajar tutorial CSS</title>

<style>

h3 {font-family : calibri; 

      color : red;

      font-style : italic}

</style>

</head>

<Body>

<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>

</body>

</html>

Dari contoh di atas dapat dilihat bahwa semua yang berada di dalam tag h3 akan memiliki apa yang telah di tuliskan pada bagian CSS di header tadi, yaitu akan memiliki font calibri, berwarna merah dan juga di cetak miring.

3. Yang ketiga adalah dengan menggunakan Linked CSS. Linked CSS adalah salah satu cara untuk memasukan menggunakan Script CSS dimana, sript html dipisahkan dengan sript CSS, lalu di hubungkan dengan link.

Untuk lebih jelasnya lagi silahkan ikuti petunjuk di bawah ini :

a. Buka notepad, notepad ini digunakan untuk menuliskan sript CSS.

lalu copy paste cript CSS berikut 

h3 {font-family : calibri; 

      color : red;

      font-style : italic}

 Setelah itu save notepad 

B. Buka notepad kembali, notepad yang satu ini di gunakan untuk menuliskan sript HTML.

Lalu copy paste sript HTML berikut 

<head>

<title> Belajar tutorial CSS</title>

 <link rel="stylesheet" href="Tulis nama file notepad Css yang telah di save" type="text/css">

</head>

<Body>

<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>

</body>

</html>

lalu save as file notepad tersebut di folder yang sama dengan file notepad CSS. Tulisan yang berwarna biru di atas mewajibkan anda untuk menuliskan nama fie notepad HTML yang telah ada simpan, Contoh : format.css