Pemograman Web Dasar

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.

Sunday, February 27, 2011

Membuat Table dalam HMTL

Untuk membuat tabel dalam HTML, seperti sebelumnya dibutuhkan sebuah tag untuk menyusun sebuah tabel. Berikut merupakan tag-tag untuk membangun sebuah tabel.
<table> = tag utama untuk membuat sebuah tabel
<caption> = tag untuk membuat judul tabel
<tr> = tag untuk membuat baris dalam tabel
<th> = membuat heading dalam sebuah tabel
<td> = mengisi data dalam sebuah tabel sekaligus membuat kolom secara otomatis ketika data terisi

dalam tag <table> sendiri pun terdapat beberapa atribut pelengkap:
<bgcolor> = mengganti warna latar belakang tabel
<border> = mengatur ukuran bingkai pada tabel
<cellpadding> = mengatur ukuran kotak dimana data disimpan
<cellspacing> = mengatur jarak antar kotak data
<width> = mengatur ukuran lebar tabel
<height> = mengatur ukuran tinggi tabel
<align> dan <valign> = mengatur kerataan data(horizontal serta vertikal)
<rowspan> = menggabungkan 2 atau lebih baris menjadi satu
<colspan> = menggabungkan 2 atau lebih kolom menjadi satu

Sunday, February 20, 2011

Dasar - Dasar Dalam Pemrograman HTML

HTML merupakan bahasa pemograman web yang paling dasar dan yang paling mudah untuk dipelajari.
HTML sendiri merupakan kepanjangan dari Hyper Text Markup Language. Web yang didesain dari bahasa HTML sendiri merupakan web yang bersifat statis. Berikut merupakan tag - tag dasar dalam HTML.
<HTML> = merupakan Tag utama dari HTML yang merupakan penampung dari tag -tag lainnya
<HEAD> = Tag yang berfungsi untuk membuat judul (dengan tag <TITLE>)dan memberikan keterangan lainnya
<BODY> = Tag yang berisikan coding utama dari web yang akan didesain.
contoh : <HTML>
             <HEAD>
             <TITLE>Ini Judul</TITLE>
             </HEAD>
             <BODY>
               Bla Bla Bla
           </BODY>
             </HTML>
Mengubah Background Color
menggunakan attribut bgcolor dalam tag Body
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BGCOLOR="aqua">
Ini Isinya :)
</BODY>
</HTML>

Tag Tag dasar dalam HTML

<br> = berfungsi untuk membuat baris kosong / blank.
<p> dan <div> = berfungsi untuk membuat tampilan paragraf dalam suatu kumpulan teks.
<h> = merupakan tag heading yang akan membuat default font berubah berdasarkan heading tertentu
tag <h> dimulai dari yang terbesar (<h1>) sampai ukuran yang terkecil (<h6>)
<hr> = Tag yang berfungsi untuk membuat garis horizontal.
<sub> = memberikan efek subscript pada sebuah teks
<sup> = memberikan efek superscript pada sebuah teks
<tt> = memberikan efek mesin ketik pada sebuah teks. Tampilan mesin ketik
<del> = memberikan efek coretan pada sebuah teks. Efek strikethrought
<pre> = membuat tampilan teks sama seperti default tulisan dalam kode HTML nya
<acronym> = memberikan keterangan tambahan terhadap tulisan ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE

Sunday, February 13, 2011

Mebuat Bullet Numbering dan menyisipkan gambar dalam HTML

1Dalam HTML, kita juga dapat membuat format bullet and numbering seperti halnya dalam MS Word. Membuatnya tidaklah sulit namun dibutuhkan ketelitian.
contoh :
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
maka hasil yang akan terbentuk di web page akan
1. a
2. b
3. c
4. d
Untuk Bullet hampir sama dengan numbering, hanya saja ada sedikit perbedaan dalam penulisan kode
contoh :
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
maka hasilnya akan terlihat
• ini bullet satu
• ini bullet lagi
• yang ini juga bullet

Selain bullet and numbering kita juga dapat menyisipkan gambar ke dalam web page kita dengan kode berikut :
<img src="cat.jpg">
img src merupakan kode untuk meyisipkan gambar. Sedangkan cat.jpg adalh nama file gambar yang akan dimasukan.
Jika gambar berada dal suatu folder, dapat ditulis
<img src="./image/cat.jpg">
kata image menunjukan alamat dari sebuah folder