Selasa, 22 Februari 2011

Desain Web CSS

Membuat Layout Halaman Website Dengan Memanfaatkan Elemen pada HTML5

Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama tugas.css
body {
margin: 10px auto;
width: 750px;
}

header {
height: 80px;
display: block;
border: 1px solid green;
}

nav{
float: top;
width: 750px;
height: 80;
display: block;
border: 1px solid blue;
}

article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:500px;
height: 330px;
border: 1px dashed red;
}

section {
width: 500;
height: 370px;
display: block;
border: 1px solid red;
}

footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}

aside{
float: right;
margin-top: 20px;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px dashed black;
}

footer{
clear: both;
height: 20px;
display: block;
border: 1px solid green;
}

Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama tugas.html
<!DOCTYPE HTML>
<html lang en="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tugas.css" type="text/css" />
</head>

<body>
<header>
Header
</header>

<nav>
nav
</nav>

<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>

<footer>
footer
</footer>
</body>
</html>

Maka, akan diperoleh hasil sebagai berikut:





Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama coba2.css
body {
margin: 10px auto;
width: 750px;
}

header {
height: 80px;
display: block;
border: 1px solid green;
}

nav{
background-color:aqua;
float: top;
width: 750px;
height: 45px;
display: block;
border: 1px solid blue;
}

home{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:600px;
height:25px;
width:40px;}

news_media{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:650px;
height:25px;
width:100px;
}

tutorials{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:760px;
height:25px;
width:55px;
}

tips_tricks{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:825px;
height:25px;
width:105px;}

download{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:940px;
height:25px;
width:75px;}

article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:280px;
height: 330px;
border: 1px solid black;
}

section {
background-color:grey;
width: 500;
height: 370px;
display: block;
border: 1px solid grey;
}

footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}

aside{
background-color:white;
float: right;
margin-top: 20px;
margin-right: 20px;
width: 400px;
height: 330px;
border: 1px solid black;
}

aside2{
background-color:aqua;
float: right;
margin-top: 45px;
width: 400px;
height: 165px;
border: 1px solid black;
}

footer{
background-color:aqua;
padding:10px;
height:40px;
footer2{
position:absolute;
margin-left:500px;
width:300px;
height:20px;
}
}



Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama coba2.html
<!DOCTYPE HTML>
<html lang en="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="coba2.css" type="text/css" />
</head>

<body>
<header>
<img src = "Capture2.jpg" width = "750" height = "80px">
</header>

<nav>
search : <input type="text" name="sch">
<home>
<font size="2" color="white"><b>Home</b></font>
</home>
<news_media>
<font size="2" color="white"><b>News &amp; Media</b></font>
</news_media>
<tutorials>
<font size="2" color="white"><b>Tutorials</b></font>
</tutorials>
<tips_tricks>
<font size="2" color="white"><b>Tips &amp; Tricks</b></font>
</tips_tricks>
<download>
<font size="2" color="white"><b>Download</b></font>
</download>
</nav>

<section>
<article>
<img src = "Capture.jpg" width="280px" height="330px">
</article>
<aside>
<font color="black">
Nama saya Yunita Chandra Kartika. Orang biasanya memanggil saya tika atau yunita.
Alamat rumah saya ada di Desa Sumberbening RT 03 RW 01 Kec. Balerejo Kab. Madiun.
Namun sekarang saya tinggal di Malang tepatnnya di Jalan Terusan Ambarawa No 31.
Karena sekarang ini saya sedang kuliah di Universitas Negeri Malang.
<aside2>
<Font color = "blue" size = "5">Events : </b></font>
<br/>
<br/>
<a href="desain">Lomba Makan Krupuk</a>
<br/>
<a href="desain">Lomba Ngupil</a>
<br/>
<a href="desain">Wisuda PTI07</a>
<br/>
<a href="desain">Audisi Mahasiswa Abadi</a>
<br/>
</aside2>
</aside>
</section>

