This page was recently restructured. The contents on the World Wide Web are now divided into several pages. The page of introduction to the World Wide Web contains an introduction and a description of the elements that one finds on Web pages and Web sites.
There is also a page containing advices for the creating Web pages, the promotion of the site and the publication. Both following pages are for the conception of Web pages by using Netscape Composer ( this page) or Microsoft Word. There are many of the small advices that are included on these pages. The next page contains a description of the elements that one finds in a Web form page as well as its advantages and the limitations. To end, there is a page that contains the HTML codes that one finds on all the pages of Web. By understanding their functioning, you can compose better Web pages.
To be able to follow this exercise, you should first have on a computer Netscape Communicator. The images that you see on this page result Composer of Netscape Communicator 4.51. The previous versions are slightly different. So, for the exercises of this page, you should copy to a floppy disk of the following images: lignex.gif for the image that will be insert into the Web page, niceblue.gif for the thorough image of the Web page, boulep.gif for the image that will serve as button of navigation. It will be necessary you also the courrier.ppt presentation for the exercise. This is to demonstrate how to download a file other than a Web page. click the blue links and save these images on a floppy disk.
Introduction
What can you find on a Web page?- Text
- Images
- Dividing lines
- Hypertext links
- Navigation buttons
- Tables
- A background composed of an image
- Frames
- Forms
- Programming (perl, Java, javascript, asp, xml...)

OR

Adding text
You must always remember that the most important element of a Web page is its contents. A ton of images and special effects will never replace a text that's clearly written.

Even if the most important element is the text, it's always possible to change its presentation to make it more elegant or more informative. For that reason, there is a toolbar Composer that facilitates the presentation of the text.
If you don't see this toolbar:

On this toolbar, you'll find tools to change the presentation of the text and more. In the first place, there is a list of the styles that is of use to headings ( headings ). Followed then by the choice of font. Later, there is a size of fonts. Close, there is a list of the available colors. This choice is even vaster than you imagine it. Then, there are the options most often used for the text: the bold, the italic and the underlined.
But there is more. This toolbar offers you also the possibility of preparing a list "non-ordered", without numbers as well as an orderly list. The next exercise consists in creating a not orderly list.

You can now begin to write your list.






It remains that to end the list.

The list is now ended. It should look like this.
- List of points.
- Practice for short lists.
- Very concise.
There is also in the menu size(format) of the options to change the presentation of the text.



From this window, you can change the presentation of the text of your page. It's possible to you to change the font, its size, its color as well as to put options of presentation. The next exercise consists in changing a little the presentation of the sentence.





Here is what should be the result.
There are two other tabs under the window Character properties. The tab Link allows you to create a link on the text to bring the reader to another Web page, to bookmark or another service of the Internet. This part will be seen in detail in the part on the links a little farther on this Web page.
The last tab, Paragraph, allows you to change the presentation of a paragraph. The option Paragraph style allows you to choose among one of the styles of presentation predetermined as a Web page.
Adding images
Without wanting to remove from the importance of the text, one of the elements that returned so popular World Wide Web is the capacity to show images. But careful! The Web accepts only three images formats: gif, jpeg and png. For more details of the three image formats, click here to return to the previous page in the part on the images. assure that the images that you want to use are in one of these formats. Otherwise, you should use a software for the conception of images such as Photoshop, PaintShop Pro and several others to convert your image in one of the accepted formats.The next exercise consists in placing images on the Web page as well as for the bottom of the screen. You will previously have copied files asked at the beginning of this page on a floppy disk. The procedure that follows presumes that you'll take the images required from your floppy disk.

OR

This opens a window that offers all the options for an image. These options are under three tabs Image, Link and Paragraph. Under the Image tab, there are the options to choose an image and how to place it around the text of the Web page.
To choose the image
Before inserting an image into a Web page, it's at first necessary to have created it or to have found it among a collection of images on compact disc or on the Internet. assure that there are no copyrights or a registered trademark on the image that you want to use. If you are not certain, don't use it.






The following image will appear.

As you can notice it, this image is moving. It's the collection of images one behind the other one that gives the effect of animation. There are several small software that help you to create a full of life image. There is even on this site an animated images Web page that has other examples. The part of the image had also two other options.
There is however a problem. Because the image is a full of life image, Netscape Composer is always going to try to read the file on the floppy disk. To avoid this situation:

