Animasi Text HTML

Sering kita Jumpai dalam beberapa blog/website terdapat animasi text.. seperti roll, text berjalan dll,
Nah  dalam kessempatan ini saya akan share script/cara pembuatannya..
1.Text Berkedip
==================================================
<blink>TEXT</blink>
TEXT
kode untuk perilaku text berkelip-kelip
==================================================
2.Text dari kanan ke kiri
==================================================
<marquee>TEXT</marquee>
Kode untuk perilaku gerakan dari kanan ke kiri
==================================================
3.Text dari kiri ke kanan
==================================================
<marquee direction="right">TEXT</marquee>
Kode untuk perilaku gerakan dari kiri ke kanan
==================================================
4.Text bergerak dari kanan ke kiri
==================================================
<marquee behavior="alternate">TEXT</marquee>
Kode untuk perilaku gerakan berjalan ke kiri dan ke kanan
==================================================
5.Text dari atas ke bawah
==================================================
<marquee direction="up">TEXT</marquee>
Kode untuk perilaku gerakan berjalan ke atas
==================================================
6.Text dari bawah ke atas
==================================================
<marquee direction="down">TEXT</marquee>
Kode untuk perilaku gerakan berjalan ke bawah
==================================================
7.Text bergerak dari atas ke bawah
==================================================
<marquee direction="up" behavior="alternate">TEXT</marquee>
Kode untuk perilaku gerakan berjalan ke atas dan ke bawah
==================================================
8.Text zigzag
==================================================
<marquee behavior="alternate" direction="up"
width="80%"><marquee
direction="right">TEXT</marquee></marquee>
Kode untuk perilaku gerakan terbang zigzag
==================================================
9.Text zigzag atas ke bawah
==================================================
<marquee behavior="alternate" direction="up"
width="80%"><marquee direction="right"
behavior="alternate">TEXT</marquee></marquee>
Kode untuk perilaku gerakan berjalan zigzag ke atas dan ke
bawah
==================================================
10.Text panah
==================================================
<marquee behavior="alternate"
width="10%">>></marquee>TEXT<marquee behavior="alternate"
width="10%"><<</marquee>
Kode perilaku untuk menampilkan tanda panah ke teks
==================================================
11.Text background berwarna animasi
==================================================
<font ><marquee direction="left"
style="background:BLUE">TEXT</marquee></font>
Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan
latar belakang warna, anda bisa merubahnya dengan kode warna
lain
==================================================
12.Text animasi border
==================================================
<marquee style="border:BLUE 2px SOLID">TEXT</marquee>
Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan
dikelilingi garis tepi (border)
==================================================
13.Text hidden marquee
==================================================
<marquee behavior="alternate"><marquee
width="150">TEXT</marquee></marquee>
Kode untuk perilaku gerakan berjalan dengan hanya
menampilkan bagian depan textnya saja atau hidden marquee
==================================================
14.Text animasi gelombang
==================================================
<marquee behavior=alternate direction=up scrollamount=2
scrolldelay=65 height=80 style="Textalign;filter:wave(add=0,phase=1,

freq=1,strength=15,color=.FFFFFF)"><center>TEXT<br>TEXT</c
enter></marquee>
Kode untuk perilaku gerakan berjalan seperti gelombang ombak
ke atas dan ke bawah
==================================================

Keterangan bagi yang suka ngeblog..
+ Ganti tulisan Text dengan tulisan yang akan di tampilkan sesuai keinginan.
Cara membuatnya :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah )
3. Copy Paste Script yang ada tinggal anda edit saja
4. Klik Simpan dan selesai
Ada variasi lain dari marquee lagi, yaitu ketika mouse sedang berada di area marquee teks akan berhenti
dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di
tambahkan sedikit program pada kolom marquee tsb. Kodenya di bawah ini :
========================================================
<table border="1" width="341" cellpadding="1" height="260">
<tr>
<td align="right">
<marquee direction="up" onmouseover="this.stop()" width="332" onmouseout="this.start()"
scrollamount="2" height="250">
<ul>
<li><a href='URL ANDA' target="_blank">KEREN KAN</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>
</ul>
</marquee>
</td>
</tr>
</table>
=========================================================

