Assalamu'alaikum warohmatulloh wabarokaatuh sobat hari ini saya memberikan
Modul-modul css
buat latihan aja supaya kita lebih mengenal css lebih dalam langsung sajaModul Pertama Html
<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap
<B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B>
</BODY>
</HTML>
Modul Kedua Mewarnainya Dengan Hijau Tidak Menggunakan Style-Sheet
<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap
<B><FONT COLOR="Lime">suatu pekerjaan</FONT>
</B> itu mudah maka pekerjaan itu akan beneran menjadi
<B><FONT COLOR="Lime"> lebih mudah</FONT></B>?
<P> J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti
</FONT></B> terhadap <B><FONT COLOR="Lime">diri kita sendiri</FONT>
</B>
</BODY>
</HTML>
Modul ketiga mewarnai dengan hijau menggunakan Style-Sheet
untuk memasukkan kode Style Sheet
garis besarnya seperti ini :
<HEAD>
<STYLE TYPE="text/css">... code-code css disini...</STYLE>
</HEAD>
LANJUT MODUL KETIGA Y...
<HTML>
<HEAD>
<STYLE TYPE="text/css">B { color : lime }</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap
<B>suatu pekerjaan</B>
itu mudah maka pekerjaan itu akan beneran menjadi
<B> lebih mudah</B> ?
<P> J: Karena itu merupakan
<B>sugesti</B> terhadap <B>diri kita sendiri</B>
</BODY>
</HTML>
Modul Ke Empat Menganti Warna Dan Tag
<HTML>
<HEAD>
<STYLE TYPE="text/css">
I { color : red }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I>
itu mudah maka pekerjaan itu akan beneran menjadi<I> lebih mudah</I>?
<P> J: Karena itu merupakan <I>sugesti</I> terhadap <I>diri kita sendiri</I>
</BODY>
</HTML>
Modul Ke Lima Dua Tag Satu Warna
<HTML>
<HEAD>
<STYLE TYPE="text/css">
I,U { color: red }
B { color : green }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap
<I>suatu pekerjaan</I> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P> J: Karena itu merupakan <U>sugesti</U> terhadap <B>diri kita sendiri</B>
</BODY>
</HTML>
Modul Ke Enam Mengunakan Text Decoration
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: lime; text-decoration: underline; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap
<B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B>
</BODY>
</HTML>
Modul Ketujuh Membuat Selector
<HTML>
<HEAD>
<TITLE>Selector</TITLE>
<style type="text/css">
body{ FONT-FAMILY: Geneva, Arial; FONT-SIZE: 20px;
color: red; BACKGROUND-COLOR: green; }
</style>
</HEAD>
<BODY> Halaman efect CSS</BODY>
</HTML>
Modul Kedelapan Membuat Backgraund
<HTML>
<HEAD>
<TITLE>Menggunakan Background Warna</TITLE>
<STYLE type="text/css">
BODY { background-color : yellow}
</STYLE>
</HEAD>
<BODY> Halaman ini di buat Berwarna Kuning
</BODY>
</HTML>
modul kesembilan membuat tabel
<HTML>
<HEAD>
<TITLE>Pengaturan Padding Table</TITLE>
<style type="text/css">
td.kiri{ padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; padding-left: 2cm ; background-color : #F0F8FF; }
</style>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</TD>
<TD>Tanpa jarak </TD>
</TR> </TABLE>
</BODY> </HTML>
Terakhir modul kesepuluh memanggil file css
pertama buat file css dulusalin dibawah ini
TH
{
color : #FFFFFF;
background-color : #336699;
border-width: 1px ;
border-style:solid;
border-color :red ;
font-size: 9pt;
}
TD
{
color : red;
background-color : #E6E6FA;
border-width: 1px ;
border-style:solid;
border-color :blue ;
font-size: 9pt;
}
paste kan di notepad ganti
save as type all
file name tulis table_specbody.css
encoding ganti utf-8
yang kedua kita akan membuat file html untuk memanggil file css tersebut
<HTML>
<HEAD>
<TITLE>Pengaturan Table spec</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="table_specbody.css">
</HEAD>
<BODY>
<table width="468" border="0" cellpadding="5" cellspacing="0" >
<tr>
<th width="112" >Nama Computer</th>
<th width="91">Prossesor</th>
<th width="96">Ram</th>
<th width="137" >System Operasi</th>
</tr>
<tr>
<td>Clnt-1</td>
<td >IP 4 1,8 Ghz</td>
<td >10 GB</td>
<td >Redhat Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >IP 2 Ghz C</td>
<td >6 GB</td>
<td >Mandrake Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >XP 2000+ </td>
<td >20 GB</td>
<td>Windows</td>
</tr>
</table>
</BODY>
</HTML>
udag y sobat segitu j saya juga masih dalam tahap pembelajaran,btw sobat pake aplikasi notepad j y biar mudah mengetahui tag-tag nya
CARA NYA
1 JALANKAN APLIKASI NYA
2 SALIN CODE DAN PASTEKAN DI NOTEPAD TERUS
3 SAVE AS
GANTI SAVE AS TYPE ALL
FILE NAME TULIS CONTOH.HTML
ENCODING GANTI UTF-8
SELAMAT BELAJAR
Master aboe poetra
bengkel internet
dan banyak lagi mohon maaf jika tidak disebutkan nama nya maklum udagh lupa saking banyak nya
Alhamdulillah Catatan Sederhana MENGENAI MODUL CSS SEDERHANA telah selesai mohon maaf jka da kesalahan wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment