Belajar membuat Drop Down dengam HTML dan CSS
Adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Dibawah adalah contoh gambar hasil dari html dan css :
<html>
<head>
<title>Dicoba</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div id="wrapper">
<h3>Drop Down Menu CSS</h3>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Dan membuat file menu.css dengan mengisikan dibawah ini :
menu.css
#wrapper {
width:600px;
margin:auto;
}
#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
position: relative;
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #000;
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: 11px;
}
#menu li:hover a { background: #3b3b3b; }
#menu li:hover li a:hover
background: #666;
]
Tag :
Belajar,
Fitur-fitur Terbaru pada HTML versi 5
Halo gaes jumpa lagi dengan saya yang akan update kali ini tentang HTML 5. Saya akan menjelaskan tentang fitur-fitur script baru pada HTML. Ada banyak pembaharuan pada HTML namun saya tidak membahas semua yang baru tersebut karena akan banyak sekali pastinya. Saya akan membahas fitur terbaru yang menurut saya bagus, penting dan simple. Saya akan memberi contohnya :
- Video dan Audio : Tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
- Canvas : Media corat-coret langsung tanpa flash dan applet java.
- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
- Semantic : Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dansection.
- Dukungan yang lebih baik untuk penyimpanan secara offline.
Nah itu lah fitur barunya, namun saya tidak bisa jelaskan dan contohkan karena pasti akan panjang dan lama. Jadi kalau ingin lebih tau kalian bisa mencarinya digoogle.
Dan juga tidak semua browser bisa memenuhi semua fitur-fitur baru tersebut. Dan contoh-contoh browser yang bisa sebagian memenuhi fitur baru HTML tersebut yaitu :
- Chrome terbaru
- Safari Apple v.4+
- Opera
- Maxthon
- Firefox 4,5,6 dan seterusnya
- Internet Explorer 9
Nah kalian bisa menguji browser kalian masing-masing dan sampai berapa point kah kelebihan browser kalian. Kalian tinggal menuliskan di addres www.html5test.comcom
Nah ini contoh screenshot dari browser chrome digadget saya. Maklum belum punya laptop.
Dan sekian ilmu yang bisa saya bagi kali ini, saya akan update materi lagi setiap hari jum'at tentang HTML dan postingan yang tidak mengandung unsur HTML bisa kapan saja. Oke see yaa..
Penulis : Nuzli Setiyawan Amin
Dosen pengajar : Barka Satya, M.Kom
Tag :
Belajar,
Cara Membuat Form Input Data pada Web (HTML 5)
Lama tak jumpa dengan posting blog saya, karna amat banyak tugas dari dosen saya lupa dengan rutinitas memposting materi tiap minggunya tentang HTML. Nah kali jni saya akan membahas bagaimana membuat Form dengan HTML dengan mudah. Saya akan mencotohkan dari yang simple - simple saja seperti contohnya pada gambar dibawah ini
Nah, saya akan jelaskan satu persatunya dibawah :
- <input type="text"> berfungsi sebagai menginputkan data berupa text.
- <input type="password"> berfungsu sebagai inputan password yang tidak bisa diperlohatkan
- <input type="radio"> untuk memilih salah satu pilihan seperti jenis kelamin
- <input type="checkbox">untuk memilih data lebih dari satu
- <input type="button"> yang biasanya digunakan untuk JavaScript, VBScript dan script yang lain untuk memunculkan aksi.
- <input type="submit"> untuk memunculkan tombol untuk meengirimkan semua data yang telah di inputkan.
<table width="270" border="1">
<tr>
<td width="134"><label for="nama">NAMA LENGKAP:</label></td>
<td width="120"><input type="text" name="nama" id="nama" maxlength="40" size="20" /></td>
</tr>
<tr>
<td><label for="pass">PASSWORD:</label></td>
<td><input type="password" name="pass" id="pass" maxlength="8" size="8" /></td>
</tr>
<tr>
<td><label for="jk">JENIS KELAMIN:</label></td>
<td><input type="radio" name="jk" id="jk" value="L" />LAKI-LAKI<br /><input type="radio" name="jk" id="jk" value="P" />PEREMPUAN</td>
</tr>
<tr>
<td><label for="almt">ALAMAT</label></td>
<td><textarea rows="3" cols="30" name="almt" id="almt"></textarea></td>
</tr>
<tr>
<td><label for="byr">SUDAH BAYAR</label></td>
<td><input type="checkbox" name="byr" id="byr" />SUDAH</td>
</tr>
</table>
<input type="submit" value="kirim" />
<input type="reset" value="reset" />
</body>
Nah sekian ilmu yang bisa saya bagi untuk kali ini, tunggu updatean yang lain tiap minggunya tentang dasar-dasar HTML. Let's have fun yak Visitor, see ya...
Dosen pengajar : Barka Satya, M.Kom
Tag :
Belajar,
Mobil Terbang Teknologi Masa Depan
Teknologi mobil yang dapat terbang mulai dikembangkan oleh sebuah perusahaan rintisan asal Slovakia. Mereka mengatakan kendaraan ini dapat berjalan di jalan raya, setelah mencapai ruang terbuka seluas dua kali lapangan bola, kendaraan itu bisa membentangkan sayap dan lepas landas.
Mobil terbang ini dikembangkan oleh perusahaan bernama AeroMobil yang didirikan oleh Juraj Vaculik dan Stefan Klein.
Purwarupa mobil tersebut dipamerkan dalam acara Pioneers Festival, di Wina, Austria, pekan lalu. Kendaraan ini dibekali dengan dua kursi dan memanfaatkan bahan bakar minyak.
Mobil terbang ini disebut tidak membutuhkan sebuah bandara untuk lepas landas. Vaculik mengatakan, landasan yang dibutuhkan adalah seluas dua kali lapangan sepak bola dengan kecepatan laju kendaraan 130 kilo meter per jam. Jarak terbang yang dicapai diklaim mencapai 700 kilo meter.
"Beberapa orang mungkin berpikir bahwa ini adalah mainan anak laki-laki," kata Vaculik seperti dikutip dari Bloomberg. "Tapi kami benar-benar percaya bahwa ini akan mengubah transportasi pribadi."
AeroMobil membuat desain mobil terbang yang terkesan modern. Vaculik menegaskan pentingnya sebuah desain guna menarik daya beli konsumen untuk sebuah mobil super mewah sekaligus pesawat kecil.
Dalam ruang eksibisi, Vaculik memperlihatkan bagaimana sayap mobil ini keluar secara otomatis. Aksi ini disambut tepuk tangan meriah dari pengunjung. AeroMobil pasang target mobil terbang buatannya siap dijual pada 2016.
Ia menyayangkan pemerintah Slovakia yang belu memberi izin uji coba terbang pada kendaraan ini, yang seharusnya dilaksanakan pekan lalu. Vaculik tak kehabisan akan, ia berencana melakukan uji terbang di negara yang memiliki aturan lebih ketat soal lalu lintas, seperti Australia, Brasil atau negara Timur Tengah.
Ide menggabungkan fungsi mobil dan pesawat sebenarnya sudah dilakukan sejak 1917, ketika Curtiss Autoplane memulai debutnya di New York, AS.
Vaculik sebelumnya bekerja di perusahaan periklanan. Ia bertemu dengan Klein, seorang insinyur teknis, yang mengembangkan mobil dengan sayap sejak 25 tahun lalu di garasi rumanhnya. Klein bekerja sebagai kepala departemen Akademi Seni Rupa dan Desain
Ide menggabungkan fungsi mobil dan pesawat sebenarnya sudah dilakukan sejak 1917, ketika Curtiss Autoplane memulai debutnya di New York, AS.
Vaculik sebelumnya bekerja di perusahaan periklanan. Ia bertemu dengan Klein, seorang insinyur teknis, yang mengembangkan mobil dengan sayap sejak 25 tahun lalu di garasi rumanhnya. Klein bekerja sebagai kepala departemen Akademi Seni Rupa dan Desain
Slovakia dan perusahaan mobil golf di Polandia.
Source : CNNIndonesia.com
Tag :
News,
Memberikan Link Download dan Layout pada Web (Belajar Dasar HTML 4)
Yak dipertemuan ke-4 saya akan menjelaskan bagaimana caranya memasukan Link Download dan Membuat Tabel pada Web. Pertama kita akan belajar tentang Link Download, sama seperti pertemuan ke-3 kemarin, menggunakan <a href="balablalbal"> </a>. Nah sebagai contohya seperti dibawah :
<a href="browse file yang akan di jadikan link download">Download Disini</a>
Nah kalian bisa memasukan file seperti video, lagu, atau pun berkas data seperti Word dll.
Sekarang kita akan mempelajari tentang membuat Tabel/Layout pada Web. Sebagai contohnya dibawah :
<tr>...</tr> = Tag Baris
<td>...</td> = Tag Kolom
width = Menentukan Lebar
height = Menentukan Tinggi
border = Memberi ketebalan garis
colspan = Menggabungkan Kolom
rowspan = Menggabungkan Baris
Contoh Scrip dan Gambar Tabelnya :
<table width="200" height="150" border="1">
<body>
<tr>
<td colspan="2" align="center"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2" align="center"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Contoh Gambar :
Nah sekian penjelasan yang saja bisa beri kepada kalian yang ingin Belajar HTML, semoga bermanfaat buat kalian teman. Semoga sukses Visitor, see ya..
Penulis : Nuzli Setiyawan Amin
Dosen Pengarah : Barka Satya, M.Kom
Tag :
Belajar,
Memberi Foto & URL pada Web (Belajar Dasar HTML 3)
Saya akan memberi contoh dasar-dasarnya saja, check this out :
Memasukan Image pada Web
<img src="lalu klik browse cari dimana foto kalian inginkan">
Nah ini contoh memberi foto pada web kalian, bisa kalian modifikasi seperti fotonya berjalan/bergerak. Contohnya :
<marquee><img src="lalu klik browse cari dimana foto kalian inginkan"></marquee>
Dan kalian bisa membuat gambar berjalan lalu berhenti begitu saja, contohnya :
<marquee behavior="slide"><img src="lalu klik browse cari dimana foto kalian inginkan"></marquee>
Dan bisa kalian modifikasi sendiri sesuka kalian, kalian bisa searching contoh-contohnya yang banyak di google.
Nah sekarang bagaimana Memasukan URL pada Web
<a href="link yang dituju"></a>
Nah kalian bisa memodifikasi seperti diposisikan di tengah-tengah Web. Contohnya :
<center><a href="http://w3schools.com">Belajar HTML</a></center>
Dan lebih banyak lagi seperti memberi warna pada tulisan dan sebagainya. Kalian bisa searching di google yang lebih banyak kalian bisa belajar mendalam. Dan sekian saya berbagi ilmu kepada kalian Visitors. See ya..
Penulis : Nuzli Setiyawan Amin
Dosen Pengajar : Barka Satya, M.Kom
Tag :
Belajar,
Review Spesifikasi ASUS Zenfone 2
Untuk bersaing ditahun 2015, Asus memang menyiapkan beberapa smartphone terbaru dan salah satunya adalah Asus Zenfone 2 yang mereka rilis bertepatan pada ajang CES 2015. Spesifikasi yang dibawa penerus Asus Zenfone tersebut sangat luar biasa, karena menjadi smartphone pertama yang menggunakan Ram 4GB sebagai dapur pacunya.
Hadirnya Ram berukuran 4GB pada Asus Zenfone 2 diklaim memiliki kecepatan 2 kali lipat dibandingkan ponsel pada umumnya yang menggunakan Ram berukuran 2 GB karena ram tersebut berjalan pada kanal ganda 128 bit. Zenfone 2 sudah jelas mampu mengungguli smartphone flagship ditahun 2015 yang rata-rata menggunakan Ram berukuran 3GB.
Tidak hanya menggunakan teknologi pemorsesan terbaru, ponsel ini juga menawarkan layar beresolusi Full HD dengan sentuhan Asus ZenUI di dalamnya. Walaupun dilengkapi spesifikasi yang sangat canggih dan teknologi terkini, harga Asus Zenfone 2 tetap dibanderol murah dengan menyasar kalangan menengah kebawah yang memiliki harga jual tak sampai 3 Juta Rupiah.
Ponsel ini diprediksi akan sangat sukes dipasaran, mengikuti kesuksesan seri Asus Zenfone sebelumnya. Bagi anda yang ingin tahu bagaimana spesifikais lengkap yang dimiliki ponsel ini, dan berapa kira-kira Harga Asus Zenfone 2 di Indonesia, mari bersama-sama kita simak review redaksi hariangadget.com berikut ini.
Spesifikasi Asus Zenfone 2
| Jaringan | Dual SIM |
| Dimensi | 152.5 x 77.2 x 10.9 mm |
| Berat | 170 g |
| Layar | IPS display 1080p x 1920 pixels, 5.5 inches (~401 ppi pixel density) Corning Gorilla Glass 3, oleophobic coating |
| Memory | 16/32/64 GB, microSD, up to 64 GB |
| Ram | 2 GB /4 GB |
| OS | Android OS, v5.0 (Lollipop) |
| Processor | Intel Atom Z3580 Quad-core 2.3 GHz / Intel Atom Z3560 Quad-core 1.8 GHz |
| GPU | PowerVR G6430 |
| Konektivitas | LTE, HSPA+, Bluetooth V4.0, Wifi, NFC, A-GPS, GLONASS |
| Kamera Belakang | 13 MP, 4128 x 3096 pixels, autofocus, dual-LED (dual tone) flash, Video 1080p |
| Kamera Depan | 5 MP |
| Kapasitas Baterai | Non-removable Li-Po 3000 mAh |
Source : http://hariangadget.com/harga-asus-zenfone-2/
Tag :
Review,
