ch.4b html fundamentals

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


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/




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


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>




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>


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>




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>


Special Characters

“ ” “ “

Use “&gt” and “&lt” 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/




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)


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.)




Physical Styles

bold text

italic text

<TT>

typewriter text, e.g. fixed-width font.

&nbs s ace


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/




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


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>




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


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.




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>


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>




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


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

<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>


General Table Format

-- --

<CAPTION> cap contents </CAPTION> 

<TR> 

<TH> first header cell contents </TH>

<TH> last header cell contents </TH></TR> 

<TR> 

< > < >,

<TD> first row, last cell contents </TD>

</TR> 

<TR> 

<TD> last row, first cell contents </TD>

<TD> last row, last cell contents </TD>

</TR> 

< > < -- -->




General Format Result

first header cell contents last header cell contents

, ,

last row, first cell contents last row, last cell contents


Other Attribute of Table

“ ” “ ”a e w = x p xe or x or er= x p xe

cellpadding=“x pixel” cellspacing=“x pixel” >




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>


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




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

ch.4b html fundamentals

Documents