Basic HTML and XHTML Tags v12 8/15/08
By Margaret S. Menzin © May be used for non-commercial purposes with credit.
Notes: About compatibility of HTML and XHTML and about HTML5 (in the works)
1. Absolutely Essential
Html, head, body, title, h1-6, and comments tags and !DOCTYPE declaration
2. Lining Up Text
Paragraph, break line, center and div tags,
Align attribute for paragraphs, headlines, divs, and horizontal lines
Blockquote, and Preformatted tags
Horizontal Rule tags with width, size and noshade attributes
3. Colors and Fonts
Bold, italics, underline, superscript and subscript tags
Font tag with width, face, size and align attributes
Color specification — for fonts and backgrounds
Don't blink
4. Lists
Unordered list (plain and bulleted) and ordered list and list item tags
5. Links
Anchor, hypertext reference tags, name attribute
Relative and absolute addressing
6. Tables
Table, table row, table header, table data item tags, with Align and vertical align attributes
Width and border attributes for tables
7. Inserting Graphics
Img tag with src and align attribute
Tiling
Note: About compatibility of HTML and XHTML
Please note:
these notes now close ALL tags so as to be compatible with CSS and XHTML.
If you have never written HTML you may ignore this section.
If you have written HTML then the notes below will explain the rather minor differences.
If you have written HTML and have HTML pages which you wish to convert
to XHTML, then go to http://cgi.w3.org/cgi-bin/tidy,
enter the reference for your page, and HTML Tidy will do the conversion for
you.
You then need to save the source
(view it, highlight all, copy and paste it into NotePad or WordPad and save
it). This process works!
XHTML is HTML re-written in XML. For a complete discussion of this see http://www.w3.org/TR/xhtml1/introduction.html#xhtml0
If you are used to writing HTML, then please
note the following items:
(See http://www.w3.org/TR/xhtml1/diffs.html#diffs for more details.)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Note that XML 2.0 was published in January 2006. Fans of XML 2.0 are currently recommending
that you be familiar with 1.0, use CSS, etc.
(See http://www-128.ibm.com/developerworks/xml/library/x-futhtml2.html?ca=dgr-lnxw03XHTML2#resources for more details).
More importantly, HTML5 is in the works, so please read Coming Attractions:HTML5 and XHTML5
in these notes.Reading
1. Absolutely Essential
< !DOCTYPE ... > The DOCTYPE preprocessor information (needed for XHTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy the above into the start of your page.
<html > </html> .... The HTML tag
Opening and closing tags.
Everything in between is interpreted as HTML.
<head> </head> .... The head tag
Again, opening and closing tags.
The header contains the title
and will often contain your JavaScript code.
Often the header also contains meta-tags
(keywords about the content of your page< to make it easier for
search engines to find it.)
Any text between the tags will be in bold face.
There will be a blank line after your headings.
Heading sizes go from <h1> </h1> (biggest) down to <h6> </h6> (smallest).
<\title> </title> .... The title tag
Opening and closing tags.
The title is what is displayed at the bottom of your browser.
It should be informative.
Do not add spaces between the tags and the title:
<title>The right way to make a title </title>
<title> The wrong way to make a title</title>
<body> </body> .... The body tag
The body has everything
that's not in the header.
It comes after the header, so that by the time the body
is executed anything in the header has been read.
<!-- --> .... The Comment tag
Anything between these tags is ignored by HTML.
This is where you put important information to document the code :
• Your name
• The date you wrote this code and the date of any subsequent revisions
• References - This code from such and such a book, page, etc.
You will also use to enclose JavaScript code, so that HTML doesn't try to execute it.
2. Lining Up Text
<p> </p>
.... Paragraph
tags
These mark the beginning and end of a paragraph.
Each paragraph will automatically
start on a new line, with one blank line inserted after the last
paragraph.
Of course, these tags come as an
opening and closing pair.
<br /> .... Line break tag
This inserts a line feed (start new line).
There is no closing tag required in HTML, but the closing slash is needed in XHTML.
<center> </center>
.... Center
alignment tag
You may also use ALIGN to align
a heading or paragraph:
<h1 align="center">Here is my centered heading</h1>
Alignment ends with the heading.
Note quotes around "center".
<p align="right">Now comes a long and boring paragraph, right aligned.
</p >
<div align="center"> Everything in here is centered until you come to </div>
This is useful to center
several paragraphs, heading, etc. at once.
Note: The default is left aligned.
align= may be followed by "left", "right", or "center".
Using CSS
you would accomplish this with <div
style='text-align: center'>
<blockquote> </blockquote> .... Blockquotes
For long quotes. The quote will be indented or italicized or otherwise
set off.
<pre> </pre>
.... Preformatted
text
Everything in between will appear exactly as you typed it - indenting,
paragraphs,etc.
Useful for quoted material, poetry, etc.
<hr />
.... Horizontal
Rule
This draws a line across your
page.
You may specify the length as a percent of the page
:
<hr width="70%" />
or a certain number of pixels, with or without an alignment:
<hr width="100" align="left" />
You may also specify the height (in pixels) by using
the SIZE attribute, and
make it solid color, or any other color (see next
section)..
<hr width="60%" size="6" noshade />
You will probably collect some fancy horizontal
rules for your pages
Ref: read Robin Williams The
Non-designer’s Design Book p. 11-42
Special text characters (e.g. @ and those used in French and Spanish) may be found at www.w3.org/MarkUp/Guide/Advanced.html
3. Colors and Fonts
<b> </b> .... The bold face tag
<I> </I> .... The italics tag
<u> </u> .... The underline tag
<sup> </sup> .... The superscripts tag
<sub> </sub> .... The subscripts tag
Using CSS these would be
accomplished with:
<span style= "font-weight: bold"> .... </span>
<span style= "font-style: italic"> .... </span>
<span style="text-decoration: underline"> .... </span>
<span style="vertical-align: super"> .... <span>
<span style="vertical-align: sub"> .... </span>
In general, it
is better to use <strong> .... </strong>
than <b> .... </b>,
and it is better to use <em> .... </em>
than <i> ....
</i>.('em' stands for emphasis.)
This is because readers for the visually
impaired can render 'strong' and 'em' but not b(old) and i(talics).
<font> </font> .... Font tags
These tags are used to specify a particular font
- size, face, color in the body.
Size,
face and color are the attributes (properties) you are specifying in the
font tag.
When the font tag closes, those
attributes end.
<font size="7">This is the biggest text available.</font >
<font size ="3">This is the default size for text .</font >
<font size ="1">This is the smallest text available.</font >
<font size
="+1">Increases
size by 1 unit</font >
Note: For headlines it is better (more reliable) to
use h1, h2, etc.
You may also specify the typeface - but the face must be available on the user's computer
<font
face="helvetica">This is in Helvetica.</font>
Note: Not all browsers support this, and different
browsers/versions may have
different faces available, or different names for
the same face (e.g. Times, Times
Roman, Times New Roman.)
face="Times, times, Times Roman, times roman, Times New Roman,
times new roman"
will look for these 6 faces (in that order), and
then go to the default face.
HW: Look at Mozilla Firefox, and Internet Explorer on the pc and Opera and Safari on the Mac browsers and see what type faces you find.
Look
at some web sites (one from a newspaper, one from a TV network,
one from a large e-tailer, and a couple that are "hip") and see how they handle fonts.
What fonts are readable and
popular for large amounts of text?
What headline fonts work
well with them?
Ref: Read Robin Williams: The Non-designer's Design p. 75-94
Using
CSS, font-size is changed with
<span
style="font-size: value"> .... </span> where value may be
For details, see the CSS notes or
http://www.htmlhelp.com/reference/css/font/font-size.html
Using CSS, font families are specified with
<span style='font-family: courier, Times, serif'> ... </span>
NOTE: These style
instructions can also go in heading or paragraph tags.
You may also combine these: <p style='font: bold italic 12pt arial'>..</p>
Finally, you may specify
colors. You should always try to use browser-safe
colors.
Colors are described by a
set of three hexadecimal numbers. Each
of the numbers is of
the form hh.
Since there are three such
numbers, the whole thing looks like hhhhhh.
Each of the h's is
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, or F.
The three numbers specify
the level of the Red, Green and Blue lights which
make up the whole color.
Here are some common
browser-safe colors:
Red #FF0000
Green #00FF00
Blue #0000FF
White #000000
Black #FFFFFF
The following list of colors
is in the transitional but not the strict DTD
There are also 16 widely known color names with their RGB values:
Black = #000000
Green = #008000
Silver = #C0C0C0 Lime
= #00FF00
Gray = #808080
Olive = #808000
White = #FFFFFF
Yellow = #FFFF00
Maroon = #800000 Navy
= #000080
Red = #FF0000
Blue = #0000FF
Purple = #800080 Teal
= #008080
Fuchsia= #FF00FF Aqua
= #00FFFF
If you wish your text to be
blue then you enter:
<font color="#0000F">Here
is my blue text. </font>
If you wish the background
of your page to be black (not recommended) and all
your text to be white, then
set them with:
<body bgcolor="#FFFFFF"
text="#000000">
Your body goes here
</body>
The # sign alerts HTML that a hexadecimal number is following.
HTML (Firefox, Internet Explorer and others) also recognizes a few color names:
Black, White,
Green, Maroon, Olive, Navy, Purple, Gray,
Red, Yellow, Blue,
Teal, Lime, Aqua, Fuchsia, Silver (see above.)
A complete set of browser-safe colors may be found at
www.lynda.com/hex.html (chart at www/lynda.com/hexh.html).
Ref: Read Lathrop The Way
Computer Graphics Works p. 1-18
Read Wyman Designing Web Graphics
on dithering and anti-aliasing
<BLINK> </blink>
.... Tag to make your code blink and
your professor cry.
Using CSS the color of type is set in style ="color:
blue" or using
style="color:
#0000FF" in span, heading, paragraph etc tags.
Background color is set similarly in the body
tag with
<body style="background-color: white"> etc.
4.
Lists <ul>
</ul> .... Unordered List tag (Unordered means not numbered). The list is indented, and you may nest lists to get
levels of indentation. If the
list is not bulleted then end each line with a <br />. <ul> My first item <br /> My
second item< br /> My
third item< br /> My
last item </ul> <li> .... List
Item tag If you want your list to have bullets, put
<li> in front of each item. The line
feed is inserted automatically before each <li>, so omit the <br />'s. <ul> <li>My first item </li> <li>My second item</li> <li>My third item</li> <li>My last item</li> </ul> <ol> </ol> .... Ordered List tag (Numbered lists) Ordered lists are numbered sequentially. Put an
<li> before each item. The numbers
and new lines are automatic. Ordered
lists may be nested, and you may mix ordered and ordered lists. <ol> <li>My first item</li> <li>My second item</li> <li>My third item</li> <li>My last item</li> </ol> You may also specify how an ordered list is
numbered/lettered (see the ListTypes program in the web site) or how an
unordered list is bulleted. 5. Links Absolute Links, or Links to Other Pages <a href="http://the_URL">Words
to Underline</a> The anchor
tag – absolute The text in between the two tags is underlined. When the user clicks on it the browser
transfers to the URL in the first tag.
NOTE: the quote marks are the usual ones –– not
facing in any particular way. <a href="http://www.simmons.edu/~menzin">My
Favorite Professor</a> This example (above) is an absolute reference. Notice that it gives both the protocol (HTTP – as
opposed to FTP etc.) and the complete address. Notice that the complete address is enclosed in
quotation marks. There is a convention that when a path name is
listed (as above) without a file name at the end, then the browser will look
for a file called index.htm or index.html. So your opening page should be named
index. There is also a convention that user directories
(those that start ~username) will have all
their public files in a directory called public_html. In other words,
when a viewer clicks on the text in the example, her browser will actually
get the file
www.simmons.edu/~menzin/public_html/index.htm In this case (the absolute URL) the URL completely defines where the browser
is to go. Links to Places on the Same Page <a href ="#NamedSpot">Words to Underline to go up or down the page</a> <a name ="NamedSpot">Where
link will go</a> The anchor tag – same page (using the NAME attribute) In order to link somewhere else on the same page you
need two anchor tags — <a name="ShortNameForTheSpot">Text to
link to</a> defines a name for the place you wish to go to. <a
href="#ShortNameForTheSpot">Text to click on to go there</a> does
the actual linking. Notice
that both the a name= tag and the a href= tag have the address in quotation marks. Notice the use of # inside the anchor where the linking is done ---this alerts the
browser to look for a named place, not an absolute or (see below) relative
reference. Your link may go either up or down the page. See the links8a.html and links8b.html
examples. You may also combine links to other pages and links
to named spots on those other pages.
For example, let us suppose that you have built a page at with the URL SomeComputer/MyBook/Intro.html And that somewhere in that
file you have a named anchor <a name="contents">Table of
Contents</a> Then, on some other page, if
you wish to link to the Table of Contents you would code: <a href="http://
SomeComputer/MyBook/Intro.html#contents">MyBook s Table of Contents</a> Notice that there is the usual anchor with an href
(in quotes) but that the #namedSpot comes at the end of the URL. Relative Links or Links to Other Pages on the Same Site <a href="OtherFileInSameDirectory.htm">Check Out My Other Pages</a>
In this case you will link to a different file (one
named OherFileInSameDirectory.htm). Relative links allow you to keep all related files
in the same directory or folder. If you decide someday to move the whole folder
to another computer or another spot on that computer, then the relative hrefs will still work, but
absolute ones will need to be re-typed. As usual, there are no spaces in URL file
names, and file names are case-sensitive. Relative references may be combined with named
anchors, too, as above. It is possible to do a limited amount of navigation
in a directory using relative URLs. Suppose that I have a directory (folder) named menzin and in it I have
sub-directories named cs101 and
html_programs. Further, suppose that my html_programs directory has a file called
fonts4.html In html_programs/index.html, a link to the fonts4
file is href="fonts4.htm" In cs101/index.html a link to hw.html is href="hw.html" To get to the html_programs/fonts4.html file from cs101/hw.html, I first need to go up to
the html_programs directory, and then to the fonts4 file. The ../ means
go up one level in the directory tree. So the link is href="../html_programs/fonts4.html" The ../ gets us from the cs101 directory to the menzin directory. From there we go to the html_programs directory,
and in it to the fonts4 file. We will see this again with graphics links. You may insert a link to your email with: <a href="mailto:menzin@simmons.edu">Or contact me by
e-mail></a> 6. Tables In HTML tables are used for creating charts and
tables, but are
no longer recommended for controlling
page layout. Traditionally, a table with two columns
(which need not have the same width) is one way to create the familiar side-bar
with links to other parts of a web site. Today, using CSS is the preferred way ato acheive this result. Position on the page/page layout may be
controlled with CSS. This is discussed
in the CSS notes. Controlling position
with CSS works better for pages which may be 'read' in many formats (e.g. on
hand-held devices), but has the disadvantage that an external style-sheet is
not always downloaded from a web page (i.e. the layout is not saved). It is the preferred method for laying
out pages. <table> </table> .... The
Table Tag Every table begins and ends with these tags. <tr> </tr> .... The Table
Row Tag <tr> marks the
beginning of a row's description. <table> <tr>
The description of the entries in the
first row goes here
</tr> <tr>
The
description of the entries in the second row goes here
</tr> <tr>
The
description of the entries in the third row goes here
</tr> </table> Notice that I have indented the table rows. Table descriptions can get complex (you can
even put a table inside another table!) and it is a good idea to do this! <th> </th> .... The
Table Header Tag <td> </td> .... The Table Data Item Tag Each entry in a table is either a header (which is
in bold) or a data item. The beginning and end of each entry is surrounded by
these tags. See the listing for tables10b.html (Remember that file names are
case-sensitive!) You may specify width
in <table> or in each column. For the whole table (specified in the table tag): <table
width="200"> .. </table>The table is 200 pixels wide. For a column (specified in a table cell): You may specify alignment
within each cell or row. <th
align="left"> </th> A th or td or tr may be aligned left or right
or center. Or you may specify that all the cell elements be aligned a
certain way by putting the table inside div tags: <div
align="center"> <table> : : </table> </div> You may align a table for purposes of wrapping text. <table align="left"> .. </table>
Puts the table on the left side of the page,
and the text to the right. The only choices are left and right. You may put a caption on the top or bottom
(default) of a table: <table> <caption align="top">Data for Our Fascinating
Study</caption> <tr> : : </tr> </table> See the various tables pages
for examples, and examples of coloring both all the background and individual cells. <table bgcolor="red"> .. </table> An entire table with a red background <td bgcolor="blue"> </td> A blue cell <table border="5" bordercolor="green"> ..
</table> For St. Patrick’s Day. To create space around your
cell contents: <table cellpadding="5">
Cellpadding
is the space between the edge of the cell and its contents. <table cellspacing="5"> Cellspacing
is the space between cells. Sometimes you want a cell to stretch across several
columns (e.g. for a heading) or down several rows.
<tr
align="center"> <th>This
is the first column.</th>
<th
colspan="3">This occupies the next 3 columns.<th> <th>This
is the last column</th> </tr> If you are doing something complex, it is a good
idea to make a simple sketch of it before you start coding. That way when you have a column or row span
you will remember which cells have already been taken described. See tables11c.html Remember: If
you have an empty cell and you want it to be colored, put a <br /> in it. 7. Inserting
Graphics: Please read
the pages I e-mailed you about gif's and jpeg's and about large files. <img
src="fileLink.ext" /> The
Image Tag Let us suppose you wish to insert a clip art file
that is in the same directory as this html page, and that the file is named
StopSign.gif <img
src="StopSign.gif" />Here is the text that goes next to it. You may refer to the file which holds your image by using absolute or relative
addressing (as for links). <img src="StopSign.gif" height="100" width="100"
/>What a big stop sign! Obviously, if you change the height and width to a
different ratio than your original gif or jpeg you will distort the image
(which you may choose to do.) Inside the img tag you may align the image to go on the left (or right) of the accompanying
text. <img src="StopSign.gif" align="left" />I have a
long explanation that I want near the icon, and which is to the left of the icon. For simple images, I may align
it top, middle or bottom with my line of text. Whenever you see this sign
<img src="StopSign.gif" align="middle" />
you should stop. The hspace attribute will
place space between your text and your graphic. <img src="StopSign.gif" align="left"
hspace="20" alt="Stop sign">Here goes lots of text The <br clear="all" /> will
clear all alignments.
<a href="http://web.simmons.edu/~menzin/cs101"><img="smiley.gif" alt="smiley face" />To
the source!</a> Finally <body
background="awfulStuff.gif"> will cause the entire
background of your page to be tiled with the gif you specified. NOTE: You should always include the alt attribute <img
src="stopSign.gif" alt="stop sign" /> to get a written description
for visually impaired users (and those too impatient to wat for the image to load) and for
search engines.
In HTML this was done with the type
attribute in the <ul>or <ol> tag. The type attribute for lists is not supported in XHTML.
Instead, you may set the list–style–type and list–style–image. This allows you to control how ordered lists are enumerated (e.g. upper case letters, numbers, etc.) and the shape and particular bullets used for unordered lists. This is discussed further in the CSS notes
menzin
/
\
cs101
html_programs
/
|
\
/
\
index.html
hw.html
bookmarkJan00.html
index.html
fonts4.html
A table has rows (which run left to right)
and columns (which go up and down, just as on a building).
A table is described by reading across the first
row, then reading across the next row, etc.
All rows of a table are of the same width.
<table width="70%"> .. </table> The table takes us 70% of the page.
<th width="20%" > .. </th>
This column is 20% of the width of the table.
You may do this for some or all columns (once for each column, typically in the first row)
< width ="50> ... </th> This column is 50 pixels wide.
<td valign="top">
</td> A th or td or tr may be
vertically aligned top, middle,
bottom.
At the place where you wish
the image to go you code:
You should be warned that the align tag does not always work the way you
wish it to (especially when you have a lot of text to go
next to your image.) Using CSS (or a table) for layout is a more reliable
way to control the appearance of your page. See InsertingGraphics.html
for examples.
You may (of course!) include
the image in an anchor tag: