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
What is an HTML Document?
HTML documents are plain-text(also known as
ASCII) files that can be created using any text
editor(e.g. Notepad on a Windows machine). You
can also use word-processing software if you
remember to save your document as "text only with
line breaks".
3
Tags
HTML tags consist of a left angle bracket (lt), a
tag name, and a right angle bracket (gt). Tags are
usually paired to start and end the tag
instruction. The end tag looks just like the
start tag except a slash (/) precedes the text
within the brackets. (e.g., ltH1gt and lt/H1gt)
4
A Simple HTML Document
ltHTMLgt ltHEADgt ltTITLEgtA Simple HTML
Examplelt/TITLEgt lt/HEADgt ltBODYgt ltH1gtThis is
simple HTMLlt/H1gt ltPgt Welcome to the world of
HTML. This is the first paragraph. While short
it is still a paragraph! lt/Pgt ltPgt And this
is the second paragraph. lt/Pgt lt/BODYgt lt/HTMLgt
5
Your Web Space
Create a directory on your M drive
called PUBLIC.WWW http//ugwww.liv.ac.uk/lttildegt
ltyourusernamegt/ltfilenamegt Example http//ugwww.l
iv.ac.uk/elec001 This will display the page
index.htm (or.html) http//ugwww.liv.ac.uk/elec00
1/page1.htm This will display the page
page1.htm
6
Lists (ltULgt ..... lt/ULgt,ltLIgt ..... lt/LIgt, etc.)
HTML supports unnumbered, numbered, and
definition lists. You can nest lists too, but
use this feature sparingly because too many
nested items can get difficult to follow.
7
Unnumbered Lists
To make an unnumbered, bulleted list Start with
an opening list ltULgt (for unnumbered list) tag
Enter the ltLIgt (list item) tag followed by the
individual item no closing lt/LIgt tag is needed
End the entire list with a closing list lt/ULgt
tag
8
Example 1.5
ltHTMLgtltHEADgtltTITLEgt Liverpool Univ. CMMS
Course Introduction.lt/TITLEgt lt/HEADgtltBODYgtltH1gt
Introductionlt/H1gtThis page introduces the CMMS
course at The University of LiverpoolltH2gtCourse
Detailslt/H2gtltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/PgtltULgtltLIgtI
ntro to JavaltLIgtInternet SkillsltLIgtElectrical
circuits and systemslt/ULgtlt/BODYgtlt/HTMLgt
9
Numbered Lists
A numbered list (also called an ordered list,
from which the tag name derives) is identical to
an unnumbered list, except it uses ltOLgt instead
of ltULgt. The items are tagged using the same ltLIgt
tag.
10
Example 1.6
ltHTMLgtltHEADgtltTITLEgt Liverpool Univ. CMMS
Course Introduction.lt/TITLEgt lt/HEADgtltBODYgtltH1gt
Introductionlt/H1gtThis page introduces the CMMS
course at The University of LiverpoolltH2gtCourse
Detailslt/H2gtltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/PgtltOLgtltLIgtI
ntro to JavaltLIgtInternet SkillsltLIgtElectrical
circuits and systemslt/OLgtlt/BODYgtlt/HTMLgt
11
Definition Lists
A definition list (coded as ltDLgt) usually
consists of alternating a definition term (coded
as ltDTgt) and a definition definition (coded as
ltDDgt). Web browsers generally format the
definition on a new line and indent it.
12
Example 1.7
ltHTMLgtltHEADgtltTITLEgt Liverpool Univ. CMMS
Course Introduction.lt/TITLEgt lt/HEADgtltBODYgtltH1gt
Introductionlt/H1gtThis page introduces the CMMS
course at The University of LiverpoolltH2gtCourse
Detailslt/H2gtltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/PgtltOLgtltLIgtI
ntro to JavaltLIgtInternet SkillsltLIgtElectrical
circuits and systemslt/OLgtltDLgtltDTgt Liverpool
UniversityltDDgt The University of Liverpool
offers a wide range of courses.ltDTgt Electrical
EngineeringltDDgt The Department of Electrical
Engineering and Electronics is located on
Brownlow Hilllt/DLgtlt/BODYgtlt/HTMLgt
13
The COMPACT attribute
The COMPACT attribute can be used routinely in
case your definition terms are very short. If,
for example, you are showing some computer
options, the options may fit on the same line as
the start of the definition. COMPACT attribute
you can force the output list on the same line.
14
Example 1.8
ltHTMLgtltHEADgtltTITLEgt Liverpool Univ. CMMS
Course Introduction.lt/TITLEgt lt/HEADgtltBODYgtltH1gt
Introductionlt/H1gtThis page introduces the CMMS
course at The University of LiverpoolltH2gtCourse
Detailslt/H2gtltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/PgtltOLgtltLIgtI
ntro to JavaltLIgtInternet SkillsltLIgtElectrical
circuits and systemslt/OLgtltDLgtltDTgt Liverpool
UniversityltDDgt The University of Liverpool
offers a wide range of courses.ltDTgt Electrical
EngineeringltDDgt The Department of Electrical
Engineering and Electronics is located on
Brownlow Hilllt/DLgtltDLgt 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/DLgtlt/BODYgtlt/HTMLgt
15
Example 1.9
ltHTMLgtltHEADgtltTITLEgt Liverpool Univ. CMMS
Course Introduction.lt/TITLEgt lt/HEADgtltBODYgtltH1gt
Introductionlt/H1gtThis page introduces the CMMS
course at The University of LiverpoolltH2gtCourse
Detailslt/H2gtltP ALIGNRIGHTgtThis section will
describe the details of the course.lt/PgtltOLgtltLIgtI
ntro to JavaltLIgtInternet SkillsltLIgtElectrical
circuits and systemslt/OLgtltDLgtltDTgt Liverpool
UniversityltDDgt The University of Liverpool
offers a wide range of courses.ltDTgt Electrical
EngineeringltDDgt The Department of Electrical
Engineering and Electronics is located on
Brownlow Hilllt/DLgtltDL 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/DLgtlt/BODYgtlt/HTMLgt
16
Nested Lists
Lists can be nested. You can also have a number
of paragraphs, each containing a nested list, in
a single list item.
17
Example 1.10
... ltDDgt invokes the compiler in debug
mode. lt/DLgtltULgt ltLIgt A few Electrical
Units ltULgt ltLIgt Capacitance (C) ltLIgt Charge
(Q) ltLIgt Conductance (G) ltLIgt Current
(I) lt/ULgt ltLIgt Two Mechanical Units ltULgt ltLIgt
Force (F) ltLIgt Area (A) lt/ULgt lt/ULgtlt/BODYgt lt/HTML
gt
18
Preformatted Text
Use the ltPREgt tag (which stands for
"preformatted") to generate text in a fixed-width
font. This tag also makes spaces, new lines, and
tabs significant -- multiple spaces are displayed
as multiple spaces, and lines break in the same
locations as in the source HTML file. This is
useful for program listings, among other things.
19
Example 1.11
... ltLIgt Force (F) ltLIgt Area (A) lt/ULgt lt/ULgt ltPREgt
This is preformatted text notice line breaks and
spaces are displayed It is good for program
listings !/bin/csh cd SCR cfs get
mysrc.fmycfsdir/mysrc.f cfs get
myinfilemycfsdir/myinfile fc -02 -o mya.out
mysrc.f mya.out cfs save myoutfilemycfsdir/myoutf
ile rm lt/PREgtlt/BODYgt lt/HTMLgt
20
ltPREgt tag (continued)
The ltPREgt tag can be used with an optional WIDTH
attribute that specifies the maximum number of
characters for a line. Hyperlinks can be used
within ltPREgt sections. You should avoid using
other HTML tags within ltPREgt sections, however
21
Special Characters
Because lt, gt, and have special meanings in
HTML, not all browsers will display them. To be
safe you should always use their escape sequences
(lt, gt, and amp, respectively) to enter
these characters. Unlike the rest of HTML these
sequences are case sensitive. (You should not use
LT)
22
Example 1.12
... ltLIgt Force (F) ltLIgt Area (A) lt/ULgt lt/ULgt ltPREgt
This is preformatted text notice line breaks and
spaces are displayed It is good for program
listings !/bin/csh cd SCR cfs get
mysrc.fmycfsdir/mysrc.f cfs get
myinfilemycfsdir/myinfile fc -02 -o mya.out
mysrc.f mya.out cfs save myoutfilemycfsdir/myoutf
ile rm The less than character lt The greater
than character gt The ampersand character
amplt/PREgtlt/BODYgt lt/HTMLgt
23
Extended Quotations
Use the ltBLOCKQUOTEgt tag to include lengthy
quotations in a separate block on the
screen. Most browsers generally change the
margins for the quotation to separate it from
surrounding text.
24
Example 1.13
... .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/BLOCKQUOTEgtlt/BODYgt lt/HTMLgt
25
Forced Line Breaks/Postal Addresses
The ltBRgt tag forces a line break with no extra
(white) space between lines. Using ltPgt elements
for short lines of text such as postal addresses
results in unwanted additional white space.
26
For Example
This Code ltPgt The University of
Liverpool, lt/Pgt ltPgt Department of Electrical
Engineering Electronics, lt/Pgt ltPgt Liverpool lt/Pgt
ltPgt L69 3GJ lt/Pgt
27
Produces this output
The University of Liverpool, Department of
Electrical Engineering Electronics, Liverpool
L69 3GJ
28
Example 1.14
... .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 lt/BODYgt lt/HTMLgt
29
Horizontal Rules
The ltHRgt tag produces a horizontal line the width
of the browser window. A horizontal rule is
useful to separate major sections of your
document. You can vary a rule's size (thickness)
and width (the percentage of the window covered
by the rule). Experiment with the settings until
you are satisfied with the presentation. For
example ltHR SIZE4 WIDTH"50"gt This draws a
central horizontal line, 50 the width of the
screen.
30
Example 1.15
... .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"gt lt/BODYgt lt/HTMLgt
31
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.
32
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)
33
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
34
Relative Versus Absolute Pathnames
You can link to documents in other directories by
specifying the relative path from the current
document to the linked document. For example, a
link to a file called courses.htm located in
the subdirectory called 2000 would be ltA
HREF"2000/courses.htm"gtcourse detailslt/Agt These
are called relative links because you are
specifying the path to the linked file relative
to the location of the current file.
35
Relative Versus Absolute Pathnames (continued)
You can also use the absolute pathname (the
complete URL) of the file, but relative links are
more efficient in accessing a server. They also
have the advantage of making your documents more
"portable" -- for instance, you can create
several web pages in a single folder on your
local computer, using relative links to hyperlink
one page to another, and then upload the entire
folder of web pages to your web server. The pages
on the server will then link to other pages on
the server, and the copies on your hard drive
will still point to the other pages stored there.
36
Using relative links
It is important to point out that UNIX is a
case-sensitive operating system where filenames
are concerned, while DOS, Windows and the MacOS
are not. For instance, on a Macintosh,
"DOCUMENT.HTML", "Document.HTML", and
"document.html" are all the same name. If you
make a relative hyperlink to "DOCUMENT.HTML", and
the file is actually named "document.html", the
link will still be valid. But if you upload all
your pages to a UNIX web server, the link will no
longer work. Be sure to check your filenames
before uploading.
37
Using relative links (continued)
Pathnames use the standard UNIX syntax. The UNIX
syntax for the parent directory (the directory
that contains the current directory) is "..".
Similarly the syntax for the current directory is
..
TopDirectoryDetailsDirectory
PeopleDirectory file1.htm

