belajar html by bersatu kita teguh

7/30/2019 Belajar HTML by Bersatu Kita Teguh

1/23

www.teguhwidodo.vv.si Page 1

http://www.teguhwidodo.vv.si

Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yangdigunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besarkode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

Sebagai tanda awal dokumen HTML.

Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag iniakan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :

Teguh Website

Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latarbelakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

Sebuah contoh sederhana dokumen HTML :

Halaman pembuka

Letakkan text, images, dan link Anda di sini


2/23


Pengaturan Teks

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturanterhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag dibawah ini yang biasa digunakan dalam pengaturan teks :

Headers: .. Digunakan untuk mengatur ukuran huruf pada header."n" mempunyai nilai antara 1 - 6 atau antara sampai , dengan merupakan ukuran terbesar dan merupakan ukuran terkecil.

Contoh :

Tutorial Html

Hasilnya akan terlihat seperti :

Tutorial Html Paragraph Baru:

Digunakan untuk pindah alinea atau paragraf. Tag ini bisadiberi akhiran
tapi juga bisa tidak diberi.
Line Break:
Digunakan untuk pindah ke baris baru.

No Line Break: Bila digunakan tag ini maka teks yang panjang tidaksecara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

Font Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE,COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakanukuran terkecil dan 7 merupakan ukuran terbesar.

FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama fontmaka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harusdipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinyaakan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknyakita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan sajafont standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisamenggunakan graphic.

COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).

Contoh :

Contoh teksyang berwarna merah


3/23


Hasilnya akan terlihat seperti :

Contoh teks yang berwarna merah

Contoh lainnya :

Base Font: Digunakan untuk mendefinisikan "default text". Attributsama dengan attribut FONT. Tag FONT akan meng overwrite setting pada BASEFONT.

Contoh :

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan denganpengaturan teks, yaitu :

Perhatian : Semua tag di bawah ini membutuhkan tap penutup.

Bold text Italic text Underscore Typewriter Strikeout - draws a line through the text Preformatted Text Definition Text berkedip (lebih baik jangan digunakan) Strong

Italic

Digunakan untuk quoting text Monospaced font (digunakan bila Anda ingin meletakkan(memperlihatkan) kode HTML pada dokumen HTML Anda) Monospaced font (digunakan bila Anda ingin meletakkan(memperlihatkan) kode HTML pada dokumen HTML Anda) Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan)kode HTML pada dokumen HTML Anda) Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat teks superscript membuat teks sub script Abbreviations Untuk akronim Digunakan untuk indexing Membuat short inline quotation Membuat variable name, selalu dalam italics.


4/23


Lists

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists: Untuk membuat daftar item dengan tanda bullet. Listentries didefinisikan dengan tag .

Contoh :

Item nomer 1 Item nomer 2 Item nomer 3

Hasil dari kode di atas adalah:

Item nomer 1

Item nomer 2 Item nomer 3

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau squarebullet point.

Contoh :

Ordered Lists: Juga digunakan untuk membuat daftar item, dengan tiapitem dapat menggunakan angka arab atau romawi. List entries juga didefinisikan

dengan tag.

Contoh :

Item nomer 1 Item nomer 2 Item nomer 3

Hasil dari kode di atas adalah :

1. Item nomer 1 2. Item nomerr 2 3. Item nomerr 3

Untuk TYPE Anda dapat juga menggunakan :

1- Default numbers, 1, 2, 3, etc.A- Huruf besar. A, B, C, etc.a- Huruf kecil. a, b, c, etc.


5/23


I- Romawi huruf besar. I, II, III, etc.i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists:

Contoh :

Item pertama. Penjelasan tentang item pertama. Item kedua. Penjelasan tentang item kedua

Hasil dari kode di atas adalah :

Item pertama.Penjelasan tentang item pertama.

Item kedua.Penjelasan tentang item kedua

Images

Images :

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :

Links :Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah.

Contoh :

Klik di sini Untuk membuat link ke halamanlain.Klik di sini Untukmembuat link pada alamat e-mail.Klik di sini Untuk membuat link ke bagian lain padahalaman yang sama.Klik di sini Untuk membuat linkkebagian lain pada halaman yang berbeda.


6/23


Untuk membuat linkdengan menggunakan gambar.

Tabel

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tagtable Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris.Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :, , dan . Yang perlu diingat adalah bahwa tab dan harus terletak di antara tag dan

Terdiri dari atribut :

align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang (background) dari tabel. border - ukuran lebar border tabel (dalam pixel). cellpadding - jarak antara isi cell dengan batas cell (dalam pixel). cellspacing - jarak antar cell (dalam pixel). width - ukuran tabel dalam pixel atau percent.

Contoh :

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang dari baris. valign - perataan vertikal : top, middle atau bottom.

Contoh :

Tag ini digunakan untuk membuat kolom baru pada tabel.

align - perataan background - image yang digunakan sebagai latar belakang dari kolom. bgcolor - warna latar belakang colspan - lihat gambar contoh height - ukuran tinggi cell dalam pixels. nowrap - membuat supaya isi dari kolom tetap berada pada satu baris. rowspan - lihat gambar contoh valign - perataan vertikal :top, middle atau bottom. width - ukuran kolom dalam pixel atau percen.


7/23


Contoh :

Tables Tutorial

Let's begin with a simple and common use for tables: an office phone list. Suppose wehave four people whose names we want on the list. The data could be arranged in a table

like this:

Raha Mutisya 1493 Shalom Buraka 3829 Hallie Curry 8372 Shari Silberglitt 4827

Which gives us this table:

Raha Mutisya 1493

Shalom Buraka 3829Hallie Curry 8372Shari Silberglitt 4827

This table uses the basic three tags all tables must have:


8/23


creates the table. Most of the overall properties of the table aredefined here, such as if it has borders and what is the table's background color .

(Table Row) defines each row of the table.

(Table Data) defines each cell of the table.

The first modification we'll make to this little table is to add borders. Borders will help ussee how the table is laid out. It's a good idea when designing a table to add borders duringthe time you design the table, even if you remove them before making the table public.

Raha Mutisya 1493 Shalom Buraka 3829 Hallie Curry 8372 Shari Silberglitt 4827

which gives us

Raha Mutisya 1493

Shalom Buraka 3829

Hallie Curry 8372

Shari Silberglitt 4827

CELLPADDING and CELLSPACING

By default, table cells tend to be squeezed close to each other. To give your table cells alittle more breathing room, use CELLPADDING and CELLSPACING .

CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.

peaches cherries

walnuts almonds

peaches cherries

walnuts almonds

peaches cherries

walnuts almonds

CELLPADDING sets the amount of space between the contents of the cell and the cell wall.The default is 1. CELLPADDING is usually more effective than CELLSPACING for spreading
http://www.htmlcodetutorial.com/tables/_TABLE.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BORDER.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BORDER.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BORDER.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TR.htmlhttp://www.htmlcodetutorial.com/tables/_TR.htmlhttp://www.htmlcodetutorial.com/tables/_TD.htmlhttp://www.htmlcodetutorial.com/tables/_TD.htmlhttp://www.htmlcodetutorial.com/tables/_TD.htmlhttp://www.htmlcodetutorial.com/tables/_TR.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE_BORDER.htmlhttp://www.htmlcodetutorial.com/tables/_TABLE.html


9/23


out the contents of the table.

peaches cherries

walnuts almonds

peaches cherries

walnuts almonds

peaches cherries

walnuts almonds

COLSPAN and ROWSPAN

Table cells can span across more than one column or row. The attributes COLSPAN ("howmany across") and ROWSPAN("how many down") indicate how many columns or rows acell should take up.

For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows spanacross two columns to indicate the department for each group of names.

Production Raha Mutisya 1493 Shalom Buraka 3829 Brandy Davis 0283 Sales Claire Horne 4827

Bruce Eckel 7246 Danny Zeman 5689

which gives us:

Production

Raha Mutisya 1493

Shalom Buraka 3829

Brandy Davis 0283Sales

Claire Horne 4827

Bruce Eckel 7246

Danny Zeman 5689


10/23


It often happens with multiple-column cells that a little color helps to set off the headers,giving the table a more visually organized look. Let's add some color to the headers usingBGCOLOR.

Production Raha Mutisya 1493 Shalom Buraka 3829 Brandy Davis 0283 Sales Claire Horne 4827 Bruce Eckel 7246 Danny Zeman 5689

which gives this table:

Production

Raha Mutisya 1493

Shalom Buraka 3829

Brandy Davis 0283

Sales

Claire Horne 4827

Bruce Eckel 7246

Danny Zeman 5689

ROWSPANsets how many rows a cell spans. ROWSPANcan get a little confusing because itrequires you to think through how the cell affects the rows after the row it starts in. It's

particularly useful in this situation to add borders to the table during the design process,even if the table won't ultimately use borders.

This table code creates two header cells which span three rows each:

