Ini dia Script dari tampilan diatas :
check this out :
Ini code css nya... Namanya gambar.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 : #8EB4E6;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Comic Sans MS ;
font-size : 15px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 20px;
background-color : blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #44B4D5 ;
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, news, tutorial, tips, download{
display: block;
float: left;
background-color: blue;
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;
}
news{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
tips{
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 : #B8E2EF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(bareng.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : white;
font-size : 15px;
font-family : Comic Sans MS;
}
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 : #44B4D5 ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #8EB4E6;
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;
}
Sedangkan Ini Kode HTMLnya :
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>WELCOME to PTI OFF B</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>
<news><a href="#" target="_blank" title="Kabar Berita">News</a></news>
<tutorial><a href="#" target="_blank" title="Materi Kuliah">Tutorial</a></tutorial>
<tips><a href="#" target="_blank" title="Aneka Tips dan Trik">Tips & Trik</a></tips>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
PTI OFF B adalah salah satu kelas atau offering yang ada di Prodi S1 Pendidikan Teknik Informatika Jurusan Teknik Elektro Fakultas Teknik<br>
Kami Warga PTI B cukup bersahabat, suka jalan-jalan bersama-sama untuk mengakrabkan dan merefreshingkan diri<br>
Sekarang kami telah memasuki semester 4, semester yang cukup menguras energi<br>
Mungkin saat ini yang dibutuhkan adalah sedikit refreshing diantaranya:
<ul>
<li>Mengadakan Makan-makan bersama satu kelas</li>
<li>Jalan-jalan ke tempat wisata</li>
<li>Kunjungan Industri yang menyenangkan</li>
</ul>
Semoga masih ada waktu untuk melakukan semua itu, aminn....
</article>
<event><a href="#" target="_blank" title="The Learning University"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Kuliah yuk Kuliah">Kuliah</a></li>
<li><a href="#" target="_blank" title="Kunjungan Industri">Kunjungan Industri</a></li>
<li><a href="#" target="_blank" title="Praktek Industri">Praktek Industri</a></li>
<li><a href="#" target="_blank" title="Wisuda Tepat Waktu">WISUDA</a></li>
</ul>
</event>
</section>
<footer>
Home | News & Media | Tutorial | Tips & Trik | Download
<br>© CopyRight Intan Nur Varida
</footer>
</body>
</html>
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 : #8EB4E6;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Comic Sans MS ;
font-size : 15px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 20px;
background-color : blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #44B4D5 ;
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, news, tutorial, tips, download{
display: block;
float: left;
background-color: blue;
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;
}
news{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
tips{
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 : #B8E2EF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(bareng.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : white;
font-size : 15px;
font-family : Comic Sans MS;
}
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 : #44B4D5 ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #8EB4E6;
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;
}
Sedangkan Ini Kode HTMLnya :
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>WELCOME to PTI OFF B</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>
<news><a href="#" target="_blank" title="Kabar Berita">News</a></news>
<tutorial><a href="#" target="_blank" title="Materi Kuliah">Tutorial</a></tutorial>
<tips><a href="#" target="_blank" title="Aneka Tips dan Trik">Tips & Trik</a></tips>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
PTI OFF B adalah salah satu kelas atau offering yang ada di Prodi S1 Pendidikan Teknik Informatika Jurusan Teknik Elektro Fakultas Teknik<br>
Kami Warga PTI B cukup bersahabat, suka jalan-jalan bersama-sama untuk mengakrabkan dan merefreshingkan diri<br>
Sekarang kami telah memasuki semester 4, semester yang cukup menguras energi<br>
Mungkin saat ini yang dibutuhkan adalah sedikit refreshing diantaranya:
<ul>
<li>Mengadakan Makan-makan bersama satu kelas</li>
<li>Jalan-jalan ke tempat wisata</li>
<li>Kunjungan Industri yang menyenangkan</li>
</ul>
Semoga masih ada waktu untuk melakukan semua itu, aminn....
</article>
<event><a href="#" target="_blank" title="The Learning University"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Kuliah yuk Kuliah">Kuliah</a></li>
<li><a href="#" target="_blank" title="Kunjungan Industri">Kunjungan Industri</a></li>
<li><a href="#" target="_blank" title="Praktek Industri">Praktek Industri</a></li>
<li><a href="#" target="_blank" title="Wisuda Tepat Waktu">WISUDA</a></li>
</ul>
</event>
</section>
<footer>
Home | News & Media | Tutorial | Tips & Trik | Download
<br>© CopyRight Intan Nur Varida
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar