コンテンツ

  1. HOME
  2. Services
  3. Hosting services
  4. Manuals ・ Guidebooks
  5. Contents creation guidebook
  6. Creation of Web contents

Creation of Web contents

Back to the TOP of contents creation guidebook

1.Webpage and HTML

We will explain the mechanism for the display of Web contents and HTML(Hyper Text Markup Language).We don't mention the practical creation of HTML because it's beyond our purpose.Please check the reference books detailed later.

Mechanism for the display of Web

Web browser(hereinafter abbreviated to browser) is the application software to browse Webpage in the Internet such as Internet Explorer or Firefox. Once users input the URL address(hereinafter abbreviated to URL), browser connect the Internet and download the files called HTML and the data such as images, pictures and music from the web server specified with URL.

But in this situation, this information will be indistinct in displaying as it is because the data of text and that of materials exist separately.Plus there might be the case that the text shows up as a strange characters and will be hard for the readers to understand the information written in the Webpage.

Then the browser analyze the various information written in the HTML for Webpage and display the downloaded materials laying out so that readers can find easily.

Webのしくみ

About HTML

Most of the Browser has the functions to display the contents of HTML in the browsing Webpage.

If you have the item, "source" in the "display" of the menu bar in your browser, please click it. Then another windows appears and the text data with lots of code and letters, which is HTML.

HTMLのソース

If your OS is Windows, it might include many meaningless characters. It's because this Webpage is written in EUC, the letter code for UNIX type of OS. In Windows, it's used the standard Shift JIS letter code and the text shows up in a strange characters in EUC.

There is a fortunate case that some users can read the Japanese text in HTML matching with the letter code but they might feel difficulty in reading the information from the written letter code in HTML.The downloaded image or picture are not reproduced.

In HTML, every information of the text, letter code, style, place for the image data displayed and links necessary for the display of Webpage in HTML. In scanning the HTML and material data to the browser, the Webpage will be displayed for the reader.

In another words, HTML will be the map such as draught or framework for the Webpage. And the contents have to be created in HTML in transmitting the information in Internet and in creating Web contents.

Rule for creating HTML

We tell the configuration of the webpage to browser in holding the transmitted information with the command called "tag". HTML tag writes as follows; <Command>content</Command> For instance HTML tag writes as follows in specifying the name of the title displayed in browser; <title>the name of the title</title> the starting tag and the one which include /, </title>the closing tag. We call the command title, which specify the name of the title, "element". The structure in the HTML is fixed in advance and we need to write in using appropriate information tag to the appropriate place. The basic structure is as follows:

HTML基本構造

In HTML it declares the document type at first and displays the written standard and the written file.

The part recognized as HTML in file is the part held between<HTML>and</HTML>, where we write down the content of the Webpage. And we write down the content of the setting in Webpage in the part between <head>and</head>, where we insert the title element above mentioned as a sample. We insert letter code or the meta elements to define the document information such as language etc. The content written in the "head" won't be displayed on the screen.

The content of the Webpage will be written in the part held between <body>and</body>. The content written here on the browser screen will be displayed as Webpage. In short most of the tag will be used inside <body>We will show the simple example to write in HTML file below.

HTMLサンプル

There is a rule for the name of the files in HTML. The files written in HTML has to be stored with "***.html(or***.htm)"extension. And the name of the file on top page displayed at first in accessing Webpage will be fixed to " index.html(or index.htm)".

In specifying another files by links or pasting the image, there are specific address and relative address. We specify the place of the files we want in writing the whole address starts with http:// in specific address.

On the other hand we display the place of the files we want based on the place of the file we show at the moment in relative address. In relative address, the current place will be shown with "./" and directory above by one will be shown "../" and the one above by two will be shown "../../". It's possible to fix the place by the specific address in advance using base element. We will show the sample of sharing a link to test.html in the sample directory below. For the detail of creating HTML of <a href="../sample/test.html">move to test.html</a>, please check the reference books.

A sample of HTML tag

Here are the typical HTML tag elements.

  • Sharing a link to move to another page("a" element)
  • Reference letter("h1~h6" element)
  • Paragraph("p" element)
  • Starting a new line ("br" element)
  • Itemizing("li" element)
  • Pasting images("img" element)
  • Creating tables("table" element)
  • Creating entry form("form" element)

The way to create HTML simply

VM hosting service, and CGI/PHP package and WordPress package of WEB Hosting service support the managing environment and the creation of Web contents by CMS(Contents Management System).

The use of CMS enables to carry out the routine operation such as adding and deleting the contents such as the images or the documents to be published in Webpage .Also, it enables a group of people to renew the contents in issuing the plural accounts for administrator. We explain the CMS in detail in "The use of CMS"of contents creation guidebook.

Also, there are many Webpage creation software which create HTML automatically from the entered design in the computer software of free software or the one at the shop. Also, there are the one with function to store the created data after changing HTML file in Word processor, spreadsheet program, presentation software, and CAD software.

These software enable to create the Web page and transmit the information easily without knowing the HTML tag, however, there might be the case that the limitation for the width of expression (layout flexibility) occur in comparison with entering the HTML tag directly.

The use of access counter

VM hosting service, and CGI/PHP package and WordPress package of WEB Hosting service support the running of the Web application by CGI program. These services enable to set the access counter in Web page in uploading the CGI access counter program provided by Information infrastructure. Please download and use the ZIP file below.

