Creating Web Pages

Introduction
Three Key Tags
Basic Tags
Tables

Introduction

You will probably want to create a web page for you and your students to call homeif you plan on using the internet in your classroom. This section will introduce you to the skills and tools you will need to efficiently develop a simple web page. In this section we will use a WYSIWYG HTML editor named NVU. We will also look at basic HTML tags that you will likely need to know in order to troubleshoot the code that you generate using the NVU editor.

HyperTextMarkupLanguage defines how the information you want to present on a web page is organized. HTML tells the web browser to display your ideas in the way that makes sense to you as the author. While HTML has the ability to also define how your page looks, today it is common for aesthetic considerations to be defined by Cascading Style Sheets (CSS). CSS is beyond what this class can cover, so we will use HTML to define the appearance of our document so that you will be familiar with the semantics which will help with troublesooting web pages you create in the future.

TOP

Three Key Tags

HTML uses tags to define the organization of your page. Tags are keywords that are surrounded by the leser than and greater than sign. The three tags that all HTML documents must have are the <html>, <head>, and the <body> tags.

Most tags are paired with an opening and closing tag. The closing tag is denoted with a forward slash preceding the keyword. The tags surround either text or other tags that define the way in which the browser will organize the final web page when it is served up on the internet. For example, <html> .... </html> tags open and close all HTML files. When the web browser sees the opening <html> tag, it knows to interpert all of the stuff that follows as HTML code. Likewise, when it comes to the closing</html > tag it knows that it has reached the end of the document.

A basic HTML document may look like this:
<html>
<head>
</head>
<body>
</body>
</html>

The <head> tag defines improtant information that the browser needs to know about the page. Within the <head > tags the <title></title >tags tell the browser what to display as the pages title.

The majority or meat of a HTML document exists in between the <body> tags. This is where the organization of the information that you display on the page is defined.

TOP

Basic Tags

Some important tags to know about are:

Formatting

The <p> tag seperates blocks of of text into paragraph

The <br> tag inserts a line break.
The <ol> creates an ordered or numbered list.
The <ul> creates an unordered list.
The <li> defines an item in a list.

Graphics

<img src = "name"> inserts an image
<hr> inserts a horizontal line on the page

Hyperlinks

<a href = "URL"> defines a link
<a href = "#name"> links to a reference point within a document
<a name = "name">creates an anchor or reference point.

TOP

Tables

Tables are a common way of organizing web pages. The code behind them can get confusing, but you need to at least know the basic table tags if you ever need to dive into code to manually make adjustments to a web page.

<table> defines the table
<tr> defines a table's row.
<td> defines a tables cell.

TOP

This site was created in the summer of 2006 by H. McNamara, Computer Instructor, Denver Academy