Skip to main content

CSS : Mengedit Content

Mengedit Content


Sekarang pada post ini, anda akan mengenal lebih jauh peran dari CSS dalam pengaturan dan design dari suatu website.

Kali ini anda akan saya ajak untuk mengatur text content yang terdapat dalam design dari website yang kita buat
Pada bab I anda sudah membuat content yang belum di edit dari CSS, maka kelihatan tidak karuan dan pada Bab ini anda akan membuat content text menjadi suatu bagian yang menarik untuk dibaca oleh user.

Membuat file HTML dari Content

Coba anda ketikan file HTML seperti berikut ini yang saya ambil dari sebagian dari layout website yang sudah dibuat pada Bab I.

<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 di dalam folder Bab III Mengedit Content dan anda coba dengan klik 2 kali pada content.html.

Berikut ini jika anda sudah menyimpan dengan benar.


Jika kalian salah dan html dijalankan tanpa css hasilnya :



Dan Jika kalian benar html dengan css hasilnya :


Silahkan anda coba untuk pengaturan yang lain, semisal tulisan diganti dengan Geneva atau yang lainnya, anda bebas membuat kreasi sendiri.


Anda bisa kemateri selanjutnya yaitu : Mengedit Column Right.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

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

Comments

Unknown said…
sangat membantu gan.. langsung ane praktekin lah...
Tuesday, June 07, 2016
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 »