Scribd
Upload
38 views

CSS Layout

The document discusses steps to create a website layout using CSS. It outlines 6 steps: 1) Creating files for the HTML page and CSS stylesheet. 2) Adding a header box. 3) Adding text styling. 4) Adding top and right navigation boxes. 5) Adding a content box and links. 6) Includes CSS code for styling boxes, links, and a visual of the final layout. The document provides instructions and CSS code for building out the website layout.

Uploaded by

Septiawan Prio Setiadi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

CSS Layout

The document discusses steps to create a website layout using CSS. It outlines 6 steps: 1) Creating files for the HTML page and CSS stylesheet. 2) Adding a header box. 3) Adding text styling. 4) Adding top and right navigation boxes. 5) Adding a content box and links. 6) Includes CSS code for styling boxes, links, and a visual of the final layout. The document provides instructions and CSS code for building out the website layout.

Uploaded by

Septiawan Prio Setiadi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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 { 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

You might also like