http://www.htmlcodetutorial.com/tables/index_famsupp_177.

html Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Sebuah halaman web minimal mempunyai empat buat tag, yaitu : <HTML> Sebagai tanda awal dokumen HTML. <HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tagtag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). Contoh : <TITLE>Tips HTML -- www.klik-kanan.com</TITLE> <BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain. Atribut : BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN. Contoh : <BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF"> Sebuah contoh sederhana dokumen HTML : <HTML> <HEAD> <TITLE>Halaman pembuka </TITLE> </HEAD> <BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000"> Letakkan text, images, dan link Anda di sini </BODY> </HTML>

Pengaturan Teks Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks : Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. Contoh : <H2>Tutorial Html</H2> Hasilnya akan terlihat seperti : Tutorial Html Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Line Break: <BR> Digunakan untuk pindah ke baris baru. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang. Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR. SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masingmasing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh : <FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>

Tag FONT akan mengoverwrite setting pada BASEFONT. Attribut sama dengan attribut FONT. <B> Bold text <I> Italic text <U> Underscore <TT> Typewriter <S> Strikeout . selalu dalam italics. masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks.Hasilnya akan terlihat seperti : Contoh teks yang berwarna merah Contoh lainnya : <FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC"> Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". .Helvetica" COLOR="#FF0000"> Selain tag dan atribut di atas. Contoh : <BASEFONT SIZE=2 FACE="Arial.draws a line through the text <PRE> Preformatted Text <DFN> Definition <BLINK> Text berkedip (lebih baik jangan digunakan) <STRONG> Strong <ADDRESS> Italic <CITE> Digunakan untuk quoting text <CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) <SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) <KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) <BIG> Ukuran teks akan lebih besar satu ukuran <SMALL> Ukuran teks akan lebih kecil satu ukuran <SUP> Membuat tekssuperscript <SUB> membuat tekssub script <ABBREV> Abbreviations <ACRONYM> Untuk akronim <PERSON> Digunakan untuk indexing <Q> Membuat short inline quotation <VAR> Membuat variable name. yaitu : Perhatian : Semua tag di bawah ini membutuhkan tap penutup.

b. Item nomer 1 2.Default numbers. . List entries juga didefinisikan dengan <LI> tag. yaitu : Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. B. 1. 3. A. Contoh : <UL> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </UL> Hasil dari kode di atas adalah: • • • Item nomer 1 Item nomer 2 Item nomer 3 Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc.Lists Terdapat tiga tipe list yang dapat digunakan. Contoh : <UL COMPACT TYPE=square> … Ordered Lists: <OL> Juga digunakan untuk membuat daftar item. dengan tiap item dapat menggunakan angka arab atau romawi.Huruf kecil. etc. a. A. C. etc. c. etc. a.Huruf besar. Contoh : <OL TYPE=I> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </OL> Hasil dari kode di atas adalah : 1. List entries didefinisikan dengan tag <LI>. 2. Item nomerr 2 3. circle atau square bullet point. Item nomerr 3 Untuk TYPE Anda dapat juga menggunakan : 1.

