World Wide Web (WWW) Utilities and Web Design

• World Wide Web (WWW) Utilities• Some Terms and a Short History of

WWW Before making a clear definition about the World Wide Web (WWW), it is better to explain what the hypertext is. The hypertext or hyperdocument, as it is sometimes called, is an advanced type of text such that the access to the pages is not only sequential. There are links which make shortcuts between the pages.

• An hypertext is not only a text based document. It may contain movie pictures, voices and the combinations of these as well as the next material, static pictures and similar objects.

• Hypertext structures are very convenient for data search through computer networks.

• The home computer which has hypertext pages to be served to the remote note clients is called web server. This naming is due to the fact that the collection of the hypertexts is this computer looks like a web.

• A web server must have one or more hypertext home pages. The access to this server is through the standard protocols like TCP/IP. It is based on client/server architecture. Because of the hypertext structure it is possible to establish links between the documents of the same server of furthermore between the pages of different servers.

• The entire collection of the web servers all over the Internet is called World Wide Web and abbreviated as WWW.

• WWW was first proposed by Tim Berners-Lee who was a scientist at European Laboratory for Particle Physics. Tim Berners-Lee, developed also HTML which is an acronym for the statement HyperText Markup Language, HTTP which stands for the statement HyperText Transfer Protocol, URL which means Uniform Resource Locator concepts and tools, and called the new structure as world wide web for the first time.

• Web Servers The web servers use HTTP as a protocol. A secure version of HTTP is also partially available and called S-HTTP. Under the Linux or Unix systems HTTP needs a devil like software which is called HyperText Transfer Protocol Daemon. The daemon has the name httpd. Although there are various available web servers perhaps the most popular one is Apache server.

• Web Design• Hyper Text Markup Language (HTML)

World Wide Web is based on client/server technology at least for the moment we write this document. A web server is a platform which provides the necessary support to the clients, that is, the user who demand an access to the web server and want to see the web pages presented by the web server via some browsers like the most famous ones, Netscape, Internet Explorer.

• Web pages should be located into some specific directories. You should learn where to locate these pages from your Internet Service Provider. You should learn the URL (Uniform Resource Locater) the clients must use to get access to your site. You may send the documents for tha pages you prepared via e-mail to your Internet Service Provider and then they can install these pages into necessary location.

• There are some web sites whose maintainers permit you to install your web oriented files without requesting any payment. Some of this type sites are given below via their URLs. http://members.xoom.com http://www.tripod.com http://www.homepage.com http://myfreedomain.com http://www.webjump.com http://50megs.com http://geocities.netscape.com

• What is HTML ? By using HTML it is possible to use different fonts, colors and to create specifically formatted documents beside the plain texts. The pictures, drawings and animated objects can be displayed via HTML. Tables, forms, frames can also be created and their properties can be controlled to facilitate the contruction of rigorous displays. It is also possible to create data input and output connections between the server and client at a level of permission granted by the web server.

• An HTML file is composed of tags which may be considered as commands for the HTML operations and some text, image, and sound materials.

• Editors The softwares to edit an HTML file are classified into three groups:

• 1) The first group is composed of the softwares which are capable of editing only text materials. These editors can be exemplified as wordpad, notepad, edit, joe, vi, emacs, pico.

• 2) The second group editors are used to create the HTML code for the user. These editors are assumed to be working on a window system. HotdogPro, Bluefish, Homesite can be given as examples for these types of the editors.

• 3) The third group is composed of advanced editors. Frontpage and Staroffice can be given as examples for this group of editors.

• What are the Expected Fundamental Properties for a Web Site ? The fundamental properties we expect from a web site can be itemized as follows.

• The access to the web site should be rapid as much as possible.

• The text material must be readable in size and in content.

• The color selection must be comfortably perceptable by the eye.

• The content of the document must be easily perceptable, digestable and satisfactory.

• The visitor of the site can easily arrive at its target location through the possible shortest path.

• There must be a harmony in the design of the web site. Extraordinarily plain structures and abnormally crowded designs must be avoided.

• What is Tag ? HTML is a language hence it does have commands like structures.

• The command like structures of HTML are called tags. Each tag starts with a less than symbol < and ends with a greater than symbol >. Tags can be divided two main groups:

