Modul Web Bikas

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.
S)
MODUL I
Dasar-dasar HTML
HTML singkatan dari Hypertext Mark-Up Language, merupakan sebuah dokumen yang menganut format hypertext, yang berarti setiap teks/gambar yang akan dimunculkan harus dituliskan dengan penandaan-penandaan teks. Simbol-simbol penanda itu disebut dengan tag. Sebagai contoh untuk menampilkan teks berikut ini: Harus dituliskan sbb: <B>Pemrograman Internet</B>
Pemrograman Internet
Tag <B></B> di atas berfungsi untuk menandai teks yang akan ditampilkan dengan cetak tebal. Untuk menuliskan teks dan symbol tag dilakukan dengan format umum seperti berikut : <tag atribut1=nilai1 atribut2=nilai2 atribut3=>Teks yang akan ditandai</tag> Contoh lain : <P align=center>Paragraf dengan rata tengah</P>
Bentuk Umum Dokumen HTML

Dokumen HTML terdiri sejumlah kumpulan tag-tag untuk menampilkan teks/gambar bahkan suara. Adapun karakateristik Umum dokumen HTML : 1. Dokumen HTML biasanya memiliki jenis ekstensi *.html atau *.htm. 2. Isi dokumen HTML di awali dengan tag <HTML> dan di akhiri dengan tag </HTML> 3. Secara umum dokumen HTML dibagi dalam dua bagian utama yaitu : Bagian HEAD Bagian ini merupakan kepala dokumen yang berisi tentang judul, versi HTML, BASE URL dokumen dll. Bagian BODY Bagian kedua ini berisi desain layout dokumen. Secara umum penulisan dokumen HTML adalah sebagai berikut : <HTML> <HEAD> kepala dokumen </HEAD> <BODY> Isi dokumen </BODY> </HTML>
http://agustinuschilalahi.blogspot.com
Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Contoh : <HTML> <HEAD> <TITLE>Dokumen HTML Pertama</TITLE> </HEAD> <BODY> <B>Dokumen HTML</B><br> Ini adalah contoh dokumen HTML-ku yang pertama! Hanya sekedar mencoba menampilkan tulisan dalam format <I>Hypertext</I>. </BODY> </HTML> Kode-kode di atas apabila ditampilkan di webbrowser :
Pembahasan: Dokumen di atas memiliki judul dokumen yaitu Dokumen HTML Pertama . dimana untuk mendefinisikan judul dokumen digunakan tag <TITLE></TITLE> yang harus dituliskan di dalam tag <HEAD> dan </HEAD>. Pada bagian isi dokumen yang ditampilkan diapit antara tag <BODY> dan </BODY>, tag <B>Dokumen HTML</B> akan dimuncul secara cetak tebal, kemudian tab <br> berfungsi untuk berpindah baris penulisan teks.
Lebih jauh dengan tag <BODY>

Tag <BODY> digunakan menampilkan desain layout halaman web. Tab <BODY> sendiri memiliki kelengkapan atribut di antaranya: BGCOLOR, berfungsi untuk menampilkan warna latar halaman Contoh pemakaian : <BODY BGCOLOR=RED> </BODY> BACKGROUND, berfungsi untuk menentukan file gambar/image dijadikan sebagai background halaman. Contoh : <BODY BACKGROUND=C:\data\latar.jpg> </BODY>

TEXT, berfungsi untuk mengubah warna tulisan/teks dalam dokumen secara menyeluruh. LINK, berfungsi untuk menentukan warna link dalam dokumen yang belum pernah dikunjungi (belum pernah diklik) ALINK, berfungsi untuk menentukan warna link dalam dokumen yang aktif. VLINK, berfungsi untuk menentukan warna link dalam dokumen yang telah terkunjungi.
Praktik: 1. Buatlah sebuah dokumen HTML dengan desain/layout berikut ini :
2. Modifikasilah halaman web di atas dengan pengubahan warna latar halaman menjadi BIRU. Sedangkan teks dokumen diubah menjadi warna PUTIH.

MODUL II
Memformat Dokumen, Karakter dan FONT

