Quick Reference

Adding to your Webpage
Summary of Tags

Lesson # 2
HTML Tag Summary
Tutorial # 3
Table of Contents

Learning Activity # 2

In this activity you will modify your first Webpage and add some of the new tags and attributes introduces in Lesson # 2.

Follow These Steps:

  1. To edit your first web page, open Notepad and your Learning Activity #1 file.
    Remember: Notepad is most often found by clicking the Windows' Start button, selecting Programs and then Accessories.

  2. Change the filname of your Webpage. The filename should include your name, the Activity number and the extension "html". Here is an example:
    kevin_2.html

    It is a good practise to keep all your Webpages in the same folder.

  3. To view your Webpage, open the folder and double click the filename. This will open the file in the main Web browser on your computer.

     
  back to top  

Modifying Your Webpage

Keep Notepad open and make the following changes:

  1. Change the Page Title to Webpage Tutorial: Learning Activity # 2. The page title is located between the <title> .. < /title> tags in the Webpage <head>.

  2. Center the title and the by-line like this:

    <center>
    <H1>Origin Of The World Wide Web </H1>
    "by April Campbell"
    </center>

  3. Change the background colour of the page by adding the "BGCOLOR=" attribute to the <BODY> tag.
    Pick one of the standard colour words like "red" or "yellow" available in HTML. Refer to
    Tutorial #2: Adding Some Colour for a list of some colour words. Remember to have only one <BODY> tag in your Webpage.
    Here is an example:

    <body bgcolor="red">

  4. Change the font colour for the main text of your Webpage. Use the <FONT> tag to set the colour. Here is an example:

    <font color="silver">

  5. Change the font colour of the following terms in the section entitled "What is the World Wide Web?" to a contrasting colour.

    WWW
    Internet
    Webpages
    HTML

    Here are a few colour examples
    The WWW (or simply The Web) is an information service that
     
    The WWW (or simply The Web) is an information service that
     
    The WWW (or simply The Web) is an information service that
     
    The WWW (or simply The Web) is an information service that

  6. The next change involves commenting out an entire section. The section with the heading Comments < !-- -- > and ending with the words "...your web pages get more complex." should be surrounded by the start comment tag <!-- and the end comment tag -->
    By commenting out this section you will not see it in your Webpage but it will still be there.

  7. Add a Horizontal Rule just after the section you commented out. Use the <HR> tag and set the ALIGN attribute to center. Make the width 200 pixels.
    Review: Tags with Attributes

    A Horizontal Rule looks like this:


  8. Add a new section with the title Who Invented the Web?
    Use the ALIGN tag attribute in the < H2 > tag to center this heading. Here is a level 2 heading tag with the ALIGN attribute

    <H2 ALIGN="center">

  9. Here is the text for the paragraphs below the "Who Invented the Web?" heading. Notice that the name of the inventor of the Web, Tim Berners-Lee, is in a different colour.

    The first Webpage was written by Tim Berners-Lee in 1990 when he wanted to show how hypertext documents could be hosted on the Interent. He wrote a program called a Web browser that could read publically available files located on networked computers.

    In 1991 he described how this World Wide Web project would work and posted this message on the Usenet newsgroups.

    Tim Berners-Lee was working for CERN (the European Organization for Nuclear Research in Switzerland) when he developed this idea. By 1993 CERN announced that the WWW would be free and that everyone could use it without having to pay.

  10. Add another Horizontal Rule just before Created by information at the bottom of the page.
    This time make it centered with a width of 400 pixels and a size of 1.

  11. Finish your web page with these lines aligned on the right side with the <DIV> tag
    Created by
    Your Name
    on
    Today's Date

     
    back to top  

Summary

Here is a list of the tags introduced in Lesson # 1 and this Learning Activity:

Organizational Tags

<HTML> ... </HTML>
This defines the document as an HTML document. The closing tag </HTML> must be the last line of the file.
<HEAD> ... </HEAD>
These two tags mark the beginning and the end of the header. The header is at the top of every web page but it does not display in the browser window.. The header has information about the document, such as the author's name or the date it was created.
<TITLE> ... </TITLE>
The title of your document appears in the title bar of the browser window. The <TITLE> ... </TITLE> tags must appear in the header
<BODY> ... </BODY>
The content that you decide to put in your web page is listed between the beginning and ending <BODY> tags.
<!--  ...   -->
This tag is a comment that allows you to include useful information that you don't want displayed but that should be in the document. Comments often help to clarify the HTML code when your web pages get more complex.

Formatting Tags

<B> ... </B>
Make the words between the tags Bold
<I> ... </I>
Make the text italics.
<H1> ... </H1> to <H6> ... </H6>
Each of the six heading levels has a predefined size and style.
<P> ... </P>
The paragraph tag. The closing tag can often be left out.
<BR>
The Line Break tag starts a new line.