Scribd
Upload
71 views

What Is HTML

HTML is a markup language used to structure and present content for display on the web. It uses tags to indicate elements like headings, paragraphs, lists, links and more. Common tags include <html>, <head>, <title>, <body>, <h1>-<h6>, <p>, <a>, <ul>, <ol>, <li> and <img>. HTML pages can be written manually or using WYSIWYG editors.

Uploaded by

Manoj Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views

What Is HTML

HTML is a markup language used to structure and present content for display on the web. It uses tags to indicate elements like headings, paragraphs, lists, links and more. Common tags include <html>, <head>, <title>, <body>, <h1>-<h6>, <p>, <a>, <ul>, <ol>, <li> and <img>. HTML pages can be written manually or using WYSIWYG editors.

Uploaded by

Manoj Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

what is HTML ?

HTML, or HyperText Markup Language, is a Universal language which allows an individual


using special code to create web pages to be viewed on the Internet.

HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are
looking at a Web page right now.

Answer1:
HTML, or HyperText Markup Language, is a Universal language which allows an individual
using special code to create web pages to be viewed on the Internet.

Answer2:
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are
looking at a Web page right now.
You can view HTML pages in two ways:
* One view is their appearance on a Web browser, just like this page -- colors, different text
sizes, graphics.
* The other view is called "HTML Code" -- this is the code that tells the browser what to do.

What is a tag?

In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for
many reasons -- to change the appearance of text, to show a graphic, or to make a link to another
page.

What is the simplest HTML page?


HTML Code:
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
Browser Display:
This is my message to the world!

How do I create frames? What is a frameset?


Frames allow an author to divide a browser window into multiple (rectangular) regions. Multiple
documents can be displayed in a single window, each within its own frame. Graphical browsers
allow these frames to be scrolled independently of each other, and links can update the document
displayed in one frame without affecting the others.
You can't just "add frames" to an existing document. Rather, you must create a frameset
document that defines a particular combination of frames, and then display your content
documents inside those frames. The frameset document should also include alternative non-
framed content in a NOFRAMES element.
The HTML 4 frames model has significant design flaws that cause usability problems for web
users. Frames should be used only with great care.

How can I include comments in HTML?


Technically, since HTML is an SGML application, HTML uses SGML comment syntax.
However, the full syntax is complex, and browsers don't support it in its entirety anyway.
Therefore, use the following simplified rule to create HTML comments that both have valid
syntax and work in browsers:

An HTML comment begins with "<!--", ends with "-->", and does not contain "--" or ">"
anywhere in the comment.
The following are examples of HTML comments:

* <!-- This is a comment. -->


* <!-- This is another comment,
and it continues onto a second line. -->
* <!---->

Do not put comments inside tags (i.e., between "<" and ">") in HTML markup.

What is a Hypertext link?


A hypertext link is a special tag that links one page to another page or resource. If you click the
link, the browser jumps to the link's destination.

How comfortable are you with writing