Memformat Dokumen
Untuk memformat dokumen digunakan tag-tag berikut ini : Tag <BR> Tag ini tidak memerlukan tag penutup, yang berfungsi untuk berpindah baris. Tag <CENTER> Tag ini digunakan untuk menentukan perataan tengah teks terhadap dokumen. Contoh : <CENTER>Belajar HTML</CENTER> Tag <P> Tag ini berfungsi untuk memformat paragraph/alinea. Adapun kelengkapan atribut-atribut dari tag ini adalah: - ALIGN, yang berfungsi untuk menentukan perataan teks paragraph secara rata kiri (LEFT), rata kanan (RIGHT) atau rata tengah (CENTER). Contoh pemakaian: <P ALIGN=RIGHT>Ini adalah teks yang ditulis dalam paragraph dengan perataan teks rata kanan</P>
<HTML> <HEAD><TITLE>Memformat Dokumen</TITLE></HEAD> <BODY> <P ALIGN="CENTER"><B>Memformat Paragraf</B></P> <P>Dalam HTML paragraf dapat diformat dengan menggunakan <P>, dimana teks yang dituliskan diletakkan antara <P> dan </P>.</P> <P>Paragraf juga dapat diatur perataannya yaitu rata kiri, tengah dan kanan. Untuk menentukan perataan paragraf digunakan atribut ALIGN. Sehingga penulisan tag-nya dapat dituliskan <P ALIGN="RIGHT"> Teks Paragraf </P>. </BODY> </HTML>
Jika ditampilkan akan tampak seperti berikut ini:
Tag <HR> Tag ini berfungsi untuk mendefinisikan garis horisontal dokumen. Sedangkan atribut-atribut yang didukung meliputi: - SIZE, untuk menentukan ketebalan garis (dalam ukuran piksel) Contoh pemakaian : <HR SIZE=2> - COLOR, digunakan untuk menentukan warna garis. Warna garis dapat diisi dengan RED, GREEN, BLUE, YELLOW dll, atau dengan memanfaatkan warna dalam bentuk Hexadesimal seperti : #00FF00 untuk wana hijau, #FF0000 untuk warna merah dsb. - WIDTH, digunakan untuk menentukan lebar garis (dalam satuan piksel atau persenatase). Contoh : <HR WIDTH=450> atau <HR WIDTH=80%> - NOSHADE, untuk menghilangkan efek tiga dimensi garis. Contoh pemakaian : <HR NOSHADE>
<HTML> <HEAD><TITLE>Memformat Dokumen</TITLE></HEAD> <BODY> <P ALIGN="CENTER"><B>Menampilkan Garis Horisontal</B></P> <HR> <HR COLOR=RED WIDTH=80%> <HR COLOR=BLUE SIZE=5 WIDTH=50%> <HR SIZE=50 COLOR=PINK WIDTH=400 ALIGN=RIGHT> <HR NOSHADE> </BODY> </HTML>
Jika dijalankan akan tampak tampilan sebagai berikut :
Tag <Hn>, dimana n=1,2,3,4,5,6 Berfungsi untuk mendefinisikan header (kepala/judul) dokumen. Atribut-atribut yang dimiliki yaitu: - ALIGN, yang digunakan untuk menentukan perataan teks header terhadap dokumen. Nilainya yaitu: LEFT, CENTER dan RIGHT.
<HTML> <HEAD><TITLE>Memformat Dokumen</TITLE></HEAD> <BODY> <P ALIGN="CENTER"><B>Menampilkan HEADING TEXT</B></P> <HR> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </BODY> </HTML>
Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:
Tag <PRE>

Berfungsi untuk memformat teks-teks dokumen agar tampilan/layout identik dengan layout yang disusun pada editornya. Sehingga karakater spasi (Space) dan Carriage Return (CR) akan ditampilkan apa adanya.
<HTML> <HEAD><TITLE>Memformat Dokumen</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Menggunakkan <PRE></H2> <HR> <PRE> Daftar Nilai Pemrograman Internet I Semester Genap Th Akademik 2006/2007 +------------+----------------------------------+---------+ | No Mhs | Nama Mahasiswa | Nilai | +------------+----------------------------------+---------+ | 05.1.00001 | Budiman Waluyo | 3.1 | | 05.1.00002 | Agus Suharja | 2.9 | | 05.1.00003 | Muhamand Yamin | 3.2 | | 05.1.00004 | Daniel Sukarman | 3.0 | +------------+----------------------------------+---------+ </PRE> </BODY> </HTML> Tampilan dari kode di atas adalah sebagai berikut :
Memformat Karakter
Untuk memformat karakter dapat digunakan Tag <B> Tag ini berfungsi untuk menentukan teks Tag <I> Tag ini berfungsi untuk menentukan teks Tag <U> Tag ini berfungsi untuk menentukan teks Tag <STRIKE> Tag ini berfungsi untuk menentukan teks Tag <TT> koleksi tag-tag berikut ini : yang tampil tercetak tebal. yang tampil tercetak miring yang tampil tercetak garis bawah. yang tampil tercetak garis tengah.

