Friday, March 29, 2024

August 12, 2002– Newsletter #193


Goodies to Go ™
August 12, 2002–Newsletter #193

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


 
Goodies Announcement

Just in case you missed it last week, the new Beyond HTML Goodies book has just been released!

 

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 – XHTML – HTML Evolves

If you were looking for the next
release of HTML to be 4.5 or maybe 5.0, you may be surprised to know that it is
more likely to be XHTML 1.0. As the demands for flexibility and power in web
development increase, it’s only natural that HTML would have to evolve with the
changing demands. In an effort to grow HTML, the W3C has put together its second
set of recommendations for the next metamorphosis of HTML known as XHTML.

 

XHTML stands for eXtensible HyperText
Markup Language. It is an effort to marry the standards of HTML with the power
and flexibility of XML. With HTML you have a good solid standard from which to
develop your websites. By adding XML to the mix, it is hoped that web
development will become more simplified and that new ideas and innovations can
be implemented more quickly and easily.

 

So, what does it all mean?

 

Well, it doesn’t mean you are going
to learn all about XML. While the technology is largely based on XML, it doesn’t
mean that you will necessarily be creating XML files.

 

It also doesn’t mean that you are
going to need to relearn the HTML that you have come to know. Backward
compatibility with previous versions of HTML is being very carefully thought
through.

 

What it does mean is that you may
have to change the way that you think about your code. XHTML will be much more
strict than HTML. This "strictness" comes from the fact that XML must be "well-formed". "Well-formed" simply means that the structure of your
code must be complete with a beginning and an end; no shortcuts allowed. Here
are some of the changes that you can expect when going from HTML to XHTML:

 

Nesting elements – When
putting one element inside another you must put them in the proper order from
inside to outside. For example:

 

This would not be legal in XHTML
because the </b> and </p> tags are switched:

  <p>Hello <b>World!</p></b>

 

Case sensitivity – This one will
probably throw off most developers in the beginning. <p> and <P> will no longer
be the same thing. You might want to go ahead and get used to using all lower
case now.

 

Beginning and end – All elements will
have to have a beginning and ending tag. No more using <p> without putting a
</p> at the end of your paragraph.

 

Quotes – Quotes will be required when
setting ANY attribute value, even numerical ones.

 

Attributes spelled out – You will
have to always completely spell out what you want your attributes to do. For
example, if you want to set an option in a dropdown list box to checked, your
attribute will no longer look like this:

 

  <option selected>Best
Choice</option>

 

It will look something like this:

 

  <option selected="selected">Best
Choice</option>

 

Empty elements – This would be
elements like breaks, <br>, that do not logically have a beginning and an end.
To combine the fact that these type of elements are a single line entity they
will be denoted with a special indication like <br/>.

 

The above are just an introduction to
some of the differences between HTML and XHTML. In actuality, there are 12
specific differences that the W3C outlines in their latest release of the XHTML
specifications proposal.

 

If you are interested in reading the
complete specs on the XHTML 1.0 proposal including some of the DTD’s, you can go
to
http://www.w3.org/TR/2002/REC-xhtml1-20020801/
. This is, of course, written
in the usual W3C hard-to-decipher format so enjoy!

 

The release of XHTML is not really
intended to upgrade HTML itself but rather restructure how HTML is handled. So,
don’t expect a host of new elements to be added. Do expect to see more rigid
requirements in how you write your code.

 

Thanks for reading!

 

Quiz Goodies

When creating an HTML
form, how do you control the tab order for each of your form elements in the
form?

 

Read answer below.

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 designing
a web page. I have a picture at the top of it. But I would like this picture to
be different every time the page is opened or refreshed (randomly selected or
sequentially selected say from a list of 10 pictures). I would like to know how
to do this as I can’t find any information on it, but am probably using the
wrong keywords. Do you know the code for this and where the pictures would be
stored? If you are able to help, I would be most grateful.

 

A. What you want
is fairly simple and can be done with JavaScript. I’ve included a script that
will do exactly what you are looking for. Just make sure that the images are in
the same directory as your pages.

<!– TWO STEPS TO INSTALL RANDOM IMAGE:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document –>

<!– STEP 1: Paste this code into the HEAD of your HTML document –>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!– Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = ‘1.gif’
theImages[1] = ‘2.gif’
theImages[2] = ‘3.gif’
theImages[3] = ‘4.gif’

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write(‘<img src="’+theImages[whichImage]+’">’);
}

// End –>
</script>

</HEAD>

<!– STEP 2: Copy this code into the BODY of your HTML document where you want
your images to show up –>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!– Begin
showImage();
// End –>
</script>

 


*** This question was submitted to our Mentor Community. The answer was provided
by Aida Guzman, one of our Web Design Mentors.

 

Q. I’m having
trouble with my HTML frames. I’ve looked over everything twice and as far as I
can tell ALL my code is correct. But when I click on a link in my navigation
frame the page doesn’t open in the main frame but opens a new page that has no
frames! I’m stuck. My code is fairly standard frames codes.

 

A. You will need
to name the frame for the link to target to and include that target frame name
in your link. Here’s the tutorial page that explains it:

http://www.htmlgoodies.com/tutors/frame1.html
.

 


*** This question was submitted to our Mentor Community. The answer was provided
by Marty Bozeman, one of our HTML Mentors.

 

Q. I wanted to
know if there is anyway for a JavaScript to write to a file on the server?

 

A. JavaScript
does not support reading or writing to files or traversing directories. The only
way to get this functionality is to use PHP or PERL/CGI on the server side.

 


*** This question was submitted to our Mentor Community. The answer was provided
by C.L. Smith, one of our JavaScript Mentors.

News Goodies

Some security experts are warning
Instant Messenger users not to talk to strangers.


Click here to read the article

 

Hackers never seem to get tired or
bored. One of the newest targets are the Apache 2.0 servers.


Click here to read the article

 

Amazon.com has been making a new deal
every time you turn around. Their newest deal to come to fruition is with Target
and Target’s new and improved Amazon-driven e-commerce site.


Click here to read the article

 
 
Quiz Answer

The tab order refers to what element
the cursors moves to each time you hit the tab key while filling out a web form.

 

Controlling the tab order on a form
is easy with the TABINDEX attribute. You simplly add TABINDEX to any form element
tag like this:

 

<INPUT TYPE="text" NAME="T1"
SIZE="20" TABINDEX="1">

 

The number that you assign the
element dictates its order. Order is always determined in ascending order, i.e.
1, 2, 3, etc. You also don’t have to use numbers in a strict sequence. Many
developers will set tabs in multiples of 5, just in case they need to add
another form element between two existing elements later. This technique will
keep you from having to renumber an entire page of form elements each time you
add a new one.

 

 

And Remember This . . .

Today in 1961, Communist East Germany
erected the Berlin wall overnight in an effort to keep the citizens of East
Germany from migrating to West Germany via Berlin. Though the Berlin wall was a
formidable barricade, it didn’t stop some Germans from finding a way over, under
or around it.  The Berlin wall lasted an amazing 38 years until it was
torn down in 1989 when East and West Germans were officially reunited.



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