html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda. i. <A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama. <DD> Penjelasan tentang item kedua </DL> Hasil dari kode di atas adalah : Item pertama. II.gif" hspace=10 vspace=5 align=right border=2> Links : Digunakan untuk membuat link ke halaman lain. Contoh : <A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain. ii. <A HREF="halamanlain. Definition Lists: <DL> Contoh : <DL> <DT> Item pertama. Item kedua. III. border.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.I. <A HREF="mailto:webmaster@klik-kanan. right).Romawi huruf kecil . . <DD> Penjelasan tentang item pertama.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100> <IMG SRC="logo. i. I. align=(center. <DT> Item kedua. Atribut : alt. vspace.Romawi huruf besar. width & height Contoh : <IMG SRC="logo. Penjelasan tentang item kedua Images Images : Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. left. Penjelasan tentang item pertama. etc. hspave. etc. iii. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.

middle atau bottom.ukuran tabel dalam pixel atau percent.warna latar belakang colspan .<A HREF="halaman2. Terdiri dari atribut: • • • align . <TR>. middle atau bottom. valign . Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE> Terdiri dari atribut : • • • • • • align .lihat gambar contoh valign . Tabel Tabel sangat penting artinya dalam desain web. bgcolor . • • • • • • • • align .ukuran tinggi cell dalam pixels.html"><IMG SRC="gambar. Contoh : <TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%"> <TR> Tag ini digunakan untuk membuat baris baru (pada tabel). bgcolor .jarak antar cell (dalam pixel). dan <TD>. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. rowspan .warna latar belakang (background) dari tabel. nowrap .perataan : rata kiri (left).perataan : rata kiri (left). Contohnya seperti pada halaman web yang sedang Anda baca ini.perataan background .lihat gambar contoh height . Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>.warna latar belakang dari baris.jarak antara isi cell dengan batas cell (dalam pixel). .ukuran lebar border tabel (dalam pixel).perataan vertikal :top. tengah (center) atau kanan (right).perataan vertikal : top. tengah (center) atau kanan (right).image yang digunakan sebagai latar belakang dari kolom. border . Contoh : <TR align="right" bgcolor="#0000FF" valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel. cellspacing . cellpadding .membuat supaya isi dari kolom tetap berada pada satu baris. bgcolor . width .gif"></A> Untuk membuat link dengan menggunakan gambar.

</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp. Suppose we have four people whose names we want on the list.ukuran kolom dalam pixel atau percen.</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp. The data could be arranged in a table like this: <TABLE> <TR> <TD>Raha Mutisya</TD> <TR> <TD>Shalom Buraka</TD> <TR> <TD>Hallie Curry</TD> <TR> <TD>Shari Silberglitt</TD> </TABLE> <TD>1493</TD> <TD>3829</TD> <TD>8372</TD> <TD>4827</TD> </TR> </TR> </TR> </TR> Which gives us this table: Raha Mutisya Shalom Buraka Hallie Curry Shari Silberglitt 1493 3829 8372 4827 This table uses the basic three tags all tables must have: .gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300"> <table width="100" border="1" cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#0000FF"> &nbsp.</td> <td rowspan="2" bgcolor="#FF3366">&nbsp.</td> <td rowspan="2" bgcolor="#FF3366">&nbsp.• width .</td> </tr> </table> <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#0000FF">&nbsp.</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp.</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp. Contoh : <TD align="right" background="back.</td> </tr> </table> Tables Tutorial Let's begin with a simple and common use for tables: an office phone list.</td> <td bgcolor="#FFFF66">&nbsp. </td> <td bgcolor="#FFFF66">&nbsp.

.> <TR ... Most of the overall properties of the table are defined here.> creates the table..> <TABLE . even if you remove them before making the table public. controls the space between table cells..> <TD . To give your table cells a little more breathing room. browsers usually use a default of 2.. (Table Row) defines each row of the table. (Table Data) defines each cell of the table. Although there is no official default. use CELLPADDING and CELLSPACING. The first modification we'll make to this little table is to add borders. table cells tend to be squeezed close to each other.. CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table..> <TR .> <TD .. . The default is 1... <TABLE BORDER=2> <TR> <TD>Raha Mutisya</TD> <TR> <TD>Shalom Buraka</TD> <TR> <TD>Hallie Curry</TD> <TR> <TD>Shari Silberglitt</TD> </TABLE> <TD>1493</TD> <TD>3829</TD> <TD>8372</TD> <TD>4827</TD> </TR> </TR> </TR> </TR> which gives us Raha Mutisya Shalom Buraka Hallie Curry Shari Silberglitt CELLPADDING 1493 3829 8372 4827 and CELLSPACING By default. Borders will help us see how the table is laid out.<TABLE .. CELLSPACING <TABLE BORDER> <TABLE BORDER CELLSPACING=2> <TABLE BORDER CELLSPACING=10> peaches cherries walnuts almonds CELLPADDING peaches cherries walnuts almonds peaches walnuts cherries almonds sets the amount of space between the contents of the cell and the cell wall. It's a good idea when designing a table to add borders during the time you design the table. such as if it has borders and what is the table's background color.

. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up. the header cells in the first and fifth rows span across two columns to indicate the department for each group of names. In this table. giving the table a more visually organized look. Let's add some color to the headers using BGCOLOR.<TABLE BORDER> <TABLE BORDER CELLPADDING=1> <TABLE BORDER CELLPADDING=10> peaches cherries walnuts almonds peaches cherries walnuts almonds peaches walnuts cherries almonds COLSPAN and ROWSPAN Table cells can span across more than one column or row. For example. we might want to create header cells for each department in our table of names and phone numbers. <TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TABLE> </TR> </TR> </TR> </TR> </TR> </TR> which gives us: Production Raha Mutisya 1493 Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman 4827 7246 5689 0283 It often happens with multiple-column cells that a little color helps to set off the headers.

even if the table won't ultimately use borders.<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE> which gives this table: Production Raha Mutisya 1493 Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman ROWSPAN 0283 4827 7246 5689 sets how many rows a cell spans. This table code creates two header cells which span three rows each: <TABLE BORDER=2 CELLPADDING=4> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> . ROWSPAN can get a little confusing because it requires 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.

frames . the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.<TR> </TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE> which creates Raha Mutisya 1493 Production Shalom Buraka 3829 Brandy Davis Claire Horne Sales Bruce Eckel Danny Zeman 0283 4827 7246 5689 Note that in the two rows after each header.

50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame3"> </FRAMESET></FRAMESET> 6 <FRAMESET cols="*. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut <a href> .70%"> <FRAME SRC="menu.50%"> <FRAME SRC="menu.50%"> <FRAME SRC="menu.60"> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET></FRAMESET> Kumpulan Tag HTML <!---> Memberi komentar atau keterangan.htm" NAME="Frame1"> <FRAME SRC="menu.50%"> <FRAMESET rows="50%.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%.1 <FRAMESET cols="*.15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame2"> </FRAMESET> 5 <FRAMESET rows="*.htm" NAME="Frame1"> <FRAME SRC="menu.70%.70%.50%"> <FRAME SRC="homepage.*"> <FRAME SRC="homepage.*"> <FRAME SRC="homepage.60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%.15%"> <FRAME SRC="menu.htm" NAME="Frame1"> <FRAMESET rows="15%.140"> <FRAME SRC="homepage.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 8 <FRAMESET rows="15%.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> 2 <FRAMESET cols="100.htm" NAME="Frame2"> </FRAMESET> 4 <FRAMESET rows="*.15%.htm" NAME="Frame2"> </FRAMESET> 3 <FRAMESET rows="100.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 7 <FRAMESET cols="50%.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame2"> <FRAME SRC="menu2.

<a name> <applet> <area> <b> <basefont> <bgsound> <big> <blink> <body> <br> <caption> <center> <comment> <dd> <div> <embed> <fn> <font> <form> <frame> <frameset> <head> <hr> <html> <i> <img> <input> <li> <map> <marquee> <nobr> <noframes> <ol> <p> <pre> <script> <table> <td> <title> <tr> <u> 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.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 Kolom pada tabel Mendefinisikan title Baris pada tabel Membuat teks bergaris bawah <h1> . Membuat garis horizontal Bararti dokumen html Membuat teks miring Image.. ukuran. imagemap atau an animation Mendefinisikan input field pada form Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>. <ol> and <ul> ) Mendefinisikan client-side map Membuat scrolling teks (teks berjalan) . <menu>. Menambahkan sound or file avi ke halaman web Seperti tag <a name> Mengganti jenis. warna huruf yang akan digunakan utk teks Mendefinisikan input form Mendefinisikan frame Mendefinisikan attribut halaman yang akan menggunakan frame Mendefinisikan head document. <h6> Ukuran font Kode untuk karakter khusus Simbol Karakter yg ditampilkan . 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..