Tag ini berfungsi untuk menentukan teks yang tampil tercetak seperti huruf mesin ketik. Tag <SMALL> Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih kecil dibanding biasanya. Tag <BIG> Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih besar disbanding biasanya. Tag <SUB> Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks subskrip Tag <SUP> Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks superskrip
Contoh :
<html> <head> <title>Memformat Karakter</title> </head> <body> <H2>Memformat Karakter</H2><HR> Teks cetak <B>Tebal</B><BR> Teks cetak <I>Miring</I><BR> Teks cetak <U>Garis Bawah</U><BR> Teks cetak <STRIKE>Tebal</STRIKE><BR> Teks cetak <TT>Huruf Mesin Ketik</TT><BR> Teks cetak <SMALL>Lebih Kecil</SMALL><BR> Teks cetak <BIG>Lebih Besar</BIG><BR> Teks cetak H<SUB>2</SUB>SO<SUB>4</SUB><BR> Teks cetak X<SUP>3</SUP>+Y<SUP>2</SUP>=0 </body> </html>

Memformat FONT
Untuk memformat font digunakan tag <FONT>, adapun yang dipengaruhi oleh tag ini meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat dipakai untuk mengatur ketiga hal tersebut yaitu : SIZE, digunakan untuk menentukan ukuran font. COLOR, digunakan untuk menentukan warna font. FACE, digunakan untuk menentukan jenis atau bentuk font. Misal jenis font dapat dipakai yaitu : Arial, Verdana, Times New Romans, Courier dll. Contoh Penggunaan :
<HTML> <HEAD><TITLE>Memformat FONT</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Memformat FONT</H2> <HR> <FONT FACE="Arial Black" SIZE="5" COLOR="BLUE">Jenis FONT Arial Black dengan warna Biru dan Ukuran Font 5</FONT><BR> <FONT SIZE=4 FACE="Monotype Corsiva">Teks dengan FONT Monotype Corsiva dengan Ukuran Font 7</FONT> <BR> <FONT FACE="Verdana" COLOR="RED">Teks dengan FONT VERDANA dengan Ukuran Font default</FONT> </BODY> </HTML>
Tampilan dari kode-kode di atas adalah :

MODUL III
Menampilkan Gambar (Image) dan LINK

Menampilkan Gambar
Sebuah dokumen web akan lebih menarik dan interaktif jika isinya dihiasi dengan gambar-gambar. Adapun gambar-gambar yang ditampilkan haruslah dapat diterima oleh web browser, seperti format *.JPG dan *.GIF. Untuk menampilkan file gambar dapat digunakan dengan tag <IMG>. Tag ini memiliki atribut-atribut sebagai berikut : SRC, yang berfungsi untuk menentukan lokasi direktori gambar. Contoh pemakaiannya : ALT, yang berfungsi untuk menentukan keterangan gambar jika gambar gagal tampil. WIDTH, yang berfungsi untuk menentukan lebar gambar (dalam satuan pixel) HEIGHT, yang berfungsi untuk menentukan tinggi gambar (dalam satuan pixel). BORDER, yang berfungsi untuk menentukan ketebalan bingkai gambar. ALIGN, untuk menentukan perataan gambar terhadap dokumen. (Nilainya : LEFT dan RIGHT). Contoh :
<html> <head> <title>Menampilkan Gambar</title> </head> <body> <H2>Menampilkan Gambar</H2><HR> <IMG SRC="C:\Apache\PHP\php4.gif" ALT="Logo PHP4"> Hypertext Preprocessor(PHP)<HR> <IMG SRC="C:\Apache\PHP\php4.gif" ALT="Logo PHP4" ALIGN=RIGHT> Hypertext Preprocessor(PHP)<HR> <IMG SRC="C:\Apache\PHP\php4.gif" BORDER=3> Hypertext Preprocessor(PHP)<HR> <IMG SRC="C:\Apache\PHP\php4.gif" WIDTH=200 HEIGHT=200> Hypertext Preprocessor(PHP)<HR> </body> </body> </html>
Jika ditampilkan dengan web browser seperti berikut ini tampilannya :

