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)

rangkuman 7

contoh tag form/ source code

<form>
<table>
<tr><td>Username</td><td>:</td><td><input type="text" name="nama" size=15 maxlength="15" value="Ardy"/></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pasword" value="abc"/></td></tr>
<tr><td>Komentar</td><td>:</td><td><textarea name="komentar" cols="20" rows="5" warp>isi dengan text</textarea>
<tr><td>jenis kelamin</td><td>:</td><td><input type="radio" name="Kelamin" value="Pria" checked/>Laki-Laki<br/><input type="radio" name="Kelamin" value="Wanita"/>Perempuan<br/></td></tr>
<tr><td>Hobi</td><td>:</td><td><input type="checkbox" name="renang"/>Renang<br/><input type="checkbox" name="baca"/>membaca<br/><input type="checkbox" name="coding" checked/>coding<br/><input type="checkbox" name="tidur" checked/>Tidur</td></tr>
<tr><td>Distro Linux Favorit</td><td>:</td><td><select name="distro">
<option value="Fedora"/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select></td></tr>
<tr><td>Distro Windows Favorit</td><td>:</td><td><select name="OS" multiple>
<option value="windows98"/>Windows 98
<option value="windowsxp" selected/>Windows XP
<option value="windowsvista"/>Windows Vista
<option value="windows7" selected/>Windows 7
</select></td></tr>
</table>
</form>

rangkuman 6

tag frame dan frameset

tag frameset atribut cols=40%,*: digunakan untuk membuat 2 buah frame dengan ukuran 40% dan 60% secara vertikal

frame atribut src: digunakan untuk membuat sebuah frame agar menampilkan hal dari sebuah html yang dipilih

tag frame: digunakan utuk memposisikan frame secara horizontal

atribut border: digunakan untuk memberi ukuran untuk pemisah antar frame

tag iframe: digunakan untuk membuat sebuah frame dengan implementasi yang lebih simple

rangkuman5

tag table: digunakann untukmembuat table.
tag caption, di dalam tag table: digunakan utuk memberikan judul pada table
tag tr dalam tag table: digunakan untuk memberikan/menambah baris
tag th: memberikan heading pada suatu cell
tag td: memberikan nilai pada suatu cell

dalam tag table kita dapat menambahkan atribut bgcolor, fungsinya untuk memberikan warna pada suatu table

atrbut cellpadding, cellspasing: digunakan utuk memeberi jarak pada suatu cell

atribut width, atribut height: digunakan utuk mengubah ukuran suatu cell

atribut align: memposisikan suatu kata atau kalimat secara horizontal
atribut valign: memposisikan suatu kata atau kalimat secara vertikal

atribut rowspan, colspan: mengabungkan cell secara baris, colom

Rangkuman 4

ada 2 tipe list:
1. tipe yang memperhatikan urutan tag ol
2. tipe yang tak memperhatikan urutan tag ul

dalam tag ol ada berbagai tipe
tipe 1,A,a,I,i

dalam tag ul ada berbagai tipe
tipe circle,disc,square

dalam tag dl ada tag dt dan dd
dl untuk judul, dd untuk isinya

LINK
untuk link kita menggunakan tag a, dimana atributnya adalah href, untuk alamat tujuan.

dalam tag a adapula target, target untuk menentukan letak dimana kita mau ditampilkan
untuk melink ke suatu web, kita perlu menmbahkan http://

untuk melink dengan mengunakan gambar, kita mengunakan atribut img dalam tag a