Download HTML Handout

WEB DESIGN with HTML and CSS, Spring 2006
Web Authoring,
Web Design in a Nutshell, 2nd Edition.
Deliverer: A. Vasa Buraphadeja
WEB DESIGN with HTML and CSS, Spring 2006
HTML Tags
 Elements are indicated by tags
 Tag is made up of the element name followed by an
optional list of attributes, appears between angle brackets
(< >)
 Nothing within the brackets is displayed in the browser
 Containers

Most elements or components are containers, having a start
tag and an end tag.
The weather is <I>gorgeous</I> today
 Empty ("Standalone") Tags
<frame> <hr> <meta> <img> <br> <col>
: : web Authoring : :
2
WEB DESIGN with HTML and CSS, Spring 2006
HTML Tags
 Attributes

Attributes are added within a tag to extend or modify the
tag's actions. Attributes always go in the start tag only
<ELEMENT ATTRIBUTE="value">Affected text</ELEMENT>
 Nesting HTML Tags


beginning and end tags of the enclosed tag must be
completely contained within the beginning and end tags of
the applied tag
The weather is <B><I>gorgeous</I></B> today.
mistake is overlapping the tags, although some browsers
display content marked up this way, other do not allow the
violation
: : web Authoring : :
3
WEB DESIGN with HTML and CSS, Spring 2006
Information Browsers Ignore
 Line breaks

Line returns in the HTML document are ignored. Text and
elements wrap continuously until they encounter a <p> or
<br> tag within the flow of the document text.
 Tabs and multiple spaces

a tab or more than one consecutive blank character space in
an HTML document is displayed as a single space.
Extra spaces can be added by using the non-breaking space
character entity (&nbsp;) or using preformatted text
(<pre>).
 Multiple <P> tags with no intervening text
 Unrecognized tags
 Text in comments <!-- a comment -->
: : web Authoring : :
4
WEB DESIGN with HTML and CSS, Spring 2006
Tips on Good HTML Style
 Follow HTML syntax

if you omit a closing </table> tag, some versions of IE
display the contents of the table just fine, while Netscape
Navigator leaves that portion of your web page completely
blank
 Follow code-writing conventions
Use comments to delineate sections of code so you can find
them quickly.
 Because browsers ignore line breaks, tabs, and extra spaces
in the HTML document, they can be used to make your
document easier to scan.
 because HTML tags are not case-sensitive, you may choose
to write tags in all capital letters (XML standard requires all
tags and attributes to be lowercase)

: : web Authoring : :
5
WEB DESIGN with HTML and CSS, Spring 2006
Tips on Good HTML Style
 Avoid adding extra or redundant tags.
extra and redundant HTML tags add unnecessary bytes
 make the browser work harder to parse the file, further
increasing display times
 <font> tags within a sentence is a common side effect of
making small edits with a WYSIWYG authoring tool.

 Keep good HTML style in mind when naming your files
Use the proper HTML document suffix .html , .htm
 limit filenames to letters, numbers, underscores (in place of
spaces), hyphens
 Filenames are case-sensitive in HTML

: : web Authoring : :
6
WEB DESIGN with HTML and CSS, Spring 2006
HTML Tools
 HTML documents are simple ASCII text files, you can use
any minimal text editor to write them.
 HTML Editors:
Text editing tools designed especially for writing HTML.
 WYSIWYG Authoring Tools: have graphical interfaces,
automate more complex tasks such as creating Cascading
Style Sheets, or adding JavaScript.

 Pros and Cons to authoring tools

If you do choose to use a web authoring tool, don't expect
it to excuse you from learning HTML altogether. In many
cases, you will need to do some manual fine-tuning to the
resulting HTML code.
: : web Authoring : :
7
WEB DESIGN with HTML and CSS, Spring 2006
HTML Tools
 Pros




For beginners, even useful for learning HTML.
For quick prototyping. Design ideas can be tried out on the
fly.
For complex tables and other advanced functions, e.g.
JavaScript, DHTML functions.
Offer considerable time savings.
 Cons
Sometimes add proprietary or redundant tags.
 Some editors automatically change an HTML document when
you open it in the program, or add their own tags and may
strip out any tags they do not recognize.
 The code these programs generate may not conform to the
latest HTML specifications.
 They are expensive!

: : web Authoring : :
8
WEB DESIGN with HTML and CSS, Spring 2006
HTML Tools
 Notepad as a tool:

How to save HTML file
in Notepad?



