Mendesain Layout Web menggunakan Cascading Style ( CSS ).
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi C SS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
Inline: properti style diterapkan secara langsung p er baris atau per elemen
HTML.
Linked: properti style diletakkan di file berek stensi css dan dikaitkan
dengan dokumen HTML.
Selain mengulas tentan g pemanfaatan CSS, bagian ini juga menekankan pada
pembuatan desain dengan menggunakan division. Bagaimanapun, untuk
menghasilkan desain halaman web yang baik, penggunaan tabel tidak
disarankan dan sebagai gantin ya adalah dengan memanfaatkan division.
Gambar di atas merupakan salah satu contoh desain web menggunakan CSS.
source codenya serti di bawah ini :
#wrapper {
margin: auto;
width: 1000px;
padding:5px 2px 5px 2px;
border: 1px solid navy;
}
#header {
height: 100px;
margin-bottom:5px;
border: 1px solid aqua;
}
#inner {
margin: auto;
border: 1px solid navy;
}
#sidebar {
float: left;
width: 200px;
height: 390px;
border: 1px solid aqua;
}
#top {
float: right;
width: 750px;
height: 390px;
border: 1px solid navy;
}
#content {
height: 100px;
border: 1px solid aqua;
}
#isi{
float: left;
width: 400px;
height:220px;
border: 1px solid navy;
}
#info {
float: right;
width: 235px;
height: 150px;
border: 1px solid aqua;
}
#footer {
clear: both;
height: 50px;
border: 1px solid navy;
}
Kemudian simpan source code dengan ekstensi .css
Lalu buatlah source code seperti di bawah ini dan simpan dengan ekstensi .html
<!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>Tugas2 Desain Layout sederhana </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
<div id="content">
Top
</div>
<div id="isi">
Content
</div>
<div id="info">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar