August 12, 2002-- Newsletter #193

By Joe Burns



Goodies to Go (tm)
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.



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