More on HTML Communication Skills

1. More on HTML
IS103 Communication Skills

2. Content Overview
• Creating Lists and Inserting Images in HTML
• Creating Links in HTML
2

3. Creating Lists
• There are two fundamental types of lists:
• Ordered list: A list that defines an order or a
series of events
• Unordered list: A list that defines a group of
items that are related to one another but the
order in which they appear is irrelevant.
3

4. Ordered Lists
• There are two sets of tags necessary to create an
ordered list.
• The first, <OL> and </OL> defines the
beginning and end of the entire list.
• The second, <LI> and </LI> defines each
element within the list.
Tip : All formatting tags are available for use
within the <LI> tags including the <P>, <BR>,
<B>, <I>, and <FONT>.
4

5. START Attribute
• Lists can also be started at an index value other
than 1. To modify the starting index value, add a
START attribute to the <OL> tag
• For example:
<OL START = “4”>
5

6. TYPE Attribute
• To change the character used as the index, add the TYPE
attribute to your <OL> tag.
• Here is an example showing Roman numerals used
within a nested list.
<OL>
<LI>Choose a product</LI>
<LI>Enter your
personalinformation</LI>
<OL TYPE="i">
<LI>Enter your name</LI>
<LI>Enter your address</LI>
<LI>Enter your phone</LI>
</OL>
6

7. Unordered Lists
• Two sets of tags are used for unordered lists as
well.
• The tag that defines each item in the list is
identical to that of the ordered list, the <LI>.
• When defining the unordered list as a whole,
you enclose it with <UL> …..</UL>
7

8. TYPE Attribute
• HTML supports three different bullet types:
circle, square and disc.
• To change the bullet type, add the TYPE attribute
to the <UL> tag.
• For example:
<UL TYPE=“square”>
8

9. Inserting Images on a Page
• Before you can insert images on your Web pages, the
images must be stored on your system.
• You use the <img> tag to insert images on Web pages.
9

10. The <img> tag
• The <img> tag lets you reference and insert a graphic image
into the current text flow of your document
<img>
Function inserts an image into a document
Attributes align, border, width, height
End tag None in HTML
10

11. The src attribute
• The src attribute for the <img> tag is required. Its value is the
image file’s URL, either absolute or relative to the document
referencing the image.
• For example:
Here we are now, trying to master the
art of inserting images into HTML:
<p>
<img src=“imagename.jpg”
</p>
What an exciting moment, to be able to
insert a picture into a HTML document. 11

12. The align attribute
• You can control the alignment of images with the
surrounding text through the align attribute for the
<img> tag.
• HTML standards specify five image-alignment attribute
values: left, right, top, middle and bottom.
• Example:
<img src=“imagename.jpg” align=left>
12

13. Wrapping text around images
• The left and right image-alignment values tell the browser to
place an image against the left or right margin, respectively, of the
current text flow.
• Document content can be wrapped around images using this sample
code:
<img src="pics/car.jpg" border="1"width=200
height=200 align=left>
<p><font color=red><font size=4>
This little red car is such a beauty. Imagine it
being a convertible,
that would be even better. When I think of such
beautiful inventions,
they remind me of all the hardwork the ancient
scholars had to go through
to develop such motor machines that would make a
great part of 21st century
lifestyle choices. 13

14. 14

15. Centering an Image
• You can horizontally center an inline image in the browser
window, but only if it’s isolated from surrounding content.
• Use the <center> tag. For example:
<center>
<img src="pics/car.jpg"
border="1"width=200 height=200>
</center>
15

16. The border attribute
• Borders are lines that surround the edges of an image.
• Below are examples of how borders can be applied to images:
<img src="pics/car.jpg" border="1“/>
<img src="pics/car.jpg" border=“2“/>
<img src="pics/car.jpg" border=“4“/>
<img src="pics/car.jpg" border=“8“/>
16

