Bagi teman-teman yang lagi asik-asiknya dalam membuat website dengan menggunakan pemrograman HTML rugi rasanya belum mengenali CSS. Apalagi bagi teman-teman yang lagi skripsi .... hahahhaha pizzz.... Postingan ini saya buat juga demi teman saya yang lagi skripsi karena banyak dari teman2 yang skripsinya membuat website.
CSS merupakan sebuah bahasa pemrograman yang digunakan untuk memanagemen tampilan dari sebuah website. Dimana coding HTML yang kita buat akan di link kan ke sebuah file CSS untuk dapat merancang sebuah website nan indah di pandang oleh mata semua orang.
Baiklah kita akan mulai. Umumnya desain sebuah website itu adalah sebagai berikut :
<html>
<head>
<title>My Web</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outline">
<div id="header">
<h2>BELAJAR DESAIN WEB</h2>
</div>
<div id="content">
<table border='0'>
<tr>
<td colspan='2'><h1>Musim Pertama di Inggris, Terbaik dalam Karier Aguero</h1>
</td>
</tr>
<tr>
<td><p>Manchester - Mengasah bakat di Independiente dan mencuatkan nama di Atletico Madrid, Sergio Kun Aguero langsung unjuk kemampuan terbaik di musim pertamanya di klub Inggris, Manchester City.
Ia memang kalah dari Robin van Persie di bursa Player of the Year versi Asosiasi Pesepakbola Profesional (PFA). Tapi ia masuk Team of the Year, bersama Van Persie dan Wayne Rooner di lini depan.
Pemain 23 tahun itu sudah berhasil beradaptasi dengan tempat barunya. Sejak dibeli dari Atletico di musim panas lalu, dengan harga tinggi 45 juta euro, ia lulus ujian dan terus menjadi penyerang utama skuad Roberto Mancini. Ia tidak seperti Edin Dzeko, Carlos Tevez atau Mario Balotelli yang bergonta-ganti menjadi starter.
Menantu Diego Maradona ini telah terlibat dalam 31 pertandingan Liga Inggris, 28 di antaranya dari menit pertama. Hasilnya, ia mendulang 22 gol, hanya kalah dari Van Persie (27) dan Rooney (26).
Sebagai perbandingan, selama lima tahun memperkuat Atletico Madrid, paling banyak Aguero mencetak 20 gol di liga, yakni di musim 2010/2011. Di musim itu ia total menyumbang 27 gol untuk klub Spanyol itu, dari semua kompetisi. Angka itu adalah yang tertinggi yang pernah dibuat Aguero bersama Atletico dalam satu musim, seperti halnya di musim 2007/2008.
Tapi di musim ini Aguero sudah memperbarui rekornya sendiri. Termasuk 22 golnya di Premiership, ia sudah menghasilkan total 29 gol dari 45 pertandingan, dan Aguero masih punya setidaknya tiga pertandingan lagi sebelum City mengakhiri musimnya.
Aku sudah tahu Sergio sejak lama. Sebelum ke sini aku sudah tahu bahwa dia pemain yang fantastis. Jadi aku tidak heran kalau dia berhasil, demikian testimoni rekan Argentina Aguero yang juga bermain di City, Pablo Zabaleta.
Dia telah beradaptasi baik ke dalam tim ini. Dia orang yang luar biasa, sambung Zabaleta, seperti dilansir situs resmi The Citizens.
</p></td>
</tr>
</table>
</div>
<div id="sidebar">
<form name="form" method="post" enctype="multipart/form-data" action="proses.php">
<h3 align="center"><u>FORM LOGIN</u></h3>
<table border="1" align="center">
<tr>
<td>Nama :</td>
<td><input type="textfield" name="nama"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Daftar" name="submit">
</td>
</tr>
</table>
</form>
</div>
<div id="sidebar">
<h3 align="center"><u>LINK FAVORIT</u></h3>
</div>
<div style="clear:both">
</div>
<div id="footer">
<p>©2011 Membuat Template dengan CSS created by <a href="http://mardani-g4ul.blogspot.com">Hannif Mardani</a></p>
</div>
</div>
</body>
</html>
Setelah itu, buat file baru dengan nama style.css dan isikan coding berikut :
body{
width:1250px;
margin:5px auto;
background-color:#4c4e55; //backgrund warna coklat:
}
h2{
color:#FFFFFF;
font-size:22px;
}
h3{
color:#FF0000;
font-size:18px;
}
a{
color:#1A8DFF;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#outline{
margin:0 auto;
padding:0;
}
#header{
margin:0 auto;
padding:0;
color:white;
border:1px solid #000000;
background-color:blue;
border-radius:1em 1em 0em 0em;
}
#header h2{
color:#FFFFFF;
font-size:42px;
text-align:center;
}
#content{
margin:5 auto;
padding:0 5px;
float:left;
width:950px;
height:470px;
border:1px solid #000000;
background-color:yellow;//warna kotak kuning:
}
#content p{
font-size:12px;
font-family:verdana;
}
#sidebar{
margin:5 auto;
padding:0 5px;
width:250px;
height:170px;
float:right;
border:1px solid #C2DAFF;
background-color:#f4f4f4;
}
#footer{
margin:5px 0;
background-color:#f4f4f4;
border:1px solid #C2DAFF;
}
#footer p{
font-size:12px;
text-align:center;
}
Selamat mencoba teman, semoga bermanfaat ^_^
0 komentar:
Post a Comment