Tricks of the trade:
Extend Composer with hand-coding
by Alan Zisman (c) 2002
- Open your page in Netscape Composer (etc)
- Click on Edit/HTML Source
- If your file has not been saved, you'll be prompted to do so...
- If this is the first time you're doing this in Composer, you'll be asked to select the program to use. Unless you have a better HTML source editing program, Windows users will probably want to use Windows Notepad... so browse to yourC:\Windows folder, and pick Notepad.exe (or just type: C:\Windows\Notepad.exe in the dialogue box). Mac users could point to Simpletext or OS X TextEdit. (BBEdit Light is a popular free alternative on the Mac).
- The file will be loaded into Notepad, and will look something like this:
Netscape
Composer
and
other free easy-to-use Web page layout software let you
create
a basic webpage without needing to muck about with the underlying HTML
code.
A little not-too-difficult editing, lets you do more, however.
Your browser makes your Web page look graphical, with different fonts and sizes, graphics, tables, and more. When you go to a particular Web page, for instance this one: http://www.zisman.ca/composer/extend.html, you're opening a plain-text file: extend.html, in the 'composer' folder on a Web server somewhere. It includes the text, and instructions on how to make it appear, instructions where to find the graphics files and how to make them appear, information about links, and so forth. All this can be viewed in a basic text editor like Windows Notepad or the Mac's SimpleText, as well is in your browser's View Code window.
Note: it's probably a bad idea to use a word processor such as Microsoft Word or AppleWorks to view your HTML code. You can do it, as long as you remember to always save as Plain Text rather then your word processor's defaults-- which adds all sorts of junk to the code.
Some people prefer to create Web pages by directly writing HTML code, either in a dedicated HTML editor such as Macromedia Homesite, or in an enhanced text editor (BBEdit is popular on the Mac), or even right in Notepad or SimpleText. While you're welcome to do so, in this tutorial we're going to look at how to add short snippets of code to pages that are mostly produced in Composer. (Similar steps can be followed if you use another Web page layout program, whether Microsoft Front Page, the free AOL Press, or other).
Viewing your code in Netscape Composer
note: these steps are taken from Netscape Composer ver 4.x; they may be somewhat different in earlier or later versions. In particular, versions 6.0 or later will be more like the instructions for Mozilla Composer given below.
Make whatever changes you want to this 'source code'. When you are done, save your changes and exit Notepad... you'll see the following message:
Viewing your code in Mozilla Composer
In the new Mozilla Composer, it's easy. There's no need for an external text editor like Notepad or Simpletext. While you could use the View menu's HTML Source option, it's even easier to click on the <HTML> Source tab on the bottom of the screen. You can type right into this window (if you first save your file); changes you make will be displayed when you click back on the Normal tab.
Here are some tricks:
Open Link in New Window
You may have seen Web pages where, if you click on a link, the link opens up a new browser window; your original page remains in the first window. Imagine you have a Web page with text including a link reading:
Click here to go to Alan's home page.
When you view the code, you'll see this:
Click <a href="http://www.zisman.ca"><b>here</b></a> to go to Alan's home page.<br>
Edit the code to read:
Click <a href="http://www.zisman.ca" target="_new"><b>here</b></a> to go to Alan's home page.<br>
That's it-- adding target="_new" into the link is all it takes.
Automatically re-direct to your current address
If you've revised your site, you may have a page that's moved to a new address. Maybe you've changed your folder structure, or moved to a completely new domain. It's easy to make a page that will automatically redirect traffic to the new address.
Make a new page in Composer, with whatever you want on it-- perhaps a note that:
"This page has moved to www.newaddress.com. Your browser will automatically go there in 3 seconds, if that doesn't happen, click here."
Edit the HTML source code, and in between the <HEAD> and </HEAD> tags (near the beginning of the file) add the following lines:
<meta http-equiv="refresh"
content=3;URL=http://www.newaddress.com" />
Note that the number '3' in the code is the time in seconds before the browser goes to the new address; feel free to experiment with it.
Add music, sound, or video to your page
Scroll down almost to the bottom of your code until you see </body> and press Enter to get a new line right above it. Add the following:
<EMBED SRC="Testsound.wav" width=1 height =1 hidden=true autostart=true loop=false>
(It's OK if it takes more than one line, but don't press Enter to break up the line... this assumes, of course, that you have a sound file "Testsound.wav")
If you want the sound to only play once, then loop=false... if you want it to keep playing as long as the page is being displayed, change it to read loop=true
This may display a small empty square on the Web page in Composer. It won't appear when the page is viewed in a browser.
Internet Explorer supports a different (simpler) way to play background music or sounds, the BGSOUND tag. This is ignored by Netscape and other browsers, but you could try:
<BGSOUND="Testsound.wav">
Supported sound formats are WAV, MID, and AU.
Alternatively, you could simply make a link to a sound file, just as you make any other sort of link. (In Composer, make sure you have it show you All Files rather then just HTML. When a reader clicks the link, it will load the sound file.
Similar steps can be taken to insert video clips.... at least for Internet Explorer. A link reading:
<IMG DYNSRC="test.avi" SRC="magic.gif" ALT="[A Magic Show]">
will play the test.avi video clip, showing the GIF picture if the video clip is unavailable, and showing the ALT text if graphics are turned off, or while the video is downloading.
Netscape will ignore this instruction. The EMBED command that we used for sounds can load video clips as well, in both Netscape and IE-- but it requires a compatible plug-in, so it might or might not work on a given system. For example:
<EMBED SRC="test.avi" AUTOSTART="true" LOOP="true">
would (on a good day), automatically play the test.avi video clip, playing it as long as the page is being viewed.
Use curly quotes
So-called curly quotes both look nicer and are the typographically correct things to use for quotation marks and apostrophes. The ' and " marks that your keyboard makes are actually the signs for inch and foot. To get the correct marks, look at your source code and insert the following codes:
Note
that if you're using Mozilla
Composer, you'll really notice the lack of search/replace functions in
the
otherwise nice <HTML> Source view... if you have a lot of
these to
change, you'll be better off opening your source code in Notepad,
Simpletext,
or some other text editor that will make it easier to find all
instances
of the items you want to change.
Other special characters
Using the same process as for curly quotes, you can insert other special characters. Here are some, along with the codes you need to insert to make them magically appear:
Specify fonts
Composer (et al) allows you to specify fonts, but that causes a problem if that font doesn't appear on the viewer's computer. The workaround is to specify several fonts, in order of preference, in the hope that the viewer will have at least one of them installed. For example, you can insert the following -- in front of the code for the text block you want to apply it to:
<font face="verdana, arial, geneva, sans-serif">
and be sure to add the following at the end of the text block: </font>
This tells your browser to look for the Verdana font, and use it if it's available. If not, use Arial, and if that's not available, use Geneva. Since Arial is a standard Windows font, and Geneva is a standard Mac font, you know that most computers will have one of these... and just in case, it will use your system's default sans-serif font.
Use Meta tags to help search engines identify your page
Search engines send out 'spiders' that try to find and categorize new Web pages. They look at several things on your page: The page title you entered in the appropriate place, and the text in the first paragraph for example-- so make sure these are descriptive of your content!
As well, they check so-called meta tags; entries to your code that aren't displayed on the page. The two most useful ones for our purposes are the Description and Keyword tags. If there is a Description tag, many search engines will display it, rather than the first 250 characters that appear on the page. And if you include Keywords, your page is more likely to show up when a visitor to a search engine types in that keyword. So put some time into brainstorming as many potential keywords as you can. In fact, ask your friends to try and think of what keywords they might type into a search engine to try to find your site.
Both of these meta-tags appear in the HTML source code between the <HEAD>tag and the </HEAD> tag... near the top, that is, prior to the actual content (which is under the <BODY> tag). For example:
<META NAME="description" CONTENT="While Netscape Composer is a good basic Web page layout program, users can extend it by learning how to edit HTML source code by hand. This site offers a tutorial with a number of useful tricks of the trade.">
and
<META NAME="keywords" CONTENT="Netscape, Composer, Web, design, layout, HTML source code, Zisman">
Have fun with horizontal rules
Composer and other such programs have a button or a command to add a default Horizontal Rule (or Horizontal Line) on the page, which places a 2 pixel line across the page like this:
With some simple additions to the code, you can change the line's appearance. The HTML command for such a line is simply <HR>. Try, however, making thicker lines:
<HR SIZE="8"> would make the line 8 pixels thick.
By default, the line spans 100% of the page. Try:
<HR WIDTH="50%">
By default, the line is centered. You can left or right-align it:
<HR ALIGN="LEFT"> or <HR ALIGN="RIGHT">
And feel free to mix and match all of these additions, for example:
<HR SIZE="16" WIDTH="25%" ALIGN="RIGHT">
Adding other code snippets
If you scroll down to the bottom of this page, you'll see a search bar, based on the popular Google search engine. How did I do that? Simple! Google offers a free WebSearch and SiteSearch feature at: http://www.google.ca/services/free.html. When you sign-up, giving the URL for your website, they give you some customized code that you can insert into the HTML source code for your page (or pages)-- it produces the search bar you see below. View the source code for this page and look for it; it's in between the two <!-- Search Google --> tags.
I made one change. The default, as written by Google, was to search the Web.... I wanted to change it to search Zisman.ca by default. So I looked at Google's code snippet, and found code reading:
<input type="radio" name="sitesearch" value="" checked="checked"> Search WWW
<input type="radio" name="sitesearch" value="www.zisman.ca" > Search www.zisman.ca
I moved the checked="checked" text from the first line to the second... and it did what I wanted-- checking the Search www.zisman.ca option.
How did I know to do this? I didn't. Experimentation is OK, as long as you keep a copy of the code before you start to play with it!
Note that the code, as you'll see it in the source isn't neatly lined up. Your browser doesn't care if the code is broken among several lines, or several lines are combined on one... that just makes it easier for mere humans to deal with it.
You'll find other 'code snippets' on the Web, perhaps to embed Java applets or do other neat things... you can insert the code into your HTML Source, just as I did with the Google search feature code. You don't need to know how the code works... I don't!
Adding Image Maps
Another way that code snippets can be added is to create so-called client-side image maps. Image maps are pictures that have been 'mapped' so that portions of the picture become links to different sites. Imagine a real map of Canada where clicking on each province goes to a page with information about that province. When I was one of three technology mentor teachers for the Vancouver School District, the three of us created a web page with a picture of us; each person's body was linked to that person's website.
To make an image into an image map, you need an application that will let you generate the code to go along with the image-- then you simply copy and paste the code into your source code. Free alternatives include: Handy Image Mapper and ImageMap Applet Builder (both for Windows).
Here's a screen shot of Handy Image Mapper:
You open an image (preferably already in the same folder as your HTML file), outline areas with the various tools, and type in an (optional) Tooltip and link target. When you're done, click the Place on Clipboard button, which copies the code, ready to paste into your source code. Simple!
- last revised 22 September, 2002
Web Page Creation
and Maintenance series:
Your browser makes your Web page look graphical, with different fonts and sizes, graphics, tables, and more. When you go to a particular Web page, for instance this one: http://www.zisman.ca/composer/extend.html, you're opening a plain-text file: extend.html, in the 'composer' folder on a Web server somewhere. It includes the text, and instructions on how to make it appear, instructions where to find the graphics files and how to make them appear, information about links, and so forth. All this can be viewed in a basic text editor like Windows Notepad or the Mac's SimpleText, as well is in your browser's View Code window.
Note: it's probably a bad idea to use a word processor such as Microsoft Word or AppleWorks to view your HTML code. You can do it, as long as you remember to always save as Plain Text rather then your word processor's defaults-- which adds all sorts of junk to the code.
Some people prefer to create Web pages by directly writing HTML code, either in a dedicated HTML editor such as Macromedia Homesite, or in an enhanced text editor (BBEdit is popular on the Mac), or even right in Notepad or SimpleText. While you're welcome to do so, in this tutorial we're going to look at how to add short snippets of code to pages that are mostly produced in Composer. (Similar steps can be followed if you use another Web page layout program, whether Microsoft Front Page, the free AOL Press, or other).
Viewing your code in Netscape Composer
note: these steps are taken from Netscape Composer ver 4.x; they may be somewhat different in earlier or later versions. In particular, versions 6.0 or later will be more like the instructions for Mozilla Composer given below.
Make whatever changes you want to this 'source code'. When you are done, save your changes and exit Notepad... you'll see the following message:
Of
course,
you
could ignore Composer entirely, and simply open your saved
HTML
page directly in Notepad (et al)... and use a Web browser to see the
effect
of your changes to the code! If you are using Notepad's File/Open menu
to
open your HTML page, you'll need to select File of Type: All
Files
to see your saved file in the dialogue box.
Viewing your code in Mozilla Composer
In the new Mozilla Composer, it's easy. There's no need for an external text editor like Notepad or Simpletext. While you could use the View menu's HTML Source option, it's even easier to click on the <HTML> Source tab on the bottom of the screen. You can type right into this window (if you first save your file); changes you make will be displayed when you click back on the Normal tab.
Here are some tricks:
Open Link in New Window
You may have seen Web pages where, if you click on a link, the link opens up a new browser window; your original page remains in the first window. Imagine you have a Web page with text including a link reading:
Click here to go to Alan's home page.
When you view the code, you'll see this:
Click <a href="http://www.zisman.ca"><b>here</b></a> to go to Alan's home page.<br>
Edit the code to read:
Click <a href="http://www.zisman.ca" target="_new"><b>here</b></a> to go to Alan's home page.<br>
That's it-- adding target="_new" into the link is all it takes.
Automatically re-direct to your current address
If you've revised your site, you may have a page that's moved to a new address. Maybe you've changed your folder structure, or moved to a completely new domain. It's easy to make a page that will automatically redirect traffic to the new address.
Make a new page in Composer, with whatever you want on it-- perhaps a note that:
"This page has moved to www.newaddress.com. Your browser will automatically go there in 3 seconds, if that doesn't happen, click here."
Edit the HTML source code, and in between the <HEAD> and </HEAD> tags (near the beginning of the file) add the following lines:
<meta http-equiv="refresh"
content=3;URL=http://www.newaddress.com" />
Note that the number '3' in the code is the time in seconds before the browser goes to the new address; feel free to experiment with it.
Add music, sound, or video to your page
Scroll down almost to the bottom of your code until you see </body> and press Enter to get a new line right above it. Add the following:
<EMBED SRC="Testsound.wav" width=1 height =1 hidden=true autostart=true loop=false>
(It's OK if it takes more than one line, but don't press Enter to break up the line... this assumes, of course, that you have a sound file "Testsound.wav")
If you want the sound to only play once, then loop=false... if you want it to keep playing as long as the page is being displayed, change it to read loop=true
This may display a small empty square on the Web page in Composer. It won't appear when the page is viewed in a browser.
Internet Explorer supports a different (simpler) way to play background music or sounds, the BGSOUND tag. This is ignored by Netscape and other browsers, but you could try:
<BGSOUND="Testsound.wav">
Supported sound formats are WAV, MID, and AU.
Alternatively, you could simply make a link to a sound file, just as you make any other sort of link. (In Composer, make sure you have it show you All Files rather then just HTML. When a reader clicks the link, it will load the sound file.
Similar steps can be taken to insert video clips.... at least for Internet Explorer. A link reading:
<IMG DYNSRC="test.avi" SRC="magic.gif" ALT="[A Magic Show]">
will play the test.avi video clip, showing the GIF picture if the video clip is unavailable, and showing the ALT text if graphics are turned off, or while the video is downloading.
Netscape will ignore this instruction. The EMBED command that we used for sounds can load video clips as well, in both Netscape and IE-- but it requires a compatible plug-in, so it might or might not work on a given system. For example:
<EMBED SRC="test.avi" AUTOSTART="true" LOOP="true">
would (on a good day), automatically play the test.avi video clip, playing it as long as the page is being viewed.
Use curly quotes
So-called curly quotes both look nicer and are the typographically correct things to use for quotation marks and apostrophes. The ' and " marks that your keyboard makes are actually the signs for inch and foot. To get the correct marks, look at your source code and insert the following codes:
| opening single
quote |
‘ |
‘ |
| closing
single
quote
or apostrophe |
’ |
’ |
| opening
double
quote |
“ |
“ |
| closing
double
quote |
” |
” |
Other special characters
Using the same process as for curly quotes, you can insert other special characters. Here are some, along with the codes you need to insert to make them magically appear:
| • |
• |
–
(en
dash) |
– |
—
(em
dash) |
— |
| © |
© |
™ |
™ |
£ |
£ |
| ¢ |
¢ |
ñ |
ñ |
® |
® |
| é |
é |
¥ |
¥ |
…
(ellipsis) |
… |
Specify fonts
Composer (et al) allows you to specify fonts, but that causes a problem if that font doesn't appear on the viewer's computer. The workaround is to specify several fonts, in order of preference, in the hope that the viewer will have at least one of them installed. For example, you can insert the following -- in front of the code for the text block you want to apply it to:
<font face="verdana, arial, geneva, sans-serif">
and be sure to add the following at the end of the text block: </font>
This tells your browser to look for the Verdana font, and use it if it's available. If not, use Arial, and if that's not available, use Geneva. Since Arial is a standard Windows font, and Geneva is a standard Mac font, you know that most computers will have one of these... and just in case, it will use your system's default sans-serif font.
Use Meta tags to help search engines identify your page
Search engines send out 'spiders' that try to find and categorize new Web pages. They look at several things on your page: The page title you entered in the appropriate place, and the text in the first paragraph for example-- so make sure these are descriptive of your content!
As well, they check so-called meta tags; entries to your code that aren't displayed on the page. The two most useful ones for our purposes are the Description and Keyword tags. If there is a Description tag, many search engines will display it, rather than the first 250 characters that appear on the page. And if you include Keywords, your page is more likely to show up when a visitor to a search engine types in that keyword. So put some time into brainstorming as many potential keywords as you can. In fact, ask your friends to try and think of what keywords they might type into a search engine to try to find your site.
Both of these meta-tags appear in the HTML source code between the <HEAD>tag and the </HEAD> tag... near the top, that is, prior to the actual content (which is under the <BODY> tag). For example:
<META NAME="description" CONTENT="While Netscape Composer is a good basic Web page layout program, users can extend it by learning how to edit HTML source code by hand. This site offers a tutorial with a number of useful tricks of the trade.">
and
<META NAME="keywords" CONTENT="Netscape, Composer, Web, design, layout, HTML source code, Zisman">
Have fun with horizontal rules
Composer and other such programs have a button or a command to add a default Horizontal Rule (or Horizontal Line) on the page, which places a 2 pixel line across the page like this:
With some simple additions to the code, you can change the line's appearance. The HTML command for such a line is simply <HR>. Try, however, making thicker lines:
<HR SIZE="8"> would make the line 8 pixels thick.
By default, the line spans 100% of the page. Try:
<HR WIDTH="50%">
By default, the line is centered. You can left or right-align it:
<HR ALIGN="LEFT"> or <HR ALIGN="RIGHT">
And feel free to mix and match all of these additions, for example:
<HR SIZE="16" WIDTH="25%" ALIGN="RIGHT">
Adding other code snippets
If you scroll down to the bottom of this page, you'll see a search bar, based on the popular Google search engine. How did I do that? Simple! Google offers a free WebSearch and SiteSearch feature at: http://www.google.ca/services/free.html. When you sign-up, giving the URL for your website, they give you some customized code that you can insert into the HTML source code for your page (or pages)-- it produces the search bar you see below. View the source code for this page and look for it; it's in between the two <!-- Search Google --> tags.
I made one change. The default, as written by Google, was to search the Web.... I wanted to change it to search Zisman.ca by default. So I looked at Google's code snippet, and found code reading:
<input type="radio" name="sitesearch" value="" checked="checked"> Search WWW
<input type="radio" name="sitesearch" value="www.zisman.ca" > Search www.zisman.ca
I moved the checked="checked" text from the first line to the second... and it did what I wanted-- checking the Search www.zisman.ca option.
How did I know to do this? I didn't. Experimentation is OK, as long as you keep a copy of the code before you start to play with it!
Note that the code, as you'll see it in the source isn't neatly lined up. Your browser doesn't care if the code is broken among several lines, or several lines are combined on one... that just makes it easier for mere humans to deal with it.
You'll find other 'code snippets' on the Web, perhaps to embed Java applets or do other neat things... you can insert the code into your HTML Source, just as I did with the Google search feature code. You don't need to know how the code works... I don't!
Adding Image Maps
Another way that code snippets can be added is to create so-called client-side image maps. Image maps are pictures that have been 'mapped' so that portions of the picture become links to different sites. Imagine a real map of Canada where clicking on each province goes to a page with information about that province. When I was one of three technology mentor teachers for the Vancouver School District, the three of us created a web page with a picture of us; each person's body was linked to that person's website.
To make an image into an image map, you need an application that will let you generate the code to go along with the image-- then you simply copy and paste the code into your source code. Free alternatives include: Handy Image Mapper and ImageMap Applet Builder (both for Windows).
Here's a screen shot of Handy Image Mapper:
You open an image (preferably already in the same folder as your HTML file), outline areas with the various tools, and type in an (optional) Tooltip and link target. When you're done, click the Place on Clipboard button, which copies the code, ready to paste into your source code. Simple!
- last revised 22 September, 2002
Web Page Creation
and Maintenance series:
Before
you
begin- an Introduction
Using
Netscape Composer to
create web pages
Webpage
Creation hands-on
practice
Netscape
Gold to create web
pages on older computers
Adding
sounds and music to your webpages new!
Using
WS_FTP to upload and maintain your web pages
Making
web animations with free tools new!
Alan Zisman is a Vancouver educator, writer, and computer specialist. He can be reached at alan@zisman.ca