CONTENTS | ||||
Some Basic Definitions HTML Tag Basics Minimal HTML Page |
Font Links Images Tables Frames |
|||
Other HTML References: links || books |
HyperText Markup Language (HTML) is the standard markup language for text documents on the internet. It may be used for embedding images, sounds, video and multimedia in webpages (but that's another story).
The form of HTML source code is intentionally simple enough to be created with any text editor, "by hand". It was designed to be readable by humans. In fact, most browsers still allow you to read the source code of any document that you view [in Internet Explorer: Menu || View >> Source ], which is an important method for learning HTML.
HTML is still evolving, which causes difficulties
for designers. The HTML standard is defined by the governing body, the World
Wide Web Consortium (W3C),
but the browsers interpret HTML somewhat idiosyncratically. The development
of HTML continues as a dialectic between the W3C and the actual implementations
of the major browsers.
The language still bears the marks of it's origin, most notably, the original
specification was concerned with the classification of information and NOT with
the actual display (much to the chagrin of web designers). It started out as
a fairly simple collection of tags for the organization and display of information,
as it was created by scientists for the exchange of scholarly documents.
Hope for Webpage Designers: | Despair for Webpage Designers: | |
Basic HTML is simple. | HTML is evolving. HTML was created by and for scientists. |
|
... sometimes some tricky things must be done with the available repertoire of tags in order to create satisfying visual displays. |
STRUCTURE vs. DISPLAY: One of the major dilemmas of web-design.
The scientists want to separate form and content; in practice, it's not so simple.
STRUCTURE concerns the relative importance and precedence of elements.
DISPLAY is the stuff designers care about, such as colors and type
specifications.
The original form of HTML left the DISPLAY of webpages entirely up to the Browser.
The goal was to make documents Device Independent.
{ TOP }
HyperText: Text which acts as a link to another document, sometimes
called "active" or "hot", e.g.,
<a href="http://nukes.org">
nukeville</a>
Tag: A markup element, a container which instructs the browser how to
display or classify it's contents.
Most tags have opening and closing elements indicated by greater than and less
than symbols, e.g., <b>
this text should be bold</b>
.
In fact, the instructions to the browser are vague. It is up to the browser
to decide exactly how to render the tag. What is important is that the tags
indicate a difference.
Browser: a program which can interpret an HTML document for display
on a computer screen, e.g., Netscape Navigator, Opera, Internet Explorer. Each
browser renders HTML documents differently, and the different versions of each
brand of browser also render the tags differently, or simply ignore them. This
is a disconcerting situation for the HTML author.
On the other hand, browsers are forgiving. Supposedly, half of the code that
makes up the major browsers is devoted to figuring out what bad code is supposed
to mean. This can lead to bad habits.
CSS: Cascading Style Sheets.
An additional markup syntax for the display of elements in an HTML page. An
attempt to separate content markup from display markup. The term "cascading"
refers to the fact that there are multiple ways to assign styles to elements
that are heirarchical, the more particular overriding the more general. There
are major overlaps in functionality between CSS and HTML formatting for display,
which leaves us in a tricky position.
JavaScript: The most common kind of script used for dynamic content in HTML pages. It is based on the (evolving) standard recommended by the W3C, known as ECMAscript. [note: This is the same model as Flash's ActionScript.]
DHTML: CSS plus JavaScript.
An attempt to standardize the means of identifying and controlling elements
of HTML pages. Provides means for pages to change dynamically.
XML: eXtensible Markup Language.
HTML is now conceived as a subset of XML in the XHTML standard. XML is a more
general form of markup language; it allows for the creation of custom tags for
the catagorization of information.
URL: Uniform Resource Locator. the address of a web page.
URI: Uniform Resource Identifier: the path/location of any resource on
the internet.
WYSIWIG Editor: "What You See Is What You Get"
These programs insert the appropriate tags for you through a graphical user
interface (GUI). While this is a major convience, in that the program does repetitive
tasks for you (and should always create valid code); on the other hand, if you
only ever use a WYSIWIG editor, then you will not be able to evaluate whether
the code it generates is redundant, or clean, nor will you be able to solve
problems when it won't do what you want it to do, nor will you know what is
easy html and what is advanced trickiness.
Note that these programs move away from the originating concept that HTML is
human readable.
{ TOP }
The name of an HTML document can use any combination of alphanumeric
characters, it cannot contain any spaces nor special characters such as !@#$%^&*><?/,
and must end with one of two characteristic suffixes, either .htm
or .html
Examples: "my_document.html",
"home.html", "index.html"
In general, you should use only lower-case letters.
HTML TAGS instruct a browser to display or classify information in a
specific way. Most tags consist of an opening element and a closing element
of the following form:
text to be displayed
<tag_name></tag_name>
.
In order to conform to the latest XHTML standard, all tags should be lowercase.
Attributes: some tags
have multiple additional options for display.
Attributes consist of NAME/VALUE pairs and
are contained within the opening element of a tag.
Attributes must conform to the following format: name="value"
.
Example <p align="right">
this text block
would align on the right side of a page</p>
In order to conform to the latest XHTML standard, all
attributes must be enclosed in quotation marks.
note: if a tag has defineable attributes, the safest way to control the
display of text within that tag is to define every
attribute explicitly, otherwise those attributes will be rendered
as a default value which may vary between browsers
Nesting: Multiple tags may be applied to the same content.
It is very important when nesting tags to open and close them in the appropriate
order, that is, the first tag opened is the last tag closed. Example of correct
nesting <b><i>
this text is bold and italic</i></b>
Incorrect nesting: <b><i>
this
text is improperly formatted</b></i>
Spaces: HyperText flows. In general, extra
spaces (more than one) in your source code will be ignored, as will line breaks.
You can use this feature to help visually organize your source code. If you
want to have a line break in the display of your text you must use the BREAK
tag: <br>
, which does not have a closing element.
To insert more than one space between characters, you must use the NO-BREAK
SPACE "special" character:
Additionally, you can preserve all line breaks and spaces in a block of text
with the PREFORMAT tag:
<pre> this text is a
preformatted B L O C K of text</pre>
Block tags vs. Inline tags:
"Inline" means that the markup
tag does not interrupt the flow of the text.
"Block" level tags insert a line
breaks before their content and a double break after their content.
{ TOP }
To create an HTML page, open any text editor
(any program that can edit text document, e.g., SimpleText, MS Word, NotePad...)
and create a new file. Save the file in the Text Only (or ASCII) file format
with the appropriate extension, either name.htm
or name.html
FOUR tags provide the minimum elements of any HTML document: HTML, HEAD,
TITLE, BODY.
They always have the same relationship.
The basic HTML document: |
<html> your document's title goes here</title> The content of your document to be displayed in the browser window goes here, inside the BODY tag. </body> |
<html>...</html>
Everything is nested inside of the HTML tag.
<head>...</head>
The HEAD tag contains information about your document. This information is not
displayed directly in the browser window. SCRIPTS, CSS rules and META tags can
be included here.
<title>...</title>
The TITLE tag is always nested within the HEAD tag. It contains the
title of your document which is usually displayed in the title bar of the browser.
The title also appears in the History and Bookmarks of the Browser.
note: do not use colons or backslashes in the title of your document.
|
ATTRIBUTE: | MEANING: | POSSIBLE VALUES: |
text |
Defines the default display color for text in the whole document. Browsers tend to use BLACK (hex value: #000000 ) if this value is not defined (and if the user has not altered their browser's default preferences). | Any hexidecimal value; May also be the literal name of the predefined colors (see: colorhell) |
link |
Defines the display color for hyper-links before they are visited. | |
vlink |
"Visited Link" defines the display color for hyper-links after they are visited. | |
alink |
"Active Link" defines the display color for hyper-links as they are clicked, while the mouse is down. | |
bgcolor |
Defines the display color for the document's background. | |
background |
Defines the image to be used as a background for the document. This image will override the BGcolor. | Any valid URI that idenifies the location of an image |
marginheight marginwidth
|
MicroSoft's Internet Explorer specific
attributes. Define the size of the margin surrounding the content of the document. The defaults for these margins differ between browsers and platforms. |
Any positive integer |
leftmargin topmargin
|
Netscape Navigator specific attributes.
Defins the size of the margin surrounding the content of the document. The defaults for these margins differ between browsers and platforms. |
|
bgproperties |
IE specific attribute. Causes background image to stay put, while content moves over it. | fixed |
{ TOP }
The original HTML specification offered very little in the way of control of display, e.g., there was no way to change the color or face of text. The advantage of this situation is that the language as a whole was very simple and could be learned in it's entirety in a matter of days, if not hours.
In a sense, these tags stand as the most reliably meaningful markup for Cross-Browser, Cross-Platform compatibility. While some of them may "deprecated" in the latest standards, modern browsers still know how to interpret "legacy" document.
INLINE ELEMENTS (do not break the flow of the text line):
|
SPECIAL TAGS (no closing element):note: to conform with the XHTML standard, tags with no closing element should end with a space and forward slash before the closing angle bracket.
COMMENT
|
{ TOP }
Implemented in all browsers, despite the reluctance of the scientists who want
to separate the structure of a document from it's display. In fact, the font
tag was never an official part of the standards.
But, as the wwweb became a consumer tool the demand for prettier webpages held
sway.
In the latest standards the font tag is DEPRECATED, which means that in theory
you shouldn't use it. However, in practice, this is still the most universal
way to control the display of text. I recommend using them for initial layouts
and then using CSS redundantly for fine control.
FONT tag attributes | |||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
face |
The name of a font face on the user's computer. | A comma separated list. The first match
is used. GENERIC font names: serif sans-serif monospace fantasy cursive Generic names should always be used as last entry in list. |
<font face="Geneva,Arial,sans-serif">styled
text</font> |
size |
Size of font relative to browser's default (set by user). | absolute: 1 thru 7 (default=3); or, relative: -7 thru +7 | <font size="+1">styled
text</font> view examples |
color |
Color of text. | Hex color, or reserved color name. | <font color="#006699">styled
text</font> |
example font tag:
<font color="#003366" size="4"
face="sans-serif">styled
text</A>
{ TOP }
HyperText a.k.a. LinksBasic link: redirects Browser to new webpage: RELATIVE LINK, or "Jump to": EMAIL Link: TARGET: IMAGE as LINK: |
{ TOP }
Embedding ImagesThe IMG tag inserts an image inline. It does not cause a break in the
flow of text. This is actually an example of HYPERMEDIA,
in that it combines resources from multiple sources in a single document.
Most current browsers support three image formats: GIF, JPG and PNG. While
the PNG format offers many useful features, it is not supported by earlier
browser versions. Minimum IMG tag declaration:
Example of an exhaustively defined IMG tag :
You should always define the height and width of an image.
|
{ TOP }
The original way to control layout (CSS now offers Positioning control). The bane and blessing of web-design. Created by scientists to display tables of data; if designers and not scientists had made the html standard, they would be called GRID tags!
Tables consist of ROWS, <tr>
, which consist of CELLS, <td>
;
and implicitly of COLUMNS.
CELL tags are nested inside of ROW tags; ROW tags are nested inside of TABLE
tags.
A CELL can contain any other HTML tags, including other Tables!
note: there are also <th>
, table header elements that are
equivalent to <td>
in the first row, which can help machines
understand the structure of tables.
A simple table: |
result:
|
A table with two
rows: |
result:
|
A table with useful attributes:
<table border="0" cellpadding="3"
cellspacing="3" width="100%" height="150" bgcolor="#9999FF">
<tr>
<td bgcolor="#cccccc" valign="top"
align="right">Row One Column
One
</td>
<td bgcolor="#dddddd" valign="bottom"
align="left">Row One Column
Two
</td>
</tr>
<tr bgcolor="aqua" valign="middle" align="center">
<td>Row
Two Column One
</td>
<td>Row
Two Column Two
</td>
</tr>
</table>
result:
Row One Column One | Row One Column Two |
Row Two Column One | Row Two Column Two |
TABLE Attributes note: you should always define border, cellpadding and cellspacing, because different browsers have different default values for these attributes. |
|||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
border |
If greater than zero, renders a 3-D border around the table and between cells. | PIXELS | <table border="0">... |
cellpadding |
Space around the contents of the cells. | PIXELS | <table cellpadding="10">... |
cellspacing |
Space between cells. | PIXELS | <table cellspacing="10">... |
bgcolor |
Background color for whole table. | Hex color, or reserved color name. | <table bgcolor="#eeeeee">... |
background |
An image to be used as a background. Note: this does different things in IE and in Netscape. | URL of an image on the web. | <table background="ball.jpg">... |
width |
Width of the the whole table, relative to the outermost container (usually the BODY tag, which corresponds to the width of the browser window, but could also be another table's cell). | Can be either a PIXEL value or a PERCENTAGE. | <table width="300">...
<table width="95%">... |
height |
Height of the whole table. This attribute can be a bit buggy. Percentage is relative to the viewable area of the browser window. |
Can be either a PIXEL value or a PERCENTAGE. | <table height="200">... |
more attributes, which render
differently across browsers:
|
TR and TD Attributes in common Defining these attributes for a row applies the attribute to all of the cells in that row. If a row and a cell define the same attribute, the cell's value overrides the row's |
|||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
align |
Horizontal alignment of cells. | left, center, right | ...<tr align="center">...
|
valign |
Vertical alignment of cells | top, middle, bottom | ...<tr valign="middle">...
|
bgcolor |
Background color for cells. | Hex color, or reserved color name. | ...<tr bgcolor="#eeeeee">... |
more attributes, which render differently across
browsers: bordercolor,
bordercolordark, bordercolorlight |
TD Attributes | |||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
width |
Desired width of the cell. | Can be either a PIXEL value or a PERCENTAGE. | <table width="300">...
|
height |
Desired height of the cell. | Can be either a PIXEL value or a PERCENTAGE. | <table height="200">... |
background |
An image to be used as a background. | URL of an image on the web. | <td background="ball.jpg">... |
nowrap |
Prevents content of a cell from wrapping. | "nowrap" In order to conform to XHTML standard. |
<td nowrap="nowrap">... |
colspan |
A cell spans more than one column. | Any integer equal to or less than the total number of columns. | <td colspan="3">... |
rowspan |
A cell spans more than one row. | Any integer equal to or less than the total number of rows. | <td rowspan="2">... |
A table with rowspan
and colspan:
<table border="1" bordercolor="blue">
<tr>
<td rowspan="2">Row
One Cell One: rowspan="2"
</td>
<td colspan="2">Row
One Cell Two & Three: colspan="2"
</td>
</tr>
<tr>
<td>Row Two Column One
</td>
<td>Row Two Column Two
</td>
</tr>
</table>
Row One Cell One: rowspan="2" | Row One Cell Two & Three: colspan="2" | |
Row Two Column Two | Row Two Column Three |
{ TOP }
Framesets allow you to combine two or more html pages within the same browser window.
Advantages of frames: allows for persistent
content; only one part of the page changes when you link to new content. This
can be useful for navigation of small subsets of material, e.g., a slideshow.
Disadvantages: Bookmarks will always take
you to the front page of the framese, thus using frames for complex sites is
problematic.
A minimal frameset document:
<head>
<title>my framed site
</title>
</head>
<frameset cols="200,*">
<frame src="navigation.html" name="nav">
<frame src="frontpage.html" name="content">
</frameset>
<noframes>
<body>
sorry, this site requires a frames
enabled browser.
<body>
</noframes>
Notice that the BODY tag is inside of the NOFRAMES tag. NOFRAMES contains content for browsers that cannot render framesets (Netscape 2 and IE 3). Strictly speaking a FRAMESET document doesn't use a BODY tag. The visible content is contained in the documents "navigation.html" and "frontpage.html", which are normal html pages.
FRAMESET
tag attributes note: you should always define border, cellpadding and cellspacing, because different browsers have different default values for these attributes. |
|||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
cols |
The FRAMES are arranged in columns; sets
the sizes of the columns. You can use multiple columns in one FRAMESET. |
PIXELS, or PERCENTAGES, or * (wildcard) [may be combined] |
<frameset
cols="200,40%,*">... |
rows |
The FRAMES are arranged in rows; sets the
sizes of the rows. You can use multiple rows in one FRAMESET. |
PIXELS, or PERCENTAGES, or * (wildcard) [may be combined] |
<frameset
rows="130,70%,*">... |
border |
Thickness of the border between frames. | PIXELS | <frameset
frameborder="no">... |
bordercolor |
Color of the border between frames. | Hex color, or reserved color name. | <frameset
frameborder="no">... |
frameborder |
Whether or not frames display a border. | yes | no | <frameset
frameborder="no">... |
FRAME tag attributes FRAME tags are always nested inside of a defining FRAMESET. The number of FRAMES corresponds the the number of COLS or ROWS defined in the FRAMESET |
|||
ATTRIBUTE: | MEANING: | VALUES: | EXAMPLES: |
src |
URL of the page to be displayed within a frame. | Any valid URL. | ... <frame
src="front.html"> ... |
name |
Name used to target this FRAME from links in other FRAMEs of a FRAMESET. | an alphanumeric string, without spaces or special characters, beginning with a letter. | ... <frame src="front.html"
name="content"> ... to target this frame from another, include a link in this form: <a href="page2.html" target="content">next
page</a> Note: if you use a TARGET value that does not correspond to a FRAME's NAME a new window will open, and any other links that use that value will load in that window. |
scrolling |
Whether or not the frame can be scrolled. | auto | yes | no | ... <frame
src="front.html" scrolling="no"> ... |
noresize |
Whether or not you can resize the frames by dragging the border between them. | none, but for XHTML compatibility you should write: noresize="noresize" | ... <frame src="front.html"
noresize> ... |
marginheight |
The space between the content of the FRAME and the top and bottom edges of the frame. Note: this attribute does not render identically between IE and Netscape. | PIXELS | ... <frame src="front.html"
marginheight="0"> ... |
marginwidth |
The space between the content of the FRAME and the left and right edges of the frame. | PIXELS | ... <frame src="front.html"
marginwidth="0"> ... |
Note that FRAMESETs can be nested.
Alternatively, the page called by a FRAME can be another FRAMESET page.
Targetting in FRAMESETs
In addition to using the NAME attribute of a FRAME to target the loading of
a page, there are several RESERVED TARGET NAMES that you will may to use.
name | meaning | example |
_top | Loaded page replaces the FRAMESET. | <a href="section8.html"
target="_top">take me out of this
frameset</a> |
_parent | If one FRAME contains another FRAMESET page, this will cause a page to replace that nested FRAMESET. | <a href="page2.html"
target="content">next page</a>
|
_self | Loads a page into the current FRAME. This is used in combination with <base target="content"> which causes all of the links in a page to target a named frame. The BASE tag goes in the HEAD of a document. |
<a href="page2.html"
target="content">next page</a> |
_blank | Loads page into a new window. | <a href="page2.html"
target="content">next page</a> |
{ TOP }
find also: LIST(s), FORM