1. 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

2. Pemrograman Internet
Suprayogi,S.Kom
Langkah 2
Menambahkan box header pada halaman web
Script 3
script 4 (style1.css)
Gb2.

3. Pemrograman Internet
Suprayogi,S.Kom
Langkah 3
Menambahkan style teks pada halaman web
Script 5
Script6 (style1.css)
Gb 3

4. Pemrograman Internet
Suprayogi,S.Kom
Langkah 4
Menambahkan box navigasi kanan dan atas pada halaman web
Script 7
Script 8 (style1.css)

5. Pemrograman Internet
Suprayogi,S.Kom
Gb4

6. 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; }

7. Pemrograman Internet
Suprayogi,S.Kom
Gb 5 Gambar Hasil akhir Layout menggunakan CSS