Lesson 8

This lesson is all about the little extra accessories which are not actually part of the HTML standard, set by the W3C, they are extra tags which are recognised by either Microsoft Internet Explorer or Netscape Navigator, there is only one of them recognised by both. These tags although quite useful should not be overused because you are already eliminating about 50% of your audience by doing so. The extras for Microsoft Internet Explorer are often referred to as "microsoftisms" and the extras for Netscape Navigator are often referred to as "netscapisms" hence the strange names for this lesson and its chapters.

The following tags are Microsoft Internet Explorer tags except for the embed tag which is a Netscape tag but works on Explorer.

scrolling marquee

You probably have a scrolling marquee screen-saver on your computer. A scrolling marquee is scrolling text. Internet Explorer is able to have text scrolling across the browser window. Usually text is displayed in a marquee but Internet Explorer 4 allows for images, lists, tables, videos and even links to scroll. This is the full marquee tag:

<marquee behavior=scroll direction=left srolldelay=100 scrollamount=40>This text scrolls from right to left moving 40 pixels after a delay of 100 milliseconds</marquee>

behavior can be set to scroll, slide or alternate. Scroll and slide are almost similar except that with slide the marquee returns to the side it cam from as soon as the nearest point meets the opposite side. With scroll however the marquee does not return to the other side until all of the marquee has disappeared past the opposite side. If you set it to alternate the marquee will bounce from one side to the other.

direction can be set to left or right, left scrolls from right to left and right scrolls from left to right

scrolldelay and scrollamount are used to determine the speed of the marquee, for example the above tag creates a marquee that moves 40 pixels every 100 millisecond, this is the same as 400pixels/second.

There is no point in showing you a picture of a scrolling marquee because it will be still (obviously) and will not have the same effect! Just try it out.

background sound

You can set a ".wav", ".mid" or any other sound file to play in the background when your page is opened. The only attribute of the tag is "loop=", this can be set to any number and the file will play that many times. Here is the completed tag:

<bgsound src= "sound.wav" loop= "3">

Obviously I cannot provide an Explorer View of a sound so we will just continue with the next tag!

fixed background

We discussed earlier in the book this attribute of the body tag:

<body bgproperties=fixed>

I just want to tell you that this attribute will only work with Internet Explorer.

embedded video

There are two ways to embed video with Internet Explorer, one of them is the way set by Microsoft and the other is the way set by Netscape which actually also works with Internet Explorer. I will discuss the Microsoft way first.

The way to do this is to use this attribute of the <img> tag:

You can then use all the attribute of the tag, which we discussed in chapter 5. You can also provide an alternative image like this:

<img dynsrc= "video.avi" src= "alternative picture.gif">

for those viewing your site without Internet Explorer. Supposedly you can also include controls for your video by including the attribute "controls" but I cannot get it to work.

And now for the Netscape way

The Netscape way of embedding makes it possible also to embed sound files. It is very easy. This is the tag.

<embed src= "video.avi">

<embed src= "sound.wav">

I recommend that you use this way if you are going to embed video because it will appear on both Internet Explorer and Netscape Navigator and the viewer will have controls. It is not however as visually attractive.

Explorer View 11.1 - click on the image to see a bigger and clearer version

All of the tags in this chapter are designed by Netscape and all except the <embed> tag can be viewed only with Netscape Navigator. This is a very short chapter. I can not show you any resulting screen shots because I do not have Netscape Navigator.

blinking text

It is possible to have text blink on and off with Navigator. There are no attributes to take into account just the start and end tags.

<blink>now you see it, now you don’t, now you see it</blink>

On other browsers the text will appear normally.

multiple columns

You can split your text and images into multiple columns using the <multicols> tag. Here it is in its completed form.

<multicols cols=3 gutter=30 width=800>your text goes here</multicols>

cols sets the number of columns

gutter sets in pixels the space between each column

width sets in pixels the width of the entire browser window

blank space

It is possible with the <spacer> tag to leave sections of your page blank. There are three types of spacers, horizontal, vertical and block. There is no need for me to describe each one. If you set type to either horizontal or vertical then you must include the attribute "size=" and set it in pixels. If you set type to box then you must include three other attributes, "height=" and "width=" are both measured in pixels and "align=" can be set to left or right. For example:

<spacer type= "horizontal" size= "80">

<spacer type= "vertical" size= "100">

<spacer type= "block" height= "50" width= "300">

embedding videos and sounds

We discussed in the last chapter the Netscape tag for embedding videos and sounds and there is also a screen shot of what the embedded media looks like.

next lesson home comment more downloads download this

HTML Builder- End of Lesson 8

