Scribd
Upload
64 views

Basic HTML Tags v13

The document discusses HTML tags and their uses. It covers essential tags like <!DOCTYPE>, <html>, <head>, <title>, and <body>. It also discusses comment tags, headings from <h1> to <h6>, and differences between HTML, XHTML, and HTML5.

Uploaded by

dika dika
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
64 views

Basic HTML Tags v13

The document discusses HTML tags and their uses. It covers essential tags like <!DOCTYPE>, <html>, <head>, <title>, and <body>. It also discusses comment tags, headings from <h1> to <h6>, and differences between HTML, XHTML, and HTML5.

Uploaded by

dika dika
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 17

Basic HTML and XHTML Tags v12 8/15/10

By Margaret S. Menzin © May be used for non-commercial purposes with credit.

Note: About compatibility of HTML and XHTML and 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
Column span and row span tags

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.
Also, all styling is consistent with HTML5. For example, the <font>and <align> tags are
obsolete in HTML5 and have been replaced with CSS (as a separate sheet or in-line styling.)
 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 XHTML1,
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). HTML5 may be validated at
http://validator.w3.org/check. 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.)
1. All tags and attributes are in lower case.

2. Certain tags are “empty” and in HTML did not require a closing tag- notably <hr>,
<br>, <img>. In XHTML all tags must be closed. So, for example <br />.

Empty tags should be closed in the minimized format, and with a space before the
slash: <hr />, <br />, <img src=”myPhoto.jpg” alt=”me!” />

In HTML5, because many people learned to close empty tags when they wrote
XHTML1, it is permitted but not required to close empty tags. In XHTML5 (and
XHTML1) closing empty tags is required. The same is true in polyglot
HTML5/XHTML5. Accordingly I recommend closing all empty tags.

3. HTML is casual about not requiring that some tags be closed – e.g <p>.
XHTML requires that all tags be closed. If you have an empty tag which may, in
other pages, have content, you are advised (by w3c) not to use the minimized
format. That is, use <p></p>, rather than <p /> because some old browsers may
handle the minimized form incorrectly.

4. All attribute values must be in quotes – e.g. color=”black”, size=”3”

5. You must use a <!DOCTYPE…..> before your <html> tag. There are basically five
good and legal choices: See the guidelines below for more information.

For XHTML1.0 Strict


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For XHTML1.0 Transitional


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For XHTML1.0 Frameset (not recommended)


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

For XHTML5 (does not yet support namespaces)


<html xmlns='http://www.w3.org/199/xhtml'
xml:lang='en'>

For HTML5 --- and the <meta ….> line is optional but recommended
and goes after the <head> tag.
<!DOCTYPE html>
<html lang=’en’>
<meta charset="UTF-8">

XHTML1.1 is (very) strict and less popular than XHTML1.0. There are
doctypes for HTML4.01, but not always used and will be inferred if
omitted. . Note that XML 2.0 was published in January 2006 and put on
hold in 2009 so that resources could be devoted to HTML5. More
importantly, HTML5 is in the works, so please read Coming
Attractions:HTML5 and XHTML5 in these notes.

6.If you are using the strict DTD (as opposed to the transitional) then you must include
an XML Namespace. Writing in English you might put

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

More complete information about compatibility with XML agents can be found at
http://www.w3.org/TR/xhtml1/#guidelines

7. HTML5 and XHTML5 are coming. Briefly, HTML5 is expected to be completely supported
by 2012, but is supported by all browsers except IE (and IE9 will support it.). HTML5 may
be written as either HTML or XHTML, and the w3c recommends that most authors use
HTML.
a. If you wish to write HTML5 as HTML you will begin your pages
<!doctype html> or <!DOCTYPE html> followed by :
<html lang=’en’>
<head>
<meta charset = ‘UTF-8’>
The last line is optional and will be inferred if missing; it is recommended that
you include it.
Pages that begin this way will always render with the most current standards.

b. If you wish to write HTML5 as XHTML you may begin your pages

<?xml version="1.0" encoding="UTF-8"?>


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
but the s3c recommends that you omit the < ?xml …> line.
In both case you may, of course, choose a different charset.

Some features of HTML5 are already supported in popular browsers – e.g. the
canvas tag for bitmaps. IE8 (and presumably other browsers) will support many
other features.

You may check out new features at http://www.w3.org/TR/html5-diff/ and


you should stay on top of current developments at
http://www.w3.org/html/wg/html5/

Reading:
1. By the time you finish the HTML coding you should have read all of Robin Williams’
The Non-Designers Design Book. It’s a fabulous little book, on reserve in the library.
You will want to read parts of it more than once. Many of the ideas are also found at
www.peachpitpress.com

2. There is also assigned reading from two other books (on reserve):
Olin Lathrop’s The Way Computer Graphics Works and Lynda Wyman’s Designing
Web Graphics (See also www.lynda.com). I suggest you browse in these books
beyond what is assigned.

3. The vulgarly titled http://www.webpagesthatsuck.com/ has useful chapters on fixing both


text and graphics problems and wonderful links to many sites. Other good links will
be found on the home pages for this course and for CS101.

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

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 places in the bookmarks and at www.w3.org/MarkUp/Guide/Advanced.html

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

A complete set of browser-safe colors may be found at


www.lynda.com/hex.html (chart at www/lynda.com/hexh.html).

If you wish the background of your page to be black (not recommended) and all
your text to be white, then set thebackground with the body selector and
use the background-color property and the text-color property in your style
sheet. (See CSS Notes.)

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.

Ref: Read Lathrop The Way Computer Graphics Works p. 1-18


Read Wyman Designing Web Graphics on dithering and anti-aliasing

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

menzin

cs101 html_programs

index.html hw.html bookmarkJan00.html index.html


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:[email protected]”>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.

You might also like