ProductionRaha Mutisya 1493

Shalom Buraka 3829

Brandy Davis 0283
http://www.htmlcodetutorial.com/tables/_TD_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TD_BGCOLOR.htmlhttp://www.htmlcodetutorial.com/tables/_TD_BGCOLOR.html


11/23


SalesClaire Horne 4827

Bruce Eckel 7246

Danny Zeman 5689

which creates

Production

Raha Mutisya 1493

Shalom Buraka 3829

Brandy Davis 0283

Sales

Claire Horne 4827

Bruce Eckel 7246

Danny Zeman 5689

Note that in the two rows after each header, the first cell in the row ends up in the secondcolumn because the first column is taken up by the multi-column cell.


12/23


frames

1

2

3

4

5

6

7

8

Kumpulan Tag HTML


13/23


Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akanterlihat pada browser Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut Membuat nama bagian yang didefinisikan pada link pada halaman yang sama Sebagai awal dari Java applets

Mendefinisikan daerah yang dapat diklik (link) pada image map Membuat teks tebal Membuat atribut teks default seperti jenis, ukuran dan warna font Memberi (suara latar) background sound pada halaman web Memperbesar ukuran teks sebesar satu point dari defaultnya Membuat teks berkedip Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
Pindah baris Membuat caption pada tabel Untuk perataan tengah terhadap teks atau gambar

Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser

Indents teks Represents different sections of text. Menambahkan sound or file avi ke halaman web Seperti tag Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks Mendefinisikan input form Mendefinisikan frame Mendefinisikan attribut halaman yang akan menggunakan frame ... Ukuran font

Mendefinisikan head document. Membuat garis horizontal Bararti dokumen html Membuat teks miring Image, imagemap atau an animation Mendefinisikan input field pada form Membuat bullet point atau baris baru pada list (berpasangan dengan tag , ,

and )

Mendefinisikan client-side map Membuat scrolling teks (teks berjalan) - hanya pada MS IE Mencegah ganti baris pada teks atau images Jika browser user tidak mendukung frame Mendefinisikan awal dan akhir list

Ganti paragraf Membuat teks dengan ukuran huruf yg sama Mendefinisikan awal script Membuat tabel


14/23


Kolom pada tabel Mendefinisikan title Baris pada tabel Membuat teks bergaris bawah

Kode untuk karakter khusus

Simbol Karakter yg ditampilkan " " & & < < > >


15/23


WITH ENGGLIS

Frames Tutorial

Let's look at a basic example of how frames work:

The frameset file is the file you point your browser to.The frameset file uses and to tell the browser to go get more files to put on the page.

The browser goes out again and retrieves the files whichwill appear on the page.
http://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.html


16/23


The browser puts all the files on one page in separaterectangles ("frames"). The user never sees anything fromthe original frameset file.

Think of frames as creating a "table of documents" on the page. Like a table, a group of frames has rows and columns. Each cell of the table contains a document which is stored

in a separate file. defines the beginning and end of the table, and howmany rows and columns that table will have. defines what will go into eachcell ("frame") of the table.

Let's look in more detail at the example above. The entire contents of basicframeset.html (the frameset file) look like this:

This code ... creates this page (here's the real thing )

A Basic Example ofFrames

No Frames? No

Problem!Take a look at ourno-frames

version.
http://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/basicframeset.htmlhttp://www.htmlcodetutorial.com/frames/basicframeset.htmlhttp://www.htmlcodetutorial.com/frames/basicframeset.htmlhttp://www.htmlcodetutorial.com/frames/basicframeset.htmlhttp://www.htmlcodetutorial.com/frames/basicframeset.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET.html


17/23


Here's a line-by-line explanation of each piece of code for the frames:

The table should also have two columns. The second column should take up 40%of the width of the page, the first column should take up the rest.

Put the four files into the frames. ...

Every framed page should have a no-frames alternative. The contentshould go inside the outermost tag, usually just before the last . The most efficicent method for no-frames content is to link to a

page which is specifically designed for no-frames.

End the frameset.

There are several other aspects of frames to note from this example:

is used instead of the tag. The frameset file has no

content which appears on the page, so it has no need for , whichdesignates the content of the page. In fact, if you use (except inside), the frames will not appear. Tags in , including ,still have their intended effects.

Rows and columns are described by a list of widths or heights. For exampleCOLS="25%, *, 40%" says that there will be three columns. The first columntakes up 25% of the width of the page, the third column takes up 40% of the widthof the page, and the asterisk ("*") means "whatever is left over". See COLS andROWS for more details.

You do not explicitly designate the start and ending of each row. The browser keeps adding frames until it reaches the number designated by COLS, then starts

another row.
http://www.htmlcodetutorial.com/frames/_NOFRAMES.htmlhttp://www.htmlcodetutorial.com/frames/_NOFRAMES.htmlhttp://www.htmlcodetutorial.com/frames/_NOFRAMES.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_FRAMESET_COLS.htmlhttp://www.htmlcodetutorial.com/frames/_NOFRAMES.html


18/23


Nested Framesets

Let's move now to a more real world example, and a few more techniques for usingframes. One of the most popular uses for frames is the "title bar and side menu" method.We'll use as an example a page of recipes, pictured at right. The title of the page, "GreatRecipes" stays stationary in a frame at top, a contents list is on the left, and the recipesthemselves are in the large box on the right. As you click on the name of a recipe in thecontents list, that recipe appears on the right. Go ahead and try out the real page . (We'resorry if these recipes make you hungry. They did us. These recipes come from thewonderful vegetarian recipe site Veggies Unite! .)

Remember that a frameset is like a "table of documents" with rows and columns. Therecipes page, however, has one column on top, but two on bottom. This is done bynesting framesets, putting one frameset inside another.

Here's the code for the frameset file for the recipes page:

Great Recipes

Great RecipesNo frames? No Problem! Take a look at ourno-frames version.
http://www.htmlcodetutorial.com/frames/recipesframetop.htmlhttp://www.htmlcodetutorial.com/frames/recipesframetop.htmlhttp://www.htmlcodetutorial.com/frames/recipesframetop.htmlhttp://vegweb.com/http://vegweb.com/http://vegweb.com/http://vegweb.com/http://www.htmlcodetutorial.com/frames/recipesframetop.html


19/23


The first tag says "this framesetwill have two rows" (and,implicitly, only onecolumn, since COLS was

left out). The first tag puts a documentin the first frame. Thesecond frame is filled innot by a document but byanother frameset. Thesecond is creating a "table withina table", or, to be morecorrect, a frameset withina frameset.

Targeting Frames

Each frame is given a name using . These names uniquely identifyeach frame. Using these names, links in other frames can tell the browser which framethe link targets.

For example, this code creates a framed page, naming the frames TITLE , SIDEBAR , andMAIN:

NOFRAMES stuff

To target one of these frames, the link should have a TARGET attribute set to the name of the frame where the linked page should appear. So, for example, this code creates a link to tfetacos.html and targets that link to the MAIN frame:

this code produces thismy link the link in this pag

frameset within frameset
http://www.htmlcodetutorial.com/frames/_FRAME_NAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME_NAME.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME_NAME.htmlhttp://www.htmlcodetutorial.com/linking/_A_TARGET.htmlhttp://www.htmlcodetutorial.com/linking/_A_TARGET.htmlhttp://www.htmlcodetutorial.com/linking/_A_TARGET.htmlhttp://www.htmlcodetutorial.com/frames/tfetop.htmlhttp://www.htmlcodetutorial.com/frames/tfetop.htmlhttp://www.htmlcodetutorial.com/frames/tfetop.htmlhttp://www.htmlcodetutorial.com/frames/tfetop.htmlhttp://www.htmlcodetutorial.com/linking/_A_TARGET.htmlhttp://www.htmlcodetutorial.com/frames/_FRAME_NAME.html


20/23


Targeting the Whole Window

Eventually in a framed site you want to "break out"... link to a page and have that pagetake over the entire window. To create this sort of link, we add TARGET="_top" to the tag:

this code produces this the link in this page In the previous example weused TARGET to refer to aframe we had named MAIN.In this example, however,we refer to a frame we never named: "_top" . We can dothis because the outermost

frame (that is, the entirewindow) is already named "_top" . "_top" is a reservedname which is automaticallygiven to the entire window.So when we sayTARGET="_top" , we aresaying "put the new web

page in the entire window". Note that "_top" needs to bein all lower-case, it should

have quotes around it, anddon't forget the underscore("_").

No matter what the other frames are named,the entire window is always named "_top"

Forms Tutorial

Let's look at a very simple form:

this code produces this

favorite color:

favorite color:

This form has all the required elements for a form:
http://www.htmlcodetutorial.com/frames/targetww_top.htmlhttp://www.htmlcodetutorial.com/frames/targetww_top.htmlhttp://www.htmlcodetutorial.com/frames/targetww_top.htmlhttp://www.htmlcodetutorial.com/frames/frames_famsupp_11.htmlhttp://www.htmlcodetutorial.com/frames/frames_famsupp_11.htmlhttp://www.htmlcodetutorial.com/frames/frames_famsupp_11.htmlhttp://www.htmlcodetutorial.com/frames/frames_famsupp_11.htmlhttp://www.htmlcodetutorial.com/frames/targetww_top.html


21/23


Start the form here. The ACTION attribute, which is required with every tag, is used with CGI, discussed below .

Data entry field. creates most types of form fields, but and also create certain types.

End the form here.

Of course, this form doesn't do much. You can type something into the one field, butthat's it, nothing happens from there. In the next section, we expand the form a little.

Forms and CGI

The original and still most popular use for forms is in conjunction with CGI ( C ommonG ateway Interface). In the CGI way of doing things, the data the user enters is sent to theweb server, where a program processes the data and returns the results. In other words, all

the data is processed on the server, not in the web browser.

Let's expand our earlier example to show how to incorporate CGI:

favorite color:

which gives us

favorite color:Submit

Here's what the new pieces mean:

ACTION tells the browser where to send the data for processing (more on thatshortly). ACTION is required with every form, even forms that don't use CGI.

We've added the NAMEattribute. NAMEidentifies each field, "names" it so it can bereferred to later.

This tag creates the "submit" button, which the user presses to sendthe form to the web server.

That's the basic set up for a CGI form, but what happens after the user presses Submit ?Consider, for example, this simple form:

Join our mailing list
http://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/index_famsupp_7.htmlhttp://www.htmlcodetutorial.com/forms/index_famsupp_7.htmlhttp://www.htmlcodetutorial.com/forms/index_famsupp_7.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/_SELECT.htmlhttp://www.htmlcodetutorial.com/forms/_SELECT.htmlhttp://www.htmlcodetutorial.com/forms/_SELECT.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.htmlhttp://www.htmlcodetutorial.com/forms/_SELECT.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/_TEXTAREA.htmlhttp://www.htmlcodetutorial.com/forms/index_famsupp_7.htmlhttp://www.htmlcodetutorial.com/forms/_FORM_ACTION.html


22/23


Name:

E-mail:

Submit

Here's the chain of events when the user hits "Submit":

1. When the user presses Submit, the browser sends the form data to the web server.2. The web server launches the CGI program which was written to process this form.3. The CGI program does whatever it does with the data. The program might consult

a database, perform calculations on the data, use the data to add the user to amailing list, whatever the programmer wants it to do. Whatever else the programdoes, it generates a web page using HTML so the user can see the results of submitting the form.

4. The CGI program passes the HTML back to the web server.5. The web server passes the HTML back to the browser.

So there are three pieces to the CGI process: the form on your web page, the web server,and the CGI program. This guide deals with the first part: how to use HTML to make a

form. Your web administrator handles the web server, and for a good guide on how towrite CGIs, we recommend James Marshall's excellent (and short) CGI Made ReallyEasy .

NOTE: If you want to get started writing HTML forms but don't have a CGI set up yet,you can use our publicly available CGI at ../cgi-bin/mycgi.pl . This CGI will produce aweb page of all the fields sent to it, so you can see if the forms work the way youintended. Most of the forms on the rest of this page will use this CGI.
http://www.jmarshall.com/easy/cgi/http://www.jmarshall.com/easy/cgi/http://www.jmarshall.com/easy/cgi/http://www.jmarshall.com/easy/cgi/http://www.htmlcodetutorial.com/cgi-bin/mycgi.plhttp://www.htmlcodetutorial.com/cgi-bin/mycgi.plhttp://www.htmlcodetutorial.com/cgi-bin/mycgi.plhttp://www.htmlcodetutorial.com/cgi-bin/mycgi.plhttp://www.jmarshall.com/easy/cgi/http://www.jmarshall.com/easy/cgi/


23/23

www teguhwidodo vv si Page 23

Technically speaking there is no such thing as "a CGI". "CGI" is a standard protocol, notan actual implementation. However, it has become common to refer to a program whichuses the CGI standard as "a CGI", and we will follow that custom here.

One of the reasons CGI is so popular is that the CGI program can be written in just about

any programming language: C, C++, Perl (the most popular language for CGI), VisualBasic, etc. CGI was designed to allow great flexibility in processing the form data, whilestill allowing the results to be returned as HTML (or other formats, but HTML is themost popular).

belajar html by bersatu kita teguh

Documents