Belajar HTML5 lengkap dari ebook, GRATIS!!!

Belajar HTML5 lengkap dari ebook, GRATIS!!!

Belajar HTML5 lengkap dari ebook gratis, Nah kali ini admin akan  menuliskan artikel tentang HTML5. dan pada Kesempatan kali ini juga admin akan memberi anda sedikit ilmu tentang HTML5.

Sebelum kita merambah ke pembelajaran kita harus mengetahui apa itu HTML5 karena sesungguhnya belajar itu akan berhasil jika mulai dari 0 alias awal. HTML5 merupakan Markup Language yang paling anyar alias baru HTML5 ini sering digunakan pada website-website sekarang karena lebih simple dari generasi HTML sebelumnya.

Dalam artikel ini admin akan membagikan sedikit tips-trik HTML5 , dan langsung buat yang ingn belajar HTML5 lengkap dari ebook. Baca tips dan triknya dibawah ini.

HTML5 How To make Dropdown Menu with CSS3

Dengan HTML5 dan CSS3 sekarang sudah banyak digunakan oleh web modern karena dengan HTML5 dan CSS3 pengembang web atau Webmaster dapat dengan mudah dan cepat membuat menu yang responsif dan menarik.

Pertama buat kode dibawah ini:

<head>
<title>HTML5 / CSS3 Navigation Menu</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS”>
<meta name=”author” content=”WebCodeGeeks.com”>
<link rel=”stylesheet” href=”MenuStyle.css”>
</head>

Kedua buatlah kode seperti ini dibawah kode </head>

<body>
<div id=”wrapper”>

Ketiga

body {
line-height: 1;
font:12px/20px Arial;
background:#e0f3ff ;
}

Keempat

#wrapper{
width:620px;
margin:0 auto;
margin-top:100px;
}
#nav {
position:relative;
width:620px;
margin:0 auto;
}

kelima

ul#navigation {
margin:0px auto;
position:relative;
float:left;
border-left:1px solid #c4dbe7;
border-right:1px solid #c4dbe7;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
border-top:1px solid #c4dbe7;
border-bottom:2px solid #c4dbe7;
}

keenam

ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
width:180px;
background:#f8f8f8;
box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
opacity:0;
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; ///* Chrome &amp; ←-
Safari*/
-moz-transition:opacity 0.2s linear, visibility 0.2s linear; // /*Mozilla Firefox*/
-o-transition:opacity 0.2s linear, visibility 0.2s linear; // /* Opera */
transition:opacity 0.2s linear, visibility 0.2s linear;

Dan yang terakhir adalah

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;
}
ul#navigation li:hover > a {
background:#fff;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
width:180px;
background:#f8f8f8;
box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
opacity:0;
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}

Baca juga cara membuat running text pada blog dan tips SEO on page terbaru 2015

Leave a Reply

Your email address will not be published. Required fields are marked *