File / save as…
In file name text box,
type “index.htm” (with
double quotation
around the name.)
How to view HTML
output?


Launch IE
File / Open…and point
to the file “index.htm”.
: : web Authoring : :
9
WEB DESIGN with HTML and CSS, Spring 2006
Document Structure
 A typical HTML document is divided into two major
portions: the head and the body. The head contains
information about the document, such as its title and
"meta" information describing the contents. The body
contains the actual contents of the document (the part
that is displayed in the browser window).
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
Contents of Document
</BODY>
</HTML>
: : web Authoring : :
10
WEB DESIGN with HTML and CSS, Spring 2006
Setting Up an HTML document
 The Document Header
Titles: provides a description of the page’s contents. It’s
what’s displayed in a user’s bookmarks, also Search engines
rely heavily on titles!
 Other elements are:





link- defines the relationship between the current document and
another document, often used to link to an external style sheet.
meta- tags are used to provide info about a document
script- is to add JavaScript and VBScript using this tag.
style- is to embed style sheets.
 The Document Body: contains the contents of the
document that displays in the browser window.
: : web Authoring : :
11
WEB DESIGN with HTML and CSS, Spring 2006
Global Settings with the <body> Tag
 Colors
Page element HTML tag
Background
… bgcolor="color">
color
Background
image
Regular text
… background=”url”>
… text="color">
Description
Sets the color for the background of
the entire page using #rrggbb, or
color name
Tiling background graphics
Sets the color for all the regular text in
the document. The default color for
text is black.
Links
… link="color">
Sets the color for hyperlinks. The
default color for links is blue.
Visited link
… vlink="color">
Sets the color for links that have
already been clicked. The default color
for visited links is purple.
Active link
… alinks="color">
Sets the color for a link while it is in
the process of being clicked. The
default color for an active link is red.
: : web Authoring : :
12
WEB DESIGN with HTML and CSS, Spring 2006
Formatting Text
 Paragraphs and Headings (Block-Level Elements)

<div>...</div>





<h1> through <h6>


no presentation properties of its own
align=center|left|right
class=name
style=style properties
align=center|left|right
<p>
: : web Authoring : :
13
WEB DESIGN with HTML and CSS, Spring 2006
Formatting Text
 Text Appearance (Inline Styles)
<b>
 <font>




color=color name or #RRGGBB
face=typeface (or list of typefaces)
size=value
<i>
 <strong>
 <u>

 Spacing and Positioning
<br>
 <center>

: : web Authoring : :
14
WEB DESIGN with HTML and CSS, Spring 2006
Formatting Text
 Lists
<li>
 <ol>




start=number
type=1|A|a|I|i
<ul>

type=disc|circle|square
: : web Authoring : :
15
WEB DESIGN with HTML and CSS, Spring 2006
The <font> Tag
 Specifying Size with <font>
Absolute value:
Relative value:
1
2 3 4 5 6 7
-2 -1 -
1 2 3 4
: : web Authoring : :
16
WEB DESIGN with HTML and CSS, Spring 2006
The <font> Tag
 Specifying Size with <font>
sizes of nested <font> tags are not cumulative, but rather
are always based on the default or basefont size of the text.
 if the default text size for a document is 3, any text in that
document that is enclosed in <font size="+1"> will result in
text with a size of 4, even if that text is nested within a
paragraph with <font size="5">.

 Advantage of <font size="n">

Gives designers some control over type size
 Disadvantages of <font size="n">
overrides viewers' preference for comfortable on-screen
reading
 every single <font> tag needs to be edited individually, not
good with style

: : web Authoring : :
17
WEB DESIGN with HTML and CSS, Spring 2006
The <font> Tag
 Specifying Fonts with <font>
<FONT FACE="Verdana, Arial, sans-serif">text</FONT>
The browser looks at the string of font names until it finds
one that is installed on the user's system.
 If none of the suggested fonts are installed, the default font
is used instead.

: : web Authoring : :
18
WEB DESIGN with HTML and CSS, Spring 2006
Unix directory structure
: : web Authoring : :
19
WEB DESIGN with HTML and CSS, Spring 2006
Creating Links
 Summary of Tags Related to Linking

<a>








