Friday, March 1, 2019

Combining all material

Combining all material 

In this post you are invited to the specifics to understand the make pieces of a website, from the Header, Content, Menu, Right Menu, footers in a discussion which I have peeled one by one about the function of each command CSS. 

In the discussion this time you will combine the start of the header to footer for web pages into a single unit. Okay just give me my own HTML file join:

<html>
<head>
<title>Creating a Web Layout</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>

It is quite long because I have also included the contents of the content, Please copy into your favorite web management software, you can use Macromedia Dreamweaver 8 or Adobe Dreamweaver CS 3 and above, if you want the free version you can use notepad ++ or Coffe Cup , 

Name the index.html for the HTML file, and then try to open it ... Here if opened in the Browser:

Combining all material
It is still a mess because you do not make the CSS file merging. For this HTML I think there have to be discussed further, because my focus on the CSS file. 

The following CSS files that I join:

* {
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;
}

Name the style.css

Explanation:
  • I incorporated directly across the CSS commands, and if there was I the same command, such as for the body, you do not need to repeat the command.
  • On each of my own CSS command flag for each explanation from the header to the footer, for example, the code with the comment / * ------- ----------- menu * /
  • For each of these explanations CSS commands in the previous post

Make another page that
you need to create another page that is:
  • Products (produk.html)
  • Article (artikel.html)
  • Member (member.html)
  • Contact (kontak.html)
  • Testimonial (testimoni.html)
  • About Us (about-us.html)
To make the product page is very easy, because you already have index.html. 

Before you try to give a link to the menu Home-Products-MemberTestimonial-Contact-About Us prior to the index.html file 

In the HTML file I already give a link, as a trailer, please see this:
<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>
Similarly to the footer you give the same links with the Menu Navigation up .. 

Copy the index.html file and rename it with the name produk.html, as well as another copy and rename the appropriate name in the Name menu. 

Or as below: 
Product = (produk.html) 
article = (artikel.html) 
Members = (member.html) 
Contacts = (kontak.html) 
Testimonials = (testimoni.html) 
About Us = (about-us.html) 

then you can change the page content on the Home page with the content as needed. Now you try to click 2 times on index.html 

Here are screenshots of the final results:

Combining all material
Now you try to link them.

To download the file please HERE





If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . :)


Reviewer: FajarYusuf.Com
ItemReviewed: Combining all material

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS INFO GAME TERBARU DAN JUGA SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.