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

Printer Version of Page

Theory

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

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

  • 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

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

  • 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

<OL TYPE="...">

  • 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
Inline Image - Go To www.precisioninfo.com