The image will stop livening up until the presentation of the Web page.
To see these options or to modify the options of the image:

OR


OR

Leave image at the original location
Normally, Compose copy the image that you selected in the same folder (or file) as your Web page. However, he can be advantageous to leave the image with the same place; especially if you reuse the same image several times or for several Web pages. However, this is rarely the case.Use as background
This option is to indicate Composing that you wish to use this image for the bottom of your Web page. It's moreover the next exercise. For the moment, don't select this option.Text alignment and wrapping around embellish with images
Normally, only a line of text takes place close and at the foot of the image. With these options, it's possible to align the line of text with the height of the image, in the middle or at the foot of the image. Furthermore, it's also possible to surround the image of several lines of text as long as the image is stuck on the left or straight(or right,awkward or straight,awkward or right) border of the screen. For the moment, don't change this option.Dimensions
So, it's very important "to reserve" the space for the image. In HTML format, the image is not "integrated" into the document. One space is reserved for it. To accelerate the view of the text, it's necessary to indicate how many spaces, in pixels (no light in the screen) that it's necessary to reserve. This accelerates the view of the text and the page because the Browser is not obliged to read at once the image to know the space that should be reserved for it. He can so put the text more quickly around the images.Space around image
It's also possible to reserve of the space around the image horizontally and vertically. There is, besides, an option to frame(supervise) the image and decide on the thickness (always in pixels). However, this option is rarely used.Alt. LowRes Text/
Besides the image, it's recommended to add a text that describes the image. This is very practical when the Browser is in the incapacity to show the image. At least the reader knows what should have appeared. There is so now another reason. Even if one does not think of it, there are more and more visual handicapped persons who use the Internet. For them, a description is essential.The option LowRes allows to show a small image quickly to be then replaced by a more detailed and more impressive image. This option is rarely used because the Browser should possibly load two images instead of one.
The tab Link
As for the text, it's possible to have a link on an image. It's enough to enter the name of the Web page, the " bookmark ", the address of E-mail, a name of file or another service of the Internet. The links are described besides details a little farther of this page.As for the text, there are also options to align the image. These options are rarely used for an image.
Insert an image for the bottom of the Web page.
The next exercise consists in inserting an image for the bottom of the Web page. It's recommended well to choose the bottom of page to facilitate the reading of the text. If there is not enough contrast between the text and the bottom, the text will be difficult to read.
OR








You will notice that the bottom of the page is now the blue pattern for the image that you selected. There are several software to create capital of pages. There is some more of images already prepared on the World Wide Web that you can use. It's enough a little to look. Compose offer another way of choosing an image as the bottom of Web page. It will be seen toward the end this page.
The horizontal lines
The horizontal lines are used to separate the various parts of a document.
OR

A horizontal line will fit in the length the screen.

OR


OR



The horizontal line will change format according to the options that you chose. Here is a list of the options with a short description.
Option | Description |
Height | Thickness of the line |
Width | Width of line. Can be shown in percentage of the screen or pixels (hurt by light in the screen). |
Alignment | Location horizontal of the line (left, centred or right). |
3D shading | Put one shadow in the line. Only practical for thin lines. |
Extra HTML | This window offers the most frequent options. But there are the other options that are not shown. Here is an example: BORDERCOLOR = " BLUE " |
Save settings have default | This option is very practical if you think of putting several horizontal lines with the same options in your document. |
Adding links
The element that differentiates World Wide Web of the other services of the Internet (E-mail, FTP, IRC, Newsgroups...) the capacity of resources of hypertext links is. There are however several types of links: {FTP}




Fortunately, the concept to create a link is always the same. The next exercises consist in creating links with various elements.
Link on a Web page
The first exercise consists in creating a link on the main page of the university of Quebec in Montreal.

OR

OR

The window to create links on the text appears. The first part indicates on that text the link will be placed. In that case, it's about the text This. Down, it's necessary to indicate the address of the Web page, as well as its bookmark (or target) if need be. In the last box, there is a list of the bookmarks of the common(current) page or the page on that there will be a link.


