Membuat Web Statis Dengan Dasar HTML Dan CSS Oke saudara-saudara... berjumpa lagi dengan saya di Bosengaptek.blogspot.com. Pada p...

By Unknown September 26, 2012 0 komentar

Membuat Web Statis Dengan Dasar HTML Dan CSS

Oke saudara-saudara... berjumpa lagi dengan saya di Bosengaptek.blogspot.com.
Pada postingan kali ini saya akan berbagi informasi tentang dasar-dasar HTML dan CSS. bagaimana caraMembuat Web Statis Dengan Dasar HTML Dan CSS ? langsung saja simak tutorial saya di bawah ini !

Berikut adalah screenshoot tampilan website statis menggunakan kode sederhana dasar HTML dan CSS :

Contoh WEB saya
Nah sekarang, untuk membuat tampilan web seperti gambar diatas inilah kode HTML dan CSS nya :

Berikut adalah kode HTML nya :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>


<ul id="top-navigation">
<li><a href="index.html"><span>home</span></a></li>
<li><a href="1.html"><span>link 1</span></a></li>
<li><a href="2.html"><span>link 2</span></a></li>
<li><a href="3.html"><span>link 3</span></a></li>
</ul>


<br />
<p>Nama saya Ivan Kharisma, Saya lahir di Sleman, Yogyakarta pada tanggal 30 April 1993</p>
<p>Saat ini saya sedang menempuh studi S1 di STMIK AMIKOM YOGYAKARTA</p>
<p>Oke cukup sekian dan terimakasih... alhamdulilah tugas saya selesai.. hehehe... :D</p>


</body>


1. Tulisan yang saya blok bewarna biru diatas adalah kode HTML untuk memanggil file CSS nya,, style.cssbisa anda ganti dengan nama file css yang anda buat, misalkan anda menyimpan file css dengan namabosengaptek.css maka pemanggilanya menjadi seperti ini <link rel="stylesheet" type="text/css" href="bosengaptek.css" />

2. <div id="header"></div> adalah pemanggil ID header yang akan kita buat nanti di file CSS nya.

3. <ul id="top-navigation"> 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 :


<li><a href="1.html"><span>link 1</span></a></li>
<li><a href="2.html"><span>link 2</span></a></li>
<li><a href="3.html"><span>link 3</span></a></li>
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 :

<p>Nama saya Ridwan Baddalwan saya lahir di Jakarta, Jakarta pada tanggal 23 November 1997</p>
<p>Saat ini saya sedang menempuh studi S1 di STMIK AMIKOM YOGYAKARTA</p>
<p>Oke cukup sekian dan terimakasih... alhamdulilah tugas saya selesai.. hehehe... :D</p>

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...

Oke... demikian tutorial Membuat Web Statis Dengan Dasar HTML Dan CSS, selamat mencoba dan semoga berhasil saudara - saudara... ! 

0 komentar:

Langganan: Posting Komentar (Atom)