1

World Wide Web (WWW) Utilities and Web Design

Asst. Prof. Emin Korkut

2

World Wide Web (WWW) Utilities

Some Terms and a Short History of WWW

•The hypertext or hyper document 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. This is unlike a book. However, in the case where one tries to create a single information resource by referring to different books, there may not be an ordered access to the reference books. Depending on how the search progresses the order may be changing. But the important thing in this case is the possibility of branched access routes to each individual resource.

• It is an integral structure composed of individual pages which may be linked to each other in many different ways.

3

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

•Hypertext structures are very convenient for data search through computer networks. Since an hypertext may have, animated or not, images the access to these pages from a remote point in the network requires the transfer of datagrams not only for plain text data but bitmaps for graphic and sound structures.

•The home computer which has hypertext pages to be served to the remote node clients is called Web Server. It is merely a combination of text, pictures, colour, moving objects in the displays, and sound.

• A web server must have one or more hypertext home pages. The access to this server is through the standard protocols like TCP/IP.

4

•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 or 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.

•The browser is used to name the software which is used to get access to the web server. Today, the most widely used browsers are Netscape Navigator and Internet Explorer.

5

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. This is active to serve clients when a demand comes. The daemon has the name httpd.

•Although there are various available web servers perhaps the most popular one is Apache server. It is public software and easy to install and maintain. There are a lot of documentation on this and other servers through Internet and/or booksellers..

6

Web Design

Hyper Text Markup Language (HTML)

Everybody who has an Internet access may have a web site. To construct the pages like you encounter when you browse World Wide Web through Internet,

• first of all, you must have a web server or an access to a web server where you can locate the pages you are going to create.

• A web server is a platform which provides the necessary support to the clients, that is, the users who demand an access to the web server and want to see the web pages presented by the web server via some browsers like Netscape, Internet Explorer.

7

•Web pages should be located into some specific directories. You should learn where to locate these pages from your Internet Service Provider.

• In addition, you should learn the URL (Uniform Resource Locator) the clients must use to get access to your site. You may send the documents for the pages you prepared via e--mail to your Internet Service Provider and then they can install these pages into necessary location. On the other hand 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

8

What is HTML?

•HTML stands for HyperText Markup Language. It is a collection of rules which permit us to create files to be resolved and understood by the web browsers.

• Web browsers take action according to the content of the file they read via the data stream coming from the server to the client.

• By using HTML it is possible to use different fonts, colours 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 construction of rigorous displays.

9

•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.

• The file has generally the four or five letter suffixes in name, .htm and .html, the latter of which is used for mostly Unix based systems while the former one is mostly for the operating systems developed by Microsoft.

10

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. The user can employ the mouse clicking for selection of the desired elements and writing the corresponding HTML code into the target file. HotdogPro, Bluefish, Homesite can be given as examples for these types of the editors.

11

3)The third group is composed of advanced editors. You can locate the objects by the editor by means of carry -- drop method. The editor task is based on What You See Is What You Get philosophy. Hence you can directly see what you are doing and you can see the correspondingly created code and revise it if you need. Frontpage. Netscape Composer and Staroffice can be given as examples for this group of editors.

Some word processors like Microsoft Word are equipped with the capability of saving some kind of files as HTML codes. However, it is better not to use these facilities because the output HTML file may be swollen by the unnecessary block operations and repetitions, that is, the size of the output HTML file becomes larger than it should normally be. This also makes the resulted code unusually complicated.

12

What are the Expected Fundamental Properties for a

Web Site?

•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 colour selections must be comfortably perceptible by the eye.

•The content of the document must be easily understoodable, digestible 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.

13

What is Tag?

The command like structures of HTML are called tags. Each tag starts with a less than symbol < and ends with a greater than symbol >. A word which defines an action resulting in a specific display are located between these symbols. Tags can be divided into two main groups:

1)The tags of this group exist with their conjugates where less than symbols < is replaced by the symbols </ in name. The tag itself starts a well-defined action which continues until the tag's conjugate is encountered. Everything between the tag and its conjugate is affected by the action defined by these tag-conjugate pairs. The utilization of the conjugate may be optional for some tags.

14

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.

The tags are case insensitive and tag-conjugate couples can be nested in a way such that the action of an inner tag-conjugate couple over dominates the same type action of an outer tag-conjugate pair.

15

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.

