CSS untuk Layout
1.
PEMBAHASAN
PRAKTIKUM
Pada koding awal yang belum diberi style seperti pada
kode html dibawah ini maka tampilannya akan seperti pada gambar berikutnya
Pembahasan
Pada kode html diatas terdapat tag <div> yang digunakan untuk membagi setiap bagiannya agar mudah diatur dalam CSS-nya.dalam tag <div> terdapat atribut id=”” yang digunakan untuk memberi alamat atau pengenal dari tag <div>tersebut. Seperti pada tag-tag diatas setiap tag <div>diberi atribut id dengan value-nya. Dalam tag body terdapat tag <div>dengan id=”wrap”” yang menampun semua <div> lain sehingga jika <div> tersebut diberi suatu style maka akan berlaku bagi semua <div> yang ada didalamnya. Pada <div> lain terdapat lagi <div> yang ada didalamnya sehingga setiap <div> mudah diatur dengan CSS-nya
Pada id=”wrap” dan id=”menu_horizontal”
diberi css-nya maka tampilan halaman web akan menjadi seperti berikut ini:
Pembahasan
Untuk
membuat CSS-nya maka mengunakan tag <style> yang diletakkan dalam tag
<head> seperti pada gambar disamping ini. Karena atribut yang diggunakan
adalah id sehingga untuk mengatur css-nya kita menggunakan simbol # kemudian
diikuti nama id-nya
#wrap
|
||
max-width
|
1000px
|
untuk mengatur lebarnya dengan maksimal 1000 piksel
|
margin
|
auto
|
untuk mengatur setiap batas tepinya secara auto
|
background-color
|
lightyellow
|
mengatur warna latarbelakangnya denga warna ligthyellow
|
#menu-horizontal
|
||
max-width
|
1000px
|
untuk mengatur lebarnya dengan maksimal 1000 piksel
sehinnga sama dengan di #wrap
|
height
|
30px
|
Mengatur tingginya dengan 30 piksel
|
border
|
1px solid black
|
Mengatur garis tepinya dengan 1 piksel
|
backgoung-color
|
lightgrey
|
mengatur warna latarbelakangnya denga warna ligthgrey
|
Color
|
Black
|
Mengatur warna teksnya dengan warna hitam
|
Text-align
|
Center
|
Mengatur tampilan teks dengan center sehinnga teks akan
ditengahnya.
|
Pembahasan
Kemudian
kita tambahkan lagi css disamping ini untuk mengatur bagian header, slogan dan
gamabr maka tampilan dari <div> dengan id yang diatur akan terbentuk
dengan posisi dan pengaturan lain yang ditentukan. Seperti pada bagian #header
untuk mengatur <div> dengan id=”header” ,#slogan untuk mengatur
<div> dengan id=”slogan” dan #gambar untuk mengatur bagian <div>
dengan id=”gambar”. Untuk setiap atributnya hampir sama dengan yang sudah di
jelaskan diatas.
Pembahasan
Setelah itu kita tambahkan lagi
css disamping ini untuk mengatur bagian #kiri, #menu_vertikal dan #banner.
Pada beberapa atribut seperti margin-top:30px digunakan
untuk mengatur tepi atas dengan 30 piksel
position: relative; digunakan untuk tampilan posisinya yang
relatif, kemudian display: block; digunakan untuk tampilnnya diblok. Float: left; untuk mengatur tampilannya di bagian kiri, position: absolute; untuk mengatur tampilannya secara absolute atau dalam posisi yang tidak keluar dari<div>yang
yang mengaturnya dan margin-bottom: 200px; untuk mengatur tepi bawah dengan 200 piksel.
Pembahasan
Padabagian menu_horizontal ditambahkan lagi atribut potition:fixed; untuk mengatur posisinya secara tetap,
top:0px; digunakan untuk bagian atasnya o piksek dan z-index:200;
untuk mengatur tampilannya diatas objek lain sehingga tampilan bagian menu
selalu diatas dan jika di scroll kebawah pun tetap tampil.
2. Tugas
·
Jelaskanfungsiatribut position disertaicontoh!
Position menentukan jenis metode penentuan posisi yang
digunakan untuk elemen (static, relative, absolute or fixed).
Jelaskan arti dari border: 1px solid black;
ð merupakan properti dari
border yang diset dalam satu deklarasi yaitu border-width, border-style, dan
border-color
Atribut:
ð background-color
digunakan untuk mengatur warna dari sebuah elemen
ð color
digunakan untuk menentukan warna teks
ð margin mengatur tepi dari elemen
yang terdiri dari empat nilai yaitu top, left, right dan buttom jika disebutkan margin
saja maka setiap elemennya bernilai yang ditentukan.
DOWNLOAD
- Filenya disini
- Source Code
No comments:
Post a Comment