Skip to main content

CSS : Menggabungkan seluruh materi

Menggabungkan seluruh materi 

Pada postingan kali ini 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="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 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>
<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 &copy; 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 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 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;
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;
width:675px;
float:left;
padding:15px 10px 15px 15px;
letter-spacing:1px;
word-spacing:10px;
text-align:justify;
}
h1 {
text-decoration:underline;
text-transform:uppercase;
font-family:Arial;
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;
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) norepeat;
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;
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 norepeat;
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{
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;
}

Beri nama style.css

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 post sebelumnya

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)
Untuk membuat halaman Produk adalah sangat mudah sekali, karena anda sudah mempunyai index.html.

Sebelumnya coba anda beri Link untuk menu Home-Produk-MemberTestimonial-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 :


Sekarang anda coba link nya.

Untuk mendownload filenya silakan DISINI





Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)
Labels:

Comments

Post a Comment

Popular posts from this blog

Menambahkan Peraturan Komentar Pada Blog

Menambahkan Peraturan Komentar Pada Blog : Ngblog Menulis sebuah artikel dan dikomentari dengan link aktif/promosi produk dan kata kata spam lainnya memang tidak mengenakan anda mungkin akan sangat merasa kecewa sekali, anda mungkin seperti menulis sebuah artikel namun tidak dihargai karyanya oleh orang lain. Mungkin membuat aturan berkomentar di blog adalah salah 1 cara menetralisirnya, mungkin jika ada aturan tersebut orang berpikir 2 kali untuk meninggalkan komentar Spam, lalu bagaimana cara membuat aturan komentar tersebut? langsung saja kita praktekan Ikuti langkah berikut : Login ke bloger,masuk ke blog yang anda inginkan, Klik Setelan -> POS-KOMENTAR   Scroll kebawah dan cari menu "pesan formulir komentar" klik tambahkan , dan isi kolom sesuai keinginan kalian atau peraturan yang kalian inginkan.  Setelah selesai silakan klik simpan setelan dipojok kanan atas. Lihat hasilnya di blog kalian ,akan seperti ini : Jika ada pertanyaan...
21 comments
Baca Lebih »

Contoh11 (Form)

Contoh11 (Form) : Webpro Komponen Form Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain : Pengolahan Data Dari Form   Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag </FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut action dan method. Action menjelaskan ke halaman yang digunakan untuk memproses input, sementara method digunakan untuk mengatur cara memparsing konten  Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST akan mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form html. Form menggunakan Metode Get Sebagai Contoh silakan kalian buka aplikasi notepad++ kalian ataupun sublime text . lalu ketikan atau masukan coding berikut: <html> <head>     <title>Contoh 11 FORM METODE GET</title> <...
6 comments
Baca Lebih »

TEKNOLOGI ADALAH

TEKNOLOGI ADALAH Pengertian Teknologi  Teknologi adalah berbagai macam keperluan serta sarana yang memiliki bentuk beraneka macam seperti peralatan atau sistem yang berfungsi untuk memberikan kenyamanan juga kemudahan bagi penggunanya. Teknologi berasal dari kata technologia yang berasal dari bahasa yunani. Techno artinya keahlian dan logia artinya pengetahuan.  Awal kemunculan kata teknologi bermakna terbatas pada benda- benda berwujud seperti peralatan-peralatan atau mesin. Dengan berjalannya waktu maka makna dari teknologi mengalami perubahan dan perluasan makna. Teknologi tidak terbatas pada benda berwujud, tetapi juga benda yang tidak berwujud. Misalnya perangkat lunak, sebuah mertode, metode pembelajaran, metode keuangan, dan lain sebagainya. Pengertian Teknologi Menurut Para Ahli Teknologi merupakan kegiatan pengembangan dan penerapan berbagai peralatan atau sistem untuk menyelesaikan masalah dan persoalan yang dihadapi manusia dalam kehidupan seha...
5 comments
Baca Lebih »