HTML Documents Basic

MODULE I

HTML Document Tags for Font & Paragraph Formatting Lists, Tables

Frames, Image Maps

Cascading Style sheets - Style Elements, Inline Style Sheets, Embedding Style Sheets, External Style Sheets

CLASS Attribute, Absolute & relative positioning of elements, DIV and SPAN tags.

MODULE II

Dynamic HTML pages Client side scripting, Java Script-variables, Arithmetic operations-message boxes, Arrays, control statements

Functions, event handling, document object model.

Dynamic updating of pages with Java Script.

Embedding ActiveX controls-using the structured graphics-ActiveX Control.

Module I

Lecture #1

1) Synopsis: HTML Documents Basic Tags for Font & Paragraph

2) Target:

At the completion of this lecture you should be able to answer questions like:

(a) What are HTML tags?

(b) What tags are used to create different fonts size?.

(c) How do you create a paragraph in a HTML page?

3) Introduction

With the advent of intranet and World Wide Web, new technologies have emerged. E-commerce (Electronic commerce) has begun to dominate the business and financial industries.

One of the easiest languages to create web pages is HTML. JavaScript is a condensed programming language that s especially designed for developing Internet and web based applications.

4) Revision / Prerequisites

HTML is about how to create pages on the web. A brief overview about browsers will be good for a beginning, though this lecture gives an idea about these terms also.

Also refer pages 11 to 88 of INTERNET & WORLD WIDE WEB- HOW TO PROGRAM by Dietel, Dietel & Nieto.

5. 1) Concepts

Terms

Before we study in detail about HTML let us get introduced to some terms which will be commonly be used here.

Files that travel across the largest network in the world, the Internet, and carry information from a server to a client are called the web pages.

Server is a machine which sends the file to requested machine or client.

The individual who develops these web pages are called the web developers.

Web pages are created using HTML syntax. All these pages are organized and stored in the HDD of the central computer called the Server. They act like service providers and run special software called web server software that allows:

· Web site management

· Accept client’s requests for information

· Respond to a client’s request for providing the pages with the required information

Example of web server software is IIS (Intranet Information Server), Apache Web Server, Netscape Server, Microsoft Personal Web Server.

Web Server software stores and manages web pages. When required the Web Server accepts requests for these Web pages, retrieves from the HDD, and sends it to the client who recommended it.

To access information stored in the form of web pages, users must connect to a Web Server. Computers offering facility to read information stored in web pages are called ‘Web Clients’.

Web Clients run a special software called ‘Browser’ that allows them to :

• Connect to an appropriate Server
• Query the server for the information to be read
• Provides an interface to read the information returned by the server.

Eg. Netscape Communicator, Internet Explorer.

Now, one question that arises is:

How does a Browser communicate with a Web Server?

Web server is responsible for sending web pages to a browser on a client machine. Browser communicates with a Web Server by a 4 step HTTP transaction.

1) Establish a connection

Client machine is given the IP address of the Server and the sub protocol that must be used i.e.) HTTP, FTP etc.

2) Client issues a request and server sends a Response

Browser connects to a Web Server using the appropriate protocol name, IP address and port no. When the Web Server gets connected, the Web Server then dispatches the ‘Default Web Document’ to the client machine.

3) Server terminates the connection

It is the Server’s responsibility to terminate the TCP/IP connection with the Browser after the Browser’s request has been met.

5. 2) HTML

HyperText Markup Language is about how a web browser displays its multimedia documents. The documents are plain text files (ASCII) with special tags or codes that a browser only knows how to interpret and display on your screen.

The current set of proposed standards is HTML 4.0 which contains more features for HTML and some attempts to reduce the complexities of different web browsers.

What are HTML tags?

When a web browser displays a page it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

     <tag_name>string of text

Example:

     
What are HTML tags?

This tag tells a web browser to display the text What are HTML tags? in the style of header level 3. We should note that the ending tag,

contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text.

HTML is not case-sensitive. But there are exceptions like in escape sequence. All tags are not supported by WWW browsers. If a browser does not support the tag, then it will just ignore it.

Every HTML document consists of certain standard HTML tags. Each document consists of

· Head

Ø Title

· Body

Ø Actual text consisting of paragraphs, lists and other elements

An example consisting of these tags is shown below:

        
HTML is Easy To Learn

        
Welcome to the world of HTML.

               This is the first paragraph. 

         
And this is the second paragraph.

Now to view the HTML document, we should create a file. Follow the steps given to see your first web page:

1. Launch a text editor program.

2. Go to the text editor window.

3. Enter the HTML program code.

4. Save the document as “filename.html”.

5. Open the web browser window.

6. Click the browse button.

7. Find the file you have created and open it.

8. You should will see in the title bar of the workspace window the text “A Simple HTML Example” and in the web page below is the paragraph written in the tags

. . . .

.

5. 3) Tags

Let us now learn about a few tags which are used in font.

5. 3. 1) The format for an HTML heading is :

your text to appear

where N is a number varying from 1 to 6 which identifies the heading size. heading 1 is the largest heading.

5. 3. 2) The web browser ignores all carriage returns typed in the text editor. But a

paragraph tag inserts a blank line and starts a new paragraph. The HTML code

is:

. . . . . .

A tag to create a break in the text is horizontal rule:

---

It inserts a straight line in the specified area.

Another tag to force the text to a new line without inserting a blank line is the break tag.

A web browser can also display certain text in different styles like Italic & bold.

The style tags is displayed in the table below along with their tags

Font Style	Tags
Bold	. . . . .
Italic	. . . . .
Typewriter Font	. . . . .

These are the physical tags which indicate the specific appearance of a section.

Another type of style tags are the logical tags which tags the text according to their meaning.

for a word being defined. Typically displayed in italics.

for emphasis. Typically displayed in italics.

for titles of books, films, etc. Typically displayed in italics.

for computer code. Displayed in a fixed-width font.

for user keyboard entry. Typically displayed in plain fixed-width font.

for a sequence of literal characters. Displayed in a fixed-width font.

for strong emphasis. Typically displayed in bold.

for a variable, where you will replace the variable with specific information. Typically displayed in italics.

These are a few of the tags which are used for fonts and paragraphs. The rest of the tags will be taught naturally as the class on HTML continues.

6) Summary

In this lecture we have learnt tags which are essential to create a web page with different fonts. Also creating paragraphs was dealt with.

7) Exercise questions

1) Why should you be concerned about differences in HTML standards?

2) What are HTML tags?

3) Where is the text of the title tag displayed?

4) What steps are involved in creating a simple HTML document?

5) How do you create a comment tag?

6) How can you display your HTML document in a web browser?

8) Programming / Computational assignments

1. Create your own web page with the tags taught in the above lecture. Create a HTML text file that includes a