Learning HTML


What is HTML?
HTML stands for Hypertext Markup Language. It's the basic "programming language" for the World Wide Web. HTML consists of a series of codes which control the display of the document in a web browser. It allows you flexibility in text and graphics. You can also add other programming language scripts like Javascript or Visual Basic scripts. Although I know scripting, I have yet to make a reference guide for that. If you are interested, there are lots of script references online.

Contents:

HTML Tags

All html documents have the same basic structure:

<html>
<head>
 Header goes here
</head>
<body>
 The body of the document goes here
</body>
</html>

Colors

Color is an important key to web pages. You can specify color for backgrounds, text, headings, horizontal lines, and links. Colors are specified by including color = and then the hexidecimal color preceded by a # symbol. On the web, there are several color charts available, which give the colors and their hexidecimal equivalents.

Some examples:

<font color = "#ff0000"> Red = FF0000
<font color = "#00ff00"> Green = 00FF00
<font color = "#0000ff"> Blue = 0000FF
<font color = "#ffff66"> Yellow = FFFF66
<font color = "#cc9999"> Grey = CC9999
<font color = "#000000"> Black = 000000
<font color = "#cc33ff"> Purple = CC33FF
<font color = "#00ccff"> Light Blue = CC33FF

Headings

Headings are usually used at the top of a section of text. The heading tags are bold and bigger than normal font sizes. The sizes range from H1 to H6 with H1 being the smallest heading size. The heading above this section named "Headings" is heading size H2. Use the View Source option on your browser to view how this heading was created.

Fonts

To make text stand out, you can either change the size of the font, you can make the text bold, use italics, make it look like text from a typewriter, superscript it, subscript it, or strikethrough it

Font size can range from 1 to 6. The default is size 3. Using different font sizes can drastically alter the appearance of a page.


Bold Text

Italicized Text

Typewriter Text

Superscript

Subscript

Strikethrough

Paragraphs

HTML does not understand paragraphs, blank lines, and line breaks in its natural format. So we have to use special tags to format the text the way we want. Click on the following links or scroll down to find out how to add paragraph breaks, blank line breaks, and horizontal line breaks.

Paragraph breaks

A paragraph break is about the same as two blank line breaks. You might ask, so why not just put two line breaks (see below for line break syntax)? Well, HTML will only show the first line break. Use the <p>, paragraph break instead. No ending tag is needed.

Blank line breaks

A line break is simply a carriage return/line feed. If you press enter when coding (to start text on the next line), HTML will put all the text on the same line. So to put a simple line break, which separates the end of one line and the beginning of the next, use the <br> tag. Note: there is no ending tag ( </br> ) needed for this.

Horizontal Line breaks

The best separator in web pages is <hr>. This is the horizontal line break. It has no ending tag, but you can add parameters inside the brackets to change its size and color. For color, inside the brackets, put color = and then the color you want the line to be. Normally, horizontal lines are slightly shaded, but by adding noshading inside the brackets, the shading disappears. You can also specify how thick the line should be using the size = parameter, with a number between like 1 and 6.

Using the width = parameter you can choose how far horizontally across the page the line will go. You can use percentages of the screen to specify an amount. width = 100% will cause the line to go completely across the page, and, if width is not included, 100% is the default width.

Example : You want a blue line that's pretty thick and goes about 75% across the page


The code... <hr color = "#0000ff" size=4 width=75%>

Lists

There are three kinds of lists:

Bulleted Lists


A bulleted list looks like the list of list links above. The items in the list are indented and preceded by a bullet. Around the bulleted list put <ul>...</ul> tags. Then, before and after each item, use the <li>...</li> tags (although it won't affect anything if you don't put the ending tag).

Numbered Lists


For a numbered list, do everything the same as the instructions for a bulleted list, even keep the <li>...</li> tags, except change the <ul> tags to <ol> beginning and ending tags.

Definition Lists

A definition list looks a lot like a glossary. The term is on the first line against the left margin, and the definition is on the line below the term indented slightly. To signify the start and end of a definition list, use the <dl>...</dl> tags. Inside those tags, you need to show which lines are terms and which are the terms' definitions.
The term and definition tags have no ending tags. Simply place them before the appropriate line.

Creating Links

Linking to another page

Type : <a href="PutYourURLtoLinkToHere">TheTextAssociatedWithTheLink</a>
Example : To put a link to the Yahoo search engine on your page...
<a href="www.yahoo.com">Yahoo search engine</a>
It shows up on a web page like the link above.

Link to somewhere in a page

This works a lot like linking to another document, but, instead of putting a URL in the link statement (after the a href= part), put a # and then a key word for the link.
Now, go to the spot in the document that you want the link to point to. There, before the first words in that spot type: <a name="TheKeyWordYouPutInTheAboveLink">. After the first couple words, put the ending </a>.

Link to an email

Instead of putting a URL after the a href= part, type in there (surrounded by quotes) mailto: and then the email address to link to. Put the ending tag in the same way as linking to another page.

Adding Graphics

When adding graphics, only the starting tag is used. The tag is IMG and contains four attributes:

Return to Libby's Web Page