Está en la página 1de 3

Membuat Tampilan Web

Menggunakan CSS

Syntax ne bisa disimpan menggunakan nama tugas.css.

#header1 { border: 1px solid blue;


height: 90px; }
width: 1327px; #data2 {
background- float: left;
image:url(image/teknik.jpg); margin-left:250px;
border:1px solid blue; width: 1077px;
} height:220px;
#header2 { background-
height: 55px; image:url(image/Untitled-1.jpg);
width: 1327px; border: 1px solid Blue;
background-color:#78C3EA; }
border:1px solid blue; #menu {
} float:top;
#picture { margin-left:980px;
float :left; width:347px;
width: 250px; height:20px;
height: 350px; background-color:blue;
background- border:2px solod black;
image:url(image/roket.jpg); }
border: 1px solid blue; #footer {
} clear: both;
#data1 { height: 60px;
float: left; width: 1327px;
margin-left:250px; background-
width: 1077px; image:url(image/teknik2.jpg);
height: 128px; border: 1px solid blue;
background-color:#78C3EA; }
Setelah itu bisa dipanggil menggunakan kode html seperti dibawah ini:

<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Teknik Elektro</title>
<link rel="stylesheet" href="tugas.css" type="text/css" />

</head>
<body>

<div id = "header1">
</div>

<div id = "header2">
<div id="menu" align="center">
<a href><font color="white"> Home || News & Media || Tips & Trik ||
Downloads</a></font>
</div>

<div id="search">
<font color="blue">Search : </font><input name="search" size="20"
type="text"/>
</div>
</div>

<div id="picture">
<div id="data2">
<h2 align="left"> ROKET </h2>
Roket ialah proyektil yang digerakkan dengan reaksi motor dan dapat bekerja di
luar atmosfer.<br></br>
Sebagai bahan penggerak biasanya digunakkan bahan bakar kimia,serta oksigen
yang gunanya membantu dalam pembakaran bahan bakarnya.<br></br>
Seperti halnya jet, roket itu juga digerakkan dengan reaksi motor.<br></br>
Namun roket tidak dapat disamakan dengan jet, karena jet menggunakkan
oksigen untuk pembakaran bahan bakarnya,
dan diterbangkan hanya dalam atmosfer saja.<br></br>
Reaksi motor suatu roket tersebut didasarkan pada Hukum Newton ketiga, yang
dikenal dengan nama Hukum Gravitasi Newton.
</div>

<div id="data1">
<font color="blue"> Document : </font>
<ul>
<font color="blue"><li><a href="link1.html">Membuat Kalkulator
menggunakan VB.net</a>
<font color="blue"><li><a href="link2.html">Karya ilmiah IT</a>
<font color="blue"><li><a href="link3.html">Rancangan Kereta
Maglev</a></ul></font>
</div>
</div>

<div id="footer" align="center">


<
font color="white" > Home | News & Media | Tutorials | Tips & Tricks | Downloads
</font><br></br>
<h5 align="right"> <font color="white">&copy Devita Anjilia </h5></font>

</div>

</body>
</html>

Selamat Mencoba......!!!!!

By: Devita