WEB PAGE DESIGN Course Code : 312013

Programme Name/s : Electronics & Computer Engg.

Programme Code : TE
Semester : Second
Course Title : WEB PAGE DESIGN
Course Code : 312013

I. RATIONALE
Web Page Design is used to develop online applications for various organizations such as Organizational and
Educational websites, Virtual Learning environments, Business Applications in various fields such as Products,
Sales, Banking, Railways Reservation, Services etc. Web pages are categorized into two namely, Static and
Dynamic Web Pages. This course introduces Web Page Design using HTML5 and also give emphasis on learning
Cascading Stylesheets (CSS) which is a stylesheet language used for describing the presentation of a document
written in a markup language for formatting and styling of content.

II. INDUSTRY / EMPLOYER EXPECTED OUTCOME

The aim of this course is to help the students to attain the following Industry identified outcomes through various
Teaching Learning experiences:
• Develop and Host Website.

III. COURSE LEVEL LEARNING OUTCOMES (COS)

Students will be able to achieve & demonstrate the following COs on completion of course based learning

CO1 - Use HTML formatting tags to present content on Web Page.

CO2 - Develop Web Page using List and Hyperlinks.
CO3 - Develop Web Pages using Images, Colors and Backgrounds.
CO4 - Design HTML forms using Table and Frames.
CO5 - Apply presentation schemes on content using Cascading Stylesheet(CSS).
CO6 - Publish Website on Internet or Intranet.

IV. TEACHING-LEARNING & ASSESSMENT SCHEME

Learning Scheme Assessment Scheme
Actual
Based on LL &
Contact Based on
Theory TL
Course Course Hrs./Week SL
Course Title Abbr Credits Paper Total
Code Category/s SLH NLH Practical
Duration Marks
FA- SA-
CL TL LL Total FA-PR SA-PR SLA
TH TH
Max Max Max Min Max Min Max Min Max Min
WEB PAGE
312013 WET SEC - - 4 2 6 3 - - - - - 25 10 50@ 20 25 10 100
DESIGN

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Total IKS Hrs for Sem. : 0 Hrs
Abbreviations: CL- ClassRoom Learning , TL- Tutorial Learning, LL-Laboratory Learning, SLH-Self Learning
Hours, NLH-Notional Learning Hours, FA - Formative Assessment, SA -Summative assessment, IKS - Indian
Knowledge System, SLA - Self Learning Assessment
Legends: @ Internal Assessment, # External Assessment, *# On Line Examination , @$ Internal Online
Examination
Note :

1. FA-TH represents average of two class tests of 30 marks each conducted during the semester.
2. If candidate is not securing minimum passing marks in FA-PR of any course then the candidate shall be
declared as "Detained" in that semester.
3. If candidate is not securing minimum passing marks in SLA of any course then the candidate shall be
declared as fail and will have to repeat and resubmit SLA work.
4. Notional Learning hours for the semester are (CL+LL+TL+SL)hrs.* 15 Weeks
5. 1 credit is equivalent to 30 Notional hrs.
6. * Self learning hours shall not be reflected in the Time Table.
7. * Self learning includes micro project / assignment / other activities.

V. THEORY LEARNING OUTCOMES AND ALIGNED COURSE CONTENT

