Info Harga Komputer dan Gadget

Membuat efek Link yang membesar saat disentuh Kursor pada dokumen HTML

Advertisement
advertisement
Tutorial CSS dan HTML - Membuat efek Link yang membesar saat disentuh Kursor  pada dokumen HTML
Halo sobat edikomputer sudah lama saya tidak posting tentang tutorial ya.., maklum masih sibuk dengan pekerjaan kemarin pas liburan lebaran malah sibuk dengan kegiatan lomba 17 agustus karena lebarannya pas bareng sama hari kemerdekaan RI Sih ya, oke tanpa menulis kata yang lebih panjang karena bakal puusing bacanya..

Kali ini saya akan memberikan sedikit tutorial tentang CSS dan HTML udah tau kan apa itu CSS? Kalo belum tau silahkan Baca disini

Sesuai dengan judul Kita akan membuat sebuah link yang menerapkan efek membesar ketika kursor menyentuh link tersebut, nah untuk membuatnya kita akan membuat kode CSS Seperti ini :
Ini adalah kode utama sebuah link
a{
color:#000;
font-size:15px;
}
dan ini adalah kode CSS yang akan menerapkan efek membesar pada teksnya
a:hover {
color:#000;
font-size:20px;
}
Nah lalu bagaimana menerapkannya pada dokumen HTML?
Buka program Notepad yang pada setiap komputer pasti ada, kemudian buatlah struktur kode seperti di bawah ini :
<style type="text/css">
a{
color:#000;
font-size:15px;
}
a:hover {
color:#000;
font-size:50px;
}
</style>

<body>
<a href="http://www.edikomputer.com">Text Link dengan Efek Membesar</a>
</body>
Kemudian Save dengan Nama test.html, ingat gunakan extensi .html bukan .text karena kita akan membukanya di browser

Setelah itu Buka dokumen tes.html dengan menggunakan browser sobat Google Chrome atau Firefox, dan coba arahkan kursor ke teks yang tadi di buat maka link akan berubah menjadi besar

Keterangan Kode :
Teks Warna merah merupakan Kode CSS
Teks Warna Biru adalah kode HTML

Nah mungkin ini dulu pelajaran CSS dan HTML kita kali ini semoga memberi wawasan buat para pembaca setia edikomputer
advertisement

2 comments:

Icoes Ephraem said...

Wah pantesan blog yg ini jarang posting :D, ternyata lagi ada project lain :P..

Sorry ed out of topic coment ane :D.

Snutzpark said...

mohon maaf mas.. saya minta tolong untuk link snutzpark domainnya di ganti .com yah.. jadi http://www.snutzpark.com/
trimakasih.. saya tunggu 1X48 jam

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan