Scribd
Upload
99 views

5.basic Web Design Lab

1. This document outlines the course objectives, outcomes, content, and assessment for a Basic Web Design Lab course. 2. The course aims to teach students how to create HTML documents with formatting, images, tables, frames, and embed multimedia objects to develop a static website. 3. Over the course of 15 units, students will learn HTML tags and CSS to design web pages, add links, tables, frames, and multimedia. They will complete graded exercises and a mini project to develop a static multi-page website.

Uploaded by

Team yasar
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
99 views

5.basic Web Design Lab

1. This document outlines the course objectives, outcomes, content, and assessment for a Basic Web Design Lab course. 2. The course aims to teach students how to create HTML documents with formatting, images, tables, frames, and embed multimedia objects to develop a static website. 3. Over the course of 15 units, students will learn HTML tags and CSS to design web pages, add links, tables, frames, and multimedia. They will complete graded exercises and a mini project to develop a static multi-page website.

Uploaded by

Team yasar
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/ 7

Government of Karnataka

Department of Technical Education


Bengaluru

Course Title: Basic Web Design Lab


Scheme (L:T:P) : 0:2:4 Total Contact Hours: 78 Course Code:
15CS22P
Type of Course: Tutorial and Credit :03 Core/ Elective:
Practical’s Core
CIE- 25 Marks SEE- 50 Marks

Pre-requisites:
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 Outcome

On successful completion of the course, the students will be able to attain CO:
Experiment CL Linked PO Teaching
Course Outcome Hrs
linked
CO1 Understand the concepts of Unit-I 6
U 1,2,4,8,10
website development
Demonstrate knowledge and 1,2,3,4
CO2 skills utilizing various HTML 27
U/A 1,2,3,4,8,9,10
tags for designing a static web
page.
Apply screen-based user 5,6,7,8,910,11,12
interfaces, with graphics, textual
CO3 components, and navigation U/A 1,2,3,4,8,9,10 24
systems to achieve a unified,
functional environment that
results in static web pages.
Illustrate Table, Frames and 13,14,15,16
relate the Cascading Style Sheets
(CSS) features to specify various
aspects of style, such as colours
CO4 and text fonts and sizes, in their 21
U/A 1,2,3,4,8,9,10
HTML documents and to
understand the difference
between linked, embedded and
inline style specifications and
how they operate in a “cascade”.
Total sessions 78

Legends: R = Remember U= Understand; A= Apply and above levels (Bloom’s revised


taxonomy)
Directorate of Technical Education Karnataka State 15CS22P Page 1
Course-PO Attainment Matrix

Course Programme Outcomes


1 2 3 4 5 6 7 8 9 10
Basic Web Design Lab 3 3 3 3 - - - 3 3 3
Level 3- Highly Addressed, Level 2-Moderately Addressed, Level 1-Low Addressed.
Method is to relate the level of PO with the number of hours devoted to the COs which address the given PO.
If >40% of classroom sessions addressing a particular PO, it is considered that PO is addressed at Level 3
If 25 to 40% of classroom sessions addressing a particular PO, it is considered that PO is addressed at Level 2
If 5 to 25% of classroom sessions addressing a particular PO, it is considered that PO is addressed at Level 1
If < 5% of classroom sessions addressing a particular PO, it is considered that PO is considered not-addressed.

Content

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.

List of 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.

Directorate of Technical Education Karnataka State 15CS22P Page 2


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

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.

Directorate of Technical Education Karnataka State 15CS22P Page 3


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

Course Assessment and Evaluation Scheme:

When/Where
To (Frequency Max Evidence Course
Method What
whom in the Marks collected outcomes
course)
Two Tests;
(Average of
10 Blue Books 1,2,3,4
two Tests will
be computed.)
CIE Record
(Continuous IA Writing
Internal Tests (Average
10 Record Book 1,2,3,4
Evaluation) marks of each
Students
exercise to be
computed)
Mini Project 05 Report 1,2,3,4
TOTAL 25
SEE
Answer
(Semester End End of the
50 scripts at 1,2,3,4
End Exam course
BTE
Examination)
Student Feedback on Middle of the Feedback
1, 2 Delivery
course course forms of course
1,2,3 ,4
Effectiveness
of Delivery
Students
End of Course End of the of
Questionnaire
Survey course instructions
and
Assessment
Methods
*CIE – Continuous Internal Evaluation *SEE – Semester End Examination
Note:
1. I.A. test shall be conducted as per SEE scheme of valuation. However obtained marks
shall be reduced to 10 marks. Average marks of two tests shall be rounded off to the next
higher digit.
2. Rubrics to be devised appropriately by the concerned faculty to assess Student activities.

Directorate of Technical Education Karnataka State 15CS22P Page 4


Questions for CIE and SEE will be designed to evaluate the various educational components
(Bloom’s taxonomy) such as:
Sl. No Bloom’s Category %
1 Remembrance 10
2 Understanding 30
3 Application 60

Format for Student Activity Assessment

DIMENSIO Unsatisfactor Developin Satisfactor Good Exemplary Score


N y g y 4 5
1 2 3
Collection of Does not Collects Collects Collects Collects a 3
data collect any very some basic relevant great deal
information limited information information of
relating to the information ; refer to ; concerned information
topic ; some the topic to the topic ; all refer to
relate to the the topic
topic
Fulfill team’s Does not Performs PerformsPerformsPerforms 4
roles & perform any very little nearly all all duties
all duties of
duties duties duties duties assigned
assigned to team roles
the team role with
presentatio
n
Shares work Always relies Rarely Usually Does the Always 3
equally on others to does the does the assigned does the
do the work assigned assigned job without assigned
work; often work; having to work
needs rarely be without
reminding needs reminded. having to
reminding be
reminded
and on
given time
frame
Listen to Is always Usually Listens, but Listens and Listens and 3
other Team talking; never does most sometimes contributes contributes
mates allows anyone of the talk too to the precisely to
else to speak talking; much relevant the relevant
rarely topic topic and
allows exhibit
others to leadership
speak qualities
TOTAL 13/4=3.2=
4
*All student activities should be done in a group of 4-5 students with a team leader.
Directorate of Technical Education Karnataka State 15CS22P Page 5
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 6


Model Question Bank

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

Note: One Question to be given from the following.

1. Illustrate 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 7

You might also like