Theory Learning Suggested
Learning content mapped with Theory Learning
Sr.No Outcomes (TLO's)aligned Learning
Outcomes (TLO's) and CO's.
to CO's. Pedagogies.
TLO 1.1 Differentiate
characteristics of the given
Unit - I Introduction to HTML
type of website.
1.1 Introduction of HTML.
TLO 1.2 Describe structure
1.2 Terminologies used in Web Design: World Wide Web
of the given HTML page.
(www), Web Pages, Website, Web Browsers, Web Servers
TLO 1.3 Explain use of
and types of sites. Static vs. Dynamic website, Search
Head tag and Body tag in
Engine.
the given Web Page. Demonstration
1.3 Web page structure: DOCTYPE, HTML, TITLE,
1 TLO 1.4 Describe the Presentations
HEAD, BODY and other meta tags with attributes.
procedure of using the Hands-on
1.4 Block Level Elements: Headings, Paragraphs, Breaks,
given Block level tag on a
Divisions, Centered Text, Block Quotes, Preformatted text,
Web Page.
types of Address, HR tag. Horizontal Rule.
TLO 1.5 Describe the
1.5 Text Level Elements: Bold, Italic, Teletype, Underline,
procedure of using the
Strikethrough, Superscript, Subscript, DIV tag, displaying
given Text level tag and
special characters, Comments.
use of Special characters in
Web Page.
Unit - II Lists and Links
2.1 Lists: Ordered Lists, Unordered Lists, Definition Lists,
Nested Lists.
TLO 2.1 Explain use of the
2.2 Links: Absolute, Relative and Inline links, Use image as
given type of list in Web Demonstration
link, Link to an E-mail address, Button as link, Types of
2 Pages. Presentations
Links, Linking various documents for Internal and external
TLO 2.2 Describe different Hands-on
links, To link different web page of same site, link different
types of Links.
location on the same web page, A Specific location on
different web page of same site. To specific section within
the Document, Inserting E-mail link.

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Theory Learning Suggested
Learning content mapped with Theory Learning
Sr.No Outcomes (TLO's)aligned Learning
Outcomes (TLO's) and CO's.
to CO's. Pedagogies.
Unit - III Images, Colors and Background
3.1 Image: Types of image format, jpg, bmp, png, gif etc.
TLO 3.1 Describe the IMG tag, alternate text, image alignment, HSPACE,
given Image attribute on a VSPACE, wrapping text, height and width of images, Image
Web Page with HSPACE & as a link, Inserting Images, formatting image for sizing,
Demonstration
VSPACE. alignment, Border and other attributes with IMG tag.
3 Presentations
TLO 3.2 Describe the use 3.2 Colors and Backgrounds: The text color, color attribute
Hands-on
of colors / images as page of FONT tag, text attribute of BODY tag. bgcolor attribute
background on a Web of BODY tag, Changing link colors: link, alink, vlink,
Page. attributes of BODY tag, Backgrounds: Inserting image as
page background, Background attributes of BODY tag,
Creating solid color page background.
Unit - IV Table, Frames and Forms
4.1 Table: Table tag with attributes. TABLE, <tr>, <th>,
TLO 4.1 Explain the given <td> tags. Border, cell spacing, cell padding, width, align,
table attributes to organize bgcolor attributes. Adding captions: CAPTION tag
data on a Web Page and 4.2 Formatting contents in the table cells: align, valign,
Table setting. bgcolor, height, width, nowrap attributes. Spanning rows
TLO 4.2 Describe the table and columns: rowspan and colspan attributes.
formatting in Web Pages. 4.3 Frames: Types of Frames with their attributes, Creating
Demonstration
TLO 4.3 Describe the frames: FRAMESET tag – rows, cols attributes, FRAME
4 Presentations
given type of frame with tag – name, frame border, margin height, margin width, src,
Hands-on
examples and procedure to resize, scrolling Attributes, Use of NOFRAMES tag, Frame
display given screen layout targeting.
using frames. 4.4 Forms: Creating basic form: FORM tag, action and
TLO 4.4 Create basic form method attributes, Form fields: Single line Text Field,
using different form fields Password field, multiple line Text Area, Radio Buttons, and
and Button tags. Check Boxes. Pull down menus: SELECT and OPTION
tags. Buttons: submit, reset and generalized buttons.
Formatting technique: Using table to layout form.
TLO 5.1 Describe CSS Unit - V Cascading Stylesheets
code for the given type of 5.1 Cascading Stylesheets: Different types of Stylesheets,
formatting on a Web Page Benefits of CSS. Adding style to the document: Linking to
with different CSS Stylesheets, Embedding stylesheets, Using inline style,
Demonstration
properties. Selectors: CLASS rules, ID rules.
5 Presentations
TLO 5.2 Describe the 5.2 Style sheet properties: Font, Text, Box, Color and
Hands-on
procedure to create CSS for Background properties; Creating and Using a simple
applying the given external CSS file; Using the internal and inline CSS;
presentation scheme on a background and color gradients in CSS Setting font and text
Web Page. in style sheet using Table layout.
Unit - VI Website Hosting
6.1 Website Hosting: Concept of Internet and Intranet.
TLO 6.1 Describe the
Publishing website on Intranet, Installing and configuring Demonstration
procedure to configure a
6 web server, uploading files on Intranet site, access Intranet- Presentations
web server and host the
based website; Publishing website on Internet, hiring Web Hands-on
given website.
space, uploading files using FTP, Virtual Hosting, access
internet-based website.

VI. LABORATORY LEARNING OUTCOME AND ALIGNED PRACTICAL / TUTORIAL EXPERIENCES.

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Laboratory Experiment /
Practical / Tutorial / Laboratory Learning Outcome Sr Number Relevant
Practical Titles / Tutorial
(LLO) No of hrs. COs
Titles
LLO 1.1 Create Web Page using structure tags to display * Create a Simple Web
1 2 CO1
sample message. Page
LLO 2.1 Create a Web Page which display a string
* Use of Heading tags in
“Maharashtra State Board of Technical Education, 2 2 CO1
Web Page
Mumbai” in all <h1> to <h6> header tags.
LLO 3.1 Design a Web Page with two paragraphs each
of 8-10 lines. Assign title to web page. Practice * Working of Paragraphs in
3 2 CO1
formatting tags for bold, italics, underline, center, break, Web Page
space, horizontal lines, span tag, pre tag etc
LLO 4.1 Create a Web Page for displaying a paragraph * Working with block level
4 2 CO1
using block level tags, HR tags tags in Web Page
* Working with Text level
LLO 5.1 Create a Web Page using Text level tags. 5 2 CO1
tag in Web Page
LLO 6.1 Create a Web Page to insert a border property * Implement the border
6 2 CO1
in html statements. properties in Web Page
Use of Special Characters in
LLO 7.1 Create a Web Page using Special Characters. 7 2 CO1
Web Page
LLO 8.1 Design a Web Page for implementing Ordered * Working with Ordered and
8 2 CO2
List and Unordered List. Unordered List
LLO 9.1 Design a Web Page for implementing
a) Ordered list within unordered list
Use of different types of
b) Unordered list within ordered list 9 4 CO2
Nested List in Web Page
c) Ordered list within Ordered list
d) Unordered list within Unordered list
LLO 10.1 Create a Web Page to link:
a) A different web page of same site.
10 * Create a Web Page link 2 CO2
b) A different location on the same web page.
c) A Specific location on different web page of same site
LLO 11.1 Create Web Page to link:
a) An external page of different web site. 11 Use of links in Web Page 2 CO2
b) To an e-mail ID.
LLO 12.1 Create a webpage with photos and align them
with the ALT property on the left, right, and center. Create a Web Page to display
12 2 CO2
LLO 12.2 Create a webpage where Set one picture in images
left, right, and middle alignment.
LLO 13.1 Demonstrate to change the color of links on * Use of the color for links
13 2 CO2
Web Page. in Web Page
* Insert an image as the
LLO 14.1 Insert images on Web Page using various foreground and background
14 2 CO3
attributes and set image as background. of a web page with various
properties
* Insert images with
LLO 15.1 Create a webpage, add an image with the
hyperlink and set image
correct dimensions (Height and Width), and include a 15 2 CO3
width and height property of
hyperlink to another webpage.
image

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Laboratory Experiment /
Practical / Tutorial / Laboratory Learning Outcome Sr Number Relevant
Practical Titles / Tutorial
(LLO) No of hrs. COs
Titles
LLO 16.1 Create a web page and apply following
background properties with an image
a) Set the background color of the page to line n.
b) Set border to h1 tag.
Working with different
c) Set background image to a page.
16 background properties in Web 4 CO3
LLO 16.2 Create a web page and apply following
Page
background properties with an image:
a) Repeat the image vertically only.
b) Repeat the image horizontally only.
c) Show the background image at top
LLO 17.1 Create a Web Page to implement Table. 17 * Create table in Web Page 2 CO4
LLO 18.1 Create table within table and also insert an * Create table within table
18 2 CO4
image within the data elements of the table. and Insert images in table
LLO 19.1 Create a Web Page that displays first year
Working with row and
timetable. Make effective use of rowspan and colspan 19 2 CO4
column attributes of table
attributes. Make use of <th> tag.
* Create a frame in Web
LLO 20.1 Create a Web Page to implement frame tags. 20 2 CO4
Page
LLO 21.1 Create a webpage that provides a form for
filling information. The webpage must contain following
elements:
a) Textbox
b) Text area
c) Textbox for password * Creates different elements
21 4 CO4
LLO 21.2 Create a webpage that provides a form for in Web Page
filling information. The webpage must contain following
elements:
a) Radio button
b) Checkbox
c) Buttons (Submit / RESET)
LLO 22.1 Demonstrate the use of style sheets in HTML. 22 Use of CSS in Web Page 2 CO5
LLO 23.1 Create a Web Page for demonstration of CSS * Create CSS by applying
23 2 CO5
by applying Internal style. Internal style
LLO 24.1 Create a Web Page for demonstration of CSS * Create CSS by applying
24 2 CO5
by applying External style. external style
LLO 25.1 Create a Web Page for demonstration of CSS Create CSS by applying
25 2 CO5
by applying Inline style. inline style
LLO 26.1 Create a website and host on open source * Host web pages on open
26 4 CO6
platform. source platform
Note : Out of above suggestive LLOs -
'*' Marked Practicals (LLOs) Are mandatory.
Minimum 80% of above list of lab experiment are to be performed.
Judicial mix of LLOs are to be performed to achieve desired outcomes.

