TUGAS
KE 3
CSS
Disusun untuk memenuhi
Matakuliah Pemrograman Web Berbasis
Framework
Yang dibimbing oleh Bapak Aries
Alfian Prasetyo, S.Pd.
OLEH
:
Aryanti Sekar
Wahyu/1221180023
Teknik
Informatika 1
AKADEMI
KOMUNITAS (Poltek) NEGERI BOJONEGORO
JURUSAN
TEKNIK INFORMATIKA
Maret,
2014
Membuat Header Sederhana Menggunakan CI
Skrip
<html>
<head>
<title>Studi
Kasus</title>
<link
type="text/css" rel="stylesheet"
href="studi_kasus.css">
</head>
<body>
<div
id="wrapper">
<div
id="header">
<div
id="header-content">
<div
id="menu-top">
<a
href="Style Font.html">Home | </a>
<a
href="List.html">Sitemap | </a>
<a
href="Format Font.html">RBS | </a>
<a
href="Font Style.html">Contact | </a>
<a
href="Padding.html"> About Us </a>
</div>
<div
id="logo"> <br><br>
<img src="png.png"
width="90" alt="" />
</div>
<div id="header">
<h1><br><font
color="darkblue">
<br>AKADEMI
KOMUNITAS NEGERI BOJONEGORO</h1>
<div
id="search">
<br><font
color="black"> Search : <input name=""
size="25" type="text">
<br> <br>
</div><br> <br><br>
<br> <br> <br>
<div id="top">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Studi_Kasus.css
*
{ margin: 0; }
body {
margin: 5px auto;
padding:0; font: 0.72em/150%
verdana;
}
#wrapper
{
margin: auto;
width: 980px;
}
#header{
font:normal 10px Tahoma,Verdana;
width:900px;
height:150px;
margin-left:auto;
margin-right:auto;
background-color:#ff9900;
}
#top{
font:normal 10px Tahoma,Verdana;
width:900px;
height:5px;
margin-left:auto;
margin-right:auto;
background-color:#020303;
}
#header-content{
height: 70px;
margin:auto; background: #fff
url(bg_top.gif);
}
#menu-top
{
font-size: small;
height: 20px;
float: right;
padding: 0px 50px;
font-weight: bold;
}
#logo
{
float: left;
margin: 5px 10px 10px 50px;
height: 50px;
}
#site-title
h2 {
float: left;
padding: 0px 10px;
height: 30px;
margin: 20px 0px;
font: 2.1em/100% 'Verdana';
font-weight: bold;
}
#search
{
float: right;
margin: 20px 50px 0px auto;
height:30px;
font-weight: bold;
}
Membuat Design Layout Sederhana
Skrip
<html>
<head>
<title>Desain
Layout Arsewa</title>
<link
rel="stylesheet" href="mystyle.css"
type="text/css" />
</head>
<body>
<div
id="wrapper">
<div
id="header">
Header
</div>
<div
id="inner">
<div
id="sidebar">
Sidebar
</div>
<div
id="top">
Top
</div>
<div
id="content">
Content
</div>
<div
id="right">
Right
</div>
</div>
<div
id="footer">
Footer
</div>
</div>
</body>
</html>
My Style.css
#wrapper
{
margin:
auto;
width:
750px;
border:
1px solid red;
}
#header
{
height:
80px;
border:
1px solid red;
}
#inner
{
float:
left;
margin:
5px 0;
border:
1px solid red;
}
#sidebar{
float:
left;
margin-right:
20px;
width:
180px;
height:
460px;
border:
1px solid red;
}
#top
{
float:
left;
width:
544px;
height:
130px;
border:
1px solid red;
}
#content
{
float:
left;
margin-right:
20px;
width:
280px;
height:
330px;
border:
1px solid red;
}
#right
{
float:
right;
width:
241px;
height:
150px;
border:
1px solid red;
}
#footer
{
clear:
both;
height:
50px;
border:
1px solid red;
}
Membuat Website Sederhana Menggunakan CI
Skrip
<html>
<head>
<body
background="eee.jpg"><br>
<title>Websiteku
(ARSEWA)</title>
<link
type="text/css" rel="stylesheet"
href="web.css">
</head>
<body>
<div
id="pembungkus">
<div
id="wrapper">
<div
id="header">
<div
id="header-content">
<div
id="menu-top">
<a
href="Home.html">Home | </a>
<a
href="Profile.html">Profile | </a>
<a
href="Contact.html">Contact | </a>
<a href="About
Us.html"> About Us </a>
</div>
<div
id="logo"><img src="png.png" width="120"
alt="" /></div>
<div
id="header">
<br>
<h2 font
color="green" align="center"> <I>Website Arsewa
(Aryanti Sekar Wahyu)</i></h2>
<img
src="gif.gif" width="300" alt="" />
<div
id="search">
Search : <input
name="q" size="30" type="text">
</div><br>
</div>
</div> </div>
<div
id="navigasi">
<style
type="text/css">
<!--
#leftmenu
ul {
width:
200px;
list-style-type:none;
padding:0;
margin:0;
}
#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:
#6cae15 no-repeat left center;
margin:
0px 0px 1px; color: #ffffff;
}
#leftmenu
a:hover {
background:
#5e9711 no-repeat left center; color: #ffffff
}
-->
</style>
</head>
<body>
<hr
/>
<div
id="leftmenu">
<ul>
<li><a
href="Home.html">Home</a></li>
<li><a
href="Profile.html">Profile</a><li>
<li><a
href="Galery.html">Galery</a></li>
<li><a
href="Contact.html">Contact</a></li>
<li><a
href="About Us.html"> About Us </a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div
id="kontent">
<p
align="center"><br> <b>
<h2>
<Font color="green"><i>*Selamat Datang di Website
Arsewa*</i></h2>
<br>
<div
id="right"></br>
<h1
align="center"><b>Lain-Lain</b></h1>
<br><br>
<ul>
<li><a
href="#">Tentangku</a></li>
<li><a
href="#">Fotoku</a></li>
<li><a
href="#">Pengalamanku</a></li>
<li><a
href="#">Hobyku</a></li>
</div>
<p
align="justify">
<br>
Disini saya akan menjelaskan tentang diri saya
sendiri.<br>
<br>
Ada beberapa tujuan dari pembuatan Website
diantaranya :<br>
<br>
- Sarana presentasi Profil
Perusahaan yang bisa diakses di seluruh Dunia.<br>
- Sarana promosi produk dan
Jasa.<br>
- Media Komunikasi antar
individu dan saling bertukar informasi.<br>
- Media expresi pribadi maupun
kelompok.<br>
- Menyediakan sarana penyebar
Ilmu Pengetahuan.<br>
- Tempat untuk belajar baik
dengan interaktif langsung maupun Forum.<br>
- Sebagai alat transaksi
Online.<br><br>
- Disini saya membuat website
bertujuan sebagai media expresi pribadi maupun kelompok.
<style type="text/css">
<!--
.link_none
{
text-decoration:
none;
}
-->
</style>
</head>
<body>
</p>
</br>
</div>
<div
id="footer">
<b> <font
color="red"> ^__^ </b>
</div>
</div>
</div></div>
</div></div>
</body>
</html>
Web.CSS
*
{ margin: 0; }
body {
margin: 0px auto;
padding:0; font: 0.72em/150%
verdana;
}
#wrapper
{
margin: auto;
width: 980px;
border: 0px solid black;
padding: 1px 4px 1px 1px;
}
#pembungkus
{
width:1000px;
padding:10px;
border:5px solid #999;
margin:10px auto;
}
#header{
font:normal 13px Andalus,Andalus;
font-weight: bold;
width:983px;
height:130px;
margin-left:auto;
margin-right:auto;
background-color:#ff9900;
background: #fff
url(header1.jpg);
}
#header-content{
height: 90px;
margin:auto;
background: #fff
url(avatar.gif);
}
#menu-top
{
font-size: small;
float: right;
height: 35px;
padding: 0px 50px;
font-weight: bold;
}
#logo
{
float: left;
margin: 10px 40px 30px 70px;
height: 50px;
}
#site-title
h2 {
float: left;
padding: 0px 10px;
height: 30px;
margin: 20px 0px;
font: 2.1em/100% 'Times New
Roman';
font-weight: bold;
}
#search
{
clear: right;
float: right;
margin: 50px 50px 0px auto;
height:40px;
font-weight: bold;
}
#top
{
height:143px;
background-color:#666;
background: #666 url(aaa.jpg);
}
#navigasi
{
float:left;
width:200px;
background-color:#666;
background: #666
url(header2.jpg);
min-height:470px;
}
#kontent
{
float:right;
margin-left:0px;
margin: 0px 0px 0px auto;
background-color:#fff;
min-height:330px;
width:780px;
}
#right
{
float:right;
width: 241px;
background-color:#fff;
background: #fff
url(header1.jpg);
min-height:200px;
height: 100px;
border: 3px solid grey;
}
#footer{
width:960px;
height:10px;
margin-top:0px;
clear:both;
padding:10px;
height:25px;
text-align:center;
background-color: #666;
background: #666 url(eee.jpg);
}
