BASIC WEBSITE HTML CODES

O N T H I S P A G E :
• HTML Codes & Text Formats • LINKS • URL Elements • PHOTO CODES • MUSIC CODES • "XMP" Page Looks Like "File Manager" • MARQUEE - Scrolling Text • FAVICON: "Tab Icon" • BODY CODES - Set Font/Link/Color, in one spot • Disable Right-Click & Copy/Paste of Test	• "CSS/style" & Rollover Codes • REDIRECT automatically to New URL • TABLE CODES • Highlighting Text • BUTTON: "Add To Favorites" • Embed YouTube Videos • AMPERSANDS & Special Codes

When you're writing your web page, you use a template called a "File Manager". It will look something like this:
<html> <head> <title>untitled</title> </head> <body> [Put your text here]

</body> </html>

Here's what to do with it:

<html> [At beginning of webpage. Signals computer to read the HTML codes. You don't need to change anything here.]

<title> My Web Page </title> [Type in your Title here. It will display in the Title Bar at the top of the window]

</head> [Closes the "Head" portion of your File Manager page]

<body> [This is the section that will show up on your webpage. Text, photos, links, and everything else]

<center><h1>WELCOME TO MY WEB PAGE </h1></center> [Your Headline. "H1" is a large type set. Ranges from "H1" to "H6", which is the smallest of the Headline typesets]

[YOUR TEXT GOES HERE]

</body> [Closes the "Body" section of your File Manager page]

</html> [Closes the webpage File Manager]

HTML CODES

<b> </b> ["Bold" - changes type to "bold". NOTE THE FORWARD SLASH "/" OF THE SECOND CODE: This goes at the end of the word or sentence you want to be "bold". This applies to other HTML codes, as shown below.]

<i> </i> [Italics]

<u> </u> [Underline]

<big> </big> [Makes text display at next larger size. Can be further increased as follows: <big><big><big> TEXT </big></big></big> will produce text 3 font sizes larger (This sometimes depends on the receiving computer: some won't respond in exactly the same way. It's usually better to specify a "Font Size" like this: <font size=3> </font size> However, the "big" code is a quick way to enlarge the text.]

<small> </small> [Makes text display at the next smaller font size]

<center> </center> [Makes text display in the center of that line]

<font face="times new roman"> </font face> [Selects the font style you wish the text to display in]

<font size="3"> </font size> [Selects the type size you wish to use. Sizes range from "1" to "7".]

<font color=red> </font color> [Selects the color of the type you wish to use. NOTE THAT YOU DO NOT NEED TO SPECIFY A FONT COLOR FOR "BLACK", as this is the default color]

NOTE: FONT FACE, FONT SIZE, AND FONT COLOR ARE NOT NEEDED IF YOU ONLY WANT THE DEFAULT FONT STYLE.

Paragraph Breaks

<br> ["Break". Makes the following text begin on the next line. Multiple "br" codes will produce additional spaces between lines of text]

<p> [Paragraph. Produces a one line space between paragraphs. Unlike "br", more than one "p" will not produce additional spaces]

<hr color=000000> [Hard Rule. Places a line between paragraphs]

<body bgcolor=yellow> [Chooses the color of the background on your webpage. Colors include: RED, MAROON, YELLOW, ORANGE, GREEN, OLIVE, BLUE, NAVY, GRAY, PURPLE, TEAL, WHITE, BLACK, LIME, MAGENTA, CYAN. Also, there are numerous alpha-numeric codes for finely differentiated hues.]

INDENTATION & DROP-DOWN LISTS

<dd> [Indents a line]

Creating a "Drop-Down" list or paragraph:: Using this format, the indented line or lines will "wrap-around", maintaining the indent in subsequent lines, as displayed here. The tags for this code are as follows:

<dl> [At beginning of Section with Drop-Down paragraphs.] <dt> </dt> [Un-indented Header line within the "dl"] <dd> </dd> [Indented line; WRAPS-AROUND when put in this "dl" format] </dl> [Ends Drop-Down Section]

SUPERSCRIPT

<sup> </sup> Displays text in Superscript. Example:

^{1 Cor. 14:1} Follow after love, and desire spiritual gifts so that you may prophesy. [The verse number is shown in SUPERSCRIPT [font size is also reduced in this example].

JUSTIFY TEXT BODY

<P align="justify"> Allows text to be "justified:" aligned evenly on the right margin. This has to be repeated after any font change, i.e., "p", "h1", "font color", etc.

PUT A LINE THROUGH YOUR TEXT

<strike> at beginning, and close with </strike>.

ADDITIONAL CODES

LISTS:

1: BULLETED LIST

<ul> [Unordered List. List items are displayed with a bullet (dot) in front of them. You must use the following code for each line following this code:]

<li> [List Item. This goes at the beginning of each bulleted line. Place a "<p>" after each line to create a space.

</ul> [CLOSE Unordered List. Remember to end the Unordered List with this code]

EXTRAS <ul type="circle"> - Uses clear-center circles for bullets
<ul type="square"> - Uses squares for bullets.

2: NUMBERED LIST - "ORDERED LIST"
<ol> [Ordered List - Places consecutive numbers in front of each line item. You must use the following code for each line following this code:]

<li> [Line Item. Again this goes at the front of each line to be numbered. The proper consecutive number will automatically display on the page.]

</ol> [Closes the Ordered List. ]

3: NON-BULLETED LIST
<dl> - [NON-BULLETED LIST - items will be indented, without numbers or bullets in front of the items.]

<dd> - [Use "dd" List Item codes instead of "li".]

</dl> - [Closes the Non-Bulleted List]

<blockquote> [INDENTS TEXT. Creates an indentation on the left and right of the affected paragraph.]

</blockquote> [ends the blockquote indentation]

BOTTOM

T O P

"XMP"

PAGE DISPLAYS THE WAY IT LOOKS ON "FILE MANAGER"

If you have symbols and "tab" spacing that would be difficult to encode, you can display the text as it appears in your File Manager template by using the "XMP" tag:

<xmp>

This plain text is displaying as it appears on the File Manager. It allows the display of TAGS ( <font> <body> <table>, etc.) in the document. The font will appear as basic text. Keep your lines of text short (hit enter/return every few words), or it will go beyond the frame. Place a closing tag at the end of your "XMP" display section: </xmp>

BOTTOM

T O P

LINKS:

<a href="http://www.yahoo.com"> YAHOO </a> Creates a HYPERLINK to the website you choose. Here you can see "http://www.yahoo.com" within the quotes of the code. The word "YAHOO" will show up in blue underline on the web page. The viewer can click on this to go to that site. NOTE THE FORWARD SLASH "/A" AT THE END:

"</a>"

TITLE DISPLAYS UPON ROLLOVER OF YOUR LINK::

<a href="http://www.yahoo.com" title="Yahoo Log In Page">Yahoo.com</a>

In the above example, "Yahoo Log In Page" displays upon mouse rollover of the link.

LINK TO ANOTHER SPOT ON THE SAME PAGE:

At Beginning Spot (Where Link Will Appear):

<a href="#answer"> Go Direct To Article On Middle Of Page </a> At "Destination" Spot:

<a name="answer">Midpage</a> Article NOTE: The "Go Direct To Article On Middle Of Page" in the first code, will be the hyperlink that the viewer will click on. It will take him to where the SECOND CODE is: "<a name="answer">". In this case, it has been positioned at an article in mid page. "Midpage" is the beginning word of the linked location, and the "close" code "</a>" can be embedded into the first word or phrase as shown here.

BOTTOM

T O P

* * * * *
URL Elements

Google: "android" url "root relative" offline html - 122918

"Possible" terms for URL elements:

protocol://server.domain/path[/resource

-
"ROOT RELATIVE" URL
Work In Progress - 122918

URL's within a website (in which the root of the url is not included)

Root Relative:
<a href="/directoryInRoot/fileName.html">link text</a>

"Fully Qualified:"
<a href="http://www.smithsite.com/directoryInRoot/fileName.html">link text</a>

there are three types of filepaths: absolute,…document-relative,…and site root-relative.

…An absolute path is the full URL…to a file or asset.…These are always used…when linking to a page outside our domain.

Root Relative: If the path starts with ../ it means, “go up one folder from where I am and then go from there.”

Document Relative: aka "bookmarks: These are links to locations within the page

…

filepath
filename
query string
URL paths (root-relative, absolute and even relative)

* * * * *
LINKS IN PHOTOS

Hotlinked photo with the default border around it.

Hotlinking a photo image places a highlighted border around it (to identify it as a link).

To link a photo WITHOUT a highlighted border, use border="0" as follows:

<a href="LINK.html" target="_blank"> <img src="../photos/MyPic.jpg" border="0">

Hotlinked photo with no highlighted border.

* * * * *

BOTTOM

T O P

"REDIRECT" LINKS

To have a webpage automatically switch to ANOTHER webpage (redirected) as soon as it's been logged-on to, use the following code:
<html> <head> <meta http-equiv="REFRESH" content="0; URL=http://www.myotherpage.com"> </head> </html> In the above code, you'd change 0 to the number of seconds you want to delay the redirect. If you changed it to 5, the redirect would be delayed for 5 seconds. You can redirect to ANY other URL, such as another page on the same site, or a different webserver/port on the same server, as the examples below show:
<meta http-equiv="REFRESH" content="5; URL=mynewhomepage.html"> <meta http-equiv="REFRESH" content="1; URL=https://webmail.mysite.com:8080/cgi-bin/webmail.cgi"> TO "REFRESH" THE SAME PAGE, just leave out the URL, as shown below:

E-MAIL LINKS:

<a href="mailto:yourname@yahoo.com"> EMAIL ME AT: yourname@yahoo.com </a> ["EMAIL ME AT: yourname@yahoo.com" will display on your webpage, providing a link by which they can send an email. It's a good idea to have the email address as part of the link text so they can copy & paste the url manually if necessary.]

BOTTOM

T O P

FAVICON: Tab Icon Code

This is to make an Icon appear as a symbol beside the tab identifying your web page.

Use the below code between the <head></head> :

<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">

•NOTE: The ".ico" image must be online, with the code directing to the ".ico" image on your File Manager (or external website). It won't show if directing to an image on your computer (as when opening a copy of the HTML page "offline" from your hard drive).

CREATE AN ICO IMAGE FOR A FAVICON:

Open an existing JPEG image file in "PAINT" (or create your own image from scratch).
Size the image so that it is a perfect square. I start with Attributes > Width: 300 x Height: 300 (This will have to be reduced when you're done. For now, a larger working area makes things easier).
Once you have created the image you want, click Image > Stretch/Skew > Horizontal: 15(%), Vertical: 15(%). This makes the image small enough to work as a favicon.
Save it as a bitmap ("bmp") THEN right-click on the image's filename and rename the file extention ".ico".
(Alternately, you can use an ICO GENERATOR such as favicon.htmlkit.com/favicon.)

BOTTOM

T O P

BODY BACKGROUND CODES

LINK COLOR CODES

<body bgcolor="#000066" body text="#ffffff" link="#ffff00" vlink="#ffcc00" alink="#ff0000"> "LINK" is your default link color. (This code will affect ALL links on the page - instead of having to use a "font color" code for each link).

"VLINK" is the color for a visited link.

"ALINK" is the color for an active link. (Active means the color the link turns when being clicked.)

"Body Text" is the default color for your fonts.

"BGCOLOR" is the background color for your page.

Background Image and Color Codes

Use a Background Color ALONG WITH the photo wallpaper - so text will show up if the gif doesn't come through:

Example:

<body background="photos/wlppr_Hrzn_BlkMutSTR.jpg" bgproperties="fixed" bgcolor="#000066" text="#ffff00" link="#ffffff" vlink="#ccffff" alink="#ff66ff">

It's a good idea to set the BGCOLOR attribute of the BODY tag to the same color as your background graphic - otherwise the text may be hard to read on the white background if the background graphic is still loading or the viewer isn’t loading graphics while they surf. White text on a white background isn't the best web layout!

NOTE: bgproperties="fixed" doesn't work on Firefox or Chrome. Use the following code for greater universality in applying "fixed" background images (also works in "Explorer"):

<body bgcolor="#000066" background="photos/wlppr_Hrzn_BlkMutSTR.jpg" text="#ffff00" style="background-attachment: fixed;">

OTHER BODY CODES

DISABLE HIGHLIGHTING OF TEXT. PREVENTS COPYING:

Place this code within the BODY tag:

ondragstart="return false" onselectstart="return false" onContextMenu="return false" • ondragstart="return false" disables LEFT clicking.
• onselectstart="return false" disables highlighting text using Ctrl+A or Edit/Select All.
• onContextMenu="return false" disables "Context Menu", a menu that shows with certain browsers when you right-click on a page.

BOTTOM

T O P

BLOCK COPY & PASTING OF TEXT ON YOUR WEBSITE

Include the following code at the end of the <body> </body> tags:

ondragstart="return false" onselectstart="return false" onContextMenu="return false">

EXAMPLE:

DISABLE RIGHT-CLICKING ON YOUR WEBSITE

Paste the following within the <head> </head> tags, after the meta codes.

BOTTOM

T O P

CSS & "ROLLOVER" LINK CODES

• To Get CSS Codes From An External File

For "Rollover" LINK CODES, place the following block of code AFTER </head> and BEFORE <body>.

[Note: "Hover" not supported by Netscape browsers prior to version 6.]

CSS CODES: For General Text
IMPORTANT: The target text is labeled as follows:
<span class="subtitle1"> TEXT </span>

SAMPLE CSS CODES:

These go within the "<head> </head>" tags:

Example 1:
For a yellow headline:

OTHER OPTIONS:
•{ font-family: arial; }
•{ font-size: 16px; } 48px=7, 32px=6, 24px=5, 18px=4, 16px=3, 13px=2, 10px=1
•{ font-size: larger; } ["larger" is best - enlarges every font size]
•{ font-style: italic; }
•{ font-weight: bolder; }
•{ background: #ff0000; } Highlights link with chosen color.
•{ text-decoration: underline; }

Example 2:
For yellow font (that stays the same size as the text around it)

CSS CODE FOR EVEN-LINE-SPACING WHEN USING SUPERSCRIPT
www.cs.tut.fi/~jkorpela/www/linespacing.html

When using SUPERSCRIPT, this can cause unevenness in the lines of text. The superscript pushes the space of the line it is in, and the non-superscript lines have a narrower space. In order to make them appear uniform, paste the following code below </head>:
 <style type="text/css"> sup, sub { vertical-align: 0; position: relative; } sup { bottom: 1ex; } </style>

BOTTOM

T O P

Access Your CSS Codes From ANOTHER FILE:

Put your CSS codes on ONE separate file - so you don't have to place them on each page!

Create a TEXT DOCUMENT with the CSS codes that would normally appear within the <head> </head> tags.
Change the file extention to ".css" - e.g., "My_CSS_Codes.css"
Then place this code within the <head> </head> tags of each article:
<link href="My_CSS_Codes.css" rel="stylesheet" type="text/css">
Thats all. Use the SAME "<span class="ltcolor1">" codes for the sections of text you want affected that you would normally use if the codes were all in the <head> </head> tags.

More: www.echoecho.com/csslinks.htm
More on "style" type codes: www.tizag.com/cssT/font.php

BOTTOM

T O P

PHOTOS AND GRAPHICS

<img src="http://www.mysite.com/photo_sunrise.jpg"> [Displays a photo image from your files on the selected spot of your web page. Size and positioning are determined by additional codes as follows:]

<img src="http://www.mysite.com/photo_sunrise.jpg" height=300 width=600 align=left hspace="11" vspace="11" alt="Glen Island at Sunrise"> "Height" and "Width" determine the size of the displayed image.
It's usually best to use only one attribute ("height" OR "width") and the unspecified dimension will display in correct proportion.
"Align" places the photo at left (or right), and allows the text to wrap around the image neatly.
"hspace" creates a horizontal space between picture and any surrounding text.
"vspace" creates a vertical space between picture and surrounding text.
"Alt" lets you choose a phrase that will display when the cursor passes over the image, (or will show up in the frame if the image should fail to download).

PHOTOS FROM OTHER FILES

This lets you get a photo from your "photo" folder, without using the entire URL. This is useful if you keep a copy of your website on your hard drive, for the link will work in any file the site is installed on.

GETTING PHOTOS FROM A "HIGHER" FOLDER

PRECEDE your "img" code with "../". This directs the browser UP one level. In the following case, the photo, "image_sunrise.jpg", is in a folder ONE LEVEL UP from the folder that contains the article.

Lets say the article is in the folder "WEB_Articles". "WEB_Articles" and "photos" are in separate folders but in the same directory, so the code only has to go UP ONE LEVEL to find it:

If the photo folder were up two or more levels, you would add the additional "../" to prefix the code:

<img src="../../photos/image_sunrise.jpg" width=350> [up TWO levels]

BOTTOM

T O P

MUSIC

The following is a basic code for having a music file play automatically when your webpage is opened. It can be placed within either the <head> or the <body> tags:

<bgsound src="audio_folder/music.mp3">
(Plays one time [the default loop number] automatically when page is opened).

<bgsound src="audio_folder/music.mp3" loop="3">
(Plays three times when page is opened.).

<bgsound src="audio_folder/music.mp3" volume="-1500">
(Plays at about half the full volume. "0" is maximum, "‑10000" is minimum [although anything below "‑3000" is pretty much silent]).

CODES: Parameters that can be set within the "bgsound" tag:

VOLUME="n": Determines the loudness of the background sound. Values may range from -10000 (weakest) to 0 (loudest). (Not supported by Apple/MAC.)
LOOP="n": Specifies how many times the sound will repeat.

BOTTOM

T O P

MARQUEE:

Scrolling Text Line

The "Marquee" tag let's text scroll from right to left.

A BASIC "MARQUEE" CODE:

<marquee border="0" bgcolor="#cc0000" width="100%"> <font face="comic sans ms"> <font color=white> <font size=4><B> Be Sure To Check The Main Index For Current Articles </marquee></font> </b> You can include images ("IMG SRC") tags into the MARQUEE code:

<MARQUEE> Hi There! <IMG SRC="photo1.gif" HEIGHT=33 WIDTH=82> </MARQUEE> By default MARQUEE has a WIDTH of 100%. However, if you set the width to less than 100%, the marquee might meld with the surrounding text.

LOOPING: INFINITE, or FIXED NUMBER; and MAKE TEXT SHOW AFTER LAST LOOP
LOOP sets how many times the marquee should loop. (The text loops INFINITELY if you don't use the "LOOP" code.)

This code creates a marquee that loops twice:

<MARQUEE LOOP=2> Hello </MARQUEE> The problem with LOOP is that THE TEXT DISAPPEARS after the last loop. To keep the text visible after the final loop, use "BEHAVIOR=SLIDE":
<MARQUEE LOOP=2 BEHAVIOR=SLIDE> Hello </MARQUEE> MARQUEE background color is set as follows:
<MARQUEE BGCOLOR=YELLOW> Howdy there! </MARQUEE> [More from http://www.htmlcodetutorial.com/_MARQUEE.html]

BOTTOM

T O P

TABLES

Tables allow columns to be created on the page.

Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.

(NOTE: PHOTOS affect the size of a Table: If a table overlaps the screen, check that all IMAGES are smaller than the desired table width.)

ALSO: Watch for LENGTHY URLs - any "unbroken" word strings - will push the table border beyond the screen.

<table border="1" width="100%" cellpadding="7"> The "border" specifies the width of the line surrounding the table. ("0" will create an "invisible" table, for a "column" effect. The "width="100%"" determines the size across the screen.

CELLPADDING is the space between the cell contents and the border.

CELLSPACING is the width between the cells.

ALIGNING A TABLE

<table align=right border="3"> ALIGN: "right", "center", or "left" codes placed IMMEDIATELY AFTER the word "table" in the TABLE code will align it as indicated. Text will "flow" around the table in the case of "right" and "left" alignment.

ALIGNING WITHIN A TABLE CELL:

To position text in a TABLE Cell (TD), check the chart below. ALIGN is for horizontal placement, and VALIGN is for the vertical.

(Example: <TD VALIGN=MIDDLE ALIGN=CENTER>)

ALIGN VALIGN=MIDDLE VALIGN=TOP VALIGN=BOTTOM

ALIGN=LEFT
---
---
---
• • •

ALIGN=CENTER
---
---
---
• • •

ALIGN=RIGHT
---
---
---
• • •

Basic codes for a 2-column table are as follows: (NOTE: "center" & "bgcolor" are optional.)
<table align=center border="1"> <tr> <td bgcolor=ffcc99> THEN, At second column:

</td> <td bgcolor=ccffff> THEN, At end:

</td> </tr> </table>

Codes for 2-column table WITH SIZE CODES:
<center> <table border="1" width="100%" cellpadding="7"> <tr> <td width="25%" valign="top"> THEN, At second column:

</td> <td width="75%" valign="top"> THEN, At end:

</td> </tr> </table> </center>

TABLES - To Make A "BOX" Around Text, A Link, Etc.

TEXT WRAPPED INSIDE A TABLE "BOX"

AT BEGINNING:
<table> <table border=4> <td> AT END:

</td> </table> REDUCE or CONTROL BOX SIZE by using the following code:
(Prevents box from "bleeding" beyond the window)

AT BEGINNING:

(NOTE: "width=" above determines the box's size. 100% is full window. Use a smaller percentage if the window is "bleeding" beyond the screen area)

AT END:
(Same "Ending Codes" codes as in the previous "Table Box" example:)

</td> </table>

To Add COLOR or BACKGROUND "WALLPAPER" Inside A TABLE:

In the "td" code, place a "bgcolor" color code, as follows:
<td bgcolor=blue> OR <td bgcolor=blue background="photos/navyRipple.jpg"> You can color individual rows differently, by adding the "bgcolor" code for individual "td" codes as follows:
<td width="75%" valign="top" bgcolor=blue>

COLOR CODES for the TABLE BOX

TEXT: COLOR CODES for this TABLE BOX shown below:

<table align=center border="5" bordercolordark="#0000FF" bordercolorlight="#FF0000" cellpadding=2 cellspacing=2> <td>
TEXT: COLOR CODES for this TABLE BOX shown below:
</td> </table> <br>

TABLES For HEADERS With MULTIPLE PICTURES

A "Header" photograph at the top of a webpage can be broken up into several sections - as small images have "priority" during the download & thus the header will show up faster.

This table code is a sample of this:

<table width="736" cellpadding="0" cellspacing="0" align="center" border="0"> <tr> <td width="15"><img name="header1" src="photos/HEADER_Segment1_124-15.jpg" border="0" width="15" height="124" alt="Photo Name Here"></td> <td width="375"><img name="header2" src="photos/HEADER_Segment2_124-375.jpg" border="0" width="375" height="124" alt="Photo Name Here"></td> <td width="346"><img name="header3" src="photos/HEADER_Segment3_124-346.jpg" border="0" width="346" height="124" alt="Photo Name Here"></td> </tr> </table> Note that the "table width" in the top code equals the total of the 3 photo widths. And each individual "td" code "width" figure matches that of its photo. This insures that the segments wrap properly.

"VERTICAL" TABLES

Vertical Tables allow you to add text BELOW a picture (or any other content). It requires use of the "TR" (Table Row) code, as shown in the following code:

VERTICAL TABLE CODE: <table align=left border="0" width=255> <tr> <TD> <img src="" width=250 height=100> </td> </tr> <tr> <td bgcolor=ffffcc> <font color=000066 size=2 face="times new roman"> <center> PLACE TEXT HERE </center> </font> </td> </tr> </table> <BR>

Photo With TEXT BOX Below It -- Using TABLE CODES

The following code will "stack" Table Rows vertically -- Allowing you to place a Text Box cell BELOW a photo.

"TABLE" -- Begins the table code. "ALIGN" MUST immediately follow "table".

WIDTH -- Note "width" in the "table" code: make it a couple of points larger than the photo's width: this prevents text from exceeding the width of the photo.

"TR" -- This sets each row -- if there's more than one -- THIS CODE MUST PRECEDE THE "TD" CODE!

"TD" -- Table Data: Precedes the input being put into that cell of the table.

"HORIZONTAL" TABLES

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

The following codes are for the above table (simplified for copying):

<center> <table border="1" cellpadding="3"> <tr> <td valign="top"> TEXT or PHOTO Here <td valign="top"> TEXT or PHOTO Here <td valign="top"> TEXT or PHOTO Here </td> </tr> </table> </center>

"STACKED" HORIZONTAL TABLES

QUICK FIND - CATEGORIES WITHIN THIS PAGE:
SECTION 1	SECTION 2	SECTION 3	SECTION 4	SECTION 5	SECTION 6	SECTION 7

HERE, the TOP ROW must have a "COLSPAN" code, so it will spread across the number of columns in the row below it -- in this case, 7: colspan="7"

Here's the code for the above table:

<table align=center width="100%" border=2> <tr> <td colspan="7" bgcolor=ffcc99> <font size=2> <center> <font color=cc0000><B> QUICK FIND - </font color> <font color=006600> CATEGORIES WITHIN THIS PAGE:</FONT COLOR> </b> </center> </font size> </tr> <TR> <td bgcolor=ffcc99> <font size=1> SECTION 1 </td> <td bgcolor=ffffff> <font size=1> SECTION 2 </td> <td bgcolor=ffcc99> <font size=1> SECTION 3 </td> <td bgcolor=ffffff> <font size=1> SECTION 4 </td> <td bgcolor=ffcc99> <font size=1> SECTION 5 </td> <td bgcolor=ffffff> <font size=1> SECTION 6 </td> <td bgcolor=ffcc99> <font size=1> SECTION 7 </font size> </td> </tr> </table> <BR>

CSS Table Codes

"New" browsers work better with CSS codes than the above table codes, particularly for COLOR codes.

Sample CSS table code:

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

Codes for above table:

 <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } table.gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } </style>   <table class="gridtable"> <tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr> <tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr> <tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr> </table> •www.textfixer.com/tutorials/css-tables.php
•Google: css table codes

BOTTOM

T O P

HIGHLIGHTING TEXT

HIGHLIGHT TEXT LIKE THIS in the middle of a sentence -- or anywhere else.

This is a simpler code to create a table-like box where a table is not otherwise needed. This is a "bold" code that is given a "style" code. As follows:

<b style="color:#ffff00;background-color:#cc0000">   LIGHT FONT, DARK BACKGROUND   </b>

<b style="color:#000000;background-color:#ffff00">   DARK FONT, LIGHT BACKGROUND   </b>

<b style="color:#000000;background-color:#00ff99">   DARK FONT, LIGHT BACKGROUND   </b>

<b style="color:#000000;background-color:#66ffff">   DARK FONT, LIGHT BACKGROUND   </b>

The "   " is optional, to create space for the box border if desired. Remember to close with a " </b> "

Highlighting Without a "Bold" Code

To highlight text which you do not want to display as "bold", use:

<span style="background-color:#00ffff"> Text </span>

BOTTOM

T O P

BUTTONS

"ADD TO FAVORITES"

This code adds a button to your web page that the viewer can click to add your page to their "Favorites" list:
<FORM> <INPUT TYPE = "button" VALUE = "Add This Site To Your Favorites" onclick = 'window.external.AddFavorite(location.href,document.title);'> </FORM> Your "Title" in the META TAG will show as the page's name.
More on this at www.see-search.com/webdesign/addsitetofavorites1.htm

Button Image:

<input type="image" src="../graphics/ABCbuttn.gif" width="88" height="31" alt="Yellow Button Graphic" border="0" /> With the image input type, you can use a "gif" image, as in the above example (src="../graphics/ABCbuttn.gif") instead of a button on your forms. This can help when you want a SMALLER button, for example.

Other Buttons

Code for above: <table align=center border=0 cellpadding=0 cellspacing=0> <td align="center" width="30%"><form> <input type="button" value="Back to previous page" onClick="history.back()"> </form></td> </table>

BOTTOM

T O P

Embedding YouTube Videos

You can get the "embed code" by right-clicking on the video & selecting "Copy Embed Code"

BOTTOM

T O P

AMPERSAND CODES

These characters are useful symbols that would be difficult or impossible to type without special codes (e.g. the less-than sign, which would always be mistaken for the beginning of an HTML tag). These codes are "case sensitive".

`&`	&	Ampersand ("and" sign)
`"`	"	Double quote
`<`	<	Less-than
`>`	>	Greater-than
`≤`	≤	Less Than or Equal To
`≥`	≥	Greater-Than or Equal To
` `		Non-Breakable SPace • (also:   )
`¡`	¡	Upside-down exclamation point
`¿`	¿	Upside-down question mark
`¢`	¢	Cent sign
`µ`	µ	Micro sign, lower case Greek Mu
`£`	£	Pound sign: the currency symbol (not the tic-tac-toe telephone symbol, which is incorrectly called "pound".)
`¤`	¤	circle with dashes at NE, SE, SW, and NW
`¥`	¥	Yen symbol
`¦`	¦	Vertical line, maybe with gap in middle
`§`	§	Section sign (like hurricane symbol on weather maps)
`¨`	¨	"umlaut" (two dots accenting a letter)
`©`	©	Copyright sign (C in a circle)
``		"Soft" hyphen: a dash (doesn't show unless line "wraps")
`®`	®	Registered sign (R in a circle)
`°`	°	Degree sign
`¼`	¼	One quarter
`½`	½	One half
`¾`	¾	Three quarters
`×`	×	Times sign: narrow x without serifs
`÷`	÷	Division sign
`•`	•	Bullet
`↓`	↓	Down Arrow
`—`	—	"LONG" Hyphen (soft)
`‑`	‑	HARD Hyphen (non-breakable hyphen)

From: rabbit.eng.miami.edu/info/htmlchars.html

More Ampersand Codes

You must use a "#" before numeric codes.

! = ! " = " # = # $ = $ % = % & = & ' = ' ( = (
) = ) * = * + = + , = , - = - . = . / = / 0 = 0
1 = 1 2 = 2 3 = 3 4 = 4 5 = 5 6 = 6 7 = 7 8 = 8
9 = 9 : = : ; = ; < = < = = = > = > ? = ? @ = @
A = A B = B C = C D = D E = E F = F G = G H = H
I = I J = J K = K L = L M = M N = N O = O P = P
Q = Q R = R S = S T = T U = U V = V W = W X = X
Y = Y Z = Z [ = [ \ = \ ] = ] ^ = ^ _ = _ ` = `
a = a b = b c = c d = d e = e f = f g = g h = h
i = i j = j k = k l = l m = m n = n o = o p = p
q = q r = r s = s t = t v = v w = w x = x y = y
z = z { = { #124; = | } = } ~ = ~  =  = €  =
 = ‚  = ƒ  = „  = …  = †  = ‡  = ˆ  = ‰
 = Š  = ‹  = Œ  =  = Ž  =  =  = ‘
 = ’  = “  = ”  = •  = –  = —  = ˜  = ™
 = š  = ›  =  = ž  = Ÿ   = ¡ = ¡ ¢ = ¢
£ = £ ¤ = ¤ ¥ = ¥ ¦ = ¦ § = § ¨ = ¨ © = © ª = ª
« = « ¬ = ¬  = ® = ® ¯ = ¯ ° = ° ± = ± ² = ²
³ = ³ ´ = ´ µ = µ ¶ = ¶ · = · ¸ = ¸ ¹ = ¹ º = º
» = » ¼ = ¼ ½ = ½ ¾ = ¾ ¿ = ¿ á = á é = é í = í
ó = ó ú = ú Á = Á É = É Í = Í Ó = Ó Ú = Ú À = À
&loz; = ◊ &spades; = ♠ &hearts; = ♥ &clubs; = ♣ &diams; = ♦ ◆ = ◆ ◈ = ◈ ★ = ★
☆ = ☆ ◄ = ◄ ► = ► ▼ = ▼ ▲ = ▲ ✡ = ✡ Δ = Δ ← = ←
↑ = ↑ → = → ↓ = ↓ ↔ = ↔ ↕ = ↕

•www.chaos.org.uk/~eddy/bits/chars.html
•ikreator.com/special-characters

ACCENTS Using ACCENTS with Ampersand Codes
• (ONLY works with Vowels)

Use: "&" the letter to be accented, then "acute", semicolon

Example: for a capital É with an acute accent, use É

Numeric	What it looks like	Logical Name	ISO Latin-1 Name
À	À	À	Latin Capital A with grave
Á	Á	Á	Latin Capital A with acute
È	È	È	Capital E, grave accent
É	É	É	Capital E, acute accent
Ì	Ì	Ì	Capital I, grave accent
Í	Í	Í	Capital I, acute accent
Ò	Ò	Ò	Capital O, grave accent
Ó	Ó	Ó	Capital O, acute accent
Ù	Ù	Ù	Capital U, grave accent
Ú	Ú	Ú	Capital U, acute accent
Ý	Ý	Ý	Latin Capital Y, acute accent
à	à	à	Small a, grave accent
á	á	á	Small a, acute accent
è	è	è	Small e, grave accent
é	é	é	Small e, acute accent
ì	ì	ì	Small i, grave accent
í	í	í	Small i, acute accent
ò	ò	ò	Small o, grave accent
ó	ó	ó	Small o, acute accent
ù	ù	ù	Small u, grave accent
ú	ú	ú	Small u, acute accent
ý	ý	ý	Small y, acute accent

HOME

BOTTOM

T O P

ALIGN	VALIGN=MIDDLE	VALIGN=TOP	VALIGN=BOTTOM
ALIGN=LEFT --- --- ---	•	•	•
ALIGN=CENTER --- --- ---	•	•	•
ALIGN=RIGHT --- --- ---	•	•	•

! = !	" = "	# = #	$ = $	% = %	& = &	' = '	( = (
) = )	* = *	+ = +	, = ,	- = -	. = .	/ = /	0 = 0
1 = 1	2 = 2	3 = 3	4 = 4	5 = 5	6 = 6	7 = 7	8 = 8
9 = 9	: = :	; = ;	< = <	= = =	> = >	? = ?	@ = @
A = A	B = B	C = C	D = D	E = E	F = F	G = G	H = H
I = I	J = J	K = K	L = L	M = M	N = N	O = O	P = P
Q = Q	R = R	S = S	T = T	U = U	V = V	W = W	X = X
Y = Y	Z = Z	[ = [	\ = \	] = ]	^ = ^	_ = _	` = `
a = a	b = b	c = c	d = d	e = e	f = f	g = g	h = h
i = i	j = j	k = k	l = l	m = m	n = n	o = o	p = p
q = q	r = r	s = s	t = t	v = v	w = w	x = x	y = y
z = z	{ = {	#124; = \|	} = }	~ = ~	=	= €	=
= ‚	= ƒ	= „	= …	= †	= ‡	= ˆ	= ‰
= Š	= ‹	= Œ	=	= Ž	=	=	= ‘
= ’	= “	= ”	= •	= –	= —	= ˜	= ™
= š	= ›	=	= ž	= Ÿ	=	¡ = ¡	¢ = ¢
£ = £	¤ = ¤	¥ = ¥	¦ = ¦	§ = §	¨ = ¨	© = ©	ª = ª
« = «	¬ = ¬	=	® = ®	¯ = ¯	° = °	± = ±	² = ²
³ = ³	´ = ´	µ = µ	¶ = ¶	· = ·	¸ = ¸	¹ = ¹	º = º
» = »	¼ = ¼	½ = ½	¾ = ¾	¿ = ¿	á = á	é = é	í = í
ó = ó	ú = ú	Á = Á	É = É	Í = Í	Ó = Ó	Ú = Ú	À = À
&loz; = ◊	&spades; = ♠	&hearts; = ♥	&clubs; = ♣	&diams; = ♦	◆ = ◆	◈ = ◈	★ = ★
☆ = ☆	◄ = ◄	► = ►	▼ = ▼	▲ = ▲	✡ = ✡	Δ = Δ	← = ←
↑ = ↑	→ = →	↓ = ↓	↔ = ↔	↕ = ↕