HTML entirely by hand?
Very. I don't usually use WYSIWYG. The only occasions when I do use Dreamweaver are when
I want to draw something to see what it looks like, and then I'll usually either take that design
and hand-modify it or build it all over again from scratch in code. I have actually written my own
desktop HTML IDE for Windows (it's called Less Than Slash) with the intention of deploying it
for use in web development training. If has built-in reference features, and will autocomplete
code by parsing the DTD you specify in the file. That is to say, the program doesn't know
anything about HTML until after it parses the HTML DTD you specified. This should give you
some idea of my skill level with HTML.

What is everyone using to write HTML?


Everyone has a different preference for which tool works best for them. Keep in mind that
typically the less HTML the tool requires you to know, the worse the output of the HTML. In
other words, you can always do it better by hand if you take the time to learn a little HTML.

What is a DOCTYPE? Which one do I use?


According to HTML standards, each HTML document begins with a DOCTYPE declaration that
specifies which version of HTML the document uses. Originally, the DOCTYPE declaration was
used only by SGML-based tools like HTML validators, which needed to determine which
version of HTML a document used (or claimed to use).
Today, many browsers use the document's DOCTYPE declaration to determine whether to use a
stricter, more standards-oriented layout mode, or to use a "quirks" layout mode that attempts to
emulate older, buggy browsers.

Can I nest tables within tables?


Yes, a table can be embedded inside a cell in another table. Here's a simple example:

<table>
<tr>
<td>this is the first cell of the outer table</td>
<td>this is the second cell of the outer table,

with the inner table embedded in it


<table>
<tr>
<td>this is the first cell of the inner table</td>
<td>this is the second cell of the inner table</td>
</tr>
</table>
</td>
</tr>
</table>

The main caveat about nested tables is that older versions of Netscape Navigator have problems
with them if you don't explicitly close your TR, TD, and TH elements. To avoid problems,
include every </tr>, </td>, and </th> tag, even though the HTML specifications don't require
them. Also, older versions of Netscape Navigator have problems with tables that are nested
extremely deeply (e.g., tables nested ten deep). To avoid problems, avoid nesting tables more
than a few deep. You may be able to use the ROWSPAN and COLSPAN attributes to minimize
table nesting. Finally, be especially sure to validate your markup whenever you use nested tables.

How do I align a table to the right (or left)?


You can use <TABLE ALIGN="right"> to float a table to the right. (Use ALIGN="left" to float
it to the left.) Any content that follows the closing </TABLE> tag will flow around the table. Use
<BR CLEAR="right"> or <BR CLEAR="all"> to mark the end of the text that is to flow around
the table, as shown in this example:

The table in this example will float to the right.


<table align="right">...</table>
This text will wrap to fill the available space to the left of (and if the text is long enough, below)
the table.
<br clear="right">
This text will appear below the table, even if there is additional room to its left.

How can I use tables to structure forms?


Small forms are sometimes placed within a TD element within a table. This can be a useful for
positioning a form relative to other content, but it doesn't help position the form-related elements
relative to each other.
To position form-related elements relative to each other, the entire table must be within the form.
You cannot start a form in one TH or TD element and end in another. You cannot place the form
within the table without placing it inside a TH or TD element. You can put the table inside the
form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-
related elements, as shown in the following example.

<FORM ACTION="[URL]">
<TABLE BORDER="0">
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>
</TR>
</TABLE>
</FORM>

How do I center a table?


In your HTML, use

<div class="center">
<table>...</table>
</div>

In your CSS, use

div.center {
text-align: center;
}

div.center table {
margin-left: auto;
margin-right: auto;
text-align: left;
}

How do I use forms?


The basic syntax for a form is: <FORM ACTION="[URL]">...</FORM>
When the form is submitted, the form data is sent to the URL specified in the ACTION attribute.
This URL should refer to a server-side (e.g., CGI) program that will process the form data. The
form itself should contain

* at least one submit button (i.e., an <INPUT TYPE="submit" ...> element),


* form data elements (e.g., <INPUT>, <TEXTAREA>, and <SELECT>) as needed, and
* additional markup (e.g., identifying data elements, presenting instructions) as needed.

How can I check for errors?


HTML validators check HTML documents against a formal definition of HTML syntax and then
output a list of errors. Validation is important to give the best chance of correctness on unknown
browsers (both existing browsers that you haven't seen and future browsers that haven't been
written yet).
HTML checkers (linters) are also useful. These programs check documents for specific
problems, including some caused by invalid markup and others caused by common browser
bugs. Checkers may pass some invalid documents, and they may fail some valid ones.
All validators are functionally equivalent; while their reporting styles may vary, they will find
the same errors given identical input. Different checkers are programmed to look for different
problems, so their reports will vary significantly from each other. Also, some programs that are
called validators (e.g. the "CSE HTML Validator") are really linters/checkers. They are still
useful, but they should not be confused with real HTML validators.
When checking a site for errors for the first time, it is often useful to identify common problems
that occur repeatedly in your markup. Fix these problems everywhere they occur (with an
automated process if possible), and then go back to identify and fix the remaining problems.
Link checkers follow all the links on a site and report which ones are no longer functioning. CSS
checkers report problems with CSS style sheets.

Do I have to memorize a bunch of tags?


No. Most programs that help you write HTML code already know most tags, and create them
when you press a button. But you should understand what a tag is, and how it works. That way
you can correct errors in your page more easily.
How do I make a form so it can be submitted
by hitting ENTER?
The short answer is that the form should just have one <INPUT TYPE=TEXT> and no
TEXTAREA, though it can have other form elements like checkboxes and radio buttons.

How do I set the focus to the first form field?


You cannot do this with HTML. However, you can include a script after the form that sets the
focus to the appropriate field, like this:

<form id="myform" name="myform" action=...>


<input type="text" id="myinput" name="myinput" ...>
</form>

<script type="text/javascript">
document.myform.myinput.focus();
</script>

A similar approach uses <body onload=...> to set the focus, but some browsers seem to process
the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.

How can I eliminate the extra space after a


</form> tag?
HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of
the form to 0. For example:
<form style="margin-bottom:0;" action=...>

You can also use a CSS style sheet to affect all the forms on a page:
form { margin-bottom: 0 ; }
How can I use tables to structure forms?
Small forms are sometimes placed within a TD element within a table. This can be a useful for
positioning a form relative to other content, but it doesn't help position the form-related elements
relative to each other.
To position form-related elements relative to each other, the entire table must be within the form.
You cannot start a form in one TH or TD element and end in another. You cannot place the form
within the table without placing it inside a TH or TD element. You can put the table inside the
form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-
related elements, as shown in the following example.
<form action="[URL]">
<table border="0">
<tr>
< th scope="row">
<label for="account">Account:</label>
</th>
<td>
<input type="text" name="account" id="account">
</td>
</tr>
<tr>
< th scope="row">
<label for="password">Password:
</th>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Log On"></td>
</tr>
</table>
</form>

Can I have two or more actions in the same


form?
No. A form must have exactly one action. However, the server-side (e.g., CGI) program that
processes your form submissions can perform any number of tasks (e.g., updating a database,
sending email, logging a transaction) in response to a single form submission.
How can I use forms for pull-down
navigation menus?
There is no way to do this in HTML only; something else must process the form. JavaScript
processing will work only for readers with JavaScript-enabled browsers. CGI and other server-
side processing is reliable for human readers, but search engines have problems following any
form-based navigation.

How can I avoid using the whole URL?


The URL structure defines a hierarchy (or relationship) that is similar to the hierarchy of
subdirectories (or folders) in the filesystems used by most computer operating systems. The
segments of a URL are separated by slash characters ("/"). When navigating the URL hierarchy,
the final segment of the URL (i.e., everything after the final slash) is similar to a file in a
filesystem. The other segments of the URL are similar to the subdirectories and folders in a
filesystem.
A relative URL omits some of the information needed to locate the referenced document. The
omitted information is assumed to be the same as for the base document that contains the relative
URL. This reduces the length of the URLs needed to refer to related documents, and allows
document trees to be accessed via multiple access schemes (e.g., "file", "http", and "ftp") or to be
moved without changing any of the embedded URLs in those documents.
Before the browser can use a relative URL, it must resolve the relative URL to produce an
absolute URL. If the relative URL begins with a double slash (e.g.,
//www.yoursite.com/faq/html/), then it will inherit only the base URL's scheme. If the relative
URL begins with a single slash (e.g., /faq/html/), then it will inherit the base URL's scheme and
network location.
If the relative URL does not begin with a slash (e.g., all.html , ./all.html or ../html/), then it has a
relative path and is resolved as follows.

1. The browser strips everything after the last slash in the base document's URL and appends the
relative URL to the result.
2. Each "." segment is deleted (e.g., ./all.html is the same as all.html, and ./ refers to the current
"directory" level in the URL hierarchy).
3. Each ".." segment moves up one level in the URL hierarchy; the ".." segment is removed,
along with the segment that precedes it (e.g., foo/../all.html is the same as all.html, and ../ refers
to the parent "directory" level in the URL hierarchy).

Some examples may help make this clear. If the base document is
<URL:http://www.yoursite.com/faq/html/basics.html>, then

all.html and ./all.html


refer to <URL:http://www.yoursite.com/faq/html/all.html>
./
refers to <URL:http://www.yoursite.com/faq/html/>
../
refers to <URL:http://www.yoursite.com/faq/>
../cgifaq.html
refers to <URL:http://www.yoursite.com/faq/cgifaq.html>
../../reference/
refers to <URL:http://www.yoursite.com/reference/>

Please note that the browser resolves relative URLs, not the server. The server sees only the
resulting absolute URL. Also, relative URLs navigate the URL hierarchy. The relationship (if
any) between the URL hierarchy and the server's filesystem hierarchy is irrelevant.

Can I use percentage values for <TD


WIDTH=...>?
The HTML 3.2 and HTML 4.0 specifications allow only integer values (representing a number
of pixels) for the WIDTH attribute of the TD element. However, the HTML 4.0 DTD allows
percentage (and other non-integer) values, so an HTML validator will not complain about <TD
WIDTH="xx%">.
It should be noted that Netscape and Microsoft's browsers interpret percentage values for <TD
WIDTH=...> differently. However, their interpretations (and those of other table-aware
browsers) happen to match when combined with <TABLE WIDTH="100%">. In such
situations, percentage values can be used relatively safely, even though they are prohibited by the
public specifications.

Why doesn't <TABLE WIDTH="100%">


use the full browser width?
Graphical browsers leave a narrow margin between the edge of the display area and the content.
Also note that Navigator always leaves room for a scrollbar on the right, but draws the scrollbar
only when the document is long enough to require scrolling. If the document does not require
scrolling, then this leaves a right "margin" that cannot be removed.
Why is there extra space before or after my
table?
This is often caused by invalid HTML syntax. Specifically, it is often caused by loose content
within the table (i.e., content that is not inside a TD or TH element). There is no standard way to
handle loose content within a table. Some browsers display all loose content before or after the
table. When the loose content contains only multiple line breaks or empty paragraphs, then these
browsers will display all this empty space before or after the table itself.
The solution is to fix the HTML syntax errors. All content within a table must be within a TD or
TH element.

How do I create a link that sends me email?


Use a mailto link, for example

How can I have two sets of links with


different colors?
You can suggest this presentation in a style sheet. First, specify colors for normal links, like this:

a:link {color: blue; background: white}


a:visited {color: purple; background: white}
a:active {color: red; background: white}

Next, identify the links that you want to have different colors. You can use the CLASS attribute
in your HTML, like this:

<a class="example1" href="[URL]">[link text]</a>


Then, in your style sheet, use a selector for links with this CLASS attribute, like this:

a.example1:link {color: yellow; background: black}


a.example1:visited {color: white; background: black}
a.example1:active {color: red; background: black}

Alternatively, you can identify an element that contains the links that you want to have different
colors, like this:

<div class="example2">...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
</div>

Then, in your style sheet, use a selector for links in this containing element, like this:

.example2 a:link {color: yellow; background: black}


.example2 a:visited {color: white; background: black}
.example2 a:active {color: red; background: black}

How can I show HTML examples without


them being interpreted as part of my
document?
Within the HTML example, first replace the "&" character with "&amp;" everywhere it occurs.
Then replace the "&lt;" character with "<" and the "&gt;" character with ">" in the same way.
Note that it may be appropriate to use the CODE and/or PRE elements when displaying HTML
examples.

How do I get special characters in my


HTML?
The special case of the less-than ('<'), greater-than ('>'), and ampersand ('&') characters. In
general, the safest way to write HTML is in US-ASCII (ANSI X3.4, a 7-bit code), expressing
characters from the upper half of the 8-bit code by using HTML entities.
Working with 8-bit characters can also be successful in many practical situations: Unix and MS-
Windows (using Latin-1), and also Macs (with some reservations).
Latin-1 (ISO-8859-1) is intended for English, French, German, Spanish, Portuguese, and various
other western European languages. (It is inadequate for many languages of central and eastern
Europe and elsewhere, let alone for languages not written in the Roman alphabet.) On the Web,
these are the only characters reliably supported. In particular, characters 128 through 159 as used
in MS-Windows are not part of the ISO-8859-1 code set and will not be displayed as Windows
users expect. These characters include the em dash, en dash, curly quotes, bullet, and trademark
symbol; neither the actual character (the single byte) nor its �nnn; decimal equivalent is
correct in HTML. Also, ISO-8859-1 does not include the Euro currency character. (See the last
paragraph of this answer for more about such characters.)
On platforms whose own character code isn't ISO-8859-1, such as MS-DOS and Mac OS, there
may be problems: you have to use text transfer methods that convert between the platform's own
code and ISO-8859-1 (e.g., Fetch for the Mac), or convert separately (e.g., GNU recode). Using
7-bit ASCII with entities avoids those problems, but this FAQ is too small to cover other
possibilities in detail.
If you run a web server (httpd) on a platform whose own character code isn't ISO-8859-1, such
as a Mac or an IBM mainframe, then it's the job of the server to convert text documents into
ISO-8859-1 code when sending them to the network.
If you want to use characters not in ISO-8859-1, you must use HTML 4 or XHTML rather than
HTML 3.2, choose an appropriate alternative character set (and for certain character sets, choose
the encoding system too), and use one method or other of specifying this.

Should I put quotes around attribute values?


It is never wrong to quote attribute values, and many people recommend quoting all attribute
values even when the quotation marks are technically optional. XHTML 1.0 requires all attribute
values to be quoted. Like previous HTML specifications, HTML 4 allows attribute values to
remain unquoted in many circumstances (e.g., when the value contains only letters and digits).
Be careful when your attribute value includes double quotes, for instance when you want ALT
text like "the "King of Comedy" takes a bow" for an image. Humans can parse that to know
where the quoted material ends, but browsers can't. You have to code the attribute value
specially so that the first interior quote doesn't terminate the value prematurely. There are two
main techniques:

* Escape any quotes inside the value with &#34; so you don't terminate the value prematurely:
ALT="the &#34;King of Comedy&#34; takes a bow".
* Use single quotes to enclose the attribute value: ALT='the "King of Comedy" takes a bow'.

Both these methods are correct according to the specification and are supported by current
browsers, but both were poorly supported in some earlier browsers. The only truly safe advice is
to rewrite the text so that the attribute value need not contain quotes, or to change the interior
double quotes to single quotes, like this: ALT="the 'King of Comedy' takes a bow".

Posting Copy and Paste HTML


For those wanting to post direct Copy and Paste HTML on screen without the use of spaces or *s
etc. and the need to explain those substitutions: Use &lt; to substitute for each opening tag < in
each tagged set of HTML. Example, typing the following: &lt;a
href="http://www.yourname.com">&lt;img
src="http://pics.yourname.com/aw/pics/mask.gif">&lt;/a> Will show up on screen as: <a
href="http://www.yourname.com"><img src="http://pics.yourname.com/aw/pics/mask.gif"></a>
HTML for Lists
1. Bulleted Lists: <ul> begins a bulleted, indented list. Each item in the list is then prefaced with
the <li> tag. It is not necessary to insert a break at the end of each line -- the <li> tag
automatically creates a new line.

* with <li type=disc>


* with <li type=square>
* with <li type=circle>

2. Numbered Lists: <ol> begins a numbered, indented list. Each item in the list is then prefaced
with the <li> tag. You need to close the list with the </ol> tag. Note: You can expand the <ol> to
specify the TYPE of numbering:

<ol> 1 (decimal numbers: 1, 2, 3, 4, 5, ...)


<ol type="a"> a (lowercase alphabetic: a, b, c, d, e, ...)
<ol type="A"> A (uppercase alphabetic: A, B, C, D, E, ...)
< ol type="i"> i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
< ol type="I"> I (uppercase Roman numerals: I, II, III, IV, V, ...)

Are there any problems with using tables for


layout?
On current browsers, the entire table must be downloaded and the dimensions of everything in
the table must to be known before the table can be rendered. That can delay the rendering of your
content, especially if your table contains images without HEIGHT or WIDTH attributes.
If any of your table's content is too wide for the available display area, then the table stretches to
accomodate the oversized content. The rest of the content then adjusts to fit the oversized table
rather than fitting the available display area. This can force your readers to scroll horizontally to
read your content, or can cause printed versions to be cropped.
For readers whose displays are narrower than the author anticipated, fixed-width tables cause the
same problems as other oversized tables. For readers whose displays are wider than the author
anticipated, fixed-width tables cause extremely wide margins, wasting much of the display area.
For readers who need larger fonts, fixed-width tables can cause the content to be displayed in
short choppy lines of only a few words each.
Many browsers are especially sensitive to invalid syntax when tables are involved. Correct
syntax is especially critical. Even with correct syntax, nested tables may not display correctly in
older versions of Netscape Navigator.
Some browsers ignore tables, or can be configured to ignore tables. These browsers will ignore
any layout you've created with tables. Also, search engines ignore tables. Some search engines
use the text at the beginning of a document to summarize it when it appears in search results, and
some index only the first n bytes of a document. When tables are used for layout, the beginning
of a document often contains many navigation links that appear before than actual content.
Many versions of Navigator have problems linking to named anchors when they are inside a
table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the
top of the table, rather than with the content of the anchor. You can avoid this problem by not
using the ALIGN attribute on your tables.
If you use tables for layout, you can still minimize the related problems with careful markup.
Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content
inside tables. Rather than a single full-page layout table, use several independent tables. For
example, you could use a table to lay out a navigation bar at the top/bottom of the page, and
leave the main content completely outside any layout tables.

How do I eliminate the blue border around


linked images?
In your HTML, you can specify the BORDER attribute for the image:
<a href=...><img src=... alt=... border="0"></a>
However, note that removing the border that indicates an image is a link makes it harder for
users to distinguish quickly and easily which images on a web page are clickable.

How do I eliminate the space around/between


my images?
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and
CELLPADDING attributes to 0.
Extra space between images is often created by whitespace around the <IMG> tag in the markup.
It is safe to use newlines inside a tag (between attributes), but not between two tags. For
example, replace this:

<td ...>
<img src=... alt=...>
<img src=... alt=...>
</td>

with this:

<td ...><img src=... alt=...><img src=... alt=...></td>


According to the latest specifications, the two should be equivalent. However, common browsers
do not comply with the specifications in this situation.
Finally, extra space between images can appear in documents that trigger the "standards"
rendering mode of Gecko-based browsers like Mozilla and Firefox.

How can I specify colors?


If you want others to view your web page with specific colors, the most appropriate way is to
suggest the colors with a style sheet. Cascading Style Sheets use the color and background-color
properties to specify text and background colors. To avoid conflicts between the reader's default
colors and those suggested by the author, these two properties should always be used together.
With HTML, you can suggest colors with the TEXT, LINK, VLINK (visited link), ALINK
(active link), and BGCOLOR (background color) attributes of the BODY element.
Note that these attributes are deprecated by HTML 4. Also, if one of these attributes is used, then
all of them should be used to ensure that the reader's default colors do not interfere with those
suggested by the author. Here is an example:
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">
Authors should not rely on the specified colors since browsers allow their users to override
document-specified colors.

How do I get form data emailed to me?


The only reliable mechanism for processing form submissions is with a server-side (e.g., CGI)
program. To send form data to yourself via email, you should use a server-side program that
processes the form submission and sends the data to your email address.
Some web service providers make standard form-to-email programs available to their customers.
Check with your service provider for details.
If you can install CGI programs on your own server, see the answer to the previous question for
a list of useful resources.
If you can't run CGI programs on your own server, you can use a remotely hosted form-to-email
services. Note that the provider of a remotely hosted service will have access to any data
submitted via the service.
Forms that use action="mailto:..." are unreliable. According to the HTML specifications, form
behavior is explicitly undefined for mailto URIs (or anything else other than HTTP URIs). They
may work one way with one software configuration, may work other ways in other software
configurations, and may fail completely in other software configurations.
Can I prevent a form from being submitted
again?
No. The server-side (e.g., CGI) program that processes the form submission must handle
duplicate submissions gracefully.
You could generate the form with a server-side (e.g., CGI) program that adds a hidden field with
a unique session ID. Then the server-side program that processes the form submission can check
the session ID against a list of previously used session IDs. If the session ID has already been
used, then an appropriate action can be taken (e.g., reject the submission, or update the
previously submitted data).
Ultimately, your server-side program must be smart enough to handle resubmitted data. But you
can avoid getting resubmitted data by not expiring the confirmation page from form submissions.
Since you want to expire pages quickly when they have transient data, you might want to avoid
putting transient data on the confirmation page. You could provide a link to a database query that
returns transient data though.

How can I allow file uploads to my web site?


These things are necessary for Web-based uploads:

* An HTTP server that accepts uploads.


* Access to the /cgi-bin/ to put the receiving script. Prewritten CGI file-upload scripts are
available.
* A form implemented something like this:

<form method="post" enctype="multipart/form-data" action="fup.cgi">


File to upload: <input type=file name=upfile><br>
Notes about the file: <input type=text name=note><br>
<input type=submit value=Press> to upload the file!
</form>

Not all browsers support form-based file upload, so try to give alternatives where possible.

The Perl CGI.pm module supports file upload. The most recent versions of the cgi-lib.pl library
also support file upload. Also, if you need to do file upload in conjunction with form-to-email,
the Perl package MIME::Lite handles email attachments.
How can I require that fields be filled in, or
filled in correctly?
Have the server-side (e.g., CGI) program that processes the form submission send an error
message if the field is not filled in properly. Ideally, this error message should include a copy of
the original form with the original (incomplete or incorrect) data filled in as the default values for
the form fields. The Perl CGI.pm module provides helpful mechanisms for returning partially
completed forms to the user.
In addition, you could use JavaScript in the form's ONSUBMIT attribute to check the form data.
If JavaScript support is enabled, then the ONSUBMIT event handler can inform the user of the
problem and return false to prevent the form from being submitted.
Note that the server-side program should not rely upon the checking done by the client-side
script.

How do I change the title of a framed


document?
The title displayed is the title of the frameset document rather than the titles of any of the pages
within frames. To change the title displayed, link to a new frameset document using
TARGET="_top" (replacing the entire frameset).

How do I link an image to something?


Just use the image as the link content, like this:

<a href=...><img src=... alt=...></a>

Should I end my URLs with a slash?


The URL structure defines a hierarchy similar to a filesystem's hierarchy of subdirectories or
folders. The segments of a URL are separated by slash characters ("/"). When navigating the
URL hierarchy, the final segment of the URL (i.e., everything after the final slash) is similar to a
file in a filesystem. The other segments of the URL are similar to the subdirectories and folders
in a filesystem.
When resolving relative URLs (see the answer to the previous question), the browser's first step
is to strip everything after the last slash in the URL of the current document. If the current
document's URL ends with a slash, then the final segment (the "file") of the URL is null. If you
remove the final slash, then the final segment of the URL is no longer null; it is whatever follows
the final remaining slash in the URL. Removing the slash changes the URL; the modified URL
refers to a different document and relative URLs will resolve differently.
For example, the final segment of the URL http://www.mysite.com/faq/html/ is empty; there is
nothing after the final slash. In this document, the relative URL all.html resolves to
http://www.mysite.com/faq/html/all.html (an existing document). If the final slash is omitted,
then the final segment of the modified URL http://www.mysite.com/faq/html is "html". In this
(nonexistent) document, the relative URL all.html would resolve to
http://www.mysite.com/faq/all.html (another nonexistent document).
When they receive a request that is missing its final slash, web servers cannot ignore the missing
slash and just send the document anyway. Doing so would break any relative URLs in the
document. Normally, servers are configured to send a redirection message when they receive
such a request. In response to the redirection message, the browser requests the correct URL, and
then the server sends the requested document. (By the way, the browser does not and cannot
correct the URL on its own; only the server can determine whether the URL is missing its final
slash.)
This error-correction process means that URLs without their final slash will still work. However,
this process wastes time and network resources. If you include the final slash when it is
appropriate, then browsers won't need to send a second request to the server.
The exception is when you refer to a URL with just a hostname (e.g., http://www.mysite.com).
In this case, the browser will assume that you want the main index ("/") from the server, and you
do not have to include the final slash. However, many regard it as good style to include it
anyway.

How do I specify a specific combination of


frames instead of the default document?
This is unfortunately not possible. When you navigate through a site using frames, the URL will
not change as the documents in the individual frames change. This means that there is no way to
indicate the combination of documents that make up the current state of the frameset.
The author can provide multiple frameset documents, one for each combination of frame content.
These frameset documents can be generated automatically, perhaps being created on the fly by a
CGI program. Rather than linking to individual content documents, the author can link to these
separate frameset documents using TARGET="_top". Thus, the URL of the current frameset
document will always specify the combination of frames being displayed, which allows links,
bookmarks, etc. to function normally.
How do I link to a location in the middle of
an HTML document?
First, label the destination of the link. The old way to label the destination of the link was with an
anchor using the NAME attribute. For example:
<h2><a name="section2">Section 2: Beyond Introductions</a></h2>

The modern way to label the destination of the link is with an ID attribute. For example:
<h2 id="section2">Section 2: Beyond Introductions</h2>

Second, link to the labeled destination. The URL is the URL of the document, with "#" and the
value of the NAME or ID attribute appended. Continuing the above examples, elsewhere in the
same document you could use:
<a href="#section2">go to Section 2</a>

Similarly, in another document you could use:


<a href="thesis.html#section2">go to Section 2 of my thesis</a>

How do I create a link?


Use an anchor element. The HREF attribute specifies the URL of the document that you want to
link to. The following example links the text "Web Authoring FAQ" to
<URL:http://www.htmlhelp.com/faq/html/>:
<A HREF="http://www.yoursite.com/faq/html/">Web Authoring FAQ</A>

How do I create a link that opens a new


window?
<a target="_blank" href=...> opens a new, unnamed window.
<a target="example" href=...> opens a new window named "example", provided that a window
or frame by that name does not already exist.
Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows
can be created only with JavaScript. links that open new windows can be annoying to your
readers if there is not a good reason for them.
How do I let people download a file from my
page?
Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An
example would be:
<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>

How do I create a button which acts like a


link?
This is best done with a small form:

<FORM ACTION="[URL]" METHOD=GET>


<INPUT TYPE=submit VALUE="Text on button">
</FORM>

If you want to line up buttons next to each other, you will have to put them in a one-row table,
with each button in a separate cell.
Note that search engines might not find the target document unless there is a normal link
somewhere else on the page.
A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and
works for more readers.

How can I make a form with custom buttons?


Rather than a normal submit button (<input type="submit" ...>), you can use the image input
type (<input type="image" ...>). The image input type specifies a graphical submit button that
functions like a server-side image map.
Unlike normal submit buttons (which return a name=value pair), the image input type returns the
x-y coordinates of the location where the user clicked on the image. The browser returns the x-y
coordinates as name.x=000 and name.y=000 pairs.
For compatability with various non-graphical browsing environments, the VALUE and ALT
attributes should be set to the same value as the NAME attribute. For example:
<input type="image" name="Send" alt="Send" value="Send" src="send-button.gif">
For the reset button, one could use <button type="reset" ...>, JavaScript, and/or style sheets,
although none of these mechanisms work universally.
How do I specify page breaks in HTML?
There is no way in standard HTML to specify where page breaks will occur when printing a
page. HTML was designed to be a device-independent structural definition language, and page
breaks depend on things like the fonts and paper size that the person viewing the page is using.

You might also like