Scribpt Html
PENGENALAN HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document
web, yang bisa anda lakukan dengan HTML yaitu:
· Mengontrol tampilan dari web page dan contentnya.
· Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
· Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
· Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
BROWSER DAN EDITOR
Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag
HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape
Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda
gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
TAG DASAR YANG DIBUTUHKAN DALAM DOKUMEN
Berikut ini adalah tag dasar yang dibutuhkan dan harus ada dalam dokumen HTML :
<HTML> dan </HTML>
<HEAD> dan </HEAD>
<TITLE> dan </TITLE>
<BODY> dan </BODY>
CONTOH HTML .....
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>
Atribut dasar Tag <BODY>
· Bgcolor : warna background documen.
· Leftmargin : ukuran margiin kiri dokumen.
· Rightmargin : ukuran margin kanan dokumen.
· Topmargin : ukuran margin atas dokumen.
· Bottommargin : ukuran margin bawah dokumen.
· Link, vlink, alink : warna link, aktif link dan link yang sudah dikunjungj pada dokumen.
CONTOH
Atribut bgcolor :
<body bgcolor=”blue”> atau <body bgcolor=”0000FF”>
Atribut leftmargin,rightmargin,topmargin ,dan bottommargin :
<body leftmargin=”25” rightmargin=”25” topmargin=”20” bottommargin=”30”>
Atribut link,alink, dan Vlink
<body link=”fuchsia” alink=”white” vlink=”silver”>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>LATIHAN WEB</TITLE>
</HEAD>
<BODY bgcolor=”blue” link=”fuchsia” alink=”white” vlink=”silver” leftmargin=”25”
rightmargin=”25” topmargin=”20” bottommargin=”30”>
...teks dokumen pertamaku ini ditulis di area body <br>
<a href=””>ini link ke 1</a></br>
<a href=””>ini link ke 2</a>
</BODY>
</HTML>
FORMAT TAMPILAN SEDERHANA
Tag untuk headline
Untuk membuat text HEADLINE (judul), kita harus, melingkupi text tersebut dengan tag pembuka dan tag
penutup headline. Tag headline ditulis dengan aturan sebagai berikut:
Tag pembuka <HX> dan tag penutup </HX>. Perhatikan , X diganti dengan angka!
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>Format tampilan sederhana </TITLE>
</HEAD>
<BODY>
<H1>HEADLINE LEVEL 1</H1>
<H2>HEADLINE LEVEL 2</H2>
<H3>HEADLINE LEVEL 3</H3>
<H4>HEADLINE LEVEL 4</H4>
<H5>HEADLINE LEVEL 5</H5>
<H6>HEADLINE LEVEL 6</H6>
</BODY>
</HTML>
Tag Style Sederhana
Kini akan dibahas beberapa text style. Tag-tag tersebut digunakan untuk mengatur format text.
Contoh:
· Untuk membuat text tebal bisa menggunakan <strong> atau <b>
· Untuk membuat text miring <em> atau <i>
· Untuk membuat text digaris bawahi <u>
· Untuk membuat text seperti teletype writer <tt>
· Untuk membuat text seperti font courier <code>
· Untuk membuat text seperti code <samp>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE> Format tampilan sederhana</TITLE>
</HEAD>
<BODY>
<H1>HEADLINE LEVEL 1</H1>
<H2>HEADLINE LEVEL 2</H2>
<H3>HEADLINE LEVEL 3</H3>
<H4>HEADLINE LEVEL 4</H4>
<H5>HEADLINE LEVEL 5</H5>
<H6>HEADLINE LEVEL 6</H6>
Tulisan ini ditulis dengan <strong>”tag strong, agar tebal”</strong> <br>
Tulisan ini ditulis dengan <em>”tag EM, agar miring”</em> <br>
Tulisan ini ditulis dengan <code>”tag code, agar seperti kode program”</code>
<br>
</BODY>
</HTML>
MENAMBAHKAN BULLETS DAN NUMBERING
Untuk memudahkan ada dua jenis bullet yang akan dibahas dalam buku ini, yaitu Unordered list atau
disingkat menjadi <UL> dan ordered list yang disingkat <OL>
Dengan menggunakan <UL> kita hanya bisa membuat bullet saja, sedangkan untuk menampilkan list
dengan memberikan nomer di awal text adalah dengan menggunakan pilihan <OL>
untuk membuat list setiap kali anda harus menggunakan <li> di awal setiap kalimat atau text yang akan
4
menggunakan <ul> atau <ol>. Karena <li> lah yang dijadikan patokan sebagai awal penulisan list dalam
suatu dokumen.
CONTOH HTML.....
<html>
<head><title>menambahkan bullets dan numbering</title>
</head>
<body>
<h3> mencoba bullets dan numbering </h3>
<b> seri operating system </b>
<ul> <li> microsoft windows 2000 profesional </li>
<li> microsoft windows 2000 server </li>
<li> instalasi dan konfigurasi windows</li>
</ul>
<b> seri microsoft office</b>
<ol> <li>microsoft word 2000</li>
<li>microsoft access 2000</li>
<li>microsoft power point 2000</li>
</ol>
</body>
</html>
Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan
menjorok ke kanan.
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<B>Kamus Teknologi Informasi:</B>
<DL>
<DT>HTML</DT>
<DD>Bahasa yang digunakan untuk menyusun Web</DD>
<DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer HTML</DD>
</DL>
</BODY>
</HTML>
MENEMPATKAN KOMENTAR
komentar dalam suatu dokumen amatlah penting. Komentar ditempatkan di antara program untuk
memberikan komentar atas program yang dibuat. Sehingga bagi orang lain yang membaca program tersebut
bisa dimengerti tanpa menanyakan kepada orang yang membuatnya.
Syntax :
diawali dgn <!--
diakhiri dgn -->
CONTOH HTML.....
<html>
<head>
<title>menambahkan bullets dan numbering</title>
</head>
<body>
<h3> mencoba bullets dan numbering </h3>
<b> seri operating system </b>
<!-- Menampilkan bullets -->
<ul> <li> microsoft windows 2000 profesional </li>
<li> microsoft windows 2000 server </li>
<li> instalasi dan konfigurasi windows</li>
</ul>
<b> seri microsoft office</b>
<!-- Menampilkan number -->
<ol> <li>microsoft word 2000</li>
<li>microsoft access 2000</li>
<li>microsoft power point 2000</li>
</ol>
</body>
</html>
FORMAT ELEMENT ARRAY
<P> TAG UNTUK PARAGRAPH
Tag <p> digunakan untuk menampilkan satu blok text dalam bentuk paragraph. Blok text tersebut diawali
dengan <p> dan ditutup dengan </p>, penggunaan tag </p> sebagai penutup akan memastikan bahwa
paragraph akan disertai dengan extra space.
CONTOH HTML.....
<html>
<head>
<title> tag P untuk paragraph</title>
</head>
<body>
<p> pergunakan tag p untuk membuat paragraph.element text yang dimulai dengan
tag p akan dimulai dengan baris baru, dan akan ditambahkan baris kosong
padanya.</p>
<p> ini adalah line break dengan extra baris kosong, yang dibuat dengan tag p.
<br> ini adalah line break yang dibuat dengan tag br, coba bandingkan dengan tag
p.
</body>
</html>
<PRE> TAG PRE -FORMATED TEXT
tag <pre> merupakan tag yang digunakan untuk membuat satu blok tulisan yang tata letaknya dapat kita atur
sesuai dengan tampilan pada saat pembuata
CONTOH HTML.....
<html>
<head>
<title>tag pre untuk pre-formatted text</title>
<body>
<pre>
TO : LEE SMITH
FROM : CHRIS BROWN
SUBJECT : MEETING SCHEDULE AND AGENDA FOR WEB SITE TEAM
DATE : THURS, 14 AUG 1997 22:00:05
9/20/97 8:00 AM ROOM 218
9/21/97 9.00 AM ROOM 218
9/22/97 2.00 PM ROOM 111
AT THE FIRST MEETING, WE SHOULD DISCUSS HOW TO USE THE <STYLE> TAG TO MAKE
OUR HOME PAGE MORE INTERESTING.
</pre>
</body>
</head>
</html>
<DIV> TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT
Tag <div> digunakan untuk mengatur alignment satu blok text, memungkinkan pengaturan rata kiri atau rata
kanan atau rata tengah.
syntax: <div align = ”left” | ”center” | ”right” >
CONTOH HTML.....
<html>
<head>
<title> Tag div untuk alignment text</title>
</head>
<body>
<div align=right>
<H1>aligning a block of content to right </H1>
<p>you can use a div tag to align a block of content to the right.</p>
<p>the content can include anything you like, including tables,images,
lists, and so on. Note, however, that right-aligned lists often do not
look very neat.<p>
</div>
</body>
</html>
TAG - TAG UNTUK MEMFORMAT TEXT
PHYSICAL FORMATTING
<B> ... </B> Untuk Bold text
<I> ... </I> Untuk italic text
<U> ... </U> Untuk Underline Text
<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal
<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal
<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text
<SUP> ... </SUP> Untuk Superscript text
<SUB> ... </SUB>UNtuk Subscript text
<CENTER> ... </CENTER> Untuk Center document
LOGICAL FORMATTING
<EM> ... </EM> / <I> Text miring
<STRONG> … </STRONG> / <B> Text tebal
<DEL> ... </DEL> / <STRIKE> Mencoret text
<INS> ... </INS> / <U> Underline text
<SPAN> TAG UNTUK MEMFORMAT TEXT DALAM BARIS
Tag <span> digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu text lain
dalam baris yang sama
syntax:
<span style=”color : warna; font-weight : bold | reguler; font-style : italic |
normal”>
CONTOH HTML.....
<html>
<head>
<title>tag div untuk alignment text</title>
</head>
<body>
<p>here is some normal paragraph text. It looks OK, but it would lookmuch
better if it were
<span style=”color:red; font-weight:bold; font-style:italic”> in bright,
bold, italic merah. </span>
</body>
</html>
<CENTER> TAG UNTUK CENTER TEXT
Tag <center> akan menyebabkan text atau tulisan yang diapit oleh tag <center> dan </center> akan
diposisikan center atau ditengah secara horizontal.
CONTOH HTML.....
<html>
<head>
<title> tag div untuk alignment text</title>
</head>
<body>
<center><H1>Perguruan Tinggi Raharja</H1></center>
selamat datang di jurusan sistem komputer CCIT
</body>
</html>
<BR> TAG UNTUK LINE BREAK
Tag <BR> akan menyebabkan text atau tulisan yang ada di sebelah kanannya turun ke bawah satu baris
(line break). Tag <BR> tidak mempunyai penutup.
CONTOH HTML.....
<html>
<head>
<title> tag div untuk alignment text</title>
</head>
<body>
Tulisan ini berada pada baris pertama
<br>tulisan ini turun karena tag BR <br> tulisan ini juga karena tag BR.
</body>
</html>
<HR> TAG UNTUK MEMBUAT GARIS PEMISAH HORIZONTAL
Tag <HR> digunakan untuk membuat garis pemisah antar baris atau untuk membuat suatu garis horizontal
sepanjang lebar halaman homepage. tag<HR> memiliki tag penutup.
Syntax:
<HR ALIGN=”CENTER” | “LEFT”| “RIGHT”
NOSHADE
SIZE = “THICKNESS”
WIDTH=”WIDTH” >
ALIGN : Untuk menentukan apakah rata kiri, tengah, atau kanan.
NOSHADE: jika ditulis maka garis dibuat tanpa bayangan, jika tidak maka garisnya memiliki bayangan
SIZE : untuk menentukan ketebalan garis (dalam pixel)
WIDTH : untuk menentukan lebar dan panjang garis (dalam persen %)
CONTOH HTML.....
<html>
<head>
<title> tag div untuk alignment text</title>
</head>
<body>
<P> This text appears above a thick, unshaded, centered horizontal rule.
<HR NOSHADE ALIGN=”center” width=”50%” SIZE=”8”>
<P>this text appears below the horizontal rule.
</body>
</html>
<MARQUEE> TAG
Kadang-kadang kita memerlukan text dalam web yang dibangun sedikit bergerak atau berjalan ke kiri atau
kekanan adalah sebagai berikut :
Syntax :
<MARQUEE align="center" direction="right" height="50" scrollamount="2"
width="80%">
….
</MARQUEE>
Atribut yang biasa digunakan :
1. Widht = lebar blok teks dalam pixel atau persen.
2. Title = pesan yang akan muncul saat mouse berada di atas teks.
3. Direction = “left / right / up / down” untuk arah gerakan teks.
4. Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
5. Bgcolor = warna background teks.
6. Behavior = “scroll / slide / alternate” untuk mengatur perilaku gerakan
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>LATIHAN WEB</TITLE>
</HEAD>
<BODY>
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="2" align="center" width="100%" height="200">
<a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-diblog.
html">Cara Pasang Search Engine </a> <br>
<a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html">Trik
Membuat Read More (Template Baru) </a> <br>
<a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html">Cara Membuat
Favicon </a> <br>
<a href="http://miscah.blogspot.com/2009/04/cara-membuat-labelkategori.
html">Cara Membuat Label (Kategori) </a> <br>
</marquee>
</BODY>
</HTML>
Pengaturan Warna Font
Untuk mengatur warna font dapat melalui 2 cara, pertama melalui tag <body> dan yang kedua melalui tag
<font> seperti yang akan anda lihat dibawah ini.
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>
<FONT> TAG
Dalam menulis suatu dokumen kita perlu mengatur ukuran huruf. Misalnya untuk judul bisa menggunakan
lebih besar, untuk sub judul lebih kecil dibandingkan judul, dan untuk isi biasanya ukuran kecil atau sedang.
Untuk ukuran / size font dimulai dari 1 sampai 7, nilai default nya 3. Ada juga font color yang digunakan
untuk memberikan warna pada font. Lalu ada juga font face yang dimaksud font face adalah tipe dari font
tersebut. Misalnya arial, times new roman dll.
10
Syntax :
<font
color=”color”
face=”font type”
size=”1 until 7”
>
….
</font>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>
ANCHOR DAN LINK
Tag <A> memungkinkan kita untuk mendefinisikan anchors. (point atau tempat dimana kita dapat
mengaksesnya sewaktu-waktu) dan links (pemanggil anchors atau dokumen .html lain, yang membawa kita
masuk ke anchor tersebut ketika link kita click).
<A> sebagai Anchor
sebuah anchor mengedintifikasi suatu lokasi dalam suatu dokumen HTML. Untuk mengedintifikasi bahwa
tag <A> digunakan sebagai anchor, kita harus mengisi parameter NAME pada tag <A>
Syntax :
<A
NAME=”anchor name”
>
…
</A>
<A> Sebagai Link
Untuk mendefinisikan suatu link, pergunakan tag <A> dengan mengisi parameter HREF pada tag <A>, untuk
memberitahu tujuan dari sebuah link ketika user menekan click isi atau text yang berada di antara tag <A
HREF> dan </A>.
Nilai yang diisikan pada parameter HREF adalah berupa URL (uniform resource locators). Jika kita
menginginkan link membuka dokumen baru, maka nilai HREF harus merupakan nama dokumen yang dituju.
Namun, apabila kita menginginkan link membawa arah tampilan ke suatu tempat pada dokumen yang sama,
maka nilai HREF harus merupakan nama dari anchor tujuan yang diawali dengan simbol “#” (contoh :
#bagian 1).
11
Syntax :
<A
HREF=”location atau nama dokumen”
>
…
</A>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>link pada dokumen yang sama</TITLE>
</HEAD>
<BODY>
<A NAME=section2>
<H2>A Cold Autum Day</H2></A>
if this anchor is in a file called “nowhere.htm” you could define a link that
jumps to the anchor as follows :
<P>Jump to the second section
<A HREF=”#section2”>A cold Autumn day</A> in the mystery “A man from nowhere.”
</BODY>
<HTML>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>link untuk memanggil dokumen yang sama</TITLE>
</HEAD>
<BODY>
<A HREF=”coba.html”>Panggil dokumen coba.html</A>untuk melihat link memanggil
dokumen lain.
</BODY>
<HTML>
IMAGE
Untuk menampilkan gambar pada html dapat menggunakan 2 cara yang pertama memanfaatkan tag <body>
dan yang kedua menggunakan tag <img>.
<BODY BACKGROUND> TAG
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar</TITLE>
</HEAD>
<BODY BACKGROUND = "../citra/gunung.jpg">
Gambar Komputer terbaru
<IMG SRC = "komputer.gif" ALIGN = "MIDDLE">
</BODY>
</HTML>
12
<IMG> TAG
Tag <IMG> digunakan untuk menentukan file image yang akan ditampilkan dalam dokumen html.
File format image yang umum digunakan adalah:
· GIF (Graphics Interchange Format)
· JPEG (Joint Photograpic Experts Group)
Syntax :
<IMG
SRC=”location”
ALT=”Alternativetext”
ALIGN=”alignment”
BORDER=”border width”
HEIGHT=”height”
WIDTH=”width”
>
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE> MEMBUAT IMG<TITLE>
</HEAD>
<BODY>
<img src=”Violets.JPG”
alt=”voilets” width=150
height=113>
</BODY>
</HTML>
TABLES
<TABLE> TAG
Tag <Table> digunakan tag yang berfungsi untuk mendefinisikan sebuah tabel. Di dalam tebel berisi baris
dan sel. Untuk membuat baris gunakan tag <tr>, untuk membuat baris heading gunakan tag <th>,
sedangkan untuk membuat sel gunakan tag <td>.
Syntax :
<table
align=”left | right | center”
bgcolor=”color”
border=”value”
cellpadding=”value”
cellspacing=”value”
height=”height”
width=”width”
cols=”numofcols”
hspace=”horizmargin”
vspace=”vertmargin”
>
…
</tabel>
<CAPTION> TAG
Tag <caption> digunakan untuk mendefinisikan judul dari suatu tabel. Tag ini diletakkan di dalam tag <table>
(antara <table> dan </table>)
Syntax :
<caption align=”bottom” | “top”>......</caption>
<TR> TAG
Tag <TR> berfungsi untuk mendefinisikan baris dalam tabel. tag ini diletakkan di dalam tag <table> (antara
<table> dan </table>)
Syntax :
<tr
align=”center | left | right”
valign=”baseline | bottom | middle | top”
bgcolor=”color”
>
...
</tr>
<TD> TAG
Tag <td> digunakan mendefinisikan sel dalam bari. Tag <td> ini diletakkan di dalam tag <tr> (antara <tr> dan
</tr>).
Syntax :
<td
align=”center | left | right”
vlign=”baseline | bottom | middle | top”
bgcolor=”color”
colspan=”value”
rowspan=”value”
height=”pixelheight”
width=”pixelwidth”
nowrap=”value”
>
….
</td>
<TH> TAG
Tag <th> digunakan untuk mendinisikan baris heading dalam tabel. Tag ini diletakkan di dalam tag <TR>
(antara <tr> dan </tr>)
Syntax :
<th
align=”center | left | right”
vlign=”baseline | bottom | middle | top”
bgcolor=”color”
colspan=”value”
rowspan=”value”
height=”pixelheight”
14
width=”pixelwidth”
nowrap=”value”
>
…..
</th>
CONTOH HTML.....
<html>
<head>
<title>membuat table</title>
</head>
<body>
<table border cellpadding=”8” cellspacing=”4” bgcolor=”yellow”>
<tr><th> english </th><th> spanish </th><th> german </th></tr>
<tr><td> one </td><td> uno </td><td> ein </td><tr>
<tr><td> two </td><td> dos </td><td> zwei </td><tr>
<tr><td> three </td><td> tres </td><td> drei </td><tr>
<caption align=”bottom”> <b> Table 1</b> : tables are as easy as one, two,
three
</caption>
</table>
</body>
</html>
FRAMES
<FRAMESET> TAG
Tag <frameset> digunakan untuk mendefinisikan suatu set yang terdiri dari beberapa frame yang akan
ditampilkan pada window browser. Dalam tag <frameset> (antara <frameset> dan </frameset>) terdiri dari
beberapa tag <frame>, dan tiap tag frame merupakan definisi dari suatu frame (bagian).
Syntax :
<frameset
cols = “column width list”
rows=”row height list”
border=”pix width”
bordercolor=”color”
frameborder=”yes” | “no”
>
...
</frameset>
<FRAME> TAG
Tag <frame> adalah tag yang digunakan untuk membuat frame. Frame ini merupakan suatu bagian pada
web browser yang dapat diatur secara individual (atau bisa dibilang window di dalam window).
Tag <frame> harus digunakan di dalam tag <frameset> (antara <frameset> dan </frameset>
Syntax :
< frame
name=”frame name”
15
noresize
scrolling=”yes” | “no” | “auto”
src=”url”
>
<NOFRAMES> TAG
Tag <noframes> menampilkan isi dokumen apabila browser yang digunakan oleh user tidak mendukung
frame. Tag ini tidak akan diakses apabila browser yang digunakan adalah browser yang mendukung frame.
Syntax :
<noframes>....<noframes>
CONTOH HTML.....
Perhatian :
Sebelum mencoba contoh di atas, dianjurkan untuk ,membuat dokumen HTML dengan nama : frleft.htm,
frtop.htm dan frmain.htm
<html>
<head>
<title>membuat frame</title>
</head>
<frameset cols=”20%,*”>
<frame src=”frleft.htm” name=”noname”>
<frameset rows=”30%,*”>
<frame src=”frtop.htm” name=”toptoc”>
<frame src=”frmain.htm” name=”outer”>
</frameset>
</frameset>
<noframes>
<body>
you must use a browser that can display frames to see this page.
</body>
</noframes>
</html>
PENGGUNAAN FORM dan ELEMENT INPUT
Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda.
Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.
ACCEPT : Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form.
Syntax: ACCEPT=”Internet Media Type”
METHOD : Menentukan bagaimana data akan di kirim ke server.
GET – data akan di kirim dengan menggunakan query string pada URL.
POST – data akan di kirim ke server sebagai block data ke script.
Syntax: METHOD = ” POST | GET ”
16
ACTION : Menentukan lokasi dari script yang akan memproses data dari form
Syntax: ACTION=”URL”
Mengenal komponen input
Dalam penulisan dokumen html khususnya yang berhubungan dengan form ada beberapa komponen input
yang sering digunakan, misalnya radio button,check box,check list, dan sebagainya.
· Teks satu baris (single-line text) <input type="text">
· Teks banyak baris (multi-line text) <textarea></textarea>
· Teks rahasia (password) <input type="password">
· Pilihan tunggal (single selection) <input type="radio">, <select></select>
· Pilihan majemuk (multiple selections) <select multiple></select>
· Centang (on/off) <input type="checkbox">
· Data bawaan/tersembunyi (hidden) <input type="hidden">
· File <input type="file">
· Koordinat 2D dalam sebuah bidang gambar <input type="image">
· Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">,
<input type="button">, <button></button>
TAG INPUT
Macam macamnya :
· <input type="jenis" name="nama" id="id" value="nilai" disabled>
type : text, password, radio, checkbox, image, submit, reset, button, hidden, file
name : identifier untuk sisi server
id : identifier untuk sisi browser
value : nilai default
disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
· <input type="[text | password]" name="nama" readonly size="m"
maxlength="n">
readonly : jika disebutkan maka elemen tidak bisa diubah nilainya
size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)
maxlength : banyaknya karakter maksimal yang dapat dimasukkan user
· <input type="[radio | checkbox]" name="nama" checked>
checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih
· <input type="image" src="gambar" name="nama" alt="alternatif">
src : nama file gambar
alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar
TAG TEXTAREA, SELECT, BUTTON
· <textarea name="nama" rows="b" cols="k">nilai</textarea>
nilai : nilai default
rows : banyaknya baris yang ditampilkan (tinggi)
cols : banyaknya kolom/karakter yang ditampilkan (lebar)
· <select name="nama" multiple size="r">
<option value="nilai 1" selected>teks 1</option>
<option value="nilai 2">teks 2</option> … </select>
multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)
size : banyaknya baris pilihan yang ditampilkan (default = 1)
selected : jika disebutkan maka defaultnya dalam keadaan terpilih
· <button type="jenis" name="name" value="nilai">tampilan</button>
type : submit, reset, button
tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol
CONTOH HTML.....
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM ACTION = "info.htm" METHOD = "POST">
Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"
MAXLENGTH = "20">
<BR>
Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25"
MAXLENGTH = "40">
<BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>
File info.htm yang dituju oleh web diatas.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
INFO..................
</BODY>
</HTML>
TAG TAG HTML LENGKAP
Structure
· html
· head
· body
· div
· span
Meta Information
· DOCTYPE
· title
· link
· meta
· style
Text
· p
· h1, h2, h3, h4, h5, and h6
· strong
· em
· abbr
· acronym
· address
· bdo
· blockquote
· cite
· q
· code
· ins
· del
· dfn
· kbd
· pre
18
· samp
· var
· br
Links
· a
· base
Images and Objects
· img
· area
· map
· object
· param
Lists
· ul
· ol
· li
· dl
· dt
· dd
Tables
· table
· tr
· td
· th
· tbody
· thead
· tfoot
· col
· colgroup
· caption
Forms
· form
· input
· textarea
· select
· option
· optgroup
· button
· label
· fieldset
· legend
Scripting
· script
· noscript
Presentational
· b, i, tt, sub, sup, big, small, hr
The Whole Shebang
· a
· abbr
· acronym
· address
· area
· b
· base
· bdo
· big
· blockquote
· body
· br
· button
· caption
· cite
· code
· col
· colgroup
· dd
· del
· dfn
· div
· dl
· DOCTYPE
· dt
· em
· fieldset
· form
· h1, h2, h3, h4, h5, and h6
· head
· html
· hr
· i
· img
· input
· ins
· kbd
· label
· legend
· li
· link
· map
· meta
· noscript
· object
· ol
· optgroup
· option
· p
· param
· pre
· q
· samp
· script
· select
· small
· span
· strong
· style
· sub
19
· sup
· table
· tbody
· td
· textarea
· tfoot
· th
· thead
· title
· tr
· tt
· ul
· var
Semoga artikel Scribpt Html bermanfaat bagi Anda.
