Archive for Mei 2015
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,
