tugas praktikum pemrograman web ke-4

Source Code

Css File

body{
margin : 10px auto;
width : 900px;
}

header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}

header{
height: 90px;
width: auto;
background-image : url(images/header.jpg);
}

logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/um2.png);
}

te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}

um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/um.jpg);
}

nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}

search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}

box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}

home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}

home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}

news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}

tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}

tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}

download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}

pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/pict3.jpg);
}

article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}

info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}

footer{
clear : both;
height : 35px;
background-image : url(images/footer.jpg);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}

linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}

linkmenu a{
padding: 2px 0px 2px 5px; display: block;

margin: 0px 0px 1px; color: #ffffff;
}

linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}

list{
list-style-position: inside;
}

Html File

<!Doctype HTML>
<html lang=”en”>

<HEAD>
<TITLE>Desain Layout Halaman Web</TITLE>
<link rel=”stylesheet” href=”praktikum.css” type=”text/css” />
</HEAD>

<BODY>

<HEADER>
<LOGO></LOGO>
<TE>TEKNIK ELEKTRO</TE>

</HEADER>

<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type=”text” size=”20″ />
</BOX>
<LINKMENU>
<HOME><a href=”#” target=”_blank” title=”Halaman Utama”>Home</a></HOME>
<NEWS><a href=”#” target=”_blank” title=”Baca Berita dan Info Media Terbaru”>News & Media</a></NEWS>
<TUTORIAL><a href=”#” target=”_blank” title=”Tutorial Belajar”>Tutorial</a></TUTORIAL>
<TIPS><a href=”#” target=”_blank” title=”Tips-tips dan trik-trik terkini”>Tips & Trick</a></TIPS>
<DOWNLOAD><a href=”#” target=”_blank” title=”Mengunduh Data”>Download</a></DOWNLOAD>
</LINKMENU>
</NAV>

<SECTION>
<PICT></PICT>
<ARTICLE>
</ARTICLE>
<EVENT><a href=”http://www.um.ac.id&#8221; target=”_blank” title=”The Learning University”><UM></UM></a>
<B> &nbsp ELECTRO EVENT :</B>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>
</FOOTER>
</BODY>
</HTML>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s