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
<!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> |
|
★ 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.
Editor and File names:
Tags:
A few tags do not have ending tags: <br>, <hr>, <img>
The tag here is <font>
The attribute is "color".
The value is "brown". Almost all values are in " " (numbers don't have to be in "")
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:
> < &
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