Coba anda file HTML seperti berikut ini yang saya ambil dari
sebagian dari layout website yang sudah dibuat pada Bab I.
<html>
<head>
<title>Mengedit
Content</title>
<link
href="style.css" rel="stylesheet" type="text/css"
media="all" />
</head>
<body>
<div
id="container">
<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 class="preset">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>
</body>
</html>
Anda boleh bebas mengganti isi
dari content , buatlah folder dengan nama BAB 3 Mengedit Content lalu anda
simpan file HTML yang anda buat dengan nama content.html dan simpan
didalamnya.
Keterangan dari file HTML tersebut:
• Kode
HTMl tersebut saya ambil sebagian dari BAB I dan telah saya beri selector
id maupun class.
• Yang
lain hanya text content dengan beberapa tag HTML biasa semisal <p> untuk
paragraph, H1 untuk heading 1 dan lain-lain.
Membuat file CSS untuk Content
Selanjutnya giliran anda membuat
kode CSS rule yang membuat content diatas enak dibaca dan menarik untuk
dilihat, berikut ini CSS rulenya.
#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;
|
|
}
|
Sekarang anda bisa membaca keterangan dan penjelasan dari
CSS diatas seperti berikut ini :
• #container
{…} untuk pengaturan page dibuat dengan ukuran lebar 1000px dengan
margin 0 dengan posisi ditengah ( auto ) untuk
pengaturan jenis font ( font family ) verdana dengan ukuran font 12 px.
• #content {…}
pengaturan area content dengan diberikan background color abu-abu ( #EBEBEB)
lebar dari area content 675 px , pengaturan float kiri, padding 15 px, padding kanan 10
px, padding bawah 15 px, padding kiri 15 px ( contoh penulisan ringkas
dari css ) anda bisa menggunakan padding-top, padding-right, padding-bottom, padding-left)
dimulainya dari top dan berjalan searah jarum jam dengan nilai masing-masing,
untuk setting jarak antar huruf anda bisa menggunakan letter-spacing dengan
jarak 1px, dan untuk jarak antar kata anda bisa menggunakan word-spacing
dengan jarak 1px juga, dengan
pengaturan tulisan rata kiri maupun kanan ( textalign:justify).
• H1 {…} untuk
pengaturan dari Heading 1 dengan diberikan underline dengan menggunakan text-decoration, lalu seluruh tulisan
menggunakan huruf besar semua dengan pengaturan text-transform dengan nilai
uppercase, lalu font dengan mengunakan arial dengan ukuran 30 px.
• .indent:first-letter{…} adalah untuk pengaturan huruf pertama menjadi
besar atau biasa disebut Drop Caps dengan ukuran 70 px warna biru ( #0000CC ),dengan huruf
tebal (font-weight: bold ).
• .rtk {…} Untuk
selector class ini mempunyai settingan yang membuat tulisan menjadi
berkedip-kedip ( text-decoration:blink ) lalu tulisan dibuat tebal ( bold
) dengan warna font merah ( #FF0000 ) dengan background tulisan
kuning ( #CCCC00 ) untuk jenis font memang tidak di sebutkan dan itu
nanti akan mengacu pada (
#container ) untuk sebuah selector class , anda
bisa menaruh beberapa selector dalam halaman web, berbeda dari selector
ID yang mana diijikan hanya satu saja.
• .preset {…} untuk
selector ini anda bisa menaruh settingan untuk pengaturan font dengan tulisan
miring ( italic ) dan tebal ( bold ).
Lalu anda simpan file css ini dengan nama style.css.Content
dan anda coba dengan klik 2 kali pada content.html.
Berikut ini jika anda
sudah menyimpan dengan benar.
File content HTML
setelah diberi pengaturan CSS
Silahkan anda coba untuk pengaturan yang lain, semisal
tulisan diganti dengan Geneva atau yang lainnya, anda bebas membuat kreasi
sendiri.
0 Comments