HTML Tutorial II SYNTAX

1
HTML Tutorial IISYNTAX
2
HTML SYNTAXTAGS
Common Tag Groups Basic required for page
structure Text affect the appearance of text
e.g. size, bold, etc Links provide hypertext
links to other pages, email Formatting affect
the page layout e.g. breaks, lists Graphical
introduces images, lines, etc. Tables to
create tables for organizing text
3
HTML SYNTAXTAGS
Basic Tags ltHTMLgt lt/HTMLgt ltHEADgt
lt/HEADgt ltTITLEgt lt/TITLEgt ltBODYgt lt/BODYgt
4
HTML SYNTAXBasic Tags
ltHTMLgt lt/HTMLgt Begins and ends an HTML document
Example lthtmlgt . Web page contents lt/htmlgt
5
HTML SYNTAXBasic Tags
ltHEADgt lt/HEADgt Encloses items in an HTML
document head, which contains special
information, including the document title.
Example lthtmlgt ltheadgt lttitlegtMy First HTML
Documentlt/titlegt lt/headgt lt/htmlgt
6
HTML SYNTAXBasic Tags
ltTITLEgt lt/TITLEgt Displays the documents title.
The title is displayed on the browser title bar.
Example lthtmlgt ltheadgt lttitlegtMy First HTML
Documentlt/titlegt lt/headgt lt/htmlgt
7
HTML SYNTAXBasic Tags
ltBODYgt lt/BODYgt Encloses the main structure of
the HTML document, such as text and images.
Example lthtmlgt ltheadgt lt/headgt ltbodygt body
content here lt/bodygt lt/htmlgt
8
HTML SYNTAXTAGS
Text Tags Headings ltH1gt lt/H1gt ltH6gt
lt/H6gt Bold ltBgt lt/Bgt Italics ltIgt lt/Igt
Center ltCENTERgt lt/ CENTER gt Preformatted
ltPREgt lt/PREgt Comments lt! text gt NOTE
CAPITALS for emphasis only
9
HTML SYNTAXText Tags
ltH1gt lt/H1gt ltH6gt lt/H6gt Creates headings that
can be used in HTML documents. Numbering (size)
goes from 1-6.
Example lthtmlgt ltheadgt ltbodygt lth1gt
INTRODUCTION lt/h1gt body content
here lt/bodygt lt/htmlgt
10
HTML SYNTAXText Tags
ltBgt lt/Bgt Makes text bold on display.
Example ltbodygt body content here ltbgt This
line of text is bold lt/bgt lt/bodygt
11
HTML SYNTAXText Tags
ltIgt lt/Igt Makes text italic on display
Example ltbodygt body content here ltigt This
line of text is in italics lt/igt lt/bodygt
12
HTML SYNTAXText Tags
ltCENTERgt lt/CENTERgt To center text, images, and
headings
The center tag can be used with other tags. It
automatically inserts a line break after the
closing center tag. Example ltbodygt ltcentergtThis
is a centered sentencelt/centergt ltcentergtltigt This
line of text is centered and italics
lt/igtlt/centergt lt/bodygt
13
HTML SYNTAXText Tags
ltPREgt lt/PREgt Preformatted text is displayed
as-is (keeps format)
Example ltbodygt body content here ltpregt The
formatting of these lines of text is
preserved with regard to indent, spacing, etc.
lt/pregt lt/bodygt
14
HTML SYNTAXText Tags
lt! text gt (exclamation mark) ! Inserts a
comment line in the page. For documentation
purposes - does not display
Example ltbodygt body content here lt!---This
comment line will not appear in the browser
---gt lt/bodygt
15
HTML SYNTAXTAGS
Formatting Tags Line Break ltBRgt Paragraph ltPgt
lt/Pgt Unordered List ltULgt lt/ULgt Ordered
List ltOLgt lt/OLgt Definition List ltDLgt lt/DLgt

