Table of Contents
HTML pages are created by tagging textual information with HTML markup. HTML markup consists of tags, which appear inside angled brackets < and >
An example of an HTML tag is <B>, which causes text to appear in bold. <B> only notes where text should begin to appear in bold, while the tag </B> marks the end of the emboldening. Most HTML tags have a corresponding end tag, which is specified by the name of the tag preceded by the / character.
So, to create the text:
Internet Commerce is great!
The text is marked up as:
<B>Internet Commerce is great!</B>
Another HTML tag is <I> to mark up the text to appear in italics. To create the text:
Internet Commerce is great!
mark the text up as:
<I>Internet Commerce is great!</I>
Note that tags are not case-sensitive. In other words, <B> or <b> are the same tag, both specifying bold text.
Text may be both bold and italicised. This is done by using both the <B> and <I> tags. When doing so, it is important to remember not to overlap HTML tags. In other words:
<B><I>Internet Commerce is
great!</I></B>
is correct, but
<B><I>Internet Commerce is great!</B></I>
is wrong.
Overlapping tags is a common mistake. Although Web browsers are usually smart enough to work out what is meant, it can lead to problems. Furthermore, for an HTML page to be considered valid HTML, it must contain no overlapping tags.
Read the section on "HTML Tags" in your textbooks.
This Activity covers the creation of an HTML page. You will need a Web browser and a text editor. Use any text editor you wish to, but the following Activity descriptions will use MS-Notepad.
Open your Web browser. This activity's goal is to create a Web document which can be opened with your browser.
Open Notepad. It can be found by selecting Start, then Programs, then Accessories and, finally, Notepad.
Type the following text into Notepad: your name and the module number (CSC5003). Save this file as start.txt.
Now load start.txt into the browser by selecting File/Open. This brings up a dialogue box. Browse to find the file. (Note that you will need to select files of type All in the dialogue box, because the default is 'HTML files' and you are loading a text file which has a .txt file extension.)
The browser should now display the text contained in start.txt. (If it does not, make sure that you have saved start.txt and that this is the file you are opening.)
Once you have displayed start.txt, return to Notepad. Add the text "Internet Commerce", and save the file again.
Return to the Web browser and reload the document (by using either by using the Refresh or Reload toolbar buttons, or by selecting File/Open once again).
If you are able to see the new piece of text, you have successfully used Notepad to create your first Web page.
This Activity adds HTML tags to the text file created in Activity 1.
Open your file start.txt in Notepad.
Mark up the text "Internet Commerce" so that appears in bold. Do this by placing the <B> tag in front of the text, and </B> at the end of the text, as shown below:
<B>Internet Commerce</B>
Save the file as start.htm, since it contains some HTML formatting. Save the file with this new name (using Save As).
Load start.htm in the Web browser. Internet Commerce should now appear in bold.
Return to Notepad and add more text, some of it in bold and others in italics. (Remember <I> is the tag for italics) Save the document and reload it.
Although a number of HTML tags have been introduced that markup how text should be displayed in a browser, a correct HTML document must always include certain structural tags.
These tags are<HTML>, <HEAD>, <BODY> and <TITLE>.
The <HTML> tag should be placed around the document's contents; this tells the browser that the whole document is written in HTML.
Like a person, all HTML documents have only one head and one body. All the text of the HTML document should be inside either the head or the body. Roughly, the <HEAD> holds information about the document itself, and the <BODY> holds the information that should be displayed.
The document's <TITLE> is given in the <HEAD>. The title is shown at the very top of the browser (i.e. in the title bar) — not in the browser window itself.
The standard structure of an HTML document is:
<HTML> <HEAD> <TITLE>Text to appear in the title bar of the browser</TITLE> </HEAD> <BODY> The text to appear in the main browser window. </BODY> </HTML>
This format should always be used when writing HTML documents.
Note: students are often confused about the use of the <BODY> tag, and they often include multiple body tags. This can lead to problems later on, so make sure to use only one <BODY> tag.
Read the section on HTML document structure in your textbooks.
In this Activity you will convert your file that contains a few HTML tags into a correctly structured HTML document. Open start.htm in Notepad.
Add the <HTML> tag on the first line of the file (before anything else).
Add the </HTML> end tag on the last line of the file (after everything else).
Add the document header by adding a <HEAD> tag on the line underneath the <HTML> tag and the </HEAD> tag on the line beneath that.
Between the opening and closing <HEAD> tags, add the <TITLE> and </TITLE> tags.
Enter the text "My first Web page" between the <TITLE> tags.
Underneath the </HEAD> tag, create the body of the document by entering the <BODY> tag.
At the bottom of the document, add the </BODY> tag just before the </HTML> tag.
Save the file.
Load the new file in your browser. If you have problems correctly formatting the file, look at the code in Discussion of Activity 3.
You are probably thinking that it looks the same as the previous document. However, if you look closely at the title bar you should see that it now displays the words "My first Web page" followed by the browser's name. The main difference, however, is that the browser now has to do a lot less work to do, since the document informs it of the HTML's structure.