By: Allib
HTML: What is it?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup
tags
The markup tags tell the Web browser how to display
the page
An HTML file can be created using a simple text
editor or a WYSIWIG editor
HTML: Editors
Since HTML files are just text files, many programs
can be used to create them. Some programs provide
special assistance for handling HTML, like syntax-
highlighting or auto completion.
WindowsMacFree: Notepad++, AptanaTextEdit,
Smultron
$$E-Text EditorTextMate, Coda, Espresso
History of HTML
1992 – HTML first defined
1994 – HTML 2.0
1996 –HTML 3.2 , compromise version
1997- HTML 4.0 separates content from presentation
1998- XML standard for writing web languages
2000 – XHTML 1.0, compliant HTML
2002 – XHTML 2.0
Anatomy of an HTML tag
<tagname attribute="value"> content </tagname>
<a href="http://www.google.com" > Google </a>
Think of a tag as a "command" to the browser and of
the attributes as modifiers of that command.
Basic Outline of an HTML code
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML Basics
The doctype isn't an actual tag, but it needs to be at
start at every HTML page to tell browser which version
of HTML you're using (HTML5, in example below).
The html tag is always the first tag in the page.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head & Body
The head contains "meta" information about the
page, information that the browser needs before
rendering it.
The body contains the actual content of the page.
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>Title of your page goes here</title>
</head>
<body> Bulk of your content here. </body>
</html>
What goes in the
body?
Headlines
<h1>Header 1</h1>
To..
<h6>Header 6</h6>
Header 1
Header 2
...Header 6
Paragraphs
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
Paragraph 1
Paragraph 2
Paragraph 3
Line Breaks
<p> Here's my favorite song about rabbits: <br>
Little bunny Foo Foo <br>
Hopping through the forest <br>
Scooping up the field mice <br>
And bopping them on the head
</p>
Notice: This tag does not need to be closed, since it
doesn't encapsulate anything.
Lists
<ul>
<li>Item 1</li>
<li>Item 2</li> ...
</ul>
Item 1
Item 2
...
Ordered Lists
<ol>
<li>Item 1</li>
<li>Item 2</li> ...
</ol>
1. Item 1
2.Item 2
...
Some basic tags:
<blockquote></blockquote> - defines an indented
format
<hr /> - creates a horizontal rule
Formatted Text
<em>Emphasized Info</em>
<strong>Important Info!</strong>
<i> makes text appear italicized </i>
<b> makes text appear bold</b>
<u> makes text appear underlined</u>
<sup> - makes text appear as superscript</sup>
<sub> - makes taxt appear as subscript</sub>
<strike> - makes text appear as crossed out</strike>
Images
<img
src="http://www.google.com/images/srpr/lo
go1w.png" alt="Google">
Links
<a href="http://www.google.com">Google</a>
Google
<a href="http://www.google.com"> <img
src="http://www.google.com/images/srpr/logo1w.png
" alt="Google"> </a>
HTML Validators
Browsers will often render HTML that has mistakes
in it, using different error correction strategies.
To check that your HTML is actually valid according
to the standard, run it through the W3C validator.
You can also install the validator add-on for Firefox.
HTML Resources
When you're on your own and trying to code HTML,
do a search for the tag you're using ("img tag" or "li
tag") and you will usually find good references at the
top.
W3Schools is a simple to read reference with
interactive examples & will often be the top result.
The HTML spec is the official reference, but can be
harder to read.
For more tutorial type sites, check out Mozilla
Developer Network and the Opera Web Standards
curriculum.
Tables
Tables are useful for displaying tabular data on the
web, like research study results.
Tables: Not for Layout
Before we had better techniques, tables were often used
to layout a webpage, but this is now strongly
discouraged.
We will discuss better ways to do layout when we cover
CSS.
The table element
The TABLE element contains all the elements that make
up a table - the header, rows, and columns. This example
shows a table of monthly savings.
<table>
<thead> <tr>
<th>Month </th>
<th>Savings </th>
</tr>
<tbody> <tr>
<td>January </td>
<td>$100 </td>
</tr>
</table>
Code 1
<table border=1>
<tr>
<caption> my first table </caption>
<td>tables
<td>are
<td>cool!
</tr>
</table>
The table body
Tables can consist of any number of data rows after
the header. The tbody element begins the body (data)
area, the same tr element creates a row,
and tdelements create data cells in each row.
<table> .... <tbody> <tr> <td>January </td>
<td>$100 </td> </tr> </table>
Code 2
<table border=1>
<tr>
<caption> my first table </caption>
<td>tables </td>
<td>are </td>
<td>cool! </td>
</tr>
<tr>
<td>and </td>
<td>easy </td>
<td>too! </td>
</tr>
</table>
