October 14, 2002-- Newsletter #202

By Vince Barnes



Goodies to Go (tm)
October 14, 2002--Newsletter #202

This newsletter is part of the internet.com network.
http://www.internet.com
 


Featured this week:

* Goodies Thoughts - Setting Your Table
* Q & A Goodies
* News Goodies
* Feedback Goodies   ** LOOK! A New Item! **
* And Remember This...

 


 

Goodies Announcement

The new Beyond HTML Goodies book is now available!

 

Go beyond the basics and learn how the pros add and use dynamic HTML features and advanced JavaScript techniques. Beyond HTML Goodies demonstrates dozens of new and different features readers can add to their existing Web pages using HTML and JavaScript. The book starts with simple text and image tips, such as adding a clock to a Web page or causing text to appear when the mouse moves over an image. It gradually builds to more complex tricks, including manipulating forms or working with cookies behind the scenes. Throughout the book, readers enjoy Joe's snappy style and "to the point" discussion of each "goody" in the book.

 

http://books.internet.com/books/0789727803

 

 

Goodies Thoughts - Setting Your Table

It's curious how things tend to clump together. Cars on a highway tend to group together with big gaps between the groups, stars gather together in the universe in big (very big!) galaxies with billions of miles between them and questions come in to the mentors in clusters with regard to their subjects! Recently there has been a cluster of questions involving tables. Not every question in this cluster mentioned tables, but they asked for help with problems that are easiliest or best solved by using tables. As a result, I thought we could include in this newsletter a few of the neat things that tables can do.

Tables are great for arranging things on your pages so that they go to particular places, relative to other things on the page. For example, you might want to have a small picture with text to the left of it and more text to the right. Such an arrangement is easy in a table.

A table has rows and columns. A table with three rows and three columns would look like a box with nine smaller rectangles in it. Each of these rectangle is called a cell. It's important to remember that programmers sometimes think of things a little differently than "normal" people. For example, most people would not think of a single box in terms of rows and columns, but to a programmer it could be a table with one row and one column. Nothin' wrong with that!

Let's make tables! Here's one with two rows and two columns:

<html>
<head>
<title>Table on Page</title>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

</body>
</html>

I have included the page code this time to show the table in context; the rest of the examples will show the table only. As you can see, this table begins with a <table> tag (with some extra attributes in this example) and ends with </table>. Inside the table there are two rows, each defined by <tr></tr> begin and end tags (table record begin, table record end - a row is also known as a record, just like in a spreadsheet or database program.) Each row has two columns defined with <td></td> table data begin and end tags. Personally, I would have liked <tc> for table cell, but I didn't get to vote! I have put a non-breaking space in each cell just to give it some width. Speaking of width, I specified border="1" as an attribute of this table so that if you look at it, you will be able to see it. If I didn't want to see the table borders on the page I would use:

<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse">

Here is the table with something in each cell:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">this is text</td>
<td width="50%">
<img border="0" src="logo.jpg"></td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

I placed text to the left of the picture in the first row, and to the right of the picture in the second row. If you make a page with this code and don't have a small graphic file called logo.jpg in the same directory as the page, you will see the little red "x" placeholder instead of the picture, but you'll get the idea!

Cellpadding and cellspacing are great for putting some white space inside each cell or between the cells, respectively. Try values of 2 or 5 instead of 0 to see the effects (do cellpadding first, then cellspacing to see the difference.) This will be easiest to see if you make a graphic like a small solid red rectangle, call it logo.jpg and put it in the directory with this page.

It's important that each row has the same number of columns as every other row in the same table. Some browser are forgiving and will do their best to show the table even if the column counts differ, but some browsers will either not show the table or will quit showing any more of the page when they hit this error. We don't want that. Suppose, however, that you do want only one cell in the first row and two in the second. "Colspan" allows for this, like this:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" colspan="2">this is text</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

You can also do "rowspan". For me, row spanning gets hard to keep track of, so I avoid it if I possibly can. Colspanning is hard enough to track even with well laid out code like in the examples. Usually, it is possible to achieve even the most complex of layouts using nested tables instead.

Nested tables are just like the ones next to your sofa! It's a table within a table, like this:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">this is text</td>
<td width="50%">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">&nbsp;</td>
</tr>
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

Here I have made a table with two rows, one column, inside the right hand cell of the first row of my outer table. You might want to put this in your page and look at it to see what I mean.

On more thing to mention here is the width="50%" attribute you see. The width of a cell or of the table itself can be specified in terms of a percentage of the available browser window or in pixels, like this:

<table border="1" cellpadding="0" cellspacing="0" width="100%">

<table border="1" cellpadding="0" cellspacing="0" width="300">

<td width="125">this is text</td>

Using tables it is possible to get very creative with the layout and placement of everything on your page. Experiment a little with the suggestions I have given here and you will very quickly see the effects you can create with this powerfull HTML tag set.

