internet skills
DESCRIPTION
Internet Skills. An Introduction to HTML Alan Noble Room 504 Tel: 0151 79 44562 (44562 internal) [email protected]. 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). - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/1.jpg)
Internet SkillsInternet Skills
An Introduction to HTML
Alan NobleRoom 504
Tel: 0151 79 44562(44562 internal)
![Page 2: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/2.jpg)
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".
![Page 3: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/3.jpg)
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>)
![Page 4: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/4.jpg)
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>
![Page 5: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/5.jpg)
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
![Page 6: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/6.jpg)
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.
![Page 7: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/7.jpg)
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
![Page 8: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/8.jpg)
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>
![Page 9: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/9.jpg)
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.
![Page 10: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/10.jpg)
10
Example Example 1.61.6
<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>
![Page 11: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/11.jpg)
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.
![Page 12: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/12.jpg)
12
Example Example 1.71.7
<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>
![Page 13: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/13.jpg)
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.
![Page 14: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/14.jpg)
14
Example Example 1.81.8
<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>
![Page 15: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/15.jpg)
15
Example Example 1.91.9
<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>
![Page 16: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/16.jpg)
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.
![Page 17: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/17.jpg)
17
Example Example 1.101.10
……...<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>
![Page 18: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/18.jpg)
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.
![Page 19: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/19.jpg)
19
Example Example 1.111.11
...<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>
![Page 20: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/20.jpg)
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
![Page 21: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/21.jpg)
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 <)
![Page 22: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/22.jpg)
22
Example Example 1.121.12
...<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>
![Page 23: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/23.jpg)
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.
![Page 24: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/24.jpg)
24
Example Example 1.131.13
...
.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>
![Page 25: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/25.jpg)
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.
![Page 26: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/26.jpg)
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>
![Page 27: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/27.jpg)
27
Produces this output:Produces this output:
The University of Liverpool,
Department of Electrical Engineering & Electronics,
Liverpool
L69 3GJ
![Page 28: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/28.jpg)
28
Example Example 1.141.14
...
.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>
![Page 29: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/29.jpg)
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.
![Page 30: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/30.jpg)
30
Example Example 1.151.15
...
.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>
![Page 31: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/31.jpg)
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.
![Page 32: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/32.jpg)
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)
![Page 33: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/33.jpg)
33
Example Example 1.161.16
...
.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>
![Page 34: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/34.jpg)
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.
![Page 35: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/35.jpg)
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.
![Page 36: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/36.jpg)
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.
![Page 37: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/37.jpg)
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>
![Page 38: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/38.jpg)
38
Using relative links Using relative links (continued)(continued)
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.
![Page 39: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/39.jpg)
39
Using relative links Using relative links (continued)(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”.
![Page 40: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/40.jpg)
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
![Page 41: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/41.jpg)
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
![Page 42: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/42.jpg)
42
URL’s URL’s (continued)(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
![Page 43: Internet Skills](https://reader034.vdocuments.us/reader034/viewer/2022052702/56814751550346895db492a8/html5/thumbnails/43.jpg)
43
URL’s URL’s (continued)(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.)