ZaRra Rahayu

Please Ejoy It

Just Open Your Ayes

Your World in Your Hands

Share Here

Kreative, Inovatif

Think Easy

Bloger Anggun

This I'm

I Have To

Rabu, 14 Mei 2014

Cara membuat drop down menu dengan CSS Linked

5/14/2014 07:36:00 AM    No comments

Pembahasan kali ini kita akan membuat drop down menu atau sub menu dengan menggunakan CSS. Langsung kita mulai membuat skrip pada ekstensi HTML sekiranya seperti berikut

<html>
<head>
<title>CSS Linked</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div id="wrapper">
<h3 align="center">Drop Down Menu dengan CSS</h3>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Picture</a> <ul>
       <li><a href="#">Logo</a></li>
       <li><a href="#">Vektor</a></li>
       <li><a href="#">JPEG</a></li> </ul></li>
<li><a href="#">Video</a></li>
<li><a href="#">Profile</a></li> </ul>
</div> </div>
</body>
</html>
Jangan lupa di save ya...

setelah skript HTML, kita akan membuat skript CSS yang mana akan membantu tampilan pada browser. Untuk CSS teman teman boleh mencoba skript di bawah ini dan jangan lupa simpan dengan ekstensi .css dan simpan dalam satu folder dengan HTML. Pada kali ini nama css adalah menu.css

@charset "utf-8"; /* CSS Document */
#wrapper { width:600px; margin:auto; }
#menu ul { font-family:Verdana, Geneva, sans-serif; font-size:14px; margin:0; padding:0; list-style:none; }
#menu ul li { display:block; position:relative; float:left; float:left; }
#menu li ul { display:none; }
#menu ul li a { display:block; text-decoration:none; color:#999; padding: 5px 15px 5px 15px; background:#CCC; white-space:nowrap; }
#menu ul li a:hover { background:#666; }
#menu li:hover ul { display:block; position:absolute; }
#menu li:hover li { float:none; font-size:10px; }
#menu li:hover a { background:#333;}
#menu li:hover li a:hover { background:#666; }

Sehingga tampilannya menjadi seperti berikut :

CSS Linked

Drop Down Menu dengan CSS







Terima kasih telah berkunjung, semoga bermanfaat dan tetap semangat....!!

Lanjutkan

Sabtu, 26 April 2014

Pengenalan CSS

4/26/2014 08:49:00 PM    No comments



Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam dan bukan merupakan bahasa pemograman. CSS menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman. CSS Bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen HTML yang diberikan. Warna, font, text size, background, susunanelemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSS.

Struktur penulisan

           Body {
                  background-image:star.jpeg;
                    }
Cara penulisan CSS

1. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Dan hasil output tampilan pada browser 
2. Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
 Dan hasil output tampilan pada browser



3. External Style Sheets

CSS didefinisikan secara terpisah dari skript HTML, style sheet external terhubung dengan dokumen melalui elemen head. File style sheet text disimpan menggunakan ekstensi .css.
 
  


Berikut skript style.css

 
Dan hasil output tampilan pada browser
Macam-macam Selector

1.      Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
2.      Class
Diawal penulisan menggunakan tanda titik,pada HTML ditambahkan class
3.      ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda.

Terima kasih telah mengunjungi blog saya semoga bermanfaat. Tetap semangat...!!!
Sumber : Barka Satya, M.Kom . Modul CSS dan HTML.
              Suprayogi,S.Kom. Pemrograman Internet


Lanjutkan

Cara Membuat Menu secara Horisontal atau Vertikal dengan CSS

4/26/2014 11:39:00 AM    2 comments


Hai hai semua..... postingan kali ini kita akan membahas mengenai menu yang terdapat di setiap web yang akan dibuat. Pada umumnya terletak di paling atas dari tampilan web. Contohnya seperti ini nih..



Dan untuk membuat tampilan seperti di atas kita akan menggunakan CSS yang langsung pada skript HTML nya.
Oke kita mulai dari
1.    Mendesain Menu (Vertikal) dengan CSS

One Step CARA MEMBUAT MENU (VERTIKAL) dengan CSS


Untuk mendesain menu dengan CSS kita memerlukan daftar menu yang dibuat dengan HTML.
Tag HTML yang digunakan untuk membuat menu adalah dengan tag ul. Di bawah ini adalah kode HTML dari menu yang akan didesain oleh CSS.

Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, id yang akan digunakan bernama “nav”sehingga kode di atas menjadi sbb:

Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:

Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
biru. Kurang lebih tampilannya seperti ini:
 Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah
<li></li>. Selain tag li, kita juga akan mendesain tag <a></a> (link) sehingga area yang bisa
diklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. Kode CSS nya adalah sbb:
Untuk menstandarisasi tampilan maka tambahkan kode CSS berikut:
Untuk menambah efek ketika mouse di atas salah satu menu item, maka kita akan mengubah
warna latar dari menu item tersebut dengan kode:
  Dengan skript lengkap sebagai berikut:
