lesson 3. web server web client web page internet explorer netscape com. web browser instructions...

Lesson 3

Web Server

Web Client

Web Page

Internet ExplorerNetscape Com.

Web Browser

Instructions for display are in the Web pages and browsers interpret and display the pages.

These instructions are in standard tags such as HTML or XHTML tags.

HTTP (Hyper Text Transport Protocol)

The standard set of rules for sending text files across

the Internet. It requires an HTTP client program on the

one end, and an HTTP server program in the other end.

HTTP Client

A computer program that requests a service from a Web

Server.

HTTP Server

A computer program providing services from a Web

Server.

CGI Bin

The folder (or directory) on a Web Server that stores CGI Programs.

CGI Program

A small program that handles input and output from a Web Server. Often CGI programs are used for handling forms input or database queries.

GIF (Graphics Interchange Format)

A compressed format for storing images developed by CompuServe. One of the most common formats on the Internet.

Securing your Website

When you store something in your Web site that is not protected by passwords it is visible to search engines. Therefore if you have files in your Web directory such as HTML, Word Documents, Adobe Acrobat, Excel Spreadsheets, etc. they are all visible.

To protect your files you may put them in a password protected directory and use a server level password such as htaccess (this is the securest protection) or use a JavaScript password (which is not very secure).

The .htaccess file affects the directory in which it is placed, so in this example, any visitor requesting<URL:http://somewhere.com/somepath/> would be presented with an authentication request.

• W3C (World Wide Web Consortium ) is a a Member Organization created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission

• Tim Berners-Lee was instrumental in its creation. W3C is working to Standardize the Web by creating and maintaining WWW Standards (also referred to as W3C Recommendations)

• The most important work done by the W3C is the development of Web specifications that describe communication protocols such as HTML, XML, and XHTML.

• HTML is medium of communication between peoples of different

languages and cultures for publishing on the World Wide Web.

• The lastest version of HTML is XHTML.

• HTML versions from 2.0 (1996)• 3.2 (1997)• 4.0 (1997, 1998)• 4.01 (1999) Last one

• XHTML 1.0 (2000) reformulates HTML 4.01 in XML

• XHTML 1.1 (Modular XHTML that supports mobile devices)

• XHTML is very similar to HTML 4.01,

• XHTML (eXtensible HyperText Markup Language)

• If you know HTML then pay attention to writing code in lowercase letters, and do not skip end tags like the </p> XHTML is stricter

• Else just focus on learning XHTML

A Good Web Site has:• Useful information on every page. Unique and no step stones.

• Is nice to look at Not Ugly

• Must be current. (Both information and links)

• Reliable information. No misspellings, check your sources

• Good links to other similar Topic/Subject sites

• Support at least both IE and NC

• Promote it.

Review/Basics

General Principles

• A browser has very specific rules about how content is formatted and displayed to the user.

• We must understand these rules, and work with them to present professional, attractive, readable content.

• HTML/XHTML was intended to present basic content, not for the level of creative design expected of today’s web pages.

General Principles

• Content generally flows from left to right, top to bottom.

• Leaving out a tag or using one incorrectly will not cause a crash in HTML, but the document may not display properly. XHTML is stricter.

Coding Guidelines

• Following consistent procedures for writing XHTML are essential

• They make code easier for you and others to maintain

• Professional-quality code is a valuable asset for a company

• Code samples and URLs of your previous work are often requested by employers, and professional-looking code is essential

Coding Guidelines

The two best ways to thoroughly learn HTML and XHTML are;

1. Practice. Write lots of code, using only a simple editor like Notepad. This will force you to learn the tags more quickly.

2. Read the source code of websites that you like and don’t like, and figure out how they did things, but don’t cut and paste or copy them.

HTML/XHTML standards

• The current standard is 4.01

• It is the last HTML standard

• The next is XHTML. This is the standard now.

HTML

HTML : Hyper Text Markup Language

An HTML file is a text file with a file extension of htm or html that has markup tags. These tags tell the Web browser how to display the page and can be created using a simple text editor.

<html> <head> <title> The Title Of My Web Page</title> </head> <body> This is a test web page. <b>This text is bold</b> </body>

</html>

1. Start End HTML doc.

2. Header Info. not displayed

3. Title displayed in browser caption

Here text is <B>bold!</B> Here text is <U>underlined</U>Here text is <I>italicized.</I>

