Internet Skills

Internet SkillsInternet Skills

An Introduction to HTML

Alan NobleRoom 504

Tel: 0151 79 44562(44562 internal)

[email protected]

2

What is an HTML Document?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

TagsTags

HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>).

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., <H1> and </H1>)

4

A Simple HTML A Simple HTML DocumentDocument

<HTML><HEAD>

<TITLE>A Simple HTML Example</TITLE></HEAD>

<BODY><H1>This is simple HTML</H1><P>Welcome to the world of HTML.This is the first paragraph. While short it

is still a paragraph!</P>

<P>And this is the second paragraph.</P></BODY>

</HTML>

5

Your Web SpaceYour Web Space

Create a directory on your M: drive called

“PUBLIC.WWW”

http://ugwww.liv.ac.uk/<tilde><yourusername>/<filename>

Example:

http://ugwww.liv.ac.uk/~elec001

This will display the page index.htm (or.html)

http://ugwww.liv.ac.uk/~elec001/page1.htm

This will display the page page1.htm

6

Lists (<UL> ..... </UL>,<LI> ..... </LI>, 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 ListsUnnumbered Lists

To make an unnumbered, bulleted list:

Start with an opening list <UL> (for unnumbered list) tag

Enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed

End the entire list with a closing list </UL> tag

8

Example Example 1.51.5

<HTML><HEAD><TITLE> Liverpool Univ. CMMS Course: Introduction.</TITLE> </HEAD><BODY><H1>Introduction</H1>This page introduces the CMMS course at The University of Liverpool<H2>Course Details</H2><P ALIGN=RIGHT>This section will describe the details of the course.</P><UL><LI>Intro to Java<LI>Internet Skills<LI>Electrical circuits and systems</UL></BODY></HTML>

9

Numbered ListsNumbered Lists

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>.

The items are tagged using the same <LI> tag.

10


<HTML><HEAD><TITLE> Liverpool Univ. CMMS Course: Introduction.</TITLE> </HEAD><BODY><H1>Introduction</H1>This page introduces the CMMS course at The University of Liverpool<H2>Course Details</H2><P ALIGN=RIGHT>This section will describe the details of the course.</P><OL><LI>Intro to Java<LI>Internet Skills<LI>Electrical circuits and systems</OL></BODY></HTML>

11

Definition ListsDefinition Lists

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>).

Web browsers generally format the definition on a new line and indent it.

12


<HTML><HEAD><TITLE> Liverpool Univ. CMMS Course: Introduction.</TITLE> </HEAD><BODY><H1>Introduction</H1>This page introduces the CMMS course at The University of Liverpool<H2>Course Details</H2><P ALIGN=RIGHT>This section will describe the details of the course.</P><OL><LI>Intro to Java<LI>Internet Skills<LI>Electrical circuits and systems</OL>

<DL><DT> Liverpool University<DD> The University of Liverpool offers a wide range of courses.<DT> Electrical Engineering<DD> The Department of Electrical Engineering and Electronics is located on Brownlow Hill</DL></BODY></HTML>

13

The COMPACT attributeThe 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


<HTML><HEAD><TITLE> Liverpool Univ. CMMS Course: Introduction.</TITLE> </HEAD><BODY><H1>Introduction</H1>This page introduces the CMMS course at The University of Liverpool<H2>Course Details</H2><P ALIGN=RIGHT>This section will describe the details of the course.</P><OL><LI>Intro to Java<LI>Internet Skills<LI>Electrical circuits and systems</OL><DL><DT> Liverpool University<DD> The University of Liverpool offers a wide range of courses.<DT> Electrical Engineering<DD> The Department of Electrical Engineering and Electronics is located on Brownlow Hill</DL>

<DL><DT> -i<DD>invokes the compiler in immediate mode using the initialization file defined in the path.<DT> -d<DD> invokes the compiler in debug mode.</DL></BODY></HTML>

15


<HTML><HEAD><TITLE> Liverpool Univ. CMMS Course: Introduction.</TITLE> </HEAD><BODY><H1>Introduction</H1>This page introduces the CMMS course at The University of Liverpool<H2>Course Details</H2><P ALIGN=RIGHT>This section will describe the details of the course.</P><OL><LI>Intro to Java<LI>Internet Skills<LI>Electrical circuits and systems</OL><DL><DT> Liverpool University<DD> The University of Liverpool offers a wide range of courses.<DT> Electrical Engineering<DD> The Department of Electrical Engineering and Electronics is located on Brownlow Hill</DL>

<DL COMPACT><DT> -i<DD>invokes the compiler in immediate mode using the initialization file defined in the path.<DT> -d<DD> invokes the compiler in debug mode.</DL></BODY></HTML>

16

Nested ListsNested Lists

Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

17


……...<DD> invokes the compiler in debug mode.</DL>

<UL><LI> A few Electrical Units:<UL><LI> Capacitance (C)<LI> Charge (Q)<LI> Conductance (G)<LI> Current (I)</UL><LI> Two Mechanical Units:<UL><LI> Force (F)<LI> Area (A)</UL></UL></BODY></HTML>

18

Preformatted TextPreformatted Text

Use the <PRE> 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


...<LI> Force (F)<LI> Area (A)</UL></UL>

<PRE>This is preformatted text noticeline breaks and spaces are displayedIt is good for program listings

#!/bin/cshcd $SCRcfs get mysrc.f:mycfsdir/mysrc.fcfs get myinfile:mycfsdir/myinfilefc -02 -o mya.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *</PRE></BODY></HTML>