If you'd like to get some more examples, take a look here:
http://www.htmlgoodies.com/tutors/tbl.html


Thanks for Reading!
- Vince Barnes

Top

Q & A Goodies

Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to http://www.htmlgoodies.com/mentors/.



Q. I am creating an image slideshow with javascript, and I want to include text for each image, but I hate the look of the form box (white and boxy!), so here is my question.
1. Can you change the look of a form box (like say, make it a black background instead of white), if not then,
2. Can you do alternate text within the javascript for each individual picture so that if you hover the pointer over the image it will read "whatever" as in non-scripted images. If not then,
3. Are there other text options I can use that are not related to putting the text as a part of the image itself.


A. Below is an example of a slide show where the image is a link and has a text link below it. When you click on the image or text link a page will open in a separate window. You should be able to modify it to meet your needs.

<html>
<head>
<title>Image and Link Slide Show</title>
<SCRIPT LANGUAGE="JavaScript">
var a=0
/* Popup window properties - set these to your preferences. */
var winwidth="400" // Set the window width
var winheight="400" // Set the window height
var winloc="yes" // Display location bar - yes or no
var winstatus="yes" // Display status bar - yes or no
var windir="yes" // Display directories - yes or no
var wintool="yes" // Display toolbar - yes or no
var winscroll="yes" // Allow scroll bars - yes or no
var winmenu="yes" // Display menubar - yes or no
var winresize="yes" // Allow resizing of the popup - yes or no
var wintop="0" // Top position in pixels of the popup
var winleft="0" // Left position pixels of the popup
function OpenWin(linkid)
{ var winprops="width="+winwidth+",height="+winheight+",
location="+winloc+",status="+winstatus+",
directories="+windir+",toolbar="+wintool+",
scrollbars="+winscinstatus+roll+",menubar="+winmenu+",
resizable="+winresize+",top="+wintop+",left="+winleft+"
PoPuP=window.open(linkid, "popup",config=winprops)
// NewWin.focus()
}

// Enter your images Here along with the directory if need be.

var imgs=new Array()
imgs[0]="owls3.jpg"
imgs[1]="hawks2.jpg"
imgs[2]="pic221.jpg"
imgs[3]="eagle1.jpg"

// Enter your URLS and what you want to go in the ALT property and the text link.
// This is so when they mouse over the image
// There will be a small description of the Image or URL.
// Make sure you separate them with an ampersand "&"
// so that the script can separate them out before writing out the link.
var urls=new Array()
urls[0]="http://www.requestcode.com&Requestcode"
urls[1]="http://www.javascriptkit.com&Javascriptkit"
urls[2]="http://www.dynamicdrive.com&Dynamic Drive"
urls[3]="http://www.htmlgoodies.com&HTML Goodies"

// This is the function that displays the images and links.
// You should not have to modify it.
function Doimglink()
{
if(a>imgs.length-1)
{a=0}
if(a<0)
{a=imgs.length-1}
newurls=urls[a].split("&")
if(document.layers)
{
document.mydiv.document.write("<CENTER><A HREF='javascript:OpenWin\(
\""+newurls[0]+"\"\)'><IMG SRC='"+imgs[a]+"' BORDER='0' ALT='"+newurls[1]
+"'></A><BR><A HREF='javascript:OpenWin\(
+\""+newurls[0]+"\"\)'>"+newurls[1]
+"</A></CENTER>")
document.mydiv.document.close()
}
if(document.getElementById)
{
elm=document.getElementById("mydiv")
elm.innerHTML="<A HREF='javascript:OpenWin\(\" "+newurls[0]
+"\"\)'><IMG SRC='"+imgs[a]+"' BORDER='0'
+TITLE='"+newurls[1]+"'></A><BR><A
HREF='javascript:OpenWin\(\""+newurls[0]+"\"\)'>"+newurls[1]+"</A>"
}
}
// function used to display random images
function rannum()
{
len=imgs.length // how many entries in the array
prev=a // Save the previous image index
a=Math.round(Math.random()*(len-1))
// If the current image equals the previous image add one to get a different image.
if(a==prev)
{a++}
}
window.onload=Doimglink
// In the divs below you may have to add the top and
// left properties to the style tag to position it
// correctly in the window.
// You must keep it positions as absolute for it to work in NS4.0+ browsers.

</SCRIPT>
</head>
<body onLoad="Doimglink()" onResize="if(document.layers){location.reload()}">
<CENTER><H1>Manual Slide Show With Links</H1>
<DIV ID='mydiv'
STYLE="position:absolute;top:120;left:200;height:320;font-family:verdana"></DIV>
<DIV ID='ctrldiv' STYLE="position:absolute;top:120;left:100">
<A HREF="javascript:a++;Doimglink()">Next Image</A> <BR>
<A HREF="javascript:a--;Doimglink()">Previous Image</A> <BR>
<A HREF="javascript:rannum();Doimglink()">Random Image</A><BR>
<A HREF="javascript:self.close()">Close Window</A> <BR>
</DIV>
</body>
</html>



