rangkuman 09

Teori :
Dibawah ini adalah contoh-contoh penggunaan CSS disertai dengan penjelasannya masing-masing. Perlu diingat bahwa penambahan script pada CSS hanya untuk mempercantik tampilan dari HTML.

Contoh 1.
< HTML>
< BODY>
< SPAN STYLE = "font-size: xx-small"> xx-small< /SPAN>
< SPAN STYLE = "font-size: x-small"> x-small< /SPAN>
< SPAN STYLE = "font-size: small"> small< /SPAN>
< SPAN STYLE = "font-size: medium"> medium< /SPAN>
< SPAN STYLE = "font-size: large"> large< /SPAN>
< SPAN STYLE = "font-size: x-large"> x-large< /SPAN>
< SPAN STYLE = "font-size: xx-large"> xxlarge< /SPAN>
< P STYLE = "font-size: 20px">
Teks berukuran 20 piksel< BR>
< SPAN STYLE = "font-size: larger">
Dalam paragraf yang sama teks ini lebih besar< BR>
< /SPAN>
< SPAN STYLE = "font-size: smaller">
Dalam paragraf yang sama teks ini lebih kecil< BR>
< /SPAN>
< SPAN STYLE = "font-size: 150%">
Dalam paragraf yang sama teks ini lebih besar 150%< BR>
< /SPAN>
< /P>
< /BODY>
< /HTML>

Contoh2.
< HTML>
< BODY>
< P STYLE = "text-decoration: underline">
Digarisbawahi
< /P>
< P STYLE = "text-decoration: line-through">
Dicoret
< /P>
< P STYLE = "text-decoration: blink">
Berkedip
< /P>
< P STYLE = "text-decoration: underline">
< SPAN STYLE = "text-decoration: blink">
Digarisbawahi dan berkedip
< /SPAN>
< /P>
< /BODY>
< /HTML>

Contoh3.
< HTML>
< HEAD>
< TITLE> Latihan gt deh< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:AQUA;}
H1 { BACKGROUND-COLOR:RED; }
H2 { BACKGROUND-COLOR:YELLOW;}
P { BACKGROUND-COLOR:PINK; }
< /STYLE>
< /HEAD>
< BODY>
< H1> Header 1 warna merah< /H1>
< H2> Header 2 warna kuning< /H2>
< P>
Bintang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
< /P>
< /BODY>
< /HTML>

Contoh4.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-Y;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal< /H1> < /FONT>
< /BODY>
< /HTML>





Contoh5.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-X;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan horizontal< /H1> < /FONT>
< /BODY>
< /HTML>

Contoh6.
< HTML>
< HEAD>
< TITLE> Efron CSS3< /TITLE>
< STYLE TYPE="TEXT/CSS">
h1 {color:white;background-color:green;BORDER-STYLE:Dashed;BORDER-COLOR:blue;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;}
h2 {color:white;background-color:red;BORDER-STYLE:Dashed;BORDER-COLOR:black;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-right:5cm;}
h3 {color:white;background-color:blue;BORDER-STYLE:Dashed;BORDER-COLOR:yellow;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;margin-right:5cm;}
< /STYLE>
< /HEAD>
< BODY>
< h1> ini paragraf 1...< /h1>
< h2> ini paragraf 2...< /h2>
< h3> ini paragraf 3...< /h3>
< /BODY>
< /HTML>
Penjelasan :
color:------; untuk pembuatan warna tulisan.
background-color:------; untuk pembuatan warna latar belakang.
BORDER-STYLE :----- ; untuk pembuatan tipe garis tepi ada dashed, dotted, dashed dotted.
BORDER-COLOR:----; untuk pembuatan warna garis tepi.
PADDING-(Left, Right, Top, Bottom):--cm; untuk mengatur jarak dari garis tepi.
margin-(Left, Right,Top, Bottom):--cm; untuk mengatur jarak dari batas yang ada.

Contoh7.
< HTML>
< HEAD>
< TITLE> Ini judulnya< / TITLE >
< style type="text/css">
h1.satu {front-style :italic;color:red;background-color:aqua;}
h1.dua{color:white;background-color:black;text-decoration:underline;}
h2.dua{font-family:arial;color:blue;background-color:yellow;}
< /style>
< /HEAD>
< BODY>
< h1 class="satu"> Header1 class satu< /h1>
< h1 class="dua"> Header1 class dua< /h1>
< h1 class="satu"> Header1 class satu< /h1>
< h2 class="dua"> Header2 class dua< /h2>
< p> Penerapan class satu pada < h1> dan< h2> akan memberikan efek style yang berbeda karena menggunakan class yang sifatnya spesifik {spesifik class}.
< br>
Penerapan class dua pada < H2> tidak menghasilkan efek apapun karena class dua hanya didefinisikan spesifik untuk < H1>
< /p>
< /BODY>
< /HTML>