20

<PRE> tag<PRE> tag (continued) (continued)

The <PRE> tag can be used with an optional WIDTH attribute that specifies the maximum number of characters for a line.

Hyperlinks can be used within <PRE> sections. You should avoid using other HTML tags within <PRE> sections, however

21

Special CharactersSpecial Characters

Because <, >, and & have special meanings in HTML, not all browsers will display them. To be safe you should always use their escape sequences (<, >, and &, respectively) to enter these characters.

Unlike the rest of HTML these sequences are case sensitive. (You should not use &LT;)

22


...<LI> Force (F)<LI> Area (A)</UL></UL><PRE>This is preformatted text noticeline breaks and spaces are displayedIt is good for program listings

#!/bin/cshcd $SCRcfs get mysrc.f:mycfsdir/mysrc.fcfs get myinfile:mycfsdir/myinfilefc -02 -o mya.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *

The less than character <The greater than character >The ampersand character &</PRE></BODY></HTML>

23

Extended QuotationsExtended Quotations

Use the <BLOCKQUOTE> 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


...

.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *The less than character <The greater than character >The ampersand character &</PRE>

<P>Omit needless words.</P><BLOCKQUOTE><P>Vigorous writing is concise. A sentence shouldcontain no unnecessary words, a paragraph no unnecessarysentences, for the same reason that a drawing should haveno unnecessary lines and a machine no unnecessary parts.</P><P>--William Strunk, 1918 </P></BLOCKQUOTE></BODY></HTML>

25

Forced Line Breaks/Forced Line Breaks/Postal AddressesPostal Addresses

The <BR> tag forces a line break with no extra (white) space between lines.

Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space.

26

For ExampleFor Example

This Code:

<P>The University of Liverpool,</P><P>Department of Electrical Engineering & Electronics,</P><P>Liverpool</P><P>L69 3GJ</P>

27

Produces this output:Produces this output:

The University of Liverpool,

Department of Electrical Engineering & Electronics,

Liverpool

L69 3GJ

28


...

.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *The less than character <The greater than character >The ampersand character &</PRE><P>Omit needless words.</P><BLOCKQUOTE><P>Vigorous writing is concise. A sentence shouldcontain no unnecessary words, a paragraph no unnecessarysentences, for the same reason that a drawing should haveno unnecessary lines and a machine no unnecessary parts.</P><P>--William Strunk, 1918 </P></BLOCKQUOTE>

The University of Liverpool,<BR>Department of Electrical Engineering & Electronics,<BR>Liverpool<BR>L69 3GJ<BR></BODY></HTML>

29

Horizontal RulesHorizontal Rules

The <HR> 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:

<HR SIZE=4 WIDTH="50%">

This draws a central horizontal line, 50% the width of the screen.

30


...

.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *The less than character <The greater than character >The ampersand character &</PRE><P>Omit needless words.</P><BLOCKQUOTE><P>Vigorous writing is concise. A sentence shouldcontain no unnecessary words, a paragraph no unnecessarysentences, for the same reason that a drawing should haveno unnecessary lines and a machine no unnecessary parts.</P><P>--William Strunk, 1918 </P></BLOCKQUOTE>The University of Liverpool,<BR>Department of Electrical Engineering & Electronics,<BR>Liverpool<BR>L69 3GJ<BR>

<HR SIZE=4 WIDTH="50%"></BODY></HTML>

31

LinkingLinking

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 <A>, which stands for anchor.

32

To include an anchor in your document:To include an anchor in your document:

Start the anchor with <A (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 (>)

Enter the text that will serve as the hypertext link in the current document Enter the ending anchor tag: </A> (no space is needed before the end anchor tag)

33


...

.out mysrc.fmya.outcfs save myoutfile:mycfsdir/myoutfilerm *The less than character <The greater than character >The ampersand character &</PRE><P>Omit needless words.</P><BLOCKQUOTE><P>Vigorous writing is concise. A sentence shouldcontain no unnecessary words, a paragraph no unnecessarysentences, for the same reason that a drawing should haveno unnecessary lines and a machine no unnecessary parts.</P><P>--William Strunk, 1918 </P></BLOCKQUOTE>The University of Liverpool,<BR>Department of Electrical Engineering & Electronics,<BR>Liverpool<BR>L69 3GJ<BR><HR SIZE=4 WIDTH="50%">

Why not take a look at our <A HREF="courses.htm">course details</A>. Find one that’s just right for you!</BODY></HTML>

34

Relative Versus Absolute Relative Versus Absolute PathnamesPathnames

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:

<A HREF="2000/courses.htm">course details</A>

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 Relative Versus Absolute Pathnames Pathnames (continued)(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 linksUsing 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 Using relative links (continued)(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:

<A HREF="/TopDirectory/PeopleDirectory/staff.html">staff details</A>

38


TopDirectoryDetailsDirectory PeopleDirectory

file1.htm staff.htm

But it is better to use a relative link:

<A HREF="../PeopleDirectory/staff.html">staff details</A>

Here “../” says move up one directory.So “../PeopleDirectory/” says move up one directory and then down into the “PeopleDirectory”. Notice this way I don’t have to know the name of “TopDirectory” as I don’t refer to it.

39


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

URL’sURL’s

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

URL’s URL’s (continued)(continued)


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

URL’s URL’s (continued)(continued)


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

Documents

Internet Skills