Thursday, March 28, 2024

October 14, 2002– Newsletter #202


Goodies to Go ™
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/design/css-html-text-color/

 

 

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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured