Web Page Help >>> HTML Tags Advanced - Quick Reference


 TITLES / HEADERS       FONT STYLE / SIZE / COLORS       LISTS       TABLES


Web browers are case-insensitive to all HTML tags, so you may use
<B>upper case</B> or <b>lower case</b>
for the tags, as you prefer, just be consistant! Some browsers may not display your page as you want it to been seen if you use <B> and then </b> because it can't match up the tags.

TITLES AND HEADERS:

<title>HTML tags Advanced - Web Page Help</title>
The title appears once, at top of file, between the <HEAD> and </HEAD> tags. Choose your title of your page carefully IF you expect people to add your page to their bookmarks/favorites. What you choose for the page title, is what shows up for them in their bookmarks/favories!!

Header Tags tell the browser what "strength" to display the words as ...


<h1> Largest Header </h1>
<h2> 2nd Largest Header </h2>
<h3> 3rd Largest Header </h3>
<h4> 4th Largest Header </h4>
<h5> 5th Largest Header </h5>
<h6> 6th Largest Header </h6>

OTHER FONT CONTROLS:

for text within the <body> and </body> tags 

Normal font, <b>bold font</b>, <i>italicized font</i>, <tt>typewriter font</tt>.

The 'typewriter font' is the fixed-width font Courier, whereas all other text appears in the proportional font you designate for your web pages. If you don't designate a font, what displays will be what is selected by your visitor's web browser. You don't know what they've chosen.

You can have limited control over what STYLE of font your visitors see on your web page by specifying the font face style. BUT if your visitor does not have that font installed on their computer, they won't see the font you have chosen. It is a good idea to stick to standard fonts, and choose an alternate if the font is not one of the fonts your visitor has. If you don't specify, then their browser and computer will choose the font they see -- sometimes can make your page look pretty bad!!


For Netscape, the users font is selected by choosing "Options | General Preferences | Fonts" menu.
For Microsoft Internet Explorer (MSIE), the users font is selected by choosing "Tools | Internet Options | on the 'General' tab, the button 'Fonts'" (near the bottom of that box), is where you make your choices.

For example:

<FONT FACE="ARIAL,TIMES NEW ROMAN">
Which means, if your visitor has the Arial font installed on their computer, their browser will display that font first, if they don't have Arial, it will display Times New Roman. If it doesn't have EITHER one ... then it will revert to the default font that they have chosen for their browser.

Remember: ONLY visitors with the same font installed on their computer will see them! It's generally NOT recommended to use non-standard fonts.

 [return/top]

Font sizes

Your visitor's browser controls the absolute font sizes, but the web-page creator can specify relative font sizes analogous to how different size headers are specified. This is the reference I found for HTML standards:

<font size="1">size="1",</font>
<font size="2">size="2",</font>
<font size="3">size="3",</font>
<font size="4">size="4",</font>
<font size="5">size="5",</font>
<font size="6">size="6",</font>

In some HTML editors, additional options are:

<font size="-2">size="-2",</font>
<font size="-1">size="-1",</font>
"Normal" - don't do anything, the default is to "normal"
<font size="+1">size="+1",</font>
<font size="+2">size="+2",</font>
<font size="+3">size="+3",</font>
<font size="+4">"+4"</font>

Changing the color of the font within the body of your page.

If you want to emphasize some words ...

... want to <FONT COLOR="#FF0000>emphasize</FONT> some words ...

