Back to 1.3

Web Site Development Tool Kit

Quick and Specialized HTML code Guides for Nubees

Lesson 1.4
Tables, Fonts, Links(hot spots), and Template

Tables in HTML 3.2
Fonts in HTML 3.2
The anchor tag/ELEMENT <a> </a>

By Alain Lareau

Objectives this Lesson:

The above Header, which is not really a Header, the Unordered List and this little paragraph
are placed in the center by wrapping it all between 'center' tags. This is a fine way to do it
and can be quite handy but it is already become Old School, the new method uses
the tags set <div>, </div>. These tags are designated 'Block Level' Elements because they
are designed to act to control position like the 'center' tag but in a more versatile way.
Let me show the code I just used by employing the 'pre' tag.

<p><font color="blue" size="6"><u>Objectives this Lesson</u>:</font></p> <ul> <li><font size="4">Gi...</font></li> <li>... ... ...</li> <li><font size="4">Us... <em>STYLE</em></font></li>
</ul> <p><font size="4">The above Header,... ...becoming <em>Old School</em>, the new method uses... ...employing the 'pre' tag. </font> </p> </center> <pre>... ...
Objectives this Lesson:
(skipping the list)
This Different Way:
- using the code below has some benefit.
The 'div' tag can hold many things but not just text like the 'p' tag. <p>text only</p>
This table is nested within the 'div' tags and centered that way, the 'table' tag has a width attribute with a value of 674 pixels.
The cell tag 'td' also has a width value, (674 - 4) = 670, this is to accommodate for the border that is there even if the border value of the 'table' tag is set to "0" or "1".
For this demo let's use border="2"

<DIV align="center">
 <font color="blue" size="6"><u>Objectives this Lesson</u>:</font>
 <font size="4">(skipping the list)</font>
 <table border="2" width="674">
   <td width="670">
    <font size="4">This Different Way: ...</font>
  So while we are on the subject of borders,
this display begins with a new set of 'div' tags
with a table nested in it. width="866"

The first row ( 'tr' tag ) has two cells ( 'td' tags )
nested in it. the second cell on the right in turn
has a table nested in it, it is this second table that has its border set to a value of 7 which makes it wider.
In turn, this table has only one row but two cells,
its left side having a different background color
and contains a column of links.

Site Map

MetaphorMan's Web Site Development Tool Kit™ by Alain Lareau
© 2012
is a promotional to function as a HTML help site for those not able to afford Professional Service.

Communicate your questions to:

  Now to make this come out right we must do a little math. // 2 + width + 2 + 7 + width + 2 + width + 7 + 2 //
Total width minus 8 (2x4) minus 14 (7x2) equals w1 plus w2 plus w3 ,,, 866 - 22 = 844 // 414+ 110 + 320
Remember the cell walls and the table edges have a value of 2 regardless if you see them or not.

  One other note, see how this cell in this row under the stuff we are talking about, it spans under. In order to do that this 'td' tag needs an attribute 'colspan' in it set to a value of 2,<td colspan="2"> because this row sits below a row that has two sets of <td>, </td> tags even though one of those cells has cells nested in it.

The Anchor ELEMENT / Tag

  Might I be allowed to be a little jealous of my lesson plan and wish to keep this page open in your view while I send afield to look at other resource. Can I make the link open a new tab or window instead of loading on top of this one? Yes, I can by assigning the value '_blank' and specifying the attribute 'target' in the 'a' tag like this:
<a href="www.xxx.htm" target="_blank">the link</a>
which I will do now -- here are two, they will open a new tab or window
Learning HTML / For Kids!
and leave 'this' one open. Enjoy

now I close off the 'font' (see the change in type hight) but this part is still inside of a table cell ,,,
now in this next part goes back to larger font because I place a tag [ font size="4" } and it will stay that way until the browser sees a tag [ /font ]

  Now let's chat about that column of links, my little Site Map.
The hot spot or Hyper Text displayed C05C is created with this 'a' tag:
<a href="http://metaphorman.tripod.com/000/005.html">C05C</a>
If the value of the 'href' attribute in that tag were: href="005.html"
it would work just the same. This is because the page you are --
on now http://metaphorman.tripod.com/000/004.html sits in the same folder, on the same server, under the same Domain Name, I.E. the URLs have the same base. // ( Uniform Resource Locater )
The point I would like to draw out is your HTML file talks to a 'Browser' not a person and the code tells the browser what to do. The program that you use on your computer to view Web sites (HTML documents) is called a browser.
Bear with me, I know it is highly likely that you already know this.
You are probably not using Netscape ( got sucked up by AOL )
Mosaic or Lynx, all old and all gone but they were the first.
The thing we call the URL is even older and those early browsers did not need to see anything close to
an http:// at the beginning which was just one of many Transfer Protocols.

difference between ftp and telnet link 1
File_Transfer_Protocol link 2
Usenet link 3
Local File Accessor ,, this points your browser to file on your local system
Hyper-Text Transfer Protocol ,, this points your browser to a server, though your network interface
Secure Sockets Layered Transaction ,, same as above but with added security protocols
File Transfer Protocol ,, used by apps prepared to recive and store files
folowed by a server address (no path statement) ,, used for Remote Telnet session logins ,,
see -> Power Point Presentation
followed bt email address ,, SMTP, Simple Mail Transfer Protocol ,, protocol to prepare and send package of meta data for email
news: & news://
Network News Transfer Protocol (NNTP) ,, Usenet- news: followed by newsgroup name ,, news:// for newsgroup on a specifed server
protocol of of original hybrid browsers ,, see -> University of Michigan School of Information
There It Is ,, mostly just a history lesson really
  Your browser is pointed to the location in the address window, this is called a Uniform Resource Locater or Uniform Resource Identifier. You will see this referred to URL / URI, but some times Domain Name. The programs that supply the information to the browsers are called servers. A Web server is also the place you store and publish your own web pages.
