Quick Reference

Adding to your Webpage
Summary of Tags

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

Learning Activity # 1

To make your first Webpage, you will type in the content and the tags into a simple text editor like Notepad in Windows.

Follow These Steps:

  1. To start your first web page, open Notepad. Notepad is most often found by clicking the Windows' Start button, selecting Programs and then Accessories.

  2. Type in these tags

  3. Save your Webpage. The filename should include your name, the Activity number and the extension "html". Here is an examle:
    kim_1.html

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

  4. 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  

Adding To Your Webpage

Keep Notepad open and make the following changes:

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

  2. Make the first line of the BODY a Level 1 Heading like this:

    <H1>Origin Of The World Wide Web</H1>

  3. On a new line add a by-line. The by-line just says "by" and your full name. Your by-line should be a level 3 heading. For example: "by April Campbell"

  4. Add the heading "What is the World Wide Web?" as a Level 2 Heading. The tags for a level 2 heading are <H2> and </H2> After this heading add these paragraphs:

    The WWW (or simply the Web) is an information service that operates through the Internet.

    The Internet is the planet wide system of computer networks (LANs) connected together.

    Documents or resources on the Web are called Webpages. Webpages are formatted with HTML (Hypertext Markup Language). With HTML you can make words bold, italicized, underlined, and more.

    Remember to apply bold, italics, or underlining where necessary.

  5. The next heading is HTML Uses Tags and it is a Level 2 Heading. After this heading add this paragraph:

    Words and sentences are formatted with tags. A tag is a special code places in triangular brackets < .. >

    Some tags, like the bold tag < b > .. < / b > must have a beginning and ending tag, while other types of tags only have a single tag. An example is the paragraph tag < P >.

    The content of a tag may be either upper case or lower case. For example, the underline tag may be < U > .. < /U> or < u > .. < /u >.

  6. Comments < !-- -- > is a Level 6 Heading. It looks very small but it does the job. Here is the text that goes after it:

    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.

  7. Finish your web page with these lines:
    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.