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 { background-color:olive; position : absolute; height:450px; width:700px; left:50px; top:148px; padding:1em; border-left-width:1px; border-left-style:dotted; border-left-color:#666666; border-right-width:1px; border-right-style:dotted; border-right-color:#666666; } #stylelink a:link { display:block; border-bottom:1px solid #cccccc; background-color:#606060; font-size:8pt; color:#ffff00; height:25px; width:100px; padding-top:3px; padding-right:0px; padding-bottom:3px; padding-left:10px; text-decoration:none; } #stylelink a:visited { display:block; border-bottom:1px solid #cccccc; background-color:#606060; font-size:8pt; color:#ffff00; height:25px; width:100px; padding-top:3px;

padding-right:0px; padding-bottom:3px; padding-left:10px; text-decoration:none; } #stylelink a:hover { border-bottom:1px solid #cccccc; height:25px; background-color:maroon; background-image:none; font-size:8pt; text-decoration:none; color:#ffffff; } #stylelink_top a:link { border-bottom:1px solid #cccccc; background-color:cyan; font-size:10pt; color:maroon; height:25px; width:100px; padding-top:3px; padding-right:0px; padding-bottom:3px; padding-left:10px; text-decoration:none; } #stylelink_top a:visited { border-bottom:1px solid #cccccc; background-color:cyan; font-size:10pt; color:maroon; height:25px; width:100px; padding-top:3px; padding-right:0px; padding-bottom:3px; padding-left:10px; text-decoration:none; }

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