&dagger. &rsquo. &ensp. &mdash. &thinsp. &circ. &lsquo. & &lrm. &sbquo. &emsp. &oelig. & &rlm. " & < > Œ œ Š š Ÿ ˆ ˜       – — ‘ ’ ‚ “ ” „ † ‡ ‰ ‹ › € WITH ENGGLIS Frames Tutorial Let's look at a basic example of how frames work: . &scaron. &amp. &zwnj. &ldquo. &euro. &permil. &rsaquo. &OElig. &bdquo. &rdquo. ‌ ‍ &zwj. &gt. &tilde. &lsaquo. &Scaron. &Dagger. &ndash. &Yuml. &lt.&quot.

a group of frames has rows and columns. <FRAME . <FRAMESET .> defines what will go into each cell ("frame") of the table. The frameset file uses <FRAMESET .The frameset file is the file you point your browser to.. and how many rows and columns that table will have.> and <FRAME . .> defines the beginning and end of the table.. Each cell of the table contains a document which is stored in a separate file. The user never sees anything from the original frameset file...> to tell the browser to go get more files to put on the page. The browser puts all the files on one page in separate rectangles ("frames").. Like a table.. The browser goes out again and retrieves the files which will appear on the page.. Think of frames as creating a "table of documents" on the page..

Every framed page should have a no-frames alternative.html"> <FRAME SRC="frameb.html"> SRC="framec. The first row should take up 75% of the height of the page. COLS="*. the first column should take up the rest. The <NOFRAMES> content should go inside the outermost <FRAMESET . </NOFRAMES> </FRAMESET> </HTML> .Let's look in more detail at the example above. usually just before the last </FRAMESET>..html (the frameset file) look like this: This code <HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="75%.. *" COLS="*.html"> SRC="framed. 40%"> <FRAME SRC="framea. The table should have two rows. the second should take up the rest. The most efficicent method for no-frames content is to link to a page which is specifically designed for no-frames. creates this page (here's the real thing) Here's a line-by-line explanation of each piece of code for the frames: <FRAMESET ROWS="75%. *" Start the "table of documents".html"> SRC="frameb.. The second column should take up 40% of the width of the page. </NOFRAMES> Put the four files into the frames..html"> <FRAME SRC="framed. SRC="framea. The entire contents of basicframeset. .html"> <NOFRAMES> <H1>No Frames? No Problem! </H1> Take a look at our <A HREF="basic.html">no -frames</A> version.html"> <NOFRAMES> .html"> <FRAME SRC="framec. 40%"> <FRAME <FRAME <FRAME <FRAME The table should also have two columns...noframes.> tag.

has one column on top.. Here's the code for the frameset file for the recipes page: <HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD> <FRAMESET ROWS="15%. the third column takes up 40% of the width of the page..*"> <FRAME SRC="recipetitlebar.. pictured at right. that recipe appears on the right.</FRAMESET> End the frameset. Tags in <HEAD>. There are several other aspects of frames to note from this example: • • • is used instead of the <BODY .> Nested Framesets Let's move now to a more real world example.. 40%" says that there will be three columns. Rows and columns are described by a list of widths or heights. See COLS and ROWS for more details. The recipes page. This is done by nesting framesets. then starts another row... Go ahead and try out the real page. The frameset file has no content which appears on the page. and the recipes themselves are in the large box on the right. We'll use as an example a page of recipes. and a few more techniques for using frames. (We're sorry if these recipes make you hungry. For example COLS="25%. "Great Recipes" stays stationary in a frame at top. You do not explicitly designate the start and ending of each row.html" NAME=TITLE SCROLLING=NO> .) Remember that a frameset is like a "table of documents" with rows and columns. still have their intended effects. One of the most popular uses for frames is the "title bar and side menu" method. In fact. *. which designates the content of the page. The browser keeps adding frames until it reaches the number designated by COLS. including <TITLE>.> tag. These recipes come from the wonderful vegetarian recipe site Veggies Unite!. if you use <BODY . <FRAMESET . As you click on the name of a recipe in the contents list.. and the asterisk ("*") means "whatever is left over".> (except inside <NOFRAMES>). They did us. The first column takes up 25% of the width of the page.>. so it has no need for <BODY . however.. The title of the page. a contents list is on the left. the frames will not appear. putting one frameset inside another. but two on bottom.

..> tag puts a document in the first frame.> is creating a "table within a table".> tag says "this frameset will have two rows" (and.<FRAMESET COLS="20%. links in other frames can tell the browser which frame the link targets. to be more correct. The second <FRAMESET . implicitly. or. Targeting Frames Each frame is given a name using <FRAME NAME=". </NOFRAMES> </FRAMESET> </HTML> The first <FRAMESET . SIDEBAR. For example.html" NAME=RECIPES> </FRAMESET> <NOFRAMES> <H1>Great Recipes</H1> No frames? No Problem! Take a look at our <A frameset within frameset HREF="recipes.html" NAME=SIDEBAR> <FRAME SRC="recipes... and MAIN: <FRAMESET ROWS="15%.*"> <FRAME SRC="recipesidebar.html">no-frames</A> version. this code creates a framed page.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1> .. since COLS was left out).. These names uniquely identify each frame.*"> <FRAME SRC="tfetitle.. only one column. The second frame is filled in not by a document but by another frameset. a frameset within a frameset.">. naming the frames TITLE. Using these names. The first <FRAME ..

. the link should have a TARGET attribute set to the name of the frame where the linked page should appear. link to a page and have that page take over the entire window. In this example. We can do this because the outermost frame (that is.. To create this sort of link..*"> <FRAME SRC="tfesidebar. we add TARGET="_top" to the <A . the entire window) is already named "_top". Note that "_top" needs to be in all lower-case. So. So when we say No matter what the other frames are named.> tag: this code <A HREF="wwtarget. however.html" NAME=SIDEBAR> <FRAME SRC="tfemain.html" NAME=MAIN> </FRAMESET> <NOFRAMES>NOFRAMES stuff </NOFRAMES> </FRAMESET> To target one of these frames. "_top" is a reserved name which is automatically given to the entire window. this code creates a link to tfetacos.html" TARGET=MAIN>my link</A> the link in this pag Targeting the Whole Window Eventually in a framed site you want to "break out".html and targets that link to the MAIN frame: this code produces this <A HREF="tfetacos. and don't forget the underscore ("_")..html" TARGET="_top"> produces this the link in this page In the previous example we used TARGET to refer to a frame we had named MAIN.<FRAMESET COLS="20%. for example. . it should have quotes around it. TARGET="_top". we refer to a frame we never named: "_top". we are the entire window is always named "_top" saying "put the new web page in the entire window".

In other words.pl"> favorite color: <INPUT name="favecolor"> <INPUT TYPE=SUBMIT VALUE="Submit"> </FORM> which gives us favorite color: Here's what the new pieces mean: <FORM ACTION="/cgi-bin/mycgi. Of course. In the CGI way of doing things. where a program processes the data and returns the results. this form doesn't do much. In the next section. <INPUT . Forms and CGI The original and still most popular use for forms is in conjunction with CGI (Common Gateway Interface).pl"> favorite color: <INPUT NAME="color"> </FORM> produces this favorite color: This form has all the required elements for a form: <FORM ACTION="/cgi-bin/mycgi.. all the data is processed on the server. The ACTION attribute.> and <SELECT .> tag...> also create certain types. You can type something into the one field. the data the user enters is sent to the web server. which is required with every <FORM .. not in the web browser.. discussed below.> creates most types of form fields..pl"> Start the form here. </FORM> End the form here. <INPUT NAME="color"> Data entry field. but <TEXTAREA .pl"> . but that's it.. nothing happens from there. is used with CGI.Forms Tutorial Let's look at a very simple form: this code <FORM ACTION="/cgi-bin/mycgi. Let's expand our earlier example to show how to incorporate CGI: <FORM ACTION="/cgi-bin/mycgi. we expand the form a little..

even forms that don't use CGI.> tag creates the "submit" referred to later.. use the data to add the user to a mailing list. The program might consult a database. . 2. When the user presses Submit. Whatever else the program does. the form to the web server. NAME identifies each field. That's the basic set up for a CGI form. for example. The web server launches the CGI program which was written to process this form. The CGI program does whatever it does with the data. ACTION is required with every form. it generates a web page using HTML so the user can see the results of submitting the form. ACTION <INPUT name="favecolor"> We've added the NAME attribute. whatever the programmer wants it to do. 3. which the user presses to send <INPUT TYPE=SUBMIT VALUE="Submit"> This <INPUT . the browser sends the form data to the web server. this simple form: Join our mailing list Name: E-mail: Here's the chain of events when the user hits "Submit": 1. but what happens after the user presses Submit? Consider.. perform calculations on the data. "names" it so it can be button.tells the browser where to send the data for processing (more on that shortly).

.. and the CGI program. 5. One of the reasons CGI is so popular is that the CGI program can be written in just about any programming language: C. but HTML is the most popular). the web server. Your web administrator handles the web server. So there are three pieces to the CGI process: the form on your web page. and we will follow that custom here. we recommend James Marshall's excellent (and short) CGI Made Really Easy. NOTE: If you want to get started writing HTML forms but don't have a CGI set up yet. C++. This CGI will produce a web page of all the fields sent to it. The CGI program passes the HTML back to the web server. and for a good guide on how to write CGIs. This guide deals with the first part: how to use HTML to make a form. you can use our publicly available CGI at . CGI was designed to allow great flexibility in processing the form data. Visual Basic. "CGI" is a standard protocol. so you can see if the forms work the way you intended. Technically speaking there is no such thing as "a CGI".4. Most of the forms on the rest of this page will use this CGI. it has become common to refer to a program which uses the CGI standard as "a CGI". The web server passes the HTML back to the browser./cgi-bin/mycgi. etc. not an actual implementation. Perl (the most popular language for CGI). while still allowing the results to be returned as HTML (or other formats.pl. However.

Sign up to vote on this title
UsefulNot useful