Design the following static web pages required for an online book store web site

MALLA REDDY ENGINEERING COLLEGE (Autonomous)(Approved by AICTE and Affiliated to JNTUH) Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & EngineeringWEB TECHNOLOGES LAB Roll no:..Program/Exp.no:.. Sheet no. Date Name of the Program

HTML Introduction:Web server: A system with Applications programs/resources on the internet.website: A collection of one or more web pages

webpages: A storage disk contains a file ( HTML code)Design Instructions for devoloping web pages(websites) 1) Collect the relevent information and sort the information contents ex.Home page etc2) Set the goals of the website3) Organize your content in the main topic4) Come up with general structure for pages and topics

HTML: HTML program( code) contains series of tags that are integrated into a document. It contains formattedstructured blocks.

HTML used to create the websites/web pages.

Tag: Formated text document is composed of a set of elements such as paragraphs,headings, yperlink,images,tables, lists etc.Tag elements surrounded by Angular brackets. Tag tells that control information of the structure of thedocument. ex. Heading 1 formatted information is displayed on heading tag displayed off/closed.Tags are not case sensitive.

Note: white space, tabs, new lines ignored by the browser.

The structure of HTML document.

INFORMATION

Heading 1 paragraph

Processing the document HTML code begin with and end with

Two elements of direct children to HTML tag is 1) head 2) bodyHead: contains Control information used for browsers and servers

Body : contains visible page of the content

Title : Tag is mandatory used to present name of the bookmark and search engine.Paragraph tag: All the text images,text, paragraphs in our documents represented by paragraph tag.Syntax:

TEXT INFORMATION

Heading Tag: To display the Textual information in headingtag. syntax Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Note: h1 display maximum font and h6 display the minimum font.

1)Write a HTML program to display WELCOME MESSAGEFirst.html

MY FIRST HTML PROGRAM WELCOME TO HTML programming

OUTPUT

2) write a html program using header tagsHeader.html

PROGRAM EXAMPLE OF HEADER TAGS HEADER1 FONT SIZE HEADER2 FONT SIZE HEADER3 FONT SIZE HEADER4 FONT SIZE HEADER5 FONT SIZE HEADER6 FONT SIZE

OUTPUT :

IMAGE TAG : Images are used aspect of pleasant web experience. Image get important information of website.Browsers display a limited range of image types.Image type GIF or JPG will be displayedSyntax: INFORMATION Set background use given image.Note:background images used for good appearanceImage tag syntax

URL: Source pathHeight : width of the image in pixelsAlt: attribute is used for to understand the structure of thepageAlign: top, center,bottomDefault: bottom of the edge.Usemap: attribute used for image maping

Example:

3)Write a HTML program to embed an image into web content.

PROGRAM EXAMPLE OF IMAGE TAG INSERTING IMAGE

OUTPUT:

HYPER LINK Tag:The powerful and flexibility of HTML comes from simple method it used hyperlink.A single tag is used all types of links.Hyper link used to link the documents where they add or understand the work or reduce the download times.Screenful information forcing reader to download the relevant documents.

Syntax: INFORMATION

Example: NEXT PAGE JNTUH website

4) write a HTML program to create Hyper links to other documents.

PROGRAM EXAMPLE OF HYPER LINK FIRST HTML

HEADER TAG

IMAGE
JNTU WEBSITE
BLUE HILLS IMAGE

OUTPUT:

LISTS :One of the most effective way of structuring website and its contents using lists.Provide piece of information index to site,but could become highly complex.Lists can be easily embedded with other lists to provide complex yet readable structures.HTML provides three types of lists

The basic bulleted list(unordered list) : bulleted items A numbered list(ordered list) :Number itemsDefinition list: list of item with descriptionEach has a different use but generally the definition list is the most flexible of the three as it easily incorporates images paragraphs of the text while keeping an obvious structureOrdered list:type of attribute to select numbers letters Roman Numberals

syntax:

1. First

   1. Or

Each list of item by Ordered list( numbered list):

Syntax:

List of items enclosed by tag.

Attribute tableValue for type attributeDescriptionExample

