2 5
2. Teknik Clear Fix
- File css
{ margin
:auto;}
body
{ width
:960px;}
header
,
nav
,
aside
,
section
,
footer
{ background
: 14BCE6; border
: 1px solid white; color
: white; font-size
: 2em; font-variant
: small-caps; text-align
: center; }
header
,
nav
,
footer
{ width
: 100;}
header
,
footer
{ height
:100px;}
nav
{ height
:50px;}
aside
{ float
:left; height
:275px; width
:29.5; }
section
content {
float :right;
height :275px;
width :70
} .
container {
margin :0;
padding :0;
}
.container:before, .container:after{
content:; display:table;
} .container:after{
clear:both;
doctype html pendeklarasian dokumen html
html tag pembuka html
head tag pembuka html
titleLayout Dasar Dokument Webtitle pemberian judul pada halaman web
link rel= stylesheet
href= style.css
deklarasi linked style untuk pemanggilan file css yang digunakan untuk menerapkan fungsi didalamnya kedalam dokumen html
head body
headerHeaderheader deklarasi header diberi tulisan header
navNavigatornav deklarasi navigator diberi tulisan navigator
asideSidebar menggunakan float
:leftaside deklarasi side bar menerapkan fungsi float: left sehingga
letaknya berada pada kiri halaman. section id=
content pemanggilan id content yang dideklarasikan pada file css untuk membentuk
section h3Menggunakan
float :righth3 lorem ipsum dolor sit amet, consectetur adipisicing elit,
menerapkan jenis tulisan heading3 dan peletakan tulisan pada float: right kanan halaman diurutkan sejajar dengan content section
sed do
eiusmood tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullmco laboris
nisit ut aliquip ex ea commodo consequent.section footerFooter menggunakan clear:bothfooter
deklarasi footer menerapkan clear:both , sehingga hasilnya rata kiri kanan
body tag penutup body
html tag penutup html
2 5
}
- File html
DOCTYPE html html
head title
layout Dasar Dokumen Web title
link rel
= stylesheet
href =
style2.css
head body
div class
= container
header Header
header nav
Navigation nav
aside Sidebar menggunakan float:left
aside section
id =
content
h3 menggunakan float:right
h3 lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmood tempor incididunt ut labore et dolore magna aliqua.
ut enim ad minim veniam, quis nostrud exercitation ullmco laboris
nisit ut aliquip ex ea commodo consequent.
section div
footer
Footer footer
body html
Gambar 2.1 kode HTML
Gambar 2.2 Tampilan hasil halaman web
Penjelasan :
Pada halaman web diatas, sama seperti latihan pertaman hanya saja pada bagian section sudah tertata rapi tentunya dengan pengubahan aturan pada file css yang digunakan.sama seperti pada
latihan 1, file css penyusunnya hampir sama hanya pendeklarasian isi tulisan atau ukuran widthheight yan sedikit bervariasi sehingga dapat menampilkan hasil halam web seperti diatas.
2 5
{margin: auto
;} deklarasi penggunaan margin auto pada halaman web ini
body{width:960px;} deklarasi bagian body berukuran widthpanjang sebesar 960px
header,nav,aside,section,footer{ deklarasi bagian header, navigasi, aside, section dan footer
menggunakan background berwarna biru dengan kode warna 14BCE6 , menggunakan border setebal 1px berwarna putih
padatterdapat fill, tulisan berwarna putih dengan font sizi sebesar 2em, jenis tulisan small-caps dan posisi text berada ditengah
background: 14BCE6; border: 1px solid white;
color : white; font-size: 2em;
font-variant: small-caps; text-align: center;
} header, nav, footer {width: 100;}
deklarasi bagian header, navigasi dan footer berukuran widthpanjang sebesar 100
header, footer{height:100px;} deklarasi bagian header dan footer berukuran heightlebar sebesar
100px nav{height:50px;}
deklarasi bagian navigasi berukuran heightlebar sebesar 50px aside{
deklarasi bagian aside menerapkan float left dengan ukuran height lebar sebesar 275px, dan width panjang sebesar 29.5
float :left;
height:275px; width:29.5;
} sectioncontent{
deklarasi bagian section menggunakan id content , menerapkan float right dengan ukuran height 275px dan width 70
float :right;
height:275px; width:70
} .container{
deklarasi class container menggunakan margin dan padding = 0 margin:0;
padding:0; }
.container:before, .container:after{
content: ;
delklarasi isi content display:table;
deklarasi container ditampilkan dalam bentuk tabel }
.container:after{ clear:both;
penerapan clear both untuk peletakan container }
2 5
3. Pembuatan Grid
Kategori