staff.htm A link in file1 to staff.htm could
be ltA HREF"/TopDirectory/PeopleDirectory/staff.
html"gtstaff detailslt/Agt
38
Using relative links (continued)
TopDirectoryDetail
sDirectory
PeopleDirectory file1.htm
staff.htm But it is
better to use a relative link ltA
HREF"../PeopleDirectory/staff.html"gtstaff
detailslt/Agt Here ../ says move up one
directory. So ../PeopleDirectory/ says move up
one directory and then down into the
PeopleDirectory. Notice this way I dont have
to know the name of TopDirectory as I dont
refer to it.
39
Using relative links (continued)
Similarly ../../../design/prototype/test.htm
says move up three directories and down into the
directory called design. Then down into a
directory below design called prototype where
you will find the file called test.htm.
40
Use Relative Links
In general, you should use relative links
whenever possible because It's easier to move a
group of documents to another location (because
the relative path names will still be valid) It's
more efficient connecting to the server There is
less to type
41
URLs
Uniform Resource Locators (URLs) specify the
location of files on other servers. A URL
includes the type of resource being
accessed(e.g., Web, FTP), the address of the
server, and the location of the file. The syntax
is scheme//host.domain port/path/ filename

42
URLs (continued)
scheme//host.domain port/path/ filename
where scheme is one of file a file on your
local system ftp a file on an anonymous FTP
server http a file on a World Wide Web server
gopher a file on a Gopher server WAIS a file
on a WAIS server news a Usenet newsgroup
telnet a connection to a Telnet-based service
43
URLs (continued)
scheme//host.domain port/path/ filename The
port number is the port id on the destination
server. These are now standard and consequently
can generally be omitted. (That means unless
someone tells you otherwise, leave it out.)