HTML NOTES

Tag structure

example <html> where html is the tag name

example <hr size=240> where hr is the tag name and size is an attribute

example <p>This is the text of my paragraph</p>

example <img src=name.JPG> where img is the tag name and src is an attribute

Bare minumum rules for making web pages

  1. All documents need to be saved with a name that has no spaces and ends with a .htm or .html extension
  2. The source code for your page must have a beginning and ending html tag <html>...</html>
  3. Have a plan. Documents that are going to be linked together relative to each other need to be in folders (aka directories) that will be uploaded to your server or host. If you move a document after you have made a link, you will break the link.

Parts of an HTML file

This is what are source code is looking like so far

<html>
<head><title> What is typed here is what the world will see in the title of a browser window. This is way too long by the way.</title>
</head>

<body> Anything I type here, the world will see inside the browser window. This is going to be boring, with no formatting to make it look pretty, but this is our first attempt at making a web page, so we are going to add more stuff to this source code as we learn it.</body>
</html>

The body tag

The body tag has a lot of attributes. They are

background="URL"
bgcolor="#rrggbb"
text="#rrggbb"
links="#rrggbb"
alink="#rrggbb"

vlink="#rrggbb"

What is all this #rrggbb stuff?

Color on the internet is expressed in a hexadecimal triplet. No you don't have to do math, but basically, the triplet part comes from the Red, Green and Blue values that are mixed together to make all the colors. The hexadecimal part is a way of counting based on 16 digits 0 through 9 and A through F. This is over simplified, and if you want the long and involved lecture on web safe color, I will be happy to give it too you!

How do I find out what color I want to use?

Use a program called "HTML color picker, which actually uses Apple's system software to get your hexadecimal triplet. Be sure to use HTML color picker to get web safe colors.

Tags that format text

<p>...</p> This is a paragraph tag. The major feature of the paragraph tag is that it creates a space between paragraphs
<br> this is a break tag. It is an empty tag, meaning it does not have a beginning and end, rather it just happens, you put the break in and then the text after the tag is on a new line, but without a space between the lines.

Other ways to break up text on a page

<hr> Horizontal rules are nifty "lines" you can put on a page. They are empty tags (no ending or close tag, remember?) but they have many attributes

size=number
width=number or number%
align=right or center
noshade

Note that size and width can be expressed in terms of pixels. Width can also be described in terms of the percent of the window you wish the hr to take up. Pixels are fixed, no matter what the window sizes is the hr will remain the same size. If the hr is set to percent, it will change size depending on the size of the window.

Font

The font tag <font> also has a few attributes

face ="fontname"
size="number"

Headings

The heading tag <hn> where n is a number 1 through 6. <h1> is the largest heading and <h6> is the smallest. Headings are different than the size attribute of a font tag. You may be asking yourself, why should you bother with headings, when I can just use the size attributes in the font tag and a bold <b>...</b> tag. Heading tags can actually provide more information for search engines and web crawlers, which can make your website easier to find when searching on the internet.

Lists

Lists come in two varieties Ordered and Unordered. All lists start with the open list tag, and then each item in the list has a <li> tag, indicating it is a line item. When the list is complete, the list tag should be closed, since it is an element tag. Both lists have the attribute of type.

Ordered lists (numbers)
<ol>...</ol>
Unordered lists (bullets)
<ul>...</ul>

Back to the Calendar