Académique Documents
Professionnel Documents
Culture Documents
Week 4
Introduction to HTML
25/01/2010
What is HTML?
Collection
C ll ti off platform-independent
l tf i d d t styles
t l (indicated
(i di t d b
by
markup tags) that define the various components of a
Web page
HTML’s latest is version 4.01
N iis moving
Now i tot XHTML 1.0,
1 0 XML
Reference : http://w3.org ; http://www.w3schools.com/
Hong Kong Baptist University
Tags
Example
E l off elements
l t are heads,
h d tables,
t bl paragraphs
h andd lists
li t
Tags denote the various elements
T < (t
Tag: (tag name) ) [attributes]
[ tt ib t ] >
Usually paired: <h1> and </h1> together to start and end
a tag instruction
Some tags include attributes
Markup Tags
HTML
tells your browser that the file contains HTML-coded information
HEAD
the 1st part of your document
TITLE
contains document title and identifies its content in a global context
Title displayed at top of browser window and in the bookmarks or
favorites
BODY
most of the stuff goes here
Headings
6 levels in HTML: H1 to H6, used as such <h1> text of heading </h1>
Paragraphs
Conceptt off carriage
C i return,
t linefeed
li f d or spaces are replaced
l d
by one space in HTML
If you don
don’tt use paragraph tags,
tags text will be one big block
Usually <p> (text here) </p>
This tag also allows you to add attributes,
attributes like centering
text: <P ALIGN=CENTER>
Can use LEFT (default) and RIGHT
Hong Kong Baptist University
Numbered Lists
To make an numbered list,
list
start with an opening list <OL> (for unnumbered list) tag
enter the <LI> (list item) tag followed by the individual
item; no closing </LI> tag is needed
end the entire list with a closing list </OL> tag
Example
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
Special Characters
Letter like “>”
> and “<“
< cannot enter the web page directly
Use “>” and “<” instead
Logical
g & Physical
y Styles
y
Ref : http://www.w3.org/Style/
Hong Kong Baptist University
Logical Styles
<EM>
for emphasis. Typically displayed in italics. (Italicized text.)
<CITE>
for titles of books, etc. Typically displayed in italics. (A Beginner's
Guide to HTML)
<CODE>
for computer code. Displayed in a fixed-width font. (The
<stdio.h>
i h d file)
header fil )
Physical Styles
<B>
bold text
<I>
italic text
<TT>
typewriter text, e.g. fixed-width font.
p; space
p
Fonts
<P><font size=1>size=1</font>
<font size=2 color=green>size=2</font>
<font size=3 face=“arial”>size=3</font>
will show as
size=1size=2 size=3
Check html you write at:
http://validator.w3.org/
Hong Kong Baptist University
Linking
Chieff power off HTML iis ability
Chi bilit to
t link
li k text
t t and/or
d/ images
i
to other document or section of a document
browser highlights
b hi hli ht the
th identified
id tifi d text
t t or image
i with
ith color
l
and/or underlines to indicate that it is a hypertext link
single hypertext-related
hypertext related tag is <A>,
<A> which stands for
anchor
Links
start the anchor with <A
specify the document you're linking to by entering the
parameter HREF="filename"
HREF "filename" followed by (>)
enter the text that will be the hypertext link in the current
d
document t
enter the ending anchor tag: </A>
Hong Kong Baptist University
URL
Uniform
U if Resource
R Locators
L t (URLs)
(URL ) tto specify
if the
th location
l ti
of files on servers
service://host.domain[:port]
service://host domain[:port]
/path/filename
Scheme: file,
file ftp
ftp, gophe
gopher, http
Port: can be omitted. Usually 80 for http.
Hong Kong Baptist University
Mail...
It’ss easy to add an email option in a web page.
It page
Send email by clicking on
<A HREF=
"mailto:rabbat@mit.edu">Richard</a>
External Multimedia
<A HREF="MyImage.gif">link anchor</A>
Tables
<TABLE></TABLE>
<CAPTION></CAPTION>
Can use any tag in caption
<TR></TR>
Table row, can use ALIGN and VALIGN(TOP:MIDDLE:BOTTOM)
<TH></TH>: table
<TH></TH> t bl header
h d cell
ll
<TD></TD>
Table Data Cell;; text aligned
g left and centered verticallyy
Other attributes possible, can use ALIGN and VALIGN for example
BORDER attribute puts borders to the different cells
Attributes for <th> <td> supercede <tr>
Parts of a Table
Caption
Table
Border
B d Table
Heading
<HTML> <TR>
<HEAD>
<TD>Tom</TD>
<TITLE>A Basic Table</TITLE>
</HEAD>
<TD>6'0"</TD>
<BODY BGCOLOR="#FFFFFF"> <TD>165</TD>
<TABLE BORDER=1> <TD>Hazel</TD>
<CAPTION>Vital Statistics</CAPTION>
</TR>
<TR>
<TH>Name</TH>
<TR>
<TH>Height</TH> <TD>Susan</TD>
g
<TH>Weight</TH> TD 5 1 /TD
<TD>5'1"</TD>
<TH>Eye Color</TH>
<TD>97</TD>
</TR>
<TR>
<TD>Brown</TD>
<TD>Alison</TD> </TR>
/
<TD>5'4"</TD> </TABLE>
<TD>140</TD>
<TD>Blue</TD>
</TR>
Column Widths
Width attribute can be applied to individual cells to control the column
width
<TABLE BORDER="1"
BORDER "1" WIDTH="100%">
WIDTH "100%">
<CAPTION>Vital Statistics</CAPTION>
<TR>
<TH WIDTH="40%">Name</TH>
WIDTH= 40% >Name</TH>
<TH WIDTH="20%">Height</TH>
<TH WIDTH="20%">Weight</TH>
<TH W
WIDTH="20%">Eye
0% ye Color</TH>
Co o /
</TR>
<TR>
<TD>Alison</TD>
<TD>5'4"</TD>
<TD>140</TD>
<TD>Blue</TD>
</TR>
Alignment
Table Alignment
<table align=“left” border=“1” width=“70%”>
Cell Alignment
<td align
align=“left
left | center | right
right” valign
valign=“top
top | middel | bottom”>
bottom >
Alignment for entire row
<tr align = …. valign= …. >
HTML tutorial
http://www.w3schools.com/html/default.asp
End
Hong Kong Baptist University
Tutorial
Exercise
Work out the example in the Site Navigation Note
Put your site Specification document into a HTML format
Reference
Htmltagreference.htm
Html4.10 specification – html40.zip
Example – week4.zip