<footer>
<footer2>
<a href="desain">Home</a>&nbsp;|&nbsp;
  <a href="desain">News &amp; Media</a>&nbsp;|&nbsp;
  <a href="desain">Tutorials</a>&nbsp;|&nbsp;
  <a href="desain">Tips &amp; Tricks</a>&nbsp;|&nbsp;
  <a href="desain">Download</a>&nbsp;
  </footer2>
  <p align="right">
  yunitachandrakartika.blogspot.com
</footer>
</body>
</html>

Maka, akan diperoleh hasil sebagai berikut:



Diposting oleh di Tidak ada komentar:

Selasa, 15 Februari 2011

Cascading Style Sheet

Membuat Kreasi-Kreasi Objek

Source Kodenya:
<!DOCTYPE html>
<html lang="en">

<head>
<title>DemoBorder</title>
<style type="text/css">
<!--
.box1 {
background-color:grey;
-moz-border-radius:200px;
-webkit-border-radius:200px;
border : 5px solid green;
padding: 10px;
width: 200px;
height:200px;
}

.teks1{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}


.box2 {
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
padding: 10px
width : 200px;
height : 100px;
border : 5px solid red;
margin-right: 900px;
}

.teks2{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}

.box3 {
margin : 10px;
padding : 30 px;
width : 400px;
height : 100px;
border:1px solid red;
-moz-box-shadow:5px 5px 5px red;
box-shadow:5px 5px 5px red;
}

.teks3{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}
-->
</style>
</head>

<body>

<div class ="box1">
<div class ="teks1"align="center">
Yang ini border lingkaran.Pendekatan yang digunakan masih sama lhow.Ayow kreasikan sendiri ya ??
</div>
</div>
<br/>

<div class="box2">
<div class ="teks2"align="center">
pusiiiingggg....
</div>
<br/>

<div class="box3">
<div class ="teks3"align="center">
kalau yang ini semacam efek shadow.Keren kan ?
</div>
</body>
</html>

Hasilnya:



Membuat Desain Web Memanfaatkan CSS dan background
Source Kodenya:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Desain Web Menggunakan CSS</title>
<body background="bg.jpg">
<style type="text/css">
</head>
<!--

#bagian1 {
margin: auto;
width: 1000px;
border: 1px solid blue;
background:blue;
}
#bagian2 {
float: left;
height: 100px;
width:700px;
border: 0;
background:blue;
}
#bagian3 {
height : 100px;
width: auto;
border: 1px solid blue;
background-image:url(bgheader.GIF);
}
#bagian4 {
height:0px;
width:100px px;
margin-top:15px;
margin-left:750px ;
border: 0;
}
#bagian5 {
height:0px;
width:100px 10px;
margin-top:0px;
margin-left:950px ;
}
#bagian6 {
height:450px;
width:1200px 10px;
margin-top:100px;
}
#bagian7{
float: left;
width: 550px;
height: 400px;
margin-LEFT:100px ;
margin-right:100px ;
}
#bagian8 {
float: left;
width: 400px;
height: 330px;
border: 0;
}
#bagian9 {

height: 70px;
border: 0;
}
#bagian10 {
float: left;
width: 200px;
height: 250px;
border: 0;
}
#bagian11 {
margin-left:200px ;
width: 310px;
height: 200px;
border: 0;
}
#bagian12 {
clear: both;
height: 50px;
background-color : blue;
border: 1px solid blue;
}
-->
</style>

<body>
<div id="bagian1">
<div id = "bagian3">
<div id = "bagian2"><img src = "facemu.png" width="120" height="40">
</div>
<div id= "bagian4">
<form name= "login" method="post" action="">

<label><font face = "verdana" size = "4" color ="white">email</label></font><br>
<input type="text" name="email"><br>
<input type="checkbox" name="email"><font face = "verdana" size = "2" color ="black">keep me logged in </input>
</form>
</div>

<div id = "bagian5" >
<label><font face = "verdana" size = "4" color ="white">Password</label></font><br>
<input type="text" name="email">
<input type="button" value="login" ><br>
<a href = "facebook.com"><font face = "verdana" size = "2" color ="black"> Forgot your password ? </a></font>
</div>

