instructional systems
Index:
[Session6]Basic HTML grammar, editor, and meta-information
1 Chapter1
2 Chapter2
3 Chapter3
4 Chapter4
5 Chapter5
6 Chapter6
Your Location: Home Page  >  [2] HTML and CSS (on condition)  >  [Session6]Basic HTML grammar, editor, and meta-information  >  Chapter3  >  3.1 Overview of Web Page Creation
Overview of Web Page Creation
[The purpose of this section]
Understand the overview of how to create a Web page and related procedures.

Overview of Web Page Creation

As explained in the previous chapter, Structure of the WWW, the "Web page" we are seeing is "a variety of files (resources) on the Web Server which have been retrieved, via network, by the PC (client) we use and arranged on the screen by the Web Browser in a specific layout specified by HTML".

Since you now understand the structure of the WWW, let us think about what kind of things you have to do "to create a Web page".
Roughly speaking, you are required to do the following:

  1. On your PC, create HTML files as well as files containing data such as images that are required for the Web page.
  2. Store the various files that have been created in a designated folder on the Web Server.

As you can see, almost all the work is to be done on your own PC.

In any case, the instruction given above is too broad to show exactly what sorts of things you should specifically do. The following are more specific processes you have to go through:

  1. A series of tasks you have to do on your PC
  1. Create the document which you want to be a Web page, as an HTML file. In this process, you are not only to create the text, but are also required to give instructions with regard to the following matters. Instructions should be given using tags designated in HTML.
    • Give instructions to specifically arrange the text composition so that the headings are created, texts are divided into paragraphs, and so on.
    • If necessary, give instructions to create a bulleted list or a table.
    • Give instructions to retrieve (display) those data other than text including still images, video clips, etc.
    • If necessary, give instructions to create a Hyperlink to another Web page or various other data on the Internet.
  2. Create those data that are to be retrieved (displayed on the page) in the HTML file mentioned above, including still images, video clips, etc.
  3. Set/Improve the appearance of the Web page in terms of the size and color of the character, background color, space, and/or the size of the images.
  4. If necessary, add a program(s) to the HTML file so that the Web page can be maneuvered to show changes responding, for example, to a mouse operation by the person who is viewing the Web page.
  1. Store the HTML files together with other data files that have been created, in a designated folder on the Web Server (to be sent via network).
(Note) The methods of creating such Web pages as a search engine which can display requested information in response to a keyword input by the user or the SOSEKI system which can register the information input by the user in the database are different from those explained above. For such type of "Web page creation," you need to create a program to carry out the required processing operation on the Web Server (for example: processing operation to search through the Web pages) or a program to automatically create HTML files. These programs operate on the Web Server to automatically create HTML files. Please go through the video clip below to see this mechanism. (The video is hidden on this website.)
The creation of this kind of Web page is outside the scope of this course.

Files You Actually Create When You Create a Web Page and Applications to Create Those Files

The following table shows the types of files you create when you create a Web page, and the applications to create those files. The files and the applications correspond to the Web page creation processes discussed in the previous section and are shown accordingly. (If you are unfamiliar with the words in the "File type" column, you do not have to pay attention to them at this stage. You can understand everything when you will finish this course.)

Description of work File type Application to be used
1.a Create basic building blocks for the Web page HTML file (text file) Text editor
1.b Create a variety of data such as images Image file, etc. (binary file) Graphics software, etc.
1.c Set/Improve the appearance css file (text file) Text editor
1.d Create a program(s) for the browser javascript file (text file) Text editor
2. Transfer the files to the Web Server (All the files created above) File transfer software

"Text editor", which you see a number of times, is used to input/edit character information (to copy, paste, search, replace, and so on) as explained when we discussed the word processor. As you can use the word processor already, you don't need any explanation of how to use the text editor. As for "graphics software", we have already learned about Paint or Draw system images and practiced how to use some applications to create these images. Therefore, you do not need any more of it. This means that all you have to study in terms of application software to create a Web page is "file transfer software". (Do you feel relieved now?)

Please note, therefore, because the mainstay of this course is "to create a Web page to disseminate information on the Web", "to learn how to use application program" is not the main purpose of this course. There is much that you should learn other than that.


Creating a Related File for the Web Page and Checking it to See How it Works as a Web Page

So far, we discussed what sort of things we have to do to create a Web page. In this section, let us try to conceptualize how we actually go about creating the page.

The process of Web page creation is slightly different from the process of other works you have studied so far. The reason for this is that, whereas the various applications you have used so far are all "WYSIWYG (What You See Is What You Get)" applications, in the case of Web page creation, "what you see (file to be created) is different from what you finally get (to be displayed)". This means that you cannot create a Web page using just one software application.

For example, let us think about word processing software. The final product of the word processing software (i.e., what you get) would be a printout or a file produced by the word processing software. If you want a bulleted list (in the final layout), the bulleted list is displayed on the screen when you edit the file. (This is a matter of course for you, isn't it?)

However, when you create a Web page (i.e., HTML file etc.), it's a different story. Please have a look at the images below. The left-hand side is the display when creating a Web page (HTML file), and the right-hand side is the display when viewing the Web page that has been created on the Web Browser. They look very different, don't they?

In other words, applications to create a Web page (normally a text editor) and applications to view the product (Web Browser) are not the same.

You might think that, "Oh, it's tough!" However, you do not have to worry. All you have to do is to keep the Web Browser up and running when you create a Web page so that you can check what you've got on the Web Browser whenever you've made a little progress in creating the Web page. For this, all you have to do is to open the saved file on the Web Browser.

This means that, in the process of Web page creation, you are required to keep doing two things; i.e., "creating HTML files, etc." and "checking the file you have created on the Web Browser", repeated one after another.

First of all, you have to remember this. In addition to this, eventually you have to send (store) various files you created to the Web Server. Therefore, you must not forget that either. Finally, you must not forget to check the Web page again to see if the page is displayed properly on the Web Browser after you have sent these files to the Web Server.

Copyright Kenichi Sugitani 2005, All Rights Reserved