Introduction to HTML 5
What is HTML 5?
HTML 5 is an extension of XHTML, HTML 4 and CSS3 designed to work with XML user
agents. It incorporates MathML (Mathematical Markup Language) and SVG (Scalable
Vector Graphics) into HTML. It introduces new elements - header, footer, article,
section, menu, nav, audio, and video. HTML is an application of SGML (Standard
Generalized Markup Language). SGML is the de facto standard for describing markup
languages particularly those used in electronic format but not necessarily for the
internet. SGML is both rich and complex. HTML on the other hand specifies only a
small set of structural and semantic tags. HTML has support for hypertext and
multimedia. The first line of an HTML document must start with an DOCTYPE
declaration.
<!DOCTYPE html>
The root element of an HTML document must be html.
This is followed by the meta tag. The meta element allows search engine to know
what is in the web page without having to go through every line. This element has
two main attributes: name and content. You can also specify the characterset. The
name attribute can have two values keywords or description. The meta element is
placed in the head section of the page.
<meta name = "keywords" content = "HTML, Paragraphs, Headers, Lists, Tables, Forms"
/>
<meta name = "description" content = "This page gives a brief introduction to the
HTML syntax." />
<meta name = "author" content = "Alan Turing" />
<meta charset = "UTF-8" />
Paragraphs
Use the <p> tag to delineate paragraphs. For pre-formatted text use <pre> instead.
The pre element tells browsers that the enclosed text is pre-formatted. The browser
may then leave white space intact, render text with fixed pitch font, and disable
automatic word wrap.
Headers
Header are of the form hn where n runs from 1 through 6. These are the different
types of headers:
Level 1 Header
Level 2 Header
Level 3 Header
Level 4 Header
Level 5 Header
Level 6 Header
Links
A link could take the viewer to a resource on the same computer or on a different
computer. The syntax for the link is:
<a href = "path/to/file"> ... </a>
The path could be an absolute path like an url or a relative path. Here are some of
my favorite links:
Google
Amazon
An internal link would take the viewer to a different part of the same document.
For example this internal link will take me to the section on forms. Note the use
of tags.
E-mail Address
This will bring up an e-mail form in case you want to send me mail. My e-mail
address is [email protected]
Images
Use the <img> element to include graphics. The height and width attributes are
given in pixels. Here is a picture of a galaxy NGC 1300 taken by the Hubble Space
Telescope.
Image of a galaxy
Line Breaks
Line breaks are introduced with < br />. We have purposely
broken the line.
Horizontal Line
Now we will introduce a horizontal line with the <hr /> element.
Special Characters
Here is a list of special characters in HTML. You can write these characters in two
ways - either using the English mnemonic or the hexadecimal code. For example the
ampersand symbol can be written as: & or &
Lists - Unordered, Ordered, and Definition
Unordered list:
red
blue
yellow
green
Ordered list:
One
Two
Three
Definition list:
Client
A software program that makes a request for a resource using HTTP.
Server
A machine that hosts the resources and services requests from client programs.
Tables
A table has a border, caption, head, foot, and body. The body is made out of cells
spanning rows and columns. Here is a simple table:
Distribution of Rhinoceroses
Type Population
Total 17470
Black Rhino 3610
White Rhino 11100
Indian Rhino 2400
Javan Rhino 60
Sumatran Rhino 300
Here is an example of a more complex table
Complex Table
1 2
3 4
Forms
A form has the following components:
Buttons like Submit and Reset
Text field and area
Checkboxes
Radio Buttons
Menus - Single or Multiple Selections
A form must also specify the method by which the data is transported - GET or POST.
Also the script on the server side that will process the form data. To neatly align
and present the form elements use borderless nested tables. Here is an example of a
simple survey form.
Name:
Comments:
E-mail Address:
Things you liked:
Site Design Links Ease of Use Images
How did you get to our site?
Search Engine Link from another site Reference in a book Other
Rate our site:
Excellent
Rules for Tags and Elements
Documents must be well formed. All elements must either have closing tags or be
written in special form and all elements must nest properly.
Elements and attribute names must be in lower case.
For non-empty elements, end tags are required.
Attribute values must always be quoted.
Empty elements must either have an end tag or the start tag must end with />.