or get really DECORATIVE in your text, you need to insert font colors.
(Note - watch the colors chosen so they 'show up' against your background, like the yellow 'A' above is not easy to see on a light background and the color used in the letter "E" doesn't look good against this background)

or get really <B><FONT COLOR="#8000FF">D</FONT><FONT COLOR="#008040">E</FONT>
<FONT COLOR="#FF00FF">C</FONT><FONT COLOR="#0000FF">O</FONT><FONT COLOR="#FF0000">R</FONT>
<FONT COLOR="#FFFF00">A</FONT><FONT COLOR="#FF8000">T</FONT><FONT COLOR="#808000">I</FONT>
<FONT COLOR="#FF0080">V</FONT><FONT COLOR="#00FFFF">E</FONT></FONT></B> in your text ....

EXCEPT -- the above MUST be ALL ON ONE LINE !!
I've only put line breaks here so you don't have to scroll sideways to see everything !!

A great page that shows you the color, and the 6-hex-digit code is on my
HTML Colors Page -- hint: print it out (good quality print, not econofast) to have a handy reference! Just print page one, you will get all the 216 websafe colors.

Superscripts and Subscripts:     examples

2n4     ---     2<i>n</i><sup>4</sup>
footnote22     ---     footnote<sup>22</sup>
H2O     ---     H<sub>2</sub>O
log8 y     ---     log<sub>8</sub><i>y</i>

 [return/top]

LISTS:

Unordered list (bullets)

  • blah-blah
  • and blah-blah
  • more blah-blah
<ul>
  <li>blah-blah</li>
  <li>and blah-blah</li>
  <li>more blah-blah</li>
</ul>

Ordered list (numbered)

  1. point one
  2. point two
  3. point three
<ol>
  <li>point one</li>
  <li>point two</li>
  <li>point three</li>
</ol>

Definition list

This is a term
and this is its definition
This is another term
and this is its definition
And yet another term
and its definition
<dl>
  <dt> This is a term
    <dd> and this is its definition
  <dt> This is another term
    <dd> and this is its definition
  <dt> And yet another term
    <dd> and its definition
</dl>

 [return/top]

TABLES:

  • Tables often look best centered, so remember to add in <table align=center>
    to your table coding. Although not an HTML standard, you may see some people use
    <center> and </center> tags front and back of the table tags.
  • The table, as a whole, is surrounded by the pair <table> and </table>
  • Each row of the table is surrounded by the pair <tr> and </tr>
  • Each cell of the table is surrounded by the pair
    <td> and </td> (normal text, left-aligned)
    or by the pair <th> and </th> (bold text, centered)

Note - I left a 1 pixel border around the whole thing so you can see that you can use tables to keep things grouped/lined up with each other -- and you can also put a table in a table. Note also, table tag 'td' is regular text, 'th' is bold text.

Letter Used In
B Boy
G Girl
D Dog!
 <table border=5 cellpadding=8>
<tr>
  <th>Letter</th>
  <th>Used In</th>
</tr>
<tr>
  <td>B</td>
  <td align=center>Boy</td>
</tr>
<tr>
  <td>G</td>
  <th align=center>Girl</th>
</tr>
<tr>
  <td>D</td>
  <th align=center><i>Dog!</i></th>
</tr>
</table>

There are several table options you can choose.

  • The option border=5 in the example sets the width of the outer raised border of the table within the table.
  • Using border=10 makes an even wider outside border. Can be used to make a photograph look like it has a frame. Insert a photo in the frame.
  • Using border=0 eliminates the visible border and the lines between cells; sometimes a nice effect AND used when you don't want the edges of the table shown -- like when using it to do page control (another helpful info page here)!
  • The option cellpadding=8 in the example sets the amount of blank space (in pixels) surrounding the contents of each cell.
  • Using cellpadding=0 makes a very tight table, while using cellpadding=25 would spread the contents out a lot, giving a large space around the text.
  • For more details, there are more examples on the Tables Page.

This page will print out to be 5-6 pages (depending on your printer's settings)
a small cost to have something handy to use and reference whenever you need to.


Web Page Help / HTML Help + Information © 1999-2009 Roxy Flanagan
HTML Info Hints + Tips HTML tags Basics HTML tags Advanced HTML colors
Tables Page Control Resolution Browser Info Validating HTML
AOL graphics + browser problems Links to More Helpful Information

HTML + Web Page Help Webrings

Background © 1998 by Roxy M. Flanagan.

www.AutumnWeb.com SITEMAP

... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997-2009 by Roxy M. Flanagan + licensors; All Rights Reserved.
Using Roxy's Graphics? See the button choices here. Plus, Add YOUR link!
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Wallpaper : Seasons+Nature : Holidays : Christian : Graphic+Other Rings
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/

Roxy Recommends:
Autumn Web
Web Development
Personal+Business
Custom Web Graphics