HTML

Download as pdf or txt
Download as pdf or txt
You are on page 1of 91

Web Technology --An Introduction

World Wide Web (WWW)

WWW is a framework for accessing linked documents spread out over millions of machines all over the Internet. The WWW has a unique combination of flexibility, portability, and user-friendly features. In 1989, the WWW project was initiated by CERN (European Center for Nuclear Research) to create a system to handle distributed resources for scientific research.

World Wide Web (WWW)


Architectural Overview:

The WWW consists of a vast, worldwide collection of documents. These documents are known as Web Pages/ Pages.

The web pages are created by using different markup languages.


Each page may contain links to other pages. The idea of having one page point to another is called hypertext.

World Wide Web (WWW)


Architectural Overview: Together with the links to other pages when the page contains other media elements like image, graphics, sounds, video etc. then the page is known as hypermedia.

Pages are viewed with a program called a browser, e.g., Internet Explorer, Netscape Navigator etc. The browser fetches the page requested, interprets the text and formatting commands on it, and displays the page properly formatted on the screen.

Web Servers

After creation of several linked web pages they are organized and stored in a central computer. The organization of web pages into directories and files stored on the hard disk drive of a central computer is called Web Site creation. Computers, which store web pages in the form of directories and files and provide these files to read, are called Servers.

Web Servers

The Server Computer runs special software called Web Server software that allows:

Web Site Management. Accept a clients request for information. Respond to a clients request by providing the page with the required information.

Example: Internet Information Server (I.I.S), Apache Web Server, Netscape Server, and Microsoft Personal Web Server.

Web Browsers

To access information stored in the form of web pages, user must connect to a Web Server. Once connected, an interface that displays the content of the web page is required. Computers that offer the facility to read information stored in web pages are called Web Clients. Web Client runs special software called a 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.

Web Browsers

Ex. Netscape Communicator, Explorer, Mozilla Firefox.

Internet

Each browser usually consists of three parts: a controller, client programs and interpreters.
The controller receives input from the keyboard or the mouse and uses the client programs to access the document.

After the document has been accessed, the controller uses one of the interpreters to display the document on the screen.

Web Servers and Web Browsers


Establish Connection Client issues a request and Server sends a Response. Server Terminates the Connection. Server closes the Connection
1. Connect 2. Request

Browser or Web Client

Web Server
3. Reply 4. Close

Web Tiers

The traditional method of Internet browsing involved simple client server interactions. For conducting E-commerce transactions this simple request reply procedure is not sufficient. Therefore the web pages were made dynamic and session management was added to the overall process to create a transactional environment. These additions further create various ECommerce architectures which is known as Web tiers. Different tiers are: 1-Tier or Single Tier, 2-Tier, 3Tier, n-Tier

1- Tier or Single Tier

When an application running on a single computer and performs all the required task such as displaying screens and occupying data from the user (presentation logic), performing validations, bringing records from the database and updating them when needed (business logic),

1- Tier or Single Tier


1-Tier or Single Tier Such a desktop computer are known as standalone applications or 1-Tier applications. They dont depend on any other computer or application. No separation between presentation and business logic.
User Interface Database

Business Logic

2- Tier

Involves two computers in executing an application. In fact these were a client-server architectures where the tier at the client end would execute application running on a powerful server computer remotely. The server would also host all the files, databases, transaction management features and the overall logic. Clear separation between the presentation and business logic.

2- Tier

Most of the time the server is the database server and the client being a graphical user interface to operate on data. Since the client terminal lacked any processing power at all and was merely an input output device for interacting with the remote server, it was known as very thin client.
Request

Very thin client


Response
Tier 1: Very basic input-output capabilities. Absolutely no processing power

Powerful server
Tier 2: Application logic transaction management files / database access

2- Tier

As the personal computers became more powerful in processing, people wanted to more work done by the client. In addition to GUI design the client side application started to perform local tasks such as simple validations, calculations etc.

This shiftment of some portion of application logic to the client from the server makes the client highly thick and the architecture is known as thicker client architecture.

2- Tier

The amount of thickness of client varies from application to application. So, together with developing the server application, the client applications also to be developed.
Request

Thick client

Powerful server

Response Tier 1: GUI Interactions with the user Tier 2: Major application logic some processing like transaction management Local validations etc. files / database access

3- Tier

In a 2-Tier application, some part of the application logic was hard coded as a part of the application running at the client side and the rest was a part of the database processing at the server side. If there were any changes in the application logic both tiers would get affected. The 3- tier architecture solves this problem.
In this approach the application logic is taken from both the client and server and clubbed into a new tier.

3-Tier

The new tier is sandwiched between the existing two tiers. The new tier is called application server, since it hosts all application logic, business rules and performs transaction management. The first tier is a thick client with GUI features and performs basic validations. The last tier is now a database server, which is solely responsible for database processing and is independent of the application logic

3-Tier

Request

Less thick client

Response

Application Server

Database Server

Tier 1: GUI interactions Tier 2: Application Logic, with the user and transaction management, Basic validations calls to the database server

Tier 3: Database Processing

N-Tier

It is a system, which supports a number of different configurations. In an n-tier architecture the application logic is logically divided by function, rather than physically.

n-tier architecture breaks down like this:

A user interface that handles the users interaction with the application- these can a web browser running through a fire wall or a heavier desktop application.

N- Tier

Presentation logic that defines what the user interface displays and how a users requests are handled. Business logic that models the applications business rules, often through interaction with the applications data. Infrastructure services that provide additional functionality required by the application component, such as messaging, transactional support. The data layer where the data resides.

Uniform Resource Locator (URL)

Web Pages may contain pointers to other Web pages. Pointing one web page from another web page requires some mechanisms for naming and locating pages. In particular, three questions had to be answered before a selected page could be displayed: What is the page called? Where is the page located? How can the page be accessed? Each page is assigned a URL (Uniform Resource Locator) that effectively serves as the pages worldwide name. The Uniform Resource Locator defines four things: method, host computer, port and path.

Uniform Resource Locator (URL)

The method is the protocol used to retrieve the document, for example HTTP.

The host is the computer where the information is located, although the name of the computer can be alias. Web pages are usually stored in computers, and computers are given alias names that usually begin with the characters www. This is not mandatory, however, as the host can be any name given to the computer that hosts the web page.

Uniform Resource Locator (URL)

The URL optionally can contain the port number of the server. If the port is included, it should be inserted between the host and the path, and it should be separated from the host by a colon. Path is the pathname of the file where the information is located. Note that the path can itself contain slashes to separate the directories from the subdirectories and files.

Uniform Resource Locator (URL)

Consider an example: The Web site for the authors department contains several videos about the university and the city of Amsterdam. The URL for the video page is

http://www.cs.vu.nl/video/index-en.html

The URL consists of three parts: the protocol (http), the host name (www.cs.vu/nl) and the file name (video/index-en.html), with certain punctuation separating the pieces. The file name is a path relative to the default Web directory at cs.vu.nl.

What is HTML?

Hyper Text Markup Language (HTML) is a language used to encode World Wide Web documents. It is a document layout and hyperlink specification language that defines the syntax and placement of various media like text, images etc. to be displayed by the browser.

HTML makes a document interactive through special hypertext links.

What is HTML?

HTML is a subset of a higher-level markup language called Standard Generalized Markup Language (SGML). The most basic element of an HTML is ASCII text, generated in a text editor like notepad, marking up means the additions of certain commands, in the form of tags, to your document, in order to tell the browser how you want the document displayed.

Tags and Attributes

Every HTML tag consists of a tag name sometimes followed by a list of optional attributes. More complicated tags have attributes each of which may have specific values associated with it. Tag attributes are placed after a tag name each separated by a space.

An attributes value is the one that follows an equal sign after the attribute name. If an attributes value is a single word or number, it can be simply added after the equal sign. All other values should be enclosed in double or single quotation marks.

Tags and Attributes

All placed between angled brackets < and >. E.g., <HEAD>,<I>,<BR>.

The order of the attributes is not important.


Tags and attributes are not case sensitive, but attribute values may be case sensitive.

Most HTML tags consists of start and end tags. End tags are the same as start tags except with a preceding forward slash (/).

How the Tags Work


The first part of the tag <tag name> turns the tag on The ending part of the tag, </tag name>, contains the "/" slash character. This "/" slash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. Think of the tag as a container.

If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document, producing undesirable results.

Steps to Creating a HTML Document

Open a text editor Create your HTML document Head - not displayed with body Body Save the HTML (extension of .him or .html) Display your HTML document in WWW browser window (Open File rather than Open Location) Check your work and modify as necessary Place it on the Web

Steps to Creating a HTML Document


NOTE: HTML tag names will be written using all lowercase or all uppercase letters. Dont mix them while writing code. <HTML> </HTML> ------------ correct syntax <html> </html> ----------------- correct syntax <Html></Html> ---------------- Incorrect syntax