VII. SUGGESTED MICRO PROJECT / ASSIGNMENT/ ACTIVITIES FOR SPECIFIC LEARNING /

SKILLS DEVELOPMENT (SELF LEARNING)

Self-Learning

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Following are some suggestive self-learning topics or any relevant topics suggested by the Teacher:
1) Insert Video in an HTML page.
2) Create an animation using various HTML tags.
3) Create an E-mail Newsletter.
4) Contribute to an open-source project.

Micro project

The microproject has to be industry application based, internet-based, workshop-based, laboratory-based or field-
based as suggested by Teacher.
1) Make a music page on your website, starting with a suitable background image and a succinct explanation of the
contents. This is the first stage in creating a music store website. The top section of the page contains many menus and
a list of songs sorted by attributes such as artist, album, genre, year, etc. Include the registration form link as well.
2) Create a static webpage with details about a webinar event. The event website will have a header area with links, a
list of speakers, an image of the event site, and photographs. Separate the page into manageable chunks. Use the right
font, style, and background color for the given web page.
3) Develop any sample website suggested Teacher’s or Student interest.

Note :

Above is just a suggestive list of microprojects and assignments; faculty must prepare their own bank of
microprojects, assignments, and activities in a similar way.
The faculty must allocate judicial mix of tasks, considering the weaknesses and / strengths of the student in
acquiring the desired skills.
If a microproject is assigned, it is expected to be completed as a group activity.
SLA marks shall be awarded as per the continuous assessment record.
If the course does not have associated SLA component, above suggestive listings is applicable to Tutorials
and maybe considered for FA-PR evaluations.

