Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama tugas.css
body {
margin: 10px auto;
width: 750px;
}
header {
height: 80px;
display: block;
border: 1px solid green;
}
nav{
float: top;
width: 750px;
height: 80;
display: block;
border: 1px solid blue;
}
article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:500px;
height: 330px;
border: 1px dashed red;
}
section {
width: 500;
height: 370px;
display: block;
border: 1px solid red;
}
footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}
aside{
float: right;
margin-top: 20px;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px dashed black;
}
footer{
clear: both;
height: 20px;
display: block;
border: 1px solid green;
}
Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama tugas.html
<!DOCTYPE HTML>
<html lang en="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tugas.css" type="text/css" />
</head>
<body>
<header>
Header
</header>
<nav>
nav
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Maka, akan diperoleh hasil sebagai berikut:
Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama coba2.css
body {
margin: 10px auto;
width: 750px;
}
header {
height: 80px;
display: block;
border: 1px solid green;
}
nav{
background-color:aqua;
float: top;
width: 750px;
height: 45px;
display: block;
border: 1px solid blue;
}
home{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:600px;
height:25px;
width:40px;}
news_media{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:650px;
height:25px;
width:100px;
}
tutorials{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:760px;
height:25px;
width:55px;
}
tips_tricks{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:825px;
height:25px;
width:105px;}
download{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:940px;
height:25px;
width:75px;}
article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:280px;
height: 330px;
border: 1px solid black;
}
section {
background-color:grey;
width: 500;
height: 370px;
display: block;
border: 1px solid grey;
}
footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}
aside{
background-color:white;
float: right;
margin-top: 20px;
margin-right: 20px;
width: 400px;
height: 330px;
border: 1px solid black;
}
aside2{
background-color:aqua;
float: right;
margin-top: 45px;
width: 400px;
height: 165px;
border: 1px solid black;
}
footer{
background-color:aqua;
padding:10px;
height:40px;
footer2{
position:absolute;
margin-left:500px;
width:300px;
height:20px;
}
}
Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama coba2.html
<!DOCTYPE HTML>
<html lang en="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="coba2.css" type="text/css" />
</head>
<body>
<header>
<img src = "Capture2.jpg" width = "750" height = "80px">
</header>
<nav>
search : <input type="text" name="sch">
<home>
<font size="2" color="white"><b>Home</b></font>
</home>
<news_media>
<font size="2" color="white"><b>News & Media</b></font>
</news_media>
<tutorials>
<font size="2" color="white"><b>Tutorials</b></font>
</tutorials>
<tips_tricks>
<font size="2" color="white"><b>Tips & Tricks</b></font>
</tips_tricks>
<download>
<font size="2" color="white"><b>Download</b></font>
</download>
</nav>
<section>
<article>
<img src = "Capture.jpg" width="280px" height="330px">
</article>
<aside>
<font color="black">
Nama saya Yunita Chandra Kartika. Orang biasanya memanggil saya tika atau yunita.
Alamat rumah saya ada di Desa Sumberbening RT 03 RW 01 Kec. Balerejo Kab. Madiun.
Namun sekarang saya tinggal di Malang tepatnnya di Jalan Terusan Ambarawa No 31.
Karena sekarang ini saya sedang kuliah di Universitas Negeri Malang.
<aside2>
<Font color = "blue" size = "5">Events : </b></font>
<br/>
<br/>
<a href="desain">Lomba Makan Krupuk</a>
<br/>
<a href="desain">Lomba Ngupil</a>
<br/>
<a href="desain">Wisuda PTI07</a>
<br/>
<a href="desain">Audisi Mahasiswa Abadi</a>
<br/>
</aside2>
</aside>
</section>
<footer>
<footer2>
<a href="desain">Home</a> |
<a href="desain">News & Media</a> |
<a href="desain">Tutorials</a> |
<a href="desain">Tips & Tricks</a> |
<a href="desain">Download</a>
</footer2>
<p align="right">
yunitachandrakartika.blogspot.com
</footer>
</body>
</html>
Maka, akan diperoleh hasil sebagai berikut:
Tidak ada komentar:
Posting Komentar