2 HTML (HyperText Markup Language)
Merupakan bahasa standard yang digunakan untuk membuat dokumen yang bisa diakses melalui web browser atau untuk menulis halaman web. Untuk menuliskan kode-kode HTML diperlukan Editor (Notepad, PHPEditor, EditPlus dan lain-lain).
Kegunaan HTML :
- Mempublikasikan dokumen secara online, sehingga bisa diakses dari seluruh dunia.
- Mengatur tampilan dari halaman web dan isinya.
- Membuat Form, yang digunakan untuk menangani pendaftaran atau transaksi secara online.
- Menambahkan objek-objek seperti image, audio dan video.
Command HTML biasanya disebut Tag, digunakan untuk menentukan tampilan dari dokumen HTML, dengan format : <awal tag> … </akhir tag>. Tag tidak case sensitive, jadi penulisannya dapat menggunakan huruf besar maupun kecil, misalnya : <HTML> atau <html> keduanya menghasil output yang sama.
Berikut ini adalah struktur dokumen HTML :
<HTML>
Kepala
dokumen HTML ditandai dengan tag HEAD.
<HEAD>
Pada
bagian kepala, untuk membuat judul halaman web dengan menambahkan tag
TITLE didalamnya. 
<TITLE>
………
Tag HTML, untuk
mengawali dan mengakhiri setiap dokumen HTML.
</TITLE>
</HEAD>
Bagian
badan/body dokumen HTML biasa
digunakan untuk menampilkan text, image link
dan semua yang di-tampilkan pada halaman
web ditandai dengan tag BODY, biasanya juga disertai dengan atribut
diikuti nilai atributnya. Contoh : <body bgcolor=purple> artinya
backgroud bagian body menjadi
berwarna ungu/purple.
<BODY>
………
</BODY>
</HTML>
Contoh sederhana
dokumen HTML : (WebPertamaku.html)
<HTML>
<HEAD>
<TITLE> Halaman Web Pertamaku </TITLE>
</HEAD>
<BODY> Bagian badan halaman web pertamaku </BODY>
</HTML>
Nama berkas ( WebPertamaku.html )
BODY
TITLE
Gambar 1.2 Tampilan program
sederhana dokumen HTML
Aturan dalam menuliskan tag-tag HTML yaitu :
-
Tag ditulis dengan format diawali tanda <
dan diakhiri tanda >, misalnya : <HTML>.
- Tidak boleh ada spasi kosong setelah tanda <, misalnya : <TITLE> tidak boleh dituliskan dengan < TITLE>.
- Tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi keduanya.
I.2.1 Elemen-elemen
dasar HTML.
I.2.1.1 Heading (<h1> sampai <h6>)
Untuk menentukan ukuran dari suatu berkas
atau teks.
Contoh programnya : (UkuranHeading.html)
<HTML>
<HEAD>
<TITLE>Tampilan
Ukuran Heading</TITLE>
</HEAD>
<BODY
BGCOLOR=FUCHSIA>
<H1> Heading Satu </H1>
<H2> Heading Dua </H2>
<H3> Heading Tiga </H3>
<H4> Heading Empat </H4>
<H5> Heading
<H6> Heading Enam </H6>
<H2> Heading Dua </H2>
</BODY>
</HTML>
Gambar 1.3 Tampilan program ukuran
Heading
I.2.1.2 Paragraf (<p>)
Digunakan membentuk suatu paragraf.
Contoh programnya : (Paragraf.html)
<HTML>
<HEAD>
<TITLE>Penggunaan Tag Paragraf</TITLE>
</HEAD>
<BODY>
<H3> Definisi Web Browser dan Web Server
</H3>
<P>
Web Browser adalah software yang diinstal di komputer klien
yang berfungsi untuk menterjemahkan kode HTML halaman web.
</P>
<P>
Web Server adalah server yang melayani akan permintaan
halaman web.
</P>
</BODY>
</HTML>
Gambar 1.4 Tampilan penggunaan tag
paragraf
I.2.1.3 List Item (<li>)
Untuk mengelompokan data atau daftar, baik
yang berurutan (<ol>
ordered list) maupun yang tidak berurutan (<ul> unordered list).
Tabel 1.1 Arti atribut pada list
item, ordered list dan unordered list
Tag |
Atribut |
Nilai |
Keterangan |
|
<li> |
|
|
Digunakan untuk mengelompokan data baik yang berurutan maupun yang tidak berurutan |
|
<ol> |
Type Start |
I i A a n |
Angka romawi besar Angka romawi kecil Huruf besar Huruf kecil Angka pertama |
|
<ul> |
Type |
squre disc circle |
Bullet Kotak Bullet Titik Bullet Lingkaran |
<HTML>
<HEAD>
<TITLE>
Jadwal Praktikum </TITLE>
</HEAD>
<BODY>
<H3>Jadwal
Praktikum Di Lab. Pemrograman STMIK Akakom</H3>
<OL
START="1" TYPE="I">
<LI>SENIN</LI>
<OL
TYPE="A">
<LI>
Pemrograman Visual MI_1</LI>
<LI>
Struktur Data SI_1</LI>
<LI>
Grafika Komputer MI_1</LI>
</OL>
<LI>SELASA</LI>
<OL
TYPE="I">
<LI>
Pemrograman Visual MI_2</LI>
<LI>
Pemrograman Web TI_1</LI>
<LI>
Pemrograman Web MI_2</LI>
</OL>
<LI>RABU</LI>
<OL
TYPE="A">
<LI>
Pemrograman Berorientasi Objek TI_2</LI>
<LI>
Pemrograman Web TI_4</LI>
<LI>
Algoritma Pemrograman TI_2</LI>
</OL>
<LI>KAMIS</LI>
<OL
START="2" TYPE="I">
<LI>
Pemrograman Berorientasi Objek MI_3</LI>
<LI>
Algoritma Pemrograman TI_3</LI>
<LI>
Pemrograman Berorientasi Objek MI_1</LI>
</OL>
<LI>JUMAT</LI>
<UL
TYPE=square>
<LI>
Pemrograman Visual MI_4</LI>
<LI>
Struktur Data SI_1</LI>
<LI>
Pemrograman Basisdata MI_1</LI>
</UL>
<LI>SABTU</LI>
<UL
TYPE=circle>
<LI>
Pemrograman Basisdata MI_2</LI>
<LI>
Struktur Data TI_1</LI>
<LI>
Pemrograman Basisdata MI_3</LI>
</UL>
</BODY>
</HTML>
Gambar 1.5 Tampilan program
pengelompokan data
I.2.1.4 Pemformatan teks pada halaman (page)
Tabel 1.2 Arti atribut pada
pemformatan halaman
Tag |
Atribut |
Keterangan |
|
<br> |
|
Digunakan untuk memulai baris baru pada dokumen HTML. |
|
<font> |
color size face |
Menentukan warna font, dapat menggunakan nama warna (green, blue) atau dalam format bilangan hexadesimal (#000000 - #ffffff) Menentukan ukuran font dari 1 –7 . Menentukan jenis font (Courier New, Mono). |
|
<center> |
|
Mengatur posisi teks agar berada ditengah |
|
<right> |
|
Mengatur posisi teks agar rata kanan. |
|
<left> |
|
Mengatur posisi teks agar rata kanan. |
|
<b> |
|
Menebalkan cetakan teks |
|
<i> |
|
Menampilkan teks dengan bentuk tulisan miring |
|
<u> |
|
Menambahkan garis bawah pada teks |
|
<sup> |
|
Textnya di tulis diatas. |
|
<sub> |
|
Textnya dibawah garis. |
|
<small> |
|
Menampilkan teks lebih kecil daripada ukuran normal |
|
<big> |
|
Menampilkan teks lebih besar daripada ukuran normal |
|
<tt> |
|
Menampilkan teks seperti ketikan menggunakan mesin ketik |
|
<marquee> |
|
Membuat teks bergerak |
Contoh programnya : (PemformatanTeks.html)
<HTML>
<HEAD>
<TITLE>Pemformatan
Text</TITLE>
</HEAD>
<BODY
BGCOLOR="AQUA">
<P><FONT
COLOR="9966FF" SIZE="6"><CENTER>Konsep Basis
Data</P></CENTER></FONT>
<CENTER><I><U><FONT
COLOR="4466FF" SIZE="3">
Adalah
suatu koleksi data komputer yang terintegrasi, diorganisasikan dan disimpan
dalam suatu cara yang memudahkan pengambilan kembali. Penggunaan basis data ini
dimaksudkan untuk mengatasi problem pada sistem yang memakai pendekatan
berbasis berkas.
</CENTER></I></U></FONT>
<B><P><marquee><FONT
COLOR="GREE" SIZE="5">Perangkat Lunak Basis
Data</B></marquee></P></FONT>
<LEFT><B><FONT
COLOR="BROWN" SIZE="3" FACE="COURIER NEW">
Adalah
perangkat lunak sistem yang memungkinkan para pemakai membuat, memelihara,
mengontrol dan mengakses basis data dengan cara yang praktis dan efisien. DBMS
dapat digunakan untuk mengakomodasikan berbagai macam pemakai yang memiliki
kebutuhan akses yang berbeda-beda. Menampilkan teks seperti ketika menggunakan
mesin ketik....
</LEFT></B></FONT>
</BODY>
</HTML>
Gambar 1.6 Tampilan program
pemformatan teks
Pemberian warna pada atribut color, bgcolor, dan text dapat mengikuti aturan berikut :
Ţ Menggunakan nama warna.
Ţ Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”.
Tabel 1.3 Tabel nilai warna
|
Warna |
RGB |
Warna |
RGB |
Warna |
RGB |
Warna |
RGB |
|
aqua |
00FFFF |
gray |
808080 |
silver |
C0C0C0 |
navy |
80 |
|
black |
000000 |
green |
008000 |
teal |
8080 |
olive |
808000 |
|
blue |
0000FF |
lime |
00FF00 |
yellow |
FFFF00 |
purple |
800080 |
|
fuchsia |
FF00FF |
maroon |
800000 |
white |
FFFFFF |
red |
FF0000 |
I.2.1.5 Membuat Tabel
Untuk membuat tabel pada halaman HTML, menggunakan tag berikut :
Tabel 1.4 Tabel tag untuk membuat tabel pada halaman HTML
|
Tag |
Keterangan |
|
<table> … </table> |
Membuat table dan sebagai tanda awal dan akhir table |
|
<tr> … </tr> |
Membuat baris dalam table |
|
<td> … </td> |
Membuat kolom (sel) |
|
<th> … </th> |
Membuat judul kolom |
|
<caption> … </caption> |
Membuat judul pada table |
Tabel 1.5 Tabel atribut-atribut
yang ada dalam tag <table>
|
Atribut |
Keterangan |
|
border |
Menampilkan garis table dengan memberikan nilai untuk BORDER |
|
bgcolor |
Membuat warna latar belakang table |
|
height |
Mengatur tinggi table (tinggi sel) |
|
width |
Mengatur lebar sel |
|
cellspacing |
Mengatur jarak bagian sel terhadap tepi dalam bingkai table |
|
cellpadding |
Mengatur jarak teks terhadap tepi kiri |
Tabel 1.6 Tabel atribut-atribut
yang digunakan dalam <th>,
<tr>, dan <td>
|
Atribut |
Fungsi |
|
rowspan |
digunakan dalam <td>. atribut ini digunakan untuk menggabungkan beberapa baris sel |
|
colspan |
digunakan dalam <th> atau <td>. berfungsi menggabungkan beberapa sel dalam satu baris |
|
align |
mengatur peletakan dengan memberikan nilai justify, left, center, atau right |
|
valign |
mengatur teks menurut posisi vertikal dengan memberikan nilai baseline, top, middle, atau bottom |
Contoh programnya : (Tabel.html)
<HTML>
<HEAD>
<TITLE>Penggunaan Tabel
Text</TITLE>
</HEAD>
<BODY >
<TABLE BGCOLOR="AQUA"
WIDTH="62%" BORDER="10" CELLSPACING="1"
CELLPADDING="8">
<CAPTION>
<FONT SIZE="4"
COLOR="BLUE">Daftar Penerimaan Mahasiswa STMIK
A<FONT SIZE="6"
COLOR="FUCHSIA">K</FONT>akom
</CAPTION>
<TR>
<TD
ROWSPAN="2" ALIGN="CENTER"
VALIGN="MIDDLE"><B>
<FONT COLOR="RED">Tahun
Akademik</FONT></B></TD>
<TD COLSPAN="5" HEIGHT="50"
ALIGN="CENTER" VALIGN="TOP">
<B><FONT
COLOR="FF0000">Jurusan</FONT></B></TD>
<TR ALIGN="CENTER">
<TD><FONT
COLOR="GREEN"><B>Teknik Informatika</TD>
<TD><FONT
COLOR="GREEN"><B>Sistem Informasi</TD>
<TD><FONT
COLOR="GREEN"><B>Manajemen Informatika</TD>
<TD><FONT
COLOR="GREEN"><B>Teknik Komputer</TD>
<TD><FONT
COLOR="GREEN"><B>Komputer Akuntansi</TD>
</TR>
</TR>
<TR>
<TD><B><FONT
COLOR="YELLOW">2000/2001</B></TD>
<TD
ALIGN="CENTER">300</TD>
<TD
ALIGN="CENTER">100</TD>
<TD
ALIGN="CENTER">400</TD>
<TD
ALIGN="CENTER">75</TD>
<TD ALIGN="CENTER">80</TD>
</TR>
<TR>
<TD><B><FONT
COLOR="YELLOW">2001/2002</B></TD>
<TD
ALIGN="CENTER">325</TD>
<TD
ALIGN="CENTER">75</TD>
<TD
ALIGN="CENTER">375</TD>
<TD
ALIGN="CENTER">100</TD>
<TD
ALIGN="CENTER">75</TD>
</TR>
<TR>
<TD><B><FONT
COLOR="YELLOW">2002/2003</B></TD>
<TD
ALIGN="CENTER">350</TD>
<TD
ALIGN="CENTER">80</TD>
<TD
ALIGN="CENTER">375</TD>
<TD
ALIGN="CENTER">75</TD>
<TD
ALIGN="CENTER">80</TD>
</TR>
<TR>
<TD><B><FONT COLOR="YELLOW">2003/2004</B></TD>
<TD
ALIGN="CENTER">500</TD>
<TD
ALIGN="CENTER">100</TD>
<TD
ALIGN="CENTER">450</TD>
<TD
ALIGN="CENTER">100</TD>
<TD
ALIGN="CENTER">80</TD>
</TR>
<TR>
<TD><B><FONT
COLOR="YELLOW">2004/2005</B></TD>
<TD
ALIGN="CENTER">550</TD>
<TD
ALIGN="CENTER">100</TD>
<TD
ALIGN="CENTER">450</TD>
<TD
ALIGN="CENTER">125</TD>
<TD
ALIGN="CENTER">80</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Gambar 1.7 Tampilan contoh program
tag tabel
I.2.1.6 Membuat Hyperlink
Anchor tag <a href> … </a>, digunakan untuk menentukan hyperlink dalam dokumen HTML. Properti href, untuk menentukan tujuan dari hyperlink tersebut.
1. Link Address.
-
Absolute
Address, merupakan full internet address (URL) yang meliputi protocol, network location, path
dan nama file, misalnya : <A
HREF="http://www. ilmukomputer.com/index.html">Informasi lain
</A> <BR>.
-
Relatif
Address, merupakan URL yang tidak menyebutkan protocol dan network location-nya
(hanya path dan nama filenya), misalnya
: <A HREF="..\Link\Tabel1.html">Data
penerimaan mahasiswa baru STMIK Akakom <BRbr>
2. Link Dokument.
-
Link ke dokumen lain, misalnya : <A HREF="Hyperlink2.html">Klik
disini untuk melihat dokumen ke 2</A> <BR>
-
Link ke section
tertentu dalam satu dokumen, misalnya :
<A HREF="#WS">Definisi Web
Statis</A><BR>
<A NAME="WS">Web Statis</A>
- Link ke bagian tertentu dokumen lain, misalnya :
<A HREF="Hyperlink2.html#PHPTRIAD">Cara
menginstal PHPTriad</A><BR>
<A NAME="PHPTRIAD">Caranya : </A>
3. Mengubah gambar menjadi Hyperlink, misalnya : <A HREF="PemformatanTeks.html"> <IMG
SRC="gambar1.jpg"WIDTH="125" HEIGHT="25"
BORDER="0"></A><BR>
Contoh programnya : (Hyperlink1.html dan Hyperlink2.html)
1. Hyperlink1.html
<HTML>
<P
ALIGN="CENTER"><FONT SIZE="5" COLOR="BLUE"
>Pengantar Pemrograman Web</FONT> </P>
<P>
Pemrograman
Web digunakan untuk membangun aplikasi web, dimana aplikasi web ini dapat
dibedakan menjadi :<BR>
1.
<A NAME="WS">Web Statis</A>, dibentuk dengan menggunakan
HTML (Hypertext Markup Languange) saja.Web statis ini mempunyai kelemahan,
setiap menginginkan perubahan harus dilakukan oleh pemrogramnya (dalam hal ini
adalah orang yang
mengerti
bahasa HTML).<BR>
2. Web
Dinamis, dibentuk dengan menggunakan bahasa HTML, Skrip (PHP, ASP) dan
dikoneksikan ke basisdata (MySQL, PostgreSQL). Dalam web dinamis ini perubahan
informasi dalam halaman web dapat ditangani melalui perubahan data yang berasal
dari basisdata dan tidak harus melalui perubahan programnya. Maka perubahan
informasi dapat dilakukan oleh operator dan tidak lagi menjadi tanggungjawab
programmer.
</P>
Dalam
matakuliah ini, kita akan mempelajari cara membuat web dinamis. Berikut ini
akan ditunjukkan mekanisme pembangkitan web secara dinamis.
Proses
pengakesan web dinamis adalah sebagai berikut :<BR>
1. Web
Browser (software yang diinstal di komputer klien yang berfungsi untuk
menterjemahkan kode HTML menjadi halaman web), meminta sebuah halaman berupa
skrip PHP) suatu situs web.<BR>
2.
Permintaan ini akan di tanggapi oleh Web Server (server yang melayani akan permintaan
halaman web). Karena yang diminta masih berupa skrip PHP, maka skrip ini
terlebih dahulu dirubah/diterjemahkan ke dalam kode HTML oleh mesin
PHP-nya.<BR>
3.
Setelah dirubah ke dalam kode HTML, Web server akan segera mengirim
kode
HTML tersebut ke komputer klien.<BR>
4.
Setelah sampai pada komputer klien, maka kode HTML tersebut oleh web browser
akan dirubah menjadi halaman web sesuai kode-kode HTML-nya.<BR>
<P>
Untuk
mempermudah atau memperlancar dalam mempelajari pemrograman web ini alangkah
baiknya anda menginstal PHP Triad sebagai sarana simulasi. PHP Triad adalah
software installer PHP secara instant, yang berjalan pada lingkungan windows,
dimana setelah PHP Triad selesai diinstal secara otomatis kita telah menginstal
Web server (Apache) dan database MySQL.
Langkah-langkahnya
: <BR><BR><BR>
<A
HREF="#WS">Definisi Web Statis</A><BR>
<A
HREF="Hyperlink2.html#PHPTRIAD">Cara menginstal
PHPTriad</A><BR>
<A
HREF="Hyperlink2.html">Klik disini untuk melihat dokumen ke
2</A> <BR>
<A
HREF="http://www.ilmukomputer.com/index.html">Informasi lain
</A> <BR>
<A
HREF="..\Link\Tabel1.html">Data penerimaan mahasiswa baru STMIK
Akakom <BR>
<A
HREF="PemformatanTeks.html"><IMG SRC="gambar1.jpg"
WIDTH="125" HEIGHT="25" BORDER="0"></A>
<BR>
</HTML>
2. Hyperlink2.html
<HTML>
1.
Siapkan master PHPTriad yang dapat diperoleh dengan download di
www.download.com atau mengcopy masternya di Lab. Terpadu. <BR>
2. Klik
2 kali pada file phptriad.exe, maka secara otomatis program akan menampilkan
tampilan PHPTriad 2.11 Setup : Licence Agreement. <BR>
3.
Kemudian klik Next, maka installer akan mengekstrak semua file PHPTriad dan
installer secara otomatis akan membentuk direktori C:\Apache. <BR>
4.
Tunggu sampai prosesnya selesai dan pastikan pada waktu menginstal tidak
terjadi error dan anda tidak sedang menjalankan program-program lain. Sampai
disini telah menunjukkan bahwa proses instalasi telah selesai. <BR>
5.
Tahap berikutnya adalah untuk mengetes apakah PHPTriadnya telah berjalan dengan
baik. <BR>
<P>
<B>
<A NAME="PHPTRIAD">Caranya : </A> </B> <BR>
1.
Jalankan Web Server Apache dengan klik tombol Start, pilih menu Programs, pilih
menu PHPTriad lalu klik Start Apache. <BR>
2. Maka
akan muncul jendela Start Apache dan biarkan saja selama kita menjalankan
skrip-skrip PHP. <BR>
3. Jalankan
web browser (internet explorer), lalu isi address-nya dengan : http://localhost <BR>
4.
Apabila tampilan web browser-nya, berupa ucapan Selamat (Welcome to PHPTriad
for Windows v2.11.) hal ini menunjukkan bahwa instalasi yang telah anda lakukan
sukses. <BR>
5.
Langkah berikutnya mencoba untuk menjalankan skrip (HTML atau PHP) sederhana
buatan kita sendiri. <BR>
6.
Buatlah skrip HTML seperti dibawah ini, untuk sementara menggunakan editor
Notepad untuk mengetikan skrip HTMLnya. <BR>
</P>
<A
HREF="Hyperlink1.html">Klik disini untuk kembali ke dokumen
1</A> <BR>
</HTML>
Gambar 1.8 Tampilan hyperlink 1
Gambar 1.9 Tampilan hyperlink 2
I.2.1.7 Format image
Dari beberapa format image, ada 3 jenis format image yang umum digunakan :
- JPG (Joint Photographic Expert Image), nama file.jpg
- GIF (Graphical Interchange Format), nama file.gif
- PNG (Portable Network Graphics), nama file.png
Untuk menginsertkan image ke dokumen HTML digunakan tag image <img>, dengan format <img src=”path + namafile”>, misalnya : <img src=”fotoku.gif>. Atribut yang digunakan :
Tabel 1.7 Tabel atribut-atribut
yang digunakan dalam tag image
|
Atribut |
Nilai |
Keterangan |
|
Align |
Top, Bottom, Middle Left, Right, Center Hspace, Vspace |
Digunakan untuk menentukan posisi image terhadap text. Digunakan untuk menetukan posisi image di dokumennya. Hspace digunakan untuk menentukan berapa banyak ruang kosong (pixel) yang dimiliki sebuah image pada sisi kiri dan kanannya, sedangkan Vspace pada sisi atas dan bawah. |
Contoh programnya : (Image.html)
<HTML>
<P
ALIGN=CENTER> <FONT SIZE="5" COLOR=BLUE ><B>Satu Cinta
Dua Jiwa</FONT></B><BR>
<FONT
COLOR=RED ><B>Oleh : Siti
Nurhaliza</FONT></B><BR><BR>
<P><IMG
SRC="Sari.jpg" HEIGHT=75 WIDTH=60 ALIGN=LEFT ALIGN=BOTTOM
HSPACE=10>
Seharusnya
kau lebih mengerti<BR>
Seandainya
kau selami ke dasar<BR>
Tak
perlu lagi dikau meragui<BR>
Pada
dasarnya bercinta<BR><BR></P>
<P
ALIGN=RIGHT><IMG SRC="Sari.jpg" HEIGHT=75 WIDTH=60 ALIGN=RIGHT
ALIGN=BOTTOM>
Renungkanlah
dimana asalnya<BR>
Lahirnya
cinta mu yang tulus<BR>
Jangan
dikau hanya merasai<BR>
Sentuhan
dari zahirnya<BR><BR></P>
<P
ALIGN=CENTER>
Kini
pastinya kau
<IMG
SRC=" Sari.jpg " HEIGHT=75
VSPACE=15 WIDTH=60 ALIGN=CENTER><BR>
Kala
cinta dari mu mula berseri<BR><BR></P>
<P>
Satu cinta dua jiwa
<IMG
SRC=" Sari.jpg " HEIGHT=75 WIDTH=60 ALIGN=TOP></BR>
Indahnya
rasa bagai pelangi
<IMG
SRC=" Sari.jpg " HEIGHT=75 WIDTH=60 ALIGN=MIDDLE VSPACE=2 >
Satu
cinta seribu rasa
<IMG
SRC=" Sari.jpg " HEIGHT=75 WIDTH=60 ALIGN=BOTTOM>
Bersemi
kasih di dua hati</P>
<P>
<IMG SRC=" Sari.jpg " HEIGHT=275 WIDTH=200
ALIGN=LEFT><BR>
Resah
rasa bila tak bersama<BR>
Berbisiklah
naluri cinta mu<BR>
Emosinya
tiada berarah<BR>
Tiap
minit kau curiga<BR>
Selamanya
kau
Dan
naluri dan emosi<BR>
Andai
cinta mu teguh berdiri<br>
Pasti
bahagia </P>
</HTML>
Gambar 1.10 Tampilan 1 halaman
image
Gambar 1.11 Tampilan 2 halaman
image
I.2.1.8 Form
Beberapa kegunaan form dalam aplikasi web :
-
Memperoleh
data-data user untuk mendaftar pada service yang di sediakan.
-
Memperoleh
informasi pembelian secara online.
-
Memperoleh
feedback dari user mengenai website
yang kita buat.
Tag untuk membuat form dalam dokumen HTML adalah tag <form>, atribut yang digunakan :
Tabel 1.8 Tabel atribut-atribut
yang digunakan dalam tag form
|
Atribut |
Nilai |
Keterangan |
|
Method Action |
Post URL |
Data akan di kirim ke server sebagai block data ke script. Menentukan lokasi dari script yang akan memproses data dari form yang dibuat. |
Tipe atribut
dalam tag <input> pada HTML.
I.2.1.8.1 Text
Untuk membuat kontrol text baris tunggal, atribut pendukung yang digunakan :
Tabel 1.9 Tabel atribut-atribut
yang digunakan dalam tag text
|
Atribut |
Keterangan |
|
Name Value Size Maxlength Tabindex |
Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat dimasukkan. Mengontrol urutan tab kotak input, yang akan dimasukin pada saat menekan tombol tab. |
Contoh programnya : (InputText.html)
<HTML>
<HEAD>
<TITLE>Contoh
Input Text</TITLE>
</HEAD>
<BODY
BGCOLOR="Aqua">
<FORM>
<P><B>Nama
Lengkap Anda : <BR>
<INPUT
TYPE=TEXT NAMA=nmlkp SIZE=30 MAXLENGTH=25 TABINDEX=1 >
<P><B>Alamat
Lengkap Anda : <BR>
<INPUT
TYPE=TEXT NAMA=almlkp SIZE=100 MAXLENGTH=95 TABINDEX=3>
<P><B>Jurusan
: <BR>
<INPUT
TYPE=TEXT NAMA=jur SIZE=25 MAXLENGTH=20 TABINDEX=2 VALUE="Teknik
Informatika">
</FORM>
</BODY>
</HTML>
Gambar 1.12 Tampilan form input text
I.2.1.8.2 Password
Untuk menangani password atau data rahasia lain, sehingga pada waktu mengisi input yang bertipe password yang muncul dilayar adalah tanda asteris (*), atribut yang digunakan :
Tabel 1.10 Tabel atribut-atribut
yang digunakan dalam tag password
|
Atribut |
Keterangan |
|
Name Value Size Maxlength Tabindex |
Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat dimasukkan. Mengontrol urutan tab kotak input, yang akan dimasukin pada saat menekan tombol Tab. |
Contoh programnya : (InputPassword.html)
<HTML>
<HEAD>
<TITLE>Contoh Input
Passowrd</TITLE>
</HEAD>
<BODY BGCOLOR="Aqua">
<FORM>
<P ALIGN=LEFT> <FONT SIZE=4
COLOR=RED ><B> Silahkan Anda Login Dulu....!!! </B>
</FONT><BR>
<B>Nama <FONT
COLOR=Aqua>!!!!</FONT> :
<INPUT TYPE=TEXT NAMA=nmuser
SIZE=15 MAXLENGTH=12 TABINDEX=1 ><BR>
<B>Password :
<INPUT TYPE=PASSWORD NAMA=pwd
SIZE=15 MAXLENGTH=8 TABINDEX=2><BR>
</FORM>
</BODY>
</HTML>
Gambar 1.13 Tampilan form input password
I.2.1.8.3 Checkbox
Digunakan untuk membuat kotak cex (checkbox).
Tabel 1.11 Tabel atribut-atribut yang digunakan dalam tag checkbox
|
Atribut |
Keterangan |
|
Name Value Size Checked |
Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih. |
Contoh programnya : (InputCheckbox.html)
<HTML>
<HEAD>
<TITLE>Contoh Input
Checkbox</TITLE>
</HEAD>
<BODY >
<FORM>
<P><B>Silahkan Pilih Hobby
Anda : </P>
<INPUT TYPE="CHECKBOX"
NAME="HB1" VALEU="MBC" CHECKED=CHECKED >Membaca
<BR>
<INPUT TYPE="CHECKBOX"
NAME="HB2" VALEU="MYY" >Menyanyi<BR>
<INPUT TYPE="CHECKBOX"
NAME="HB3" VALEU="BRN" >Berenang<BR>
<INPUT TYPE="CHECKBOX"
NAME="HB4" VALEU="BLJ" >Belanja<BR>
</FORM>
</BODY>
</HTML>
Gambar 1.14 Tampilan form input check box
I.2.1.8.4 Radio
Digunakan untuk membuat tombol radio (radio botton), dimana disini hanya dapat memilih satu pilihan dari seluruh group tombol radio dan nama yang diberikan harus sama semua.
Tabel 1.12 Tabel atribut-atribut
yang digunakan dalam tag radio
|
Atribut |
Keterangan |
|
Name Value Size Checked |
Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih. |
Contoh programnya : (InputRadioButton.html)
<html>
<head>
<title>Contoh Input Tombol Radio</title>
</head>
<body >
<form>
<p><b>Pilihan Jurusan Anda : <br>
<input type="radio" name="jrs"
valeu="ti" checked=checked>Teknik Informatika<br>
<input type="radio" name="jrs"
valeu="si" >Sistem Informasi<br>
<input type="radio" name="jrs"
valeu="mi" >Manajemen Informatika<br>
<input type="radio" name="jrs"
valeu="tk" >Teknik Komputer<br>
<input type="radio" name="jrs"
valeu="ka" >Komputer Akuntansi<br></p>
</form>
</body>
</html>
Gambar 1.15 Tampilan form input radio button
I.2.1.8.5 Text Area
Untuk membuat textarea, dimana disini kita dapat menuliskan text mencakup sejumlah baris dan kolom. Tag yang digunakan adalah <Textarea> … </Textarea>.
Tabel 1.13 Tabel atribut-atribut yang digunakan dalam
tag textarea
|
Atribut |
Keterangan |
|
Name Cols Rows |
Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Menentukan jumlah kolom layar yang disediakan bagi area teks. Menentukan jumlah baris layar yang disediakan bagi area teks. |
Contoh programnya
: (InputTextarea.html)
<html>
<head>
<title>Contoh Pembuatan Textarea</title>
</head>
<body >
<table>
<tr><td><b>Keterangan :
<br></td>
<td><textarea name="kspl" cols=50
rows=3> </textarea></td></tr>
</table>
</body>
</html>
Gambar 1.16 Tampilan form input textarea
I.2.1.8.6 Menu Pop-Up
Digunakan untuk memberikan menu pilihan kepada para pembaca. Menu ini mirip dengan radio button, dimana kita hanya dapat memilih satu pilihan dari berbagai nilai yang ada dalam menu tersebut. Dalam menu pop-up ini jumlah pilihan yang ada dapat lebih banyak. Tag yang digunakan adalah <select> … </select>.
Tabel 1.14 Tabel atribut-atribut yang digunakan dalam
tag MenuPopUp
|
Atribut |
Keterangan |
|
<Option> Name Value |
Tag option ini digunakan untuk menyatakan menu atau daftar pilihannya. Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. |
Contoh programnya : (InputMenuPopUp.html)
<html>
<head>
<title>Contoh input dengan Menu
Pop-Up</title>
</head>
<body >
<form>
<p><b>Pilih Jurusan Anda : <br>
<select name=jrs>
<option value="ti" selected>Teknik
Informatika</option>
<option value="si" >Sistem
Informasi</option>
<option value="mi" >Manajemen
Informatika</option>
<option value="tk" >Teknik
Komputer</option>
<option value="ka" >Komputer
Akuntansi</option>
</select></p>
</form>
</body>
</html>
Gambar 1.17 Tampilan form input
menupopup
I.2.1.8.7 Submit dan Reset
Dalam sebuah form paling tidak harus memiliki sebuah tombol submit dan reset. Atribut yang digunakan adalah type dimana type=”submit” digunakan untuk mengirimkan data yang telah diisi oleh user ke server sedangkan type=”reset” digunakan untuk menghapus/mengosongkan semua data yang telah dimasukkan ke form.
Tabel 1.15 Tabel atribut-atribut yang digunakan pada Submit dan Reset
|
Atribut |
Keterangan |
|
Method Name Value Action Type |
Metode pengiriman data ke file
tujuan. Memberikan nama pada data yang diinputkan. Memberikan label pada tombol submit. Aksi yang akan dilakukan jika tombol submit ditekan. Type form yang akan dijalankan. |
Contoh programnya : (SubmitReset.html)
<html>
<head>
<title>Contoh Program
Form</title>
</head>
<body bgcolor=aqua>
<form method="get"
action="Terimakasih.php">
<center><font size=4
color=brown>Form Untuk Peserta Pelatihan Pemrograman
di STMIK A<font
size=5>K</font>AKOM </font></center>
<hr size=5
color=brown><br>
<table border=2 cellspacing=0
width=85%>
<tr><td
width=18%><b>Nama</b></td>
<td> <input type=text
name=nama maxlength=30 size=32></td></tr>
<tr><td
width=18%><b>Password</b></td>
<td> <input type=password
name=pswd maxlength=10 size=12></td></tr>
<tr><td
width=18%><b>Tanggal Lahir<b></td>
<td> <input type=text
name=tgl maxlength=2 size=2> -
<input type=text name=bln maxlength=2 size=2> -
<input type=text name=thn maxlength=4
size=8></td></tr>
<tr><td
width=18%><b>Jenis Kelamin</b></td>
<td> <input type=radio name=jk
checked=checked>Pria
<input type=radio name=jk>Wanita</td></tr>
<tr><td><b>Jurusan
<br></td>
<td><select name=jrs>
<option value="ti"
selected>Teknik Informatika</option>
<option value="si"
>Sistem Informasi</option>
<option value="mi"
>Manajemen Informatika</option>
<option value="tk"
>Teknik Komputer</option>
<option value="ka"
>Komputer Akuntansi</option>
</select></td></tr>
<tr><td
width=18%><b>Pilihan Pelatihan</b></td>
<td>
<input type=checkbox name=html
>HTML
<input type=checkbox name=php >PHP
<input type=checkbox name=python
>PYTHON
<input type=checkbox name=mysql
>My-SQL
<input type=checkbox name=postgre
>Postgre-SQL
<input type=checkbox
name=builder>C++ Builder
</td>
</tr>
<tr><td><b>Keterangan
<br></td>
<td><textarea
name="kspl" cols=53 rows=3>
</textarea></td></tr>
</table>
<p><font size=5><b>
<input type="submit" value="Kirim"
name="tblkrm">
<input type="reset" value="Batal"
name="tblbtl"></p>
</body>
</html>
Contoh programnya : (TerimaKasih.html)
<html>
<head>
<title>Ucapan Terima
Kasih</title>
</head>
<body >
<center><font size=4
color=brown>Terimakasih atas Kepercayaannya Mengikuti
Pelatihan Pemrograman di STMIK
A<font size=5>K</font>AKOM </font></center>
<hr size=5 color=brown> <hr
size=3 color=brown>
<?php
print("Nama Anda adalah : $nama");
?>
</body>
</html>
Gambar 1.18 Tampilan form dengan submit dan reset
Gambar 1.19 Hasil penekanan tombol
submit yang mengarah ke Terimaksih.php
I.2.1.8.8 Frame HTML
Digunakan untuk menjadikan suatu halaman web
menjadi beberapa bagian dokumen HTML , dimana setiap bagian merupakan satu
halaman HTML terpisah. Sehingga tampilan halaman HTML yang salah satu atau
beberapa bagian berganti-ganti isinya sedangkan bagian lainnya tetap, maka hal
ini akan menghemat bandwith internet
dan mempercepat proses download
secara keseluruhan. Tag yang digunakan adalah <frameset> …
</frameset>.
Tabel 1.16 Tabel atribut-atribut yang digunakan pada frame HTML
|
Atribut |
Fungsi |
|
Rows |
Menentukan frame horisontal dengan tinggi baris tertentu. |
|
Colspan |
Menentukan frame vertical dengan lebar kolom tertentu. |
|
Frame Src |
Menentukan dokumen HTML yang dimasukkan ke dalam frame. |
Contoh programnya : (FrameHorisontal.html)
<html>
<head>
<title>Contoh Frame
Horisontal</title>
</head>
<frameset rows=30%,*,40%>
<frame
name=atas src=SubmitReset.html>
<frame
name=tengah src=Tabel.html>
<frame
name=bawah src=Hyperlink1.html>
</frameset>
</body>
</html>
Contoh programnya : (FrameVertikal.html)
<html>
<head>
<title>Contoh Frame
Vertikal</title>
</head>
<frameset cols=30%,*,30%>
<frame
name=kiri src= SubmitReset.html >
<frame
name=tengah src=Tabel.html >
<frame
name=kanan src=Hyperlink1.html >
</frameset>
</body>
</html>
Gambar 1.21 Tampilan frame vertikal
Contoh programnya : (FrameGabungan.html)
<html>
<head>
<title>Contoh Frame
Gabungan</title>
</head>
<frameset cols=30%,*>
<frame name=kiri src=Hyperlink1.html
>
<frameset
rows=55%,*>
<frame
name=atas src= SubmitReset.html >
<frame
name=bawah src=Tabel.html >
</frameset>
</frameset>
</body>
</html>
Gambar 1.22 Tampilan frame gabungan