Showing posts with label Belajar CSS. Show all posts
Showing posts with label Belajar CSS. Show all posts

Monday, June 13, 2016

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. :)

Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Menggabungkan seluruh materi

Wednesday, June 8, 2016

CSS : Mengedit Footer

Mengedit Footer


Setelah anda membuat layout , menu, content serta colom kanan, kini anda perlu mengedit footer. Buat dulu folder dengan nama BAB V Mengedit Footer , lalu didalam folder tersebut buat juga folder images, karena anda perlu images untuk footer.

Membuat File HTML Footer

Ketikkan kode HTML dibawah ini pada notepad ++

<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="footer">
          <p id="bottom">
                  <a href="#">HOME</a>
                  <a href="#">PRODUK</a>
                <a href="#">ARTIKEL</a>
                <a href="#">MEMBER</a>
                <a href="#">TESTIMONIAL</a>
                <a href="#">ABOUT US</a>
            </p>
              <p id="copy">
              Copyright &copy; 2011 <a href="http://fajaryusuf.com">Fajar Yusuf.com</a>
            </p>
        </div>
</div>
</body>
</html>

Penjelasan untuk kode diatas:
  • File HTML diatas sudah saya buat tulisan HOME-PRODUK-ARTIKELMEMBER-TESTIMONIAL-ABOUT US dengan masing masing sudah saya beri link ” #”
  • Saya juga memberi tulisan Copyright dan kode &copy merupakan kode untuk membuat symbol © dan nama webnya dengan link ke fajaryusuf.com.
  • Masing-masing sudah saya beri selector . 
Simpan file tersebut kedalam folder BAB V Mengedit Footer , beri nama footer.html.

Membuat file CSS Footer

Kini saatnya anda membuat file CSS supaya footer lebih bagus untuk disajikan kepada user.

Ketikkan code CSS dibawah ini pada software yang anda pakai

#container{
        width:1000px;
        margin:0 auto;       
        }
#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;

Penjelasan dari kode CSS yang sudah anda buat :
  • #container {…} membuat page dengan lebar 100 px margin 0 dengan penempatan ditengah (auto).
  • #footer{…} ini untuk mengatur footer dengan lebar 1000px dan tinggi 128 penempatan float:left
  • #bottom{…} untuk pengaturan test menu bottom penempatan tulisan ditengan ( text-align:center), font menggunakan Geneva,besar font 12px, kita beri margin dari atas 25 px dan selebihnya 0, font dibuat tebal (bold) dengan jarak antar huruf 1 px, dan jarak antar kata 8 px. 
  • #bottom a {…} untuk mengatur tulisan yang diberi link berwarna putih (#FFFFFF).
  • #bottom a:link{…} untuk pengaturan efek dari text menu bottom tanpa underline (text decoration:none) .
  • #bottom a:hover{…} untuk memberi efek jika mouse diletakkan diatas tulisan dengan menambahkan underline (textdecoration:underline) dan warna text berganti warna kuning (#FFFF00).
  • #copy {…} untuk pengaturan tulisan copyright, kita beri margin 25 0 0 0 , font menggunakan verdana, kuning muda(#FFFFCC), ukuran font 10 px, penempatan font ditengah.
  • #copy a {…} memberi pengaturan warna font yang diberi link dengan warna yang sama dengan tulisan copyright yaitu kuning muda (#FFFFCC)
  • #footer #copy a:link{…} memberi efek pada link tanpa underline dengan memberi nilai none (text-decoration:none)
  • #footer #copy a:hover{…} memberi efek pada link jika mouse diarahkan pada tulisan dengan memberi efek underline (textdecoration:underline)
Kemudian anda simpan file ini ke folder BABV Mengedit Footer dengan nama style.css


Jika anda benar maka tampilan folder seperti diatas.


Kemudian anda jalankan file footer.html dengan klik 2 kali, demikian hasilnya:



Sangat menarik bukan jika anda menguasai CSS…?

Kesimpulan :
File HTML hanya digunakan untuk pengaturan membuat konten dan untuk pengaturan tampilan menggunakan CSS.


Anda bisa melanjutkan ke materi akhir CSS yaitu : Menggabungkan Seluruh Materi CSS.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)




MATERI CSS


Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Mengedit Footer

CSS : Mengedit Colom Right

Mengedit Colom Right

Sebelumnya anda buiat dulu folder dengan nama BAB IV Mengedit Colom Right dan didalamnya anda buat folder lagi dengan nama images, lalu anda copy dari file gambar yang sudah saya sertakan di MATERI PRAKTEK CSS kedalam folder images.

