Membuat Desain Layout Halaman Web dengan HTML

Cascading Style Sheet

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

Rekomendasi CSS menguraikan tiga jenis style:

· Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.

· Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.

· Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Contoh pembuatan desain layout halaman web dengan HTML

Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :

1. Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:

#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 {

float: right;

width: 227px;

height: 180px;

border: 1px solid red;}

#footer {

clear: both;

height: 75px;

border: 1px solid blue;}

Simpan dengan nama cobatgs dan ber-ekstensi css. (cobatgs.css)

2. Selanjutnya ketikkan kode berikut ini juga :

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<title>Desain Layout Sederhana</title>

<link rel=”stylesheet” href=”cobatgs.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>

Simpan file dalam bentuk html (cobatgs.html)


3. Buka file html, maka hasilnya adalah :


4. Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini pada file cobatgs.css yang sebelumnya :

#wrapper {

margin: auto;

width: 1000px;

border: 1px solid white;

}

#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 white;

}

#content {

float: left;

margin-right: 5px;

width: 450px;

height: 220px;

background: #FFFFCC;

border: 1px solid white;

}

#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: #ffffff;

}

#leftmenu a:hover {

background: #5e9711 no-repeat left center; color: #ffffff

}

#box1 {

float: left;

margin-right:10px;

width: 91px;

height: 98px;

background: #FFFFFF;

border: 1px solid white;

}

#box2{

float: right;

margin-right: 20px;

margin-top: 7px;

width: 60px;

height: 20px;

background: #99CC00;

border: 1px solid #99CC00;

}

#box3{

float: right;

margin-right: 5px;

margin-top: 7px;

width: 35px;

height: 20px;

background: #99CC00;

border: 1px solid #99CC00;

}

#box4{

float: right;

margin-right: 5px;

margin-top: 7px;

width: 32px;

height: 20px;

background: #99CC00;

border: 1px solid #99CC00;

}

#box5{

float: right;

margin-right: 15px;

margin-top: 7px;

width: 100px;

height: 20px;

background: #FFFFFF;

border: 1px solid #99CC00;

}

#box6{

float: right;

margin-right: 5px;

margin-top: 7px;

width: 50px;

height: 20px;

background: #99CC00;

border: 1px solid #99CC00;

}

#box7 {

float: left;

margin-right: 5px;

margin-top: 2px;

width: 490px;

height: 85px;

background: #FFFFCC;

border: 1px solid #FFFFCC;

}

#box8 {

float: left;

margin-right: 3px;

margin-top: 5px;

width: 406px;

height: 110px;

background: #FFFFCC;

border: 1px solid #FFFFCC;

}

#box9 {

float: left;

margin-right: 0px;

margin-top: 5px;

width: 400px;

height: 110px;

background: #FFFFCC;

border: 1px solid #FFFFCC;

}

5. Dan mengetikkan kode berikut pada file html-nya :

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<title>Desain Layout Sederhana</title>

<link rel=”stylesheet” href=”cobatgs.css” type=”text/css” />

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<div id = “box1″>

<img src=”logo_sc.jpg”>

</div>

<div id = “box7″>

<img src=”atribut.jpg”>

</div>

<div id = “box5″>

</div>

<div id = “box6″><font color=”black”> Search :

</div>

<div id = “box2″>

<a href=”link.html”> <font color=”black”>About Us</a></p>

</div>

<div id = “box3″>

<a href=”link.html”><font color=”black”> Profil</a></p>

</div>

<div id = “box4″>

<a href=”link.html”><font color=”black”> Foto</a></p>

</div>

</div>

<div id=”inner”>

<div id=”sidebar”>

<div id=”leftmenu”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>News  and Media</a></li>

<li><a href=”#”>Articel</a></li>

<li><a href=”#”>Tutorials</a></li>

<li><a href=”#”>Tips and Tricks</a></li>

</ul>

</div>

</div>

<div id=”top”>

<div id = “box8″>

<img src=”jember_cin.jpg”>

</div>

<div id = “box9″>

<img src=”angkatan_Q1.jpg”>

</div>

</div>

<div id=”content”>

<b>Temu Kangen <br/></b>

<br/>

Buat Sparta-sparti 23, kita-kita mau mengadakan acara ngumpul-ngumpul bareng lho…. satu angkatan. <br/>

Jadi buat temen-temen diharap kedatangannya. Acaranya :<br/>

<br/>

Hari / Tanggal : Sabtu / 27 Februari 2010 <br/>

Jam                                                           : 19.00 s/d selesai (subuh) <br/>

Tempat                                     : Pulosari (PS) <br/>

</div>

<div id=”right”>

<b>Event :</b>

<ul>

<li>Kuliah Tamu “Video Streaming” </li>

<li>Electro English Club (E2C)</li>

<li>Seminar Nasional “Hacking and Security”</li>

</div>

</div>

<div id=”footer”>

<h3 align=”center”><b>Sparta & Sparti_23 Corporation</b></h3>

</div>

</div>

</body>

</html>

6. Maka hasilnya adalah :


Cascading Style Sheet

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

Rekomendasi CSS menguraikan tiga jenis style:

· Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.

· Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.

· Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Contoh pembuatan desain layout halaman web dengan HTML

Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :

  1. Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:

#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 {

float: right;

width: 227px;

height: 180px;

border: 1px solid red;}

#footer {

clear: both;

height: 75px;

border: 1px solid blue;}

Simpan dengan nama cobatgs dan ber-ekstensi css. (cobatgs.css)

  1. Selanjutnya ketikkan kode berikut ini juga :

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<title>Desain Layout Sederhana</title>

<link rel=”stylesheet” href=”cobatgs.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>

Simpan file dalam bentuk html (cobatgs.html)

About these ads

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: