Did you know you can learn from any webpage?

When you see a webpage that does something you'd like to learn to do, copy it from the HTML view (the source code). In Netscape, go to the VIEW menu at the top of the screen, then click on PAGE SOURCE. In MS Internet explorer, go to the VIEW menu and click on SOURCE. Your browser will pull up the HTML codes for the webpage you're looking at. Copy it by highlighting all the text (or the part that you want) and pasting it into your HTML page.

To learn from this sample page, download the source by using the instructions above. You'll see what the tutorial is describing.

This is a table with invisible borders.

It's used to better organize your page and can be used to put multiple text lines next to a graphic. This table covers 75% of the screen, so the image doesn't overlap the background image down the left side.

MAIN TEXT GOES HERE

A table is used here, with a width of 500 pixels. It looks much better when the text does not span the full width of a computer screen. People can read faster when the text don't have to go far from left to right and back again.

  1. First point of information.
  2. Second point.
  • Using bullets instead of a numbered list.
  • Doesn't this look nice?!

You can also indent your text without using numbering or bullets. When you do, it's also indented at the right side, so that the text is formed into a block that's narrower than the rest of the page. This is the <blockquote> command. </blockquote>

How to wrap text around a picture:

When you want your text to wrap around a graphic, a normal table will not work, because a normal, two-cell table like the one at the top of this page does not allow the text to wrap around the graphic like it does here. The solution is to put the graphic into a single-cell table, and assign it align="right", i.e, the HTML code that makes it show up to the left or right of the text. Always place this code at the beginning of the the first line of the text that you want wrapped around the picture. Once you insert the code, the browser will automatically throw the table that contains the graphic to where you told it to go (left or right).

You can achieve the same spacing without using a table at all.
Use align="right" in the image attributes.

Return to our Home Page