Internet Skills

1
Internet Skills
An Introduction to HTML Alan Noble Room 504 Tel
0151 79 44562 (44562 internal) a.noble_at_liv.ac.uk
2
Linking
The real power of HTML comes from its ability to
link text and/or an image to another document or
section of a document. A browser highlights the
identified text or image with colour and/or
underlines to indicate that it is a hypertext
link (often shortened to hyperlink or just
link). HTML's single hypertext-related tag is
ltAgt, which stands for anchor.
3
To include an anchor in your document
Start the anchor with ltA (include a space after
the A) Specify the document you're linking to by
entering the parameter HREF"filename" followed
by a closing right angle bracket (gt) Enter the
text that will serve as the hypertext link in the
current document Enter the ending anchor tag
lt/Agt (no space is needed before the end anchor
tag)
4
Example 1.16
... .out mysrc.f mya.out cfs save
myoutfilemycfsdir/myoutfile rm The less than
character lt The greater than character
gt The ampersand character amplt/PREgt ltPgtOmit
needless words.lt/Pgt ltBLOCKQUOTEgt ltPgtVigorous
writing is concise. A sentence should contain no
unnecessary words, a paragraph no
unnecessary sentences, for the same reason that a
drawing should have no unnecessary lines and a
machine no unnecessary parts. lt/Pgt ltPgt--William
Strunk, 1918 lt/Pgt lt/BLOCKQUOTEgt The University of
Liverpool,ltBRgt Department of Electrical
Engineering Electronics,ltBRgt LiverpoolltBRgt L69
3GJltBRgt ltHR SIZE4 WIDTH"50"gtWhy not take a
look at our ltA HREF"courses.htm"gtcourse
detailslt/Agt. Find one thats just right for
you! lt/BODYgt lt/HTMLgt
5
Links to Specific Sections
Anchors can also be used to move a reader to a
particular section in a document (either the same
or a different document) rather than to the top,
which is the default. This type of an anchor is
commonly called a named anchor because to create
the links, you insert HTML names within the
document. Named anchors are useful when you have
one long document and you want to be able to move
to specific sections of that document. For
example you usually have a table of contents at
the top of the document which are internal
hyperlinks to section headings in the same
document.
6
Named Anchors
A user can quickly jump to specific sections they
require without having to scroll down through a
single very long document. You can link to a
specific section in another document. Suppose you
want to set a link from document A (docA.htm) to
a specific section (SECn) in another document
(docB.htm). Enter the HTML coding for a link to a
named anchor In docA.htm ltA HREFdocB.htmSECn
"gtSection n in Document Blt/Agt
7
Named Anchors (continued)
Think of the characters after the hash () mark
as a tab within the docB.htm file. This tab
tells your browser what should be displayed at
the top of the window when the link is
activated. In other words, the first line in your
browser window should be the section (SECn)
heading. In Document B (docB.htm) create the
named anchor ltA NAMESECn"gt Section nlt/agt
8
Example 1.17
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt lt/BODYgt lt/HTMLgt
9
Courses.htm
ltH3gtltA NAME"GG56"gtB.Sc. (Hons.) Computer and
Multimedia Systems (GG56)lt/Agtlt/H3gt ltPgtThis is
information...lt/Pgt ltH3gtltA NAME"HH56"gtB.Eng.
Electrical Engineering amp Electronics
(HH56)lt/Agtlt/H3gt ltPgtThis is information...lt/Pgt lt
H3gtltA NAME"H500"gtB.Eng. Electrical Engineering
(H500)lt/Agtlt/H3gt ltPgtThis is information...lt/Pgt lt
H3gtltA NAME"H600"gtB.Eng. Electronics
(H600)lt/Agtlt/H3gt ltPgtThis is information...lt/Pgt
ltH3gtltA NAME"H621"gtB.Eng. Electronic amp
Communication Engineering (H621)lt/Agtlt/H3gt ltPgtThis
is information...lt/Pgt
10
Links Within The Current Document
The technique is the same except the filename is
omitted. For example, to link to the HH56 anchor
from within courses.htm, enter More
information about ltA HREF"HH56"gtB.Eng.
Electrical Engineering amp Electronics
(HH56)lt/agt is available elsewhere in this
document.
11
Inline Images
Most Web browsers can display inline images (that
is, images next to text) that are in X Bitmap
(XBM), GIF, or JPEG format. Each image takes
additional time to download and slows down the
initial display of a document. Carefully select
your images and the number of images in a
document. To include an inline image, enter
ltIMG SRCImageNamegt where ImageName is the URL
of the image file.
12
Example 1.18
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg"gt lt/BODYgt lt
/HTMLgt
13
Image Size Attributes
You should include two other attributes on ltIMGgt
tags to tell your browser the size of the images
it is downloading with the text. The HEIGHT and
WIDTH attributes let your browser set aside the
appropriate space (in pixels) for the images as
it downloads the rest of the file. You can
determine the pixel size from the image
properties. For example, to include the
Departments picture you should enter ltIMG
SRCdept.jpg WIDTH404 HEIGHT259 gt
14
Example 1.19
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259gt lt/BODYgt lt/HTMLgt
15
Aligning Images
You have some flexibility when displaying images.
You can have images separated from text and
aligned to the left or right. Or you can have an
image aligned with text. Try several
possibilities to see how your information looks
best.
16
Example 1.20
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259gtThis is a short section of text to
show how text is... lt/BODYgt lt/HTMLgt
17
Example 1.21
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNTOPgtThis is a short section of
text to show how text is... lt/BODYgt lt/HTMLgt
18
Example 1.22
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNCENTERgtThis is a short section
of text to show how text is... lt/BODYgt lt/HTMLgt
19
Example 1.23
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNLEFTgtThis is a short section of
text to show how text is... lt/BODYgt lt/HTMLgt
20
Example 1.24
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNRIGHTgtThis is a short section of
text to show how text is... lt/BODYgt lt/HTMLgt
21
Images Without Text
To display an image without any associated text
(e.g., an organization's logo), make it a
separate paragraph. Use the paragraph ALIGN
attribute to centre the image or adjust it to the
right side of the window. ltp ALIGNCENTERgt ltIMG
SRC "logo.jpg"gt lt/pgt
22
Example 1.25
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNRIGHTgtThis is a short section of
text to show how text is presented around images.
As you can see it is a few lines long but has
valuable information at all. It is just full of
junk, junk and even more junk! This is a short
section of text to show how text is presented
around images. As you can see it is a few lines
long but has valuable information at all. It is
just full of junk, junk and even more junk! ltp
ALIGNCENTERgt ltIMG SRC "logo.jpg"gt lt/pgt
lt/BODYgt lt/HTMLgt
23
Alternate Text for Images
Some World Wide Web browsers -- primarily the
text-only browsers such as Lynx cannot display
images. Some users turn off image loading even if
their software can display images (especially if
they are using a modem or have a slow
connection). HTML provides a mechanism to tell
readers what they are missing on your pages if
they can't load images. The ALT attribute lets
you specify text to be displayed instead of an
image.
24
ALT
For example ltIMG SRC"UpArrow.gif"
ALT"Up"gt where UpArrow.gif is the picture of
an upward pointing arrow. With graphics-capable
viewers that have image-loading turned on, you
see the up arrow graphic. With a text-only
browser or if image-loading is turned off, the
word Up is shown in your window in place of the
image. You should try to include alternate text
for each image you use in your document.
25
Example 1.26
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltIMG SRC"dept.jpg" WIDTH404
HEIGHT259 ALIGNRIGHTgtThis is a short section of
text to show how text is presented around images.
As you can see it is a few lines long but has
valuable information at all. It is just full of
junk, junk and even more junk! This is a short
section of text to show how text is presented
around images. As you can see it is a few lines
long but has valuable information at all. It is
just full of junk, junk and even more junk! ltp
ALIGNCENTERgt ltIMG SRC "logo.jpg
ALT"University Crest"gt lt/pgt lt/BODYgt lt/HTMLgt
26
Images as Hyperlinks
Inline images can be used as hyperlinks just like
plain text. ltA HREF"http//www.liv.ac.uk/EEE/"gt
ltIMG SRC"dept.jpg" ALT"Department"gtlt/Agt Will
display the picture of our department as shown
above but if the user clicks on the picture they
will be sent to http//www.liv.ac.uk/EEE/
which is our departments home page.
27
Example 1.27
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltA HREF"http//www.liv.ac.uk/EE
E/"gt ltIMG SRC"dept.jpg" ALT"Department"
WIDTH404 HEIGHT259 ALIGNRIGHTgtlt/AgtThis is a
short section of text to show how text is
presented around images. As you can see it is a
few lines long but has valuable information at
all. It is just full of junk, junk and even more
junk! This is a short section of text to show how
text is presented around images. As you can see
it is a few lines long but has valuable
information at all. It is just full of junk, junk
and even more junk! ltp ALIGNCENTERgtltIMG SRC
"logo.jpg ALT"University Crest"gtlt/pgt
lt/BODYgt lt/HTMLgt
28
BORDER Attribute
Usually images which are links are displayed in
some browsers with a blue border surrounding
them. This indicates that it's a clickable
hyperlink. You may not always want this border to
be displayed, though. In this case you can use
the BORDER attribute of the IMG tag to make the
image appear as normal. Adding the BORDER
attribute and setting it to zero
29
Example 1.28
... ltHR SIZE4 WIDTH"50"gtWhy not take a look
at our ltA HREF"courses.htm"gtcourse detailslt/Agt.
Find one thats just right for you! ltPgt This will
link to the courses.htm file and jump to the ltA
HREF"courses.htmGG56"gtGG56lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmHH56"gtHH
56lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH500"gtH500lt/Agt course
details.ltBRgt This will link to the courses.htm
file and jump to the ltA HREF"courses.htmH600"gtH6
00lt/Agt course details.ltBRgt This will link to the
courses.htm file and jump to the ltA
HREF"courses.htmH621"gtH621lt/Agt course
details.ltBRgt lt/Pgt ltA HREF"http//www.liv.ac.uk/EE
E/"gt ltIMG SRC"dept.jpg" ALT"Department"
WIDTH404 HEIGHT259 ALIGNRIGHT
BORDER0gtlt/AgtThis is a short section of text to
show how text is presented around images. As you
can see it is a few lines long but has valuable
information at all. It is just full of junk, junk
and even more junk! This is a short section of
text to show how text is presented around images.
As you can see it is a few lines long but has
valuable information at all. It is just full of
junk, junk and even more junk! ltp
ALIGNCENTERgtltIMG SRC "logo.jpg
ALT"University Crest"gtlt/pgt lt/BODYgt lt/HTMLgt

30
Background Graphics
Newer versions of Web browsers can load an image
and use it as a background. If you want to
include a background, make sure your text can be
read easily when displayed on top of the
image. Background images can be a texture (linen
finished paper, for example) or an image of an
object (a logo possibly). You create the
background image as you do any image. However
you only have to create a small piece of the
image. Using a feature called tiling, a browser
takes the image and repeats it across and down to
fill your browser window.
31
Background
In some you generate one image, and the browser
replicates it enough times to fill your
window. This action is automatic when you use the
background tag. The tag to include a background
image is included in the ltBODYgt statement as an
attribute ltBODY BACKGROUND"filename.gif"gt
32
Example 1.29
ltHTMLgt ltHEADgt ltTITLEgt Liverpool Univ. CMMS
Course Introduction. lt/TITLEgt lt/HEADgt ltBODY
BACKGROUND"backgrnd.gif"gt ltH1gtIntroductionlt/H1gt T
his page introduces the CMMS course at The
University of Liverpool ltH2gtCourse
Detailslt/H2gt ltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/Pgt ltOLgt ltLIgtI
ntro to Java ltLIgtInternet Skills ltLIgtElectrical
circuits and systems lt/OLgt ltDLgt ltDTgt Liverpool
University ltDDgt The University of Liverpool
offers a wide range of courses. ltDTgt Electrical
Engineering ltDDgt The Department of Electrical
Engineering and Electronics is located on
Brownlow Hilllt/DLgt ltDL COMPACTgt ltDTgt
-i ltDDgtinvokes the compiler in immediate mode
using the initialization file defined in the
path. ltDTgt -d ltDDgt invokes the compiler in debug
mode. lt/DLgt ltULgt ltLIgt A few Electrical
Units ltULgt ltLIgt Capacitance (C) ...
33
Background Colour (COLOR)
You can change both the background and font
colours. Some HTML authors select a background
colour and coordinate it with a change in the
colour of the text. Always preview changes like
this to make sure your pages are readable. (For
example, many people find red text on a black
background difficult to read!) In general, try to
avoid using high-contrast images or images that
use the colour of your text anywhere within the
graphic.
34
BGCOLOR
You change the colour of text, links, visited
links, and active links (links that are currently
being clicked on) using further attributes of the
ltBODYgt tag. For example ltBODY
BGCOLOR"000000" TEXT"FFFFFF LINK"9690CC"gt
This creates a window with a black background
(BGCOLOR), white text (TEXT), and silvery
hyperlinks (LINK).
35
Example 1.30
ltHTMLgt ltHEADgt ltTITLEgt Liverpool Univ. CMMS
Course Introduction. lt/TITLEgt lt/HEADgt ltBODY
BGCOLOR"000000" TEXT"FFFFFF"LINK"9690CC"gt ltH
1gtIntroductionlt/H1gt This page introduces the CMMS
course at The University of Liverpool ltH2gtCourse
Detailslt/H2gt ltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/Pgt ltOLgt ltLIgtI
ntro to Java ltLIgtInternet Skills ltLIgtElectrical
circuits and systems lt/OLgt ltDLgt ltDTgt Liverpool
University ltDDgt The University of Liverpool
offers a wide range of courses. ltDTgt Electrical
Engineering ltDDgt The Department of Electrical
Engineering and Electronics is located on
Brownlow Hilllt/DLgt ltDL COMPACTgt ltDTgt
-i ltDDgtinvokes the compiler in immediate mode
using the initialization file defined in the
path. ltDTgt -d ltDDgt invokes the compiler in debug
mode. lt/DLgt ltULgt ltLIgt A few Electrical
Units ltULgt ltLIgt Capacitance (C) ...
36
COLOURS
The six-digit number and letter combinations
represent colours by giving their RGB (red,
green, blue) value. The six digits are actually
three two-digit numbers in sequence, representing
the amount of red, green, or blue as a
hexadecimal value in the range 00-FF. For
example, 000000 is black (no colour at
all) FF0000 is bright red 0000FF is bright
blue FFFFFF is white (fully saturated with all
three colours).