Menghias HTML dengan CSS

Diposting oleh Unknown di 06.56


Cascading Style Sheet (CSS) adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.


Pada tulisan sebelumnya, telah dibuat tutorial membuat CV pada website. Saat ini saya akan menunjukkan CSS pada script CV pada website yang telah saya buat sebelumnya.

Produk :

Website Curiculum Vitae.

Persiapan:

Siapkan Notepad++ sebagai lembar kerja editor. Pastikan telah menginstal browser Google Chrome atau Firefox pada pc/laptop.

Setelah semua persiapan dilakukan, saatnya untuk mengkoding. Silahkan buka Notepad++ kemudian ketikan script dibawah ini untuk halaman pertama:

1:  <head>  
2:  <style>  
3:  #wrapper{  
4:  height: 1048px;  
5:  width: 1200px;  
6:  background-image: url('spongebob-fresh-hd-wallpaper.jpg');  
7:  background-repeat: no-repeat;  
8:  margin: 0 auto;  
9:  background-size:1200px;        
10:  font-family:Impact, Charcoal, sans-serif;        
11:  background-color: rgb(118, 206, 241);background-position-y: 292px;  
12:    
13:  }  
14:  .box {  
15:  margin: 31px 31px 31px 31px;  
16:  width: 580px;  
17:  background: #fff;  
18:  padding: 20px;  
19:  border-radius: 12px;  
20:  }  
21:    
22:  #title {  
23:  padding-top: 10px;  
24:  text-align: center;  
25:  font-size: 23px;  
26:  }    
27:  #title h1 {  
28:  font-size: 2em;  
29:  }  
30:  table {  
31:  width: 580px;  
32:  }  
33:  table td{  
34:  vertical-align:top;  
35:  }  
36:  </style>  
37:  </head>  
38:  <body>  
39:  <div id='wrapper'>  
40:  <div id='title'><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>        
41:  <table style="  
42:    position: absolute;  
43:    right: -51px;  
44:    top: 196px;  
45:  "><tbody><tr><td><img src="mio cantik.jpg" style="  
46:    width: 330px;  
47:  "></td></tr></tbody></table>  
48:  <div class='box'>  
49:  <table>  
50:  <tr><td colspan="3"><h3>Biodata</h3></td></tr>  
51:  <tr><td>Nama         </td><td>:</td><td>Nur Putri Agustiyani</td></tr>  
52:  <tr><td>Tempat / Tanggal lahir</td><td>:</td><td>Jakarta, 18 Agustus 1991</td></tr>  
53:  <tr><td>Jenis kelamin     </td><td>:</td><td>Perempuan</td></tr>  
54:  <tr><td>Alamat        </td><td>:</td><td>Perum. Depok Mulya II jalan kaimana blok AF-12<br/> Beji-Depok 16421</td></tr>  
55:  <tr><td>Kewarganegaraan        </td><td>:</td><td>Indonesia</td></tr>  
56:  <tr><td>E-mail        </td><td>:</td><td>putri.agustiyanie@gmail.com</td></tr>  
57:  </table>  
58:  </table>  
59:    
60:  </div><a href='hal2.php' style="float: right;margin-right: 112px;">Halaman Berikutnya >></a>  
61:    
62:  <div class='box'>  
63:  <table>  
64:  <tr><td colspan="3"><h3>Pendidikan Formal</h3></td></tr>  
65:  <tr><td>1997 - 2003      </td><td>:</td><td>SDIT Nurul Fikri Depok</td></tr>  
66:  <tr><td>2003 - 2006      </td><td>:</td><td>SMPIT Nurul Fikri Depok</td></tr>  
67:  <tr><td>2006 - 2009      </td><td>:</td><td>Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
68:  <tr><td>2009 - sekarang        </td><td>:</td><td>Fakultas Ilmu Komputer Jurusan Sistem Informasi<br/> Universitas Gunadarma</td></tr>  
69:  </table>  
70:  </div>  
71:    
72:  <div class='box'>  
73:  <table>  
74:  <tr><td colspan="3"><h3>Pengalaman Kerja/Organisasi</h3></td></tr>  
75:  <tr><td>2006 - 2009      </td><td>:</td><td>Sekretaris Jendral Organisasi Intra Sekolah (OSIS)<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
76:  <tr><td>2008         </td><td>:</td><td>Peserta magang bagian informatika unit rekam medis<br/> Rumah Sakit Sofa Marwa Depok</td></tr>  
77:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler paduan suara<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
78:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler komputer<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
79:  <tr><td>2012 - sekarang        </td><td>:</td><td>Asisten tetap Laboratorium Pengembangan Pengolahan Citra<br/> Universitas Gunadarma</td></tr>  
80:  </table>  
81:  </div>  
82:  </div>   
83:    
84:  </body>  
85:

Pada contoh program di atas, script untuk CSS dimulai dari tag <style> sampai </style>.

Berikut adalah penjelasannya:

· #wrapper{}
Digunakan untuk mendeklarasikan selektor ID 'wrapper'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.

· .box{}
Digunakan untuk mendeklarasikan class 'box'. Class 'box' ini dapat diterapkan di beberapa tag/bagian. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan class 'box' tersebut.

· #title{}
Digunakan untuk mendeklarasikan selektor ID 'title'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.

· #title h1{}
Digunakan untuk mendeklarasikan selektor ID 'title h1'. Title dalam script ini berupa judul utama web, yaitu 'Nur Putri Agustiyani' dan pada baris selanjutnya '@mioagustiyani'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.


Untuk hasil akhirnya adalah sebagai berikut:


Demikianlah tutorial website sederhana dengan menggunakan script CSS. Semoga bermanfaat. Terima kasih..


0 komentar:

Posting Komentar