Mendefinisikan LINK dan ANCHOR
Link adalah sebuah teks atau gambar yang menghubungkan antara satu halaman web dengan halaman web yang lainnya. Untuk mendefinisikan link digunakan tag <A>. Sedangkan atribut-atributnya adalah : HREF, digunakan untuk menentukan lokasi tujuan dari yang ditunjuk oleh link. Alamat tujuannya dapat berupa path-direktori atau alamat URL. Contoh penggunaan : <A HREF=http://www.google.co.id>Google Indonesia</A>
<HTML> <HEAD><TITLE>Halaman Satu</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Halaman Satu</H2> <HR> Ini adalah halaman satu, untuk menuju ke halaman berikutnya silakan <A HREF="haldua.html">klik disini!</A> atau dapat klik gambar berikut : <A HREF="haldua.html"><img src="C:/Apache/php/php4.gif"></A> </BODY> </HTML>
<HTML> <HEAD><TITLE>Halaman Dua</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Halaman Dua</H2> <HR> Ini adalah halaman dua, untuk kembali ke halaman berikutnya silakan <A HREF="halsatu.html">klik disini!</A> </BODY> </HTML>
NAME, digunakan untuk mendefinisikan anchor (Keterangan: Anchor adalah satu bagian dari dokumen yang ditandai untuk dijadikan sebagai tujuan dari link). Untuk mendefinisikan link yang menuju alamat anchor digunakan symbol karakter #. Contoh : Seumpama didefinisikan sebuah anchor dengan nama pertama pada halaman dokumen.html. <A NAME=atas>Bagian Atas</A> sehingga dapat dibuat link sbb: <A HREF=dokumen.html#atas> Adapun contoh lebih lengkap adalah sebagai berikut :
<HTML> <HEAD><TITLE>LINK dan ANCHOR</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Memanfaatkan Anchor</H2> <HR> <A NAME="atas"><H3>Bagian Atas</H3></A> Ini adalah bagian atas dari dokumen! Untuk menuju ke bagan bawah dokumen silakan klik <A HREF="#bawah">ke bawah</A> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A NAME="bawah"><H3>Bagian Bawah</H3></A> Ini adalah bagian bawah dokumen, untuk kembali ke atas silakan klik <A HREF="#atas">ke atas</A> </BODY> </HTML>

MODUL IV
TABLE
Memformat TABLE
Format tabel di html memiliki banyak manfaat salah satunya untuk menampilkan data dalam bentuk baris dan kolom, kemudian juga untuk mengatur layout dokumen web sehingga peletakan teks maupun gambar lebih mudah diatur. Untuk memformat tabel digunakan serangkaian tag meliputi <TABLE>, <TR>, <TH>, dan <TD>. Adapun aturan pemanfaatan tag-tag di atas dapat digambarkan sebagai berikut: . <TABLE BORDER=1> <TR> <TH>Judul kolom1</TH> <TH>Judul kolom2</TH> </TR> <TR> <TD>Data1</TD> <TD>Data2</TD> </TR> </TABLE> . Sehingga apabila potongan kode di atas ditampilkan akan terlihat seperti berikut ini:
Tag <TABLE>, <TR>, <TH> dan <TD> memiliki atribut-atribut sebagai berikut : BORDER, digunakan untuk menentukan ketebalan bingkai table. BGCOLOR, digunakan untuk menentukan warna latar table/baris/sel. BACKGROUND, digunakan untuk menentukan file gambar dijadikan sebagai latar table/baris/sel. ALIGN, berfungsi untuk menentukan perataan table secara horisontal terhadap dokumen atau perataan teks pada baris atau sel secara horisontal.

VALIGN, berfungsi untuk menentukan perataan secara vertical terhadap teks pada baris dan sel. WIDTH, digunakan untuk menentukan lebar table/sel (dalam satuan pixel atau persentase) HEIGHT, digunakan untuk menentukan tinggi table atau baris (dalam satuan pixel atau persentase) CELLPADDING, berfungsi untuk menentukan kerapatan teks dengan bingkai table. CELLSPACING, berfungsi untuk menentukan kerapatan antar sel. ROWSPAN, berfungsi untuk menggabungkan beberapa sel baris menjadi satu sel. COLSPAN, berfungsi untuk menggabungkan beberapa sel kolom menjadi satu sel. Contoh :
<HTML> <HEAD> <TITLE>Tabel kedua</TITLE> </HEAD> <BODY> <H2>Daftar Nilai Pemrograman Internet I</H2> <TABLE BORDER=1 WIDTH=80%> <TR> <TH ROWSPAN=2>NIM</TH><TH ROWSPAN=2>Nama Mahasiswa</TH><TH COLSPAN=3>Nilai</TH> </TR> <TR> <TH>TUGAS</TH><TH>MID</TH><TH>UAS</TH> </TR> <TR> <TD>04.2.00001</TD><TD>Ajie Burhanuddin</TD><TD>89</TD><TD>67</TD><TD>75</TD> </TR> <TR> <TD>04.2.00002</TD><TD>Shahrani</TD><TD>96</TD><TD>75</TD><TD>85</TD> </TR> <TR> <TD>04.2.00006</TD><TD>Utomo Putro</TD><TD>80</TD><TD>87</TD><TD>85</TD> </TR> <TR> <TD>04.2.00008</TD><TD>Kukuh Perkoso</TD><TD>90</TD><TD>68</TD><TD>79</TD> </TR> </TABLE> </BODY> </HTML>