Q. I want to use links on one framed page to jump to a tag on another page in a different frame. That is, I want the "Go to"-tag (<a href="#lala">whatever</a>) to be in one frame, and the "target"-tag (<a name="lala">whatever</a>) in another.


A. You can combine the internal tags with links between pages. You add the pound sign to the file name, and specify the target frame. If you had a page called next with a link called top in a frame called main, it would look like this:
<a href="next.html#top" target="main">text</a>

 



Q.  I have text links inside a small table. The border is a dark gray, lighter gray inside and black text. They are asking me to make the colors switch to dark gray inside with white letters when someone's mouse goes over the table. I'm not sure how to make that happen with a table background color as well as the text



A. It sounds like you know how to do it with the text, so here's the code I used to change a background color:
<td bgcolor="#ffcc66" onMouseOver="bgColor='#cc9933';" onMouseOut="bgColor='#ffcc66';">

 

 

 

Q.  Is there a way to have something other than a button do this job?
<FORM>
<INPUT TYPE="button" Value="Change Three Frames at Once"
onClick="parent.frames[1].location='zippy5.html';
parent.frames[2].location='zippy6.html';
parent.frames[3].location='zippy7.html';">
</FORM>
I would like to have a blue underlined word do the same thing the button does, to save vertical space in a clickable list arrangement.



A. I You can use a text link like so:
<A HREF="#" onClick="parent.frames[1].location='zippy5.html';
parent.frames[2].location='zippy6.html';
parent.frames[3].location='zippy7.html';">Click Here</A>

 

 

Q.  How to I get me text links to change color?

A. The best way to format links color is with Cascading style sheets.
You need code for alink avisited aactive
Check out the Beyond HTML CSS pages on HTML Goodies:
http://www.htmlgoodies.com/beyond/css.html

 

 

Top

News Goodies


IBM Unveils New PowerPC (The Next Mac?) CPU
[October 14, 2002] IBM confirms that its 64-bit Power4 server processor architecture will reach the desktop -- the Apple Mac desktop, according to industry gossip -- in mid-2003, with the new PowerPC 970: a 1.8GHz, single-CPU-core variant boasting native support for both 32- and 64-bit code and a whopping 6.4GB/sec system bus..

Click here to read the article

 

 

.NET Framework SDK 1.1 Beta Goes Public
[October 14, 2002] Microsoft has upgraded the Visual Studio.Net Framework SDK (code-named 'Everett') and converted the program to public beta.

Click here to read the article

 

 

Partners Bet on Microsoft Tablet
[October 11, 2002] A host of IT firms, from chip producers to computer makers to software developers, hope the debut of sleek platform next month will jump-start a stalled market.

Click here to read the article

 

 

XDocs An Adobe Wake-up Call
[October 10, 2002] Officials need look no further than the Internet Explorer-Netscape Browser War to figure out how hard Microsoft will push its XDocs on a .pdf world.

Click here to read the article

 

 

 


Top

Feedback Goodies



Here's something new for you......


Did you ever wish your newsletter was an easy two way communications medium? Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on something you have seen in here, you can now send your input to:

mailto:nlfeedback@htmlgoodies.com


We already receive a lot of email every day. This address will help us sort out those relating specifically to this newsletter from all the rest. When you send email to this address it may wind up being included in this section of the newsletter, to be shared with your fellow readers.


** Judy Jones sent this note in response to GTG#201:

Hello and thanks to all involved. Your website and newsletter have become my constant companions, as I am a novice (and de facto) web developer who needs all the help I can get. Your information has been very helpful to me.
Regarding the Q/A about Notepad not offering the .htm (or .html) extension when saving a file: when I want to save a file as an html, I type the extension in the box after the file name just as I do when I want to save a .css file. It's simple and it works for me! Whaddaya think; isn't that easier than switching to WordPad?

 

Top
And Remember This . . .


On this day in...

1940 First Audio-Visual Communication of the Deaf
At the New York World's Fair two way televisions were set up with a link to a TV studio eight miles away. Two deaf ladies spoke with each other in sign language over the link. Since that time technology has provided major communication improvements for the deaf.

1943 Italy declares war on Germany
With Mussolini deposed and his fascist goverment brought down in July, Italy now turned on its former "Axis" partner and formally joined with the allies in their efforts against Germany.

1997 Car Breaks Sound Barrier
In the Black Rock Desert in Nevada Briton Andy Green drove his "Thrust SuperSonic" at sppeds of 764+mph, breaking the sound barrier for the first time (officially) in a ground bound vehicle. His jet powered vehicle achieved mach 1.007 and mach 1.003 in its two runs, making it the official record breaker. Andy Green, who is a Royal Air Force fighter pilot, was not given a speeding ticket by Nevada State Troopers! My guess is either they couldn't catch him, or their radar guns went off the scale!



Thanks for reading Goodies to Go!

 

Archive Home Page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date