16
HTML SYNTAXFormatting Tags
ltBRgt Creates a line break
Example ltbodygt body content here ltbrgt This
inserts a blank line in the page (One of the few
tags that do not have an end tag!) lt/bodygt
17
HTML SYNTAXFormatting Tags
ltPgt lt/Pgt Begins and ends a paragraph
Example ltbodygt body content here ltpgt This
starts a new paragraph It creates a line break
at the start and blank line at the end of the
paragraph lt/pgt lt/bodygt
18
HTML SYNTAXFormatting Tags
ltULgt lt/ULgt Creates an unordered list
Unordered (bulleted) lists are started with the
ltulgt tag, followed by the actual list items,
which are marked with the ltligt tag.
Example ltulgt ltligt list item 1 ltligt list
item 2 ltligt list item 3 lt/ulgt
19
HTML SYNTAXFormatting Tags
ltOLgt lt/OLgt Creates an ordered list
Ordered (numbered) lists are started with the
ltolgt tag, followed by the actual list items,
which are marked with the ltligt tag.
Example ltolgt ltligt list item 1 ltligt list
item 2 ltligt list item 3 lt/olgt
20
HTML SYNTAXFormatting Tags
ltDLgt lt/DLgt Creates a list of terms and
definitions
Definition lists allow you to indent without
using bullets. They start with the ltdlgt tag,
followed by the list term ltdtgt and definition
ltddgt. Example ltdlgt ltdtgt This is a term
ltddgt This is a definition ltdtgt Another term
ltddgt Another definition lt/dlgt  
21
HTML SYNTAXTAGS
EXAMPLE 2
Html Formatting Example.txt  Html Formatting
Example.html
22
HTML SYNTAXTAGS
Link Tags External Site ltA HREFurlgt
linklt/Agt Email ltA HREFmailtoemailaddrgtl
inklt/Agt In-page Anchor ltA NAMEanchor
namegtanchorlt/Agt Link to Anchor ltA
HREFanchor namegtlinklt/Agt Anchor
Destination point in the page
23
HTML SYNTAXLink Tags
ltA HREFurlgt link text lt/Agt Anchor for an
URL. link text is the hyperlink text. To link
to a page (url) on the Web, click the text
part.
Example lta href"http//www.wlu.ca/"gtWelcome to
WLUlt/agt lta -- starts the
anchor href -- stands for
"hypertext reference" http//www.wlu.ca/gt -- the
URL of the other document Welcome to WLU --
the text that appears as the hot link lt/agt
-- ends the anchor
24
HTML SYNTAXLink Tags
ltA HREFmailtoemail addrgtLink
Textlt/Agt Anchor to send email. Click the Link
Text to send email to address email addr
Example lta href"mailtojdoe_at_wlu.ca "gt Send me
emaillt/agt lta -- starts the
anchor href -- stands for
"hypertext reference" mailto -- the email
protocol jdoe_at_wlu.ca -- the actual email
address Send me email -- the link in the web
page lt/agt -- ends the anchor
25
HTML SYNTAXLink Tags
ltA NAMEnamegtanchorlt/Agt Creates a target
(anchor) within an HTML document
To link to a specific point within the same
document, you must define the target (anchor
name) inside the document and then create link(s)
to it. Example lta nameChapter1"gtChapter
1lt/agt  rest of Chapter 1 . Chapter 2.
etc.
26
HTML SYNTAXLink Tags
ltA HREFnamegtlinklt/Agt Creates a link to a
named target (anchor) within an HTML document
To link to a named anchor within the same
document, (after defining the anchor,) you must
then create the link to it. Example  lta
nameChapter1"gtChapter 1lt/agt lt Anchor rest
of Chapter 1 . Chapter 2. etc. lta
hrefChapter1"gtGo to Chapter 1lt/agt
27
HTML SYNTAXTAGS
Graphical Tags Background Colour ltBODY
BGCOLORcolourgt Text Colour ltBODY
TEXTcolourgt Horizontal Line ltHRgt Insert
Image ltimg src"path or URL of image file"gt
Alignment ltimg srcpath / URL alignposition
gt
28
HTML SYNTAXGraphical Tags
ltBODY BGCOLORcolourgt Specifies the background
colour of the web page
colour may be a hex code or predefned colour
Some hex codes Bright red FF0000
Dark green 003300 Bluish-purple
660099 Medium-gray 999999 Example ltbody
bgcolorFF0000gt ltbody bgcolorredgt
29
HTML SYNTAXGraphical Tags
ltBODY TEXTcolourgt Specifies the text colour of
the web page
colour may be a hex code or predefned
colour ltas for backgroundgt Some predefined
Colours Black, White, Gray, Purple, Cyan, Red,
Magenta, Green, Teal, Yellow Example ltbody
textblackgt
30
HTMLBackground Colours
Background colours (hex code) Bright red
FF0000 Dark green 003300 Bluish-purple
660099 Medium-gray 999999
16 Predefined Colours Black, White, Gray,
Purple, Cyan, Red, Magenta, Green, Teal,
Yellow For a list of all (most) colours
codes http//www.users.interport.net/giant/COLOR
/1ColorSpecifier.html
31
HTML SYNTAXGraphical Tags
ltHRgt Draws a horizontal line across the web page
Example page text lthrgt inserts a
horizontal rule (line) page text NOTE No
end tag
32
HTML SYNTAXGraphical Tags
ltimg src"path or URL of image file"gt Inserts an
inline image using the image file specified by
the path or URL
Example this image is in the same folder
(disk) as the web page ltimg src"laurier.jpg"gt
this image is in the images folder of another
web site ltimg srchttp//www.wlu.ca/images/lau
rier.gifgt page text
33
HTML SYNTAXGraphical Tags
ltimg srcpath / URL alignpositiongt Inserts
an inline image aligned at position
(left/right/centre)
Example this image is in the same folder as
the web page ltimg src"laurier.jpg
alignleftgt this image is in the images
folder of another web site ltimg
srchttp//www.wlu.ca/images/laurier.gif
alignrightgt
34
HTML SYNTAXGraphical Tags
ltA HREFURLgtltimg srcpath / URLgtlt/Agt Inserts
an inline image as a link
Example You can make an image into a link.
Specify the "href" and the "img src" like
thisltbrgt lta href"http//www.wlu.ca"gtltimg
src"laurier.jpg"gtlt/agt
35
ABSOLUTE vs RELATIVE LINKS
Relative Address You are at 70 Albert St. and
you are asked for directions to someone at 75
Albert Relative to current location (70 Albert
St.), you would say - e.g. 75 Absolute
Address If you are not in the vicinity, you
would give the full address e.g. 75 Albert St.,
Waterloo   
36
ABSOLUTE vs RELATIVE LINKS
 Relative URL address When linking from one