However the existence of the browsers which mandatorily check these tags urges us not to ignore the utilization of these tags. Therefore it is better to write <HTML> tag at the beginning of the HTML file while its conjugate </HTML> is inserted at the end of the same file.

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.

16

The <HEAD> and </HEAD> tags are used between the <HTML> and </HTML> tags and given before the <BODY> tag. There may be given some information like character type about the header and script file information (if any) or script codes between the <HEAD> and </HEAD> tags.

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.

17

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 of these parameters can be shown through the following examples:

The <META HTTP-EQUIV="Content-Type" CONTENT=text/html;charset=iso-8859-9">tag, provides the utilization of Turkish Fonts as soon as an access is accomplished to the page. Here it is possible to use windows-1254 instead of iso-8859-9.

The tag, <META NAME="Keywords" CONTENT="html,htm,personal web page, web">, is used to specify the content of the page.}

18

The <BODY>Tag

This tag does also accept parameters. They are listed below:

BGCOLOR: This parameter is used to specify the background colour. You can give either the name of the colour as a string or its hash mark started hexadecimal code.

BACKGROUND: This parameter locates a picture at the background. The picture is specified by an image filename. The image file of the picture must be in either gif or jpeg format. If necessary the path of the image file can be specified through this parameter. If an image filename is specified and that file under this name can not be accessed then the value of BGCOLOR is used to paint the background instead of locating the picture.

TEXT: This parameter specifies the general colour of the text material.

19

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

VLINK: This parameter is also related to links. However, the value given to this parameter is used as the colour to paint the string which defines the link if the link was activated before.

ALINK:This parameter is also related to links. However, the value given to this parameter is used as the colour to paint the string which defines the link when this string is clicked by mouse.

20

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 colour of the font to be used.

21

Some Font Controlling Tags

• For a boldface field in the text 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.

22

•HTML enables us to increase or decrease the size of the characters employed in a field. There is a default size scale and each size is defined in points which is a typographical unit (72 points = 1 inch). The <BIG> and </BIG> tags increase the size of the characters in the field they encompass one level in the scale whereas the <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. By default, these tags use the typewriter fonts whose characters are of same width without regarding how the shape is. This is very useful for maintaining the appearance of the text in the HTML output.

23

Lists

•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). This type of listing does not enumerate the items of the list.

•For enumerating the <UL> and </UL> tags must be exchanged with the <OL> and </OL>tags. The itemization is same as before however the output contains numbers at the beginning of each item. The enumeration is automatic and starts from 1 by default.

24

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 tag, which is used alone, breaks the present line.

•The tag which does not have a conjugate is used to create a horizontal rule. The features of the rule like colour and length can be controlled via appropriate parameters.

25

Image Files

•The pictures or drawings, that is, graphical objects can be maintained in various format files. The files, in the basis, contain binary information or bitmap of the object. For this purpose the picture which is assumed to be two dimensional is divided into pixels by creating a grid on the picture. The pixel is the smallest unit of a display.

•If the display is black and white then each pixel is assigned by either 0 or 1 in according to its colour. The size of the pixel of the display medium depends on the resolution of the medium. Therefore it is possible to create a pattern of 0s and 1s for displaying the graphics. This pattern is called bitmap. The quality of the bitmap increases as the size of the pixel decreases and therefore the number of pixels increases.

26

•In the case of coloured graphic object the colour is resolved in terms of some main colours. The main colours determine the type of colouring method. In HTML rgb colouring method where the main colours red, green, and blue are used. If a graphical object is coloured then the whole plane of the graphic is resolved to three separate patterns each of which defines a bitmap on the basis of a main colour. Therefore, the display information or the colour patterns of a display can be maintained in a file which is usually called imagefile.

• The most widely used image file formats are GIF and the JPEG formats. GIF filenames contain the four letter

suffix.gif.

• JPEG filenames contain the four letter

suffix.jpg.

27

•The JPEG format has the capability of saving the images in higher quality than the GIF files. The sizes of the imagefiles may vary depending on the structures of the images.

•Since the sizes of the files determines the speed of the access to a web site it is desired to construct imagefiles as small as possible.

28

The <IMAGE> 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. Several units can be used for specification but the pixel unit is the default. 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.

29

Links