This lesson was different than the others and so will the builder be. The changes you make during this session depend on your browser. There will be a section for the "Explorers" and a section for "Navigators". There are two documents however that all of you must change the same. They are "menu.html" and "detailed.html". Both of these just require an additional anchor at the bottom. "Detailed.html" is quite long so I will not show the entire document just the bit at the end.

Notepad Viewer- HTML Builder 8.1(detailed.html)

<li><a href="builder.html#lesson7" title="Paragraph about what I learned from Lesson 7">Lesson 7</a>

<li>inserting frames

<li>customizing frames

<li>linking between frames

</ul>

<li><a href="builder.html#lesson8" title="Paragraph about what I learned from Lesson 8">Lesson 8</a>

<ul>

<li>Microsoft Internet Explorer extras

<ul type=disc>

<li>Scrolling marquee

<li>Background music

<li>Fixed background

<li>embedding videos

</ul>

<li>Netscape Navigator extras

<ul type=disc>

<li>Blinking text

<li>Blank spacers

<li>Multiple columns

<li>Embedding videos and sounds

</ul>

</ol>

</td>

</tr>

</table>

</body>

</html>

This is the anchor that you must add to the bottom of "menu.html":

<a href="builder.html#lesson8" target="window">Lesson 8</a> 

Both the anchors we inserted led to "builder.html#lesson8", this does not yet exist so we must create it. I trust that at this stage you will be able to add what I tell you without me showing you the complete listing. I want those of you with Internet Explorer to add this to the end of your page:

Notepad Viewer- HTML Builder 8.2(builder.html)

<a name="lesson8"><h2>This is what I have learned from lesson 8</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href="detailed.html#top">back to contents</a>

In this lesson I learned about the extras for Internet Explorer and Netscape Navigator. My browser is Internet Explorer so click

to see a page that displays these extras. It will open in it's own window.

The extras for Netscape Navigator are blinking text, extra blank space wherever you want it, embedded video and sounds and multiple columns.

And I want those of you with Netscape Navigator to add this to the end of "builder.html":

Notepad Viewer- HTML Builder 8.3(builder.html)

<a name="lesson8"><h2>This is what I have learned from lesson 8</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href="detailed.html#top">back to contents</a>

In this lesson I learned about the extras for Internet Explorer and Netscape Navigator. My browser is Netscape Navigator so click

to see a page that displays these extras. It will open in it's own window.

The extras for Internet Explorer are background music, fixed background images, embedded video and scrolling marquee.

Those of you with Internet Explorer will have to create "explorer.html" and those of you with Netscape Navigator will have to create "navigator.html". Both of these require friends.qt, "explorer.html" also requires image.gif, explorersound.wav,indexsound.wav and scrollingimage.gif, "navigator.html" requires navigatorsound.wav.

Even if you have downloaded this lesson you will still have to download friends.qt & explorersound.wav and indexsound.wav OR navigatorsound.wav, if you are reading this online then you will also need to download image.gif & scrollingimage.gif (if you need them, you don't need them if your browser in Netscape). Right-click on the links you want to download and choose "save target as..." or "save link as...", whichever appears (it will depend on your browser). Save the files in the same folder as your html builder file.

Notepad Viewer- HTML Builder 8.4(explorer.html)

<html>

<head>

<title>Extras for Internet Explorer</title>

</head>

This text scrolls but it is not the only thing that can.

<li>lists

<li>tables

<li>forms

<li>links

<li>images

<li>all other html accessories

</ul></big>

can too. For example here is an image:<img src="scrollingimage.gif">

</marquee>

Here is an embedded video for your enjoyment

<big>Note also that the background image does not scroll</big>

</body>

</html>

Notepad Viewer- HTML Builder 8.5(navigator.html)

<html>

<head>

<title>Extras for Netscape Navigator</title>

</head>

<spacer type= "horizontal" size= "80"><blink>this blinking text is indented because of a blank spacer tag</blink>

This text is indented for numerous lines because the spacer type is block. This text is indented for numerous lines because the spacer type is block. This text is indented for numerous lines because the spacer type is block. This text is indented for numerous lines because the spacer type is block. This text is indented for numerous lines because the spacer type is block.

This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns. This text is in two columns.

</multicols>

Here is an embedded video and an embedded sound file.

</body>

</html>

"Navigators" are now finished but "explorers" have one more change to make. I want you to change "index.html", not a big change, just add a background sound to it by including this tag between the <body> and </body> tags: <bgsound src= "indexsound.wav">

next lesson home comment more downloads download this

Information The official home-page where this document can be downloaded is http://www.geocities.com/SiliconValley/Network/4759/
This document (whole or part) is not to be used, plagiarised, or its' content attributed to any other author. Any quotes must be acknowledged to the author and the author must be informed of the quotation before it's publication. This is effective whether the quotation is being transmitted by electronic or any other means. The author of this document is Oisin Prendiville who can be contacted at html3.2@technologist.com