Pada artikel ini kita akan langsung mengimplementasikan Code/Tag di HTML5 serta Sintaks-Sintaks yang Berlaku Pada CSS3 yang sudah kita bahas sebelumnya menjadi sebuah web statis yang bisa dikembangkan menjadi web dinamis. Pada artikel sebelum nya kita juga sudah belajar CSS3 Background dan Transform & Efek Text Pada CSS3 Untuk mengimplementasikan HTML5, pada tutorial ini kita akan memakai Mozilla Firefox 8.0 yang telah support dengan HTML5. Kita juga sudah tau perbedaan antara HTML4 & HTML5, serta sejarah-sejarah dari HTML5 & CSS3. Baiklah kita langsung saja bagaimana cara Membuat Halaman Depan Dengan HTML5 & CSS3.
- Membuat File index.html
Maka secara otomatis, <!DOCTYPE> yang digunakan akan lansung menjadi HTML5, seperti gambar berikut
Lalu kita simpan file tersebut di suatu folder dengan nama index.html. Ikuti menu File-Save (Ctrl+S)
- Membuat File style.css
Kemudian akan muncul tab baru dengan isi file masih kosong.
Kemudian, simpan dengan nama style.css pada direktori yang sama dengan index.html.
Setelah kedua file tersebut kita simpan, kita akan menghubungkan keduanya. Buka file index.html, tambahkan sintaks berikut di dalam tag <head>.
<link rel="stylesheet" href="style.css" type="text/css">
Sehingga, penampakan kode pada index.html adalah sebagai berikut
- Menentukan Layout di File index.html
Sehingga, kita tambahkan sintaks berikut diantara tag <body></body>.
<div id="wrapper">
<div id="container">
<header>HEADER</header> <!--HTML5 -->
<nav>MENU</nav> <!--HTML5 -->
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
<footer> <!--HTML5 -->
<div id="column">KOLOM 1</div>
<div id="column">KOLOM 2</div>
<div id="column">KOLOM 3
</div> </footer>
</div>
</div>
|
Tag <div id=“wrapper”> kita gunakan untuk membungkus seluruh elemen layout diatas menjadi satu. <header> adalah pengganti <div id=“header”> pada HTML5. Begitu juga tag <nav> untuk menggantikan <div id=“menu”>. Sementara untuk content dan sidebar kita masih menggunakan tag <div>. Tag <footer> pun demikian, dirancang untuk mengganti <div id=“footer”>
- Memberi Style pada index.html
#wrapper{
width:960px;
margin:auto;
border:#F00 1px solid;
}
|
Buka file index.html melalui browser.
Pada gambar border yang kita beri pada #wrapper sudah terlihat. Ini tandanya file html dan css keduanya telah tergabung.
Selanjutnya kita tambahkan style untuk elemen-elemen yang lain pada file style.css.
header{
height:120px;
width:960px;
float:left;
background:#CCC;
}
nav{
height:40px;
width:960px;
float:left;
background:#333;
}
#wrapper #content{
width:620px;
float:left;
padding:10px;
}
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;
}
footer{
float:left;
background:#CCC;
width:960px;
}
footer #column{
width:300px;
padding:10px;
float:left;
}
|
Penjelasan dari properti yang digunakan tersebut sebagai berikut
Width & Height : Menentukan Lebar dan Tinggi dari suatu elemen.
Float : Menempelkan sebuah elemen ke kanan atau ke kiri objek sebelumnya. Apabila menggunakan float, objek yang kita buat setelah kita memakai elemen ini akan menempel persis diatas elemen yang di-float. Untuk itu kita gunakan properti clear:both;
Background : Untuk memberi background pada sebuah elemen, bisa berupa warna atau gambar.
Padding : Jarak antara tepi elemen dengan konten di dalamnya
- Merubah Desain Basic Layout
Memberikan Background Gambar pada Header
Kemudian, kita akan menambahkan sebuah gambar pada header dan menjadikannya sebagai background pada header. Kita ganti isi dari properti #header{} dan isi dari #wrapper{} menjadi seperti berikut
#wrapper{
width:960px;
margin:auto;
}
header{
height:120px;
width:960px;
float:left;
background:url(images/header.jpg);
background-size:960px 120px; /* CSS3 */
}
|
Hasilnya menjadi seperti berikut
- Membuat Menu
Selanjutnya yang kita akan membuat menu standar hanya dengan CSS. Kita akan menggunakan elemen html ul (unordered list) atau ol (ordered list). Keduanya sama saja, karena pada akhirnya bullet dan nomor yang ada tidak akan kita tampilkan.
Ubah isi <nav></nav> menjadi seperti berikut
<nav> <!-- HTML 5 -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Sains</a></li>
<li><a href="#">Bola</a></li>
</ul>
</li>
<li><a href="video.html">Video</a></li>
<li><a href="kontak.html">Kontak</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</nav>
|
Kemudian kita ganti dan tambah style nav{} dengan style seperti berikut
nav{
width:958px;
float:left;
overflow:auto;
background:#DFDFDF;
border:#AAAAAA 1px solid;
}
nav ul{
list-style:none;
float:left;
overflow:auto;
margin:0px;
padding:0px;
}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;
}
nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{
display:block;
margin:0px;
width:100px;
position:absolute;
margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{
display:block;
width:89px;
padding:5px;
float:left;
border:none;
}
nav ul li:hover{
background:#EDEDED;
}
nav ul li a{
color:#000000;
text-decoration:none;
}
nav ul li a:hover{
text-decoration:underline;
}
|
Sehingga kita akan menghasilkan halaman seperti berikut.
Itu adalah cara Membuat Halaman Depan Dengan HTML5 & CSS3 bagian pertama, kita akan melanjutkan Membuat Halaman Depan Dengan HTML5 & CSS3 dibagian kedua
Baca artikel lain nya tentang HTML5 dan CSS3 disini
.jpg)
Posts
No comments:
Post a Comment