Membuat Dropdown Menu

Posted by Unknown on Friday, December 7, 2012

Dropdown menu sering sekali muncul pada halaman sebuah web. Fungsinya sangat vital yaitu sebagai tombol navigasi yang sering dipakai dalam suatu halaman web. Misal menu page About Us jika diklik akan menuju ke page about us, dan sebagainya.
Untuk menjelaskannya mungkin agak rumit, lebih jelasnya saya akan memraktekkan cara membuat menu dropdown pada halaman web.

Krtik script dibawah ini kemudian simpan dengan ekstensi .html. Saya akan menyimpan dengan nama index.html :


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
    <li><a href="">About</a>
      <ul>
        <li><a href="">Facebook</a></li>
        <li><a href="">Twitter</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a>
      <ul>
        <li><a href="">Email</a></li>
        <li><a href="">Mobile</a></li>
      </ul>
    </li>
    <li><a href="">Post Feed</a>
      <ul>
        <li><a href="">Via Web</a></li>
        <li><a href="">Via Phone</a></li>
        <li><a href="">Via RSS</a></li>
      </ul>
    </li>

</ul>
</body>
</html>

Kemudian buat file baru dengan ektensi .css, saya akan memberi nama style.css. File css ini berguna untuk membuat tampilan lebih menarik.


ul {
margin: 0;
padding: 0;
list-style: none;
}

 ul li {
position: relative;
float: left;
        width: 100px;

 }
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: #CC0;
margin: 0 2px;
}

 ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }

Jalankan file index.html ke browser kesayangan anda. File index.html dan style.css usahakan satu folder. Untuk tampilannya adalah sebagai berikut :

Membuat Dropdown Menu
















Pahami contoh sederhana diatas, akan lebih paham jika anda mencobanya.
Semoga bermanfaat !!!

Baca Selengkapnya →
at 4:44 AM { 11 comments }
Labels: ,

   

Belajar HTML Membuat Text Area

Posted by Unknown on Saturday, December 1, 2012

Text area hampir mirip dengan text box. Perbedaannya adalah text area lebih dapat banyak menampung sebuah text lebih dari satu baris dari pada text box. Baca juga artikel tentang "Belajar HTML Membuat Text Box".

Mari saya akan contohkan membuat text area :


<html>
<head><title>Belajar HTML Membuat Text Area</title></head>
<body>
<h1>Masukkan Alamat Anda</h1>
<form method="post" action="">
<textarea name="alamat" rows="5" cols="40"></textarea>
<br/><br/>
<input type="submit" name="submit" value="Kirim"/>
</form>
</body>
</html>


 Simpan script diatas dengan ektensi .html. Jalankan pada browser yang anda sukai. Misal saya akan menyimpan dengan nama index.html kemudian akan saya jalankan pada browser Mozilla Firefox.
Untuk tampilannya sebagai berikut :
Belajar HTML Membuat Text Area

Penjelasan :
Tag yang digunakan dalam membuat text area adalah 
<textarea name="alamat" rows="5" cols="40"></textarea>
Anda bisa mengubah ukuran sesuai dengan keinginan anda (rows dan cols).


Semoga bermanfaat !!!

Baca Selengkapnya →
at 11:51 PM { 8 comments }
Labels:

   

Belajar HTML Membuat Text Box Password

Posted by Unknown on Friday, November 30, 2012

Dalam artikel saya sebelumnya pernah saya bahas tentang "Belajar HTML Membuat Text Box", kali ini saya akan contohkan membuat text box yang digunakan untuk input data rahasia seperti password. Text box ini sering digunakan untuk keperluan login, seperti ketika anda login ke akun Blogger anda atau Email anda pasti untuk data pasword tulisan menjadi bentuk simbol. Itu karena text bersifat rahasia jadi hanya berupa simbol saja yang terlihat.

Berikut saya akan contohkan membuat text box password.



Untuk membuat inputan password berikut tag-nya :
<input type="password" name="passwordgue"/>