Praktikum :

Soal1.
< HTML>
< HEAD>
< TITLE> Ini Judul< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:grey;}
#satu {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:CENTER;}
#dua {FONT-FAMILY:arial;COLOR:white;font-size:14pt;}
#tiga {FONT-FAMILY:arial;font-size:16pt;}
#empat {FONT-FAMILY:arial;font-size:18pt;}
#lima {FONT-FAMILY:arial;font-size:22pt;}
#enam {FONT-FAMILY:arial;font-size:24pt;}
#tujuh {FONT-FAMILY:arial;font-size:28pt;}
#delapan {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:right;}
< /STYLE>
< /HEAD>
< BODY>
< HR WIDTH="100%" SIZE="5" color="red" ALIGN="CENTER"> (membuat garis)
< img src="Gambar.jpg" width="80" height="80" align="right" /> < br/> < br/> < br/> < br/> < br/>
< p id="satu"> (memanggil style satu yang telah dibuat)
Ini susi yang menggambarkan seekor Kappa sedang memancing ikan.< /p> < br>
< p id="dua"> (memanggil style dua yang telah dibuat)
< i> Kappa< /i> adalah makhluk yang digambarkan sebagai makhluk gaib yang tinggal di sungai2 di Jepang. < u> Konon< /u> , katanya kalau kita melemparkan < b> timun< /b> kepadanya, maka kita tidak akan diganggu oleh < i> kappa< /i> .< i> Kappa< /i> adalah < br>
makhluk yang < del> lucu < /del> menyeramkan, oleh karena itu orang Jepang takut bila bertemu dengan < i> Kappa< /i> .
< hr WIDTH="70%" SIZE="5" color="green" ALIGN="CENTER"/> (membuat garis)
< center> < img src="Gambar.jpg" width="80" height="80"/> < /center> < br/>
< p id="satu">
Oginiri cake, akan tetapi sebenarnya terbuat dari nasi dan bumbu-bumbu lainnya, lalu dibentuk seperti kue< sup> cake< /sup> .Diikat dengan < acronym title="nori"> nori< /acronym> sehingga terlihat seperti pita berwarna < p id="delapan"> kehitaman. Dan toppingnya yang membuatnya semakin terlihat < font id="dua"> L< /font> < font id="tiga"> E< /font> < font id="empat"> Z< /font> < font id="lima"> A< /font> < font id="enam"> T< /font> < font id="tujuh"> T ..< /font>
< /p> < /p>
< /BODY>
< /HTML>

Soal2.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE: ARIAL; color:red;font-size:20pt;}
#dua {FONT-STYLE: ARIAL; color:blue;font-size:15pt;}
#tiga {text-decoration:line-through;}
#empat {text-decoration: underline;}
img {Border-style:solid;border-width:10px;PADDING-RIGHT:0cm;}
< /style>
< /head>
< body>
< font id="satu"> P< font id="tiga"> < sub> EMO< /sub> < /font> GRAM< font id="empat"> < sup> AN< /sup> < /font> WEB< /font>
< HR WIDTH="100%" SIZE="10" color="blue" ALIGN="CENTER" NOSHADE>
< b> < big> Belajar< /big> < /b> Pemograman Web untuk Kelas D
< h1 id="dua"> Pariwisata Di Indonesia< /h1>
< img src="Gambar.jpg" width="80" height="80">
< /BODY>
< /HTML>



Soal3.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {background-color:white;}
#satu {BACKGROUND-IMAGE:URL('Gambar.gif');BACKGROUND-REPEAT:REPEAT-x;FONT-STYLE: ARIAL;COLOR:black;TEXT-ALIGN:CENTER;text-align:center;}
#dua {background-color:yellow;color:red;border-style:solid;}
#tiga {background-color:black;color:white;border-style:dotted;}
< /STYLE>
< /HEAD>
< BODY>
< table width="525" border="0" align="center">
< tr>
< td id="satu"> < h2> WELCOME< /h2> < /td>
< /tr>
< /table>
< p id="dua"> Pemograman Web< /p>
< p id="tiga"> 2010< /p>
< p id="satu"> < h1> Progweb< /h1> < /p>
< /BODY>
< /HTML>

rangkuman 8

Model pendefinisian style CSS secara Eksternal memungkinkan beberapa file dokumen HTML untuk menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)

rangkuman 8

Model pendefinisian style CSS secara Eksternal memungkinkan beberapa file dokumen HTML untuk menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)