1Arabic numerals(the default)1,2,3..

ACapital lettersA,B,C,D

aSmall lettersa,b,c,d

ILarge roman lettersI,II,III,IV

i Small Roman lettersi,ii,iii,iv

5.Write a HTML program to print the COURSES of MREC by using unordered list

Malla Reddy Engineering College B.Tech Courses

CSE

IT

ECE

ME

CE

Mining

M.Tech Courses

CSE

IT

CS

OUTPUT.

6.Write a HTML program to print the INDEX of Project by using ordered list

Malla Reddy Engineering College INDEX

1. Analysis
2. Design
3. Implementation
4. Coding
5. Docuementation
6. OUTPUT
7. Biblography

OUTPUT:

7.Write a HTML program to print the courses of MREC by using Definition list

Malla Reddy Engineering College B.Tech Courses CSEITECEEEEME CE M.Tech Courses CSE IT CS

TABLEStable: One of the Most useful HTML construct is the table.table is a grid of information like spread sheet contains data items.Table uses stuctureing the peice informaiton and structuring the whole webpage

syntax: table rows table data.

table header One caption for table

column span(colspan) is added to or tag row span(rowspan) is used with tag

cellpading: defines the space inside each cell(ie the space between the edges of the cell and its contents)Cellspacing: Defines the space between the cells8)Example1 of tables

Table Example1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2

OUTPUT:

9) Example 2 of forms border and attributes

Table Example2 row1,cell1 row1, Cell2

OUTPUT:

10) Example of forms using tr,th, and td tags

Table Example3 HEADER1 HEADER1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2

OUTPUT:

11) Example of forms using cellspacing and cellpading

Table Example3 HEADER1 HEADER1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2

OUTPUT:

12) Example of forms using cellspacing and cellpading

Table Example3 HEADER1 HEADER2 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2 OUTPUT:

13) Example of forms using thred data alignment.

Table Example3 align=left valigh=top align=right valign=top align=center valigh=bottom no preference

OUTPUT:

14)Example of forms using colspan

Table Example M.Tech

CSE IT

OUTPUT:

15) Example of forms using rowspan

Table Example M.Tech CSE IT

OUTPUT:

------------16 Write a HTML program to desing Time table of III B.Tech CSE-A using tables

B.Tech TIME TABLE MALLA REDDY ENGINEERING COLLEGE
(Autonomous)

III YEAR B.Tech (CSE-A) TIME TABLE

I
9:30AM -10:20AM II
10:20AM -11:10AM III
11:10AM -12:00 IV
12:00AM -12:50
12:50PM -1:30PM V
1:30PM -2:20PM VI
2:20PM -3:10 VII
3:10PM -4:00PM MON OOAD NS MS CD LUNCH WT NS STM

TUE WT NT OOAD NS WT CD/AEC lab WED CD STM SS WT MS STM OOAD THU MS WT-CD/AEC lab NS STM CD FRI STM WT OOAD LIB CD NT SPORTS SAT NS WT CD MS OOAD SS MS

OUTPUT:

FORMS: Collect the information from visitor to your site, you need a form.You can use several different kinds of forms on different websites , Forms are used to add the elements of interaction to the website.

Form is collection of information data like: text,Buttons,Checkbox, radio-button,Select box, File select menu , and hidden controls.Form data is submitted by the user.For every form there is an application program in the application server to process the results.We can create forms by using the tag.

...

Note: Forms can contain virually all other markup tags but cannot be nested within another tag.

The action attribute specifies the name and location of CGI script that will be used to process the data.

post: To send the information to server. get : To retrieve the inforamtion from server, and get method returns ASCII data.

Tags generally used with form: input type, select, option, textarea etc.....

input type:

text: Create input text accept size of maxmium characters long.

Password: works exactly like input is not displayed to the screen replaced by (* an asterisk security).

radio: Creates a radion button.

Check box: produces a simple check box.

submit: Creates a button display the value of attribute,it is used to send the data to server.

reset: Creats a button, used to clear the form data.

Image: used to control the postion of image.

Select tag: ... used to list the items from which the user can choose.Tag encloses a set of options and when sent to server.