1. Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: 0151 79 44562 (44562 internal) a.noble@liv.ac.uk

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

3. 3 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: (no space is needed before the end anchor tag)

4. 4 Example 1.16....out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * The less than character < The greater than character > The ampersand character & Omit needless words. Vigorous 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. --William Strunk, 1918 The University of Liverpool, Department of Electrical Engineering & Electronics, Liverpool L69 3GJ Why not take a look at our course details. Find one that’s just right for you!

5. 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. 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: Section n in Document B

7. 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. I n Document B (docB.htm) create the named anchor: Section n

8. 8 Example 1.17... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details.

9. 9 Courses.htm B.Sc. (Hons.) Computer and Multimedia Systems (GG56) This is information……... B.Eng. Electrical Engineering & Electronics (HH56) This is information……... B.Eng. Electrical Engineering (H500) This is information……... B.Eng. Electronics (H600) This is information……... B.Eng. Electronic & Communication Engineering (H621) This is information……...

10. 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 B.Eng. Electrical Engineering & Electronics (HH56) is available elsewhere in this document.

11. 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 : where ImageName is the URL of the image file.

12. 12 Example 1.18... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details.

13. 13 Image Size Attributes You should include two other attributes on 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 Department’s picture you should enter:

14. 14 Example 1.19... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details.

15. 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. 16 Example 1.20... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. This is a short section of text to show how text is…...

17. 17 Example 1.21... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. This is a short section of text to show how text is…...

18. 18 Example 1.22... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. This is a short section of text to show how text is…...

19. 19 Example 1.23... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. This is a short section of text to show how text is…...

20. 20 Example 1.24... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. This is a short section of text to show how text is…...

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

22. 22 Example 1.25... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. 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! 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!

23. 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. 24 ALT For example: 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. 25 Example 1.26... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. 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! 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!

26. 26 Images as Hyperlinks Inline images can be used as hyperlinks just like plain text. 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 department’s home page.

27. 27 Example 1.27... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. 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! 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!

28. 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. 29 Example 1.28... Why not take a look at our course details. Find one that’s just right for you! This will link to the courses.htm file and jump to the GG56 course details. This will link to the courses.htm file and jump to the HH56 course details. This will link to the courses.htm file and jump to the H500 course details. This will link to the courses.htm file and jump to the H600 course details. This will link to the courses.htm file and jump to the H621 course details. 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! 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!

30. 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. 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 statement as an attribute:

32. 32 Example 1.29 Liverpool Univ. CMMS Course: Introduction. Introduction This page introduces the CMMS course at The University of Liverpool Course Details This section will describe the details of the course. Intro to Java Internet Skills Electrical circuits and systems Liverpool University The University of Liverpool offers a wide range of courses. Electrical Engineering The Department of Electrical Engineering and Electronics is located on Brownlow Hill -i invokes the compiler in immediate mode using the initialization file defined in the path. -d invokes the compiler in debug mode. A few Electrical Units: Capacitance (C) ……...

33. 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. 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 tag. For example: <BODY BGCOLOR="#000000" TEXT="#FFFFFF” LINK="#9690CC"> This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).

35. 35 Example 1.30 Liverpool Univ. CMMS Course: Introduction. Introduction This page introduces the CMMS course at The University of Liverpool Course Details This section will describe the details of the course. Intro to Java Internet Skills Electrical circuits and systems Liverpool University The University of Liverpool offers a wide range of courses. Electrical Engineering The Department of Electrical Engineering and Electronics is located on Brownlow Hill -i invokes the compiler in immediate mode using the initialization file defined in the path. -d invokes the compiler in debug mode. A few Electrical Units: Capacitance (C) ……...

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