Praktikum 2

Layout Web Semantik

Tujuan “Membuat layout web semantik dengan html5 dan css3”

Bahan :
1. Notepad++
2. Webserver xampp
Keterangan : layout mocup dengan ms word berupa header, nav, content,
footer dan sidebar
Langkah kerja :
1. Disain mockup web dengan ms word
2. Buka notepad++
3. Buat ccs eksternal dengan nama file styel.css, simpan pada folder yang
sama
4. Tulis skrip dibawah ini
Mockup layout web dengan shape dimensi 960px. Jadi halaman index.php
akan tampil seperti layout dibawah

header

nav

Content/articel Sidebar/aside

footer

Tulis dalam tag body

Sekarang kita akan hubkan index.php dan halaman lainnya dengan CSS
denga penulisan eksterna .css nama file css tersebut defaultnya adalah
style.css. kita akan link css dibawah tag title
Isi style.css
Hasil

Latihan selanjutnya buat gambar dengan ukuran header dan berformat

png/jpg. Gambar ini akan kita jadikan gambar background header.