HTML Tags
Basic Tags: The general layout of an HTML document is given below: <html> <head> Head Section</head> <body> body section </body> </html> The entire document is enclosed by the <html>and </html> tags. This identifies that it is an HTML document.

HTML Tags

With in the document there are two broad sections: the head section enclosed by <head> and </head> tags and the body section enclosed by the <body> and </body> tags. The head section usually contains control information, which establishes the relationship of the current document with other HTML documents and the browser, and are not displayed by the browser in general. The body section contains information that is actually displayed by the browser. It contains several elements for adding text, image, sound, video, and hyperlinks to a web page.

HTML Tags

Comments: Comments inside a program code help the programmer to understand the purpose of specific portions of the code. Comments inside the HTML take this form: <!- -Comment Text-- > The text enclosed by the comment tags are ignored by the browser and not displayed. They may however improve the readability of an HTML document.

Title Tag
An HTML document may contain title, which appears in the blue title bar at the top of the browser window. Titles are inserted using the <TITLE> tag within the HEAD portion. Only one TITLE element is permitted in an HTML document. <head> <title>My home page</title> </head>

HTML Tags
Working with text: For breaking a body of text into paragraphs, the paragraph element represented by the P tag is used. The block of text in each paragraph is enclosed within the <p> and </p> tags. <body> <p>This is simple one sentence paragraph</p> <p> This is simple two sentence paragraph. This is simple two sentence paragraph </p> </body>

HTML Tags

HTML Tags
Inserting line breaks: A single line of text may be broken into multiple parts by using the break element, represented by the <br> tag. This tag is not having an end tag. Without a break element the browser will attempt to display all text in a single continuous line. Horizontal Lines: Two bodies of text can be separated from each other by a horizontal line across the page. The Horizontal Rule element, represented by the <hr> tag can be used to do so. This tag also does not have an end tag. <p> A short poem.<br> Many had a little lamb<hr> whose fleece was white as snow </p>

HTML Tags

HTML Tags
Changing text styles: The b element renders its content in a boldface version.

The i element renders its content in an Italic version.

The tt element renders its content in a teletype font, usually used to indicate computer code or keyboard text. <b> bold</b> <i> Italic</i> <tt> Teletype</tt>

HTML Tags
Inserting Heading: HTML defines a series of heading levels from h1 through h6, whose associated numbers are intended to signify relative importance of the section below the heading. The h1 element represents the most important where h6 represents least importance. <h1> HTML tags</h1> <h3> HTML tags</h3>

HTML Tags
Pre-Formatting Text:
The pre element defines a block of preformatted text. Preformatted text is usually rendered by default in a monospace font and more importantly it preserves the white space entered into the source code for the content. <pre> NAME AGE

dip 27 raju 16 </pre>

HTML Tags
Creating Divisions:

The div element can be used to divide the page into such that a set of rules can be applied to each section. <div align="center"> <p> The First Paragraph</p></div> <p> The Second Paragraph</p> <p> The Third Paragraph</p>

HTML Tags
Indenting text: The blockquote element is intended to indent a block of content. The indented block has wider left and right margins (about 40 pixels) plus some extra white space above and below the block.

<p> Thus the story begins-</p> < blockquote > four years ago <br> there lived a poor man </ blockquote >

HTML Tags

Lists
Unordered List: The ul element is a container for an unordered list of items. An unordered list means that the items are rendered with a leading symbol that implies no specific order of items other than by virtue of location within the list. Content for each list item is defined by the nested li element. <ul> <li> One</ li ><br> < li > Two</ li ><br> < li > Three</ li ><br> < li > Four</ li ></ul>

Lists
Ordered List: The ol element is a container for an ordered list of items. An ordered list means that the items are rendered with a leading sequence of numbers or letters. Content for each list item is defined by the nested LI element. <ol> <li> One</ li ><br> < li > Two</ li ><br> < li > Three</ li ><br> < li > Four</ li ></ol>

Lists

Lists
Combination List: The ul and ol elements are combined ina single list to build up different levels of hierarchies. <ol><li> <h3 align=left>Topic1</h3> <ul><li> Topic 1.1</li> <li> Topic 1.2</li> <li> Topic 1.3</li></ul></li><br> <li> <h3 align=left>Topic2</h3> <ul> <li> Topic 2.1</li> <li> Topic 2.2</li> <li> Topic 2.3</li></ul> </li> </ol>

Lists

