Dokumen ini membahas tentang tugas pembuatan desain halaman website menggunakan CSS. Tugas tersebut meliputi mengubah font pada list agar sama dengan paragraf pertama, mengubah teks menu jadi link yang warnanya berubah saat di-hover, mengisi bagian kanan dengan konten dan menambahkan teks pada header.
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
1. PEMROGRAMAN BERBASIS WEB
CSS (Cascading Style Sheets)
Disusun oleh:
Firdaus Zulkarnain
12 1065 1100
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
2. I. TUGAS
1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis
font, ukurannya sama dengan paragraf pertama)
2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan
kursor, warna teks dan background-nya berubah.
3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten
misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda.
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
Jawab :
1. Berikan script berikut pada tag <ul></ul> :
Fungsinya adalah merubah font yang ada didalam tag <ul></ul> dengan “font
Candara” berukuran “12px”.
Hasilnya :
Tugas
3. 2. Merubah teks panel menjadi link dan merubah warna background link
Sebelum diberi script link
CSS untuk merubah warna link dan background link
Fungsi dari #menu a{
Memberikan warna putih pada font saat tidak disorot
}
Fungsi dari #menu a:hover{
Memberikan warna putih pada font dan background berwarna hitam
saat link disorot
}
Masing-masing panel menu diberi tag <a></a>
Hasil saat link disorot mouse
3. Mengisi halaman sebelah kanan dengan konten
Sebelum disorot mouse
4. Setelah disorot mouse
Gunakan tag <a></a> untuk membuat link ke artikel tujuan
CSS untuk artikel
Sama seperti pada fungsi CSS diatas yaitu untuk merubah warna font dan
background font saat disorot ataupun tidak disorot
Artikel 1 : ( hanya sebagai contoh )
4. Memberi teks pada header
Masukkan teks pada tag <div></div>
Contohnya :
<h2>PT.SUSU MAKMUR JAYA</h2>