Editing Content

August 18, 2020August 18, 2020 Fajar (Ucup) 0 Comments pemrograman

Now in this post, you will know more about the role of CSS in the arrangement and design of a website.

This time will I encourage you to set the text content contained in the design of a website that we created

In the first chapter you've made the unedited contents of the CSS, it looks erratic and in this chapter you will create text content into a part that is interesting to read by the user.

Creating HTML files from Content

Try to type the following HTML file like this that I took of some of the layout of the website that has been made in Chapter I.

Editing Content
media="all" />

Protect Natural Resources, Utilize Solar
Electric Power

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.

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.
The well-known source of
energy which is the solar energy is an environment-friendly and
endless renewable source of energy. .

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.

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.

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.

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.

Capturing solar energy does not contribute any
pollution and does not harm the atmosphere.

You can also change the content of the content, create a folder named Chapter 3 Content Editing and then you save the HTML file that you created called content.html and save it.
Description of the HTML file:

I grab the HTML code as part of Chapter I, and I give the selectors id and class.
The others just text content with several regular HTML tags such as
for paragraph, H1 for heading 1 and others.

Creating a CSS file for Content

Next turn you create CSS code above rule which makes content easy to read and attractive to look at, the following CSS rules.

#container{
width:1000px;
margin:0 auto;
font-family:Verdana;
font-size:12px;
}
#content{
background-color:#EBEBEB;
width:675px;
float:left;
padding:15px 10px 15px 15px;
letter-spacing:1px;
word-spacing:1px;
text-align:justify;
}
h1 {
text-decoration:underline;
text-transform:uppercase;
font-family:Arial;
font-size:30px;
}
.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;
}
.preset{
font-style:italic;
font-weight:bold;
}

Now you can read the description and explanation of the CSS above as follows:

#container {...}for settings page is made with size 1000px wide margin 0 at the middle position (auto) for setting the type font (font family) Verdana font size 12 px.
#content {...}setting content area to be given a gray background color (#ebebeb) width of 675 px content area, setting the left float, padding 15 px, 10 px padding-right, padding-bottom 15px, 15px left padding (example writing summary of css) you can use padding-top, padding-right, padding-bottom, padding-left) the commencement of the top and walk clockwise with each value, for setting the spacing between letters, you can use the letter-spacing with 1px distance, and to the distance between the words you can use a word-spacing with a distance of 1px too, by setting the average left and right posts (TextAlign: justify).
H1 {...}for the setting of Heading 1 with given underline by using text-decoration, and then the entire writing in all capital letters with text-transform arrangement with uppercase values, then by using arial font with size 30 px.
.indent: first-letter {...} is for setting the first letter to be great or so-called Drop Caps with a size of 70 pixels in blue (# 0000CC), bold (font-weight: bold).
.rtk {...}For this class selector has settings that make writing into a flickering (text-decoration: blink) and the drawing is made thicker (bold) with the font color red (# FF0000) with a background of yellow paper (# CCCC00) for type font is not mentioned and it will be referring to (#container) for a class selector, you can put some selectors in the web pages, different from that which the selector ID allowed just one course.
.preset {...}for this selector you can set the settings for font settings italics (italic) and bold (bold).

Then you keep this css file with the name style.css in the folder Chapter III Edit Content and you try to click 2 times on content.html.

Here if you have already saved correctly.