23.52
Unknown
11. Pertama,
Anda buka terlebih dahulu html editor (disini saya menggunakan Adobe
Dreamweaver CS 6), jika anda menggunakan Dreamweaver maka tampilan awalnya
seperti berikut :
22. Kemudian
buat struktur dari web yang akan kita buat, contoh strukturnya seperti ini :
Jika sudah, maka kita akan melihat tampilannya
tampak kosongdan hanya berisi kotak border (klik “Design” atau buka dengan
browser)
33. Untuk
memberikannya bentuk dan mengatur tampilannya, kita membuat CSS baru dengan
klik File – New – CSS, kemudian masukkan struktur CSSnya seperti berikut :
Jika sudah, untuk menyambungkan CSS yang sudah kita
buat dengan html-nya dengan cara klik kanan pada lembar kerja html, kemeudian
pilih “CSS Style – Attache Style Sheet” kemudian pilih browse tempat dimana anda
menyimpannya, lalu klik ok, setelah itu, link CSS muncul di atas <head>:
Setekah itu, anda bisa melihat desainnya kembali
seperti ini :
(nb : untuk warna anda bisa mengatur sesuai yang
diinginkan)
44. Setelah
itu, kita isi bagian – bagian halaman web tersebut sesuai dengan struktur yang
sudah dibuat sebelumnya :
a.
Pertama, pada
bagian “header”, kita akan memberi judul header dan jumlah laman pada web :
b.
Kedua, pada
bagian 1 web (“section class”), kita isi pada bagian “article” untuk membuat
postingan artikel dengan ketentuan :
1) “figure”
untuk menempatkan gambar artikel, dan “figcaption” disini untuk memberi nama
gambar tersebut :
2) “hgroup”
untuk membuat judul postingan artikel, sedangkan untuk menambahkan tulisan
artikel bisa diberi paragraph “p” dibawah “hgroup” :
Jika
sudah, anda dapat mengulangi langkah pada bagian b untuk membuat postingan
artikel yang kedua, dan tampilannya akan seperti berikut :
c.
Ketiga, pada
bagian 2 web (“aside”), kita isi dengan berita popular dan kontak dari web yang
kita buat :
Maka tampilannya
akan tampak seperti berikut :
d.
Keempat, pada
bagian “footer” kita hanya perlu mengisi tulisan copyright sumber web tersebut
:
55. Jika
sudah selesai dengan tahap diatas, maka kita akan mendapatkan hasil akhir
seperti tampilan berikut :
Posted in
0 komentar :
Posting Komentar