17. The height and width attributes
• A more efficient way for authors to specify an image’s dimensions is
with the height and width <img> attributes.
• Both attributes require an integer value that indicates the image size
in pixels; the order in which they appear in the <img> tag is not
important.
• Example:
<img src="pics/car.jpg" width=200
height=200 align=left>
OR
<img src="pics/car.jpg" height=200 width=200
align=left>
17

18. Inserting Background Images
• You may also place an image into the background of a
document with the background attribute in the
<body> tag.
• Syntax:
<BODY BACKGROUND="pics/bg1.jpg">
18

19. Adding Links to Web
Pages
19

20. HTML Links
• A link is a word, group of words, or image that you click on to
jump to another document (or file).
• When you move a cursor over a link in a Web page, the arrow
will turn into a little hand.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
20

21. The Importance of Links
• Why links are important:
• To let visitors of the site easily browse the web pages
• To execute or download files
• To create the ability to browse via a text or image
21

22. Parts of a Link
• There are three parts to a link : source, label and target.
• Source – is the current document you are inserting a
link to.
• Label – determines what visitors see and click on (text
or image).
• Target – determines where the link connects you to
(another page or file).
22

23. Link Pages to make a Website
23
Write out an organization chart for the
pages your website will contain.
aboutus.html services.html contactus.html
marketing.html
home.html
index.html

24. The Anchor <a> tag
• The <a> tag is most commonly used with its href attribute to
create a link. The href attribute is most important as it
indicates the link’s destination.
• It is a container that encompasses the text or image to be
used as a link.
• The syntax for using the anchor tag to create a link is as
follows:
<a href="URL"> linked text or image
</a> 24

25. Examples of the <a> tag in
use…
• The <a> tag to link to another web page:
<a href="research.html">Return to
Activity Page</a>
• In the above example, research.html is the name of the
web page we are linking to (URL), and Return to Activity
Page is the label of the link.
25

26. The Anchor Tag, cont.
26
• Make sure that you:
– Use a closing anchor tag </a>
– Place quotation marks around the value of the URL
– Include the closing bracket at the end of the opening
<a> tag
• Various issues to troubleshoot with hyperlinks
– Text and images disappear
– All successive Web page text is a hyperlink
– Code appears on screen
– Code will not validate due to a problem <a> tag

27. The id Attribute
• The id attribute is used with the <a> tag to create a section
identifier within a document. Once created, the section
identifier becomes a potential target of a link.
• Here is an example of the id attribute in use with the <a> tag:
<a id="PRR">Proposed Research Report</a>
• In the above example, Proposed Research Report is the
section that has been identified and given the id “PRR”
27

28. The id Attribute, cont.
• After you have identified a section, you can link to it from
anywhere within the same document or from another
document.
• For example:
<a href="#PRR">Proposed Research Report</a>
linking to the identified section from within the same document.
<a href="research.html#PRR">Return to Activity
Page and see proposed report</a>
Linking to the identified section from another document.
28

29. Linking to a file from a HTML
document.
• Creating hyperlinks to files in HTML allows users to
execute files as well as download and save them.
• The HTML syntax for linking to a file is as follows:
<a href=“filename.ext">View my
Presentation </a>
• When linking to a file, always specify the correct
filename and extension to ensure the hyperlink works
when it is clicked on.
29

30. Using Images as Links
• Some authors of web pages like to use images and icons
instead of words for link contents.
• For example:
<a href="Graphics.html"><img
src="pics/car.jpg" length=100 height =100
border=1></a>
30

31. Managing Links
31
• All hyperlinks need to be verified
– Verify that the URL or other reference is valid
– Verify that the target page or location is accessed
• Hyperlinks also need to be managed
– Over time, URLs (and content) change
– “Dead” links frustrate users
• Manually check links to review and verify relevance of
linked content.

32. References
C. Musciano & B. Kennedy. (2006). HTML & XHTML : The
Definitive Guide, 6th Edition. United States of America:
O’Reilly,Inc., 1005 Gravenstein Highway North,
Sebastopol, CA 95472
Gary P. Schneider & J. Evans. (2007). The Internet, 6th Edition.
United States of America: Thomson Course Technology.
32