Untuk tampilannya setelah dijalankan di Mozilla Firefox sebagai berikut :
Belajar HTML Membuat Text Box Password


















Mudah bukan membuat text box di HTML. Semoga artikel ini bermanfaat !!!
Baca Selengkapnya →
at 5:25 PM { 7 comments }
Labels:

   

Belajar HTML Membuat Text Box

Posted by Unknown

Belajar HTML Membuat Text Box


















Pernahkah anda melihat tampilan seperti gambar diatas? Namanya adalah text box, kadang ini dipakai dalam membuat form seperti untuk pendaftaran atau memasukkan suatu data. Daripada berbasa-basi langsung saya akan contohkan cara membuat text box sederhana.



Simpan script diatas dengan nama index.html atau terserah anda yang penting ekstensi harus .html. Jalankan pada browser pilihan anda, saya memakai Mozilla Firefox versi terbaru.
Untuk tampilannya sebagai berikut :

Belajar HTML Membuat Text Box



Komponen text box dibuat dengan menuliskan tag berikut :
<input type="text" name="namakomponen"/>
Dengan atribut name diisi dengan nama komponen yang sesuai dengan data isian. Nama komponen harus dituliskan karena akan digunakan pada script pengolah data nantinya.


Untuk membuat tombol kirim berikut tag-nya :
<input type="submit" name="submit" value="Kirim"/>
Tombol ini nantinya akan digunakan untuk mengirim data ke script pengolah data.


Untuk mengatur lebar field text box yaitu dengan menambahkan atribut size="nilai", nilai disini adalah bilangan integer atau angka.
Berikut contohnya :
<input type="text" name="nama" size="40"/>

Atribut lain yang harus dipahami adalah value="nilai". Atribut ini digunakan untuk menampilkan nilai ke dalam text box.
Berikut contohnya :
<input type="text" name="nama" size="40" value="Yogo Prestiyanto"/>
Jika anda menambahkan atribut value seperti contoh diatas, maka akan menjadi seperti ini :

Belajar HTML Membuat Text Box


















Semoga artikel ini bermanfaat !!!


Baca Selengkapnya →
at 1:42 AM { 13 comments }
Labels:

   

Belajar HTML Membuat Radio Button

Posted by Unknown on Thursday, November 29, 2012

Pernahkah anda melihat sebuah halaman web yang isinya menampilkan sebuah pilihan yang bisa kita pilih salah satunya. Namanya adalah "Radio Button". Fungsinya yaitu digunakan untuk input data yang sifatnya optional atau pilihan.
Berikut contoh dari radio button sederhana yang telah saya buat.

Untuk script HTML-nya dibawah ini :



Simpan script diatas dengan nama index.html atau terserah anda yang penting ektensi harus .html.
Kemudian jalankan pada browser yang anda sukai, kali ini saya memakai Mozilla Firefox.

Untuk tampilannya adalah sebagai berikut :

Belajar HTML Membuat Radio Button


















Penjelasan :
Dari setiap tag diatas, setiap komponen radio button memiliki nama komponen yang sama yaitu name="jk". Karena ketiga kelompok ini masuk kedalam satu kelompok yaitu jk yang sama, yang nantinya akan dipilih.

Semoga bermanfaat !!!
Baca Selengkapnya →
at 3:14 AM { 16 comments }
Labels:

   

Penyebab Demam Berdarah

Posted by Unknown on Wednesday, November 28, 2012

