Yes, I am: Membuat HTML Sederhana dengan Menggunakan CSS

Assalamu'alaikum ..
Disini saya akan menjelsakan tentang pembuatan HTML sederhana dengan menggunakan CSS. Seperti yang kita ketahui sebelumnya, dalam membuat sebuah tampilan berbasis web, dikhususkan menggunakan suatu file tertentu untuk dapat mendukungnya, yaitu HTML dan CSS.

Lalu, apa fungsi dari CSS itu untuk sebuah halaman web HTML?
Jawabannya adalah karena :
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
- Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
- Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
- Dapat berkolaborasi dengan JavaScript.
- Digunakan dalam hampir semua web browser.

Berikut adalah contoh penggunaan CSS dalam HTML.
Sebelumnya, kita membuat coding yang kita buat pada notepad ++ seperti di bawah ini :

<html>
<head>
<style>
body{

background-image: linear-gradient(top, #a7ccfa 25%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -o-linear-gradient(top, #a7ccfa 25%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -moz-linear-gradient(top, #a7ccfa 25%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -webkit-linear-gradient(top, #a7ccfa 25%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -ms-linear-gradient(top, #a7ccfa 25%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), color-stop(0.5, #00ffff), color-stop(0.75, #9900ff), color-stop(0.9, #ff00ff) ); 
background-image: -webkit-gradient( 
linear, 
left top, 
left bottom, 
color-stop(0.2, #DBEBFF), 
color-stop(0.5, #00ffff), 
color-stop(0.75, #9900ff), 
color-stop(0.9, #ff00ff) ); 
padding: 10px;
color: #000000;
width: 750px;
padding: 15px 50px 50px 50px;

border-radius: 30px;
margin: auto;
margin-top: 100px;

border: 5px solid #080225;
-moz-box-shadow: 0px 0px 25px black;
-webkit-box-shadow: 0px 0px 25px;
}

.cobacss{
margin-top: -17px;
width: 50px;
float: right;

text-align: center;
padding: 10px 0;
}
table{
font-size: 20px;
}
tr {
vertical-align: top;
}
</style>
</head>
<body>

<div class='Pujiutami'>
<div class='cobacss'>
</div>
<h1 style="background-image: linear-gradient(top, #ff00ff 20%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -o-linear-gradient(top, #ff00ff 20%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -moz-linear-gradient(top, #ff00ff 20%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -webkit-linear-gradient(top, #ff00ff 20%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -ms-linear-gradient(top, #ff00ff 20%, #00ffff 50%, #9900ff 75%, #ff00ff 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #ff00ff), 
color-stop(0.5, #00ffff), color-stop(0.75, #9900ff), color-stop(0.9, #ff00ff) );
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #ff00ff),
 color-stop(0.5, #00ffff), color-stop(0.75, #9900ff), color-stop(0.9, #ff00ff) );
padding: 10px; color: #000000;border-bottom: 6px solid #1c058e;">
CURRICULUM VITAE</h1>
<div>

<title>Curriculum Vitae</title>
<body>
<font color=black face=times new roman size=5>
<pre>
<p align="center">
<img src="foto.jpg" align="left" height="180" width="120"/></p>
<table width="600" border="6"  cellpadding="7" cellspacing="2" align="center" bgcolor="brown">
<tr bgcolor=#9900ff><td align="left"><b>Nama</b></td>
<td align="left"><b>Puji Utami</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Jenis Kelamin<b/></td>
<td align="left"><b>Perempuan</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Address</b></td>
<td align="left"><b>Jalan Tebet Barat RT 015 Rw 01 N0.97 Jakarta Selatan 12810</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Telepon</b></td>
<td align="left"><b>08997483626</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Agama</b></td>
<td align="left"><b>Islam</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Tempat Tanggal Lahir</b></td>
<td align="left"><b>Jakarta, 29 September 1991</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Pendidikan Formal</b></td>
<td align="left"><b>SDN Tebet Barat 05 Pagi   1997-2003
         SMP Negeri 73 Jakarta   2003-2006
         SMA Negeri 37 Jakarta    2006-2009
         Universitas Gunadarma Depok  2009</b></td></tr>
<tr bgcolor=#9900ff><td align="left"><b>Pendidikan Non Formal</b></td>
<td align="left"><b>-     Lembaga Bahasa LIA, Jakarta          2007-2008
        - Seminar Industri Music Indonesia,   Universitas Gunadarma    2010
        - Workshop Introduction to XML,
      Universitas Gunadarma Depok            2010
        - Oracle, Universitas Gunadarma    2010
        - Seminar Uni-Industry Collaboration
      Universitas Gunadarma Depok           2010</b></td></tr>
</b></table>
<center>
<h1>
<a href="http://tamipujiutami.blogspot.com">My Blog</a></h1>
</center>
</font>
</pre>
</body>
</html>

Dan hasilnya adalah seperti dibawah ini :

Selamat mencoba :)

Yes, I am

Senin, 22 April 2013

Membuat HTML Sederhana dengan Menggunakan CSS

Tidak ada komentar:

Posting Komentar