BLOG PEMROGRAMAN WEB: Maret 2010

Rabu, 24 Maret 2010

Minggu ke-7

CSS Bagian 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:

Minggu, 21 Maret 2010

Minggu ke-6

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>

Selasa, 09 Maret 2010

Minggu ke-5

Jenis-Jenis Masukan Dalam Form

Text,digunakan untuk memasukan suatu nilai untuk dikirimkan kepada server, nilai yang dimasukan dapat berupa angka ataupun teks
Radio, menyediakan beberapa pilihan, hanya dapat memilih satu dari pilihan yang dipilih
Check Box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih
List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu
Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form, Ada bermacam-macam button
Submit: digunakan untuk memanggil url, setelah input selesai dimasukan
Reset: digunakan untuk menginisialisasi setiap elemen form
Button: digunakan untuk membuat form lebih interaktif, untuk memanggil script yang ada dalam file html
Image, digunakan sebagai pengganti button, berupa button yang berbentik gambar
Text area, dugunakan untuk memasukan datadalam bentuk teks berupa memo

Setiap jenis masukan dalam formulir mempunyai tag-tag sendiridengan masing-masing atributnya.

INPUT TEXT

code htmlnya:

<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>
</BODY>
</HTML>

CHECKBOX

code htmlnya:

<HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
BAND KESUKAAN SAYA
<INPUT TYPE="CHECKBOX" NAME="JRS">J-ROCKS
<BR>
<INPUT TYPE="CHECKBOX" NAME="PETR">PETERPAN
</FORM>
</BODY>
</HTML>

RADIO

code htmlnya:

<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>

STATUS:<BR>
<INPUT TYPE="RADIO" CHECKED NAME="STAT">LAJANG
<BR>
<INPUT TYPE="RADIO" CHECKED NAME="STAT">MENIKAH
</FORM>
</BODY>
</HTML>

INPUT DROPDOWN

code htmlnya:

<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>

BUTTON

code htmlnya:

<HTML>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="KLICK">
</FORM>
</BODY>
</HTML>

FIELDSET

code htmlnya:

<HTML>
<BODY>
<FIELDSET>
<LEGEND>
INFORMASI KESEHATAN:
</LEGEND>
<FORM>
TINGGI<INPUT TYPE="TEXT" SIZE="5">
BERAT<INPUT TYPE="TEXT" SIZE="5">
</FORM>
</FIELDSET>
</BODY>
</HTML>

SUBMIT

code htmlnya:

<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>

JIKA PADA TAG METHOD DIISI OLEH POST MAKA SEMUA DATA YANG DITULIS TIDAK AKAN TERBUKA PADA BAGIAN HALAMAN URL SEDANGKAN JIKA DIISI OLEH GET MAKA PADA JENDELA URL AKAN DITULISKAN DATA YANG DITULIS.

PASSWORD

code htmlnya:

<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>

Untuk membuat password kita tinggal mengubah pada tipe input menjadi PASSWORD

Sabtu, 06 Maret 2010

Minggu ke-4

FRAMES DI HTML

Minggu ini kita membahas frame pada html, frame ini bisa dibilang yaitu membuat banyak file html di dalam satu jendela browser, ini sangat berguna ketika ada halaman html yang ingin selalu kita tampilkan pada jendela browser.

untuk lebih jelasnya berikut contoh frame:
sintaksnya:
<FRAMESET BORDER=# {[ROWS | COLS]} = {#,[#[,...]]}>
<FRAMESET SRC="url" NAME="nameFrame">
</FRAMESET>

Target Frame:

Nama frame predefines: _self, _top, _parent, _blank, sering digunakan untuk menunjukan target penampilan dari suatu link.

_self: Digunakan apabila target frame adalah frame tempat link berada
_top : Digunakan apabila target frame adalah windows tempat frame berada
_parent : Target frame adalah setingkat diatas frame link berada
_blank : Digunakan untuk membuat windows / tab baru

FRAME KOLOM:

Untuk menghasilkan seperti halaman diatas pertama yang harus dilakukan adalah membuat file halaman html untuk tiap halamannya:
halaman 1:

<HTML>
<HEAD>
<TITLE>HAL 1</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 1</H1>
</BODY>
</HTML>

halaman 2:

<HTML>
<HEAD>
<TITLE>HAL 2</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 2</H1>
</BODY>
</HTML>

halaman 3:

<HTML>
<HEAD>
<TITLE>HAL 3</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 3</H1>
</BODY>
</HTML>

lalu setelah selesai membuat semua file yang digunakan lalu kita membuat framenya:

<HTML>
<FRAMESET COLS="25%,50%,*">
<FRAME SRC="HALAMAN1.HTML">
<FRAME SRC="HALAMAN2.HTML">
<FRAME SRC="HALAMAN3.HTML">
</FRAMESET>
</HTML>

FRAME BARIS:

Sama seperti frame kolom harus membuat file-file terlebih dahulu disinilah perbedaannya:
<HTML>
<FRAMESET ROWS="25%,50%,*">
<FRAME SRC="HALAMAN1.HTML">
<FRAME SRC="HALAMAN2.HTML">
<FRAME SRC="HALAMAN3.HTML">
</FRAMESET>
</HTML>

pada tag FRAMESET pada kolom kita menuliskan COLS sedangkan untuk membuat baris kita menuliskan ROWS

FRAME CAMPURAN:

code html untuk frame campuran:

<HTML>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="HALAMAN1.HTML">
<FRAMESET COLS="25%,75%,*">
<FRAME SRC="HALAMAN2.HTML">
<FRAME SRC="HALAMAN3.HTML">
</FRAMESET>
</HTML>

terdapat FRAMESET ROWS dan FRAMESET COLS

FRAME NAVIGASI
Contoh ini mendemonstrasikan bagaimana membuat satu frame navigasi, berisi sebuah daftar link dengan frame yang kedua sebagai target. Frame yang kedua menapilkan dokumen yang di-link. Ketika mengklick coba klick maka pada frame yang kedua akan memunculkan frame ketiga.

MENJADI SEPERTI DIBAWAH:

Untuk membuat file seperti diatas perhatikan code berikut:

ini adalah file framenya:
<HTML>
<FRAMESET COLS="25%,50%,*">
<FRAME SRC="HALAMAN1.HTML">
<FRAME SRC="HALAMAN2.HTML" name="pinggir">
</FRAMESET>
</HTML>

ada kata name="pinggir"> ini berarti nama file kita bernama pinggir, dan akan dibuka pada frame ini, lalu:

ini adalah tujuannya:
<HTML>
<HEAD>
<TITLE>HAL 1</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 1</H1>
<a href="HALAMAN3.HTML" target="pinggir">coba klick</a>
</BODY>
</HTML>

harus menuliskan target="pinggir" ini berarti file yang akan dibuka adalah file yang ini

BLOG PEMROGRAMAN WEB

Rabu, 24 Maret 2010

Minggu ke-7

Minggu, 21 Maret 2010

Minggu ke-6

Selasa, 09 Maret 2010

Minggu ke-5

Sabtu, 06 Maret 2010

Minggu ke-4

Mengenai Saya

Link

Postingan Sebelumnya

Arsip