Saturday, March 26, 2011

CSS Part 2


Penggunaan ID dalam CSS

adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkan
akan berlaku untuk keseluruhan penggunaan satu tag tertentu.
enggunaan ID
pada CSS menjadikan implementasi style CSS pada tagtag
HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter “#” dan diikuti dengan ID nya.

contoh code html nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:BLUE;
BACKGROUN-DCOLOR:
PINK;}
#dua {TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 Style satu</H1>
<H1 ID="dua">Header1 Style dua</H2>
<P ID="satu">
Paragraf ini menggunakan
style dua looo....
</P>
</BODY>
</HTML>

yang dikeluarkan adalah seperti berikut:

Penggunaan Class dalam CSS

Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara
bersamasama
dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter “.” (karakter titik) dan diikuti dengan nama CLASS
nya.

code htmlnya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:WHITE;
BACKGROUN-DCOLOR:
BLACK;}
.dua { TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 ID satu</H1>
<H1 CLASS="dua">Header1 CLASS dua</H2>
<P ID="satu" CLASS="dua">
Paragraf ini menggunakan
ID satu dan Class dua lhooo..
</P>
</BODY>
</HTML>

keluaran yang dihasilkan:
 
Model Pendefinisian:

Model pendefinisian dibagi menjadi dua yaitu:
  • Internal
  • Eksternal
Model Pendefinisian Internal yaitu, Model pendefinisian secara internal dilakukan dengan menempatkan definisi style CSS di antara pasangan tag
<STYLE> dan </STYLE> yang ditempatkan di bagian HEAD dari suatu dokuken HTML yang akan
mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contohcontoh
sebelumnya.

contoh:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 STYLE="COLOR:WHITE; BACKGROUND-COLOR:
BLACK; TEXT-DECORATION:
LINE-THROUGH;">
Menggunakan Model Pendefinisian In Line
</H1>
</BODY>
</HTML>

Model Pendefinisian Eksternal, yaitu 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 <LINK>. Adapun format lengkap dari tag <LINK> yang digunakan adalah sebagai berikut
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css>

contoh yang disimpan dalam ekstensi .css :
H1.satu {COLOR:GREEN;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
BLUE;
FONT-SIZE:
12pt;}
H1.dua {COLOR:RED;
BACKGROUND-COLOR:
YELLOW;
BORDER-STYLE:
SOLID;
FONT-SIZE:
20pt;}

.html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul Halaman1</TITLE>
</HEAD>
<BODY>
<LINK REL="STYLE-SHEET" TYPE="TEXT/CSS" HREF="gaya.css">
<H1 CLASS="satu">Menggunakan Class satu secara eksternal dari file gaya.css</H1>
<H1 CLASS="dua">Menggunakan Class dua secara eksternal dari file gaya.css</H1>
</BODY>
</HTML>

keluarannya:

Monday, March 21, 2011

CSS part 1

CSS

CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen
HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa.
syntax penulisan CSS:
<STYLE TYPE=�TEXT/CSS�> dan diakhiri oleh <STYLE>.

Mengatur Warna Latar

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</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>

Mengatur Warna Teks

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 { COLOR:BLUE; }
P { COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1>Berwarna Biru</H1>
<H2>Kondisi Normal</H2>
<P>
Naiknaik
ke PUncak Gunung
Tinggitinggi
Sekali
</P>
</BODY>
</HTML>

Membuat Garis pada Teks

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION:
OVERLINE;}
H2 {TEXT-DECORATION:
UNDERLINE;}
H3 {TEXT-DECORATION:
LINETHROUGH}
P {TEXT-DECORATION:
BLINK;}
</STYLE>
</HEAD>
<BODY>
<H1>Garis Atas</H1>
<H2>Garus Bawah</H2>
<H3>Coretan Tengah</H3>
<P>
CSS Menjadikan halaman web lebih menarik
karena banyak modifikasi yang bisa dilakukan
</P>
</BODY>
</HTML>

Mengatur Tipe Border
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur
tipenya. Hal ini dilakukan dengan mengatur atribut BORDERSTYLE.
Adapun nilai yang bisa diberikan pada
atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan
OUTSET di mana masingmasing
nilai akan menghasilkan border degan tipe yang berbeda.

codeHTMLnya:

<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {BORDER-STYLE:
DOTTED;}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>

Mengatur Warna Border

code HTMLnya:

<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P { BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED; }
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>

Implementasi CSS pada Margin

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {
BORDER-STYLE:
SOLID;
BORDER-COLOR:
BLUE;
MARGIN-LEFT:
2cm;
MARGIN-TOP:
2.5cm;
}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>

Mengatur Tipe List dengan Gambar

code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
UL {LIST-STYLE-IMAGE:
URL('icon.gif')}
</STYLE>
</HEAD>
<BODY>
Penyanyi Jazz:
<UL>
<LI>Louis Amstrong</LI>
<LI>Diana Krall</LI>
<LI>Norah Jones</LI>
<LI>Dave Koz</LI>
</UL>
</BODY>
</HTML>

Monday, March 14, 2011

Membuat Form Dalam HTML

Dalam halaman web HTML kita juga dapat membuat tampilan form, Tampilan Form hampir sama dengan form yang ada di dalam windows. Contohnya seperti kita memilih properties suatu file atau direktori.
Untuk membuat form, kita harus menggunakan tag <form>
Di dalam form ada beberapa jenis input dalam form yang diawali dengan tag <input> dengan attribut-attribut sebagai berikut :
- Text, digunakan untuk memasukan suatu nilai untuk dikirimkan kepada server, nilai yang dimasukan dapat    berupa angka ataupun teks (textbox)
syntax : <HTML>
            <HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
            <BODY>
            <FORM>
             NAMA DEPAN:
            <INPUT TYPE="TEXT" NAME="FIRSTNAME">
            <BR>
            NAMA KELUARGA:
           <INPUT TYPE="TEXT" NAME="FAMILY">
           </FORM>

- Radio, menyediakan beberapa pilihan, hanya dapat memilih satu dari pilihan yang dipilih (Radiobutton)
syntax : <HTML>
            <HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
            <BODY>
            <FORM>
             JENIS KELAMIN:<BR>
            <INPUT TYPE="RADIO" CHECKED NAME="KELAMIN">PRIA
            <BR>
            <INPUT TYPE="RADIO" NAME="KELAMIN">WANITA<BR>
           


- Check Box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih (Checkbox)
syntax : <HTML>
            <HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
            <BODY>
            <FORM>
             BAHASA YANG DIKUASAI
            <INPUT TYPE="CHECKBOX" NAME="C#"C#
            <BR>
           <INPUT TYPE="CHECKBOX" NAME="java">Java
           </FORM>
           </BODY>
           </HTML>
 
- List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu
syntax : <HTML>
            <HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
            <BODY>
            <FORM>
            <SELECT NAME="FOOTBALL"
            <OPTION VALUE="MANCHESTER UNITED">MU
            <OPTION VALUE="AC MILAN">AC MILAN
            <OPTION VALUE="ARSENAL">ARSENAL
            <OPTION VALUE="LAZIO">LAZIO
            </SELECT>
            </FORM>
            </BODY>
            </HTML>
Catatan : Untuk membuat List, dibutuhkan tag tambahan yaitu tag <select> dan tag <option>. sedangkan attribut value digunakan untuk memberikan nama pada pilihan tersebut 
- Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form, Ada bermacam-macam button
syntax : <HTML>
            <BODY>
            <FORM>
            <INPUT TYPE="BUTTON" VALUE="KLICK">
            </FORM>
            </BODY>
            </HTML>
 
- Submit: digunakan untuk memanggil url, setelah input selesai dimasukan
syntax : <HTML>
            <BODY>
            <TABLE>
            <FORM ACTION="KIRIM.HTML" METHOD="POST">
            <H3>FORM INI AKAN MENGIRIM ISI INPUT KE FILE KIRIM.HTML</H3>
            <TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
            <TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
            <TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
            <INPUT TYPE="SUBMIT" VALUE="KIRIM">
            <INPUT TYPE="RESET" VALUE="HAPUS">
            </FORM>
            </TABLE>
            </BODY>
            </HTML>
- Password, digunakan untuk membuat inputan text yang berupa password dengan tampilan password pula
syntax :  <HTML>
             <BODY>
             <TABLE>
             <FORM ACTION="KIRIM.HTML" METHOD="POST">
             <H3>FORM INI AKAN MENGIRIM ISI<BR> INPUT KE FILE KIRIM.HTML</H3>
             <TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
             <TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
             <TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
             <TR><TD>PASSWORD</TD><TD>:</TD><TD><INPUT TYPE="PASSWORD" NAME="PASS"><BR>
             <INPUT TYPE="SUBMIT" VALUE="KIRIM">
             <INPUT TYPE="RESET" VALUE="HAPUS">
             </FORM>
             </TABLE>
             </BODY>
             </HTML>

Monday, March 7, 2011

Membuat Frame Dalam HTML

Frame merupakan salah satu tag dalam HTML yang berfungsi membagi satu halaman web menjadi beberapa halaman web yang dapat diatur sendiri baik pembagian baris maupun kolom. Frame dapat dibuat oleh tag <frameset> dan diimplementasikan pembagiannya dengan tag <frame>.
contoh syntaxnya : <FRAMESET BORDER=# {[ROWS | COLS]} = {#,[#[,...]]}>
                             <FRAMESET SRC="url" NAME="nameFrame">
                             </FRAMESET>

-Attribut src digunakan sebagai sumber halaman web dalam frame tersebut
-Attribut name digunakan untuk memberikan nama pada frame tersebut agar dapat ditunjuk atau ditarget oleh    link dan sejenisnya.
-Attribut rows adalah sebagai tanda bahwa pembagian frame berdasarkan baris (vertikal) 
-Attribut cols adalah sebagai tanda bahwa pembagian frame berdasarkan kolom (horizontal)
-Pembagian kolom atau baris dapat diimplementasikan berdasarkan persen (50%,65%,40%) atau pembagian rata(*)

Targeting Frame
Setelah kita membuat sebuah frame dan memberikannya nama, halaman dalam frame tersebut dapat ditunjuk oleh link dengan tag <a>.
coontoh : <HTML>
               <HEAD>
               <TITLE>HAL 1</TITLE>
               </HEAD>
               <BODY>
               <H1>INI HALAMAN 1</H1>
               <a href="HALAMAN3.HTML" target="pinggir">coba klick</a>
               </BODY>
               </HTML>

Koding ini berfungsi untuk menunjuk frame bernama Pinggir dengan halaman web halaman3.html yang telah dibuat sebelumnya. 
Catatan : Dengan asumsi Frame bernama pinggir telah dibuat.