There is now a link on the word This that will bring you to the main page of the University of Quebec in Montreal ( UQÀM) when you'll click on this link.
It's however necessary to pay attention to the address that one gives to the link. If the link is for another Web page of the same site, it's better to write only the name of the page (conceptw.htm for example).
However, if the Web page is on another site, you have no choice to write the complete address. This address always begins by http://that is the name of the service for the World Wide Web ( HyperText Transfert Protocol). Then there is a name of the server where is this page. For the example, it's about www.uqam.ca. To end, there is a name of the Web page.
If it's not indicated, the Browser fetches automatically the index.html file. It's generally the hidden file that contains the list of the files of the folder (or file). It's however possible to you to save a file under this name. It will be whose page by default and should so be the main page of the site. It's moreover the case for this site.
Link inside a Web page or a " bookmark ".
The next exercise consists in creating a link in another part of the same Web page. It's also called a " bookmark " in English or an internal link. It's first necessary to place a " bookmark " or a " target " on the page then to create a link on this one.

This is to make sure that the beginning of the Web page is not visible at the same time on the screen. The link will be on this first line. It's now necessary to write a little text before inserting the " bookmark ".


OR

It's now necessary to give a representative name to this " target ".


The following icon will appear to indicate that there is a " target " or " bookmark " in this place.
To modify the target:

OR


OR

Now the " bookmark " is inserted, it's necessary to create a link on this one.



OR

OR

The window of the links will open.


The next time when you'll click the link, it will go to the end of the Web page. You can put several targets to return you to several places on the same Web page; even the beginning.
Link in the E-mail
It's also possible to create a link on an address of E-mail. The next exercise consists in creating a link at your address of E-mail. If you don't know or have not no address of E-mail, use the following fictitious address: jeans tremblay@cie.abc.com.


OR

OR

The window for the links will open.


Your Web page has now a link at an address of E-mail. But attention! This link will only work if the reader of the page entered certain data the Browser such as: its name, its address of E-mail, the name of it's server of E-mail and its account number. Certain pries allow you also to enter your password.
The reason is simple, it's impossible to send on the Internet of the "anonymous" messages. So, the data is necessary. It's as for that reason that one writes generally the address of E-mail and that one creates a link on this one. If the reader can not or does not want to enter his coordinates, he can always write the address to send it a message a little later.
Link to a document
A Browser is normally only capable of opening a file of HTML format, a Web page as well as the images of .GIF size(format).JPG and " PNG. There are however some exceptions. The pries can improve with one " plug-ins "; software that add features to the pries. For example, Acrobat Reader allows to open files of .PDF size(format). The FLASH module of Macromedia allows to see animations on Web pages. There are also additional modules to see virtual worlds (in 3 dimensions) or have of the music, of video etc. For quite other kind of file, the Browser will ask you if he should open it with one of the software installed on the computer or save the document on a floppy disk or a hard drive.The next exercise consists in creating a link on a presentation PowerPoint. But the concept applies for any kind of document.



OR

OR



As you'll click on this link from a Browser, this one will ask you if he should open or save the document.
To end the section on the links, it's necessary to mention that it's possible to create links towards other services of the Internet. You can create links to servers ftp ftp://nomduserveurftp, in server to gopher gopher://nomduserveurgopher, in newgroups news://nomdugrouped' interest. It's enough to write in the box of the links the name of the service (ftp, to gopher, news) followed of "://" and the address of the server or the newsgroup. Here are some examples.
Ftp://ftp.microsoft.com
Gopher://
News://comp.win95
Adding navigation buttons
A button of navigation is in fact that a relevant image with a link. What does one want to say by a relevant image? It's an image that incites the reader of the page to press this one to have an action: to move towards another page, another place, to open a document, a link of E-mail or another service. At the foot of each of the Web pages of this site, there are navigation buttons to move from a page to another. So, the main page of this site contains an image that allows you to reach several Web pages. The option of power to create links on parts of images is called in English a " imagemap ". This option is not available Composer.The next exercise consists in inserting a button of navigation on your Web page. In fact, an image with a link.

OR








The following image will appear.

It remains that to put a link on this image.


OR

OR




Besides going to the Web page, you could also have gone to a specific place of the page marked by bookmarks.
Tables
Very often, tables are used to show of the data to inform or to compare. But, in the HTML format, they have also another function: be able to align columns of text. Indeed, Web pages have no instructions for columns. So, it's possible to use the cells of a table to feign columns. It's not necessary to forget not to put a preview so that the effect is complete.The next exercise consists in creating a small table with some of the available options.