Definition List: The dl element is part of the dl, dt, dd triplet of elements used to create a definition list in a document. The entire list is bracketed by the dl elements tag. Each definition term (dt) is denoted by a leading dt element tag, and the definition for the term is denoted by a leading dd element and indenting any dd element that follows it.

<dl> <dt> Triangle <dd> Three sided figure <dt> Rectangle <dd> Four sided figure </dl>

Lists

Displaying Different Fonts

The font element is a container whose contents are rendered with the font characteristics defined by the elements attributes.
The face attribute is used to denote the name of the font color attribute denotes font color. Color can be specified by its name or by its RGB combination in hex.

Displaying Different Fonts

Font sizes referenced by the size attribute are on a relative size scale. The default browser font size is 3. the range of acceptable are integers from 1 to 7. The exact point size varies with the operating system and browser design.

Example: <font face = Arial color= Blue Size=2> Hello</font>

Displaying Different Fonts

Working with Images


Embedding Images:

The img element displays a graphical image in a file format the browser is equipped to handle. The common image file formats are GIF and JPEG. The value of src attribute is the URL to a file containing image data that is displayed through the img element.

The align attribute determines how the image element is rendered in physical relation to the browser window.

Working with Images

The height and width attributes define the dimensions for the space on the page reserved for the image, regardless of the actual size of the image. The values of the attributes should be positive integer numbers of percentage values.

<img src="sweet.jpg" alt="Sweet " width="400" height="200" align="middle"> hello

Working with Images

Working with Images


Putting Images in the Background:

The BODY tag used with the BACKGROUND attribute specifies an image file that is used as a backdrop to the text and other content of the page. A background image loads in its image loads in its original size and titles to fill the available document space in the browser window. The value of the attribute is any valid URL to the image file.

<body background= img1.jpg>

Working with Images


Coloring the Background:

The BGCOLOR attribute establishes a fill color (behind the text and other content) for the entire background. If you combine the BGCOLOR and BACKGROUNG element, any transparent areas of the background image let the background color show through.
<body bgcolor= gold>

Working with Hyperlinks

Hyperlinks enable the user to jump from one document to another, or even between different parts of the same document. A hyperlink consists of two parts: the first is the anchor which is the visible element on which user clicks. The second part is the pointer, which specifies that target document that will open when the anchor is clicked.

Working with Hyperlinks


Creating Hyperlinks: The a element is used to create a link to another document, the document may be a local HTML file or a web page on the Internet. A hypertext is displayed by blue underlined text. Whenever the pointer is placed on the hypertext, it changes to a hand icon and the target document name is displayed in the status bar of the browser.

Working with Hyperlinks


Say we want to link a webpage named second.html from a web page first.html. For that we have to create two web pages and include <a href="second.html"> GO to second.html</a>in first.html. Creating Hyperlinks with images: Hyperlinks may also be created with images. For example, a user clicks a button to navigate to another page or to click on small image to open larger images. <a href= third.html><img src= next.jpg></A>

Working with Hyperlinks


Changing Link Appearance: A hyperlink need not always be blue in color, you can combine A tags with font tags specifying different types, sizes, colors, like this:

<a href="test.html"><font face= Arial color= #008088 size=20> Go to Test page</font></a>

Working with Hyperlinks


Creating Bookmarks: A bookmark is a hypertext which when clicked, instead of opening a new document, jumps to another portion of the same document. Let us consider an HTML file called manual.htm which contains a link Go Section 2 somewhere in the document but not in the same page. When the user clicks on the link, he is automatically taken to Section 2 on the some other page of the same document.

Working with Hyperlinks

For this scheme, a bookmark has first to be created for the concerned section. <a name = section2> Section 2</a> Next a hyperlink is to be created by specifying the section name <a href = manual.htm#section2> Go to Section 2</a>

Working with Tables

A table is a rectangular structure containing number of rows and columns.


To create tables use the table tag. Within the table tag the tr tag specifies the number of rows and td tag specifies the number of data cells within each row. The caption tag along with the attribute align created caption for the table. The th tag creates a heading cell with text in a bold font. The border attribute fixes the width of the border around the table. By default it is 1 pixel wide.

Working with Tables

You can create tables in which a cell spans several rows or a row spans several columns. This is done by specifying rowspan and colspan attributes within th.
The cellspacing attribute fixes the spacing between the cells and the cellpadding fixes the gap in pixels between the edges of a cell and its contents.

Working with Tables


