Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Tutorial dan Praktek
UNTUK MENGUASAI
CSS (Part 3)
Oleh : Rudy Devianto
Ebook ini bisa didapatkan Gratis di : 1
www.rudydevianto.com
Anda boleh membagikan ebook ini kepada teman,saudara atau untuk user anda,
dengan syarat :
Anda tidak boleh mengubah,mengganti atau mengedit seluruh
atau sebagian dari ebook ini.
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Langkah Memahami
Fungsi CSS
DENGAN
Praktek dan Tutorial
Ebook ini dikeluarkan oleh : www.rudydevinto.com 2
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Kata Pengantar
Ebook saya yang ke 2 sudah terbit, menanggapi banyak pembaca yang mengirim
email kepada saya tentang cara penggabungan dari materi Bab 1 sampai Bab 5.
Saya berharap anda semua sudah bisa mengerti tentang cara menggabungkan dari
cuplikan Bab per bab menjadi satu website utuh dengan praktek dan mencoba
sendiri.
Tetapi kebanyakan dari pembaca ingin tahu lebi instan dan cepat, untuk itu saya
buatkan ebook sambungan dari ebook Part 2.
Di tengah kesibukan saya, baru saat ini saya bisa memposting buku ini, dan saya
berharap buku ini bisa banyak membantu para pembaca buku ini.
Ebook ini bisa anda dapatkan secara Cuma-Cuma atau Gratis pada Blog milik saya
yaitu pada www.rudydevianto.com.
Selain itu jika anda merasa ebook ini berguna, anda bisa bagikan ebook ini secara
gratis kepada rekan ataupun teman, kerabat anda.
Best Regards
Rudy Devianto
Ebook ini dikeluarkan oleh : www.rudydevinto.com 3
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Daftar Isi 3
5
Kata Pengantar 6
Pendahuluan 14
Bab VI Menggabungkan seluruh materi Bab 1 s/d Bab 5 31
Membuat Halaman Lain
Penutup
Ebook ini dikeluarkan oleh : www.rudydevinto.com 4
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
PENDAHULUAN
Selamat berjumpa kembali di ebook tentang belajar CSS di edisi ke 3 , kali ini
saya akan membahas tentang penggabungan materi dari Ebook Part 2 yang
mana dalamn part 2 dibahas secara satu persatu dan saya berharap anda
mencoba praktek untuk menjadikan satu kesatuan menjadi website .
Saya berharap anda banyak praktek, biar tahu masing-masing fungsi dari
perintah CSS ini.
Kita langsung saja ya…
Ebook ini dikeluarkan oleh : www.rudydevinto.com 5
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Bab VI
Menggabungkan seluruh materi Bab 1 s/d Bab 5
Pada ebook part 2 anda diajak untuk secara spesifik untuk memahami
membuat potongan dari suatu website, mulai dari Header, Content,
Menu,Right Menu,footer yang mana dalam satu pembahasan sudah saya
kupas satu persatu tentang fungsi dari masing-masing perintah CSS.
Pada pembahasan kali ini anda akan menggabungkan mulai dari Header
sampai footer untuk menjadi satu kesatuan halaman website.
Oke langsung saja saya berikan file HTML yang sudah saya gabung :
<html>
<head>
<title>Membuat Layout Web</title>
<link href="css/style.css" rel="stylesheet"
type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
</div>
<div id="content">
<h1>Protect Natural Resources,
Utilize Solar Electric Power</h1>
<p id="indent" class="indent">Solar
energy, wind energy, geothermal energy, hydropower and
biomass are some of the renewable sources of energy.
Using of renewable sources of energy is good because
these sources offer an environmentally friendly option
than utilizing fossil fuels. </p>
<p>There will be an improve energy
security and energy independence if people use renewable
Ebook ini dikeluarkan oleh : www.rudydevinto.com 6
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial 7
source of energy. Also renewable sources of energy are
the cleanest and safest energy sources.
<span class="rtk">The well-known
source of energy which is the solar energy is an
environment-friendly and endless renewable source of
energy. </span>.</p>
<p>Solar power doesn't result in
the emission of harmful carbon dioxide unlike the use of
fossil fuels. The sun will be the unlimited source of
energy and with right technologies can provide sufficient
electricity that could be used in every single household
or even in commercial and industrial properties. </p>
<p>The use of solar power has a
positive effect in the environment because taking
advantage of solar energy does not contribute to climate
change, acid rains or any kind of pollution. When
transformed from solar radiations, solar energy may
possibly be converted to thermal energy or electric
power. This may also be employed in a number of
applications like in agriculture and analysis. </p>
<blockquote>At present, solar power
is being utilized in two areas namely for the production
of thermal energy which can heat up water and producing
of electric power by utilizing the photovoltaic cell.
Photovoltaic cells or PV cells captures
solar energy then transforming it into electricity.
</blockquote>
<p>These cells convert sunlight
into electricity by employing the energy developed when
photons from sunlight push electrons into greater state
of energy. Yet solar power is not only limited to thermal
energy and electricity simply because currently, numerous
devices which are powered by solar energy exist in the
market.
Solar energy is an excellent source of
supplying power to homes and companies and by utilizing
solar power you're not merely protecting the environment
from becoming polluted but also you are saving the rest
of the earth’s natural resources. </p>
<p>Capturing solar energy does not
contribute any pollution and does not harm the
atmosphere. </p>
</div>
<div id="right">
<h2 class="member">Member
Login</h2>
<form name="memberLogin" action="#"
method="post">
<input type="text" name="name"
class="txtBox" value="-nama-anda-" />
<input type="password" name="name2"
class="txtBox" value="-password-" />
<a href="#">Register here</a>
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial 8
<input type="submit" name="login"
value="" class="login" />
<br class="spacer" />
</form>
<p class="bawah"></p>
<h2
class="categories">Categories</h2>
<ul>
<li><a
href="#">Software</a></li>
<li><a
href="#">Hardware.</a></li>
<li><a href="#">Belajar
CSS </a></li>
<li><a href="#">Belajar
PHP </a></li>
<li><a href="#">Belajar
Wordpress </a></li>
<li><a href="#">Plugin
Wordpress </a></li>
<li><a href="#">WP
Themes </a></li>
<li><a
href="#">Download</a></li>
<li><a
href="#">Testimonial</a></li>
<li class="noImg"><a
href="#">Berita</a><br class="spacer" />
</li>
</ul>
</div>
<div id="footer">
<p id="bottom">
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
</p>
<p id="copy">
Copyright © 2011 <a
href="http://rudydevianto.com">Rudy Devianto.com</a>
</p>
</div>
</div>
</body>
</html>
Memang cukup panjang karena saya juga menyertakan isi dari konten,
Silahkan anda copy ke dalam software pengelola web kesayangan anda, anda
bisa menggunakan Macromedia Dreamweaver 8 atau Adobe Dreamweaver
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
CS 3 keatas, jika anda ingin yang free version anda bisa menggunakan
notepad ++ atau Coffe Cup.
Beri nama index.html untuk file HTML, kemudian coba buka file tersebut…
Berikut jika dibuka di Browser :
Memang masih berantakan karena anda belum membuat penggabungan file 9
CSS .
Untuk HTML ini saya rasa tidak usah dibahas lebih lanjut, karena focus saya
pada file CSS.
Berikut ini file CSS yang sudah saya gabung :
*{
margin: 0;
padding: 0;
}
body {
font-family:Verdana;
font-size:12px;
}
body #container{
width:1000px;
margin:0 auto;
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
background-color:#EBEBEB;
}
#header{
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
height:160px;
}
/*-------menu-----------*/
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#menu a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
#menu a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
#menu a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}
/*-------menu-----------*/
/*-------content-----------*/
#content{ background-color:#FFFFFF;
h1 { width:675px;
float:left;
padding:15px 10px 15px 15px;
letter-spacing:1px;
word-spacing:10px;
text-align:justify;
}
text-decoration:underline;
text-transform:uppercase;
font-family:Arial;
Ebook ini dikeluarkan oleh : www.rudydevinto.com 10
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial 11
font-size:30px;
padding-bottom:20px;
}
.indent:first-letter {
font-size:70px;
color:#0000CC;
font-weight:bold;
float:left;
}
.rtk {
text-decoration:blink;
font-weight:bold;
color:#FF0000;
background-color:#CCCC00;
}
#content blockquote{
font-style:italic;
font-weight:bold;
width:600px;
margin:auto;
margin-top:15px;
margin-bottom:15px;
padding:5px;
border-color:#999999;
border-style:ridge;
border-width:1px;
background-color:#CCCCCC;
}
/*-------content-----------*/
/*-------colom Right-----------*/
#right{
width:299px;
background-color:#FFFFFF;
float:left;
}
.member{
width:264px;
height:67px;
background:url(../images/member_login.gif) 0
10px no-repeat;
margin: 0 auto;
font-size:20px;
color:#FFCC00;
text-indent:50px;
line-height:50px;
}
form{
background:url(../images/memberlogin_bg.gif)
repeat-y;
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial 12
width:228px;
padding:0 18px 0 18px;
margin:0 auto;
}
form input.txtBox{
width:206px;
height:25px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
border-right:#D4D0C8 solid 1px;
border-bottom:#D4D0C8 solid 1px;
color:#000000;
background-color:#FFFFCC;
margin:5 0 17px 0;
padding:0 0 0 20px;
}
form a{
font-size:12px;
font-weight:bold;
color:#FF6600;
text-decoration:underline;
padding:0 0 0 14px;
float:left;
background:url(../images/register_here_bg.gif)
0 5px no-repeat;
}
form a:hover{
text-decoration:none;
}
form input.login{
background:url(../images/btn_login.gif) no-
repeat;
width:53px;
height:13px;
border:none;
cursor:pointer;
float:right;
}
.bawah{
background:url(../images/memberlogin_bot.gif)
no-repeat;
width:264px;
height:25px;
margin:0 0 5px 0;
margin:auto;
}
.categories{
font:bold;
line-height:40px;
font-size:24px;
color:#FFFFCC;
background-color:#FF9900;
width:265px;
padding:0 0 0 17px;
margin-top:30px;
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial 13
margin-left:17px;
}
ul{
width:238px;
padding:0 0 0 17px;
}
ul li{
display:block;
background:url(../images/dot.gif) bottom
repeat-x;
height:25px;
width:238px;
}
ul li a{
background:url(../images/arrow.gif) 0 7px no-
repeat;
font-size:14px;
color:#000000;
text-decoration:none;
margin:0;
padding:3 0 3 14px;
display:block;
}
#right ul li a:hover{
color:#FFFFFF;
background-color:#FF9900;
}
/*-------colom Right-----------*/
/*-------footer----------*/
#footer{
background-image:url(../images/footer.gif);
width:1000px;
height:128px;
float:left;
}
#bottom{
text-align:center;
font-family:Geneva;
font-size:12px;
margin:25px 0 0 0;
font-weight:bold;
letter-spacing:1px;
word-spacing:8px;
}
#bottom a{
color:#FFFFFF;
}
#bottom a:link{
text-decoration:none;
}
#bottom a:hover{
Ebook ini dikeluarkan oleh : www.rudydevinto.com
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
text-decoration:underline;
color:#FFFF00;
}
#copy{
margin:25px 0 0 0;
font-family:verdana;
color:#FFFFCC;
font-size:10px;
text-align:center;
}
#copy a {
color:#FFFFCC;
}
#footer #copy a:link{
text-decoration:none;
}
#footer #copy a:hover{
text-decoration:underline;
}
Penjelasan :
Saya menggabungkan langsung seluruh perintah CSS, lalu jika ada
perintah saya sama, semisal untuk body, anda tidak perlu untuk
mengulang perintah tersebut.
Pada masing-masing perintah CSS sudah saya beri tanda untuk
masing-masing penjelesan mulai dari Header sampai footer,
contohnya kode tersebut dengan memberikan komentar
/*-------menu-----------*/
Untuk masing-masing perintah CSS penjelasan ada dalam ebook part
2.
Membuat halaman yang lain
Anda perlu membuat halaman yang lain yaitu :
Produk (produk.html)
Artikel (artikel.html)
Member (member.html)
Kontak (kontak.html)
Testimonial (testimoni.html)
About Us (about-us.html)
Ebook ini dikeluarkan oleh : www.rudydevinto.com 14
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Untuk membuat halaman Produk adalah sangat mudah sekali, karena anda
sudah mempunyai index.html.
Sebelumnya coba anda beri Link untuk menu Home-Produk-Member-
Testimonial-Kontak-About Us terlebih dahulu pada file index.html
Pada file HTML saya sudah beri link, sebagai cuplikan silahkan lihat ini :
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
Begitu pula untuk footer anda beri link yang sama dengan Menu Navigasi
atas..
Copy file index.html dan rename dengan nama produk.html, begitu juga copy
lagi dan rename dengan nama sesuai dengan Nama Menu.
Atau seperti dibawah ini :
Produk (produk.html)
Artikel (artikel.html)
Member (member.html)
Kontak (kontak.html)
Testimonial (testimoni.html)
About Us (about-us.html)
Kemudian anda bisa rubah halaman Konten pada halaman Home dengan
Konten sesuai dengan kebutuhan .
Sekarang anda coba dengan klik 2 kali pada index.html
Berikut screenshots hasil akhir :
Ebook ini dikeluarkan oleh : www.rudydevinto.com 15
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Sekarang anda coba link nya.
Sebenarnya ebook ini hanya memuat penjelasan penggabungan file saja,dan
ini hanya untuk memenuhi permitaan para pembaca ebook saya yang part 2
saja.
Ebook ini dikeluarkan oleh : www.rudydevinto.com 16
Cara Cepat dan Mudah untuk Mahir CSS Edisi Tutorial
Penutup
Saya berharap setelah anda selesai untuk mempelajari CSS ini, anda terus
untuk melatih dan selalu praktek, karena dengan latihan anda akan menjadi
semakin mahir dan menemukan cara-cara baru dalam membuat suatu web.
Saya berharap buku ini berguna untuk anda, dan sekali lagi jika anda merasa
berguna silahkan anda berikan kepada teman-teman anda.
Untuk selanjutnya silahkan anda tunggu buku saya edisi selanjutnya, untuk
itu jangan sampai ketinggalan untuk mendapatkannya.
Best Regards
Rudy Devianto
Ebook ini dikeluarkan oleh : www.rudydevinto.com 17
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Belajar CSS Rule Part 3
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Belajar CSS Rule Part 3
- 1 - 17
Pages: