Scribd
Upload
70 views

Tugas Web Modul 4

The document contains CSS code that defines the styling for different elements on a web page layout, including the header, navigation, content sections, and footer. It divides the page into sections with IDs like #header, #nav, #section, and #footer. It sets properties like heights, widths, borders, margins and backgrounds for each section. The HTML code then implements this layout and styling by including the CSS stylesheet and adding content within the corresponding div elements.

Uploaded by

syifa_afirah
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
70 views

Tugas Web Modul 4

The document contains CSS code that defines the styling for different elements on a web page layout, including the header, navigation, content sections, and footer. It divides the page into sections with IDs like #header, #nav, #section, and #footer. It sets properties like heights, widths, borders, margins and backgrounds for each section. The HTML code then implements this layout and styling by including the CSS stylesheet and adding content within the corresponding div elements.

Uploaded by

syifa_afirah
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

STUDI KASUS MODUL 4

#header{
height: 100px;
border: 1px solid green;
}

#nav{

height: 35px;
border: 1px solid blue;
}

#section{
height: 400px;
border: 1px solid red;
}

#article{
margin-right:55px;
margin-top:20px;
margin-left:20px;
height: 350px;
width: 800px;
border:1px dashed red;
}

#aside{
float:left;
margin-top:0.05px;
margin-left:850px;
height: 325px;
width: 350px;
border:1px dashed black;
}

#footer{
clear:both;
margin-top:20px;
height: 35px;
border: 1px solid green;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Desain layout sederhana</title>
<link rel="stylesheet" href="yourstyle.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="nav">
nav
</div>

<div id="section">
Section
<div id="article">
article
<div id="aside">
aside
</div>

<div id="footer">
Footer
</div>
</div>
</body>
</html>
TUGAS RUMAH MODUL 4
#wrapper {
margin: auto;
height: 580px;
width: 1000px;
border: 1px solid;
background: violet;
}
#header {
margin: auto;
height: 300px;
width: 1000px;
border: 1px solid;
background: violet url('UM.jpg');
}
#unix {
margin: auto;
height: 40px;
width: 998px;
margin-top:120px;
border: 1px solid;
background: blue url('hitam.jpg');
}
#search {
height: 20px;
width:350px;
margin-left:20px;
margin-top:8px;
border: 0;
}

#aaaa {
float: right;
height: 6px;
width:400px;
border: 0;
}
#atas {
height: 25px;
width:350px;
margin-left:320px;
margin-top:-25px;
border: 0;
}

#content {
margin: auto;
height: 400px;
margin-top:14px;
margin-left:0px;
width: 1000px;
border: 1px solid yellow;
}
#content1 {
float: left;
margin: auto;
margin-top:0px;
margin-left:auto;
height: 450px;
width: 288px;
border: 1px solid;
background: blue url('b.jpg');
}
#content2 {
margin: auto;
margin-left:288px;
margin-right:4px;
height: 200px;
width: 640px;
border: 1px solid;
background: blue url;
}
#blok1 {
margin: auto;
margin-top :0px;
height: 250px;
width: 710px;
background: violet;
}
#blok2 {
font-weight: bold;
margin: auto;
margin-top:250spx;
height: 200px;
width: 710px;
border: 1px solid;
background: blue url('pinky.jpg');
}

#footer {
float: left;
margin: auto;
margin-top:86px;
margin-left:-290px;
height: 37px;
width: 994px;
border: 1px solid black;
background: blue url('hitam.jpg');
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Halaman WEB</title>
<link rel="stylesheet" href="tugas rumah modul 4.css" type="text/css" />
</head>
<div id="wrapper">
<div id="header">
<img src="UM.bitmap" align="left" height=100px width=500px>
</header>
<div id="unix">
<div id="search" ><font color = "RED">
<input type="text" name="username" />
<input type="button" name="username" value="search" />
</font>
</div>
<div id="aaa">
<div id="atas">
<div class="style6" id="atas">
<div align="center">
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Home</a>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">News &amp; Media </a>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Tutorial</a>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Tips and Trik</a>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Download</a>
</div>
</div> </font>
</div>
</unix>
<div id="content">
<div id="content1">
</content1>
<div id="content2">
<div align="justify"id="blok1">
<p class="style1">KELUARGA KITA</p>
Indahnya liburan bersama keluarga,<br/>
jika kita penat maka sekali-sekali lah merilekskan diri mengajak keluarga
bermain dan bersantai.<br />
senyum yang merekah diantara mereka dapat menghilangkan penat yang
melekat<br />
mengajak berwisata ke tempat-tempat hidden treasure sepertinya menyenangkan,
keindahan yang belum bayak diketahui orang bisa kita nikmati bersama,<br />
Asyiknya rileks ini akan berdampak dengan hadirnya semangat baru.<br />
oleh karena itu UM menghadirkan one day trip untuk warga UM yang mau rileks,
bekerjasama dengan jogja khatulistiwa<br />
NIKMATI LIBURMU SEKARANG JUGA... ^_^.
</blok1>
<div id="blok2">
<p class="style3">EVENT</p>
<div align="left">
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Lomba makan kerupuk</a><br>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Panjat pinang</a><br>
<a href="http://localhost/Tugasku/mod3tgs2.html"
><font color = "red">Joget balon </a><br> </div>
</blok2>
</content2>

<div id="footer">
<div align="center" class="style7">
<a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank"
class="style7"><font color = "white">Home</a> |
<a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank"
class="style7"><font color = "white">News & Media</a> |
<a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank"
class="style7"><font color = "white">Tutorial</a> |
<a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank"
class="style7"><font color = "white">Tips n Trik</a> |
<a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank"
class="style7"><font color = "white">Download</a>
</div>
<div align="right" class="style10"><font color = "white">latiefah sari poeNya
&copy; PTI 09 C
</font>
</div>
</footer>
</body>
</html>

You might also like