<html>
<head>
    <title>One Step</title>
</head>
<body>
<p>CARA MEMBUAT MENU (VERTIKAL) dengan CSS</p>
    <style>
        #nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 180px;
            background-color:#09C;
            float:left;/*untuk menstandarisasi tampilan di setiap browser*/
        }
        #nav li {
            margin: 0;
            padding: 0;
            float:left;
            width:100%;
        }
        #nav a {
            display: block;
            color: #FFF;
            text-decoration: none;
            padding: 0 15px;
            line-height: 2.5; border-bottom:1px solid #FFF;
            }
        #nav a:hover {
            background:#039;
            }
    </style>  
    <ul id="nav">
        <li><a href="#">Home</li>
        <li><a href="http//www.google.com">Google</li>
        <li><a href="http//www.youtube.com">Youtube</li>
        <li><a href="http//www.yahoo.com">Yahoo</li>
    </ul>
</body>
</html>

 Catatan:
  • IE6 merupakan browser yang tidak standar, sehingga seringkali menampilkan tampilan yang tidak diharapkan. Karena itu, selalu gunakan browser yang standar seperti Mozilla Firefox dan Safari.
  • Dan selalu periksa hasil desain kita di IE6 agar hasil desain kita sama di semua browser.

2. Mendesain Menu (Horisontal) dengan CSS

Perbedaan menu vertikal dengan horizontal adalah:
a.    Lebarnya jauh lebih lebar dari menu vertikal
b.    Teks nya berada di tengah
c.    Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
a.    Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
b.    Elemen a tidak memerlukan display:block, karena akan di-float
c.    Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
d.    Border pun diubah dari bottom menjadi right

Maka skriptnya menjadi berikut:
<html>
<head>
    <title>One Step</title>
</head>
<body>
<p>CARA MEMBUAT MENU (HORISONTAL) dengan CSS</p>
    <style>
        #nav { /*id yang berfungsi menghilangkan list lingkaran*/
            list-style-type:none; /*hilanhkan kode width*/
            margin:0;
            padding:0;
            background:#999;
            float:left; /*berfungsi untuk menstandarkan tampilan pada browser*/
            }
        #nav li{
            margin:0;
            padding:0;
            float:left; /*hapus kode width*/
            }
        #nav a{
            color:#333;
            text-decoration:none;
            line-height:2;
            border-right:1px solid #FFF; /*ubah border dari battom menjadi right*/
            text-align:center; /*tambahkan kode berikut*/
            width:127px;
            float:left;
            }
        #nav a:hover {/*untuk memberikan efek perbedaan warna ketika mouse mendekat*/
            background:#333;
            }
    </style>
    <ul id="nav">
        <li><a href="#">Home</li>
        <li><a href="https//www.google.com">Picture</li>
        <li><a href="https//www.google.com">Game</li>
        <li><a href="https//www.google.com">Music</li>
        <li><a href="https//www.google.com">Movie</li>   
    </ul>
</body>
</html>
Terima kasih telah mengunjungi blog saya dan terima kasih kepada sumber ilmukomputer.com semoga bermanfaat dan menambah ilmu serta semangat belajar kalian.


Lanjutkan

Jumat, 21 Maret 2014

Cara Membuat Form

3/21/2014 07:47:00 AM    No comments

   Cara membuat form untuk membuat formulir pendaftaran. Kali ini akan membahas mengenai tag table, tag ini di gunakan agar tampilan web lebih rapi dan tertata. Teman-teman bisa melihat contoh kegunaan tag table seperti ketika membuat email baru, mendaftar akun jejaring sosial dan lain sebagainya. Saat ini sedikit contoh script HTML untuk membuat formulir pendaftaran secara online.




Berikut adalah script pada HTML.

<html>
<head>
  <title>Latihan Membuat Form dengan Table</title>
</head>
<body bgcolor="#00CCCC">
  <h1><p align="center" style="font:'Comic Sans MS'">Formulir Pendaftaran</p></h1>
<table width="446" height="396" border="0" align="center">
<tr>
<td width="91">Nama</td>
<td width="26"><div align="center">:</div></td>
<td width="303"><input name="nama" type="text"></td>
 </tr>
 <tr>
<td>Tempat Lahir</td>
 <td><div align="center">:</div></td>
 <td><input name="tempat lahir" type="text"></td>
 </tr>
 <tr>
 <td>Tanggal Lahir</td>
 <td><div align="center">:</div></td>
 <td> <select name="tgl">
     <option value="1">01 </option>
     <option value="2">02 </option>
     <option value="3">03 </option>
     <option value="4">04 </option>
     <option value="5">05 </option>
     <option value="6">06 </option>
        </select>
<select name="bln">
     <option value="1">01 </option>
     <option value="2">02 </option>
     <option value="3">03 </option>
     <option value="4">04 </option>
     <option value="5">05 </option>
      <option value="6">06 </option>