Here text is bold!Here text is underlinedHere text is italicized

• Editors such as Adobe PageMill, FrontPage, etc. are available

• To learn HTML very well use a plain text editor to write your markup tags

Vocabulary

<a href=“file.html”>file</a>

closing tag

contents of tag

value of attribute

attribute

opening tag

HTML rules

• All tags and attributes will be in lower case.

• All tags that have an end tag will use it, even if it is optional.

• All attribute values will be in quotes

• Nesting order must be preserved

Browser target rules

• For the purpose of this course, your code should function and appear the same in IE 5.0 or higher and Netscape Navigator 4.7 or higher.

• Your pages should look correct and complete when viewed at a resolution of 600x800 or higher.

Skeleton HTML document

<html>

<head><title>skeleton page</title>

</head>

<body>

……..

</body>

</html>

Body

• <body background=“___” bgcolor=“___”text=“___”></body>

• background can be a relative or absolute URL of an image to be loaded in the page. If the image is not big enough, it will be tiled.

• bgcolor is the colour that will be the background for the whole page.

• text sets the colour of the text for the page

Comments

• HTML comments are written with the following syntax;

Text effects

• <b></b>

• <i></i>

• <em></em> preferred to <i>

• <strong></strong> preferred to <b>

Note:

• <u></u>– Don’t use since it looks like a hyperlink

Lists

• <ol type=“___”></ol>

– type can be A, a, I,1(default)

• <ul type=“___”></ul>

– type can be circle, square, disc(default)

• <li type=“___” value=“_”></li>

– type can be A, a, I, 1(default) if in <ol>

– type can be circle, square, disc(default) if in <ul>

– value = an integer, if in <ol>

Links

• <a href=“_____”></a>– href is an absolute or relative URL.

Paragraph

• <p align=“___”></p>– align can be left(default), right or center

• Leaves a space around paragraph

Line break

• <br> inserts a line break in text.

Horizontal rule

• <hr align=“___” width=“___” size=“___”>– align can be left, center(default) or right– width in pixels or percent of page or section

(e.g. table cell)– size is height in pixels of the rule

Heading

• <h1 align=“___”></h1>– align can be left (default), center or right

• Same for <h2> to <h6>

• <h1> is largest and <h6> is smallest

Indentation

• Use indentation to show nesting and pairing of tags, and to make it easier to identify the end of each block

• Tags such as <html>, <head>, <title> and <body> do not need to be indented

• Use empty lines and comments to make the source code easier to read

• The following example compares the readability of un-indented and indented HTML

Indentation1 <html>

2 <head>

3 <title>Untitled Document</title>

4 </head>

5 <body>

6 <ul>

7 <li>list item 1</li>

8 <li>list item <strong>2</strong></li>

9 <ul>

10 <li>list item 2 - sub list item 1</li>

11 <li>list item 2 - sub list item 2</li>

12 </ul>

13 <li>list item 3</li>

14 </ul>

15 </body>

16 </html>

1 <html>2 <head>3 <title>Untitled Document</title>4 </head>5 6 <body>7 8 <ul>9 <li>list item 1</li>10 <li>list item <strong>2</strong></li> 11 12 <ul>13 <li>list item 2 - sub list item 1</li>14 <li>list item 2 - sub list item 2</li>15 </ul>16 17 <li>list item 3</li>18 </ul>19 <!-- end of outer list - ->20 </body>21 </html>

Indentation

The results of the previous code

Coding Guidelines

The two best ways to thoroughly learn HTML/XHTML are;

1. Practice. Write lots of code, using only a simple editor like Notepad. This will force you to learn the tags more quickly.

2. Read the source code of websites that you like and don’t like, and figure out how they did things, but don’t cut and paste or copy them.

Review

• Why is it important to follow consistent coding guidelines?

• What are the current HTML/XHTML standards?

Review

• Why is it not a good idea to use the <u> tag?

• Which heading is the largest, <h1> or <h6>?

• What does the <hr> tag do?

• Aqua - Aqua • Red - Red • Green - Green • Blue - Blue • Violet - Violet • Fuchsia - Fuchsia • Gray - Gray • Lime - Lime • Maroon - Maroon • Navy - Navy • Olive - Olive • Purple - Purple • Silver - Silver • Teal - Teal • White - White • Yellow - Yellow