Web Page Help >>> HTML Tags Advanced - Quick Reference
|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.
<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.
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:
In some HTML editors, additional options are:
"Normal" - don't do anything, the default is to "normal"
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
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)
get really <B><FONT COLOR="#8000FF">D</FONT><FONT
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>
Unordered list (bullets)
- and blah-blah
- more blah-blah
Ordered list (numbered)
- point one
- point two
- point three
- 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
<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
- 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.
||Dog!||<table border=5 cellpadding=8>|
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.
HTML + Web Page Help Webrings
Background © 1998 by Roxy M. Flanagan.