To download the access counter

Please refer to the README.txt file below the counter folder created after unzipping the ZIP file for setting and using. You can refer to the file with text editor. Also you can check the following page for the type of counter design available with default.

A list of access counter design

※It's possible to customize the counter design with GIF image created originally. Please refer to the README.txt file for the detail.

Reference Books

Creation of HTML

  • 実践Web Standards Design Web標準の基本とCSSレイアウト&Tips
    著者:市瀬裕哉/福島英児/望月真琴 発行:九天社
  • Web標準デザインテクニック即戦ワークブック XHTML+CSSを正しく賢く書くための15問
    著者:Dan Cederholm 訳:森本眞吾 発行:毎日コミュニケーションズ

A reference book of HTML tag

  • 詳解 HTML&XHTML&CSS辞典 第三版
    著者:大藤幹 発行:秀和システム

Back to the Top of Contents creation guidebook

2.Web application by PHP

VM hosting service, and CGI/PHP package and WordPress package of WEB Hosting service support the use of language, CGI and PHP as means of creating Web application. We'll explain the Web application which can be realized in writing the PHP language script to HTML in this chapter, however we don't mention the practical PHP programming here because it's beyond our purpose. Please check the reference book detailed later.

Server side script

Web applications are contents that perform some process to the input on the Web screen and provide service dynamically. These services we usually use are all Web applications such as online banking, Web reservation for Shinkansen and airplane ticket, or online shopping and so on.

It has programs with the contents of processing to be carried out in HTML, which we mentioned in the last chapter added and is written in the programming language such as Perl. PHP, and JAVA.

For example the Web application with PHP runs a program written in PHP language by Web server based on the data sent from browsing client in requesting, and return the result of running. The script which runs program on server(not on client) is called server side script.

On the other hand we call the script which download the web page with program from Web server and run the program on client "Client side script". Java script is the typical example of the Client side script.

サーバサイドスクリプトとクライアントサイドスクリプト

There are features as follows in server script.

  • It never relies on the environment such as property of the client or browser
  • It can output the pages depending on the information sent from the client
  • It can access another resource (Database, mails etc) in the network with server.
  • Load is applied to the server.

For the creation of Web application in PHP, Web server has to support PHP.

PHP Language

PHP(PHP Hypertext Preprocessor) language is the script language which enables to run the procedure by embedding the program in HTML. It also enables to use for creating Web application, Command line program, and GUI application.

PHP was originally developed as a language for exclusive use of the Web application development and is simple and adaptable language used in many web page. Also they have rich in extension modules which enables to access to database (Interface etc,) .VM hosting service and WEB Hosting service support PHP5.

In PHP basic syntax, we hold the process contents running in HTML with "Write"<?php and ?>.For example in displaying "Hello world!" to the browser, we will write as follows.

PHPサンプルソース1

File name extension of HTML with PHP script differs from the ordinary one. HTML file with PHP has to be stored with the file name extension, "***.php" . Just like another programming language, we can process Variable, Function , Conditional expression and Loop in PHP and PHP5 support object- oriented. Please check the reference books for the detail about PHP programming.

Use of cookie information and session information

In accessing the webpage, HTTP protocol will be used as a rule for transmitting between server and client. HTTP protocol has a system to transmit only in exchanging information and cut the connection in completion.

The server client connect and cut the transmission repeatedly as the Web server respond the web page request by web browser in another word. From the viewpoint of server, they can't understand the process of the interchange with clients before and after the request. It's because that the server regard that the process was completed in responding. When the client gives next request, it's regarded as totally new process.

HTTPプロトコル動作

If it is the case in the ordinary Webpage with no process performed in server it's all right but if it is the case in the Web application, the condition will be different.

There are the cases that the script can't be handled without knowing the process of the interchange with client. In creating the page requires authentication, we need to authenticate again entering ID and password as moving the Webpage and displaying. Then as means of intermediating the information easily, we can use Cookie or session, which are available in PHP.

The cookie performs the process by sever sending the necessary information to client and receiving the information from the cookie stored in the browser. In contrast, the session stores the necessary information in server and send the session ID for accessing the information to the client. Then the session performs the process in pulling out the information stored in the server to scan the client session ID if needed.

They can continue the Web application and realize the function of the service they want in showing as if the interchange is kept performing between server and client.

Cookie・セッションを利用した動作

Please check the reference books for the concrete implementation for the use of cookie or session. In using cookie, the browser of the client has to support cookie and permitted to use cookie. The content of Cookie has a risk of alteration and users have to be cautious of security hole.

It's possible to deliver the necessary data directly from client to server by GET or POST when requesting in cookie or in session but this is not very good way for the security reason.

Samples of application using PHP

It's possible to create the contents which provide various services in creating Web application with PHP.Here are samples of application.

  • Electric application and voting system
  • Bulletin board(BBS)
  • Chat system
  • Registering and publishing Blog or Wiki
  • Information searching system

References

  • はじめてのPHP言語プログラミング入門
    著者:大垣靖男 発行:技術評論社
  • PHP5徹底攻略
    著者:堀田倫英 桑村潤 発行:ソフトバンククリエイティブ
  • PHPによるWebアプリケーションスーパーサンプル 第2版
    著者:西沢直木 発行:ソフトバンククリエイティブ

Back to the Top of contents creation guidebook

 

Copyright © Institute for Information Management and Communication, Kyoto University, all rights reserved.