• 1) The tags of this group exist with their conjugates where less than symbol < is replaced by the symbols </ in name. The utilization of the conjugate may be optional for some tags.

• 2) The tags of this group are alone. Their actions are taken in a sudden and single step. The tag itself is used for the corresponding action.

• Some Tags of Vital Importance The content and the necessary tags of an HTML file are located between the <HTML> and </HTML> tags. The <HTML> tag and its conjugate </HTML> may be skipped without creating any problem for some browsers especially under Linux.

• There must be a <BODY> </BODY> tag-conjugate pair between the <HTML> and </HTML> tags. The main content and necessary tags for some actions on this content are given between the <BODY> and </BODY> tags.

• The <HEAD> and </HEAD> tags are used between the <HTML> and </HTML> tags and given before the <BODY> tag.

• To specify the header string which is displayed in the title bar of the window created by the browser one should insert this string between the <TITLE> and </TITLE> tags which are located somewhere between the <HEAD> and </HEAD> tags.

• The <META> Tag This tag is used inside the domain of the <HEAD> tag. It has no conjugate. The <META> tag accepts some parameters. Amongst these we can mention about NAME, CONTENT and HTTP-EQUIV. The utilization

• The <BODY> Tag This tag does also accept parameters. They are listed below:

• BGCOLOR: This parameter is used to specify the background color.

• BACKGROUND: This parameter locates a picture at the background.

• TEXT: This parameter specifies the general color of the text material.

• LINK: This parameter is used to specify the color of string which is used for link.

• VLINK: This parameter is also related to links.• ALINK: This parameter is also related to links.

• Writing Through HTML One of the basic functions of HTML is of course text creation, that is, writing. There are HTML tags which are directly related to writing operations. Some of them are given below.

• The <FONT> Tag This tag has a conjugate, that is, </FONT> and is used to manage the controlling of the font utilization. <FONT> can accept the below listed parameters:

• FACE: This parameter specifies the type of the font to be used.

• SIZE: This parameter specifies the size of the font to be used.

• COLOR: This parameter specifies the color of the font to be used.

• Some Font Controlling Tags If a boldface field is desired in the text to be printed by HTML then the field must be surrounded by the <B> and </B> tags.

• The <STRONG> and </STRONG> tags can also be used for the same purpose.

• If an italic field in the text should be surrounded by the <I> and </I> tags.

• The field surrounded by the <U> and </U> tags are underlined.

• The field which continuously blinks should be encompassed between the tags <BLINK> and </BLINK>.

• The mathematical formula typesetting is very limited under HTML. However, it is possible to use sub or super indexes. You can use the <SUB> and </SUB> tags for sub indexing while you need to use <SUP> and </SUP> tags for super indexing.

• HTML enables us to increase or decrease the size of the character employed in a field.

• The <BIG> and </BIG> tags increase the size of the characters in the field they encompass one level in the scale.

• <SMALL> and </SMALL> tags decrease the size one level in the scale.

• You may want to display some text just as it stands. Then you need to use <PRE> and </PRE> tags.

• Lists You can design lists via HTML.. An itemized list can be formed by taking the content of the list between the <UL> and </UL> tags. These tags play the role of an envelope.

• Each item in the list can be specified in a line which starts by the <LI> tag (It is a single type tag). For enumerating the <UL> and </UL> tags must be exchanged with the <OL> and </OL> tags.

• Paragraph Tags In HTML the paragraphs are created by taking the content of the paragraph between the <P> and </P> tags. The ALIGN parameter is used for paragraph management. For example, it is possible to centralize the whole paragraph.

• The <BR> tag which is used alone breaks the present line.

• The <HR> tag which does not have a conjugate is used to create a horizontal rule.

• The <CENTER> and </CENTER> tags can be used centralize the field given between these tags.

• Imagefiles The display information or the color pattern of a display can be maintained in a file which is usually called imagefile.

• The imagefiles do not only involve the color patterns of the image. In fact, the bitmaps of patterns can be compressed by using various algorithms to diminish the size of the imagefile. The information about the compressing and decompressing of the binary data in the imagefile must also be given in the same file. This creates a lot of possibilities to save an image into a file. Each of this possibilities is called image format. The most widely used ones are GIF and the JPEG formats.

