The W3C (World Wide Web Consortium) is currently recommending the standards described in XHTML 2.0. Although web browsers will continue to support old code, deprecated methods are designated to be phased out. In short, do not write HTML using deprecated methods, instead learn the universally accepted approach and be willing to adjust to new standards.
Open your HTML editor (a good free one is 1st Page) or just Notepad, then save your first web page with the extension ".htm" which signifies HTML. (Your HTML editor will do this by default, Notepad will not.) Until you get into more advanced techniques, start each HTML page with this skeleton:
(Write the name of your web page here)
PUT THE CONTENT OF YOUR PAGE HERE
Voila -- your first web page. The <html> tag signifies HyperText Markup Language, the <head> tag signifies information for the header of the document, the <title> tag is the name of the page that is displayed on the title bar of the browser window, and the <body> tag is for the body of your page. Thrilling stuff!
Header tags come in six sizes: <h1> through <h6> The header size corresponds to the user's browser settings. As with any other kind of tags, you have to add a corresponding ending tag where you want the heading to stop like so: </h1>
If you want to force a manual line break in text you can use the <br \> (break) tag:
This sentence<br \>
is broken<br \>
Color applies to many different tags in HTML. For example, you can change the background color of the entire page to red by specifying:
<body style="background-color: red">
<body style="background-color: rgb(255,0,0)">
As you can see, there are two ways color can be specified:
Actual names: Red, green, blue, orange or they can be quite exotic like papayawhip or peachpuff.
Hexadecimal: Expressed as 3 hex values corresponding to Red, Green and Blue (RGB).
Here are three links which will help you understand hex numbers and hex colors:
Print out a page with the colors and keep it handy for reference.
(Do a Google search for "HTML colors" and you will find several to choose from.)
Here are some examples using color with inline elements:
A colorful paragraph
Paragraph tags are used to enclose a section of text to which you will apply other formatting, such as centering.
<p>Put your text between the tags.</p>
<p style="text-align: center">Put your text between the tags.</p>
The <font> tag should NOT be used! Instead set the style of the block-level tag or use the <span> tag.
Controlling fonts throughout a webpage is tricky. Five generic font styles can be specified: serif, sans-serif, monospace, cursive and fantasy. However, the precise appearance is dictated by the user's web browser. This will produce different results between different browsers:
Here is an example of how the appearance might look using generic fonts:
The size can be adjusted by setting the font-size property. This can specified in four different ways:
Absolute units can be measured in five ways: mm, cm, in, pt and pc.
The measurement amount should be flush with its name:
Relative units can be specified using em or ex. These units specifiy how large the font should appear relative to the browser's default size. For example:
For a small section of text, use the <span></span> tags to subdivide an inline element.
You can also specify the size of a font using keywords:
letter-spacing and word-spacing can be set to control the blank space between letters and words. line-height controls the blank space between lines. Use a negative value to bring elements closer together, use a positive value to push elements further apart.
Other parameters that can be set include font-style, font-weight, text-decoration, text-transform, and font-variant.
This demo page let's you easily experiment with the huge variety of parameters used to control the appearance of text on your page:
Text Styles Demo
It would be impractical to have to work with all of these settings on an ongoing basis. It is overwhelming to keep track of it all. Cascading Style Sheets (CSS) provide tools to consistently apply themes accross multiple web documents.
Usually you will want to just make a bulleted list. To do so, you can simply use the list item tag:<ul>
You can also make an ordered list. Enclose the list items inside <ol> tags.
(AHEM!--This would be a good time for you to right-click on this page and select "View Source".)
This will number the items for you:
Or you can use <ol style="list-style-type: upper-alpha">
Other list-style-type attributes include:
You may also use an image as your bullet using this syntax: <ul style="list-style-image: url(filename)">
Another type of list is a definition list (view source):
It's not too hard to explicitly make lists on your own, so you don't need to spend a lot of time mastering each of the list parameters. (Unless you really like making lists...)
There are several available tags in this category. Two are heavily used in formatting:
<b> The bold tag
<i> The italic tag
There is also:
<tt> The True Type tag - sets Courier font
<big> The big tag
<small> The small tag
<sub> The subscript tag for putting text below
<sup> The superscript tag for putting text above
As with any formatting tags, be sure to close the tag when your done with that section.
(Pick up your toys when you're done playing with them!)
There is a huge amount of special characters which may be specified, the most common of which is the non-breaking space.
Browsers ignore consecutive spaces in your HTML page, so you must explicitly specify them:
You must write   or for each non-breaking space.
Here are some others that are common:
Here is a table of the codes and their corresponding symbols. Each special character number must be preceded by &# and followed by ;.Click here for a chart of the codes
An easy way to divide sections on web pages is to use the line break.
The <hr /> Horizontal Rule tag is used to make a line across the page.
You can also set height, width, align, color and background-color properties within the tag for different effects (view source):
As you can see, you can easily make a line or rectangle of the size and color you want. In fact, you could make a square if you want:
The standard <hr /> tag yields a boring line, so be sure to adjust your line breaks to match the style your web site. If you always used the same type of line break throughout a web site, it would be nice if you could set the page to always display your line breaks the same way without you having to restate those parameters every time. Hold on to that thought. We'll address it later.
All the files for your web site will be contained within a folder. In order to keep things organized, you should create separate directories for files of corresponding types. For example, you will always have many images that you will use on a web page. Therefore make a subdirectory for images, so that they don't clutter up your main folder. Always keep things in logical groups so that you can locate files quickly. There are two ways a file's path name can be specified:
You should always use relative path so
that you can move your main
web site folder to other folders without making any adjustments.
To go up a folder using relative path, you can specify the prefix "../". Here are examples of how files can be specified:
|The current directory is "homepage".
Select the file "birthday.jpg"
in the "images" subdirectory.
|The current directory is "picturepages"
which is a subdirectory of
the root directory "homepage".
Select the file "birthday.jpg"
in the "images" subdirectory.
|The current directory is "fallpictures"
which is a sub directory of "picturepages"
which is a sub directory of "homepage".
Select the file "fallvacation.doc" in the
"documents" directory located in the
The body tag surrounds the content of your web page. You can use it to modify the theme of the entire page.
Here are some examples of different page themes you can set:
Finding an attractive background image can add a lot of pizazz to your page.
Here's a great site to get a background for your page:www.webpagebackground.com
This is a tag for you to make comments about code in order to help you or others understand the procedure you have coded:
<!--Any comments you would like to make about your coding here-->
You don't have to use comments, but they are especially handy when you write a tricky piece of code and want to refer back to it later.