MODUL V
FORM
Mendefinisikan FORM
Form di HTML dipergunakan sebagai media interaksi antar user dengan program, sehingga dengan FORM website yang dibuat tidak menyajikan media yang pasif. Adapun untuk membuat FORM di HTML digunakan tag <FORM>. Tag ini berfungsi sebagai obyek penampung (container) bagi obyek-obyek lainnya. Atribut-atribut yang dimiliki FORM adalah sebagai berikut: NAME, berfungsi untuk mendefinisikan nama obyek form. METHOD, dipergunakan untuk menentukan cara pengolahan data yang inputkan dalam form. ACTION, digunakan untuk menentukan lokasi/alamat file (program server) yang akan mengolah data isian form. Nilai yang dapat diisikan meliputi : POST dan GET. Sedangkan Obyek-obyek yang dapat diletakkan dalam media FORM adalah sebagai berikut: 1. Obyek <TEXTAREA> Obyek <TEXTAREA> merupakan sebuah komponen FORM berbentuk kotak teks multibaris. Atribut-atribut komponen ini yaitu : NAME, digunakan untuk memberi identitas obyek textarea. ROWS, digunakan untuk menentukan jumlah baris teks yang tampil dalam kotak. COLS, digunakan untuk menentukan lebar kotak atau jumlah karakter yang ditampilkan perbarisnya. Contoh :
<HTML> <HEAD> <TITLE>Form 1</TITLE> </HEAD> <BODY> <H2>FORM dan TEXTAREA</H2> <HR SIZE=1> <FORM NAME="Form1"> Isikan Komentar Anda!<BR> <TEXTAREA NAME=komentar COLS=40 ROWS=10></TEXTAREA> </FORM> </BODY> </HTML>
2. Obyek <SELECT> Obyek <SELECT> merupakan komponen FORM yang berbentuk daftar pilihan menyerupai COMBOBOX dan LISTBOX. Atribut-atribut yang dimiliki di antaranya yaitu : NAME, digunakan untuk memberi identitas pada obyek SELECT. SIZE, digunakan untuk menentukan jumlah item pilihan yang ditampilkan pada obyek. MULTIPLE, digunakan untuk menentukan item pilihan dapat dipilih lebih dari satu. Untuk mendefinisikan item-item pilihan pada komponen SELECT digunakan tag <OPTION>, dimana tag ini memiliki kelengkapan atribut seperti berikut ini : VALUE, digunakan untuk menentukan identitas tiap item dalam komponen. SELECTED, digunakan untuk menentukan item yang terpilih secara default. Contoh :
<HTML> <HEAD> <TITLE>Form 2</TITLE> </HEAD> <BODY> <H2>FORM dan SELECT</H2> <HR SIZE=1> <FORM NAME="Form2"> Pilihan Bulan Lahir Anda : <SELECT NAME=bulan> <OPTION VALUE=1 SELECTED>Januari</OPTION> <OPTION VALUE=2>Februari</OPTION> <OPTION VALUE=3>Maret</OPTION> <OPTION VALUE=4>April</OPTION> <OPTION VALUE=5>Mei</OPTION> <OPTION VALUE=6>Juni</OPTION> <OPTION VALUE=7>Juli</OPTION> <OPTION VALUE=8>Agustus</OPTION> <OPTION VALUE=9>September</OPTION> <OPTION VALUE=10>Oktober</OPTION> <OPTION VALUE=11>November</OPTION> <OPTION VALUE=12>Desember</OPTION> </SELECT> </FORM> </BODY> </HTML>
3. Obyek <INPUT> Obyek <INPUT> digunakan untuk mendefinisikan beragam bentuk input meliputi kotak teks, daftar item pilihan, hidden input dan berbagai macam tombol. Tag <INPUT> memiliki berbagai macam atribut yang dapat digunakan menentukan bentuk-bentuk input: NAME, berfungsi untuk menentukan nama obyek input TYPE, berfungsi untuk menentukan jenis input, nilai yang dapat dipasangkan yaitu: 1. TEXT, digunakan untuk menentukan bentuk kotak teks satu baris. 2. PASSWORD, digunakan untuk menentukan bentuk input kotak password. 3. RADIO, digunakan untuk menentukan bentuk input daftar pilihan, dimana item yang dapat pilih hanya satu item saja. 4. CHECKBOX, digunakan untuk menentukan bentuk input daftar pilihan, dimana item yang dapat dipilih bisa lebih dari satu item. 5. SUBMIT, digunakan untuk menentukan bentuk input tombol yang memiliki fungsi untuk memicu data dalam form diproses. 6. RESET, digunakan untuk menentukan bentuk input tombol yang memiliki fungsi data dalam form akan direset. 7. BUTTON, digunakan untuk menampillkan bentuk input tombol yang mana fungsi tombol tersebut belum ditentukan. 8. HIDDEN, untuk menentukan bentuk input tersembunyi (tidak ditampilkan secara eksplisit dalam dokumen) VALUE, - untuk jenis input TEXT dan PASSWORD digunakan untuk menentukan nilai dalam kotak teks - untuk jenis input RADIO dan CHECKBOX berfungsi untuk memberi identitas tiap pilihan item - untuk jenis item SUBMIT, RESET dan BUTTON berfungsi untuk menentukan judul tombol. SIZE (hanya untuk tipe input TEXT dan PASSWORD) Berfungsi untuk menentukan ukuran lebar kotak teks.

