Nama saya Ivan Kharisma, Saya lahir di Sleman, Yogyakarta pada tanggal 30 April 1993
Saat ini saya sedang menempuh studi S1 di STMIK AMIKOM YOGYAKARTA
Oke cukup sekian dan terimakasih... alhamdulilah tugas saya selesai.. hehehe... :D
. Tulisan
yang saya blok bewarna biru diatas adalah kode HTML untuk memanggil file CSS
nya,, style.css bisa anda ganti dengan
nama file css yang anda buat, misalkan anda menyimpan file css dengan nama bosengaptek.css maka pemanggilanya menjadi
seperti ini bosengaptek.css" />
2.
adalah pemanggil ID header yang akan kita
buat nanti di file CSS nya.
3. adalah pemanggil style CSS nya untuk memberikan effect/gaya
pada menu li (home,link 1,link 2,link
3).
4. untuk
yang bewarna merah silahkan diganti
sesuka hati anda ^_^
Berikut
adalah kode CSS nya :
#header{
height:213px; width:850px; margin:0 auto:0; background-image:url(AMIKOM.png); } #top-navigation{ list-style:none; padding:0; margin:0; background:#bab3d6; float:left; width:850px; } #top-navigation li { display:inline; } a:hover { color:white; font-size:20px; } |
Perhatikan
tulisan yang saya blok warna biru !!!
1. #header adalah style CSS yang akan saya panggil
pada kode HTML tadi. disini saya menggunakan #header untuk memanggil gambar dan mengatur panjang lebar nya.
2.#top-navigation adalah style CSS yang
saya gunakan untuk mengatur warna background dan panjang lebar nya background li
(home,link 1,link 2,link 3).
3. #top-navigation
li adalah style CSS yang saya gunakan untuk mengatur dan memasukan li (home,link
1,link 2,link 3) kenapa disitu saya tulis display:inline; ? karena saya akan
memasukan tulisan (home,link 1,link 2,link 3) kedalam style CSS background #top-navigation
yang telah saya buat pada langkah nomor 2 diatas.
4. a:hover
adalah style CSS untuk membuat effect pada tulisan li (home,link
1,link 2,link 3), kenapa disitu saya tulis color:white; font-size:20px;, agar waktu tulisan li
terkena cursor mouse, warna tulisan tersebut akan berubah menjadi putih dan
ukuran tulisan akan menjadi 20px.
5.
AMIKOM.png adalah gambar yang telah saya buat, dan akan saya masukan sebagai
background pada bagian header.
Gimana saudara-saudara ? memang rada ribet sih, saran saya sebaiknya anda
pahami dulu pengertian dari langkah-langkah yang saya tulis diatas.
Jika semua kode HTML & CSS sudah ditulis dengan benar (anda juga bisa
copy paste kode HTML dan CSS diatas ganti file.png nya dengan gambar anda),
simpan semua file HTML,CSS dan image nya dalam satu folder
seperti pada gambar dibawah ini :
Jika sudah, silahkan coba jalankan file html nya. INGAT !!! format
penyimpanan kode HTML = .html dan untuk CSS = .css .
Jika tampilan tidak seperti pada gambar "Contoh WEB saya", maka kemungkinan ada
kesalahan penulisan pada kode CSS nya, coba cek dengan lebih teliti
lagi.
Pada menu li (link 1,link 2,link 3) disitu masih kosong, dan untuk
membuatnya kita tinggal copy paste saja file HTML nya menjadi 3 file. karena
pada kode HTML tadi saya menulis seperti pada gambar dibawah ini :
maka ubahlah nama ketiga file tersebut menjadi 1.html, 2.html, 3.html. sehingga
didalam 1 folder terdapat 6 file (4 html,1 css dan 1 file image.jpg/png)
seperti gambar dibawah ini :
Kemudian ubahlah paragraf tiap file
html nya. pada gambar "Contoh WEB saya", file 3.html nya
saya tulis paragraf sebagai berikut :
Nama saya Ivan Kharisma, Saya lahir di Sleman, Yogyakarta
pada tanggal 30 April 1993
Saat ini saya sedang menempuh studi S1 di STMIK AMIKOM YOGYAKARTA Oke cukup sekian dan terimakasih... alhamdulilah tugas saya selesai.. hehehe... :D |
maka anda
bisa merubah paragraf file index.html, 1.html, 2.html, sesuka hati anda, cara
merubahnya, jalankan pada browser 1 per 1 file html nya >> klik kanan
>> View page source, kemudian copy dan paste kode nya di notepad, ubah
paragrafnya, dan simpan kembali dengan nama yang sama...
Tidak ada komentar:
Posting Komentar