<table border = 50 cellspacing = 20 cellpading = 10 width = 100> <caption align = top> this is the first table</caption> <tr> <th>Heading</th> <td>data 1</td> <td>data 2</td> <td>data 3</td> </tr> </table>

Working with Tables

border

cellpadding

cellspacing

Working with Tables


A table with COLSPAN attribute. <table border> <caption align = top> Example of COLSPAN </caption> <th colspan = 3>Heading1</th><th>heading2</th> <tr><td>data 1</td><td>data 2</td><td>data 3</td><td>data 4</td></tr> </table>

Working with Tables


A table with ROWSPAN attribute. <table border> <caption align = top> Example of ROWSPAN</caption> <tr><th rowspan = 3>Heading1</th><td>data 1</td></tr> <tr><td>data 2</td></tr> <tr><td>data 3</td></tr> <tr><th>heading2</th><td>data 4</td></tr> </table>

Working with Tables

Working with Forms

An HTML form is used to send user supplied data to a server program over the Internet.
The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag.

Working with Forms

All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as headings, paragraphs, tables, and so on. When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a Submit button.

Working with Forms

The action invoked when the user clicks a Submit button is defined by the ACTION attribute of the FORM tag. The value of the ACTION attribute is usually a URL that points to server program. The program runs on a server, processes arguments sent by the form, and returns data to the browser.

Working with Forms

The different types of user input elements are:


Textfields Check Boxes

Radio Buttons Text area


Select elements Action buttons

Working with Forms


Textfields: The text field is used to specify single line textual data like name E-mail etc. <body> <form method = POST action = www.abc.com /example.php> First name:<input type="text" name="firstname" /><br /> Last name:<input type="text" name="lastname" /> </form>

Working with Forms


Textfields: Here the METHOD = POST specifies that data is to be posted or written to the server, the ACTION attribute specifies the name of the php program on the server that will handle the data from the client. Checkboxes: The checkboxes are used to specify true/false options by clicking with mouse pointer. <input type="checkbox" checked/>CPU<br> <input type="checkbox"/> RAM<br> <input type="checkbox"/>Disk<br>

Working with Forms


Radio Buttons: Radio buttons are similar to checkboxes, but whereas multiple checkboxes can be selected at a time, radio buttons have to be divided into groups such that only one radio button per group may be selected at a time. The group is specified by the NAME attribute.
<input type="radio" name="cpu" checked> CPU<br> <input type="radio" name="cpu" > RAM<br> <input type="radio" name="cpu" > DISK<br> <input type="radio" name="ram" checked> 64MB<br> <input type="radio" name="ram" > 128MB<br> <input type="radio" name="ram" > 256MB<br>

Working with Forms


Text Area: It allows the user to enter an unlimited lines of text. The COLS and ROWS attributes fixes the number of rows and columns of the text area. <textarea cols=40 rows = 4></textarea>

Working with Forms


Select Elements: Created by the SELECT tag. Allows the user to select items from a pull-down menu. The options in the menu are included using the OPTION tag. The SIZE attribute determines how many items are visible at a time. The MULTIPLE attribute allows the user to select multiple options at a time by holding down SHIFT key.

Working with Forms


Example: <select size =4 multiple> <option selected>CPU <option>RAM <option>Disk <option>Monitor <option>Keyboard <option>Mouse </select>

Working with Forms


Action Buttons: When a user clicks a RESET button all the elements in the form are reset to their default values. The VALUE attribute specifies the text to be displayed on the button. <input type = reset value= clear form> <input type = submit value= Done>

Working with Forms

Working with Frames

A frame structure allows us to display multiple HTML documents at the same time on the screen. For this the browser window needs to be partitioned into different compartments and each compartment should be associated with specific HTML files. The document required to divide the browser window into section or frames is called the frame definition document.

Working with Frames

It differs from the normal HTML file in that here the BODY tag is replaced by the FRAMESET tag. Each frame is given a name and the particular file is to be shown in that frame is also specified.

<html><head> <title>frame definition</title> </head> <frameset cols = 20%,80%> <frame src= content.htm name= content_frame> <frame src= main.htm name= main_frame> </frameset> </html>

Working with Frames

Usually the content portion holds several hyperlinks related to topic name. When the user clicks on a hyperlink, the content matter of the specific topic appears on the other frame.

< a href=main.html target = main_frame> Home</a><p> < a href=topic1.html target = main_frame> Topic1</a><p> < a href= topic2.html target = main_frame> Topic2</a><p> < a href= topic3.html target = main_frame> Topic3</a><p> </body>

Working with Frames-2

You might also like