<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Rumah Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>SELAMAT DATANG</MARQUEE></info>
</header>
<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<materi><a href="#" target="_blank" title="Materi Kuliah">Materi</a></materi>
<jurnal><a href="#" target="_blank" title="Artikel dan Jurnal">Jurnal</a></jurnal>
<agenda><a href="#" target="_blank" title="Acara">Agenda</a></agenda>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
<b>~SEKILAS PTI~</b><br><br>
Pendidikan Teknik Informatika merupakan salah satu prodi di jurusan Elektro, Program Studi ini ada sejak tahun 2007. Lulusan Pendidikan Teknik Informatika ini diharapkan akan menjadi tenaga pendidik profesional.<br>
Tahun ini prodi PTI akan meluluskan mahasiswa untuk tahun pertama. Selain itu, saat ini PTI sedang melakukan proses akreditasi.
Semoga tahun ini PTI segera memperoleh akreditasi secepatnya...
</article>
<event><a href="#" target="_blank" title="Teknik Elektro"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Lomba Design Web">Lomba Design Web</a></li>
<li><a href="#" target="_blank" title="Kajur Cup">Kajur Cup</a></li>
<li><a href="#" target="_blank" title="LTDC">LTDC</a></li>
<li><a href="#" target="_blank" title="Kontes Band">Kontes Band</a></li>
</ul>
</event>
</section>
<footer>
Home | Materi | Jurnal | Agenda | Download
<br>© CopyRight Vertika Panggayuh
</footer>
</body>
</html>
Script CSS
body{
margin: 10px auto;
width : 1000px;
}
header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}
header{
height: 130px;
width: auto;
}
logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}
nama{
background-color : #990099;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Arial ;
font-size : 20px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 25px;
background-color : #9900FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #CC33CC ;
color : black;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}
home, materi, jurnal, agenda, download{
display: block;
float: left;
background-color: #990099;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}
home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}
materi{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
jurnal{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
agenda{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 1000px;
height : 415px;
background-color : #9900FF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(AN_diff.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : #CC99CC;
font-size : 15px;
font-family : Berlin Sans FB;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #CC33CC ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #990099;
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: white;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}
list{
list-style-position: inside;
}
Hasil
Tidak ada komentar:
Posting Komentar