MAXLENGTH (hanya untuk tipe input TEXT dan PASSWORD) Berfungsi untuk menentukan kapasitas maksimal teks yang dapat diinputkan CHECKED (hanya untuk tipe input RADIO dan CHECKBOX) Berfungsi untuk memberi tanda terhadap item yang terpilih secara default. Contoh :
<HTML> <HEAD><TITLE>Form 3</TITLE></HEAD> <BODY> <H2>FORM dan INPUT</H2> <HR SIZE=1> Isikan Data Diri Anda pada Formulir berikut ini : <BR> <PRE> <FORM NAME="Form2"> Nama : <INPUT TYPE=TEXT NAME=nama SIZE=50> Password : <INPUT TYPE=PASSWORD NAME=sandi MAXLENGTH=8> Gender : <INPUT TYPE=RADIO NAME=sex VALUE=L CHECKED>Laki-Laki <INPUT TYPE=RADIO NAME=sex VALUE=P>Perempuan Bidang yang disukai : <INPUT TYPE=CHECKBOX NAME=b1 VALUE=EKON>Ekonomi <INPUT TYPE=CHECKBOX NAME=b2 VALUE=ELEK>Elektronik <INPUT TYPE=CHECKBOX NAME=b3 VALUE=ENTE>Entertainment <INPUT TYPE=CHECKBOX NAME=b4 VALUE=INFO>Informatika <INPUT TYPE=CHECKBOX NAME=b5 VALUE=PEND>Pendidikan <INPUT TYPE=CHECKBOX NAME=b6 VALUE=OTOM>Otomotif <HR SIZE=1> <INPUT TYPE=SUBMIT VALUE=Kirim><INPUT TYPE=RESET VALUE=Reset> </FORM> </PRE> </BODY> </HTML>
Hasil tampilan adalah sebagai berikut :

Modul Web Bikas

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web Bikas

Diunggah oleh

Hak Cipta:

Format Tersedia

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.

Bentuk Umum Dokumen HTML

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Lebih jauh dengan tag <BODY>

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Praktik: 1. Buatlah sebuah dokumen HTML dengan desain/layout berikut ini :

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Memformat Dokumen, Karakter dan FONT

Jika ditampilkan akan tampak seperti berikut ini:

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Jika dijalankan akan tampak tampilan sebagai berikut :

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Tampilan dari kode-kode di atas adalah :

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Menampilkan Gambar (Image) dan LINK

Jika ditampilkan dengan web browser seperti berikut ini tampilannya :

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Blog Ilmu Komputer Agustinus Silalahi(B.I.K.A.S)

Hasil tampilan adalah sebagai berikut :

Anda mungkin juga menyukai