Upload
wfscmgbh
View
247
Download
0
Embed Size (px)
Citation preview
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 1/14
Hong Kong Baptist University
Week 4
Introduction to HTML
25/01/2010
Dr. Tony Chun-Kuen WONG
Coordinator, BBA(Hons) Information System Management Major
Department of Finance and Decision SciencesSchool of Business
Hong Kong Baptist University
What is HTML?
o ec on o p a orm- n epen en s y es n ca e y
markup tags) that define the various components of a
Web a e
HTML’s latest is version 4.01
ow s mov ng o . ,
Reference : http://w3.org ; http://www.w3schools.com/
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 2/14
Hong Kong Baptist University
Tags
xamp e o e emen s are ea s, a es, paragrap s an s s
Tags denote the various elements ag: < ag name a r u es >
Usually paired: <h1> and </h1> together to start and end
Some tags include attributes
Hong Kong Baptist University
Hello HTML: Minimal Text
<head>
<TITLE> A Sim le HTML Exam le< 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>
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 3/14
Hong Kong Baptist University
Markup Tags
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>
Hong Kong Baptist University
Paragraphs
oncep o carr age re urn, ne ee or spaces are rep ace
by one space in HTML
’ ,
Usually <p> (text here) </p>
,
text: <P ALIGN=CENTER>
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 4/14
Hong Kong Baptist University
Numbered Lists
,
start with an opening list<OL>
(for unnumbered list) tag
item; no closing </LI> tag is needed
end the entire list with a closing list </OL> tag
Example
<OL>
<LI> oranges
<LI> peaches
< > grapes
</OL>
Hong Kong Baptist University
Special Characters
“ ” “ “
Use “>” and “<” instead
Logical & Physical Styles
Should content be separated from presentation?
Pro: Once you change a font, you don’t have to go to all tags and changethem
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 erha s how the are ronounced.
Ref : http://www.w3.org/Style/
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 5/14
Hong Kong Baptist University
Logical Styles
for emphasis. Typically displayed in italics. ( Italicized text.)
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> header file)
Hong Kong Baptist University
Logical Styles (contd)
for strong emphasis. Typically displayed in bold. (NOTE: Always
check your links.)
<VAR>
for a variable, where you will replace the variable with specificinformation. Typically displayed in italics. (rm filename
deletes the file.)
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 6/14
Hong Kong Baptist University
Physical Styles
bold text
italic text
<TT>
typewriter text, e.g. fixed-width font.
&nbs s ace
Hong Kong Baptist University
Fonts
<font size=2 color=green>size=2</font>
“ ”
will show as
size=1size=2size=3
Check html you write at:
http://validator.w3.org/
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 7/14
Hong Kong Baptist University
Linking
e power o s a y o n ex an or mages
to other document or section of a document rowser g g s e en e ex or mage w co or
and/or underlines to indicate that it is a hypertext link
s ng e yper ex -re a e ag s , w c s an s or
anchor
Hong Kong Baptist University
Links
s ar e anc or w
specify the document you're linking to by entering the
= enter the text that will be the hypertext link in the current
ocumen
enter the ending anchor tag: </A>
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 8/14
Hong Kong Baptist University
Relative vs. Absolute Path
n y spec y ng e re a ve pa rom e curren
document directory to the other document” ".
Advantage
ability to move documents
more efficient
Hong Kong Baptist University
URL
n orm esource oca ors s o spec y e oca on
of files on servers
./path/filename
c eme: e, p, gop er, p
Port: can be omitted. Usually 80 for http.
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 9/14
Hong Kong Baptist University
Links to Specific Sections
a. m ,
<A NAME=”mit">1. Massachusetts
In other (section of) document, add the hyperlink
Previous work at <A href=“a.html#mit”>
MIT </a>
Hong Kong Baptist University
Mail...
’ .
Send email by clicking on<A HREF=
"mailto:[email protected]">Richard</a>
External Multimedia
<A HREF="MyImage.gif">link anchor</A>
<A HREF=”adams.mov">link anchor</A>
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 10/14
Hong Kong Baptist University
Tables
<CAPTION></CAPTION>
Can use any tag in caption
<TR></TR>
Table row, can use ALIGN and VALIGN(TOP:MIDDLE:BOTTOM)
< >< >: a e ea er ce
<TD></TD>
Table Data Cell; text ali ned left and centered verticall
Other attributes possible, can use ALIGN and VALIGN for example
BORDER attribute puts borders to the different cells
r u es or superce e r
Hong Kong Baptist University
Parts of a Table
Caption
Tablea e
HeadingBorder
Table
Cell
Cell padding: spacebetween cell contents and
its borders
Cell Spacing: amount of
space between cells
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 11/14
Hong Kong Baptist University
<HTML>
<HEAD>
<TITLE>A Basic Table</TITLE>
</HEAD>
<TD>Tom</TD>
<TD>6'0"</TD>
<BODY BGCOLOR="#FFFFFF">
<TABLE BORDER=1>
<CAPTION>Vital Statistics</CAPTION>
<TD>165</TD>
<TD>Hazel</TD>
</TR>
<TH>Name</TH>
<TH>Height</TH>
<TH>Weight</TH>
<TR>
<TD>Susan</TD>
< > ' "< >
<TH>Eye Color</TH>
</TR>
<TR>
<TD>97</TD>
<TD>Brown</TD>
<TD>Alison</TD>
<TD>5'4"</TD>
<TD>140</TD>
</TR>
</TABLE>
</TR>
Hong Kong Baptist University
General Table Format
-- --
<CAPTION> cap contents </CAPTION> <!-- capt definition -->
<TR> <!-- start of header row definition -->
<TH> first header cell contents </TH>
<TH> last header cell contents </TH></TR> <!-- end of header row definition -->
<TR> <!-- start of first row definition -->
< > < >,
<TD> first row, last cell contents </TD>
</TR> <!-- end of first row definition -->
<TR> <!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR> <!-- end of last row definition -->
< > < -- -->
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 12/14
Hong Kong Baptist University
General Format Result
first header cell contents last header cell contents
, ,
last row, first cell contents last row, last cell contents
Hong Kong Baptist University
Other Attribute of Table
“ ” “ ”a e w = x p xe or x or er= x p xe
cellpadding=“x pixel” cellspacing=“x pixel” >
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 13/14
Hong Kong Baptist University
Column Widths
width
< = = >
<CAPTION>Vital Statistics</CAPTION>
<TR>
" "
<TH WIDTH="20%">Height</TH>
<TH WIDTH="20%">Weight</TH>
<TH WIDTH="20%">E e Color</TH>
</TR>
<TR>
<TD>Alison</TD><TD>5'4"</TD>
<TD>140</TD>
<TD>Blue</TD>
</TR>
Hong Kong Baptist University
Alignment Table Alignment
<table align=“left” border=“1” width=“70%”>
Cell Alignment
=“ ” =“ ”
Alignment for entire row
<tr align = …. valign= …. >
Final reference : HTML Tag reference
HTML tutorial
http://www.w3schools.com/html/default.asp
End
8/9/2019 Ch.4b HTML Fundamentals
http://slidepdf.com/reader/full/ch4b-html-fundamentals 14/14
Hong Kong Baptist University
Tutorial
Exercise
Work out the example in the Site Navigation Note
Put your site Specification document into a HTML format
Htmltagreference.htm
Html4.10 s ecification – html40.zi
Example – week4.zip