OR

The following window will appear.
This part explains the various available options for the creation of a table. It's also necessary to use it to create a table that will be used for the next exercises.
In the first place, it's necessary to indicate how many lines ( rows ) and columns are necessary for the table.


It's then necessary to indicate if you want a description for the table. If yes, it's then necessary to say if you want this description above or below the table.

These options are going to create a cell titles that will be placed above the table.
The next options consist in determining the frame of the table, the cells and the text.
The option To line line width is to determine the thickness of the border of the table. Normally, one leaves it to 1. If one does not want a border, one puts 0 (zeros). For the exercise, we are going to put an a little more thick border.


The option cell spacing is to determine the space, in pixels, between cells. Generally, the spacing is 0 (zeros).

The option Cell padding is to determine the space between the border of the cell and the text. This space is generally 1.

For this exercise, the width of this table will be 400 pixels. For your next tables, you can determine the width of the table of your choice. There are two ways to determine the width of the table: in percentage of the screen or in pixels (or hurt by light in the screen).



don't forget to put this last option in pixels. Otherwise, Composer the table will refuse to create and will show you the following screen:
It's normal because best that you can carry out is 100 % of the screen. If you see this screen, for the needs of the exercise, change the option of width pixels. The fractions are not allowed.
The option banks min. height serves for determining the minimal height of the table. She can be bigger if you enter enough text.

The last option of this part of the window is Equal column widths. It fixes the width of all the columns to the same size. A little farther in this exercise, the width of columns will be changed and will not be the same. For that reason, this option should be déactivée.

The options of the part Banks Background and to determine the thorough color of cells. It's possible to choose a color or same to place an image inside each of the cells. For the purposes of the exercises, a color will be put in the cells of the table.

A palette of color will appear.

If you want the other colors, you can press the button Other at the foot of the window.
This window offers you several ways to choose a color. You can choose among basic colors, personalized colors, united colors or from the index RGB (Red, Green, Blue). This last index allows you to enter a number between 0 and 255 for the levels of red, green and blue. This offers you an incredible palette of a little more than 16 million colors. You can a little experiment to find a tint that pleases you.
But it's always possible to place an image inside. As for the part on the images seen first, it's enough to indicate the name of the image to the option Uses(wears out) Image.
After all these options to compose the table, here is the result.
The next exercises will consist in personalizing the table to meet the needs better as well as to demonstrate you its other possibilities.
Write the text in the box of introduction

Change the width of a column.
In its conception, Composer looks a width identical to all the columns of the table. The next exercise consists in changing the width of each of the columns of the table.






The first column of the table will have now a width of 200 pixels. It's now necessary to repeat this operation for the second and third column of the table. However, their width of both other columns will be 100 pixels and not of 200 as for the first column. Here are the operations:







And now, for the third column of the table.







Insert one arranged in the table.
To have enough space to write all the text in the table, it's necessary to add one supplementary row.

Row will fit below the line where is at present the cursor.
Place a cell on several lines.
It's first necessary to remove the cells of the line then to use the Colspan command "to spread(widen") the cell on several columns.

The cell was erased by the first line of the table. It's necessary to repeat the operation second time only to have a cell on the first line.


The next operation consists in indicating Composing to spread the only cell of the first line over the 3 columns of the table.





The first cell extends over all the width of the table. This is interesting to write titles or long descriptions. The option Cell spans can also apply so much to columns and to rows. Regrettably, you'll have noticed that the options of width of the columns of the table were erased at the same time as the cells of the first line of the table.

Change the color of a cell






As you have just carried out it, every cell can have a different thorough color. If you want to practise the elements that you have just seen, to try to answer the following table.
Morning | |||||
A the afternoon | |||||
Evening |
The Web page properties
As for the text, the images, the links and the other elements of the Web page, the Web page has too its own characteristics or properties. The next part consists in demonstrating you these properties and how to set favor.
The following screen will appear.
Under the General tab, there are the options to give a title to the page, the name of the designer of the page as well as the descriptions that will be of use to research sites to classify your Web page.
The box Title serves for giving a name to your Web page.

When you'll see your Web page, the title of your page will appear on the titles bar of the window; as this:
The box Author indicates the name of the designer of the Web page.

