Ch.4b HTML Fundamentals

Hong Kong Baptist University
Week 4
Introduction to HTML
25/01/2010
Dr. Tony Chun-Kuen WONG

Coordinator, BBA(Hons) Information System Management Major
p
Department of Finance and Decision Sciences
School of Business
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/
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
Hello HTML: Minimal Text

<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.</P>
<p>This is the second paragraph.</P>
</body>
</html>
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
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 “&gt” and “&lt” instead
Logical
g & Physical
y Styles
y
Should content be separated from presentation?

Pro: Once you change a font, you don’t have to go to all tags and change
them
Con: If you want to make the decision on italicizing a word
Common Style sheets (CSS)
Style sheets describe how documents are presented on screens, in print,
or pperhaps
p how they y are ppronounced.
Ref : http://www.w3.org/Style/
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 )
Logical Styles (contd)

<STRONG>
for strong emphasis. Typically displayed in bold. (NOTE: Always
check yyour links.))
<VAR>
for a variable, where you will replace the variable with specific
information. Typically displayed in italics. (rm filename
deletes the file.)
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/
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>
Relative vs. Absolute Path

Linkk by
Li b specifying
if i the
th relative
l ti pathth from
f the
th currentt
document directory to the other document
<A HREF=”ism2620/test
HREF= ism2620/test.html html">TESTING</A>
>TESTING</A>
Advantage
ability
bili to move documents
d
more efficient
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.
Links to Specific Sections

In document a.html,
a html add an anchor:
<A NAME=”mit">1. Massachusetts
Institute Of Technology</a>
In other (section of) document, add the hyperlink

reference:
Previous work at <A href=“a.html#mit”>
MIT </a>
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>
<A HREF=”adams.mov">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
Cell padding: space

between cell contents and Table Cell Spacing: amount of
its borders Cell space between cells
<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>
General Table Format

<TABLE> <!
>
<CAPTION> cap contents </CAPTION> 
<TR> 
<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR> 
<TR> 
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR> 
<TR> 
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR> 
</TABLE> <!

>
General Format Result

caption contents
first header cell contents last header cell contents
first row,
row first cell contents first row,
row last cell contents
last row, first cell contents last row, last cell contents
Other Attribute of Table

<table
<t bl width=“x
idth “ pixel
i l or x%”
%” border=“x
b d “ pixel”
i l”
cellpadding=“x pixel” cellspacing=“x pixel” >
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= …. >
Final reference : HTML Tag reference
HTML tutorial
http://www.w3schools.com/html/default.asp
End
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

Ch.4b HTML Fundamentals

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ch.4b HTML Fundamentals

Enviado por

Direitos autorais:

Formatos disponíveis

Hong Kong Baptist University

Dr. Tony Chun-Kuen WONG

Hong Kong Baptist University

Hong Kong Baptist University

Hello HTML: Minimal Text

Hong Kong Baptist University

Hong Kong Baptist University

 Should content be separated from presentation?

Hong Kong Baptist University

Logical Styles (contd)

Hong Kong Baptist University

Hong Kong Baptist University

Relative vs. Absolute Path

Hong Kong Baptist University

Links to Specific Sections

 In other (section of) document, add the hyperlink

Hong Kong Baptist University

 <A HREF=”adams.mov">link anchor</A>

Hong Kong Baptist University

Cell padding: space

Hong Kong Baptist University

General Table Format

General Format Result

Hong Kong Baptist University

Other Attribute of Table

Hong Kong Baptist University

Final reference : HTML Tag reference

Você também pode gostar

Should content be separated from presentation?

In other (section of) document, add the hyperlink

<A HREF=”adams.mov">link anchor</A>