LAB 01.docx

(1)

LAB 01:

I

NTRODUCTION TO

HTML

Theory

Before you do the basics of HTML some introduction on the Internet, the Web and HTML might be helpful.

The Web Engineering

Web engineering actively promotes systematic, disciplined and quantifiable approaches towards successful development of high-quality, ubiquitously usable Web-based systems and applications.

Web engineering is multidisciplinary and encompasses contributions from diverse areas: systems analysis and design, software engineering, hypermedia/hypertext engineering, requirements engineering, human-computer interaction, user interface, information engineering, information indexing and retrieval, testing, modeling and simulation, project management, and graphic design and presentation.

The Internet

An internet is network of networks. In simple words it is a set of protocols (rules) for transmitting and exchanging data between networks.

Client and Server

A client is a computer that requests something from another computer.

A server is a computer that responds to requests for service from client.

TCP/IP

TCP/IP (Transmission Control Protocol/Internet Protocol) is the standard rule set for the Internet communication.

The World Wide Web

The World Wide Web, also called the WWW or simply the Web, dates back only to 1989, when it was proposed by Tim Berners-Lee.

The World Wide Web is composed of several different components.

(2)

 WWW Server

WWW Servers are the information providers. They can run on just about any platform. Netscape, Spry, Open Text, Basis, Explorer and other companies provide commercial servers at reasonable prices.

 WWW Browsers

Browsers are the information retrievers.

 HTTP

It is the Hyper Text Transfer Protocol. It defines how information is transferred between server and browser.

 SGML

SGML is the Standard Generalized Markup Language. It is ISO Standard 8879:1986. It provides rules for tagging data.HTML is an application of it.

 CGI

The Common Gateway Interface is programming for the Web.

 URLs

WWW browsers use a Universal Resource Locator to identify the location of an object. Object can be a file, a picture, a movie or just about anything.URL contain three pieces of information.

Protocol / machine name path name of the object

http://www.uit.edu/contactus.htm

Basics of HTML

HTML is set of instructions. Each instruction for Example <TITLE>, is called element.HTML is a programming language of sorts. The instructions are not compiled by a traditional compiler but rather by a WWW browser.

Some element can have qualities called attributes.

All elements are enclosed in < > brackets. Most elements require start and end tag. The start tag for TITLE looks like <TITLE> and end tag looks like </TITLE>.

The groups of elements are as follows:

 The HEAD elements

 The BODY elements

(3)

The <HTML> Elements

The <HTML> element encloses the entire HTML document .The start tag <HTML> should be the first thing in HTML file and </HTML> should be the last one. Though it is optional but should be used.

 The <HEAD> Elements

The <HEAD> element encloses the head section of the document. The title is always in the Head section. It is also optional.

 The <TITLE> Elements

This element denotes the title of the documents.

 The <BODY> Element

The BODY Elements encloses the body section of the document. Most elements are found within the <BODY> element.

 The <H1> Element

The <H1> element is used to denote the first level headline of an HTML document. There are six levels of headlines.

All headlines must have end tags.

 The <B> Element

The <B> element indicates that all characters between the starting tag <B> and ending tags </B> are to be bold.

 The <P> Elements

The <P> Elements denotes the start of a new paragraph. The browser adds a blank at the point of tag <P> in order to separate two paragraphs.

 The <A> Element

(4)

HTML <TABLES>

Tables are define with table tags. <Table>. A table is divided into rows (with <tr>

tag), and each row is divided into data cells (with <td> tag). Td stands for “table

data “holds the content of a data cell. A <td> tag can contain text, link, images, list,

forms, or other tables.

Header information with in a table can be define with <th> tag.

In order to give caption in table use <caption> tag.

TABLE SPAN

More than one row column in single column or row.

EXAMPLE:

<Caption> MONTHLY SAVING</caption>

<tr>

<th col span = “2” > attribute </th>

<th> MONTH </th>

<th> SAVINGS </th>

</tr>

<tr>

<td> January </td>

<!--- table containing a tag -- >

<td> <p> description about the monthly savings </p> </td>

</tr>

(5)

HTML FORMS AND INPUT

Html forms are used to pass data to server.

EXAMPLE

First name : <input type = “text” name = “first name “ size = “30”/>

<br/>

Last name : <input type = “text” name = “last name”/>

</fieldset>

</form>

TAGS FOR DIFFERENT COMPONENTS OF FORM



TEXT FIELD :

<input type = “text”/>



PASSWARD FIELD



BUTTON



CHECK BOX



DROP DOWN LIST

<option value = “mango”> mango </option>

(6)

Lab Tasks:

1. Write the HTML Code that generates a webpage contains your Resume.

http://www.uit.edu/contactus.htm