Penyebab Demam Berdarah
Musim hujan sudah tiba, itu artinya akan banyak genangan-genangan air dimana-mana. Hati-hati karena akan banyak nyamuk yang mencari tempat untuk bertelur, terutama nyamuk penyebab demam berdarah yaitu nyamuk aedes aegypti. Ada juga ternyata nyamuk yang lain yaitu nyamuk aedes albopictus. Demam berdarah adalah penyakit berbahaya dan bisa menyerang siapa saja. Penyakit ini disebabkan oleh virus dengue selanjutnya ditularkan melalui gigitan nyamuk aedes aegypti dan aedes albobictus.
Nyamuk ini bisa menggigit siapa saja, akan tetapi jika kita mampu menjaga kebersihan lungkungan dan mengurangi perkembangbiakan dari si nyamuk itu maka Insya Allah kita akan aman dari gigitan nyamuk yang mengakibatkan demam berdarah.
Mari kita selalu mengecek apakah tempat-tempat yang berpotensi untuk sarang nyamuk dapat kita cegah perkembangbiakannya. Contoh tempat-tempat yang bisa untuk sarang nyamuk antara lain bak penampungan air, bak mandi, kaleng bekas, bungkus plastik, dll. Perlu diketahui bahwa nyamuk aedes aegypti ini sangat suka dengan air yang jernih.

Gejala-gejala terkena demam berdarah :
  • Mendadak badan panas tinggi selama 2 sampai 7 hari
  • Terlihat lemah dan lesu
  • Timbul bintik-bintik merah pada kulit
  • Merasakan nyeri di ulu hati
  • Terjadi pendarahan di hidung atau mimisan
  • Terjadi muntah darah dan berak darah
Agar tidak terlalu parah kenali gejala-gejala demam berdarah diatas, supaya kita mampu mencegahnya dan mungkin akan menyelamatkan nyawa orang yang kita cintai. 
Apabila sudah parah penderita merasa gelisah, tangan dan kaki dingin serta berkeringat. Segeralah tolong mereka yang merasakan gejala-gejala ini ke rumah sakit terdekat.

Berikut pertolongan jika anda melihat langsung penderita gejala demam berdarah :
- Beri minum sebanyak-banyaknya
- Kompres agar panasnya turun
- Berikan obat penurun panas seperti paracetamol
- Segera antarkan ke Puskesmas, atau Rumah Sakit terdekat

Berantas jentik nyamuk dan hindari gigitan nyamuk Demam Berdarah dengan cara 3M Plus, yaitu :
  • Menguras tempat-tempat penampungan air (bak mandi/WC, tempayan, ember, vas bunga, dsb) seminggu sekali.
  • Menutup rapat semua tempat penampungan air seperti ember,gentong, dan drum.
  • Mengubur barang-barang bekas yang ada di sekitar atau di luar rumah yang dapat menampung air hujan. Seperti kaleng bekas, botol, plastik, dan tempurung kelapa.
  • Menaburkan bubuk abate atau altosid 2-3 bulan sekali di tempat air yang sulit dikuras atau tempat sulit air.
  • Memelihara ikan pemakan jentik nyamuk.
  • Cegah gigitan nyamuk dengan menggunakan obat nyamuk, memakai obat repelant, memasang kawat kasa pada jendela dan ventilasi, dsb.
Dikutip dari Brosur WASPADA DEMAM BERDARAH CEGAH DENGAN 3M PLUS! oleh : Pusat Komunikasi Publik Setjend Depkes RI

Semoga artikel diatas dapat bermanfaat bagi kita semua. Ingat "mencegah lebih baik daripada mengobati". Sehatlah selalu dengan memperhatikan kesehatan dan kebersihan lingkungan sekitar.
Baca Selengkapnya →
at 6:44 AM { 4 comments }
Labels:

   

Tipe Data dan Variabel Pada Javascript

Posted by Unknown on Monday, November 26, 2012

Artikel saya tentang "Javascript" sebelumnya sudah pernah saya contohkan tentang Menampilkan Javascript Pada HTML , Penulisan Javascript. Lanjut yukk, biar semakin paham dengan javascript, tak kenal maka tak sayang, kata pepatah. Hehehe.
Dalam artikel ini saya memakai judul Tipe Data Variabel Pada Javascript. Mari akan saya bahas biar lebih jelasnya.
Variabel digunakan untuk menyimpan data atau informasi. Sebuah nilai variabel dapat diubah. Ketentuan nama variabel dalam javacript adalah sebagai berikut :
  • Variabel harus terdiri dari rangkaian huruf, angka, dan underscore.
  • case sensitive, artinya membedakan huruf kecil dan besar.
  • Harus diawali dengan huruf.
  • Tidak harus deklarasi variabel dan tercipta sendiri ketika pertama kali digunakan.
  • Berbentuk varian (tidak terikat pada satu tipe data, tetapi dapat diisi oleh tipe data yang berbeda dengan awalnya ketika pertama kali digunakan).
