Senior Tech Center: HTML Starter

Corporation for National and Community Service

> Web Basics and Website Building
HTML Starter

Senior Tech Center: HTML Starter

This document provides a basic introduction to Hypertext Markup Language, which is used to create web pages.

History

HTML was first created in 1990 as a means of sharing text and graphics in the form of pages delivered via the World Wide Web.

Though it has grown more complex over the years, the basics of HTML are still easy to learn. A simple web page can be built using Windows Notepad or Macintosh Simple Text (or TextEdit).

About Tags

Almost everything in HTML is accomplished through tag combinations, which consist of an opening tag (placed before an item), and a closing tag (placed after an item).

Here are some of the most commonly-used tags:

this text is bold appears in your browser as: this text is bold
this text is italicized appears as: this text is italicized
this is the Arial font appears as: this is the Arial font
this is one size bigger appears as: this is one size bigger

Tags can also be combined, as long as the opening and closing tags are nested appropriately:

this text is bold and italicized appears as: this text is bold and italicized
bold Verdana appears as: bold Verdana

Linking

To link to another page on your site, or to another website, use the <HREF> tag. By placing the URL (the web address) or the file name of the page in your site in quotes, you can create a link:

<a href="http://www.seniorcorps.org">Senior Corps website</a> appears as: Senior Corps website

Images

If you have already created a JPEG (.jpg - used for photographs) or GIF (.gif - used for other images) file, you can place it into your web page using the IMG tag:

<IMG height=30 src="http://my.nationalservice.org/photo.jpg" width=100> appears as:
<IMG height=30 src="http://my.nationalservice.org/graphic.gif" width=100> appears as:

A Simple Page

Experiment with this code to produce your own simple HTML page.

Use your cursor to select the example code on the following few lines. Copy the code and open up a new document in a text editor such as Notepad (if you have Windows), Simple Text (if you have Mac OS 9), or TextEdit (if you have Mac OS X).

Paste the code into your new document, and save the document on your desktop as mypage.html.

Open the page in your text editor. Now modify the page by changing the FONT SIZE, adding and removing b tags, and so on. Save your changes, and open the document using your web browser to see how it looks.

Example Code

<html>
<head>
<title>Senior Tech Center: HTML Starter</title>
</head>
<body> HTML Example
Modify this text, save it, and see how it looks in your browser!
Be sure to play around with italics and bolding.
</body>
</html>

Learn More

These links provide free online training resources for learning HTML (HyperText Markup Language).

Novice

Introduction to HTML (at CWRU) - goes into a bit more detail than the NCSA Guide
Writing HTML (at Maricopa) - is another very useful tutorial

Some Experience

HTML Teaching Tool (at Webmonkey) - is organized in glossary fashion, so you can delve deeper into specific HTML topics
Web Style Guide - is a superb repository of design concepts that will help you make elegant, easy-to-use pages
How Stuff Works - Creating Websites - includes many topic area ranging from basic HTML, to web animations, to web servers

Advanced

A List Apart - is an archive of constantly-updated articles that explore some of the more esoteric issues in HTML development
Site Building (at Webmonkey) - offers several articles covering advanced HTML and site-building techniques

Print this Page | Email this Page