css layout - cs.ipb.ac.idauriza/xhtml5/slide/05_css-layout.pdf · sectioning content konten yang...
TRANSCRIPT
Layout Dua KolomLayout Dua Kolom● Markup semantik XHTML5● Kode CSS
● width, margin, padding● float, clear
XHTML5 SectionXHTML5 Section
Sectioning ContentSectioning Content● Konten yang mendefinisikan cakupan
heading dan footer● <section>● <article>● <aside>● <nav>
<section><section>● Merupakan bagian secara umum dari
dokumen atau aplikasi● Pengelompokkan konten sesuai tema,
biasanya disertai dengan heading● Contoh:
● bab● halaman multi-tab● halaman utama web dapat dibagi menjadi beberapa
section: intro, berita-berita, dan info kontak
<article><article>● Merupakan komposisi mandiri dalam sebuah
dokumen, halaman, aplikasi, atau situs● Dapat didistribusikan dan digunakan kembali
secara independen● posting forum● artikel di majalah atau koran● blog entry● komentar dari pengguna
<aside><aside>● Untuk konten sampingan yang dapat
dihilangkan tanpa mempengaruhi isi konten utama
● Contoh:● sidebar● pull quote● kumpulan link● alamat website
<nav><nav>● Merupakan bagian halaman yang me-link
ke halaman lain, atau bagian lain dalam satu halaman
● Section dengan link navigasi
<header> dan <footer><header> dan <footer>● <header> merupakan sekelompok
pendahuluan atau bantuan navigasi● <header> biasanya berupa judul (<h1-h6>),
bisa juga daftar isi atau form pencarian● <footer> berisi informasi tentang
bagiannya, seperti: penulis, link dokumen terkait, copyright, dan sebagainya
Markup XHTML5Markup XHTML5<body>
<header>
<nav></nav>
</header>
<section id="articles">
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
Konten HeaderKonten Header<header>
<h1><a href="#">Linux Weekly News</a></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Konten ArticleKonten Article<article>
<header>
<h1>The 3.5 merge window has closed</h1>
<p>Posted on <time>2012-06-03</time> by jake</p>
</header>
<p>Linus Torvalds has released 3.5-rc1 which closes the merge window for this development cycle … </p>
</article>
Konten AsideKonten Aside<aside>
<h1>Categories</h1>
<ul>
<li><a href="#">Kernel</a></li>
<li><a href="#">Release</a></li>
<li><a href="#">Security</a></li>
</ul>
</aside>
Tampilan tanpa CSSTampilan tanpa CSS
CSS LayoutCSS Layout
Set body width and marginSet body width and margin● body { max-width: 800px; }
● membatasi lebar halaman menjadi 800 pixel● memudahkan membaca, teks tidak terlalu panjang
● body { margin-right: auto; }● body { margin-left: auto; }
● posisi <body> menjadi ke tengah layar
Strategi Dua KolomStrategi Dua Kolom
Set articles columnSet articles column● #articles { float: left; }
● #articles akan "melayang" ke sebelah kiri
● #articles { width: 70%; }● dengan lebar 70% dari <body>
Set aside columnSet aside column● aside { float: right; }
● <aside> akan "melayang" ke sebelah kanan
● aside { width: 25%; }● dengan lebar 25% dari <body>
Footer: clear floatFooter: clear float● footer { clear: both; }
● menghilangkan efek float elemen sebelumnya, baik kanan maupun kiri
● <footer> akan menempati baris yang baru● jika tidak di-clear, hasilnya akan seperti ini:
Navigation listNavigation list● nav ul { list-style: none; }
● menghilangkan bullet di depan list
● nav ul { padding-left: 0; }● menghilangkan padding kiri, agar list rata kiri sejajar
dengan heading
Navigation listNavigation list● nav ul li { display: inline; }
● item-item list menjadi memanjang dalam satu baris● (perbaikan untuk bug di kuliah kemarin)
● nav ul li { margin-right: 50px; }● memberikan jarak antar list sebesar 50 pixel
Style HalamanStyle Halaman● Berikan style sesuai selera kita● Batasi penggunaan image, karena akan
memperberat loading halaman● Contoh template HTML5:
● http://www.getskeleton.com/● http://twitter.github.com/bootstrap/
EOFEOF