Pengenalan CSS

Standard

Pada kesempatan yang lalu, penulis pernah membuat catatan yang berjudul “Membuat Halaman Web dengan HTML”. Dan pada pembahasan kali ini, akan membahas mengenai bahasa Cascading Style Sheet atau CSS. Bahasa CSS merupakan salah satu bahasa yang dapat digunakan dalam membangun sebuah web site. Dengan menggunakan CSS, halaman web akan tampak lebih menarik. Untuk kode program HTML yang digunakan pada pembahasan ini, sama dengan kode yang sudah ada di catatan sebelumnya. Bagi yang lupa dapat membuka kembali di https://salamunhasan.wordpress.com/2013/04/04/membuat-halaman-web-dengan-html/

Untuk menulis kode CSS, terdapat 3 macam bentuk yaitu :

1. Inline style sheet

2. Embedded style sheet

3. Linked style sheet.

Untuk lebih jauh memahami tiga bentuk tersebut, langsung saja kita bahas bentuk yang pertama yaitu Inline style sheet. Perhatikan kode HTML berikut!

<html>
<head>
<title>Halaman Foto</title>
</head>

<body>
<table width=”100%” height=”239″ border=”0″>
<tr>
<td height=”45″ colspan=”3″><p style=’color:black; font-size:200%;;text-align:center’>FOTO-FOTO</p></td>
</tr>
<tr>
<td width=”400″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer1.jpg” width=”400″ height=”300″ alt=”hummer1″ /></td>
<td width=”400″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer2.jpg” width=”400″ height=”300″ alt=”hummer 2″ /></td>
<td width=”402″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer3.jpg” width=”400″ height=”300″ alt=”hummer 5″ /></td>
</tr>
<tr>
<td height=”45″><p align=”center”>Gambar 1 </p></td>
<td height=”45″><p align=”center”>Gambar 2 </p></td>
<td height=”45″><p align=”center”>Gambar 3 </p></td>
</tr>
<tr>
<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer4.jpg” width=”400″ height=”300″ alt=”hummer 3″ /></td>
<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer5.jpg” width=”400″ height=”300″ alt=”hummer 4″ /></td>
<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer6.jpg” width=”400″ height=”300″ alt=”hummer 6″ /></td>
</tr>
<tr>
<td height=”45″><p align=”center”>Gambar 4 </p></td>
<td height=”45″><p align=”center”>Gambar 5 </p></td>
<td height=”45″><p align=”center”>Gambar 6 </p></td>
</tr>
<tr>
<td height=”45″ colspan=”3″><a href=”tugas4.html”>Kembali</a></td>
</tr>
</table>
</body>
</html>

Kode diatas merupakan file tugas.html yang di bahas pada catatan sebelumnya. Tetapi jika diperhatika terdapat perbedaan yaitu <p style=’color:black; font-size:200%;;text-align:center’>FOTO-FOTO</p>. Ini adalah bentuk Inline pada CSS. Coba anda telusuri pada kode diatas, dan perhatikan perbedaan yang terliat pada halaman webnya

foto-foto

Bentuk yang kedua adalah Embedded style sheet. Bentuk Embedded terlihat pada file tugas4.html yang isinya sebagai berikut

<html>
<head>
<title>CV</title>
<style> Gaya1{color:blue;font-size:100%;font-style:oblique}
Gaya2{color:white;font-size:100%;font-style:oblique;background-color:blue}</style>
<link href=’style.css’ rel=’stylesheet’ type=’text/css’>
</head>

<body>
<table width=”100%” height=”239″ border=”0″>
<tr>
<td height=”41″ colspan=”4″><marquee><Gaya1>*****</Gaya1><Gaya2> Selamat Datang </Gaya2><Gaya1>***** </Gaya1></marquee></td>
</tr>
<tr>
<td valign=”top” width=”77″ rowspan=”11″><a href=”tugas.html”><modelink>Lihat Foto</modelink></a> </td>
<td colspan=”2″><p style=’color:black; font-size:200%;;text-align:center’>CURRICULUM VITAE</p></td>
<td width=”178″ rowspan=”11″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\pas.jpg” alt=”pas foto” width=”178″ height=”218″ /></td>
</tr>