The box description is a comment that you can write. You are free to write the comments of your choice. The section Other attributes is useful for research sites. They read the text in boxes Keywords and Classification to help them to classify your Web page from their categories (Internet, computers, education...). To give you an idea of the categories of research sites, go to the main page of these sites. You will see their categories and can then decide in that your Web page would be better located.

Under this tab, you'll find the options for the presentation of the Web page. You can determine the color of the text, the links as well as the bottom of the Web page. Under the part Colors page, you'll find the options for the color of the text and the links of the Web page. If you use the option Use viewer browser colors, you let to the reader determine his preferences in it's Browser. If you use the option Use custom colors, it's the designer of the Web page (you) who takes the control of colors. This can be necessary if you use a bottom of screen dark or want a presentation outside the common. Here is the list of the options so that a short description.
Option | Description |
Normal Text | Colour of the common text of the Web page |
Link Text | Colour of the text with a hypertext link. |
Active Link Text | Colour of the hypertext link as the reader clicks the link. |
Followed Link Text | Colour of a hypertext link the reader of that has already visited recently. |
Background | Colour of the bottom of the Web page |
Below the options for the color of the text and the links, there is an option to insert an image for the bottom of the Web page. This option has priority by top the option for the thorough color of the Web page. For the bottom of the page, you can have an image or a color. But not both at the same time. As you have it can be noticed, there is already an image that is chosen as the bottom ( niceblue.gif ). It was one of the exercises on the images at the beginning of this Web page.
The last option of the page, Save these settings for new pages, is interesting if you want to use these same options to create several Web pages for the same site. No need to choose them again every time you add a Web page to a site.

Under this tab, you'll find supplementary options better to identify your Web page. It's enough to write the name of the méta tag that interests you in the box Name as well as its value in the Been worth box and to press the button Set. You don't know it, but you have already used some META Tags. Under the tab General, the option Author, Description, Keywords and Classification are META Tags. You will find a more complete list on the following page under the section Meta Tags as well as their possibilities. {Meta Tags}
Save the Web page
The result all this work is to be capable of saveing your Web pages "to publish" them then on the Internet. This part of the page consists simply in saveing the result of all the exercises that you carried out until now. This will allow you then to see the result and to transfer the whole to a folder that will be accessible to all the readers of Web pages.

Select the reader and the folder in that you go to save your Web page, it's time to give a name to your Web page.


If you did not make the previous exercise on the properties of Web pages, Composer will ask you for the title of your Web page.
Otherwise, Composer will save your Web page as well as the images on your floppy disk. If you had already saveed first time, Composer could ask you to save second time your images.
Because the images are already saveed on the floppy disk, it's useless to save it second time; unless you brought modifications to the image.
Preview of the Web page.
To see the result of the Web page is important. This is your chance to see your result and how the readers are going to interpret your Web page. It's also the time to see the defects of the page and to correct them before the general public sees it.
OR

Composer will possibly ask you to save the page if you brought corrections. You should save your modifications before being able to continue. When you'll see the page, you can verify some points.



If the result is not what you waited for, re-verify the instructions of this page and bring so necessary corrections.
Publish the Web page
It remains the last stage; that to publish the Web page so that the public can see it. But previously, it's necessary that you have an account that is available on the public. Otherwise, it's impossible to transfer your Web page and the images to make them available on all.
The window above will ask you for some data to be able to transfer your Web page, and the images that are included in your public folder. To reach your folder, it's then necessary to give the name of the server, preceded of ftp://, your account number onto this server and your password.
Regrettably, I have never managed to make this command work ! It's for that reason that I recommend you to use FTP by using WS-FTP or some other similar program.
Problem
Like Word, Netscape Composer has its small problems. But this can be problematic if your're not careful. Composer has some difficulty with the links on pages of relative addresses. The problem of the links does not appear when you have a link at an absolute address, that begins by http://, but an address of another Web page that meets itself in the same folder when you don't have to save the Web page. To avoid this situation, write some lines of your Web page and save it as soon as possible. add links to a saved first time the Web page.
If at the time of creating a link you see that it begins by file://, and that the link is for another Web page that is in the same file as the one that you compose, remove this part and leave only the name of the Web page. For example, a link file://c|/accrel.htm should be renamed accrel.htm. This will avoid you some stress.
No comments:
Post a Comment