~~SLIDESHOW~~
We recommend that you view this document in slideshow mode first then go back and read the notes.
We start by revising the most commonly used subset of the eXtensible Markup Language (XHTML).
<name> content </name>
.<name />
<element [name=“value”]*> content </element>
<!- … –>
Notes
<name>
</name>
[name=“value”]*
means that an attribute – defined as a name followed by =
followed by a quoted value – can appear 0 or more times in an element's opening tag. Thus attributes are optional, but when they appear they must have the form name=“value”
. Furthermore if there are attributes, there can be any number of attributes. <!DOCTYPE html>
<html>
, <head>
, <title>
, and <body>
are required in every document<html>
as its roothtml
element may use the xmlns
attribute: <html lang="en">
The language of the document is declared in the lang
attribute. This is useful for browsers who may be visiting your site from another non-english speaking country (particular if that country uses a different character set).
<title>
element is used to give the document a title<meta>
element that specifies the character encoding used for the document should be included<p>
) in the body of the documentNotes
<title>
element is normally displayed in the browser's window title bar (at the top of the display).<meta>
tag is utf-8
defined like this<meta charset="utf-8" />
<p>
tag breaks the current line and inserts a blank line – the new line gets the beginning of the content of the paragraph<!DOCTYPE html> <!-- example.html: A trivial document --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Our first document </title> </head> <body> <p> Greetings from your Webmaster! </p> </body> </html>
[ Jump to CSS ]
<br />
tag is the same as that of <p>
, except for the blank line<p>On the plains of hesitation</p> <p> bleach the bones of countless millions <br /> who, at the dawn of victory <br /> sat down to wait, and waiting, died.</p>
Notes and Details of the Example
<br />
has no closing tag! <!DOCTYPE html> <!-- line-breaks.html An Example of Paragraphs and Line Breaks --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Paragraphs and Line Breaks </title> </head> <body> <p>On the plains of hesitation</p> <p> bleach the bones of countless millions <br /> who, at the dawn of victory <br /> sat down to wait, and waiting, died.</p> </body> </html>
<html> <p>On the plains of hesitation</p> <p> bleach the bones of countless millions <br /> who, at the dawn of victory <br /> sat down to wait, and waiting, died.</p> </html>
<h1>
to <h6>
<!DOCTYPE html> <!-- headings.html An example to illustrate headings --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Headings </title> </head> <body> <h1> Aidan's Airplanes (h1) </h1> <h2> The best in used airplanes (h2) </h2> <h3> "We've got them by the hangarful" (h3) </h3> <h4> We're the guys to see for a good used airplane (h4) </h4> <h5> We offer great prices on great planes (h5) </h5> <h6> No returns, no guarantees, no refunds, all sales are final (h6) </h6> </body> </html>
<blockquote>
Code for the Example
<!DOCTYPE html> <!-- blockquote.html An example to illustrate a blockquote --> <html lang="en"> <head> <meta charset="utf-8"> <title> Blockquotes </title> </head> <body> <p> Abraham Lincoln is generally regarded as one of the greatest presidents of the U.S. His most famous speech was delivered in Gettysburg, Pennsylvania, during the Civil War. This speech began with </p> <blockquote> <p> "Fourscore and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. </p> <p> Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated, can long endure." </p> </blockquote> <p> Whatever one's opinion of Lincoln, no one can deny the enormous and lasting effect he had on the U.S. </p> </body> </html>
Typical Display
<small> The </small> <big> sleet <big> in <big> <i> Crete </i><br /> lies </big> <b> completely </b> </big> in </big> the <tt>street</tt>
<html> <small> The </small> <big> sleet <big> in <big> <i> Crete </i><br /> lies </big> <b> completely </b> </big> in </big> the <tt>street</tt> </html>
<b>
<i>
<big>
<small>
<tt>
These tags are not affected if they appear in the content of a <blockquote>
, unless there is a conflict (e.g., italics)
sub
sup
<html> x23 </html>
x<sub>2</sub><sup>3</sup>
Very Important Note
Needed to enter certain special characters into a web page
Char | Entity | Meaning |
---|---|---|
& | & | Ampersand |
< | < | Less than |
> | > | Greater than |
“ | " | Double quote |
' | ' | Single quote |
¼ | ¼ | One quarter |
½ | ½ | One half |
¾ | ¾ | Three quarters |
? | ° | Degree |
(space) | | Non-breaking space |
Notes:
The first four character entities are needed to display the characters that are used by XHTML elements and attributes.
For example to display <p class=“greeting”>Hello World!</p>
in a web page
we have to enter <p class="greeting">Hello World!</p>
and to display the &
symbol
we have to use &amp;
. This can make the display of HTML code in a web page quite a challenge!
For a full list of the 252 usable character entities see 1 and 2.
<hr />
draws a line across the display, after a line breakmeta
element (for search engines)<img src = "comets.jpg" alt = "Picture of comets" />
<img />
tag with the src
attributealt
attribute is required by XHTML<img>
tag has 30 different attributes, including width
and height
alt
attribute:Code for the Example
<!DOCTYPE html> <!-- image.html An example to illustrate an image --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Images </title> </head> <body> <h1> Aidan's Airplanes </h1> <h2> The best in used airplanes </h2> <h3> "We've got them by the hangarful" </h3> <h2> Special of the month </h2> <p> 1960 Cessna 210 <br /> 577 hours since major engine overhaul<br /> 1022 hours since prop overhaul <br /><br /> <img src = "c210new.jpg" alt = "Picture of a Cessna 210" /> <br /> Buy this fine airplane today at a remarkably low price <br /> Call 999-555-1111 today! </p> </body> </html>
Typical Display
href
(hypertext reference) attribute of <a>
(the anchor tag)<a>
is the visual link in the documentNotes
Relative addressing of targets is easier to maintain and more portable than absolute addressing
Code for the Example
<!DOCTYPE html> <!-- link.html An example to illustrate a link --> <html lang="en"> <head> <meta charset="utf-8" /> <title> A link </title> </head> <body> <h1> Aidan's Airplanes </h1> <h2> The best in used airplanes </h2> <h3> "We've got them by the hangarful" </h3> <h2> Special of the month </h2> <p> 1960 Cessna 210 <br /> <a href = "C210data.html"> Information on the Cessna 210 </a> </p> </body> </html>
Typical Display
Link Target
The Link Target is C210data.html
<!DOCTYPE html> <!-- C210data.html An example to illustrate the target of a link --> <html lang="en"> <head> <meta charset="utf-8" /> <title> 1960 Cessna C210 </title> </head> <body> <h1> 1960 Cessna 210 </h2> <p> 577 hours since major engine overhaul<br /> 1022 hours since prop overhaul <br /><br /> <img src = "c210new.jpg" alt = "Picture of a Cessna 210" /> <br /> Buy this fine airplane today at a remarkably low price <br /> Call 999-555-1111 today! </p> </body> </html>
Typical Display
id
attribute, as in:<h1 id = "baskets"> Baskets </h1>
#
); If the id
is in the same document, this target could be:<a href = "#baskets"> What about baskets? </a>
<a href = "myAd.html#baskets"> Baskets </a>
<a href = "c210data.html"> <img src = "smallplane.jpg" alt = "Small picture of an airplane " /> Info on C210 </a>
<big>
, <small>
, <hr />
, <p>
and <br />
tags.background
as the link content. This document should have a few paragraphs of your personal history.<ul>
tag<li>
tag: unordered.html<!DOCTYPE html> <!-- unordered.html An example to illustrate an unordered list --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Unordered list </title> </head> <body> <h3> Some Common Single-Engine Aircraft </h3> <ul> <li> Cessna Skyhawk </li> <li> Beechcraft Bonanza </li> <li> Piper Cherokee </li> </ul> </body> </html>
<!DOCTYPE html> <!-- ordered.html An example to illustrate an ordered list --> <html lang="en"> <head> <meta charset="ut-8f" /> <title> Ordered list </title> </head> <body> <h3> Cessna 210 Engine Starting Instructions </h3> <ol> <li> Set mixture to rich </li> <li> Set propeller to high RPM </li> <li> Set ignition switch to "BOTH" </li> <li> Set auxiliary fuel pump switch to "LOW PRIME" </li> <li> When fuel pressure reaches 2 to 2.5 PSI, push starter button </li> </ol> </body> </html>
<!DOCTYPE html> <!-- nested_lists.html An example to illustrate nested lists --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Nested lists </title> </head> <body> <h3> Aircraft Types </h3> <ol> <li> General Aviation (piston-driven engines) <ol> <li> Single-Engine Aircraft <ol> <li> Tail wheel </li> <li> Tricycle </li> </ol> <br /> </li> <li> Dual-Engine Aircraft <ol> <li> Wing-mounted engines </li> <li> Push-pull fuselage-mounted engines </li> </ol> </li> </ol> <br /> </li> <li> Commercial Aviation (jet engines) <ol> <li> Dual-Engine <ol> <li> Wing-mounted engines </li> <li> Fuselage-mounted engines </li> </ol> <br /> </li> <li> Tri-Engine <ol> <li> Third engine in vertical stabilizer </li> <li> Third engine in fuselage </li> </ol> </li> </ol> </li> </ol> </body> </html>
<dl>
tag<dt>
tag<dd>
tag: definition.html<!DOCTYPE html> <!-- definition.html An example to illustrate definition lists --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Definition lists </title> </head> <body> <h3> Single-Engine Cessna Airplanes </h3> <dl> <dt> 152 </dt> <dd> Two-place trainer </dd> <dt> 172 </dt> <dd> Smaller four-place airplane </dd> <dt> 182 </dt> <dd> Larger four-place airplane </dd> <dt> 210 </dt> <dd> Six-place airplane - high performance </dd> </dl> </body> </html>
<table>
tagborder
attribute in the <table>
tag specifies a border between the cells<caption>
tag, which can immediately follow <table>
Notes
“border”
, the browser's default-width border is used<tr>
tag<th>
tag<td>
tag<!DOCTYPE html> <!-- table.html An example of a simple table --> <html lang="en"> <head> <meta charset="utf-8" /> <title> A simple table </title> </head> <body> <table border="border"> <caption> Fruit Juice Drinks </caption> <tr> <th></th> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> <td> 0 </td> </tr> <tr> <th> Dinner </th> <td> 0 </td> <td> 0 </td> <td> 1 </td> </tr> </table> </body> </html>
For information on column and row spanning, cell alignment, cell spacing and padding see the notes.
Tables – colspan
<table border="border"> <tr> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Orange </th> <th> Apple </th> <th> Screwdriver </th> </tr> </table>
colspan
attribute must be set in the <th>
tag to specify that the label must span some number of columns: <table border="border"> <tr> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> : </tr> : </table>
Tables – rowspan
rowspan
, e.g.<table border = "border"> <tr> <td rowspan = "2"> </td> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> </table>
<table border = "border"> <tr> <td rowspan = "2"> </td> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> : </tr> : </table>
<!DOCTYPE html|An example to illustrate rowspan and colspan> <!-- cell_span.html An example to illustrate rowspan and colspan --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Rowspan and colspan </title> </head> <body> <table border = "border"> <caption> Fruit Juice Drinks and Meals </caption> <tr> <td rowspan = "2"> </td> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> <td> 0 </td> </tr> <tr> <th> Dinner </th> <td> 0 </td> <td> 0 </td> <td> 1 </td> </tr> </table> </body> </html>
thead
, tbody
, and tfoot
tbody
elements, they are separated by thicker horizontal linesid
and name
attributes