1. Absolutely Essential
< !DOCTYPE…>
The DOCTYPE preprocessor information (needed for XHTML) and
<html > </html> …….. The HTML tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!DOCTYPE html>
<html lang=’en’>
<meta charset="UTF-8"> AFTER the head tag
Copy one of the two above into the start of your page.
Either way your document must end with </html>
Everything in between the
<html> and </html> is interpreted as (X)HTML.
As you saw just above, in HTML5 you
must specify the lang attribute, but in
XHTML it is optional.
<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.
Alignment:
The
following have been deprecated in HTML5 and XHTML5, although the they are still
available in HTML4.01 and XHTML1.
<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”. Other
blocks
(paragraphs, etc.) also allowed you to set the alignment.
But
why use something which is not available in HTML5 when there is a perfectly
good way to align items which works in all the versions of HTML and XHTML…
<p style=”text-align:right”>
Now comes a long and boring
paragraph, right aligned.
</p >
<div style=”text-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
for everything except headings, where the default
is
center.
text- align:
may be followed by left, right or center.
In addition to controlling layout, a common use of
text-align is to right-align a
column of
numbers.
<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
3. Colors and Fonts
<b> </b> …….. The
bold face tag
<I>
</I> …….. The italics tag
<sup>
</sup>…….. The superscripts tag
<sub>
</sub>……. The subscripts tag
The following
is no longer available in HTML5:
<u> </u> …….. The
underline tag
See below for how to do this with
CSS.
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 manipulation
Fonts have a font-face (e.g.
Arial, Courier, etc.), a font-size, font-weight (e.g. bold), a font-style (e.g.
italic).
Text attributes are used to
set alignment (text-align), color (text-color) and decoration (text-decoration
can have the values underline, overline, line-through or blink).
To have a paragraph in bold
red with the Arial font and in the font three times as large as usual you would
write:
<p
style=”font-face:Arial; font-weight:bold; font-size:3em;text-color:red”>
…</p>
The
<font> tage of XHTML1 and HTML4 is no longer available in (X)HTML5. Accordingly, you may no longer use code such
as:
<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,
Opera and Internet Explorer on
the pc and 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 absolute -
e.g.
10pt, or relative to the previous – e.g. 120%, or
specified
with words such as xx-small, thru
xx-large.
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>
Colors
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 of XHTML1 and is
also available for styling with CSS (hence in HTML5).
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:
<span
style=”text- color:#0000FF”>Here is my blue text. </span>
The # sign alerts HTML that a hexadecimal number is following.
HTML (Netscape, Firefox and
Internet Explorer and probably the other browsers)
also recognizes a few color
names:
Black, White,
Green, Maroon, Olive, Navy, Purple, Gray,
Red, Yellow, Blue,
Teal, Lime, Aqua, Fuchsia, Silver (see above.)
You may no longer say
<body
bgcolor=”#FFFFFF” text=”#000000”>
Your body goes here
</body>
As all attributes of the body tag have been removed in HTML5.
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>
It is also possible to style the bullets in a list
using
<ul style=”list-style-type:none”> and the <li>, </li>
The value of none in list-style-type will give no
bullets. Other possible values are disc,
circle (the default) and square.
<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 using list-style-type.
For example,
<ol style=”list-style-type:upper-alpha”>
Will produce a list with items enumerated by A, B, C
etc.
This is
discussed further in the CSS notes.
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”
id=”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.
In XHTML1 and in HTML4 you did not need the id= part, but beginning in
HTML5
you need the id= and further if there is both
a name (for legacy browsers) and an
id then they have the same
value.
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
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 to achieve 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.
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.
<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.
Beginning with
HTML5, all attributes of tables (border, cellspacing, cellpadding, and width. etc.),
table rows and table cells must be set through CSS.
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 style=” width:70%”>……</table> The table takes us 70% of the page.
<table
style=”width:200”>……..</table> The
table is 200 pixels wide.
For
a table column (specified in a table cell):
<th
style=”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)
<th
style=”width:50”>…..</th> The
column is 50 pixels wide.
You may specify alignment
within each cell or row.
<th
style=”text- align:left”> </th>A
th or td or tr may be aligned left
or right or center.
<td style=”vertical-align:top”>
</td> A th or td or tr may be vertically aligned
top,
middle, bottom.
Or you may specify that all the cell elements be aligned a
certain way by putting the table inside div tags:
<div
style=”text-align:center”>
<table>
:
:
</table>
</div>
You may align a table for purposes of wrapping text.
<table style=”text-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 style=”text-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 style=”background-color=”red”>……..</table>
An entire table with a red background
<td style=”background-color:blue”>
</td> A blue cell
<table style=”border:5;border-color=”green”>……..</table> For St. Patrick’s Day.
To create space around your
cell contents:
<table style=”cellpadding:5”> Cellpadding
is the space between the edge of the cell and its contents.
<table style=”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
style=”text-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 At the place where you wish the image to go
you code:
<img
src=”StopSign.gif” />Here is the text that goes next to it
You may refer to the file 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 stlye=”text-align:left; border:0” />
NOTE: As of HTML5 you are supposed to always set the
border. While the border attribute may
still be used inside the <img> tag, it is preferred to set the border
with CSS, as above.
I have a long explanation that I want near the icon,
which is to the left of the icon.
For simple images, I may align
it top, middle or bottom with my line of text, by styling the vertical-align
property.
Whenever you see this sign
<img src=”StopSign.gif” style=”vertical-align:middle;border:0” /> you should stop.
The hspace attribute will
place space between your text and your graphic.
<img src=”StopSign.gif” style=”text-alig:left;
hspace:20’>Here goes lots of text
The <br style=”clear:both” />
will clear all alignments. 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 a table for layout is a more reliable
way to control the
appearance of your page. See the CSS Notes for more information.
See InsertingGraphics.html
for examples.
You may (of course!) include
the image in an anchor tag:
<a href=”http
://web.simmons.edu/~menzin/cs101”
><img=”smiley.gif” />To
the source!</a>
Finally
<body style=”background-image:url(“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 wait for the
image to load) and for
search engines.
