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

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

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,

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 –

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:

<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.

<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.

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

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.