Quick Reference

Creating a Webpage
HTML
What are tags?
Notes on tags
Your first Webpage

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

Welcome To The RBV Webpage Tutorials

This is the first in a series of webpages covering the essentials of HTML. Each tutorial has a short lesson and a learning activity to practice what you have just learned. Each lesson also has a pop-up window with a summary of each lesson.

What is a Webpage?

Click the globe to see some definitions.

     
  back to top  

How To Create Your Own Webpage

There are two main ways to design a Webpage:

  1. With a WYSIWYG editor that works like a word processor. This Web Page Creation Software includes such titles as includes such titles as Macromedia Dreamweaver, Microsoft Frontpage and Adobe PageMill.
    Shareware titles such as CuteHTML provide a less expensive alternative to the advanced editors that professionals use.

  2. With a simple text editor that gives you full access to the HTML.
This tutorial will show you how you can create web pages with just a simple text editor like Notepad in Windows that are equal to, if not better than the product of expensive software. The two things that you need to supply are a little bit of effort and a lot of imagination.

     
    back to top  

HTML

The letters HTML stand for HyperText Markup Language.

  • Hypertext: click for a definition.
  • Markup: Web pages are basically text documents. Special codes are embedded in the HTML file to give the document formats like bold or italics. These special codes are called tags.
  • Language: HTML is not a programming language like C++, Java or Turing. It is a scripting language. This means that the HTML codes that you put in your web page are instructions to another program (the browser) how to format the text.

Every Webpage is made of two ingredients:

Web Page
CONTENT: Text, pictures, sounds, etc.
TAGS: Tags are formatting codes that tell the browser how to display the content.
     
    back to top  

What Are Tags?

As described above, a web page is composed of two ingredients: Content and Tags. Content is the part that you decide on and varies from web page to web page. The tags, however, are standard codes that control how a web page displays on a browser. Here is an example of the bold tag:

HTML Code
As Displayed by a browser
This word is displayed in <B>bold</B>
This word is displayed in bold.

     
    back to top  

Some Notes on Tags:

  • A tag is always enclosed in angle brackets ( < > ) and is case-insensitive. This means that it does not matter whether you type the tags in UPPER CASE or lower case letters.
  • Tags tell the browser how to display the content.
  • Tags frequently come in pairs. The second tag begins with a slash ("/") character, which tells the browser to end that format. For example:

    <I> This is italics </I>

  • Here is the general format of HTML tags

    <tag> content </tag>

  • Here is an example of a level 4 Heading tag:
HTML Code
As Displayed by a browser
<H4> Some Notes on Tags </H4>
Some Notes on Tags

     
    back to top  

Your First Webpage

Many of the tags you will use control how a web page looks (<B> for bold, <I> for italics and so on). Other tags keep the page organized. These organizational tags are as important as the formatting tags.

Here are the most important organizational tags layed out in a simple Webpage:

Summary

Here is a list of the organizational tags that must be included in every web page:

<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.
     
    back to top  

Learning Activity # 1

Work through Learning Activity # 1 to create your first Webpage. Then follow on with Tutorial # 2. You can also view a Summary of all the tags covered in this tutorial.