</select>
 <select name="tahun">
     <option value="1990">1990 </option>
     <option value="1991">1991 </option>
     <option value="1992">1992 </option>
     <option value="1993">1993 </option>
     <option value="1994">1994 </option>
     <option value="1995">1995 </option>
</select>
</td></tr>
<tr>
    <td>Jenis Kelamin</td>
    <td><div align="center">:</div></td>
<td>
     <input type="radio" name="gender" value="Pria">Laki-laki
     <input type="radio" name="gender" value="Wanita">Perempuan
</td> </tr>
<tr>
    <td>Alamat</td>
    <td><div align="center">:</div></td>
    <td><textarea name="alamat" cols="28" rows="4"></textarea></td>
</tr> <tr>
 <td>Kode pos</td>
     <td><div align="center">:</div></td>
     <td><input name="kode pos" type="text"></td>
 </tr>
 <tr>
 <td>Status</td>
   <td><div align="center">:</div></td>
 <td>
  <input type="checkbox" name="status" value="menikah">Menikah
  <input type="checkbox" name="status" value="Blm menikah">Belum Menikah
 </td> </tr>
<tr>
<td>Agama</td>
<td><div align="center">:</div></td>
 <td> <select name="agama">
        <option value="1">Islam </option>
        <option value="2">Kristen </option>
        <option value="3">Khatolik </option>
        <option value="4">Budha </option>
        <option value="5">Hindu </option>
</select></td> </tr>
 <tr>
 <td>Hobby</td>
     <td><div align="center">:</div></td>
     <td><input name="hobby" type="text"></td>
 </tr>
 <tr>
      <td>Jurusan</td>
      <td><div align="center">:</div></td>
 <td>
       <input type="checkbox" name="jurusan" value="1">S1 TI
       <input type="checkbox" name="jurusan" value="2">S1 SI
       <input type="checkbox" name="jurusan" value="3">D3 TI
       <input type="checkbox" name="jurusan" value="4">D3 MI
 </td> </tr>
 <tr>
 <td>Komentar</td>
     <td><div align="center">:</div></td>
     <td><textarea name="komentar" cols="28" rows="5"></textarea></td>
</tr>
</tbody></table>

<table width="450" border="0" align="center"> <tbody>
<tr>
      <td width="332"><marquee direction="left" behavior="scroll" bgcolor="#FF0000" scrollamount="5">Pastikan data yang anda masukkan sudah benar</marquee></td>
      <td width="49"><input type="submit" value="Kirim"></td> <td width="55"><input type="reset" value="Ulangi"></td>
</tr> </tbody>
</table>
</body>
</html>


Dan hasil pada browser sebagai berikut


Latihan Membuat Form dengan Table

Formulir Pendaftaran

Nama
:
Tempat Lahir
:
Tanggal Lahir
:
Jenis Kelamin
:
 Laki-laki Perempuan
Alamat
:
Kode pos
:
Status
:
 Menikah Belum Menikah
Agama
:
Hobby
:
Jurusan
:
 S1 TI S1 SI D3 TI D3 MI
Komentar
:
Pastikan data yang anda masukkan sudah benar
Selamat bereksperimen ^-^

Lanjutkan

Minggu, 16 Maret 2014

Cara Memasukkan Gambar dan Membuat Link di HTML

3/16/2014 10:03:00 AM    No comments

   Pada postingan kali ini saya akan membagi pengalaman saya selama belajar HTML. Yang mana kali ini mengenai bagaimana cara memasukkan gambar dan membuat link di HTML. Baiklah kita mulai dengan :

Cara memasukkan gambar

<img border="0" src="/images/anime.jpg"  alt="Cute anime" width="304" height="228" align="center">

Keterangan : 
·         src digunakan untuk menampilkan gambar yang dipilih. 
·         alt digunakan untuk memberikan label pada gambar.
·         width digunakan untuk lebar dari gambar yang akan di tampilkan, anda juga bisa menggunakan 200px dimana gambar berupa ukuran pixel.
·         height digunakan untuk tinggi dari gambar yang akan ditampilkan 
·         align atau tata letak seperti center, left,right,justify
* tulisan yang dicetak merah dapat anda ganti sesuai dengan gambar yang anda kehendaki.

 Cara membuat link pada HTML

JIka kita menginginkan suatu icon atau teks apabila kita klik secara otomatis akan menuju alamat web yang dikehendaki maka pada teks HTML dapat anda buat teks seperti berikut:

<a herf="http://www.amikom ac.id>Kampusku</a>

Jadi fungsi <a herf="masukkan alamat URL">nama URL yang akan ditampilkan</a>
* pada teks yang dicetak merah dapat anda ganti sesuai alamat dan nama URL yang anda kehendaki.

Dan berikut contoh script HTML nya

 
Dan berikut tampilan pada browser Belajar HTML

Belajar HTML

Cara Memasukkan Gambar

Ini Color

Cara Membuat Link

Kampus Ungu


Semoga bermanfaat. ^-^

Lanjutkan
Langganan: Postingan (Atom)