precisioninfo.com - Dr Bryan Hall - 2003

HTML 1: Elements, Special Characters & Links

Minimum Elements for a Web Page
Structural and formatting elements
- Sample Structural Elements
- Sample Formatting Elements
Attributes
Making HTML Files
Special Characters in HTML
Links
References

These tasks are intended to provide a set of introductory exercises to develop skills in HTML. For those seeking more general discussions concerning HTML there are a number of excellent tutorials and articles available on the Internet. Some of these are cited in the references below.

HTML stands for Hyper Text Markup Language, a "markup language" that describes how a page should be structured and formatted. It provides the means for computers to:

Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hyper-text links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

techtarget.com define HTML as follows:

HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page's words and images for the user. Each individual markup code is referred to as an element (but many people also refer to it as a tag). Some elements come in pairs that indicate when some display effect is to begin and when it is to end.

HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers, Microsoft's Internet Explorer and Netscape's Navigator, which also provide some additional non-standard codes. The current version of HTML is HTML 4.0. However, both Internet Explorer and Netscape implement some features differently and provide non-standard extensions. Web developers using the more advanced features of HTML 4 may have to design pages for both browsers and send out the appropriate version to a user. Significant features in HTML 4 are sometimes described in general as dynamic HTML. What is sometimes referred to as HTML 5 is an extensible form of HTML called Extensible Hypertext Markup Language (XHTML).

Minimum Elements for a Web Page

HTML documents consist of a head and a body section:

The head contains information describing the document and is generally not directly displayed by the rendering software (usually an Internet browser). This information may include Meta Tags and links to Style Sheet Information
The Body section contains the material that is visually displayed

All WebPages should contain the following tags

<html>

<head>

<title>

...

</title>

</head>

<body>

...

</body>

</html>

Note: Do all these tasks in a new folder (html_tasks)

Task 1: Make up a blank HTML page as above and call it blank_page.htm

To do task 1 use Notepad > Save As (all files) > blank_page.htm
Once you have made the file open it in your internet browser and look at it
You can view changes to your HTML file by saving it in Notepad and then refreshing it in your internet browser

Once you have made the blank all other files you make can be derived from the blank by just using the file manager to make multiple copies of the blank and renaming it appropriately.

Structural and formatting elements

HTML structures text into headings, paragraphs, lists, hypertext links, images and other elements by using markup tags such as <H1>, <H2>, <P>, <UL>, <LI>, <A> & <IMG>. HTML elements are matched with closing tags </XXX>. In the case of HTML, Markup tags are embedded directly within the document. The rendering agents (usually Internet Browsers) use the markup tags in determining how to render various sections of text.

HTML contains both structural ELEMENTS and formatting ELEMENTS (frequently referred to as HTML tags). Structural tags incorporate structural elements within pages while formatting tags provide for specific formatting of sections of the page.

Sample Structural Elements

head <HEAD>
title <TITLE>
body <BODY>
headings <H1> to <H6>
paragraph <P>
unordered list <UL>
ordered list <OL>
list elements <LI>
definition list <DL>
definition item <DT>
item definition <DD>
division <DIV>
images <IMG>
links <A>

Sample Formatting Elements

bold <B>
underline <U>
italics <I>
font <FONT>

Task 2: Make sure you can sort the above elements into structural and formatting elements

Attributes

HTML Elements are described by adding attributes to them, most attributes are optional.

Attributers of image element

SRC="the absolute or relate path/filename to the image"
ALT="A description of the image"
ALIGN="right or left"
BORDER="1 to 6"
WIDTH="Image width in pixels"
HEIGHT="Image height in pixels"
HSPACE="horizontal space to leave around image in pixels"
VSPACE="vertical space to leave around image in pixels"

Attributes of Link element

HREF="the absolute or relate path/filename to the linked file"
TARGET="_blank" (optional causes the resource to open in a new window)

Note there are many other attributes & values for the link element

Attributes of Unordered List element

1 produces a 1, 2, 3 list (this is the default)
A produces a A, B, C list
a produces an a, b, c list
i produces an i, ii, iii, list

Attributes of Division element

<DIV> is a container element that defines a document section. It can have many attributes. We will use it for aligning other elements. For example:

<DIV ALIGN="CENTER">

<IMG SRC="..." ALT="..." HEIGHT="..." WIDTH="...">

</DIV>

Task 3: Remember

attributes describe elements
generally HTML tags and attributes are not case sensitive
attributes should always be enclosed in quotes

