Scribd
Upload
150 views

Download

This document provides information about the Basic Web Design Lab course. The course aims to teach students how to create HTML documents with formatting, images, tables, frames and develop a static website. It will cover HTML tags for text formatting, lists, tables, links and embedding multimedia. Students will learn cascading style sheets and develop a static website as a mini project. The course will be delivered through weekly tutorials and lab sessions. Upon completing the course, students will be able to design static web pages using HTML tags and understand CSS for styling pages.

Uploaded by

shahil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
150 views

Download

This document provides information about the Basic Web Design Lab course. The course aims to teach students how to create HTML documents with formatting, images, tables, frames and develop a static website. It will cover HTML tags for text formatting, lists, tables, links and embedding multimedia. Students will learn cascading style sheets and develop a static website as a mini project. The course will be delivered through weekly tutorials and lab sessions. Upon completing the course, students will be able to design static web pages using HTML tags and understand CSS for styling pages.

Uploaded by

shahil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Course Title: BASIC WEB DESIGN LAB Course Code: 15CS22P

Credits (L:T:P) : 0:2:4 Core/ Elective: Core


Type of Course: Tutorial, Practical Total Contact Hours: 78

Prerequisites: Knowledge of Text Editor and Internet Basics.

Course Objectives: Create HTML Documents with formatting, images, tables, frames, embed
multi-media objects and develop a static website using Hyper Text Mark-up Language.

Course Contents

UNIT – I
Tutorials

1. Introduction to HTML: Web site, Web Page, Types of Web Pages, Browsers and their
types, Client –Server Model, Web –Server, Working of different types of Web Pages,
General structure of a Web Page, Scripting languages, URL, Popular Search Engines,
WWW

UNIT-II

Note: All attributes pertaining to respective tags to be practiced.

2. Structure of HTML web page:


<Head>, <title>, <body>, comments, <div>, <h1>……<h6>, <hr>, <br>
3. Basic HTML physical character tags:
<b>, <i>, <u>, <big>, <small>, <sup>, <sub>, <strike>
4. Logical character tags:
<em>, <strong>, <del>, <insert>, <cite>, <code>, <dfn>, <ins>, <kbd>,
<samp>, <strong>
5. Other HTML tags:
<p>, <font>, <abbr>, <acronym>, <address>, <blockquote>, <quote>, <q>
6. List tags: all tags pertaining to Lists
7. Table tags.
8. Hyper link tag (both Internal & External).
9. Working with Frame and Form tags.
10. Image tags & embedding a multimedia on to a web page(video, audio, zip)
11. Working with CSS (Cascading Style Sheet).
12. Develop a web page using the above tags.

Graded Exercises

1. Design a page having suitable background colour and text colour with title “My First
Web Page” using all the attributes of the Font tag.
2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and
[Register Number, Class] aligned in proper order using alignment attributes of Paragraph
tag.
3. Write HTML code to design a page containing some text in a paragraph by giving
suitable heading style.

Directorate of Technical Education Karnataka State 15CS22P Page 1


4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags.
viz : log b m p = p logb m
5. Write HTML code to create a Web Page that contains an Image at its centre.
6. Create a web page with an appropriate image towards the left hand side of the page,
when user clicks on the image another web page should open.
7. Create web Pages using Anchor tag with its attributes for external links.
8. Create a web page for internal links; when the user clicks on different links on the web
page it should go to the appropriate locations/sections in the same page.
9. Write a HTML code to create a web page with pink colour background and display
moving message in red colour.
10. Create a web page, showing an ordered list of all second semester courses (Subjects).
11. Create a web page, showing an unordered list of names of all the Diploma Programmes
(Branches) in your institution.
12. Create a HTML document containing a nested list showing a content page of any book.
13. Create the following table in HTML with Dummy Data:

Reg. Student Date of


Year/Semester
Number Name Admission

14. Create a web page which divides the page in two equal frames and place the audio and
video clips in frame-1 and frame-2 respectively.
FRAME-1 FRAME-2

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

FRAME-2
FRAME-1
FRAME-3
16. Create a web page using Embedded CSS and multimedia

Mini Project (CIE -05 Marks):


Develop a static website consisting of minimum five web pages using any open source
Editor like Bluefish, etc.

References:

1. http://www.w3schools.com/html/default.asp
2. http://sourceforge.net/projects/bluefish/
3. http://bluefish.openoffice.nl/index.html
4. http://bluefish.openoffice.nl/features.html
5. HTML Black Book, Kogent Learning Solutions Inc.ISBN-13 9789350040959
6. “World Wide Web design with HTML” by Xavier. ISBN 0-07-463971-4, Tata McGraw-
Hill Publishing company Limited.

Course Delivery:
The course will be delivered through tutorials of two hours and four hours of hands on
practice per week.

Directorate of Technical Education Karnataka State 15CS22P Page 2


