Pada sesi ini kita akan membahas tentang CSS????
Apa itu CSS ?? Pertanyaan yang bagus…
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. 100 buat gue..
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumenHTML.
Inline: properti style diterapkan secara langsung per baris atau per elemenHTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Ginama sich caranya bikin CSS??
OK, hal pertama yang harus kita persiapkan adalah wrapper, langkah selanjutnya adalah membuat desain layoutnya.dengan style terpisah. Gampangkan!!! Hehehee..
Ni, dibawah uda gue contohin gmn bikinnya di simpan dengan nama mystyele.css
mystyle1.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}
#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
Desain Layout1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<div id = "wrapper">
<div id="header">
header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Desain Layout yang kedua dengan CSS
Penambahan background pada masing2 <div> di anjurkan sebab membuat tampilan web kita menarik :D, OK., gak usah panjang lebar langsung aja Qt praktekin simpan dengan nama
mystyle2.css
#wrapper {
margin: auto;
width: 750px;
background-image:url(x.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(um11.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#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:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
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:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(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:#FFFFFF;
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:#CCCCCC;
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-image:url(x.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}
margin: auto;
width: 750px;
background-image:url(x.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(um11.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#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:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
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:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(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:#FFFFFF;
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:#CCCCCC;
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-image:url(x.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}
Qt kemudian buat desain layout sbb;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<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="logo">
</div>
<div id = "Teknik">
<h1 align="left">TEKNIK ELEKTRO</h1>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
<b>Dies Natalis UM<br/></b>
<br/>
Jurusan Teknik Elektro UM dalam rangka merayakan dies natalis ke 60,</br>
menggelar lomba-lomba yang menarik, kegiatan ini di pelopori oleh</br>
Bpk . Slamet Wibawanto. Kegiatan ini mendapatkan respon positif yang dari mahasiswanya</br>
Lomba-lombanya adalah lomba panjat tiang, lomba tarik kabel,lomba nyetrum dll</br>
dan masih banyak lomba ekstrim yang diikuti mahasiswanya .
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h6 align="left">SIXSTRINGS'BLOG.com</h6>
</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<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="logo">
</div>
<div id = "Teknik">
<h1 align="left">TEKNIK ELEKTRO</h1>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
<b>Dies Natalis UM<br/></b>
<br/>
Jurusan Teknik Elektro UM dalam rangka merayakan dies natalis ke 60,</br>
menggelar lomba-lomba yang menarik, kegiatan ini di pelopori oleh</br>
Bpk . Slamet Wibawanto. Kegiatan ini mendapatkan respon positif yang dari mahasiswanya</br>
Lomba-lombanya adalah lomba panjat tiang, lomba tarik kabel,lomba nyetrum dll</br>
dan masih banyak lomba ekstrim yang diikuti mahasiswanya .
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h6 align="left">SIXSTRINGS'BLOG.com</h6>
</div>
</div>
</div>
</body>
</html>
DAN KITA LIHAT HASILNYA........
TARAAAAAAAAAAAAAAAAAA..........
DAN SELAMAT MENCOBA....
by artmusic
Tidak ada komentar:
Posting Komentar