Assalamu'alaikum warohmatulloh wabarokaatuh Sobat saya punya Catatan code untuk modifikasi tentang pengetahuan link yang saya dapat dari Master Rio Astamal dan Bengkel Internet PENS-ITS dan dari para Master Lainnya ok langsung saja
Berikut penjelasan singkat tentang link
Tag link <a href ="url" </a> yang pada dasarnya (tanpa modifikasi CSS) berwarna biru dan memiliki garis bawah.
Contoh
<a href="www.google.com">Ini link ke google.com</a>
hasil
Ini link ke google.com
Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent", "_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi atribut default dari target adalah "_self" dimana alamat website akan dibuka pada window yang sama.
Contoh link dengan atribut target="_blank"
<a target="_blank" href="http://hudori123.blogspot.com">Catatan Sederhana</a>
Contoh link dengan atribut target="_self"
<a href="http://hudori123.blogspot.com.
" target="_self">Catatan Sederhana </a>
tapi kalau link sudah dimodifikasi biasa nya menggunakan code metode Hover akan tetapi Selain hover ada beberapa metode lainnya yaitu visited dan unknow.
Visited akan menampilkan warna yang ditentukan apabila link terebut sudah pernah diklik sebelumnya.
Sedangkan unknow seperti katanya “unknow” maka akan merujuk pada link yang tidak diketahui metodenya.
Berikut ini adalah kumpulan code penggunaan CSS dengan link. menggunakan Code Hover
ingat sobat saya hanya menuliskan code Css nya yang biasa nya di tulis antara dibawah tag <head> dan di atas Tag< /head> dan juga Tag link nya dibawah tag <body>
jadi kalau sobat menulisnya dengan seluruh Tag supaya berfungsi
Contoh
<html>
<head>
<title>Efek link</title>
<style type="text/css">
body{font-family: verdana; font-size: 12px} a{color: green; text-decoration: none} a.Catatan_sederhana{color: green; text-decoration: underline} a:hover{color: white; background-color: green} a:hover.Home{color: white; font-weight: bold; background-color: green}
</style>
</head>
<body>
<p>Berikut ini adalah contoh penggunaan class dalam tag-tag tertentu saja.</p>
<p><a href="#">catatan sederhana</a></p>
<p><a href="#" class="Catatan_sederhana">Ini link dengan class</a></p>
<p><a href="#" class="Home">Ini link dengan class yang ada di atribut hover</a></p>
</body>
</html>
sekarang sobat Praktek dibawah ini Kumpulan code Css nya
Code pertama
<head>
<STYLE type="text/css">
A:link {color : green;}
A:hover { color : blue;}
</STYLE>
</head>
Code kedua
<style type="text/css">
a{color: red; text-decoration: none}
a:hover{color: green; background-color: yellow; font-weight: bolder}
</style>
code link css pake Class
code pertama
<head>
<style type="text/css">
body{font-family: verdana; font-size: 12px} a{color: green; text-decoration: none} a.Catatan_sederhana{color: green; text-decoration: underline} a:hover{color: white; background-color: green} a:hover.Home{color: white; font-weight: bold; background-color: green}
</style>
</head>
<body>
<p>Berikut ini adalah contoh penggunaan class dalam tag-tag tertentu saja.</p>
<p><a href="#">Catatan sederhana</a></p>
<p><a href="#" class="Catatan_sederhana">Ini link dengan class</a></p>
<p><a href="#" class="Home">Ini link dengan class yang ada di atribut hover</a></p>
</body>
code kedua
<HEAD>
<STYLE>
.leftlinks {
border:2px solid #22476C;
padding:5px;
margin:5px;
text-align:middle;
background-color:#blue;
width:185px;
}
.leftlinks a {
display:block;
margin:2px 0px;
border-top:2px solid #4C86C0;
border-left:3px solid #4C86C0;
border-right:3px solid #22476C;
border-bottom:3px solid #22476C;
padding: 4px 10px;
text-align:center;
background-color:#blue;
color:#EDEDED;
text-decoration:none;
}
.leftlinks a:link {
color:#EDEDED;
}
.leftlinks a:visited {
color:#EDEDED;
}
.leftlinks a:hover {
display:block;
margin:3px 0px;
border-top:3px solid #22476C;
border-left:3px solid #22476C;
border-bottom:3px solid #4C86C0;
border-right:3px solid #4C86C0;
padding: 5px 3px 3px 11px;
text-align:center;
background-color:#4C86C0;
color:#EDEDED;
text-decoration:none;
}
</STYLE>
</HEAD>
<BODY>
<div class="leftlinks" style="font-style: italic; width: 236px; height: 296px; color: #FF00FF; border: 3px solid #000000; background-color: #000000">
<a href="#">nama artikel</a>
<a href="#">nama artikel</a>
<a href="#">nama artikel</a>
</div>
ini code link di buat pake tabel di tulis antara Tag <Body>
<TABLE border="1" width="151" height="36">
<TR style="color: #C0C0C0; border-style: groove; border-width: 1px; background-color: #FFFF00">
<TD width="141" bgcolor="#FF9900"> <a href="<a href="http://hudori123.blogspot.com.">
<span style="text-decoration: none"><font size="4">Catatan Sederhana</font></span></a></TD></TR>
</table>
ket
# / nama artikel ganti dengan url sobat dan nama artikel url nya
misal nya url http://hudori123.blogspot.com dan nama artikel catatan sederhana
Sekarang tinggal sobat Praktek Modifikasi sendiri
Selamat belajar
Alhamdulillah Catatan sederhana Code Css Membuat Efek Pada Link telah selesai Mohon maaf jika ada kesalahan wasalamu'alaikum warohmatulloh wabarokaatuh
Artikel yang Lainnya
penjelasan Tentang link
Membuat Backlink dan eksternal Link
Membuat Tabel link
Modul Css Sederhana
No comments:
Post a Comment