Blogger Widgets

Sabtu, 16 Mei 2015

membuat web dengan combinasi script html dan css

selamat datang lagi di minangmylife!
baiklah pada kesempatan kali ini saya akan membagikan tutorial cara membuat web dengan script html dan css.
jika temen-temen belum mengerti apa itu css silakan buka disini

tulis lah script bwah ini dalam format html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="latihan2.css">
</head>
<body>

<div id="image">
</div>
<img src ="gambar.jpg" width="1600px" height="400px">

<div id ="header">
<ul>
<li><a href="nav.html">home</a></li>
<li><a href="nav.html">news</a></li>
<li><a href="nav.html">contact</a></li>
<li><a href="nav.html">about</a></li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href="nav.html">Menu I</a></li>
<li><a href="nav.html">Menu II</a></li>
<li><a href="nav.html">Menu III</a></li>
<li><a href="nav.html">Menu IV</a></li>
</ul>
</div>

<div id ="section">
<h1><center> London </center></h1>
<p>
London is the capytal city of england. it is the most populouscity in the united kingdom,
with a metropolitan area of over13 million inhabitants.
</p>
<p>
standing  the river themes, london hes been a major settlement for two millennia,
its history going back to itsfuonding by the romans,who named it londitium.
</p>
</div>

<div id="footer">
<MARQUEE align="center" direction="right">Copyright © W3Schools.com<center</MARQUEE>
</div>
</body>
</html>

Kemudian tulis script dibawah ini dalam format css
#image
{
background-image : url("gambar.jpg");
padding-left:200Px;
heigt:200px;
}
#header{
background-color:#ff00b4;
color:white;
text-align:center;
padding: 5px;
padding-left:150px;
}
#nav{
line-height: 30px;
height:300px;
width:130px;
float:left;
padding:5px;
}
#section{
width :350px;
float:left;
padding:10px;
}
#footer{
background-color:#ff00a8;
color:white;
text_align:center;
padding :5px;
clear:both;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
float:left;
}
a:link, a:visited{
display:block;
widht:120px;
font-weight:bold;
color:#ff0060;
background-color:#ff004e;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active{
background-color:#ff00ae;
}

save kedua script dalam satu folder lalu buka script html mengunakan mozilla firefox.





nah ini itu lah tampilan hasil script yang telah kita buat!
sekian tutorial membuat web hari ini
salam minangmylife!










1 komentar:

  1. wah ini keren,
    aku coba yg ini....

    klo da lagi yg lebih y min

    BalasHapus