Adapun filenya ada 7 file gambar :



Membuat File HTML Colom Right

Lalu anda buka software notepad ++ atau yang lain sesuai selera andadan anda tuliskan code html berikut ini :

<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="content">
<p>&nbsp;</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="bottom"></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>
</body>
</html>

Kali ini agak rumit sedikit, karena pengaturan CSS ini lebih komplek, dan keterangan untuk kode html diatas adalah sebagai berikut ini :
  • Untuk colom right saya berencana membuat form login di bagian atas dengan mengambil gambar yang sudah saya siapkan, karena kalau hanya mengandalkan warna tampak kurang menarik dan ini akan membuat anda akan bertambah wawasan.
  • Dan dibawah form login akam saya buat untuk menaruh Categories dengan beberapa Categori dan jarak antar kata Categori akan saya buat titik-titik.
  • Saya sudah membuat tulisan H1 Member Login lalu form untuk input dengan 2 field text dan 1 tombol submit tanpa value.
  • Dibawah form login sudah saya buat text Categories dengan menggunakan H2 dengan 8 text Categories masing-masing dengan link “#“.
  • Masing-masing saya sudah beri selector , baik ID maupun class. Setelah itu anda simpan dengan nama colom-right.html.

Tampilan Hasilnya :


Membuat File CSS untuk colom right

Memang tampak gak menarik sama sekali bukan , tetapi anda jangan cemas, karena setelah anda beri CSS maka tampilan akan berubah sama sekali. Sekarang anda buat file CSS, ketikkan kode CSS berikut ini :

body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#content{
background-color:#EBEBEB;
width:700px;
height:521px;
float:left;
}
#right{
width:300px;
background-color:#EBEBEB;
float:left;
}
.member{
width:264px;
height:67px;
background:url(images/member_login.gif) 0 10px norepeat;
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) no-repeat;
width:53px;
height:13px;
border:none;
cursor:pointer;
float:right;
}
.bottom{
background:url(images/memberlogin_bot.gif) norepeat;
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;
padding:0 0 0 17px;
margin-top:30px;
}
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 no-repeat;
font-size:14px;
color:#000000;
background-color:#EBEBEB;
text-decoration:none;
margin:0;
padding:3 0 3 14px;
display:block;
}
#right ul li a:hover{
color:#FFFFFF;
background-color:#FF9900;
}

