98% Website di dunia ini sudah meng-upgrade versi mereka menjadi
HTML5 dan CSS3. ini dikarenakan
HTML5 dan CSS3 memiliki fitur-fitur yang lebih komplit, misal
bayangan teks, bayangan box, tembus pandang, multi-kolom, transisi pada properti, transformasi, dan masih banyak lagi.
Pada
tutorial ini, kita akan membuat seperti pada
video di bawah ini:
Karena ini
tutorial level menengah, saya
tidak akan menjelaskan terlalu detail. Langsung saja ke langkah nomer 1:
1. download file sumbernya, di
http://www.mediafire.com/download.php?vw8m5bsnhuk786c .
2.
Extract dan anda akan mendapatkan 3 file dan 1 folder. file
index.html dan style.css masih kosong, file-file itulah yang akan kita isi.
3. Berikut ini adalah
struktur dasar halaman yang akan kita buat:
silakan masukkan kode berikut ke dalam
file HTML kita tadi:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div id="tengah">
<section id="konten">
</section>
<section id="sidebar">
</section>
</div>
<footer>
</footer>
</body>
</html>
Penjelasan:
kode di atas sudah termasuk kode penyambungan ke style.css (masih kosong) dan reset.css. reset.css berfungsi untuk menghilangkan margin, padding, dan border yang sudah ditentukan standard dari browser.
4. sekarang kita buat headernya, masukkan codenya
di dalam tag <header>
ini code untuk
statusTwitter nya:
<section id="statusTwitter">
They said all Teenagers scare the living s*** out of me, they could care less as long as someone will bleed. So darken your clothes or strike a violent pose Maybe they'll leave you alone But not me. <span class="twitterWaktu">@megahnanda 20 menit yang lalu</span>
</section>
berikut adalah hasil codenya, masih putihan:
5. sekarang
masuk ke file CSS nya, tambahkan code berikut ini:
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
code di atas agar tag
HTML5 kita
berjalan di semua browser.
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
body {
background-color: #FFF;
}
a {
color:#093;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
code diatas adalah untuk styling
keseluruhan.
header {
background-image:url(images/headerbkg.png);
background-repeat:repeat-x;
height:185px;
}
untuk tag Header nya, kita masukkan file gambar sebagai background.
header section#statusTwitter{
width: 800px;
height: 57px;
margin: 0 auto;
padding-top: 19px;
padding-right: 100px;
font-family: Georgia;
font-size: 12px;
color: white;
text-shadow: 0px -1px 0px black;
font-style:italic;
}
-
margin:0 auto berfungsi agar obyek berada di tengah secara horizontal.
-width dan padding-right ditambahkan (800px + 100px), maka width yang akan ter-render menjadi
900px.
-kita beri bayangan dengan posisi X=0px, Y= -1px (1pixel ke atas) dan blur=0px (tidak blur,tajam) dan berwarna hitam, perlu diketahui bahwa bayangan tajam, 1px di atas objek akan memberi efek tulisan
timbul ke dalam. (bahasa jawanya:
JEG-GLONG ) ini termasuk dalam fitur CSS3.
header section#statusTwitter .twitterWaktu{
font-size: 11px;
color: rgb(182, 248, 176);
}
di
CSS3, kita bisa memasukkan
warna RGB, daripada HEX yang sulit dimengerti oleh manusia.
dan hasilnya:
6. sekarang tambahkan code untuk judul webnya:
<section id="judul">
<h1>Megahnanda</h1>
</section>
dan code CSSnya:
header section#judul{
width: 900px;
margin: 0 auto;
}
agar
width nya 900px dan berada di tengah (center).
header section#judul h1{
background-image: url(images/logo.png);
background-repeat: no-repeat;
width: 483px;
height: 88px;
margin: 0 auto;
margin-top: 21px;
text-indent: -9999px;
}
Text-indent digunakan untuk menggeser berapa piksel tulisan masuk ( bergeser ke kanan ), di sini kita masukkan
-9999px agar tulisan bergeser sangat jauh ke kiri, sehingga tulisan menjadi tidak kelihatan.
dan hasilnya:
Nah,
Tutorial HTML5 CSS3 masih sangat panjang, saya potong sampai di sini dulu. semoga bermanfaat, sampai jumpa di
tutorial berikutnya, terima kasih, wassalam.. ^_^
Artikel keren lainnya yang WAJIB dibaca:
