Start Learning HTML the Right Way
Let's start learning HTML. First, HTML stands for HyperText Markup Language.
A system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page for electronic transmission and display.
Merriam Webster
HTML elements are enclosed in tags < ... >. The elements themselves are not tags, as the attributes of the elements are also not tags. Therefore, there is no such thing as an "alt tag", just as there is no such thing as an "img tag". There is an alt attribute for the img element. An ending tag has a slash /, eg: </p>.
The Right Tool for the Job
The best tool is the tool that works right for you. I would strongly suggest against using a WYSIWYG, mostly because you cannot see what you are doing. WYSIWYG programs also tend to write invalid and bloated markup, so just stick with a plain text editor.
- The tool does not automatically put anything in that you did not want in the first place.
- The tool does not change what you did to make it something the tool thinks is correct, and it isn't.
- The tool should be easy to use.
- Syntax highlighting is a great feature. If you have forgotten to close a quote, the color of the text should remind you of your mistake.
For example:
<p class="indented>This is supposed to be indented but it will not because the quote is missing.</p>
<p class="indented">This paragraph will be indented because the quote was closed correctly.</p>
- Bracket matching is also a real bonus, if you are going to be doing any kind of programming, whether it be client side, like JavaScript, or server side like PHP or ASP.
- Line numbering is very important. When you check your work against the validator at validator.w3.org and it tells you something is afoot on line 128 it's nice to be able to go directly to that line, either by scrolling or by command.
- Integrating with a stylesheet program is a good idea.
- Integrating with HTML-Tidy (a linter) to clean up your work is a plus.
- FTP is a great bonus feature.
With that said, I highly recommend HTML-Kit free version or if you are going to be doing any kind of programming, then HTML-Kit Tools is a better choice, and well worth the low cost, compared with other much more expensive editors. I have some tutorials for Tools available, including Creating Multiple Page Templates and Edit Colorizer Styles.
First Things First
The very first thing on your page has to be a document declaration. This tells the browser what kind of document to render, and how to render it. If you leave this important step out, the browser will guess what it is supposed to do and may come up with unsatisfactory results.
When choosing the DocType it is important to know what each does.
- Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- This should be used for all new documents. Presentational markup is not in this DTD, so you put all the presentational stuff in an external stylesheet. Even though Strict may sound difficult, it is not. Strict puts browsers into Standards mode, so most pages will look and act the same across different browsers and platforms.
- Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- For documents that cannot quite make Strict. Transitional puts browsers into Quirks mode, so pages may look different across different browsers and operating systems.
- Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- This DocType is only for the Frameset document itself. It is not for the inner pages which must be either Strict or Transitional.
Presentation vs Structure
The Greatest Match of the Century - Coming to a Browser Near You!
What does Presentational markup mean? Presentational markup means using elements that effect the presentation of the text, and have no effect on the structure of the document. Basically, if the text makes sense without the element, then that element is presentational. For example,A <b>great</b> story is presentational because without the bolding, a great story is still a great story. What would be structurally better would be A <strong>great</strong> story.
Before CSS, authors had to remember what elements were presentational, and what attributes did what. Then those attributes had to have values. A good example is the BODY element. Before CSS, you would see a BODY element as <body bgcolor="#FFFFFF">. If you wanted to change the background color, you had to go into each page and change the BODY element's BGCOLOR attribute value. If you had a site that was hundreds of pages, that could take a very long time.
What are the presentational elements? The table below lists those elements that are presentational. Please check with the CSS2 Property Index for valid values for the CSS equivalents.
| Element | Description | CSS Equivalent |
|---|---|---|
| B | Bold | {font-weight: bold} |
| BIG | Large size text | {font-size:120%} or {font-size: large} |
| BLOCKQUOTE | only if it is used to indent paragraphs. The BLOCKQUOTE element is used for quoting large amounts of text, and should include the CITE attribute., eg: <blockquote cite="http://historymatters.gmu.edu/d/5057/">So, first of all, let me assert my firm belief that the only thing we have to fear is fear itself</blockquote><cite>Franklin D. Roosevelt - First Inaugural Speech</cite> | {text-indent:2em;} |
| CENTER | {text-align:center} | |
| H1 | only if it is used to make text big and bold. The Heading elements should be used for headings only. | {font-weight:bold; font-size:130%} |
| HR | Horizontal rule, really does not have anything to do with the structure of a document, but can be used sparingly. Better to use CSS to but a border on the bottom of an element. | {border-bottom:1px solid #000;} |
| I | Italic type text | {font-style:italic} |
| S | Strike Through Text | {text-decoration: line-through} |
| SMALL | Small Text Size | {font-size:90%} |
| STRIKE | Strike Through Text | {text-decoration: line-through} |
| U | Underline - should really not be used because users may think that underlined text is a hyperlink. | {text-decoration:underline} or {border-bottom:1px solid #000} |
In addition to presentational elements, attributes can also be presentational and should also use CSS. All of the attibutes in the table below are deprecated for HTML Strict.
| Name | Related Elements | Comment | CSS Equivalent |
|---|---|---|---|
| align | CAPTION | relative to table | {text-align: left} or {text-align:center} (default) or {text-align:right} |
| align | APPLET, IFRAME, IMG, INPUT, OBJECT | vertical or horizontal alignment | {text-align: left} (default) or {text-align:center} or {text-align:right} |
| align | LEGEND | relative to fieldset | {text-align: left} (default) or {text-align:center} or {text-align:right} |
| align | TABLE | table position relative to window | {text-align: left} (default) or {text-align:center} or {text-align:right} |
| align | HR | {text-align: left} (default) or {text-align:center} or {text-align:right} | |
| align | DIV, H1, H2, H3, H4, H5, H6, P | align, text alignment | {text-align: left} (default) or {text-align:center} or {text-align:right} |
| alink | BODY | color of selected links | a:active {color:red} |
| background | BODY | texture tile for document background | {background-color:#fff} |
| bgcolor | TABLE | background color for cells | {background-color:#fff} |
| bgcolor | TR | background color for row | {background-color:#fff} |
| bgcolor | TD, TH | cell background color | {background-color:#fff} |
| bgcolor | BODY | document background color | {background-color:#fff} |
| border | IMG, OBJECT | link border width | {border:1px solid #000} |
| clear | BR | control of text flow | {clear: both} or {clear:left} or {clear:right} |
| color | BASEFONT, FONT | text color | {color:#f00} |
| compact | DIR, DL, MENU, OL, UL | reduced interitem spacing | {line-height:1em} |
| face | BASEFONT, FONT | comma-separated list of font names | {font-family:arial, helvetica, sans-serif} |
| height | TD, TH | height for cell | {height:3em} |
| height | APPLET | initial height | {height:3em} |
| hspace | APPLET, IMG, OBJECT | horizontal gutter | {padding:1em} |
| language | SCRIPT | predefined script language name | None - is not necessary |
| link | BODY | color of links | a:link {color:blue} |
| noshade | HR | {color:#c0c0c0; border:1px solid #c0c0c0;} | |
| nowrap | TD, TH | suppress word wrap | {white-space:nowrap} |
| size | HR | {width:50%; height:1px} | |
| size | FONT | [+|-]nn e.g. size="+1", size="4" | {font-size:100%} |
| size | BASEFONT | base font size for FONT elements | {font-size:100%} |
| start | OL | starting sequence number | {counter:item} |
| text | BODY | document text color | {color:#000; background-color:#fff} |
| type | LI | list item style | {list-style-type:square} |
| type | OL | numbering style | {list-style-type:square} |
| type | UL | bullet style | {list-style-type:square} |
| value | LI | reset sequence number | {counter:reset} |
| version | HTML | Constant | Use DOCType declaration |
| vlink | BODY | color of visited links | a:visited {color:purple} |
| vspace | APPLET, IMG, OBJECT | vertical gutter | {padding-top:1em;} |
| width | HR | {width:70%} | |
| width | TD, TH | width for cell | {width:20%} |
| width | APPLET | initial width | {width:80%} |
| width | PRE | {width:70%} |