Theory 
NSW Schools
Maths
Science
Documentation
Efficiency
Media
Databases
E-commerce
Reporting
Reviews
Data
Simulation
Maths
Computing
Encoding
 

Theory

HTML 1: Elements, Special Characters & Links

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:

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:

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

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

Sample Formatting Elements

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

<IMG SRC="..." ALT="..." ALIGN="..." BORDER=".." WIDTH="" HEIGHT="" HSPACE=".." VSPACE="">

Attributes of Link element

<A HREF="..." TARGET="...">

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

Attributes of Unordered List element

<OL TYPE="...">

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

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:

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

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

Optional Advanced Tasks

References

Inline Image - Go To www.precisioninfo.com