3
MODUL 2 CASCADING STYLE SHEET CSS
A. KOMPETENSI DASAR •
Memahami jenis dan struktur dasar dokumen CSS. •
Mampu memanfaatkan CSS untuk memformat dokumen HTML. •
Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman web yang elegan dan menarik.
B. PETUNJUK •
Awali setiap aktivitas dengan do’a, semoga berkah dan bermanfaat. •
Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar. •
Kerjakan tugas- tugas praktikum dengan baik, sabar dan jujur. •
Tanyakan kepada asisten dosen apabila ada hal-hal yang kurang jelas.
C. DASAR TEORI.
1. Cascading Style Sheet. 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. 2. Pengenalan CSS
3
CSS Cascading Style Sheet dapat menerapkan suatu format ketika lebih dari satu style berlaku. Misalkan kita menginginkan semua paragraph harus memiliki font biru, namun
secara khusus menginginkan satu kata agar berwarna merah. CSS bisa melakukan itu. File index.HTML:
File stylesheet.css
D. LATIHAN
1. Menggunakan Style Sheet . -
Inline.
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Inline Style title
head body
-- menerapkan embedded style pada paragraf -- p
style =
color:red; font-style:italic Ini paragraf pertama
-- menerapkan embedded style pada paragraf -- p
style =
color:blue; font-weight:bold Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna aliqua. p
Ini paragraf ketiga
body
3
html
Gambar 1.1 kode HTML
Gambar 1.2 Tampilan hasil halaman web Penjelasan :
-
Syntax html diatas menerapkan style CSS jenis inline dimana property style diterapkan secara langsung pada baris atau elemen HTML. Inline menerapakan style per baris
atau per tag melalui atribut style.pada syntax HTML diatas , terdapat pendeklarasian DOCTYPE html dengan mengikutsertakan validator untuk dokumen html yang
menggunakan CSS ini. Pada bagian head , terdapat pendeklarasian nama title yang
digunakan yaitu “Inline Style”, tulisan ini akan muncul pada bagian title halaman yang sedang dibuka pada browser. Kemudain pada bagian body terdapat syntax penerapan
inline style yang mendeklarasikan style yang digunakan pada pargraf 1 adalah warna merah dengan font style italic. Kemudian pendeklarasian paragraph kedua dengan
menggunakan style warna biru dengan font-weight bold. Sehingga nanti hasilnya tulisan pada paragraph 1 adalah berwarna merah dengan italic, paragraph kedua
berwarna biru dengan bold ditulis tebal dan paragraph ketiga ditulis default tanpa perubahan apapun.
-
Embedded Style
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Embedded Style title
style type
= textcss
-- p {
color: red; font-style: italic;
}
3
-- style
head body
p
Ini paragraf pertama
p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. p
Ini paragraf ketiga body
html Gambar 1.3 kode HTML
Gambar 1.4 Tampilan hasil halaman web
Penjelasan :
-
Program diatas adalah penerapan menggunakan embedded style. Aturan penggunaan Embedded style didefinisikan ke dalam satu blok kemudan digunakan di elemen-
elemen HTML. Pendeklarasian style pada bagian head. Sehingga hasilnya menyeluruh. Seperti pada program diatas, menggunakan style type = textcss, dengan
aturan pada paragraph menggunakan tulisan warna merah dan font style italic. Hasilnya adalah setiap paragarf yang ada pada bagian body akan dituliskan dalam
tulisan berwarna merah dan dicetak miring.
3
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Embedded Style title
style type
= textcss
-- p {
color: red; font-style: italic;
} style2 {
color: blue; font-weight: bold;
} --
style head
body p
class =
style1 Ini paragraf pertama
p id=style2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat.
p class=style3 Ini paragraf ketiga
body html
Gambar 1.5 Kode HTML
Gambar 1.7 Tampilan hasil halaman web
3
Penjelasan :
-
Sama seperti contoh sebelumnya, hanya saja menggunakan 2 style yang dituliskan pada head. Style kedua menggunakan warna biru dengan font weight bold. Penulisan
deklarasi style1 dan style2 berbeda. Style 1 menggunakan class sehingga nantinya dapat digunakan berulang kali pada satu halaman HTML, sedangkan style2
menggunakan id yang sifatnya unik , sehingga hanya dapat digunkana 1 kali dalam satu HTML. Penerapan style1 dan style2 , yaitu dituliskan pada p…
p class=”style1” Ini pargraf pertama. Sehingga nanti hasilnya adalah per paragraph
dengan style yang digunakan.
-
Linked
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Linked Style title
link rel
= stylesheet
href =
style.css type
= textcss
head body
p class
= style1
Ini paragraf pertama
p id
= style2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.
p class
= style1
Ini paragraf ketiga
body html
Gambar 1.8 kode HTML
3
Gambar 1.9 Tampilan hasil halaman web Penjelasan :
-
Program diatas menggunakan pendekatan linked, yang aturannya menggunakan 2 dokumen html. Satu digunakan untuk pendeklarasian aturan style dan disimpan dalam
format css, dan yang satunya adalah dokumen HTML. Cara kerjanya adalah menggunakan suatu link yang penulisannya diletakkan pada head. Link yang dituju
adalah file css tersebut untuk dapat mengakses style-style yang ada pada file css. Hasilnya sama seperti program sebelumnya, yang membedakan adalah penggunaan
pendekatan linked yang prinsipnya file dokumen dan CSS diletakkan terpisah menggunakan tag link. Penulisan tag link : link rel=”stylesheet” href=”style.css”
type=”textcss” .
2. Tipografi
-
Style Font
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Style Font title
style type
= textcss
-- .style font {
font-family: Georgia; font-size: 18px;
font-style: italic; font-weight: bold;
text-decoration: underline; color: red;
} --
style head
body
3
p class
= style_font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua. p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua. body
html
Gambar 2.0 kode HTML
Gambar 2.1 Tampilan hasil halaman web Penjelasan :
-
Program diatas menerapkna pendekatan embedded karena mendeklarasikan penulisan aturan CSS pada satu blok head. Dengan menggunakan class sehingga nantinya
dapat digunakan berulang kali. Aturan CSS yang digunakan adalah style font, dengan Font-family : Georgia, size : 18px, style : italic, weight : bold dan decoration textnya
underline dengan fot color warna merah. Sehingga nanti hasilnya pada paragraph 1 ditulis dengan tulisan Georgia berukuran 18px dicetak miring dan ditebal serta diberi
garis bawah. Seddangkan paragraph kedua ditulis default karena tidak menggunakan style CSS.
-
Initial Cap
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Style Font title
style type
= textcss
--
3
p:first-letter { font-size: 3em;
background-color: black; color: white;
} --
style head
body p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat.
body html
Gambar 2.2Kode HTML
Gambar 2.3 Tampilan hasil halaman web Penjelasan :
-
Program diatas menggunakan pendekatan embedded style. Menggunakan style first- letter style pada paragraph dengan ketentuan font size 3em, background colour hitam
dan warna tulisannya putih. Ini dimaksudkan menggunakan style CSS yang hasilnya adalah mengubah huruf awal first letter pada paragraph menjadi lebih besar dan
memiliki tampilan berbeda dibandingkan penulisan huruf hinga kalimat setelahnya. 3.
Elemen- elemen Halaman
-
Border
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Style Sheet title
3
style type
= textcss
-- .border1 {
border: 1px solid red; }
.border2 { border: 1px dashed red;
} .border3 {
border: 1px dotted red; }
-- style
head body
p class=border1 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco
laboris nisi ut alliquip ex ea commodo consequat.
p class=border2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. p class=border3
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. body
html
Gambar 2.4Kode HTML
3
Gambar 2.5 Hasil Tampilan Web Penjelasan :
-
Program diatas menggunakan pendekatan embedded style dengan pendeklarasian 3 class style border yang digunakan pada halam HTML ini. Style border 1 digunakan
pada paragraph pertama dengan border 1px garris solid berwarna merah, yang artinya borderannya dalam bentuk garis penuh. Style border 2 digunakan pada paragraph
kedua dengan border 1px garis dashed berwarna merah , yang artinya borderannya dalam bentuk garis putus-putus tebal dan berjarak, sedangkan style border 3 yang
digunakan pada paragarf 3 menggunakan tipe dotted yang hasilnya borderan dalam bentuk garis putus-putus kecil sehingga jaraknya lebih kecil.
-
Padding
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Style Sheet title
style type
= textcss
-- .border1 {
border: 1px solid red; padding: 10px;
} .border2 {
border: 1px dashed red; padding: 20px 10px 5px 40px;
} --
style
3
head body
p class
= border1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. p class=border2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco
laboris nisi ut alliquip ex ea commodo consequat.
body html
Gambar 2.6 Kode HTML
Gambar 2.7 Tampilan hasil web Penjelasan :
-
Program diatas menerapkan padding yang befungsi untuk menetapkan jarak antara border dengan konten. Pada dokumen ini menggunakan menggunakan 2 border style
dengan padding yang berbeda. Style border 1 menggunakan padding sebesar 10px, dan style border 2 menggunakan padding 20px 10px 5px 40px, yang artinya padding atas
sebesar 20px, kanan 10px, bawah 5px dan kiri 40px. Hasilnya terlihat jelas berbeda antara paragraph 1 dan 2. Border 1 digunakan pada paragraph 1 yang nilai padding
semua sisi 10px, sehinga rata kanan kiri atas bawah.
3
4. Link
-
Link 1
head title
Style Link title
style type
= textcss
-- .link_none {
text-decoration: none; }
-- style
head body
a href
= link2.html
Link Normal a
br a
href =
link2.html class
= link_none
Link tanpa garis bawah
a body
html
Gambar 2.8 Kode HTML
Gambar 2.9 Tampilan Hasil Web Penjelasan :
-
Program diatas menggunakan pendekatan embedded style dengan class link_none yang artinya untuk link tanpa dekorasi apapun, termasuk underline, sehingga
hasilnya sebuah link tidak memiliki garis bawah. Dimaksudkan untuk melakukan modifikasi pada penulisan sebuah link.
-
Link 2
head title
Style Link title
style type
= textcss
--
3
.link1 a:hover { text-decoration: none;
} .link2 a:hover {
font-style: italic; font-weight: bold;
} .link3 a:hover {
cursor: wait; }
-- style
head body
a href
= link2.html
Link Normal a
br p
class =
link1
a href
= link2.html
Link tanpa garis bawah a
p
p class=link2 a href=link2.htmlUbah style fonta
p
p class=link3 a href=link2.htmlUbah kursora
p body
html
Gambar 3.0 Kode HTML
Gambar 3.1 Tampilan hasil halaman web Penjelasan :
3
-
Program diatas menggunakan 3 style link , yang pertama tanpa dekorasi text, yang kedua dicetak miring dan tebal, yang ketiga dengan cursor wait. Pada Link Normal
dan link tanpa garis bawah yang ada pada link 1, ditautkan ke link 2. Kemudian pada link 2 link bertambah 2 yaitu ubah style font dengan style link2 dicetak miring dan
tebal dan ubah kursor menggunakan style link3 cursor: wait.
5. List
head title
Style List title
style type
= textcss
-- leftmenu ul {
width: 200px; list-style-type: none;
padding:0; margin:0; }
leftmenu a:link, leftmenu a:visited, leftmenu a:active { padding-left: 15px;
text-decoration: none; }
leftmenu a{ padding: 5px 0px 5px 15px; display: block;
background: 6cae15 no-repeat left center; margin: 0px 0px 1px; color: ffffff
leftmenu a:hover { background: 5e9711 no-request left center: color: ffffff
} --
style head
body
List Normal ul
liSatuli liDuali
ul hr
Style List div id=leftmenu
ul lia href=Menu Satuali
lia href=Menu Duaali lia href=Menu Tigaali
ul
3
div body
Gambar 3.2 Kode HTML
Gambar 3.3 Tampilan hasil halaman web Penjelasan :
-
Menggunakan 4 id style : yang pertama leftmenu ul unordered list dengan width 200px, list style typenya none, dengan padding dan margin 0. Kedua leftmenu link,
dengan aturan link dapat dikunjungi dan berstatus aktif kemudian padding kiri 15px tanpa text decoration. Yang ketiga leftmenu dengan aturan padding atas kanan bawah
kiri berurutan 5px 0px 5px 15px dan diplay diberi block dengan background berwarrna kode 6cae15 no repeat left center dan margin 0px 0px 1px atas kanan
bawah dengan warna white kode : ffffff. Dan style keempat leftmenu dengan ketentuan background bewarna hijau kode 5e9711 no repeat left center dengan warna
putih ffffff. Sehingga hasilnya pada list Normal menggunakan default penulisan list dan untuk style list menu 1, 2, 3 menggunakan class leftmenu sehingga hasilnya
terdapat 3 block menu seperti pada gambar.
6. Division
-
Ukuran area
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Demo Ukuran Division title
style type
= textcss
3
-- .box1 {
width: 200px; height: 50px;
background: grey; border: 1px solid red;
} .box2 {
margin: 10px; padding: 10px;
width: 400px; height: 100px;
border: 1px solid red; }
-- style
head
body div class=box1
Paragraf ini di dalam tag lt;divgt;
div div class=box2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco
laboris nisi ut alliquip ex ea commodo consequat.
div
Gambar 3.4 kode HTML
Gambar 3.5 Tampilan hasil halaman web
3
Penjelasan :
-
Program diatas membuat 2 class box dengan ketentuan masing-masing box yang berbeda. Box 1 berukuran 200px x 50px dengan background berwarna abu dan border
sebesar 1px garis solid bewarna merah. Sedangkan box 2 berukuran 400px x 100px menggunakan margin 10px untuk semua posisi dan padding sebesar 10px, border
sebesar 1px garis solid berwarna merah. Sehingga hasilnya akan tampak berbeda antara box 1 dan 2 karena box 2 menggunakan margin dan padding, sedangkan box 1
tidak menggunakan margi sehingga secara default akan diletakkan pada pojok kiri atas halaman.
-
Format font
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Demo Ukuran Division title
style type
= textcss
-- .box1 {
width: 200px; height: 50px;
background: grey; text-transform: uppercase;
font-weight: bold; border: 1px solid red;
} .box2 {
margin: 10px; padding: 10px;
width: 400px; height: 100px;
border: 1px solid red; }
-- style
head body
div class=box1 Paragraf ini di dalam tag lt;divgt;
div
div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
3
sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. div
Gambar 3.6 kode HTML
Gambar 3.7 Tampilan hasil halaman web Penjelasan :
-
Program diatas sama seperti program sebelumnya, yang membedakan adalah style pada box 1 diubah menjadi berukuran 200px x 50px dengan text-transofrm : uppercase
menjadi lebih besar tulisannya dan dicetak tebal.
-
Posisi area
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en
lang =
en
head title
Demo Posisi Division title
style type
= textcss
-- .box1 {
float: left; width: 200px;
height: 50px;
3
background: grey; border: 1px solid red;
} .box2 {
float: right; padding: 10px;
width: 300px; height: 100px;
border: 1px solid red; }
-- style
head
body div class=box1
Paragraf ini di dalam tag lt;divgt;
div div class=box2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco
laboris nisi ut alliquip ex ea commodo consequat.
div -
Posisi area 1
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en
lang =
en
head title
Demo Posisi Division title
style type
= textcss
-- .box1 {
float: left; width: 200px;
height: 50px; background: grey;
border: 1px solid red; }
.box2 { float: right;
padding: 10px; width: 300px;
height: 100px; border: 1px solid red;
} .box3 {
3
me-reset pengaturan float left maupun right clear: both;
float: left; width: 200px;
height: 50px; background: grey;
border: 1px solid red; --
style head
body div class=box1
Paragraf ini di dalam tag lt;divgt; div
div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. div
div class=box3 Paragraf ini di dalam tag lt;divgt;
div body
html
Gambar 3.8 Kode HTML
Awal:
3
modifikasi:
Gambar 3.9 Tampilan hasil halaman web Penjelasan :
-
Program diatas adalah untuk mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS. Box1 dengan float= left, berukuran 200px x 50px
background abu-abu dengan border solid 1px berwarna merah. Box2 dengan float= right berukuran 300px x 100px , dengan padding 10px dan border solid 1px berwarna
merah. Maka nanti hasilnya adalah box1 terletak pada sisi kiri halam dan box 2 terletak pada sisi kanan halaman. Atribut float mencoba menempatkan area box
sepanjang area yang masih bisa dilakukan. Kemudian untuk memodifikasi agar dapat muncul seperti gambar kedua, melakukan penambahan baru setelah batas kotak
terluaskotak kanan, dengan mereset atribut float dengan menggunakan atribut clear. Sehingga hasilnya akan muncul seperti gambar kedua.
7. Membuat Kerangka
-
Syntax :
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Demo Wrapper title
style type
= textcss
-- wrapper {
margin: auto; width: 700px;
border: 1px solid red; }
-- style
head
3
body div
id =
wrapper
p
Paragraf ini di dalam tag lt;divgt;
p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris
nisi ut alliquip ex ea commodo consequat. div
body -
Screen shoot :
-
Penjelasan :
Program diatas menggunakan fungsi wrapper untuk menampung keseluruhan desain. Pada id wrapper terdapat pendeklarasian penggunaan margin auto yang
berfungsi untuk menempatkan area kerangka tepat berada di tengah sehingga berapapun ukurannya tidak akan mempengaruhi letak area kerangka. Kemudian
dengan ukuran width sebesar 700px dan border 1px garis solid berwarna merah. 8.
Desain Layout
-
Syntax :
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en
lang =
en
head title
Desain Layout Sederhana title
link rel
= stylesheet
href =
mystyle.css type
= textcss
head body
3
div id
= wrapper
div id
= header
Header
div div
id =
inner
div id
= sidebar
Sidebar
div div
id =
content Content
div div
div id=footer Footer
div
div body
html -
Screen shoot :
-
Penjelasan :
Program diatas menggunakan 2 file html, 1 file css untuk pendeklarasian style apa saja yang digunakan pada file dokumen html yang akan digunakan sebagai halaman web.
Pendeklarasian wrapper, header, inner, sidebar, content dan footer yang menggunakan id sehingga tidak mungkin sama dengan id lainnya. Kemudian pada file document html ,
untuk dapat menggunakan pendeklarasian style yang telah disimpan dalam file css maka pendeklarasian fungsi pemanggilan dapat dituliskan pada bagian head dengan
menggunakan pendekatan linked. Pada bagian body untuk header menggunakan id
3
wrapper dan header. Pada bagian sidebar menggunakan inner dan sidebar. Bagian content menggunakan fungsi content dan footer menggunakan fungsi footer. Maka hasilnya dapat
dilihat pada screenshoot.
E. STUDI KASUS
-
Membuat desain header web dengan memanfaatkan CSS dan background gambar.
Source Code HTML
-
Box.css
header {
height : 100px;
border : 1px solid blue;
margin : auto;
padding : 10px 10px 10px 10px;
border-bottom : 12px solid black;
background-image : -moz-linear-gradientbottom, FFFFFF 0,
FFB24D 50, F56505 100; }
. box1
{ float
: left; width
: 200px; height
: 100px; }
. box2
{ float
: left; width
: 405px; height
: 100px; }
. box3
{ float
: right; width
: 350px; height
: 50px; }
. box4
{ float
: right; width
: 350px; height
: 50px; }
textheader {
float : left;
margin : auto;
height : 60px;
padding : 20px 0px 20px 20px;
font-size : 30px;
font-weight : bold;
text-align : left;
font-family : Jokerman;
color : black;
}
3
menusearch {
float : right;
margin : 25px 60px 0 0;
width : 250px;
height : 30px;
font-family : Monotype Corsiva
} .
link a
: hover
{ text-decoration
: underline; }
-
Dokumen HTML
DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN
http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html
xmlns =
http:www.w3.org1999xhtml xml:lang=
en lang
= en
head title
Studi Kasus 1 title
link rel
= stylesheet
href =
box.css type
= textcss
head body
div id
= header
div class
= box1
align =
left
img src
= um.png
align =
right height
= 100
width =
100 img
div div
class =
box2 align
= left
div id
= textheader
Teknik Elektro
div div
div class
= box3
align =
center
div class
= link
a href
= Link1.html
Home a
|
a href
= Link2.html
Sitemap a
|
a href
= Link3.html
RSS a
|
a href
= Link4.html
Contact a
|
a href
= Link5.html
About us a
div div
div class
= box4
align =
right
div id
= menusearch
label for
= firstname
Search: label
input type
= text
name =
search required pattern=
[A- Za-z]{1,20}
placeholder =
search brbr
div body
html
3
Hasil Tampilan Web:
Penjelasan :
- Program diatas menggunakan 4box untuk mendesain header agar dapat tampil seperti pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan
tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Menggunakan
pendekatan linked sehingga pada bagian head dicantumkan halaman html yang akan di link-an. Menggunakan file css bernama box yang isinya pengaturan dari desain penyusun
header. Kemudian pada bagian body, hanya ada id header, karena hanya akan membuat sebuah header web. Pada bagian header, dicantumkan pemanggilan class box1,2,3,4 untuk
dapat menampilkan pengaturan yang dideklarasikan pada file css. Untuk field search menggunakan fungsi required sehingga nantinya akan di link-an jika mengklik button atau
meneka enter pada keyboard.
F. TUGAS CHALENGE Source Code HTML :