HTML Lesson

Please read this whole document.

All webpages are based on HTML
Most also use CSS and Javascript to make them more visually appealing and useful.

For a great reference see W3Schools

Here is the structure of any HTML page :

<!DOCTYPE html>
<HTML>
<HEAD>
... header stuff (title, scripts, etc) ... 
    <title>My webpage </title>
    <meta charset="utf-8">
</HEAD>
<BODY> 
... all content that actually 
    shows up on the screen...				
</BODY>
</HTML>
  • The first line is always Doctype, exactly as shown
    Here is an explanation of it.
  • Head comes before Body.
  • charset utf-8 makes symbols display properly
  • Do not overlap Head and Body.
  • Make sure each is closed.
  • You only have 1 head and 1 body.
  • Everything is bracketed in <HTML>
★ Every one of these lines is mandatory, except the UTF-8 which is recommended.

Please also look at this summary page, it has a nice visual explanation at the end of it.

Basic information

Editor and File names:

 

Tags:

 

Tags can never overlap. If you open a table tag, then a font tag, you must close the font tag before you close the table tag.
<p>This is <b> wrong </p> because the P closes </b> before the B. They overlap! Bad bad bad. They must be nested instead.

You cannot enter a < or > symbol into the text. You have to use a special character.
These are the most common special characters, you should learn what they do:
&gt; &lt; &amp; &nbsp;

List of common tags:

There are two categories of formatting.

The first group of tags is  "block"  type. These tags start a new block of text. You wouldn't use them in the middle of a sentence because the sentence is then broken into a new paragraph or block

<p> = paragraph 
   (all text should go in here, unless in a table or list or header or any other block)
<br> = line break (inside a paragraph)

<hr> = horizontal line
   e.g. <hr width=80% size="10" color="orange">
<h1>...<h1> = different heading levels (you rarely go beyond H4) <table> = table stuff . **Complex, but important.** Uses <tr> and <td> <form> = forms. Complex. We won't be using them. <pre> = preformatted -- like computer text <ol> = ordered (numbered list) <li> = list element <ul> = unordered list (bulleted) <li> = list element
<body> The body tag is special and has lots of useful attributes.
   Look up link, text, vlink, bgcolor, background.
   Later on all of these <body> attributes will be removed and done in CSS.

The following tags format text  "inline" . The do not change the layout of the text. They just change how it is formatted right where it is.

<img> = image. many useful attributes -- look them up.
<b> = bold (or <strong>)
<i> = italic (or <em>)
<s> = strikethrough
<u> = underline (not used much)
<font> = all styling for fonts (completely replaced by CSS)

<a href= ""> = link to another webpage. **Look up the many useful attributes

The following tags do nothing in HTML:

<!--  start comment
  blah, blah, blah
  Comments can include other tags, which is very useful.
end comment -->

<div>  = CSS division
<span> = CSS span