The best place to start your first page is the NOTEPAD that comes with your Operating System.
Well! What if you wish to point your browser to a file on your own computer that you saved with Notepad?
Yes you can do that in the value of the 'href' attribute. This is what it would look like:
<a href="file:///C:/filename.html">stuffYouPutBetweeTheA tagsToShowUpAsHyper-TextOnYourPage</a>
Or it could end with .htm instead of .html, years ago with Windows 3.1 the file extensions were limited to three characters. When you save your file using Notepad with the file extensions .htm or better .html instead of .txt your browser will recognize it as a web page. We might be ready for the proverbial dumb question, here goes,,,

Q: Is there an easy way to convert a text file to a Web Page?
A: Yes! In fact that is a good way for you to see why I use the 'pre' tags to show you code.
p.s. I close the font then the table, type you this note without using a 'font' tag set or a 'p' tag set, still centered by the 'div' tag
then close the div which causes the proceeding header to use its 'align' attribute's default value 'left'

Preformated Examples you can use as Templets/Templates in a table, border="1"

<TITLE>Name of your Web Page</TITLE>
     ---the text file with CRs---

is a 
set in 
<TITLE>Name of your Web Page</TITLE>
<P><FONT size="4">
              --the long line of text--

If you mouseover and highlight the above preformated text, copy and paste to Notepad you will see that it keeps its shape,
that is the line brakes (the <br>s) that are rendered to you via the HTML translate to CRs (Carriage Returns) in the Notepad file
AND the 'angle brackets' come though as 'angle brackets' even as they are actually &lt; & &gt; in the HTML.
So, for me it is a good way to show code to you and it is a good way for you to copy it while in the lesson plan.
You may get the idea that any notepad file having all the CRs/line brakes already present can be rendered to a web page
just by sticking in between the 'pre' tags of this little templet. If however if you copy to a Notepad file from a source that
does not translate the line brakes what you paste may end up as a straight line of words, in that case use the templet/template at right.
The 'p' tags do the job for you.
You have covered a lot and soon you will be ready to go full bore after we clear up a few things in the next Three lessons.
Meanwhile please think about all the HTML tags/ELEMENTS you have encountered thus far and divide them into Two groups in Three different ways:

  1. Those that are used in the head & those that are used in the body
  2. Those that come in pairs & those that stand alone and do not come in pairs
  3. Those that are categorized as Block Level elements & those that are categorized as In-Line elements

Method - this page

The method of this page is:
Three headers, size:
centered using attribute in tag
-one fonted line of text, size:
-6 - underlined
-one unordered list
-one paragraph, between
preformated section
<div>TAG centering internal using attribute
two fonted lines of text, size:
-6 - underlined
one table
-one row, one cell, nested in div
preformated section
<div>TAG centering contents using attribute in tag
-one table
-two rows,
-- -top row, two cell
-- -bottom row, one cell spanning two
-top left cell holding table
-bottom cell holding fonted text and
- -,definition list
table of three columns/cells, of one row
-spacer in center cell
-cells on each end holding preformated text
-one paragraph left align using attribute in tag
-ordered list
table, one row, one cell, centered, holding:
this paragraph with header, and then preformated block for STYLE
with header also in same table,
and mock comment capsule of Design Notes below as well

Style-in Head, this page

<style rel="stylesheet" type="text/css">
i { color: blue }
em { color: black; 
  font-weight: bold }
h1 { color: black }
pre {
  font-size: 11pt; 
  color: #cc0033; 
  text-align: left;
  font-weight: bold }
td#box {
  font-size: 14pt; 
  color: #006633; 
  text-align: center }
div.pref {
  font-size: 14pt; 
  color: #006633; 
  text-align: center }
dl#protocol {
  font-size: 14pt; 
  color: #003300 }

Design notes, this page

background color for page
'bgcolor' attribute value set to #a3dfb8 in 'body' tag
general text color
'text' attribute value set to #006666 in 'body' tag
color for links (hot spots) hyper text
'link' attribute value set to #666633 in 'body' tag
color for links visited
'vlink' attribute value set to #999966 in 'body' tag
the header
size h1 tag, default face;
with change in-head style rule- h1 { color:black }
size h2, left at default
sisze h4, same
background color of offset color table cells
bgcolor value #ddffee set in 'td' tag
general text in lesson
size 4 set in 'font' tag nested in 'p' or 'div' tags, face value left at default
preformated text in (prefomated text)
employment of ELEMENT <pre>, </pre> tags
with change of style rule in-head
- pre { font-size: 11pt; color: #cc0033; font-weight: bold }
special text in lesson (code display)
employment of ELEMENT <em>, </em> tags
with style change in head - em { color:black; font-weight:bold }
other special text in lesson (underlined)
employment of ELEMENT <u>, </u> tags
other special text in lesson (italic)
employment of ELEMENT <i>, </i> tags

bin counter B04C

Back to Top

-------------------- Next Lesson

Copyright © 2011 - Alain Lareau
All Rights Reserved unless with Writen Request.
alainelj@yahoo.com this page B04C


The Gentle Networker

Resources For All Entrepreneurs

Definitive Guide to Networking Online - The Virtual Handshake
Published By The American Management Association - Free Download Available

Expand Your Business And Social Network Sign Up Free
Post Your Profile Connect With 1000's of Professionals And Entrepreneurs