Memang agak banyak pengaturan dari colom right ini, dan langsung saja akan saya beri penjelasan :
  • Body {…} adalah jika anda tidak mengatur secara khusus untuk jenis font maka pengaturan font akan diatur dari sini secara keseluruhan.
  • #container {…} seperti biasa penjelasannya seperti bab sebelumnya yaitu anda buat lebar dari halaman web dengan lebar 1000px terletak ditengah tetapi kali ini saya mencoba mengatur font default bukan dari sini melainkan dari body.
  • #content {…} adalah tempat untuk meletakkan content.
  • #right {…} pengaturan dari kolom right itu sendiri dengan nilai lebar 300 px, background color abu-abu ( #EBEBEB ) dan float:left.
  • .member {…} adalah selector class dari H2 text Member Login dengan pengaturannya lebar 264 px dan tinggi 67 px dan anda mengambil background gambar dari member_login.gif jarak dari kiri 0 dari atas 10px tanpa perulangan gambar (background:url(images/member_login.gif 0 10px no-repeat) dan margin 0 penempatan center ( auto ) lalu untuk ukuran font sebasar 20 px dengan warna kuning (#FFCC00) dengan jarak tulisan dari member login dari tepi sebesar 50 px ( text-indent: 50px ) dan jarak antar tulisan atas 50 px ( line-height:50px).
  • #form {…} untuk form dibuat background dengan menggunakan images yaitu : memberlogin_bg.gif dengan perulangan hanya dari atas kebawah (background:url(images/memberlogin_bg.gif) repeat-y) lebar 228 px , padding atas 0 , padding kanan 18 px padding bawah 0 padding kiri 18 px, lalu margin 0 auto.
  • form input.txtBox {…} ini untuk mengatur form input username dan password, anda buat lebar dari ukuran text field lebar : 206 px dan tinggi 25 px, anda buat border supaya lebih cantik dengan border kiri dan atas berwarna (#808080), border kanan dan bawah warna (#D4D0C8) type border solid lebar border 1 px lalu warna tulisan berwarna hitam ( #000000), warna text input kuning muda ( #FFFFCC ) dengan margin 5 0 17px 0 dan padding 0 0 0 20 px.
  • form a {…} untuk mengatur tulisan Register Here dengan pengaturan sebagai berikut ukuran tulisan 12 px, dengan tulisan tebal ( bold ) warna tulisan orange ( #FF6600 ) menggunakan underline, float left, padding 0 0 0 14 px dan disebelah kiri tulisan akan kita letakkan gambar centang tepat disebelah kiri tulisan (background:url(images/register_here_bg.gif) 0 5px no-repeat ).
  • form a:hover {…} untuk memberikan efek pada tulisan Register Here ketika mouse diarahkan ke tulisan dengan menghilangkan underline (text-decoration: none ).
  • form input.login {…} selector ini untuk mengatur dan memberi gambar pada submit login yang mana pada kode HTML kita tidak memberikan tulisan login pengaturannya sebagai berikut: Anda beri background image btn_login.gif tanpa perulangan gambar (background:url(images/btn_login.gif) no-repeat ), lebar 53 px, tinggi 13 px, tanpa border,float right, lalu tampilan cursor kita buat symbol tangan (cursor:pointer ).
  • .bottom {…} ini untuk menampilkan gambar bagian bawah form,yaitu dengan memberi background gambar memberlogin_bot.gif tanpa perulangan (background:url(images/memberlogin_bot.gif) norepeat) lebar 264 px , tinggi 25 px, dan kita memberi margin bawah 5px yang lain margin 0 (margin:0 0 5px 0) dan untuk menampilkan ditengah margin juga kita beri nilai auto ( margin : auto ). Untuk pengaturan form login sudah selesai dan ini mulai kita mengatur bagian Categories
  • .categories {…} bagian ini untuk mengatur tulisan Categories dengan pengaturan font tebal (bold), jarak tulisan atas-bawah 40 px (line-height:40px), ukuran besar font 24 px, warna tulisan kuning muda (#FFFF00) background warna orange (#FF9900) padding anda beri nilai 0 0 0 17px, lalu kita beri jarak dari atas 30px.
  • ul {…} ini untuk mengatur tempat untuk membuat tulisan bullet yaitu lebar 238 px dengan padding anda beri nilai 0 0 017px.
  • ul li {…} untuk mengatur tulisan dari categories dengan arah atas kebawah dengan melakukan pengaturan (display:block), lalu anda perlu membuat titik-titik diantara tulisan yaitu dengan memberikan gambar dot.gif posisi hanya di bawah dengan pengulangan gambar horizontal (background:url(images/dot.gif) bottom repeat-x),dengan tinggi 25 px dan lebar 238 px.
  • ul li a {…} selanjutnya anda melakukan pengaturan dari text dan kita perlu menaruh logo panah di depan text dengan images arrow.gif (background:url(images/arrow.gif) 0 7px no-repeat), ukuran font 14 px, warna font hitam (#000000),background color abu-abu (#EBEBEB)disamakan dengan yang lain,lalu kita hilangkan dulu underline (text-decoration:none), margin 0, padding 3 0 3 14px, lalu anda buat display:block (arah tulisan menurun). #right ul li a:hover {…} ini untuk memberi efek ketika mouse diarahkan kepada tulisan dengan memberikan warna background orange (#FF9900)dan warna tulisan berubah menjadi putih (#FFFFFF).

Kemudian anda simpan pada folder BAB IV Mengedit Colom Right dengan nama style.css dan nanti akan menjadi demikian




Lalu anda jalankan file colom-right.html dengan klik sebanyak 2 kali dan ini hasilnya :

Sudah berubah banyak bukan ? Semakin lama semakin asyik juga, kini anda bisa membuat kreasi yang lain dengan jalan merubah gambar serta ukuran.

Anda perlu sedikit mengerti photoshop!



Anda bisa kemateri selanjutnya yaitu : Mengedit Footer CSS.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)




Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Mengedit Colom Right

Tuesday, June 7, 2016

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. :)

Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Mengedit Content

CSS : Membuat Menu Navigasi

Membuat Menu Navigasi




Untuk post kali ini saya akan mengajak anda membuat tutorial menu navigasi dibawah header.

Membuat file HTML untuk Menu Navigasi 

Baiklah kita langsung saja , ketikkan kode HTML untuk membuat menu navigasi dibawah ini :

<html>
<head>
<title>Membuat Menu Navigasi</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />

</head>
<body>
<div id="container">
<div id="menu">
<a href="#">HOME</a>
<a href="#">PRODUK</a>
<a href="#">ARTIKEL</a>
<a href="#">MEMBER</a>
<a href="#">TESTIMONIAL</a>
<a href="#">KONTAK</a>
<a href="#">ABOUT US</a>
</div>
</div>
</body>
</html>

Keterangan dari kode HTML diatas:
  • Kode tersebut saya ambil hanya bagian menu navigasi saja dari file HTML layout website yang nantinya bisa di gabung lagi sehingga bisa membentuk sebagai website utuh.
  • Disini saya hanya menambahkan navigasi mulai Home sampai dengan About Us, anda bisa merubah sesuai dengan keinginan anda sendiri, dan saya sudah memberikan link yang isinya hanya “#”.
Buatlah folder baru dengan nama Bab II Membuat Menu Navigasi dan simpan file HTML diatas dengan nama menu-navigasi.html


Membuat File CSS dari Menu Navigasi

Selanjutnya anda buat lagi file CSS berikut ini :

#container{
width:1000px;
margin:0 auto;
font-family: verdana;
}
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}

Penjelasan dari CSS rule diatas sebagai berikut ini :
  • #container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah.
  • #menu {…} untuk membuat background menu dengan warna #993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.
  • a:link {…} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px.
  • a:hover {…} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih (#FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.
  • a:active {…} dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebalan saya kembalikan lagi seperti asal.
Setelah itu simpan file ini dengan nama style.css didalam folder sama dengan file HTML, lalu anda jalankan.

Berikut screenshotnya :




Kelihatannya anda makin menyukai dengan penggunaan CSS ini, cukup mudah bukan…?

Silahkan anda membuat kreasi sendiri dengan merubah nilai dari CSS rule ini dan anda juga bisa mengganti tulisan dengan gambar.


Materi Pembellajaran CSS Selanjutnya adalah : Mengedit Content.


Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)

Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Membuat Menu Navigasi

CSS : Membuat Desain Layout Website

Membuat Desain Layout Website

Pertama kali jika anda akan membuat suatu website, sebagai dasar dari bentuk awal pembuatan website.

Oke kita langsung saja…
Saya akan menggunakan software notepad++ karena gratis,untuk membuat layout kali ini saya akan mengajak anda untuk membuat desain dengan 2 kolom dengan bagian content sebelah kiri dan disebelah kanan untuk menaruh navigasi dan segala macam bentuknya.

Untuk itu silahkan anda buat dulu folder untuk menaruh file hasil praktek, misalnya saya membuat folder Bab1 Layout website


Lalu anda buka folder tersebut dan buatlah lagi folder dengan nama images yang berfungsi untuk menampung images.



Copy file gambar dari file download yang saya sertakan dalam POST SEBELUMNYA yang terdapat dalam folder Bab1 Membuat layout, file gambar tersebut ada 2 buah file yaitu header.jpg dan footer.gif.



Membuat file HTML layout

Oke…sekarang anda buka notepad++ anda, atau jika anda bisa menggunakan software yang biasa anda gunakan lalu ketikkan kode HTML berikut ini:

<html>
<head>
<title>Membuar 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">
</div>
<div id="content">
</div>
<div id="right">
<!--Isi dengan konten/artikel-->
</div>
<div id="footer">
<!--Isi dengan konten/artikel-->
</div>
</div>
</body>
</html>

Keterangan dari kode diatas:
  1. Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing diberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan dari header,menu navigasi,content, menu kanan,footer.
  2. Kode komentar dengan warna merah perlu anda isi dengan konten atau artikel, karena jika anda tidak mengisi dengan artikel maka hasilnya tidak akan kelihatan (dalam file contoh telah saya beri artikel).
  3. Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS. 
Lalu simpan dalam folder Bab1 Membuat layout yang sudah anda buat, beri nama dengan index.html , jika anda jalankan dengan klik 2 kali maka penampilannya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.


Membuat file CSS layout

Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda.
Berikut kode dari file CSS :

* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
height:160px;
}
#menu{
background-color:#993300;
width:1000px;
height:35px;
}
#content{
background-color:#EBEBEB;
width:700px;
float:left;
}
#right {
width:300px;
background-color:#EBEBEB;
float:left;
}
#footer{
background-image:url(images/footer.gif);
width:1000px;
height:128px;
float:left;
}

Penjabaran dari kode diatas:
  • Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0.
  • Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif .
  • Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto.
  • Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.
  • Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.
  • Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ).
  • Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.
  • Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128 px, penempatan Float left.
Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.



Jika benar maka tampilan dari isi folder yang anda buat seperti gambar diatas. 

Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya .


Catatan :
  • Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet.
  • Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada materi tersendiri.

Materi Selanjutnya adalah : Membuat Menu Navigasi.


Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)

Reviewer: FajarYusuf.Com
ItemReviewed: CSS : Membuat Desain Layout Website

TENTANG SITUS

SITUS INI ADALAH 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.