Course Outcomes:
On completion of the course, the student will be able to -
1. Demonstrate knowledge and skills utilizing various HTML tags for designing a static
web page.
2. Design screen-based user interfaces, with graphics, textual components, and navigation
systems to achieve a unified, functional environment that results in static web pages.
3. Relate the Cascading Style Sheets (CSS) features to specify various aspects of style, such
as colours and text fonts and sizes, in their HTML documents and to understand the
difference between linked, embedded and inline style specifications and how they
operate in a “cascade”.
Mapping Course Outcomes with Program Outcomes

Course Programme Outcomes


Outcomes 1 2 3 4 5 6 7 8 9 10 11 12
1 S M S M S
2 S M S M M S
3 S M S M M S S S
S: Strong relationship M: Moderate relationship

Course Assessment and Evaluation Scheme:

When/Where
Meth To Max Evidence Course
What (Frequency in
od whom Marks collected outcomes
the course)
Two Tests;
(Average of two
10 Blue Books 1,2,3
DIRECT ASSESSMENT

Tests will be
CIE computed.)
(Continuous IA Record Writing
Internal Tests (Average marks
10 Record Book 1,2,3
Evaluation) Students of each exercise
to be computed)
Mini Project 05 Report 1,2,3
TOTAL 25
SEE (Semester
End End of the Answer scripts
End 50 1,2,3
Exam course at BTE
Examination)
Student Feedback on Middle of the Feedback
1, 2 Delivery
course course forms
of course
ASSESSMENT

1,2,3
INDIRECT

Effectiveness
of Delivery
Students
End of the of
End of Course Survey Questionnaire
course instructions
and
Assessment
Methods
Note: I.A. test shall be conducted as per SEE scheme of valuation. However the obtained marks
shall be reduced to 10 marks. (Any decimals shall be rounded off to next higher digit).

Directorate of Technical Education Karnataka State 15CS22P Page 3


Questions for CIE and SEE will be designed to evaluate the various educational
components such as:
1. Remembering and Understanding : - 10% weightage
2. Applying the knowledge acquired from the course : - 60 % weightage
3. Analysis : - 5% weightage
4. Evaluation : - 5% weightage
5. Creating new knowledge : - 20% weightage

Scheme of Evaluation

S.NO. SCHEME Max. Marks


1 Writing Steps / Procedure for one Question from
15
Graded Exercises
2 Execution 15
3 Presentation Skills 10
4 Viva voce 10
Total 50
Note:
1. Candidate shall submit Lab Record for the Examination.
2. Student shall be allowed to execute directly even if she / he unable to
write the procedure
3. In case of change in experiment or no write up, marks will not be
awarded for writing procedure/steps.

Resource requirements for Basic Web Design Lab


(for an intake of 60 Students [3 Batches] )
Hardware Requirement:

Sl. No. Equipment Quantity


1 PC systems (latest configurations with speakers) 20
2 Laser Printers 03
3 Networking (Structured) with CAT 6e / wireless 03
24 Port switches / Wireless Router
I/O Boxes for networking(as required)
4 Broad Band Connection 01

Software Requirement: Linux / equivalent Operating System, Editor, Web Browsers.

Note:
Students: Computers ratio in the Lab should be strictly 1:1 for a batch of twenty Students.

Directorate of Technical Education Karnataka State 15CS22P Page 4


Model Question Bank

Course Title: BASIC WEB DESIGN LAB Course Code: 15CS22P

Note: One Question to be given from the following.

1. Design a page having suitable background colour and text colour with title “My First
Web Page” using all the attributes of the Font tag.
2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and
[Register Number, Class] aligned in proper order using alignment attributes of Paragraph
tag.
3. Write HTML code to design a page containing some text in a paragraph by giving
suitable heading style.
4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags.
viz: log b m p = p logb m
5. Write HTML code to create a Web Page that contains an Image at its centre.
6. Create a web page with an appropriate image towards the left hand side of the page,
when user clicks on the image another web page should open.
7. Create web Pages using Anchor tag with its attributes for external links.
8. Create a web page for internal links; when the user clicks on different links on the web
page it should go to the appropriate locations/sections in the same page.
9. Write a HTML code to create a web page with pink colour background and display
moving message in red colour.
10. Create a web page, showing an ordered list of all second semester courses (Subjects).
11. Create a web page, showing an unordered list of names of all the Diploma Programmes
(Branches) in your institution.
12. Create a HTML document containing a nested list showing a content page of any book.
13. Create the following table in HTML with Dummy Data:

Reg. Student Date of


Year/Semester
Number Name Admission

14. Create a web page which divides the page in two equal frames and place the audio and
video clips in frame-1 and frame-2 respectively.
FRAME-1 FRAME-2

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

FRAME-2
FRAME-1
FRAME-3
16. Create a web page using Embedded CSS and multimedia

Directorate of Technical Education Karnataka State 15CS22P Page 5

You might also like