• The <IMG> Tag This is a single type tag and used to insert an image into the display of HTML file. It accepts several parameters which are listed below:

• SRC: This parameter describes how to access to the image file.

• WIDTH: This parameter defines the width of the image.

• HEIGHT: This defines the height of the display of the picture.

• BORDER: It is possible to put a frame to surround the picture. This parameter defines the thickness of the border of this frame.

• ALIGN: This parameter defines the horizontal position of the image.

• VALIGN: This parameter defines the vertical position of the image.

• Links It is possible to make links between HTML documents.

• This property gives the hypertext features to the HTML. For making a link <A> and </A> tags are used. Text or image can be given between these tags. These tags accept parameters which are listed below:

• HREF: This is the information about the location of the node to be linked.

• TARGET: This parameter describes how the specified node is linked. There are four options for this parameter:

• - BLANK: A new browser window is opened and the page to be linked is displayed in this window.

• - SELF: The page to be linked is opened in the same browser window.

• - PARENT: The page to be linked is opened in the same window of the browser but in a new different frame.

• - TOP: The page to be linked is opened alone in the same window of the browser.

• - STYLE: This parameter can be used to change the style of the link.

• The <IMAGEMAP> Tag It is possible to create link from some regions of an image to some nodes. In this way different regions of an image can be linked to different documents or to the URLs. This feature is not noticed by the client usually. This following example explains how to use this tag.

• <MAP NAME=“Map0”> <AREA SHAPE=“RECT” COORDS=“197, 118, 500, 158” HREF=“mailto:eagle@be.itu.edu.tr”> </MAP> <IMG SRC=“image/tepe.jpg” width=“640” height=“178” border=“0” usemap=“#Map0”> were the <MAP> and </MAP> tags are used to specify the regions on the image. These tags accept the parameter NAME which is used for the identification of the region.

• The inner tag <AREA> is used to define the region in detail. It accepts some parameters like SHAPE which defines the shape of the region and COORDS which defines some necessary cordinates of the position necessary for a unique specification.

• Tables Tables are cellular structures. These increase the visual effectiveness of the pages and give the change of easily handling of the page.

• The <TABLE> and </TABLE> tags are used to design a table. These tags play the role of an envelope or a matrix.

• The lines are structured between the <TR> and </TR> tags while the costruction of the cell in the lines is realized between the <TD> and </TD> tags. All these tags accept the ALIGN parameter for the positioning inside the related structure. Thi positioning can also be given via the WIDTH and HEIGHT parameters.

• The BORDER parameter can be used for the setting of the border of the frame of the table. The space inside the cell can be controlled via the CELLPADDING parameter while the CELLSPACING controls the spaces between the cells of the same line.

• Frames To create a framed structure we need a main page and subsequent pages whose numbers is equal to the number of the frames.

• The construction of a frame structure can be exemplified as follows: <FRAMESET COLS=“left.html” NAME=“left” SCROLLING=“no” TARGET=“right”> <FRAME SRC=“right.html” NAME=“right”> </FRAMESET> where the <FRAMESET> tag and its cojugate </FRAMESET> take the role of an envelope and all structures about the framing are given between these tags.

• The second and the third tag pairs which locate the left.html and right.html files will display the outputs through the left and right windows respectively. The NAME parameters give names to the individual frames. The SCROLLING parameter can be used to create scrolling bars for each individual frame window. The COLS and ROWS attributes (parameters) can be used to partition each frame into columns or/and rows.

• Some Clues The <META> tag can be used for some important operations. Some of these are given below:

• - The parameter assignment HTTP-EQUIV=‘ REFRESH’ inside the <META> tag reloads the document to the client.

• - The parameter assignment CONTENT=‘ n; URL=url’ specifies the period of the reloading of the page to the browser.

• You can specify a given amount of space between two strings. But this needs a special action since the consecutive blank spaces which are created by pressing the spacebar key of the keyboard in an HTML file are assumed just as a single default space. This action is created by using the character group &nbsp (Non-Breakable Space). These can be repeatedly used to create a desired spaces between the objects.

• Some characters which are used for some specific purposu in HTML can be displayed by using certain ampersand prefixed character groups. Some of these entities are given below: < &lt; > &gt; U &nbsp;