most tags come in matched beginning (< >) and ending pairs (</ >), but there are some tags (those which can not be nested) which don't have to be closed.

Making HTML Files

Remember to start making each of these files by copying your blank HTML file

TASK 4: Make an html file called acronyms.htm as follows and make entries for ASCII and HTML in it

<html>

<head>

<title>Acronyms</title>

</head>

<body>

<H1>Acronyms</H1>

<DL>

<DT><STRONG>ASCII</STRONG> <DD>American Standard Code for Information Interchange

<DT><STRONG>HTML</STRONG> <DD>Hyper Text Markup Language

</DL>

</body>

</html>

Tables

The HTML table model allows authors to arrange information into rows and columns of cells. Here's a simple table that illustrates some of the features of the HTML table model.

<TABLE BORDER="1">

<TR><TD>Name</TD><TD>Height (cm)</TD><TD>Weight (kg)</TD></TR>

<TR><TD>Fred</TD><TD>185</TD><TD>84</TD></TR>

<TR><TD>Barney</TD><TD>178</TD><TD>79</TD></TR>

<TR><TD>Wilma</TD><TD>192</TD><TD>76</TD></TR>

</TABLE> Name Height (cm) Weight (kg) Fred 185 84 Barney 178 79 Wilma 192 76

Use your blank file to make a scrap HTML file in which you duplicate the above table

`Special Characters in HTML`



In order for some characters to show up in an Internet browser it is necessary to use special character encoding. Here is the special character encoding required to show the following in HTML documents:   


 

 

Result  Description  Entity Name   

"   

quotation mark  &quot;   

&  ampersand  &amp;   

<  less-than  &lt;   

>  greater-than  &gt;   

   non-breaking space  &nbsp;   

©  copyright  &copy;   

®  registered trademark  &reg;   

±  plus-or-minus  &plusmn;   

×  multiplication  &times;   

÷  division  &divide;  
 



TASK 5: Make an html file called special_characters.htm with a table like the special characters table shown above with all the special characters in it 

Title: HTML special characters 

Heading 1: HTML special characters 

Hints:   

 
Replace TD with TH in the top row for Result, Description and Entity Name. That will put them in an emphasised or bold text. 
Use the escape sequences shown in the right column in the source code for the left column  
Think carefully about how to get the presentation shown in column 3   

Links

TASK 6: Make an html file called links_computing.htm having the following characteristics 

TITLE & H1: Links for Computing 

H2: HTML  

<UL> 

<LI>How Stuff Works - How Web Pages Work

<BR><A HREF="http://computer.howstuffworks.com/web-page1.htm" TARGET="_blank">http://computer.howstuffworks.com/web-page1.htm</A></LI>  

<LI>W3 Schools HTML tutorial 

<BR><A HREF="http://www.w3schools.com/html/" TARGET="_blank">http://www.w3schools.com/html/</A></LI>  

<LI>World Wide Web Consortium Introduction to HTML 4 

<BR><A HREF="http://www.w3.org/TR/html4/intro/intro.html" TARGET="_blank">http://www.w3.org/TR/html4/intro/intro.html</A></LI> 

</UL>

TASK 7: Make an html file called picture_link.htm  

 
picture_link.htm should incorporate the image

 http://www.precisioninfo.com/images/collage_straight_levels.jpg

 <IMG SRC="http://www.precisioninfo.com/images/collage_straight_levels.jpg" ALT="..." HEIGHT="..." WIDTH="..."> 
collage_straight_levels.jpg should have content in the ALT attribute  
collage_straight_levels.jpg should be centre aligned <DIV ALIGN="CENTER"> 
collage_straight_levels.jpg should link to http://www.precisioninfo.com/ 

TASK 8: Read the How Stuff Works - How Web Pages Work section 

Optional Advanced Tasks  

 
Read W3 Schools HTML tutorial 
World Wide Web Consortium Introduction to HTML 4 and the other sections of the specification 
Read W3 Schools CSS tutorial

References  

 
http://computer.howstuffworks.com/web-page1.htm 
techtarget.com
http://www.w3schools.com/html/ 
http://www.w3.org

Result	Description	Entity Name
"	quotation mark	"
&	ampersand	&
<	less-than	<
>	greater-than	>
	non-breaking space
©	copyright	©
®	registered trademark	®
±	plus-or-minus	±
×	multiplication	×
÷	division	÷