Basic HTML

1
Basic HTML
Part Two
Slides prepared by K. Clark
Modification Date January, 2007
2
The Anchor Element
The anchor element, the single letter a, is used
to connect different documents or parts of one
document. Any text associated with the anchor
element, called anchor text is displayed on the
screen. When clicked upon, a branch is made to
the destination.
Slides prepared by K. Clark
3
External Hypertext Links - 1

• Used to create a jump from one point in a
  document to another document.
• Destination may be another web site or a document
  in the local machine.
• General Form
• lta href destination heregt anchor text lt/agt

Slides prepared by K. Clark
4
External Hypertext Links - 2
Example lta href bingo.htmgtBingo
Gamelt/agt Causes the html file bingo.htm to
replace the current page in the browser. The file
is assumed to be in the same directory as the
currently displayed file otherwise an error
message will be displayed.
Slides prepared by K. Clark
5
External Hypertext Links - 3
Example lta href file//c/myfiles/bingo.htmgtB
ingo Gamelt/agt Same as previous, except looks for
the page in the subdirectory (or, "folder")
myfiles on c drive. lta href http//www.osc.on.c
agtOnt. Science Centerlt/agt Searches for the web
site osc.on.ca on the World Wide Web. A default
page will be displayed when the site is
located.
Slides prepared by K. Clark
6
Internal Hypertext Links - 1

• Used to create a jump from one point in a
  document to another in the same document.
• The destination is marked with a name tag, which
  labels that point in the document.
• A preprended to the destination name is used
  with href at the origin point.