Nahhh banyak kan silahkan di coba satu persatu, oiya script marquee ini juga bisa di gunakan untuk selain teks.. misal gambar dll.

Read More

Format Teks HTML

• Tag Heading 

Atau di sebut juga dengan  tag <h.> . tag ini berfungsi sebagai ukuran font kepada judul seperti di MS word.

• Tag Paragraf

Tag Paragraf atau tag <p> digunakan saat ingin membuat kalimat/kata di paragraf baru.

Masih seputar editing teks, didalam bahasa html juga terdapat fitur seperti pada MS word, misal : 

• Bold dengan kode tag <b> text </b> 
• lalu ada italic dengan tag <i> text </i>
• kemudian Underline dengan tag <u> text </u>

Memberikan Efek Pada Font.

• Font color : digunakan untuk menambahkan warna pada font.

• Font face : digunakan untuk mengganti font.

• Background color : memberi warna background

• Font Size : Mengatur ukuran font sehingga dapat ditentukan sesuai selera.

Gambar di atas saya juga memakau tag <br /> : break line, berguna untuk memberi jeda paragraf.

• <ol> mendefinisikan daftar atau list, list ini bisa berupa numerik dan abjad. Di dalam tag <ol> terdapat tag <li>



• <img> tag yang digunakan untuk menampilkan gambar. format penulisan kodenya seperti gambar di bawah ini :





• <table> mendefinisikan tabel HTML.Dalam tag <table> terdapat tag <tr>,  dan <td>. <tr> mendefinisikan baris tabel. <td> mendefinisikan kolom tabel.

sumber gambar : www.w3schools.com

Read More

Belajar Menggunakan Adobe Dreamweaver

Pada postingan awal ini saya ingin membahas atau lebih tepatnya mengulang lagi apa yang sudah dipelajari di kampus..

Pada mata kuliah PPW (Pengenalan Perancangan Web) pertemuan pertama dan kedua saya beserta mahasiswa lainnya diajarkan dasar-dasar kode html menggunakan Adobe Dreamweaver.. dan benar saja,  saya baru pertama kali memakai adobe dreamweaver tapi beruntungnya saya sudah pernah otak atik blog jadi tau beberapa kode-kode html nya..

Beberapa kode diajarkan kepada kami, ternyata susah-susah-gampang saat memulainya namun lama-lama pasti kami akan terbiasa, berikut beberapa kode yang telah kami dapatkan :

komposisi yang paling awal adalah, bahwa setiap penulisan menggunakan tanda < dan diakhiri dengan > , format penulisannya seperti ini :

• <tag> .......... </tag>
• _..........

Nah itu adalah beberapa contohnya, beberapa tag dasar yang kami pelajari :

<HTML> 

tag ini dituliskan di awal dalam sebuah website dan kemudian di akhiri dengan </HTML>

<HEAD>

yaitu bagian paling atas dalam website, atau bagian header . lalu di akhiri dengan </HEAD>

<TITLE>

Tag ini berada diantara tag pembuka dan penutup <HEAD>. Kalimat / string yang berada di antara tag <TITLE> ini akan ditampilkan sebagai judul pada jendela browser. Diakhiri </TITLE>.

<BODY>

Tag ini ditulis di bawah tag </HEAD>, diantara tag <HTML> dan </HTML>. Tag ini berfungsi menampilakan isi halaman web. Diakhiri </BODY>

Maka urutannya seperti ini :

<HTML>

<HEAD>

<TITLE> Judul halaman <TITLE>

</HEAD>

<BODY>

Konten dari Web

</BODY>

</HTML>

Read More