| Jump to links |

Basic Web Document

My first web page.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs p to insert blank lines is a bad habit. Use the br tag instead. (But don't use the br tag to create lists. Wait until you have learned about HTML lists.)

You might have noticed that paragraphs can be written without the closing tag /p. Don't rely on it. The next version of HTML will not allow you to skip ANY closing tags.

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.

We use a horizontal rule (the hr tag), to separate the sections in our tutorials.

Paragraph Tags,
Line Breaks,
and Horizontal Rules will format the text so that is easier to read.

Fonts

Arial
Times New Roman
Verdana
Courier New

Font Size

Arial
Times New Roman
Verdana
Courier New

Font Color

Arial
Times New Roman
Verdana
Courier New

Font Style

Arial - Bold
Times New Roman - Italic
Verdana - Underline
Courier New - Bold, Italic, Underline

Ordered Lists

  1. Coffee
  2. Milk

Unordered Lists


Types of Ordered Lists

Numbered list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Types of Unordered Lists

Disc bullets list:

Circle bullets list:

Square bullets list:


Resizing Images

You can change the size of the image by modifying the width and height


Aligning Images With Text

An image in the text

An image in the text

An image in the text

Note that bottom alignment is the default alignment

An image in the text

An image before the text

An image after the text


Floating Images With Text

A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. Im am adding more text here so that you can view this example when the browser is set to full screen. Hopefully this will be enough text, because I am really fried and running out of things to write.

A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. Im am adding more text here so that you can view this example when the browser is set to full screen. Hopefully this will be enough text, because I am really fried and running out of things to write.


Dealing with links

back to top

HTML was designed to embed links with text. This way the read can read the web page naturally, then click on the link to go to a different page to find out more information. The idea behind the WWW is that the web pages would be all over the Internet, and the user can surf around like a spider web.

A great reference for HTML is http://www.w3schools.com.

http://www.w3schools.com
http://www.newton-falls.k12.oh.us

Send an e-mail to Mr. Donley


Dealing with Tables

Table 1

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Table 2 - Missing Data

row 1, cell 1 row 1, cell 2
row 2, cell 1

Table 3 - Missing Data Fixed and Attributes

row 1, cell 1 row 1, cell 2 row 1, cell 3 row 1, cell 4
row 2, cell 1     row 2, cell 4
  row 3, cell 2 row 3, cell 3  
row 4, cell 1 row 4, cell 2 row 4, cell 3 row 4, cell 4