Untuk Dimengerti

Modul 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 tag-tag 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 masing-masing 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>

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". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - 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, selalu dalam italics.


Lists
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
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, circle atau square bullet point.
Contoh :

<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :

<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
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.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists: <DL>
Contoh :

<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
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 :
<IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>

<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh :

<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.
Tabel
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table 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 : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>
<TABLE>
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 :

<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR>
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 :

<TR align="right" bgcolor="#0000FF" valign=top>
<TD>
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.
Contoh :

<TD align="right" background="back.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 bgcolor="#FFFF66">&nbsp;</td>
<td rowspan="2" bgcolor="#FF3366">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66">&nbsp;</td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99">&nbsp;</td>
</tr>
</table>
 




<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF">&nbsp; </td>
<td bgcolor="#FFFF66">&nbsp;</td>
<td rowspan="2" bgcolor="#FF3366">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66">&nbsp;</td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99">&nbsp;</td>
</tr>
</table>

Tables Tutorial

Let's begin with a simple and common use for tables: an office phone list. Suppose we have four people whose names we want on the list. The data could be arranged in a table like this: 
<TABLE>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD>      <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
Which gives us this table:
Raha Mutisya
1493
Shalom Buraka
3829
Hallie Curry
8372
Shari Silberglitt
4827
This table uses the basic three tags all tables must have:
<TABLE ...>
<TABLE ...> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color.
<TR ...>
<TR ...> (Table Row) defines each row of the table.
<TD ...>
<TD ...> (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 us see how the table is laid out. It's a good idea when designing a table to add borders during the time you design the table, even if you remove them before making the table public. 
<TABLE BORDER=2>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD>      <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
illustration of CELLSPACING attributeillustration of CELLPADDING attribute</TABLE>
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 a little 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. 

<TABLE BORDER>
 
<TABLE BORDER CELLSPACING=2>
 
<TABLE BORDER CELLSPACING=10>
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 out the contents of the table. 

<TABLE BORDER>
 
<TABLE BORDER CELLPADDING=1>
 
<TABLE BORDER CELLPADDING=10>
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 ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell 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 span across two columns to indicate the department for each group of names. 
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>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>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 us:
Production
Raha Mutisya
1493
Shalom Buraka
3829
Brandy Davis
0283
Sales
Claire Horne
4827
Bruce Eckel
7246
Danny Zeman
5689
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 using BGCOLOR. 
<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
0283
Sales
Claire Horne
4827
Bruce Eckel
7246
Danny Zeman
5689
ROWSPAN sets how many rows a cell spans. 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, even if the table won't ultimately use borders.
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>
    </TR>
<TR>
    <TD>Danny Zeman</TD> <TD>5689</TD>
    </TR>
</TABLE>
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 second column because the first column is taken up by the multi-column cell.












frames
frames
1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>

6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>
Kumpulan Tag HTML
<!--    -->
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href>
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>
Sebagai awal dari Java applets
<area>
Mendefinisikan daerah yang dapat diklik (link) pada image map
<b>
Membuat teks tebal
<basefont>
Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>
Memberi (suara latar) background sound pada halaman web
<big>
Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>
Membuat teks berkedip
<body>
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>
Pindah baris
<caption>
Membuat caption pada tabel
<center>
Untuk perataan tengah terhadap teks atau gambar
<comment>
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>
Indents teks
<div>
Represents different sections of text.
<embed>
Menambahkan sound or file avi ke halaman web
<fn>
Seperti tag <a name>
<font>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>
Mendefinisikan input form
<frame>
Mendefinisikan frame
<frameset>
Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6>
Ukuran font
<head>
Mendefinisikan head document.
<hr>
Membuat garis horizontal
<html>
Bararti dokumen html
<i>
Membuat teks miring
<img>
Image, imagemap atau an animation
<input>
Mendefinisikan input field pada form
<li>
Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map>
Mendefinisikan client-side map
<marquee>
Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr>
Mencegah ganti baris pada teks atau images
<noframes>
Jika browser user tidak mendukung frame
<ol>
Mendefinisikan awal dan akhir list
<p>
Ganti paragraf
<pre>
Membuat teks dengan ukuran huruf yg sama
<script>
Mendefinisikan awal script
<table>
Membuat tabel
<td>
Kolom pada tabel
<title>
Mendefinisikan title
<tr>
Baris pada tabel
<u>
Membuat teks bergaris bawah

Kode untuk karakter khusus
Simbol
Karakter yg ditampilkan
&quot;
"
&amp;
&
&lt;
< 
&gt;
> 
&OElig;
Œ
&oelig;
œ
&Scaron;
Š
&scaron;
š
&Yuml;
Ÿ
&circ;
ˆ
&tilde;
˜
&ensp;
 
&emsp;
 
&thinsp;
 
&zwnj;
‌
&zwj;
‍
&lrm;
‎
&rlm;
‏
&ndash;
–
&mdash;
—
&lsquo;
‘
&rsquo;
’
&sbquo;
‚
&ldquo;
“
&rdquo;
”
&bdquo;
„
&dagger;
†
&Dagger;
‡
&permil;
‰
&lsaquo;
‹
&rsaquo;
›
&euro;
€




WITH ENGGLIS

Frames Tutorial

Let's look at a basic example of how frames work:
The frameset file...
The frameset file is the file you point your browser to.
The frameset file uses <FRAMESET ...> and <FRAME ...> to tell the browser to go get more files to put on the page.
tells the browser to go get these four files
The browser goes out again and retrieves the files which will appear on the page.
and put them all on one page in separate rectangles ('frames').
The browser puts all the files on one page in separate rectangles ("frames"). The user never sees anything from the 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. <FRAMESET ...> defines the beginning and end of the table, and how many rows and columns that table will have. <FRAME ...> defines what will go into each cell ("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)
 
<HTML>
<HEAD>
<TITLE>A Basic Example of Frames</TITLE>
</HEAD>
 
<FRAMESET ROWS="75%, *" COLS="*, 40%">
  <FRAME SRC="framea.html">
  <FRAME SRC="frameb.html">
  <FRAME SRC="framec.html">
  <FRAME SRC="framed.html">
 
  <NOFRAMES>
  <H1>No Frames? No Problem!</H1>
  Take a look at our
  <A HREF="basic.noframes.html">no-frames</A>
  version.
  </NOFRAMES>
 
</FRAMESET>
 
</HTML>
Picture of a simple frameset
Here's a line-by-line explanation of each piece of code for the frames:
<FRAMESET
Start the "table of documents".
ROWS="75%, *"
The table should have two rows. The first row should take up 75% of the height of the page, the second should take up the rest.
COLS="*, 40%">
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.
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
Put the four files into the frames.
<NOFRAMES> ... </NOFRAMES>
Every framed page should have a no-frames alternative. The <NOFRAMES> content should go inside the outermost <FRAMESET ...> tag, usually just before the last </FRAMESET>. The most efficicent method for no-frames content is to link to a page which is specifically designed for no-frames.
</FRAMESET>
End the frameset.
There are several other aspects of frames to note from this example:
  • <FRAMESET ...> is used instead of the <BODY ...> tag. The frameset file has no content which appears on the page, so it has no need for <BODY ...>, which designates the content of the page. In fact, if you use <BODY ...> (except inside <NOFRAMES>), the frames will not appear. Tags in <HEAD>, including <TITLE>, still have their intended effects.
  • Rows and columns are described by a list of widths or heights. For example COLS="25%, *, 40%" says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over". See COLS and ROWS 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.

 

Nested Framesets

Let's move now to a more real world example, and a few more techniques for using frames. 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, "Great Recipes" stays stationary in a frame at top, a contents list is on the left, and the recipes themselves are in the large box on the right. As you click on the name of a recipe in the contents list, that recipe appears on the right. Go ahead and try out the real page. (We're sorry if these recipes make you hungry. They did us. These recipes come from the wonderful vegetarian recipe site Veggies Unite!.)
Remember that a frameset is like a "table of documents" with rows and columns. The recipes page, however, has one column on top, but two on bottom. This is done by nesting framesets, putting one frameset inside another.

Here's the code for the frameset file for the recipes page: 
<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>
 
<FRAMESET ROWS="15%,*">
   <FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>
 
   <FRAMESET COLS="20%,*">
      <FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
      <FRAME SRC="recipes.html" NAME=RECIPES>
   </FRAMESET>
 
   <NOFRAMES>
   <H1>Great Recipes</H1>
   No frames? No Problem! Take a look at our 
   <A HREF="recipes.html">no-frames</A> version.
Picture of the recipes page   </NOFRAMES>
 
</FRAMESET>
 
</HTML>
Frames within frames
frameset within frameset
The first <FRAMESET ...> tag says "this frameset will have two rows" (and, implicitly, only one column, since COLS was left out). The first <FRAME ...> tag puts a document in the first frame. The second frame is filled in not by a document but by another frameset. The second <FRAMESET ...> is creating a "table within a table", or, to be more correct, a frameset within a frameset.

Targeting Frames

Each frame is given a name using <FRAME NAME="...">. These names uniquely identify each frame. Using these names, links in other frames can tell the browser which frame the link targets.
For example, this code creates a framed page, naming the frames TITLE, SIDEBAR, and MAIN: 
<FRAMESET ROWS="15%,*">
   <FRAME SRC="tfetitle.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1>
 
   <FRAMESET COLS="20%,*">
      <FRAME SRC="tfesidebar.html" NAME=SIDEBAR>
      <FRAME SRC="tfemain.html" NAME=MAIN>
   </FRAMESET>
 
<NOFRAMES>NOFRAMES stuff
</NOFRAMES>
 
</FRAMESET>
 
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 this
 
<A HREF="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"... link to a page and have that page take over the entire window. To create this sort of link, we add TARGET="_top" to the <A ...> tag:
this code
produces this
 
<A HREF="wwtarget.html" TARGET="_top">
the link in this page

In the previous example we used TARGET to refer to a frame we had named MAIN. In this example, however, we refer to a frame we never named: "_top". We can do this because the outermost frame (that is, the entire window) is already named "_top". "_top" is a reserved name which is automatically given to the entire window. So when we say TARGET="_top", we are saying "put the new web page in the entire window". Note that "_top" needs to be in all lower-case, it should have quotes around it, and don't forget the underscore ("_").
The entire window is always named "_top"
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
 
<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT NAME="color">
</FORM>
favorite color:
This form has all the required elements for a form:
<FORM ACTION="/cgi-bin/mycgi.pl">
Start the form here. The ACTION attribute, which is required with every <FORM ...> tag, is used with CGI, discussed below.
<INPUT NAME="color">
Data entry field. <INPUT ...> creates most types of form fields, but <TEXTAREA ...> and <SELECT ...> also create certain types.
</FORM>
End the form here.
Of course, this form doesn't do much. You can type something into the one field, but that'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 (Common Gateway Interface). In the CGI way of doing things, the data the user enters is sent to the web 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:
<FORM ACTION="/cgi-bin/mycgi.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.pl">
ACTION tells the browser where to send the data for processing (more on that shortly). ACTION is required with every form, even forms that don't use CGI.
<INPUT name="favecolor">
We've added the NAME attribute. NAME identifies each field, "names" it so it can be referred to later.
<INPUT TYPE=SUBMIT VALUE="Submit">
This <INPUT ...> tag creates the "submit" button, which the user presses to send the 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

Name:
E-mail:

Here's the chain of events when the user hits "Submit": diagram of the CGI process
  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 a mailing list, whatever the programmer wants it to do. Whatever else the program does, 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 to write CGIs, 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, you can use our publicly available CGI at ../cgi-bin/mycgi.pl. This CGI will produce a web page of all the fields sent to it, so you can see if the forms work the way you intended. Most of the forms on the rest of this page will use this CGI.
Technically speaking there is no such thing as "a CGI". "CGI" is a standard protocol, not an actual implementation. However, it has become common to refer to a program which uses 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), Visual Basic, etc. CGI was designed to allow great flexibility in processing the form data, while still allowing the results to be returned as HTML (or other formats, but HTML is the most popular).



Tidak ada komentar:

Posting Komentar

Langganan: Postingan (Atom)