href=url
target=text
local file: <A HREF="filename.html">...</A>
external file: <A HREF="http://server/path/file.html">...</A>
named anchor: <A
HREF="http://server/path/file.html#fragment">...</A>
named anchor in the current file: <A
HREF="#fragment">...</A>
send an email message: <A
HREF="mailto:username@domain">...</A>
file on an FTP server: <A
HREF="ftp://server/path/filename">...</A>
: : web Authoring : :
20
WEB DESIGN with HTML and CSS, Spring 2006
Creating Links
 Absolute URLs

a protocol identifier, a host name (the name of the server
machine), and the path to the specific filename
<A HREF="http://www.littlechair.com/web/index.html">...</A>
 Relative URLs
pointer to another document relative to the location of the
current document
 currently in resume.html (identified here by its full
pathname):

www.littlechair.com/web/work/resume.html
 link on that page to bio.html, which is in the same directory:
<A HREF="bio.html">...</A>
 to link to the file index.html in a higher level directory
<A HREF="../index.html">
: : web Authoring : :
21
WEB DESIGN with HTML and CSS, Spring 2006
Introduction to Tables
 Table in action
Data table
 Text Alignment
 Page Template
 Multipart Image Container

: : web Authoring : :
22
WEB DESIGN with HTML and CSS, Spring 2006
Basic Table Structure
 Rows and Cells

The minimum tags for describing a table are <table>, <tr>,
and <td>. The following HTML shows the basic structure with
a visual representation of this concept.
<TABLE>
<TR>
<TD>cell 1</TD><TD>cell 2</TD>
</TR>
<TR>
<TD>cell 3</TD><TD>cell 4</TD>
</TR>
</TABLE>
: : web Authoring : :
23
WEB DESIGN with HTML and CSS, Spring 2006
Basic Table Structure
 Table-level Controls <table>




Width of the table and its position, align on the page
Thickness of the border around the table and between cells
Spacing within and between cells, use cellPadding and
cellSpacing
Set background, bgcolor, color of all cells
 Row-level Controls
Vertical and horizontal alignment, valign and align, of the
content in that row
 Set background color of all cells contained in that row
 Cell-level Controls, <tr>, or <th>
 Vertical and horizontal alignment of the cell’s content
 Set background color of that cell
 Height and width of the cell
 Whether the cell should span over more than cell space,
colspan and rowspan

: : web Authoring : :
24
WEB DESIGN with HTML and CSS, Spring 2006
Basic Table Structure
 Spanning Columns and Rows

Columns->

Rows->
: : web Authoring : :
25
WEB DESIGN with HTML and CSS, Spring 2006
Affecting Table Appearance
 Positioning a Table on the Page
By default, they behave like paragraphs or other blocks, but
like images if floated to the left or right with the align
attribute.
 Use the align attribute to position against the left or right
margin and allow text to flow around it

 Sizing Tables
By default, a table (and its rows and columns) are sized
automatically to the minimum dimensions required to fit their
contents.
 It is desirable to assign a table or column a specific size,
especially when using the table to build a page structure.

: : web Authoring : :
26
WEB DESIGN with HTML and CSS, Spring 2006
Affecting Table Appearance
 Table dimensions
The width attribute is used within the <table> tag to specify
the width of the table.
 Specify an absolute value (measured in pixels) or a relative
value (a percentage of the available width of the screen) as
shown in the following table:

Style
Sample HTML
absolute value <table width=600>
relative value

Result
Makes the table 600 pixels
wide
<table width=80%> Makes the table 80% of the
screen width
Table height can be specified using the height attribute, also
can be defined by absolute or relative values.
: : web Authoring : :
27
WEB DESIGN with HTML and CSS, Spring 2006
Affecting Table Appearance
 Cell dimensions
A cell's width setting affects the width of the entire column it
occupies, so you can be specified by setting the width of just
one cell in the column (generally those in the top row); the
remaining cells will follow.
 Likewise, row height can be set using just one cell in each
row.

: : web Authoring : :
28
WEB DESIGN with HTML and CSS, Spring 2006
Affecting Table Appearance
 Table Cell Spacing
 Cellspacing
The amount of space between
table cells is controlled by the
cellspacing attribute within
the <table> tag.
 Default value is 2

 Cellpadding

Refers to the amount of space
between the cell's border and
the contents of the cell
: : web Authoring : :
29
WEB DESIGN with HTML and CSS, Spring 2006
Affecting Table Appearance
 Coloring Tables

You can specify a background color for the entire table
(<table>), for selected rows (<tr>), or for individual cells
(<td> or <th>) by placing the bgcolor attribute in the
appropriate tag.
: : web Authoring : :
30