Bosen Gaptek

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 cara Membuat 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 :

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="header"></div>

<ul id="top-navigation">

<li><a href="index.html">home</a></li>
<li><a href="1.html">link 1</a></li>
<li><a href="2.html">link 2</a></li>
<li><a href="3.html">link 3</a></li>
</ul>

 
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

</body>

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

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

Oke... demikian tutorial Membuat Web Statis Dengan Dasar HTML Dan CSS, selamat mencoba dan semoga berhasil saudara - saudara... ! jika saudara masih bingung silahkan bertanya pada kotak komentar dibawah.

« Baca Selengkapnya »

Untuk Membuat Effect Lantai Pada Corel Draw, seperti gambar diatas, tool yang dibutuhkan hanya 3 yaitu :

Mirror Effect
Interactive Transparancy Tool
Shaping Dengan Intersect

buatlah tulisan terserah anda dengan cara menggunakan Text Tool atau bisa langsung anda tekan F8 pada keyboard.

Selanjutnya ikuti langkah berikut :

Copy text yang anda buat tadi tepat dibawah nya, dengan cara menekan klik kanan pada text yang akan di copy, kemudian seret kebawah, jika sudah tepat berada dibawah tekan tombol klik kiri, kemudian lepaskan kedua tombol tersebut secara bersamaan, dan hasilnya seperti ini.

Kemudian, balik tulisan tersebut menggunakan effect mirror dengan cara klik objek nya terlebih dahulu kemudian baru kita balik menggunakan effect mirror seperti gambar dibawah ini :

Setelah terbalik, kita akan bikin tulisan tersebut menjadi transparan dan menjadi seolah-olah adalah bayangan dari tulisan/objek utama kita dengan munggunakan Interactive Transparency Tool. caranya, klik objek nya terlebih dahulu, kemudian kita klik Tool nya dan kembali klik tahan pada objek nya. atur Transparency nya sesuai dengan selera anda.

Nah sebenarnya proses membuat effect lantainya sudah selesai, tapi disini kita akan menambahkan lagi effect Shaping dengan Intersect, agar gambar terlihat lebih menarik lagi. Caranya, tampilkan dulu Shaping tool nya dengan mengeklik windows--> Dockers--> Shaping

Kemudian perhatikan di sebelah kanan layar akan muncul Shape Tool (Lihat gambar diatas), sekarang mari kita gunakan Tool tersebut agar effect lantai yang kita buat menjadi lebih bagus lagi. hehehe..

Langkah 1 buat lingkaran menggunakan ellipse tool, berikan sembarang warna pada lingkaran yg anda buat, kemudian letakkan di depan objek pertama tadi seperti gambar dibawah ini .

Selanjutnya klik lingkaran tersebut. dan pilih Intersect pada Shape tool yang tadi kita tampilkan, untuk Source Object dan Target Object nya bisa anda gunakan sesuai dengan kebutuhan dan selera anda. jika sudah klik Tombol Intersect, maka kita akan klik kan cursor kita ke objek tulisan utama tadi, seperti pada gambar dibawah ini .

mungkin anda akan mengerti apa effect dari Shaping dan Intersect ini tanpa saya jelas kan disini. caranya ? coba anda klik tahan dan geser bagian atas obyek utama yang tadi masuk di area lingkaran. seperti ini contohnya :

Langkah terakhir adalah masukan kembali potongan obyek yang tadi anda geser, ke dalam posisi semula. kemudian berilah warna yang agak terang dari obyek utamanya, disini saya akan memakai warna abu-abu.dan seperti inilah hasilnya saudara-saudara sekalian........

gHiMaNa..?? mOeDah BuKan ? HeHeHe (ALAY MODE ON)

tanpa kita sadari, disini kita sudah belajar mengenai effect Transparency dan Shaping Lohhh.. sekian tutorial dari saya, semoga bermanfaat, selamat mencoba dan semoga suksess...!!

Jangan lupa juga tinggalkan komentar anda pada kotak di bawah yaa..... ^_^

« Baca Selengkapnya »

Bosen Gaptek

Wednesday, December 7, 2011

Membuat Web Statis Dengan Dasar HTML Dan CSS

Saturday, July 23, 2011

Membuat Effect Lantai Pada Corel Draw