Sabtu, 27 Februari 2010

Desain Layout Halaman Web dengan CSS

Casceding style seet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag html di dalam dokumen.

Rekomondasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen html.
2. Inline: properti diterapkan secara langsung per baris atau per elemen html.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen html.


Untuk membuat desain layout, kita harus mempersiapkan wrapper dulu. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.

Langkah pertama yang harus dilakukan yaitu harus mendefinisikan style nya terlebih dahulu dengan nama mystyle.css.
Setelah itu baru lah membuat layoutnya.

Untuk lebih jelasnya, lihat contoh desain layout dibawah ini:


Untuk membuat desain layout seperti di atas, langkah yang harus dilakukan yaitu:
Yang pertama, membuat kerangka desain layout terlebih dahulu, dengan kode berikut:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 85px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;
}

#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;
}

#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;
}

#right {
width: 227px;
height: 180px;
border: 1px solid red;
}

#footer {
clear: both;
height: 75px;
border: 1px solid blue;
}

Simpan dengan nama tugas2.css

Kemudian tulis kode html berikut ini:

<!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 Layout Halaman Web</title>
<link rel="stylesheet" href="tugas2.css" type=& quot;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>

Simpan dengan nama desain.html


Untuk melengkapi dari desain diatas agar menghasilkan halaman web yang atraktif, maka setiap kolom-kolom yang kosong harus kita isi dengan cara berikut:
Buka file tugas2.css, kemudian lengkapi kode html nya seperti berikut
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid #99CC00;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}

#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}

#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}

#leftmenu ul {
width: 175px;
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: black;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: black
}

#bok1 {
float: left;
margin-right:20px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid #99CC00;
}

#bok2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#bok3{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#bok4{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#bok5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#bok6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#bok7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#bok9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

Selanjutnya mengetikkan kode berikut pada file html yang tadi dibuat
<!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 Layout Halaman Web</title>
<link rel="stylesheet" href="tugas2.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "bok1">
<img src="kampus qu.jpg">
</div>
<div id = "bok7">
<img src="elektro.jpg">
</div>
<div id = "bok5">
</div>
<div id = "bok6"><font color="black"> Search :
</div>
<div id = "bok2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "bok3">
<a href="link.html"><font color="black"> Contact</a></p>
</div>
<div id = "bok4">
<a href="link.html"><font color="black"> Home</a></p>
</div>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "bok8">
<img src="gambar3.jpg">
</div>
<div id = "bok9">
<img src="gambar5.jpg">
</div>
</div>
<div id="content">
<b>Lomba Desain Web <br/></b>
<br/>
23 Maret 2010 [07:00]<br/>
Buat kamu-kamu yang asyk dengan mendesain web, silahkan ikuti lomba desain web yang
diselenggarakan oleh Jurusan Elektro UM.<br/>
Pemesanan tiket dapat langsung dibeli ke gedung Jurusan Elektro (G4)<br/>
<br/>
Read More...<br/>
<br/>

</div>
<div id="right">
<b>Events :</b>
<ul>
<li>Lomba Menggambar </li>
<li>Lomba Membuat Blog</li>
<li>Lomba Ubah Foto</li>
</div>
</div>
<div id="footer">
<p align="center">&copy; 2010 Teknik Elektro UM, Malang, Indonesia</a>
</div>
</div>
</body>
</html>

Hasil akhir dari tadi adalah:


Minggu, 21 Februari 2010

Desain Web dengan Frame

Frame memungkinkan kita untuk menampilkan lebih dari satu halama dokumen dalam satu waktu. berbeda dengan tabel, tiap-tiap frame mencerminkan halaman yang independen.

Untuk menciptakan frame, terlebih dahulu menciptakan tipe baru yang disebut frameset. Penjelasan lebih detail mengenai penggunaan frame dapat dilihat pada kode berikut:

<!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%,*">

<!-frame kiri-->
<frame src="link1.html" name="left" id="left" />

<!-frame kanan-->
<frame src="LinkInternal.html" name="main" id="main" />

<!--ini ditampilkan jika browser tidak support frame-->
<noframes>
Browser Tidak Supprot Frame
</noframes>

</frameset>

</html>
Selamat mencoba...!! Semoga bermanfaat

Rabu, 17 Februari 2010

Desain Web dengan Tabel

Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel.
Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif. Yang artinya, tak hanya sebatas pada data tabular saja, namun juga mengijinkan untuk melakukan pemformatan.

Untuk menampilkan tabel, pada prinsipnya sangat sederhana, yaitu hanya pada pengorganisasian. semua tabel harus diawali dengan tag <table> kemudian ada tiga tag dasar yang mengikutinya, yaitu meliputi:
- Tag <th> atau table heading yang berfungsi mendefinisikan header
- Tag <th> atau table row yang berfungsi mendefinisikan baris
- Tag <th> atau table data yang berfungsi mendefinisikan sel
Di dalam elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel. Tiga atribut yang pertama sering digunakan adalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antar sel) dan cellpadding (untuk mengatur spasi antar border sel dengan isinya).
Sebuah tabel tidak sellau memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolomnya. Misalnya, mungkin kita perlu melakukan penggabungan (marge) sel. Dalam konteks elemen tabel penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
Sebuat tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolom. Misalnya, kita perlu melakukan penggabungan (marge) sel.
Dalam konteks elemen tabel, peggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
Di bawah ini adalah contoh mendesain web dengan memanfaatkan tabel. Untuk lebih jelasnya lihat kode html berikut:

<!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>Neng Uus Cute</title>
</head>
<body>
<table border=1 align="center" cellspacing=0 cellpadding=5>
<tr>
<td colspan="3" scope="col" align="center" height="80">Header</th>
<tr>
<tr>
<td width ="150" valign="top" height = "350">Left Menu</a></td>
<td width= "550" valign="top" height = "350">Contens</td>
<td width = "150" valign="top" height = "350">Righ Menu</td>
</tr>
<tr>
<td colspan="3" scope="col" align="center" height="80">Footer</td>
</tr>
</table>
<p align="center">&copy; Copyright <a href = "mailto: mbauus@gmail.com">mba-uus.blogspot.com</a>
</body>
</html>

Hasil eksekusinya yaitu sebagai berikut:

Selamat mencoba...Semoga sukses!!!

Movie