2 5
3. Pembuatan Grid
- File css
. col1
, . col2
, . col3
, . col4
, .
col5 , .
col6 , .
col7 , .
col8 ,
. col9
, . col10
, . col11
, . col12
{ background
: CCC; display
:block; float
:left; height
:30px; line-height
:30px; margin
:0 10px 0 10px; padding
:0; text-align
:center; }
. col1
{ width
: 60px;} .
col2 {
width : 140px;}
. col3
{ width
: 220px;} .
col4 {
width : 300px;}
. col5
{ width
: 380px;} .
col6 {
width : 460px;}
. col7
{ width
: 540px;} .
col8 {
width : 620px;}
.col9 {width: 700px;} .col10 {width: 780px;}
.col11 {width: 860px;} .col12 {width: 940px;}
.container { background:555;
margin:0; padding:0;
width:960px; }
.container:before, .container:after,
.row:before, .row:after {
content:; display:table;
} .container:after,
.row:after { clear:both;
} .row {
clear:both; margin:10px 0 10px 0;
}
- File html
doctype html html
head
DOCTYPE html deklarasi dokumen html
html tag pembuka html
head deklarasi bagian head terdapat pendeklarasian pemberian judul title untuk
dokumen html bernama layout dasar dokumen web titlelayout Dasar Dokumen Webtitle
link rel= stylesheet
href= style2.css
linked style untuk memanggil fungsi-fungsi yang dideklarasikan pada file css
head body
deklarasi baian body div
class =
container deklarasi pemanggilan class container yang dideklarasikan
pada file css headerHeaderheader
deklarasi bagian header navNavigationnav
deklarasi bagian navigation asideSidebar menggunakan
float :leftaside
delarasi bagian aside menerapkan float left dimulai dari penulisan sidebar menggunakan
section id= content
deklarasi bagian section menggunakan id content yang dideklarasikan pada file css
h3menggunakan float
:righth3lorem ipsum dolor sit amet, consectetur adipisicing elit,
deklarasi penggunaan heading3 untuk tulisan dengan float right 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 tag penutup section
div tag penutup div
footerFooterfooter deklarasi bagian footer
body tag penutup body
html tag penutup html
2 5
title Contoh Grid pada
HTML title
link rel
= stylesheet
href =
grid.css
head body
div class
= container
div class
= row
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div class
= col1
1 div
div div
class =
row
div class
= col2
2 div
div class
= col2
2 div
div class
= col2
2 div
div class=col22div div class=col22div
div class=col22div div
div class=row div class=col33div
div class=col33div
div class=col33div div class=col33div
div div class=row
div class=col44div div class=col44div
div class=col44div div
div class=row div class=col55div
div class=col55div div class=col22div
div div class=row
div class=col66div
div class=col66div div
div class=row div class=col77div
div class=col55div
div div class=row
div class=col88div
div class=col44div div
div class=row div class=col99div
div class=col33div
div div class=row
div class=col1010div
div class=col22div div
div class=row div class=col1111div
div class=col11div
div div class=row
div class=col1212div
div div
body html
Gambar 3.1 Kode HTML
2 5
Gambar 3.2 Tampilan hasil halaman web
Penjelasan: Untuk program diatas, merupakan system grid yang akan digunakan untuk membangun sebuah
website nantinya, sehingga tidak lagi menggunakan div tetapi dapat menggunakan fungsi grid. Ukuran penuh dari suatu halaman disebut container. Setiap float dibagi menjadi beberapa bagian
yang dibagi berdasarkan perhitungan tiap kolom menjadi bentuk blok-blok bagian yang nantinya dapat diisi content dari halaman web. Contoh, pada container terdapat 12 pembagian kolom. col1
memiliki lebar 112 dari container, col2 16, col3 14 dst, dengan pendelarasian width berbeda dari col1-12. Dengan pendeklarasian dari id col1-12 yang berisi background warna, display, float yang
digunakan, height, line-height dll. Untuk pendeklarasian container terdiri dari background warna, margin, padding dan width dengan ukuran 960px. Untuk pendeklarasian container sebelunnya,
terdpat penerapan clear:both untuk bagian row.
2 5
doctype html deklarasi dokumen html
html tag pembuka html
head tag pembuka head
titleContoh Grid pada HTMLtitle deklarasi pemberian nama pada halaman web
dengan judul contoh grid pada html link rel=
stylesheet href=
grid.css head
tag penutup head body
deklarasi bagian body div
class =
container pemaggilan class container yang dideklarasikan dalam file css
div class
= row
pemanggilan class row div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
class =
col1 1div
pemanggilan kelas col1 div
tag penutup div div
class =
row pemanggilan kelas row
div class
= col2
2div pemanggilan kelas col2
div class
= col2
2div pemanggilan kelas col2
div class
= col2
2div pemanggilan kelas col2
div class
= col2
2div pemanggilan kelas col2
div class
= col2
2div pemanggilan kelas col2
div class
= col2
2div pemanggilan kelas col2
div tag penutup div
div class
= row
pemanggilan kelas row div
class =
col3 3div
pemanggilan kelas col3 div
class =
col3 3div
pemanggilan kelas col3 div
class =
col3 3div
pemanggilan kelas col3 div
class =
col3 3div
pemanggilan kelas col3 div
tag penutup div div
class =
row pemanggilan kelas row
div class
= col4
4div pemanggilan kelas col4
div class
= col4
4div pemanggilan kelas col4
div class
= col4
4div pemanggilan kelas col4
div tag penutup div
div class
= row
pemanggilan kelas row div
class =
col5 5div
pemanggilan kelas col5 div
class =
col5 5div
pemanggilan kelas col5 div
class =
col2 2div
pemanggilan kelas col2 div
tag penutup div div
class =
row pemanggilan kelas row
div class
= col6
6div pemanggilan kelas col6
div class
= col6
6div pemanggilan kelas col6
div tag penutup div
div class
= row
pemanggilan kelas row div
class =
col7 7div
pemanggilan kelas col7
2 5
E. STUDI KASUS
Kategori