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.
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 .
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>
<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>
<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.. ^_^
credit to : http://megahnandaofficial.blogspot.com/
0 comments:
Post a Comment