Вы находитесь на странице: 1из 6
School of Computing Science and Engineering (SCSE) B.Tech – CSE [Winter ­2012] Course : CSE308

School of Computing Science and Engineering (SCSE) B.Tech – CSE [Winter ­2012] Course : CSE308 – Internet and Web Programming LAB

Instructions to the Students:

The following topics are covered in IWP LAB

Hypertext Markup Language (HTML )

Cascading Style Sheet (CSS)

Java Script Basics

PHP Scripting Language

You can use either simple text editor or Netbeans IDE for developing code. [Do not use Dreamweaver or any WYSIWYG Editor]

You can refer the latest and updated tutorials of web related programming from W3C Schools web site ( http://www.w3schools.com/ )

Deadline for Completing LAB Cycle 1 : 17/02/2012

I. Hyper Text Markup Language (HTML) Activity ­1: Introduction to HTML

1. Write HTML code to develop a web page having the background in red and title “My First Page” in any other color.

2. Create a HTML document giving details of your name, age, telephone, address, pin code & Email­id aligned in proper order?

3. Write HTML code to design a page containing a text in a paragraph give suitable heading style.

Activity ­ 2 : Tags in HTML

HTML Topics : Words, Lists, Simple Links, More Advanced Text, Simple Images, Tables,Colours, Advanced Links

1. Create a simple page introducing yourself, how old you are, what you do, what you like

1

and dislike.

2. Modify the introduction to include a bullet list of what you do and put list the 5 things you

like most and dislike as numbered lists.

3. Create another page about your favourite hobby, and link it to (and from) your main page.

4. Centre something, and put a quote on one of your pages

5. Put an existing image on a web page.

6. Create a table, use a heading and at least one use of rowspan/colspan

7. Colour a page and some text within the page

8. Link to another site

Activity ­ 3 : Frames in HTML

1. Create a web page which should divide page into two equal frames

Frame 1

Frame2

2. Create a web page which should generate following output:

Frame 2

Frame 3

Frame 1

3. Create a web page having two frames one containing lines and another with contents of

the link. When link is clicked appropriate contents should be displayed on Frame

Activity ­ 4 : Forms in HTML

1. Design a form using all input types.

2. Create a simple form accepting

Name

Register Number

Course Code

Date of Registration

Email ID

and Submit button

Activity – 5 : HTML 5 Introduction

1. Design web sites with following HTML 5 tags

<figure>

<header>

2

<footer>

<audio>

<embed>

<canvas>

2. Apply HTML 5 validation for an activity 4

II. Cascading Style Sheet (CSS)

Activity ­6: Design a Web page with “Styling Lists”

Activity ­6: Design a Web page with “ Styling Lists” Activity ­7: Write a CSS code

Activity ­7: Write a CSS code to create rounded corner in your web page and also consider the browser compatibility while designing it.

also consider the browser compatibility while designing it. Activity ­8: Write a CSS code to design

Activity ­8: Write a CSS code to design a web page using horizontal drop down menu.

compatibility while designing it. Activity ­8: Write a CSS code to design a web page using

3

Activity ­9: Write a CSS code to design a web page with following style (Use HTML Grouping Tags <div> and <span>).

(Use HTML Grouping Tags <div> and <span>). Activity ­10: Design the following Table using HTML and

Activity ­10: Design the following Table using HTML and CSS code (Change the row color while hover the mouse cursor).

code (Change the row color while hover the mouse cursor). III. JavaScript Activity­11 : JavaScript Basics

III. JavaScript

Activity­11 : JavaScript Basics

Create a page with JavaScript to do the following. These can all be on one page.

1. Prompt the user for their name.

2. Use a pop­up box to welcome the user by name.

3. Display the current date on the page in the following format: February 12, 2012. Do not display the time. Do not "hard code" the date; if I load the page tomorrow, I should get a different date than if I load it today.

4. Display the last modified date of the document.

5. Put some useful advice, on any subject, in the status line of the browser.

4

6.

Display a message saying Good Morning if it is in the morning, Good Afternoon if it is in the afternoon, and Good Evening if it is in the Evening.

Activity­12: Cookie and Dialog Box

1. Write a JavaScript statement that displays a dialog box welcoming visitors to your web page with visitor count.

2. Create a page that prompts the user for his or her name as the page loads (via dialog box) and then welcome the user by name in the body of the page and also remember and display the name in other pages.

Activity­12: Function in JavaScript

1. Write a script that contains a function that you can pass a mark as a parameter and display a grade with pass or fail condition. Demonstrate the functions by printing out the grade and pass/fail status for five students. The grade should be calculated based on the following

The grade should be calculated based on the following Activity­13: Create web page containing a dynamic

Activity­13: Create web page containing a dynamic digital clock at the top right corner. The clock should be the following format

24 Hour Format Clock [23:11:13]

Apply CSS to make border and background

clock should be the following format • 24 Hour Format Clock [23:11:13] • Apply CSS to

5

Activity­ 14 :

1. Create a form that includes 2 textboxes (one for name, one for email address), a textarea,

a dropdown box (<select> tag), a set of radio buttons, and a set of checkboxes. Format

the form using a table. The ACTION attribute of the form tag should be to email the form results to your email address.

2. Add JavaScript event handlers to the form to validate the form before it is emailed to you.

If there is a problem, display the problem with the page in some way. Possible ways to do

this are:

a pop­up box

displaying the problems in a new window in red text and having the user use the back button to go back to the original page

displaying the problems in the current window at the top of the page in red text

displaying the problem in another frame

3. Validate that an entry has been made in each form element

4. Validate that the email address contains an @ sign.

6