<tr>
<td width=”191″><model1>Nama</model1></td>
<td width=”528″><model1>Salamaun Hasan</model1> </td>
</tr>
<tr>
<td><model1>Tempat, Tanggal Lahir</model1> </td>
<td><model1>Indramayu, 14 Mei 1990</model1> </td>
</tr>
<tr>
<td><model1>Jenis Kelamin</model1> </td>
<td><model1>Laki-laki</model1></td>
</tr>
<tr>
<td><model1>Agama</model1></td>
<td><model1>Islam</model1></td>
</tr>
<tr>
<td><model1>Kewarganegaraan</model1></td>
<td><model1>Indonesia</model1></td>
</tr>
<tr>
<td><model1>Alamat</model1></td>
<td><model1>Pamayahan RT 12/03 Lohbener Indramayu</model1> </td>
</tr>
<tr>
<td><model1>Telepon</model1></td>
<td><model1>0859 2313 3250</model1> </td>
</tr>
<tr>
<td><model1>Latar Belakang Pendidikan</model1> </td>
<td><model1>1996-2002 : SD Negeri Pamayahan 2</model1> </td>
</tr>
<tr>
<td></td>
<td><model1>2002-2005 : SMP Negeri 1 Lohbener</model1> </td>
</tr>
<tr>
<td></td>
<td><model1>2005-2008 : SMA Negeri 1 Sindang</model1> </td>
</tr>

<tr>
<td height=”43″ colspan=”4″><marquee><Gaya1>#####</Gaya1><Gaya2> Halaman Curriculm Vitae </Gaya2><Gaya1>#####</Gaya1></marquee></td>
</tr>
</table>
</body>
</html>

Bentuk Embeddednya adalah kode

Gaya1{color:blue;font-size:100%;font-style:oblique}
Gaya2{color:white;font-size:100%;font-style:oblique;background-color:blue}

yaitu merupakan inisialisasi spesifikasi dari atribut, yang jika digunakan akan mengikuti spesifikasi yang ditentukan. Contoh dalam penggunaannya pada kode <Gaya1>*****</Gaya1><Gaya2> Selamat Datang </Gaya2><Gaya1>***** </Gaya1>. Coba anda cari kembali bentuk yang sama seperti ini!

Bentuk yang Linked style sheet juga terdapat pada file tugas4.html. Bentuk ini hampir sama dengan bentuk yang Embedded, tetapi inisialisasi spesifikasi ditempatkan pada file lain yang diberi nama *.css. Ciri dari bentuk linked adalah kode <link href=’style.css’ rel=’stylesheet’ type=’text/css’>. Kode ini menjelaskan bahwa file ini akan terhubung dengan file yang bernama style.css. Isi dari file style.css adalah sebagai berikut

model1{
font-family:arial,helvetica;
font-size:12pt;
font-style:oblique;
color:black;
}
modelink{
font-family:arial,helvetica;
font-size:12pt;
font-style:normal;
color:white;
background-color:black;
}
modelnama{
font-family:arial,helvetica;
font-size:12pt;
font-style:oblique;
color:black;
}

Contoh penggunaannya juga sama dengan yang Embedded yaitu dengan memberi tag awal dan akhir dengan nama spesifikasinya. Misalnya dalam file tugas4.html adalah sebagai berikut <model1>Nama</model1> atau <modelink>Lihat Foto</modelink>. Coba anda telusuri kembali pada file tugas4.html diatas.

Dengan perubahan seperti itu, maka tampilan web akan menjadi seperti berikut

cv

Demikian pengenalan mengenai CSS, mudah-mudahan bermanfaat. Kalo ada kesalahan dalam tulisan ini bisa disampaikan melalui komentar.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s