Está en la página 1de 7

Pemrograman Internet

Suprayogi,S.Kom

Membuat Layout menu dengan CSS

Langkah 1
Membuat file index.html dan style1.css, kemudian jalankan file index.html tersebut pada
browser IE

Script 1

script 2 (style1.css)

gb1
Pemrograman Internet
Suprayogi,S.Kom

Langkah 2
Menambahkan box header pada halaman web
Script 3

script 4 (style1.css)

Gb2.
Pemrograman Internet
Suprayogi,S.Kom

Langkah 3
Menambahkan style teks pada halaman web
Script 5

Script6 (style1.css)

Gb 3
Pemrograman Internet
Suprayogi,S.Kom

Langkah 4

Menambahkan box navigasi kanan dan atas pada halaman web

Script 7

Script 8 (style1.css)
Pemrograman Internet
Suprayogi,S.Kom

Gb4
Pemrograman Internet
Suprayogi,S.Kom

Langkah 6
Menambahkan box content dan link pada halaman web
Script 9

Scrip 10 (style1.css)
#box_content padding-right:0px;
{ padding-bottom:3px;
background-color:olive; padding-left:10px;
position : absolute; text-decoration:none; }
height:450px; #stylelink a:hover
width:700px; {
left:50px; border-bottom:1px solid #cccccc;
top:148px; height:25px;
padding:1em; background-color:maroon;
border-left-width:1px; background-image:none;
border-left-style:dotted; font-size:8pt;
border-left-color:#666666; text-decoration:none;
border-right-width:1px; color:#ffffff; }
border-right-style:dotted; #stylelink_top a:link
border-right-color:#666666; } {
#stylelink a:link border-bottom:1px solid #cccccc;
{ background-color:cyan;
display:block; font-size:10pt;
border-bottom:1px solid #cccccc; color:maroon;
background-color:#606060; height:25px;
font-size:8pt; width:100px;
color:#ffff00; padding-top:3px;
height:25px; padding-right:0px;
width:100px; padding-bottom:3px;
padding-top:3px; padding-left:10px;
padding-right:0px; text-decoration:none; }
padding-bottom:3px; #stylelink_top a:visited
padding-left:10px; {
text-decoration:none; } border-bottom:1px solid #cccccc;
#stylelink a:visited background-color:cyan;
{ font-size:10pt;
display:block; color:maroon;
border-bottom:1px solid #cccccc; height:25px;
background-color:#606060; width:100px;
font-size:8pt; padding-top:3px;
color:#ffff00; padding-right:0px;
height:25px; padding-bottom:3px;
width:100px; padding-left:10px;
padding-top:3px; text-decoration:none; }
Pemrograman Internet
Suprayogi,S.Kom

Gb 5 Gambar Hasil akhir Layout menggunakan CSS