Modifikasilah script di bawah ini sesuai dengan keinginan Anda
Tampilkan hasilnya
Printscreen : scrip dan hasilnya pada browser
Buatlah analisis scriptnya
Tugas dikirim ke : hasrulbakriysgi@gmail.com dengan judul : latihan 5 paling lambat tanggal 5 November 2013
LATIHAN 4.1.
<html>
<body>
<title>Tugas Web Programming </title>
<center>
<table border=”2″ cellpadding=”15″>
<th bgcolor=”purple” colspan=”2″><font face=”Kristen ITC”><font color = yellow><h1><marquee behavior =”right”>PTIK PTE FT UNM</marquee></h1></font></th></tr>
<tr><td valign=”top” bgcolor=”#FFDAB9″><b><h3><font face=”Bauhaus 93″;font color=”red”><a href=”Buku tamu.html”>Buku Tamu</a><p>
<a href=”Daftar.html”>Daftar</a><p>
<a href=”Informasi Akademik.html”>Informasi Akademik</a></font></h3></b></font></td>
<td bgcolor=”#20B2AA”><center><IMG SRC =”file:////Users/hasrulbakri/documents/kuis/Rifni.JPG” WIDTH=”400″ HEIGHT=”350″>
<p><b><h2><font face=”Courier New”><font color = #DC143C><p style=”text-decoration:blink;”>Selamat Datang Di Web Site </font></font></h2></b>
<p><b><h3><font face=”Curlz MT”><font color=#FF1493>My First Website!!!!</b></font>
<br><marquee height=”25″ behavior=”scroll”><img src=”file:///Users/hasrulbakri/documents/kuis/qoqom.JPG” width=”110″ height=”84″></br></marquee>
<p><b><font face= “Jokerman”><font color=green>untuk info lebih Lanjut hubungi e-mail kami di</b></font>
<p> <font face=”Bauhaus 93″><a href=”mailto:hasrulbakriysgi@gmail.com?Subject=Tanya Jawab”>hasrulbakriysgi@gmail.com</a></font></td>
</center></tr></table>
</center>
</body>
</html>
LATIHAN 4.2.
Ketikkan source html berikut lalu simpan (misalnya latihan4.2.html)
Lalu ketikkan source css eksternalnya, simpan lalu simpan (misalnya latihan 4.2 .css) satu folder dengan file html nya
SOURECE HTML
<html>
<head>
<title>Tugas Praktikum 2 </title>
<LINK REL=”STYLESHEET” TYPE=”text/css” HREF=”latihan4.2.css“> (Ini hanya keterangan: bukan bagian dari script “latihan4.2.css” merupakan file eksternal css yang disimpan satu folder dengan file htmlnya)
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body background=”rifni.jpg”>
<div id=”wrapper”>
<div id=”header”>
<div id=”menu”>
<ul id=”main”>
<li><a href=”index.html”> Home |</a></li>
<li><a href=”#”>Sitemap |</a></li>
<li><a href=”#”>RSS |</a></li>
<li><a href=”contact.html”>Contact |</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
</ul>
<div id=”search”><form name=”form1″ method=”post” action=””>
<label>Search
<input type=”text” name=”textfield”>
</label>
</form></div>
</div>
<div id=”inner”>
<div id=”sidebar”>
<div id=”leftmenu”>
<ul>
<li>
<h4 align=”center”><img src=”image/btt.jpg”></h4>
</li>
<li><a href=”profil.html”>Profil Jurusan </a></li>
<li><a href=”akademik.html”>Akademik</a></li>
<li><a href=”fasilitas.html”>Fasilitas</a></li>
<li><a href=”kerjasama.html”>Kerjasama</a></li>
<li><a href=”tutorial.html”>Tutorial</a></li>
<li><a href=”news.html”>News</a></li>
</ul>
</div>
</div>
<div id=”top”>
</div>
<div id=”content”><marquee behavior=”scroll”>Welcome to " TEKNIK INFORMATIKA DAN KOMPUTER "
</marquee>
<p> </p>
</div>
<div id=”right”>
<p>LInk Website:</p>
<ul>
<li>
ft.unm.ac.id </li>
<li>www.unm.ac.id</li>
</ul>
</div>
</div>
<div id=”footer”>
<div align=”center”>@copyright YSGI
</div>
</div>
</div>
</body>
</html>
SOURCE CSS
#wrapper {
margin: auto;
width: 750px;
background-color:#e0ebd5;
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-image:url(image/header.jpg);
background-repeat:no-repeat;
background-color:#e0ebd5;
}
/* Menu */
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#557aa4;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#94a0c5;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}
#leftmenu ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background:#1a2032 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #326398 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(image/top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}
#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#557aa4;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#94a0c5;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-color:#1a2032;
font:Arial, Helvetica, sans-serif;
color:#FFFFFF;
border: 1px;
}/* CSS Document */
Hasilnya:
Hasrul Bakri
Hidup Itu Belajar 