Gambar. Desain Halaman Web Interaktif
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.
Selain mengulas tentang 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 gantinya adalah dengan memanfaatkan division.
Berikut source code HTML-nya: (layoutHalamanWeb.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout1.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
<font color="black" face="time new roman" size="4">by:Venty Yulita Fajarwati</font>
</div>
</body>
Berikut ini code CSS-nya: (layout1.css)
#wrapper { margin:auto; width:980px; border:2px solid black;}
#header { height:80px; border:1px solid red}
#inner { float:left; margin:5px 0; border:1px solid green}
#footer { clear:both; height:50px; border:1px solid blue}
#sidebar { float:left; margin-right:10px; width:200px; height:400px; border:1px solid orange;}
#content { float:left; width:760px; height:400px; border:1px solid orange;}
#content-top { clear:both; margin:auto; width:760px; height:120px; border:1px dotted blue;}
#content-main { float:left; margin:auto; width:480px; height:260px; border:1px dotted blue;}
#content-right { float:right; margin:auto; width:260px; height:180px; border:1px dotted blue;}
SELAMAT MENCOBA KAWAND...
CSS : Layout Halaman Web
Subscribe to:
Post Comments (Atom)
0 komentar:
Post a Comment