It is possible to make links between HTML documents. This property gives the hypertext features to the HTML. For making a link the and 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. This information to be given can be either a filename or a URL. The filename can include the path to access the file if necessary. The URL may define the type of link. For example, to get a link to the web site of the Informatics Institute of Istanbul Technical University one can use http://www.be.itu.edu.tr or the URL ftp://ftp.be.itu.edu.tr can be used to get a link to the ftp site of the Informatics Institute of Istanbul Technical University.

30

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 name.

TOP: The page to be linked is opened alone in the same window of the browser. It is also possible to give a frame name to this parameter directly.

STYLE: This parameter can be used to change the style of the link. For example, it is possible to remove the underline of the field given between the and tags.

31

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. The following example explains how to use this tag.

<MAP NAME=“MAP0”>

<AREA SHAPE=“RECT” COORD=“197,118,500,158>

<HREF=“mailto:eagle@itu.edu.tr”>

</MAP>

where 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 coordinates of the pos.

32

Tables

•Tables are cellular structures. These increase the visual effectiveness of the pages and give the chance of easily handling of the page. These structures enable us to manage the things not only in horizontal but also in vertical direction.

•It is also possible to give background colour or background design to the totality of the table or its cells individually. The BORDER parameter can be used for the settings 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.

33

Frames

Let us consider the case where we have a lot of pictures or similar type of structures, that is, images in a page. Assume that we want to switch between this page and some subsequent ones several times. Each passage from a subsequent page to the main page will take so long time if the number and the sizes of the imagefiles are high. Whereas, we can divide the main page into frames to keep the main frame which contains the most of the images constant. Then not the main frame but another frame can be used for switching between the main and subsequent pages. To create a framed structure we need a main page and subsequent pages whose number is equal to the number of the frames.

34

Some Clues

The 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. If a URL string is given in the argument of the CONTENT parameter then the page at that URL will be loaded after the specified time interval.

35

Some Illustrative Example HTML Codes and Their Displays

http://www.be.itu.edu.tr/

36

<html>

<style TYPE="text/css">

<!--A{text-decoration:none;}-->

</style>

<head>

<SCRIPT LANGUAGE="JavaScript">

function NewWindow(mypage, myname, w, h, scroll) {

var winl = (screen.width - w) / 2;

var wint = (screen.height - h) / 2;

winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable‘

win = window.open(mypage, myname, winprops)

if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }

}

37

</script>

</body>

<body topmargin="0" leftmargin="0" bgcolor="white"

text="#000000" link="#000080" vlink="#000080" alink="#000080“

onload="NewWindow('a.html','name','430','150','yes');return false" >

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<center><img src="logo1.gif"></center>

<center><a href="english.html"><h1>English<br>

<br>

<a href="turkce.html">Türkçe<br></center>

</body>

</html>

38

ftp://ftp.be.itu.edu.tr/

<TITLE>Directory of /</TITLE> <H2>Current directory is /</H2> <PRE> <A HREF="/bin/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> bin/</A> Wed Oct 11 00:00:00 2000 Directory <A HREF="/dev/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> dev/</A> Wed Oct 11 00:00:00 2000 Directory <A HREF="/etc/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> etc/</A> Thu Jul 19 09:52:00 2001 Directory <A HREF="/lib/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> lib/</A> Wed Oct 11 00:00:00 2000 Directory <A HREF="/msgs/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> msgs/</A> Thu Jul 19 09:53:00 2001 Directory <A HREF="/pub/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> pub/</A> Wed Aug 08 18:49:00 2001 Directory <A HREF="/usr/"><IMG ALIGN=absbottom BORDER=0 SRC="internal-gopher-menu"> usr/</A> Wed Oct 11 00:00:00 2000 Directory

</PRE>

39

HOMEWORKHOMEWORKPrepare your personel homepage by using prefrably either StarOffice or Netscape Composer editors. The following items should be in this html file:

•Blinkable title•Links between different pages and different sources•Background colour•An image or images•A table

Deadline: 21 November 2001

•Send your html file to korkutem@itu.edu.tr as an attachment.

40

In order to activate your personal webpage

1. Connect to the hyperion.labs.itu.edu.tr server using telnet application and place index.htm file into the directory public_html

2. In the root directory type chmod 755 public_html

3. In the public_html directory type chmod 755 *.*

4. Type cd .. twice

5. Type chmod 701 username

• You can see your webpage at http://www.students.itu.edu.tr/~username

41

Exam Results:

Exam A (True/False) Exam K (Fill in gaps)

AVG : 51 54

MIN : 20 10

MAX : 73 100