SAMPLE ONLINE LESSON
Return to Home







Lesson Material

Please read and study the concepts

The Internet

The Internet is a worldwide collection of computer networks, cooperating with each other to exchange data using a common software standard. Through telephone wires and satellite links, Internet users can share information in a variety of forms. The size, scope and design of the Internet allow users to:
  • connect easily through ordinary personal computers and local phone numbers
  • exchange electronic mail (E-mail) with friends and colleagues with accounts on the Internet
  • post information for others to access, and update it frequently
  • access multimedia information that includes sound, photographic images and even video
  • access diverse perspectives from around the world.
The supporting stucture of the Internet are formed by the global interconnection of hundreds of thousands of otherwise independent computers, communications entities and information systems. What makes this interconnection possible is the use of a set of communication standards, procedures and formats in common among the networks and the various devices and computational facilities connected to them. The procedures by which computers communicate with each other are called "protocols." While this infrastructure is steadily evolving to include new capabilities, the protocols initially used by the Internet are called the "TCP/IP" protocols, named after the two protocols that formed the principal basis for Internet operation.(Wikipedia)

Web Browser

A Web browser is a software application that enables a user to display and interact with text, images, and other information typically located on a Web page at a website on the World Wide Web or a local area network. Text and images on a Web page can contain hyperlinks to other Web pages at the same or different website. Web browsers allow a user to quickly and easily access information provided on many Web pages at many websites by traversing these links. Web browsers format HTML information for display, so the appearance of a Web page may differ between browsers. (Wikipedia)

Web Page

A Web page is a Web document that provides a resource of information that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.(Wikipedia)

HTML

HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags), surrounded by less-than (<) and greater-than signs (>). HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors. (Wikipedia)

Basic Requirements of an HTML Document

A Web page is a text document with embedded HTML (HyperText Markup Language) code instructing the browser how to display text and images. The code is embedded using a system of elements made up of tags and attributes. These are the required tags:

  • <html> tag
  • <head> tag
  • <title> tag
  • <body> tag
These are container tags and make up the basic structure of a web page. The web page document starts with a set of <html> container tags, which contains the whole document. A web page has two parts, the head and the body. The head of the document contains the title tag along with any documentation and instructions used by the browser to display information. The body of the web page document is the viewable portion of the document. For this lesson we are only going to be concerned with a few basic tags. These are the required tags and here's what they look like when they are combined in a basic web page:

<html>
<head>
<title></title>

</head>

<body>

</body>
</html>

An HTML document is built using elements which are the building blocks that create the structures that hold a web page together.

An HTML element starts and ends with tags -- the opening tag and the closing tag. A tag consists of an opening angled bracket (<), some text, and a closing bracket (>). Inside a tag, there is a tag name and may also be one or more attributes. The attributes are values such as size, color or position.

HTML elements can have many different attributes in which their availability varies depending on which element you are using. Each attribute is made up of a name and a value written as name="value". Some attributes are optional, while others are required. The tags and their attributes work together providing the browser with information on how everything will be displayed in a browser.

As an example here is the header tag:

<h4>Some text</h4> - with no attributes


<h4 align="center">Some text</h4> - with the align attribute set to center the text between the tags.

The <head> Element

The head element contains information about the page, but no information that will be displayed on the page itself. For example, it contains the title element, which tells the browser what to display in its title bar:

The <title> Element

The opening <title> and closing </title> tags enclose the title of the document, which appears in the blue (usually) border at the top of the browser window. The first tag <title> is the start tag and the </title> (with the slash) is the closing tag. This title element is used by the browser to bookmark a web document for future reference.

The <body> Element

The <body> tag contains the rest of the document and is the viewable portion of the document in the browser.

Note: All tags and their attributes are lower case. If you look at older code you will see all upper case tags. Currently, we are following the recommended HTML Standard 4.0.

Heading Tags:

Headings are used to add titles to sections of a page. HTML defines six levels of heading tags:
  • <h1>...</h1>
  • <h2>...</h2>
  • <h3>...</h3>
  • <h4>...</h4>
  • <h5>...</h5>
  • <h6>...</h6>
The numbers indicate heading levels where "1" is the largest and "6" is the smallest.

Paragraph Tags:

<p>...</p>
The text contained inside this tag is separated from other text by a blank line before and after.

<blockquote>...</blockquote>
This tag is the same as the <p> tag, but adds indentation to the paragraph.

<address>...</address>
This tag is used form signature-like entities on web pages. Address tags usually go at the bottom of each web page and are used to indicate author, date and copyright notices.

List Tags:

Un-ordered Lists <ul>
In an unordered list, the elements can appear in any order and the elements are placed beside a one sided <li /> list item tag.

Ordered Lists (numbered list) <ol>
When the browser displays an ordered list, it numbers each of the elements sequentially. Each item is numbered or labeled with a counter of some kind (letters or roman numerals).

Glossary Lists <dl>
Glossary Lists are slightly different from other lists. Each list item in a glossary list has two parts: a term and the term's definition.

Examples:

un-ordered list

<ul>
<li />
<li />
<li />
<li />
</ul>

ordered list

<ol>
<li />
<li />
<li />
<li />
</ol>

glossary list

<dl>
<dt></dt>
<dd></dd>
</dl>
Wikipedia is an online free content encyclopedia that anyone can edit. Wikipedia co-founder Jimmy Wales has described Wikipedia as "an effort to create and distribute a multilingual free encyclopedia of the highest quality to every single person on the planet in their own language." Wikipedia exists to bring knowledge to everyone who seeks it. Wikipedia content can be copied, modified, and redistributed so long as the new version grants the same freedoms to others and acknowledges the authors of the Wikipedia article used (a direct link back to the article satisfies our author credit requirement). Wikipedia articles therefore will remain free forever and can be used by anybody subject to certain restrictions, most of which serve to ensure that freedom.