VIII. LABORATORY EQUIPMENT / INSTRUMENTS / TOOLS / SOFTWARE REQUIRED

Sr.No Equipment Name with Broad Specifications Relevant LLO Number
1) Computer System with all necessary Peripherals and Internet connectivity.
1 2) Any Office Software All
3) Any Browser

IX. SUGGESTED WEIGHTAGE TO LEARNING EFFORTS & ASSESSMENT PURPOSE (Specification

Table) : NOT APPLICABLE

X. ASSESSMENT METHODOLOGIES/TOOLS

Formative assessment (Assessment for Learning)

Continuous assessment based on process and product related performance indicators. Each practical will be
assessed considering
1) 60% weightage is to process
2) 40% weightage to product

Summative Assessment (Assessment of Learning)

End Semester Examination, Lab Performance, Viva-voce.

XI. SUGGESTED COS - POS MATRIX FORM

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme
WEB PAGE DESIGN Course Code : 312013
Programme
Specific
Programme Outcomes (POs)
Outcomes*
(PSOs)
Course PO-5
Outcomes PO-1 Basic Engineering
PO-3 PO-7
(COs) and PO-2 PO-4 Practices for
Design/ PO-6 Project Life PSO- PSO- PSO-
Discipline Problem Engineering Society,
Development Management Long 1 2 3
Specific Analysis Tools Sustainability
of Solutions Learning
Knowledge and
Environment
CO1 2 - - 1 - - 1
CO2 1 - 1 1 1 - 2
CO3 1 - 2 1 1 - 2
CO4 1 1 2 1 1 - 2
CO5 2 2 3 2 2 2 2
CO6 3 3 3 3 2 2 2
Legends :- High:03, Medium:02,Low:01, No Mapping: -
*PSOs are to be formulated at institute level

XII. SUGGESTED LEARNING MATERIALS / BOOKS

Sr.No Author Title Publisher with ISBN Number
HTML and CSS Complete Tata McGraw Hill ISBN: 978-0-07-
1 Thomos Powell
Reference 174170-5
Web Publishing with HTML and
2 Lemay Colburn Pearson ISBN: 978-0672330964
CSS
BPB Publications ISBN: 978-
3 Ivan Bayross HTML 5 and CSS 3
8183334419
4 Jennifer Robbins Learning Web Design O’Reilly ISBN: 978-1491960202
Julie C. Meloni, Michael Teach Yourself HTML & CSS in 24
5 Sams, ISBN:978-0672336140
Morrison Hours

XIII . LEARNING WEBSITES & PORTALS

Sr.No Link / Portal Description
HTML Basics, list, links, Images, Table, Frames and
1 https://www.geeksforgeeks.org/
CSS
HTML Basics, list, links, Images, Table, Frames and
2 https://www.w3schools.com/html/
CSS
HTML Basics, list, links, Images, Table, Frames and
3 https://www.tutorialspoint.com/html/
CSS
HTML Basics, list, links, Images, Table, Frames and
4 https://www.javatpoint.com/
CSS
HTML Basics, list, links, Images, Table, Frames and
5 https://www.programiz.com/html/
CSS
HTML Basics, list, links, Images, Table, Frames and
6 https://www.shiksha.com/online-courses/
CSS

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme

WEB PAGE DESIGN Course Code : 312013
Sr.No Link / Portal Description
Note :

Teachers are requested to check the creative common license status/financial implications of the suggested
online educational resources before use by the students

MSBTE Approval Dt. 29/11/2023 Semester - 2, K Scheme