HTML Interview Questions and
Answers
1)What is HTML?
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.
2)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.
3)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!
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.
5)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.
6)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.
7)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.
8)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.
9)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.
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.
1. You're attempting to use
a .bmp or .tif or other non-supported file format. You can only use .gif and
.jpg on the web. You must convert files that are not .gif or .jpg into a .gif
or .jpg with your image/graphics program.
2. You've forgotten to
upload the graphic files. Double-Check.
3. You've incorrectly linked
to the images. When you are starting out, try just using the file name in the
<img> tag. If you have cat.jpg, use
img
src="cat.jpg">.
4. Image file names are
case-sensitive. If your file is called CaT.JpG, you cannot type cat.jpg, you
must type CaT.JpG exactly in the src.
5. If all of the above fail,
re-upload the image in BINARY mode. You may have accidentally uploaded the
image in ASCII mode.
There have been several
attempts to do this, but I'm not aware of any really good source of comparisons
between the browsers. The trouble is that there are many different versions of
each browser, and many different tags. All current browsers should support the
tags in the official HTML 3.2 specification, but the major ones also support
nonstandard tags and sometimes have slightly different implementations. One
place that has fairly good compatibility info is Browsercaps.
13)Why does the
browser show my plain HTML source?
If Microsoft Internet
Explorer displays your document normally, but other browsers display your plain
HTML source, then most likely your web server is sending the document with the
MIME type "text/plain". Your web server needs to be configured to send
that filename with the MIME type "text/html". Often, using the
filename extension ".html" or ".htm" is all that is
necessary. If you are seeing this behavior while viewing your HTML documents on
your local Windows filesystem, then your text editor may have added a
".txt" filename extension automatically. You should rename
filename.html.txt to filename.html so that Windows will treat the file as an
HTML document.
14)How can I
display an image on my page?
Use an IMG element. The SRC
attribute specifies the location of the image. The ALT attribute provides
alternate text for those not loading images. For example:
<img
src="logo.gif" alt="ACME Products">
15)Why do my links
open new windows rather than update an existing frame?
If there is no existing
frame with the name you used for the TARGET attribute, then a new browser
window will be opened, and this window will be assigned the name you used.
Furthermore, TARGET="_blank" will open a new, unnamed browser window.
In HTML 4, the TARGET
attribute value is case-insensitive, so that abc and ABC both refer to the same
frame/window, and _top and _TOP both have the same meaning. However, most
browsers treat the TARGET attribute value as case-sensitive and do not
recognize ABC as being the same as abc, or _TOP as having the special meaning
of _top.
Also, some browsers include
a security feature that prevents documents from being hijacked by third-party
framesets. In these browsers, if a document's link targets a frame defined by a
frameset document that is located on a different server than the document
itself, then the link opens in a new window instead.
16)How do I get
out of a frameset?
If you are the author, this
is easy. You only have to add the TARGET attribute to the link that takes
readers to the intended 'outside' document. Give it the value of _top.
In many current browsers, it
is not possible to display a frame in the full browser window, at least not
very easily. The reader would need to copy the URL of the desired frame and
then request that URL manually.
I would recommend that
authors who want to offer readers this option add a link to the document itself
in the document, with the TARGET attribute set to _top so the document displays
in the full window if the link is followed.
17)How do I make a
frame with a vertical scrollbar but without a horizontal scrollbar?
The only way to have a frame
with a vertical scrollbar but without a horizontal scrollbar is to define the
frame with SCROLLING="auto" (the default), and to have content that
does not require horizontal scrolling. There is no way to specify that a frame
should have one scrollbar but not the other. Using SCROLLING="yes"
will force scrollbars in both directions (even when they aren't needed), and
using SCROLLING="no" will inhibit all scrollbars (even when scrolling
is necessary to access the frame's content). There are no other values for the
SCROLLING attribute.
18)Are there any
problems with using frames?
The fundamental problem with
the design of frames is that framesets create states in the browser that are
not addressable. Once any of the frames within a frameset changes from its
default content, there is no longer a way to address the current state of the
frameset. It is difficult to bookmark - and impossible to link or index - such
a frameset state. It is impossible to reference such a frameset state in other
media. When the sub-documents of such a frameset state are accessed directly,
they appear without the context of the surrounding frameset. Basic browser
functions (e.g., printing, moving forwards/backwards in the browser's history)
behave differently with framesets. Also, browsers cannot identify which frame
should have focus, which affects scrolling, searching, and the use of keyboard
shortcuts in general.
Furthermore, frames focus on
layout rather than on information structure, and many authors of framed sites
neglect to provide useful alternative content in the NOFRAMES element. Both of
these factors cause accessibility problems for browsers that differ
significantly from the author's expectations and for search engines.
Search engines can link
directly to framed content documents, but they cannot link to the combinations
of frames for which those content documents were designed. This is the result
of a fundamental flaw in the design of frames.
Search engines try to
provide their users with links to useful documents. Many framed content
documents are difficult to use when accessed directly (outside their intended
frameset), so there is little benefit if search engines offer links to them.
Therefore, many search engines ignore frames completely and go about indexing
more useful (non-framed) documents.
Search engines will index
your <NOFRAMES> content, and any content that is accessible via your
Because copies of your HTML
files and images are stored in cache, it is impossible to prevent someone from
being able to save them onto their hard drive. If you are concerned about your
images, you may wish to embed a watermark with your information into the image.
Consult your image editing program's help file for more details.
The colors on my page look
different when viewed on a Mac and a PC.
The Mac and the PC use
slightly different color palettes. There is a 216 "browser safe"
color palette that both platforms support; the Microsoft color picker page has
some good information and links to other resources about this. In addition, the
two platforms use different gamma (brightness) values, so a graphic that looks
fine on the Mac may look too dark on the PC. The only way to address this
problem is to tweak the brightness of your image so that it looks acceptable on
both platforms.
21)How do you
create tabs or indents in Web pages?
There was a tag proposed for
HTML 3.0, but it was never adopted by any major browser and the draft specification
has now expired. You can simulate a tab or indent in various ways, including
using a transparent GIF, but none are quite as satisfactory or widely supported
as an official tag would be.
There are slight differences
between browsers, such as Netscape Navigator and Microsoft Internet Explorer,
in areas such as page margins. The only real answer is to use standard HTML
tags whenever possible, and view your pages in multiple browsers to see how
they look.
When the sub-documents of a
frameset state are accessed directly, they appear without the context of the
surrounding frameset.
If the reader's browser has
JavaScript support enabled, the following script will restore the frameset:
<SCRIPT
TYPE="text/javascript">
if (parent.location.href ==
self.location.href) {
if
(window.location.href.replace)
window.location.replace('frameset.html');
else
// causes problems with back
button, but works
window.location.href =
'frameset.html';
}
</SCRIPT>
A more universal approach is
a "restore frames" link:
<A
HREF="frameset.html" TARGET="_top">Restore Frames
Note that in either case,
you must have a separate frameset document for every content document. If you
link to the default frameset document, then your reader will get the default
content document, rather than the content document he/she was trying to access.
These frameset documents should be generated automatically, to avoid the tedium
and inaccuracy of creating them by hand.
Note that you can work
around the problem with bookmarking frameset states by linking to these
separate frameset documents using TARGET="_top", rather than linking
to the individual content documents.
23)How do I update
two frames at once?
There are two basic
techniques for updating multiple frames with a single link: The HTML-based
technique links to a new frameset document that specifies the new combination
of frames. The JavaScript-based solution uses the onClick attribute of the link
to update the additional frame (or frames).
The HTML-based technique can
link to a new frameset document with the TARGET="_top" attribute
(replacing the entire frameset). However, there is an alternative if the frames
to be updated are part of a nested frameset. In the initial frameset document,
use a secondary frameset document to define the nested frameset. For example:
<frameset
cols="*,3*">
<frame src="contents.html"
name="Contents">
<frame
src="frameset2.html" name="Display">
<noframes>
<!-- Alternative
non-framed version -->
</body></noframes>
</frameset>
A link can now use the
TARGET="Display" attribute to replace simultaneously all the frames
defined by the frameset2.html document.
The JavaScript-based
solution uses the onClick attribute of the link to perform the secondary
update. For example:
<a href="URL1"
target="Frame1"
onClick="top.Frame2.location='URL2';">Update frames
The link will update Frame1
with URL1 normally. If the reader's browser supports JavaScript (and has it
enabled), then Frame2 will also be updated (with URL2).
24)Can I have two
or more Submit buttons in the same form?
Yes. This is part of HTML
2.0 Forms support (some early browsers did not support it, but browser coverage
is now excellent).
The submit buttons must have
a NAME attribute. The optional VALUE attribute can be used to specify different
text for the different submit buttons.
To determine which submit
button was used, you need to use different values for the NAME and/or VALUE
attributes. Browsers will send to the server the name=value pair of the submit
button that was used. Here is an example:
<input
type="submit" name="join" value="I want to join
now">
<input type="submit"
name="info" value="Please send full details">
<form
method="post"
action="http://www.yoursite.com/cgi-bin/test">
and then go through the
motions of submitting your form. The TipJar server decodes the form input, and
displays the result to you.
25)How do I make a
link or form in one frame update another frame?
In the frameset document
(the HTML document containing the <frameset> <frame> tags), make
sure to name the individual frames using the NAME attribute. The following
example creates a top frame named "navigation" and a bottom frame
named "content":
<frameset
rows="*,3*">
<frame
name="navigation" src="navigation.html">
<frame
name="content" src="content.html">
<noframes><body>
<!-- Alternative
non-framed version -->
</body></noframes>
</frameset>
Then, in the document with
the link, use the TARGET attribute to specify which frame should be used to
display the link. (The value of the TARGET attribute should match the value of
the target frame's NAME attribute.) For example:
<a
target="content" href=...>
To target a form submission,
use the TARGET attribute of the FORM element, like this:
<form
target="content" action=...>
Note that when forms are
processed entirely by JavaScript, the target frame must be specified in the
JavaScript. The value of the TARGET attribute is irrelevant.
Normally, the default target
frame is the current frame ("_self"). To change the default target
for every link/form on the page, use the TARGET attribute of the BASE element,
like this:
<base
target="content">
26) 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.
27)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.
28)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.
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>
30)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.
31)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).
32)How do I link
an image to something?
Just use the image as the
link content, like this:
<a href=...><img
src=... alt=...></a>
33)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).
34) How can I show
HTML examples without them being interpreted as part of my document?
Within the HTML example,
first replace the "&" character with "&"
everywhere it occurs. Then replace the "<" character with
"<" and the ">" character with ">"
in the same way.
Note that it may be
appropriate to use the CODE and/or PRE elements when displaying HTML examples.
35)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.
36)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 " so you don't terminate the value prematurely:
ALT="the "King of Comedy" takes a bow".
* Use single quotes to
enclose the attribute value: ALT='the "King of Comedy" takes a bow'.
37)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, ...)
38)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.
39)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.
40)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
39safe 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.
41)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">
43)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>
44)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;
}
45)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.
50)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.
51)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.
52)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.
53)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.
54)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 ; }
55)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>
56)Which should I
use, &entityname; or &#number; ?
In HTML, characters can be
represented in three ways:
1. a properly coded
character, in the encoding specified by the "charset" attribute of
the "Content-type:" header;
2. a character entity
(&entityname;), from the appropriate HTML specification (HTML 2.0/3.2, HTML
4, etc.);
3. a numeric character
reference (&#number;) that specifies the Unicode reference of the desired
character. We recommend using decimal references; hexadecimal references are
less widely supported.
57)Is there a way
to prevent getting framed?
"Getting framed"
refers to having your documents displayed within someone else's frameset
without your permission. This can happen accidentally (the frameset author
forgot to use TARGET="_top" when linking to your document) or
intentionally (the frameset author wanted to display your content with his/her
own navigation or banner frames).
To avoid "framing"
other people's documents, you must add TARGET="_top" to all links
that lead to documents outside your intended scope.
Unfortunately, there is no
reliable way to specify that a particular document should be displayed in the
full browser window, rather than in the current frame. One workaround is to use
<BASE TARGET="_top"> in the document, but this only specifies
the default target frame for links in the current document, not for the document
itself.
If the reader's browser has
JavaScript enabled, the following script will automatically remove any existing
framesets:
<script
type="text/javascript">
if (top.frames.length!=0) {
if
(window.location.href.replace)
top.location.replace(self.location.href);
else
top.location.href=self.document.href;
}
</script>
58)Why aren't my
frames the exact size I specified?
Older versions of Netscape
Navigator seems to convert pixel-based frame dimensions to whole percentages,
and to use those percentage-based dimensions when laying out the frames. Thus,
frames with pixel-based dimensions will be rendered with a slightly different
size than that specified in the frameset document. The rounding error will vary
depending on the exact size of the browser window.
Furthermore, Navigator seems
to store the percentage-based dimensions internally, rather than the original
pixel-based dimensions. Thus, when a window is resized, the frames are redrawn
based on the new window size and the old percentage-based dimensions.
There is no way to prevent
this behavior. To accommodate it, you should design your site to adapt to
variations in the frame dimensions. This is another situation where it is a
good idea to accommodate variations in the browser's presentation.
59)How can I
specify background images?
With HTML, you can suggest a
background image with the BACKGROUND attribute of the BODY element. Here is an
example:
<body
background="imagefile.gif" bgcolor="#ffffff"
text="#000000" link="#0000ff" vlink="#800080"
alink="#000080">
If you specify a background
image, you should also specify text, link, and background colors since the
reader's default colors may not provide adequate contrast against your
background image. The background color may be used by those not using your
background image. Authors should not rely on the specified background image
since browsers allow their users to disable image loading or to override
document-specified backgrounds.
60)How can I copy
something from a webpage to my webpage?
1: Plaintext or any text
information viewable from your browser can be easily copied like any other text
from any other file.
2; HTML and web scripts -
you will need to view the web page's source code. In the page's source code,
copying the <script> and </script> tags as well as all the
information in-between these tags will usually enable the script to work on
your web page.
3: Images, sounds, or movies
- Almost all images, sounds, and movies can be copied to your computer and then
viewed on your webpage. Images can be easily copied from a webpage by
right-clicking an image and selecting "Save Picture as" or "Save
Image as". Unless the sound or movies file has a direct link to download
and save the file to a specified location on your hard disk drive or to view
your Internet browser's cache and locate the sound or movie file saved in the
cache.
4. Embedded objects -
Looking at the source code of the object to determine the name of the file and
how it is loaded, and copy both the code and the file.