document to another in the same folder Ex. lta
hrefcustomer.html"gtGo to customer
pagelt/agt Absolute URL address When linking from
one document to another on another server Ex.
lta href"http//www.wlu.ca/index.html"gtWelcome to
Laurierlt/agt  
37
HTML SYNTAXFormatting Tags
EXAMPLE 3
Html Link-Graph Example.txt  Html Link-Graph
Example.html
38
HTML SYNTAXTAGS
Table Tags Start Table ltTABLEgt
lt/TABLEgt Create Row ltTRgt lt/TRgt Create
Column ltTDgt lt/TDgt
39
HTML SYNTAXTable Tags
ltTABLEgt lt/TABLEgt Begins a table within an HTML
document
Example lttable bordern widthxgt table
rows and column lt/tablegt NOTE You can
specify the border type and size (width) of the
table, among other things.
40
HTML SYNTAXTable Tags
ltTRgt lt/TRgt Creates a row within a table. Used
within the ltTABLEgt tag
Example lttablegt lttrgt start of first row .
column def. lt/trgt lt/tablegt
41
HTML SYNTAXTable Tags
ltTDgt lt/TDgt Creates a column within a row. Used
within the ltTRgt tag
Example lttablegt lttrgt lttdgt column 1lt/tdgt lttdgt
column 2 lt/tdgt lt/trgt lt/tablegt
42
HTML SYNTAXTable Tags
EXAMPLE 4
Html Table Example 1.txt  Html Table Example
1.html See website for composite example. html
Complete Example.pdf
43
HTML SYNTAX
WEB PAGE
44
lthtmlgt ltheadgt lttitlegtMy First HTML
Documentlt/titlegt lth1gtThis is a header 1
taglt/h1gt lt/headgt ltbody bgcolor"999999"gt lta
name"Top"gtltbgtltigtTop of Documentlt/igtlt/bgtlt/agt ltpgt
causes a line break and adds a trailing blank
lineltpgt ltbrgt causes a line break with no trailing
blank lineltbrgt This is a ltbgtboldfacelt/bgt tag.
ltbrgt This is an ltigtitaliclt/igt tag. ltbrgt ltulgt
ltligt list item 1 ltligt list item 2
ltligt list item 3 lt/ulgt ltcentergtThis is a
centered sentencelt/centergt lthrgt inserts a
horizontal rule (line) lt!-----This comment will
not appear in the browser-----gt ltpgt To link to a
file on a Web server, use the "href" tag lta
href"http//www.wlu.ca/"gtWelcome to Laurierlt/agt
lt!---Comment lta -- starts
the anchor href -- stands for
"hypertext reference" http//www.wlu.ca/ --
the URL of the other document Welcome to Laurier
-- the text that will appear and be
clickable /agt -- ends the
anchor end of comment----gt ltpgt lta
href"Top"gtGo to Top of Documentlt/agt ltpgt To make
an image into a link the tag would look like
this ltpgt lta href"http//www.wlu.ca"gtltimg
src"laurier.jpg"gtlt/agt ltpgt And finally, to email
the webmeister, use the "mailto" tagltpgt lta
hrefmailto"fanatol_at_wlu.ca"gtfanatol_at_wlu.calt/agt lt/
bodygt lt/htmlgt