Static Webpage Design — 4311603
COURSE OUTCOMES (COs)
The practical exercises, the underpinning knowledge and the relevant soft skills associated
with the identified competency are to be developed in the student for the following Course
Outcomes (COs) achievement:
a) Design webpage using formatting, image and table tags.
b) Use advanced HTML tags for designing interactive and semantic web pages.
c) Design and publish websites using the Kompozer tool.
d) Use CSS internal and/or external style sheets for designing web pages.
e) Write client-side script using Javascript.
SUGGESTED PRACTICAL EXERCISES
1 Use HTML text formatting tags to create web page as per given
sample.
2 Use hyper link tag to navigate through different web pages as per
given sample.
3 Use image tags to create web page as per given sample.
4 Use HTML table tags to create web page as per given sample.
5 Use sorted list to create web page as per given sample page.
6 Use unsorted list to create web page as per given sample page.
7 Use definition list to create web page as per given sample page.
8 Use semantic tags to organize web page contents as per given
sample.
9 a. Create a student registration webpage using different HTML
form elements.
9 b. Create student feedback form using different HTML form
elements.
10 Create a bank account opening form using different HTML form
elements in Kompozer.
11.Use inline, internal and external style sheets for the student
registration form and bank account form created in previous
practical.
12 a. Use different CSS elements to create and format your Profile
Page (Note: use CSS Background, Text, Font, Tables, Links,
Images, Margin etc)
12 b. Create and format your class time table Page Using Different
CSS Elements
13. Use JavaScript to perform the following operations:
a. find roots of quadratic equation
b. find the highest from given three values
14 Use JavaScript to check whether given character is vowel or
consonant using if else ladder.
15 Use JavaScript to check whether given character is vowel or
consonant using switch case.
16 Use JavaScript to print first 10 even numbers.
17 Use JavaScript to calculate power of given number.
18 Use JavaScript to print multiplication table of given number.
19 Use JavaScript user defined functions to perform the following operations:
a. to calculate sum of 1 to n
b. to check whether given number is prime or not
Get Willamswhite’s stories in your inbox
Join Medium for free to get updates from this writer.
20.
Use JavaScript to perform the following operations:
a. take input of student name and address and display in a dialog
box.
b. change background color of webpage as selected by user from a
list of colors given in combo box.
21
Use JavaScript to perform the following operations:
a. calculate the factorial of a given number entered into a textbox.
Display the result in another textbox.
b. perform arithmetic operations on two numbers entered into
textboxes. Use Radio buttons to select arithmetic operations
(Addition, Subtraction, Multiplication and Division). Display the
result in another textbox.
Computer Learning Free — Android app CLICK TO Download
Online HTML Editor | Computer Bits Daily Try it YourSelf
Download Kompozer Easy Web Authoring Software [ WYSIWYG HTML Editor ]Download Now
Practical List — Static Webpage Design 4311603 [ PRACTICAL EXERCISES ] CLICK TO View
Syllabus:
Unit — I Basics of HTML
Students will be able to: -
1a. Explain different HTML Tags.
1b. Write the procedure to create a
Webpage using formatting
HTML tags.
1c. Write steps to create a
Webpage using image tags.
1d. Write steps to create a
Webpage using table tags.
1.1 Introduction to HTML
1.2 Syntax — Tags and Attributes
1.3 Formatting Tags
(Body, Heading Styles, Paragraph, q,
sub, sup, Mark, Pre, Special
Characters, head, title)
1.4 Image Tags (img, figure, figcaption,
map, area)
1.5 Hyper linking
1.6 Tables (table, th, tr, td, col, colgroup,
caption)
Unit — II
Advanced
HTML
Students will be able to:-
2a. Explain types of Lists.
2b. Write steps to use different
types of lists in a web page.
2c. Write procedure to organize
web page contents in semantic
structure.
2d. Write steps to incorporate
media contents into a webpage.
2e. Write procedure to use
different HTML form elements.
2.1 Lists
2.1.1 Sorted List
2.1.2 Unsorted List
2.1.3 Definition List
2.2 Semantic Elements (header, nav,
section, article, aside, footer)
2.3 Media Tags (audio, video,
embed,svg)
2.4 HTML Form
2.3.1 Form Object
2.3.2 Form Elements and its
Unit — III
Working
with
Kompozer
3a. Explain use of Kompozer tool
for web development.
3b. Write steps to create a web
page using Kompozer.
3c. Write procedure to deploy
website.
3.1 Introduction to Kompozer open
source tool.
3.2 Set up of work environment, Menu
bar, toolbars, page tab, site
manager, page area.
3.3 Creating simple Web page in
Kompozer
3.4 Working with HTML tags using
Kompozer
3.5 Creating a website Using Kompozer
3.6 Publishing a Website Using
Kompozer
Unit — IV
Cascading
Style
Sheets
(CSS)
4a. Explain basic syntax and rules
of CSS.
4b. Describe types of CSS.
4c. Write procedure to apply CSS
for enhancing web page design.
4d. Write steps to create CSS
selectors to format a group of
elements.
4.1 Introduction to CSS
4.2 CSS Types
(inline Style, Embedded
Style, Linked Style)
4.3 Applying CSS styles to web page
elements
4.4 div Tag
4.5 CSS Selectors (Class and ID)
Unit — V
JavaScript
5a. Explain basic syntax of
Javascript.
5b. Write steps to apply operators
to perform different
calculations.
5c. Describe the functions available
in Javascript.
5d. Write steps to apply conditional
and loop statements for logical
decision making and repetition.
5e. Write procedure to create the
user defined function that
performs a specific task.
5f. Write process to develop eventoriented web pages.
5.1 Introduction to Javascript
5.2 Basic Syntax — Statements,
Comments, Data types, Variables
5.3 Operators- Arithmetic, logical,
comparison
5.4 Working with built-in
functions(alert(), prompt(), parsing
functions, eval())
5.5 Conditional statements
5.6 Loop statements
5.7 Working with user defined functions.
5.8 Document Object Model — Accessing
HTML elements into
javascript(Window ,Document, Form,
Input elements , noscript tag)
5.9 HTML Events(onchange, onclick,
onmouseover, onmouseout,
onkeydown, onload)