Slides prepared by K. Clark
7
Internal Hypertext Links - 2
Example lta name descriptiongt lt/agt Creates a
label named description at the point in the
document where it is located. lta href
descriptiongtGo To Descriptionlt/agt Displays Go
To Description and causes a jump to the point of
the label when clicked.
Slides prepared by K. Clark
8
Internal Hypertext Links - 3
Example lta href http//www.bigcarco.com/year20
04/bestof/WowZoomer.htmlprices
gtZoomerPricelt/agt Causes a hypertext jump to the
point labelled prices in the document
WowZoomer.html in the subdirectory
year2004/bestof at the web site
"www.bigcarco.com", when the anchor text
ZoomerPrice is clicked.
Slides prepared by K. Clark
9
Internal Hypertext Links - 4
Warning ! Do not include the entire URL in an
internal link within the same document. This may
cause the browser to reload the entire page,
instead of just jumping to the name point in
the document.
Slides prepared by K. Clark
10
IMAGES
11
Images
The ltimg /gt tag (element) is used to
manipulate image and graphics files. Attributes
src name. Identifies the file to be
loaded into a document. align top,
middle, bottom, left, or right
Positions the image in the document
Slides prepared by K. Clark
12
Images - 2
Example ltimg src mypicture.jpg /gt Loads a
jpeg file named mypicture into the document at
the location of the element. jpeg Joint
Photographic Experts Group. jpg is
recognized as identical with jpeg
Slides prepared by K. Clark
13
Images - 3
Example ltimg src mypicture.gif align
right/gt Loads a gif file named mypicture
into the document at the location of the element,
and moves it to the right hand side of the
page. gif Graphics Interchange Format
Slides prepared by K. Clark
Slides prepared by K. Clark
14
Images - 4
Example ltimg src mypicture.bmp align
middle height 100 width 200/gt Loads a
.bmp file into the document, centers it
vertically, relative to the line, and gives it a
height of 100 pixels and a width of 200 pixels.
This may distort the original proportions of the
image. bmp BitMaP An older, simpler, type of
graphics image.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
15
Images - 5
Example ltimg src mypicture.jpg alt no
Pix! /gt Loads the image mypicture.jpg if
possible. If for some reason the image can not be
loaded, the browser should display the text no
Pix! in its place. This facility was originally
intended to accommodate text-only browsers.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
16
Images - Note
Animated GIF File A .gif image file which
is composed of a series of frames or images,
prepared with special editing software, and which
simulates motion by displaying the images in the
file consecutively. It is an electronic
equivalent of an older style celluloid motion
picture.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
17
TABLES
18
Tables - 1
Essentially, a table is a matrix formed by the
intersection of a number of horizontal rows and
vertical columns. Column 1
Column 2 Column 3 Row 1 Row 2 Row 3
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
19
Tables - 2
The intersection of a column and row is called a
cell. Cells in the same row or column are usually
logically related in some way. Column 1
Column 2 Column 3 Row 1 Row 2 Row 3
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
20
Tables - 3
A table is defined by the container lttablegt
lt/tablegt . HTML expects everything between the
start and end elements to be part of the
table. Different browsers may render table
element attributes differently, but, in general,
things like cell spacing, type of border, size of
cells, number of cells in a row, and background
and text colors may be defined.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
21
Tables - 4
Within the table container, each row is defined
by the container lt tr gt lt /trgt . Within each
row container, each cell is defined by either lt
td gt lt /td gt , or lt th gt
lt /th gt lttdgt lt /td gt is for ordinary Table
Data ltthgt lt /th gt is for Table Header
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
22
Tables 4 A
The Table Header container lt th gt lt /th gt
Has exactly the same output as the
combination lttdgtltcentergtltbgt lt/bgtlt/centergtlt/tdgt
USE THE SIMPLEST FORM !!!
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
23
Tables - 5
Simple Table Format 3 columns x 2 Rows
lttablegt lttrgt ltthgt Row Header lt/thgt lttdgt Data
lt/tdgt lttdgt Data lt/tdgt lt/trgt lttrgt lttdgt Data lt/tdgt
lttdgt Data lt/tdgt lttdgt Data lt/tdgt lttrgt lt/tablegt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
24
Tables - 6
lt td gt , ltthgt Attributes. colspan x where
x is a number. Forces the cell to cover x
number of columns. Default 1. rowspan y
Forces the cell to cover y number of rows.
Default 1. Example lt td colspan 3 gt . .
. lt/tdgt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
25
Tables - 7
lt td gt , ltthgt Attributes. font whatever ( as
desired ) where whatever is a font attribute
such as color, size, family, ( etc. ) valign
top, middle, or bottom Sets vertical
alignment for text in the cell. align left,
center, or right Sets horizontal
alignment for text in the cell. Example lt td
valign top gt . . . lt/tdgt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
26
Tables 8
Other. lttheadgt lt/theadgt Optional. Defines a
header section. Contains lttrgt elements. If used,
it MUST precede a lttbodygt lt/tbodygt , which
contains the usual table rows, and this should be
followed by lttfootgt lt/tfootgt , a footer. These
three are optional unless the first is used.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
27
Tables - 9
More Complex Table Format 3 columns x 2 Rows
lttablegt lttheadgt lttrgt ltth colspan 3 align
centergt Header lt/thgt lt/trgt lt/theadgt lttbodygt
lttrgt ltthgt Row Header lt/thgt lttdgt Data lt/tdgt lttdgt
Data lt/tdgt lt/trgt lttrgt lttdgt Data lt/tdgt lttdgt
Data lt/tdgt lttdgt Data lt/tdgt lttrgt lt/tbodygt lttfootgt
lttrgt ltth colspan 3 align centergt Footer
lt/thgt lt/trgt lt/tfootgt lt/tablegt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
28
Tables - 10
lttable cellpadding 3 cellspacing 2 width
85 border 0gt Defines a table with
Three pixels between the inside edge of a cell
and its contents, Two pixels between the
outside edges of cells, A width of 85 of the
browser display, No visible border.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
29
Tables - 11
Table cells may contain many different ordinary
HTML containers, making them quite versatile as
aids in layout and design. You may include
Images Hypertext Links Lengthy
Text Applets Objects Other tables !
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
30
Tables - 12
The following table-in-a-table is legal lttablegt
lttrgt lttdgt lttablegt lttrgt lttdgt
ltimg src apicture.jpggtlt/tdgtlt/trgt
lttrgt lttdgtlta href wheretoURLgtClick
ME!lt/tdgtlt/trgt lt/tablegt
lt/tdgtlt/trgt lt/tablegt
try it !!
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
31
Mailto 1
Example lta href mailtoanyone_at_anywhere.com
gt Invokes a mail client to send an email
to the address anyone_at_anywhere.com. User's system
must be configured for email use.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
32
Mailto 2
Example lta href mailtoanyone_at_anywhere.com?
subjectWho are you, anyway? gt
Invokes a mail client to send an email to the
address anyone_at_anywhere.com, with the subject
Who are you, anyway? There is no space between
? and subject
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
33
The index.html file
The file name index.html, or index.htm is
reserved. This is the file in a directory which
will be used automatically by default if a URL
ends in the directory name instead of a file
name. On most servers, the use of this file as
the default helps prevent unauthorized access to
the directory. Some servers may have a hierarchy
of default file names which will be sought when a
directory name ends the URL.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
34
End of Basic HTML - Two
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark