Modul Praktikum CSS – Cara Cerdas Belajar CSS

(1)

PRAKTIKUM

: CSS Links

NAMA

: ___________________________________

KELAS

: ___________________________________

TANGGAL PRAKTIKUM

: ___________________________________

A.

TUJUAN

1.

Siswa dapat mengenal, memahami serta dapat melakukan pengaturan CSS link

B.

DASAR TEORI

Hyperlink atau juga sering disebut dengan Link adalah salah satu metode yang dibuat

dalam web site untuk memperkaya informasi yang ditampilkan, karena akan dapat

menciptakan beberapa hubungan dari web yang kita bangun menuju web-web yang ada diluar.

Selain itu juga akan lebih memperkaya informasi yang akan ditampilkan di dalam halaman web.

Di dalam web HTML, tag yang digunakan untuk menciptakan link adalah sebagai berikut:

<a href=”alamat_file.htm”> ...Pemicu… </a>

Pada Tag diatas Anda dapat memasukkan file yang akan dijadikan target link pada attribut

href, sedangkan pemicu merupakan kata pemicu yang digunakan atau dapat dimasukkan

berupa gambar sebagai pemicunya. Untuk melakukan pengaturan Link, HTML menyediakan

atribut sebagai berikut:

Atribut

Keterangan

link Keadaan awal pemicu link

vlink Keadaan pemicu link setelah dikunjungi alink Keadaan pemicu link yang aktif

Berikut adalah contoh pengaturan standar pada halaman web HTML menggunkan nilai alink,

link, dan vlink.

<html>

<head> <title>Pengaturan pada link</title></head> <body alink=”red” link=”green” vlink=”yellow”>

<a href=”http://www.google.co.id”> Mesin pencari Google </a> </body>

</html>

(2)

Selector

Keterangan

a:link Untuk warna link yang belum diakses a:visited Untuk warna link yang telah diakses a:active Untuk warna link ketika link diklik

a:hover Untuk warna link ketika mouse berada diatasnya

Berikut adalah syntax penulisan pada CSS:

a:link { property: value } a:visited{ property: value } a:active { property: value } a:hover { property: value }

Apabila menggunakan class selector, syntaxnya menjadi:

a.class:link { property: value } a.class:visited{ property: value } a.class:active { property: value } a.class:hover { property: value }

Dari syntax diatas, Anda dapat menggunakan semua property yang berkaitan dengan

pengaturan teks, font, background maupun border.

Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu

mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada

teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk

meninggalkan warna link ini apabila warna latar belakang menyebabkan teks anda yang diberi

link jadi sulit terbaca. Berikut ini adalah pilihan formatting yang umum digunakan pada link:



color



text-decoration



font-weight



font-style



font-family



font-size

(3)

C.

PRAKTIKUM

Ketentuan Praktikum:

1. Penggunaan atribut-atribut Link CSS

<title>Percobaan link CSS</title> <style type="text/css">

a:link{

color:green;

text-decoration:none; }

a:active{

color:purple;

a:visited{

color:yellow;

a:hover{

color:black;

text-decoration:underline; }

</style> </head>

<body>

<a href=”http://www.google.co.id” target="_self"> Mesin pencari Google </a> </body>

</html>

1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser.

(4)

2. Hyperlink berganti warna background saat dilewati mouse

<title>Pengaturan pada link background</title> <style type="text/css">

a:link{ text-decoration:none; color:green;

}

a:active{

text-decoration:none; color:blue;

}

a:visited{

text-decoration:none; color:orange;

}

a:hover{ color:black;

background-color:orange; text-decoration:underline; }

</style> </head>

<body>

<td><a href="#">Arahkan mouse ke sini</a></td> </tr>

<tr>

(5)

3. Hyperlink dengan property text transform dan text decoration

<title>Pengaturan pada link</title>

}

a:active{

text-decoration:none; color:#660000; }

a:visited{

text-decoration:none; color:#660033; }

a:hover{

font-weight:bold;

text-transform:uppercase;

text-decoration:underline overline; color:#000000;

background-color:#CCFF00; }

</style> </head>

<body>

<tr>

(6)

4. Hyperlink Menggunakan List

margin: 0px; padding: 0px; list-style: none; }

.menu li { margin-bottom: 3px; } /* this puts some space in between the buttons */

.menu a:link, .menu a:visited {

display: block; /* this code allows a width or height to be set */ width: 150px;

color: #3366ff; /* this defines the color of the link text */

border: solid 2px #666666; /* this defines the color and width of the border */ background: #eeeeee; /* this defines the background color */

text-align: center; /* this defines the text alignment */

padding: 3px; /* this puts some space between the text and border */ text-decoration: none; /* this removes the underline */

font: 9pt Verdana, Arial, Helvetica, sans-serif; /* this defines the font */ }

.menu a:active, .menu a:hover { background: #000000;

color:#ffffff; }

</style> </head> <body>

(7)

5. Hyperlink Menggunakan border colors untuk memberi ilusi pada 3D "button"

margin: 0px; padding: 0px; list-style: none; }

.menu li { margin-bottom: 3px; }

.menu a:link, .menu a:visited { display: block;

width: 150px; color: #000000;

border-left: solid 3px #cccccc; border-top: solid 3px #eeeeee; border-right: solid 3px #888888; border-bottom: solid 3px #666666; background: #aaaaaa;

text-align: center;

padding: 2px 3px 4px 3px; text-decoration: none;

font: 9pt Verdana, Arial, Helvetica, sans-serif; }

.menu a:active, .menu a:hover { border-left: solid 3px #888888; border-top: solid 3px #666666; border-right: solid 3px #cccccc; border-bottom: solid 3px #eeeeee; background: #999999;

padding: 3px; }

</style> </head> <body>

(8)

6. Image Rollover

Note:

Ukuran image: 116 x 37 (Pixel)

ImageLink.css

a:link, a:visited,a:active{ color:#1184D5;

text-decoration:none;

background-image:url("btn_hijau.gif"); background-repeat:no-repeat;

padding: 0.5em; margin:0.5em; display:block; }

a:hover{ color:#FD3E0B; text-decoration:none;

background-image:url("btn_kuning.gif") ; background-repeat:no-repeat;

(9)

D.

KESIMPULAN

<html>

<head><title>CSS Link Image</title>

<body>

</tr> <tr>

<a href="about_me.html"><b>About Me</b></a> </td>