<div id="bagian6">
<div id="bagian7"><img src = "Capture.jpg" width="500" height="350">
</div>

<div id="bagian8">
<div id="bagian9">
<font face = "verdana" size = "5" color ="blue">Sign Up<br>
<font face = "verdana" size = "4" color ="blue">It's free and always will be <br>
<hr>
</div>

<div id="bagian10">
<font face = "times new roman" size = "4" color ="blue">
<br>First Name <br><br>
Last Name<br><br>
Your Email<br><br>
Re-Enter Email<br><br>
New Password<br><br>
</font>
</div>
<div id="bagian11">
<br><input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
</div><br><br><font face = "times new roman" size = "2" color ="blue">Mengapa saya perlu mengisinya ?</font><br><br>
<input type="button" value="Mendaftar" align="right">
</div>
</div>
<div id="bagian12">
<font face = "times new roman" size = "5" color ="white">
yunitachandrakartika.blogspot.com</font>
</div>
</div>
</body>
</html>

Hasilnya:

Diposting oleh di Tidak ada komentar:

Minggu, 06 Februari 2011

Manfaat Elemen Tabel dalam Web

Membuat Desain Frame
Dalam membuat desain frame kali ini mula-mula kita membuat desain frame yang pertama. Source kode desain frame yang pertama adalah:
<!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> Demo Frame </title>
</head>

<frameset cols = "20%,*,20%">
<frame src ="link1.html" />
<frame src ="internallink.html" />
<frame src ="link1.html" />

<noframes>
</noframes>

</frameset>
</html>

Simpan desain frame yang pertama dengan nama studi kasus1.html.
Setelah kita membuat desain frame yang pertama tadi kemudian kita membuat desain frame yang kedua. Desain frame yang pertama ini akan kita gunakan untuk membuat desain frame yang kedua. Source kode desain frame yang kedua adalah:
<!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> Demo Frame </title>
</head>

<frameset rows = "20%,*,20%">
<frame src="link2.html" />
<frame src="studikasus1.html" />
<frame src="link2.html" />

<noframes>
</noframes>

</frameset>
</html>

Maka dapat kita peroleh hasil sebagai berikut:





Grafik Batang Statis dengan Memanfaatkan Elemen Tabel

Source Kodenya:
<!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>Grafik Batang Statis dengan Memanfaatkan Elemen Tabel</title>
</head>

<body background="melodi.jpg">

<h2>Grafik Pendapatan Perusahaan</h2>

<hr align="left" width="700"></hr>

<table width="700" border="0">
<tr>
<td width="350"><strong>Perusahaan</strong></td>
<td width="350"><strong>Pendapatan</strong></td>
</tr>
</table>

<hr align="left" width="700"/>
<table width="700" border="0">

<tr>
<td width="175">Angin Reboot Ltd</td>
<td width="175" colspan=3></td>
<td width="175" colspan=2 bgcolor="green"></td>
<td width="175">+150%</td>
</tr>

<tr>
<td width="175">Command Prompt, Inc</td>
<td width="175" colspan=3></td>
<td width="75" bgcolor="green"></td>
<td width="100">+55%</td>
<td width="175"></td>
</tr>


<tr>
<td width="175">Hibernate Ltd</td>
<td width="75"></td>
<td width="50" align="right">-23%</td>
<td width="50" bgcolor="yellow"></td>
<td width="350" colspan=3></td>
</tr>


<tr>
<td width="175">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="100" colspan=2 bgcolor="red"></td>
<td width="350" colspan=3></td>
</tr>
</table>

<hr align="left" width="700"/>


</body>
</html>

Hasilnya:


Desain Tabel Perbandingan dengan Memanfaatkan Fitur Pengelompokkan

Source Kodenya:
<!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>Tabel Perbandingan Item</title>
</head>

<body background="2.jpg">

<table width="700" border="0" align="left">

<tr>
<td width="375" colspan=8 align="center">PERBANDINGAN FITUR</td>
</tr>

<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

</table>

</body>
</html>

Hasilnya:

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)