Berikut contoh mendeklarasikan variabel pada javascript :
Variabel diawali dengan var.
Contoh :
var strname=nilai;

Variabel juga bisa dibuat tanpa harus menggunakan var.
Contoh :
strname=nilai;

Javascript mempunyai tiga tipe data :
  • strings
  • numbers
  • booleans : true false
Contoh :
var strname = "Yogo";
atau bisa ditulis, strname="Yogo";
Contoh diatas adalah memberikan nilai "Yogo" pada variabel strname.

Saya akan berikan contoh penggunaan variabel agar lebih jelasnya :



Seperti contoh yang lain di artikel saya. Ketik script diatas simpan dengan nama index.html. Kemudian jalankan pada browser kesayangan anda.

Untuk tampilannya akan seperti ini :

Tipe Data dan Variabel Pada Javascript















Variabel p=1000 dipanggil untuk ditampilkan di panjang adalah=
Variabel l=200 dipanggil untuk ditampilkan di lebar adalah=




Semoga bermanfaat !!
Baca Selengkapnya →
at 5:21 PM { 4 comments }
Labels:

   

Penulisan Javascript

Posted by Unknown on Sunday, November 25, 2012

Dalam artikel saya sebelumnya pernah saya bahas tentang Menampilkan Javacript Pada HTML. Kali ini saya akan menjelaskan penulisan javascript di HTML.
Ada 3 cara untuk menuliskan Javascript :

  1. Diletakkan diantara tag <head></head>
  2. Diletakkan didalam <body></body>
  3. Eksternal

1. Script diantara tag <head></head>

Script diantara tag <head></head> akan dieksekusi ketika dipanggil (berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Meletakkan script didalam <head> script otomatis akan di load terlebih dahulu sebelum digunakan/dipanggil.
Berikut contoh untuk meletakkan Javascript didalam <head> :



Simpan script diatas dengan ektensi .html. Jalankan pada browser kesayangan anda. Maka untuk tampilannya seperti ini :

Penulisan Javascript














2. Script didalam <body></body>

Javascript akan dieksekusi saat halaman di load sampai pada bagian <body>. Saat menuliskan script didalam <body> maka antara isi halaman dan script javascript dijadikan satu bagian.
Daripada bingung langsung saya kasih contoh javascript didalam <body>.



Simpan script diatas dengan ektensi .html. Jalankan pada browser dan untuk tampilannya akan seperti dibawah ini :

Penulisan Javascript

















3. Eksternal

Fungsi dari cara eksternal adalah jika ingin menjalankan javascript yang sama dalam beberapa kali pada halaman yang berbeda. Daripada harus menulis ulang script yang ingin dibuat di setiap halaman.
Menggunakan cara ini berarti script javascript dan html akan terpisah. Langsung saya suka memberi contoh daripada banyak teori.
Script dibawah ini adalah javascript yang akan digunakan.



Simpan script diatas dengan nama contoh.js
Kemudian membuat halaman html seperti dibawah ini.



Simpan script diatas dengan nama index.html, buat satu folder bersama file contoh.js. Kemudian jalankan index.html pada browser, untuk tampilannya sebagai berikut :

Penulisan Javascript















Sudahkah anda paham dengan penjelasan dan contoh penulisan pada javascript diatas? Jika belum paham silahkan jangan ragu dan malu untuk bertanya dan berkomentar.
Semoga bermanfaat!!!
Baca Selengkapnya →
at 4:58 PM { 8 comments }
Labels: