Introduction to HTML

by John Carter

The best way to learn HTML using this tutorial is simply to view this page using your browser and View / Source. Most of the main features of HTML are covered. Forms, Frames etc. will be added later if required. Click the hyperlink below for a useful summary of all the main HTML tags.

HTML Tags

Text

This text is in bold. This text is in italics. This text is in bold and italics. This text is underlined.

This text is red and font size 1. Yellow, font size 7.

This text is in type face Comic Sans MS. This is in the browser's default font.

Lists

  1. Bacon
  2. Eggs
  1. In the context of HTL web development, answer the following questions.
    1. List all the tags that can affect the appearance of text.
    2. List all the tags that can be used to produce lists.

  2. Describe the various ways of developing web pages.
Bacon
Slices of pig
Eggs
Yellow things

Indents

Using <dl><dd> for indent and </dl> to de-indent

One indent
Double indent
Back again to one indent
Five indents

Using <blockquote> for indent and </blockquote> to de-indent

One indent
Double indent
Back again to one indent
Five indents

Using <div> for aligning (left, center, right) a block of text

Hi there.
Glad you could make it.

Using <center> for centering a block of text

Hi there.
Glad you could make it.

Using <PRE> to preserve spacing

Two blank lines after this.


Here is some text.           Here's some more on the same line.
    This is in a bit.


Two blank lines before this. 


    Name         Age         Hobby
    Alan         10          Computer games
    Carol        11          Pokemon
    Darryl       40          History

Lines

Images

align="bottom" RoseSome text after it. And some more text. And some more text. And some more text. And some more text.

align="top" RoseSome text after it.And some more text. And some more text. And some more text. And some more text. And some more text. And some more text.

align="middle" RoseSome text after it.And some more text. And some more text. And some more text. And some more text. And some more text. And some more text.

align="right" Simple wrap-around of an image at the right. Some text. Some more text. Some more text. Some more text. Some more text. The Img is defined after this text. RoseAnd before this text. It takes the next available right position. Some more text after it. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text.

Previous paragraph.

Rosealign="right" This is what you get if you have no text before the image. It's suitable for the top of a page or a section. Some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text.
align="left" Simple wrap-around of an image at the left. Some text. The Img is defined after this text. RoseAnd before this text. It takes the next available left position. Some more text after it. Some more text. Some more text. Some more text. Some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text. And some more text.

Previous paragraph.

Rosealign="left" This is what you get if you have no text before the image. It's suitable for the top of a page or a section. Some more text. And some more text. And some more text. And some more text. And some more text. And some more text.

Tables

Cellpadding=5 Cellspacing=5 Width=50%
ArtistTrack
John LennonNo.9 Dream
Lynyrd SkynyrdFreebird
Marc BolanGet It On

Cellpadding=0 Cellspacing=5 Width=50%
ArtistTrack
John LennonNo.9 Dream
Lynyrd SkynyrdFreebird
Marc BolanGet It On

Cellpadding=0 Cellspacing=0
ArtistTrack
John LennonNo.9 Dream
Lynyrd SkynyrdFreebird
Marc BolanGet It On

Column spanning and Row spanning
Product No.DescriptionPrice
ChangeDelete
yzDescr£5

Hi
The two column table below helps to place the graphic with respect to the text. Useful for page tops.
ABC Ltd.Rose







Hyperlinks


Hyperlink to a page in the current folder: Link to page01.htm

Hyperlink to a page in the current folder by clicking this image: Rose

Hyperlink to a specific part of current document: Jump to Tables section

Hyperlink to a specific part of another document: Jump to Section B of page01.htm

Hyperlink to a website: Databasedesign home page

Hyperlink to a specific part of a document on a website: Databasedesign home page: A Concise History of the Internet

Hyperlink to user's mail program: Send an email to John Carter