0% found this document useful (0 votes)

25 views154 pages

Web Page Designning 1

The document is a laboratory manual for the Web Page Designing course under the Maharashtra State Board of Technical Education, focusing on developing industry-relevant skills in students. It outlines the vision, mission, quality policy, and core values of the institution, along with practical exercises designed to enhance competencies in HTML and CSS. The manual emphasizes the importance of hands-on experience and provides guidelines for both teachers and students to ensure effective learning outcomes.

Uploaded by

avdhutsyco

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

0% found this document useful (0 votes)

25 views154 pages

Web Page Designning 1

Uploaded by

avdhutsyco

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/ 154

SCHEME : K

LABORATORY MANUAL FOR

WEB PAGE DESIGNING
(312004)

COMPUTER ENGINEERING GROUP

MAHARASHTRA STATE BOARD OF

TECHNICAL EDUCATION, MUMBAI
(Autonomous) (ISO 9001: 2015) (ISO/IEC 27001:2013)
VISION
To ensure that the Diploma level Technical Education constantly matches the latest
requirements of technology industry and includes the all-round personal development
of students including social concerns and to become globally competitive, technology
led organization.

MISSION
To provide high quality technical and managerial manpower, information and
consultancy services to the industry and community to enable the industry and
community to face the changing technological & environmental challenges.

QUALITY POLICY
We, at MSBTE are committed to offer the best in class academic services to the students
and institutes to enhance the delight of industry and society. This will be achieved
through continual improvement in management practices adopted in the process of
curriculum design, development, implementation, evaluation and monitoring system
along with adequate faculty development programmes.

CORE VALUES
MSBTE believes in the following:

 Education industry produces live products,

 Market requirements do not wait for curriculum changes.
 Question paper is the reflector of academic standards of educational
organization.
 Well designed curriculum needs effective implementation too.
 Competency based curriculum is the backbone of need based program.
 Technical skills do need support of life skills,
 Best teachers are the national assets.
 Effective teaching learning process is impossible without learning resources.
A Laboratory Manual
for

Web Page Designing

(312004)

Semester-II
( AI/ AN/ BD/ CM/ CO/ CW/ DS/ HA/ IF/ IH )

Maharashtra State
Board of Technical Education, Mumbai
(Autonomous) (ISO 9001:2015) (ISO/IEC
27001:2013)
MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION

Certificate

This is to certify that Mr. / Ms. …………………………………………… Roll

No. ………., of Second Semester of Diploma in…………………..
…………………………………… of Institute,………………………….
…………………………. (Institute Code: ……………...) has completed the
term work satisfactorily in course Web Page Designing (312004) for the
academic year 20…….. to 20…….. as prescribed in the curriculum.

Place: …………… Enrollment No:.……………

Date: …………… Exam. Seat No: ……………

Subject Teacher Head of the Department Principal

Seal of

Institution
Web Page Designing (312004)

Preface
The primary focus of any engineering laboratory/field work in the technical education
system is to develop the much needed industry relevant competencies and skills. With this in
view, MSBTE embarked on this innovative ‘K’ Scheme curricula for engineering
diploma programmes with outcome-based education as the focus and accordingly,
relatively large amount of time is allotted for the practical work. This displays the great
importance of laboratory work making each teacher, instructor and student to realize that
every minute of the laboratory time need to be effectively utilized to develop these
outcomes, rather than doing other mundane activities. Therefore, for the successful
implementation of this outcome-based curriculum, every practical has been designed to serve
as a ‘vehicle’ to develop this industry identified competency in every student. The practical skills
are difficult to develop through
‘Chalk and duster’ activity in the classroom situation. Accordingly, the ‘K’ scheme laboratory
manual development team designed the practical to focus on the outcomes, rather than
the traditional age old practice of conducting practical to ‘verify the theory’ (which may
become a byproduct along the way).
This laboratory manual is designed to help all stakeholders, especially the
students, teachers and instructors to develop in the student the pre-determined outcomes. It is
expected from each student that at least a day in advance, they have to thoroughly read
through the concerned practical procedure that they will do the next day and understand
the minimum theoretical background associated with the practical. Every practical in this
manual begins by identifying the competency, industry relevant skills, course outcomes and
practical outcomes which serve as a key focal point for doing the practical. The students will
then become aware about the skills they will achieve through procedure shown there and
necessary precautions to be taken, which will help them to apply in solving real-world
problems in their professional life.

This manual also provides guidelines to teachers and instructors to effectively

facilitate student-centered lab activities through each practical exercise by arranging and
managing necessary resources in order that the students follow the procedures and precautions
systematically ensuring the achievement of outcomes in the students.

Website design is a broad term that encompasses a wide variety of tasks, all involved
in the formation of web pages. There are essentially two types of web design approaches,
which are dynamic and static design. Static web design is typically based on basic HTML code.

i
Web Page Designing (312004)

It is essential for diploma student to learn HTML since the task of static website design is
performed
by using HTML coding. Even in dynamic websites, the task of presentation of content is handled
through HTML coding. This course introduce web page design using HTML and
also give emphasis on learning Cascading Style Sheets (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. This learning enables students to design static
web sites and host it on Internet/Intranet.

Although best possible care has been taken to check for errors (if any) in this
laboratory manual, perfection may elude us as this is the first edition of this manual.
Any errors and suggestions for improvement are solicited and highly welcome.

ii
Web Page Designing (312004)

Program Outcomes (POs) an Program Specific Outcomes (PSOs) to be achieved

through the Practical’s of this course

PO1. Basic and Discipline specific knowledge: Apply knowledge of basic

mathematics, science and engineering fundamentals and engineering specialization to
solve the engineering problems.

PO2.Problem analysis: Identify and analyse well-defined engineering problems using

codified standard methods.

PO3.Design/ development of solutions: Design solutions for well-defined technical

problems and assist with the design of systems components or processes to meet
specified needs.

PO4.Engineering Tools, Experimentation and Testing: Apply modern engineering

tools and appropriate technique to conduct standard tests and measurements.

PO5.Engineering practices for society, sustainability and environmen t: Apply

appropriate technology in context of society, sustainability, environment and ethical
practices.

PO6.Project Management: Use engineering management principles individually, as a

team member or a leader to manage projects and effectively communicat e about well-
defined engineering activities.

PO7.Life-long learning: Ability to analyse individual needs and engage in updating in

the context of technological changes.

Program Specific Outcomes (PSOs):

PSO1. Modern Information Technology: Use latest technology for operation and
application of information.

PSO2. Information Technology Process: Maintain the information process using

modern information and communication technologies.

- - -

iii
Web Page Designing (312004)

Practical- Course Outcome matrix

Course Outcomes (COs)

a. Use block level formatting tags to present content on web
page.
b. Use text level formatting tags to present content on web page.
c. Apply hyper-linking on web page.
d. Organize the content using table and frames.
e. Apply presentation schemes on content using CSS.
f. Publish websites on Internet or Intranet.
Sr. Title of the Practical CO1 CO2 CO3 CO4 CO5 CO6
No.
1 √
Work with basic HTML
2 √
Use of heading tags in web
page
3 √
Work on paragraph in web
page
4 √
Work with block level tags
in web page
5 √
Work with text level tags in
web page
6 √
Implement the border
properties in web page
7 √
Use of special characters in
Web page.
8 √
Work with ordered and
unordered List.
9 √
Create a web page to use
different types of list in web
page.
10 √
Work on HTML web page
link.
11 √
Use of links in web page.
12 √
Use of links with images in
web page

iv
Web Page Designing (312004)

13 √
Use of colors for links in
web page
14 √
Insert image on web page
foreground and background
with various attributes
15 √
Insert image with hyperlink
and set image width and
height property of image.
16 √
Work with different
background properties in
web page.
17 √
Work on HTML table in web
page
18 √
Create table within table and
insert images in tables.
19 √
Work on row and column
attributes of table.
20 √
HTML frame in web page
21 √
Create different elements in
web page.
22 √
Create CSS by applying style
sheets.
23 √
Work on RWD (Responsive
Web Design) Templates in
HTML
24 √
Hosting of website on open
source platform.
25 √
Create a web site to
represent portfolio

v
Web Page Designing (312004)

Industry / Employer Expected Outcome

The aim of this course is to help the student to attain the student to attain the following industry
identified outcomes through various teaching learning experiences:
‘Develop and host the static website as per industry requirement.’
1. Use HTML formatting tags to present content on web page.
2. Develop web page using list and hyperlink.
3. Develop web pages using images, colors and backgrounds.
4. Design HTML forms using table and frames.
5. Apply presentation schemes on content using CSS.
6. Publish websites on Internet or Intranet.

vi
Web Page Designing (312004)

Guidelines to Teachers
1. For incidental writing on the day of each practical session every student should maintain a
dated logbook for the whole semester, apart from this laboratory manual, which s/he has to
submit for assessment to the teacher in the next practical session.
2. Teachers should give opportunity to students for hands-on after the demonstration.
3. Assess the skill achievement of the students and COs of each unit.
4. Explain prior concepts to the students before starting of each experiment.
5. List of few sample questions for reference are given. Teachers must design more such
questions so as to ensure the achievement of identified CO.
6. Teacher should ensure that the practical skill and competencies are developed in the students
after the completion of the practical exercise.
7. Teacher may provide additional knowledge and skills to the students even though it’s not
covered in the manual but are expected from the students by the industries.
8. Teacher may suggest the students to refer additional related literature of the Technical papers/
Reference books/ Seminar proceedings, etc.
9. Teacher shall assess the performance of students continuously as per norms prescribed by
MSBTE.
10. During assessment teacher is expected to ask questions to the students to tap their
Achievements grading related knowledge and skills so that student can prepare while submitting
record of the practical focus should be given on development of enlisted skills rather than
theoretical knowledge.

vii
Web Page Designing (312004)

Instructions for Students

1. Understand the purpose of practical and its implementation.
2. Student shall develop practical skills as expected by the Industries.
3. Listen carefully to the instructions given by the teacher about importance of relevant program
outcomes, relevant course outcomes, practical significance, competency and practical skills,
practical outcome and the theoretical background during the practical session.
4. Write the answers of the questions allotted by the teacher during practical session.
5. Student should develop the habit of group discussion related to the practical, so that exchange
of knowledge/skills could take place.
6. Student shall attempt to develop related hands-on-skills to gain confidence.
7. Student shall refer technical magazines, websites related to the scope of the course.
8. Student should develop habit to submit the practical, exercise continuously and progressively
on the scheduled dates and should get the assessment done.
9. Student should be well prepared while submitting the write up of the exercise.
10. Student should not hesitate to ask any difficulty faced during conduct of practical.

viii
Web Page Designing (312004)

Content Page
List of Practical and Progressive Assessment Sheet
Sr. Title of the Practical Page Date of Date of Assess Dated Remark
No. No Perfor submi ment sign. of s (if
mance ssion marks teacher any)
(50)
1 1
Work with basic
HTML
2 7
Use of heading tags in
web page
3 11
Work on paragraph in
web page
4 16
Work with block level
tags in web page
5 20
Work with text level
tags in web page
6 25
Implement the border
properties in web page
7 29
Use of special
characters in Web
page.
8 33
Work with ordered and
unordered List.
9 37
Create a web page to
use different types list
in web page.
10 42
Work on HTML web
page link.
11 48
Use of links in web
page.
12 52
Use of links with
images in web page
13 56
Use of colors for links
in web page
14 60
Insert image on web
page foreground and
background with
various attributes

ix
Web Page Designing (312004)

15 64
Insert image with
hyperlink and set
image width and
height property of
image.
16 68
Work with different
background properties
in web page.
17 73
Work on HTML table
in web page
18 77
Create table within
table and insert images
tables.
19 84
Work on row and
column attributes of
table.
20 89
HTML frame in web
page
21 98
Create different
elements in web page.
22 106
Create CSS by
applying style sheets.
23 112
Work on RWD
(Responsive Web
Design) Templates in
HTML
24 119
Hosting of website on
open source platform.
25 123
Create a web site to
represent portfolio

Note: Marks to be transferred to Performa of (CIAAN-K format.

x
Web Page Designing (312004)

Practical No.1: Work with basic HTML tags

I Practical Significance
A web page is a HTML document accessible on the World
Wide Web (WWW).Hypertext Markup Language (HTML) is the
most commonly used markup language for creating web pages. This
practical is useful for creating web page using HTML, which display
a sample message.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the
industry identified Competency ‘Develop and host static interactive
web-site as per requirement’.
1. Create Web page by using basic HTML tags.
2. Save HTML document with proper extension on specified location.
3. Display HTML document on web browser.

III Course Level Learning Outcome

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a Web Page using structure tags to display sample message.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

Structure HTML tag Description

<html>…..</html> Declares the Web page to be written in HTML.
<head>…..</head> Delimits the page’s head.
<title>…..</title> Defines the title.
<body>…..</body> Delimits the page’s body.

HTML Attributes:

 All HTML elements have attributes.

 Attributes provide additional information about elements.
 Attributes are always specified in the start tag.

1
Web Page Designing (312004)

 Attributes usually come in name/value pairs like: name="value"

<body> Attributes

Attribute Value Description

background URL It determines the background image for the
document. (Not supported in HTML5)
bgcolor color It determines the background color of the content.
text color It determines the color of the text in the document.

How to use attributes in <body> tag?

<body background=”C:\\desktop\\a.jpeg” bgcolor=”red” text=”green”>

Paragraph Tag:
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.

Line Break Tag

Whenever you use the <br> element, anything following it starts from the next line.

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.

Example of Web page structure:

Create a Web page to display sample message “Web Page
Designing using HTML”
Steps:
Step 1) Open any editor.
Step 2) Type following sample code in notepad.

<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
2
Web Page Designing (312004)

<p>This is paragraph one</p>

<hr>
Experiment 1
<pre>
Government Polytechnic Building,
49, Kherwadi,
Aliyawar Jung Marg,
Bandra (E),
Mumbai 400 051,India
</pre>
<p>A HTML heading or HTML h tag can be defined as a title or a subtitle
which you want to display on the webpage.<br> it is displayed on the
browser in the bold format and size of the text depends on the number of
heading.</p>
</body>
</html>

Step 3) Save above program with file name “sample.html” in “C:\Users\hp\3D

Objects\ Desktop \sample.html”. (Student should save html file anywhere in
the machine.)

Step 4) Run this program using web browser with the path specified as follows:
“C:\Users\hp\3D Objects\Desktop\sample.html”
Output:

VII Exercises
1. Create a web page to display name of your college, address of college
and save the page with your name.
2. Create a web page by using structure tags to display “Welcome to
HTML World” and apply background color as yellow and text color as
per student choice.
3
Web Page Designing (312004)

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the
end of practical.

IX Required Resources
Sr.
Name of Resource Major Qty. Remarks
No. Specification
Any desktop or One computer
1. Computer System laptop computer system for
with basic each student
configuration
Text editor, Web
2. Software Package
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing files related operations in
computer system. Closely observe and remember the file
name and its folder.

XI Conclusion
…………………………………………………………………………………
…………………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers
must design more such questions to ensure the achievement of
identified CO.
1. State the role of browser and List names of various browsers.
2. State the use of Horizontal Rule <HR> tag with example.
3. What is the web page? State example of web pages.

[Space for Answer]

…………………………………………………………………………………
…………………………………………………………………………………

4
Web Page Designing (312004)

…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

5
Web Page Designing (312004)

…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.tutorialspoint.com/html/html_basic_tags.htm
2. https://www.w3schools.com/html/html_basic.asp

XIV Assessment Scheme

Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

6
Web Page Designing (312004)

Practical No.2: Use of heading tags in web page.

I Practical Significance
The HTML heading tags are used to define the headings of a
page. Headings are important for highlighting the topics. Heading
tags provide valuable information and specifiers about the structure
of the document. Search Engines use headings for indexing the
structure and organizing the content of the webpage.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified Competency ‘Develop and host static interactive web-site as
per requirement’.

1. Formatting HTML document using heading tags as per the

requirement.

III Course Level Learning Outcomes

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a Web Page, which display a string “Maharashtra State Board of
Technical Education, Mumbai” in all <h1> to <h6> header tags.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

The HTML heading tag is used to define the headings of a page. There are
six levels of headings defined by HTML. These 6 heading elements are h1,
h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.

 <h1> is used for the main heading. (Biggest in size)

 <h2> is used for subheadings, if there are further sections under the
subheadings then the <h3> elements are used.
 <h6> for the small heading (smallest one).

You can set the background color, text color and align of headings:
<h1 style="background-color:Blue;">Hello World</h1>
7
Web Page Designing (312004)

<h2 style="color:Green;">Hello World</h2>

<h2 align="right">Hello World</h2>

VII Exercises
1. Write HTML Code to set the background color, text color
of heading tag.
2. Create a web page to display string in center “Maharashtra
Board of Technical Education, Mumbai” using all heading
tags. (see the output.)

3. Create a web page for following output:

VIII HTML’ Code

Write HTML code for above exercise on the blank pages attached
at the end of practical.

IX Resources Required

Sr.
Name of Resource Major Qty. Remarks
No.
Specification
Any desktop or One computer
1 Computer System laptop computer system for
with each student

8
Web Page Designing (312004)

basic configuration

Text editor, Web

2 Software Package
browser

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1. State the importance of heading in HTML.
2. State the correct HTML tag to change text color as green for <h4> tag.

[Space for Answer]

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

XIII References / Suggestions for further Reading Software/Learning

Websites
a. https://www.w3schools.com/tags/
b. https://www.geeksforgeeks.org/html-heading/

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

10
Web Page Designing (312004)

Practical No.3: Work on paragraph in web page

I Practical Significance
A paragraph is usually a block of text. A paragraph always
starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.

II Industry/ Employer Expected Outcome

This practical is expected to develop web page with <p> tag.
Use different values to set alignment for <p> tag.

III Course Level Learning Outcomes

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Design a web page with two paragraphs each of 8-10 lines. Assign title
to web page. Practice formatting tags for bold, italics, underline, center,
break, space, horizontal lines, span tag, pre tag etc.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

The <p> tag in HTML defines a paragraph. These have both opening and
closing tags. So anything mentioned within <p> and </p> is treated as a
paragraph. A paragraph is a block-level element so a new paragraph
always begins on a new line, and browsers naturally put some space
before and after a paragraph to make it look neat and easy to read.
A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
The HTML <p> tag supports the following attribute −
align-specifies text alignment within a paragraph.
Values are-left, right, center, justify

Text Formatting tag

Text Formatting Description

tag
<b>------</b> To bold the text in HTML
<i>-------</i> To italic the text in HTML
11
Web Page Designing (312004)

<u>-------</u> To underline the text in HTML

<center>------- to set the alignment of text into the center
</center>
<pre>-------</pre> defines preformatted text
  A non-breaking space is a space that will not break into a new
line.
<hr> <hr> is used to insert a horizontal rule or a thematic break in
an HTML page to divide or separate document sections.
Example:
HTML Code:
<html>
<body>
<p>
The Maharashtra State Board of Technical Education (MSBTE) is an
autonomous board of education in the state of Maharashtra, India. It
designs and implements diploma, post diploma and advanced diploma
programs to affiliated institutions. Diploma courses are an excellent
choice as they allow transferable credits towards higher education such
as a degree or master's program.MSBTE loacted at:Government
Polytechnic Building, 4th floor, 49, Kherwadi, Bandra (E), Mumbai-
400051.
</p>

<p align="justify">
The <center>Maharashtra State Board of Technical Education
(MSBTE) </center>is an autonomous board of education in the state of
Maharashtra, India. It designs and implements <b>diploma </b>,
<i>post diploma </i>and <u>advanced diploma programs</u> to
affiliated institutions. Diploma courses are an excellent choice as they
allow transferable credits towards higher education such as a degree or
master's program.
MSBTE located at:
<pre>Government Polytechnic Building,
4th floor,
49, Kherwadi,
Bandra (E),
Mumbai-400 051.</pre>

<p>
The<strong> Maharashtra </strong>State Board of Technical
Education (MSBTE) is an autonomous board of education in
the state of Maharashtra, India.
</p>
12
Web Page Designing (312004)

</body>
</html>

Observe the output carefully.

First <p> tag is without alignment. Second paragraph is displayed with Justify
alignment and third paragraph as you can see, all the extra lines and unnecessary
spaces are removed by the browser.

Output:

VII Exercise
Design a Web Page to implement paragraph tag with following
formatting tags :<b>, <i>, <u>, <br>,<center>,<pre> and <hr>

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at
the end of practical.

IX Resources Required
Sr.
Name of Resource Major Specification Qty. Remarks
No.
Any desktop or One computer
1 Computer System laptop system for
computer with each
basic student
configuration
Text editor, Web
2 Software Package
browser
13
Web Page Designing (312004)

X Precautions to be Followed
1. Handle computer system with care.
2.Be cautious while performing files related operations in
computer system. Closely observe and remember the
file name and its folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1. Write 3 paragraphs about “HTML-The easy Language”. First paragraph
should be in Center, 2nd paragraph should aligned in Right side and 3rd
paragraph’s text color should be in Red color. Also use formatting tags.

[Space for Answer]

14
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.tutorialspoint.com/html/html_p_tag.htm
2. https://www.javatpoint.com/html-paragraph

XIV Assessment Scheme

Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

15
Web Page Designing (312004)

Practical No.4: Work with block level tags in web page

I Practical Significance
HTML uses block-level tags are used for designing a web
page. A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before and after
the element. This practical is useful for applying various tags like
Block Quote, Preformatted tag, Address tag and HR tag on web
page.

II Industry/Employer Expected Outcome

This practical is expected to develop the following skills
1. Prepare Web page using different Block level tags like
<blockquote>, Preformatted tag <pre>,Address tag <address> and
HR tag<hr>.
2. Formatting HTML document using Block level tags as per the
requirement.

III Course Level Learning Outcome

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a web page for displaying a paragraph using block level and <hr>
tags.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Minimum Theoretical Background Block Level tags:

Following are different Block Level tags:

Tags Description Example

<blockquote> The <blockquote> tag specifies a <blockquote>
section that is quoted from <p>Here is a long quotation
another source.Browsers here is a long quotation.
</p> </blockquote>
usually indent
<blockquote> elements.
<pre > The <pre> tag used for <pre>
indicating preformatted text. The pre formatting tag
usedfor indicating
16
Web Page Designing (312004)

preformatted text.
</pre>

<address> The <address> tag provides <address>

contact information for a <a
document. The text in the href="mailto:[email protected]
<address> element usually ">[email protected]
renders in italic.This information </a>
includes name, email address, <br>John babbage
postal address, and phone number <br>Box 212,Disneyland
and so on. <br>USA
<br>
</address>
<hr> The <hr> tag represents a <body>
horizontal rule. The <hr> tag is <hr>HR tag</hr>
used to separate content in an The horizontal rule
HTML page. It has align, no tag represents a
shade, size, width and color horizontal rule.
attributes. <hr>
</body>

VII Exercise
Design a Web Page of your Department by using blockquote tag,
preformatted tag, address tag and applying attributes of HR tags.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at
the end of practical.

X Precautions to be Followed
1. Handle computer system with care.
17
Web Page Designing (312004)

2.Be cautious while performing files related operations in

computer system. Closely observe and remember the
file name and its folder.
XI Conclusion
…………………………………………………………………………….
……………………………………………………………………………..

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1. Enlist different attributes of <hr> tag.
2. Name the tag used to display preformatted output on a web page.
3. Differentiate between block quote and address tag.
4. Explain the use of address tag.

[Space for Answer]

…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
…………………………………………………………………………….
……………………………………………………………………………..
18
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.w3schools.com/html/html_quotation_elements.asp
2. https://www.geeksforgeeks.org/html-block-and-inline-elements/

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

19
Web Page Designing (312004)

Practical No.5: Work with Text level tag in web page

I Practical Significance

HTML Text level tags are used to format the appearance of the text on web page.
The basic idea behind text formatting is to make a web page more attractive by
using tags like bold, italic or underline. There are several HTML elements that
are used for defining text with a special meaning. These are the parsed tag that
are used to display the importance of the text. This practical is useful for
formatting a text of a web page using text level tags.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills
1. Format web pages using Text level tags.

III Course Level Learning Outcomes

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a Web Page using Text level tags.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Follow ethical practices.

VI Relevant Theoretical Background

Text Level Tags:

Tag Description
<b>…</b> Text that appears within <b>...</b> element, is displayed in
bold.
<i> …</i> Text that appears within <i>...</i> element is displayed in
italic.
<u>…</u> Text appears within <u>...</u> element is displayed
with underline.
<tt>...</tt> The content of a <tt>...</tt> element is written in
monospaced font.
<strike>... Text that appears within <strike>...</strike> element is
</strike> displayed with strikethrough.
<sup>...</sup> The content of a <sup>...</sup> element is written in
superscript.
<sub>...</sub> The content of a <sub>...</sub> element is written in
20
Web Page Designing (312004)

subscript.
<div>…</div> The <div> elements allow to group together several
elements to create sections or subsections of a page.

Example:
<html>
<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
Output:

This text is bold

This text is italic

This is subscript and superscript

VII Exercise

Execute following HTML code and attached the output.

<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

VIII HTML Code

Write HTML code for above exercise on the blank pages
attached at the end of practical.

21
Web Page Designing (312004)

IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
Any desktop or One computer
1 Computer System laptop computer system for
with each student
basic configuration
Text editor, Web
2 Software Package
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing html files related operations in
computer system. Closely observe and remember the html file name
and its folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions so as to ensure the
achievement of identified CO.
1. What is the use of HTML text formatting?
2. Explain the meaning of the following code.
<div id="menu" align="middle" >
3. Write entity number and entity name to insert a copyright symbol on a
browser page?
4. What is the difference between bold and strong tags in HTML?

[Space for Answer]

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

23
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.w3schools.com/html/html_quotation_elements.asp
2. https://www.geeksforgeeks.org/html-block-and-inline-elements/

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

24
Web Page Designing (312004)

Practical No.6: Implement the border properties in web page

I Practical Significance
The HTML border attribute is used to set the visible border
width to most HTML elements within the body. Adding borders
around elements on a web page is an important feature of web
design. Borders can be used to separate the contents of a web page,
making it easier for user to interpret the information presented on
the page. This practical is useful for applying border to web page, to
specific paragraph or to specific elements in html.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills
 Apply page border
 Apply border to <div> and <p> tag

III Course Level Learning Outcomes

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a Web Page using to insert a border property in html statements.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Follow ethical practices.

VI Relevant Theoretical Background

The CSS border properties are used to specify the style, color and size of the
border of an element. The CSS border properties are given below:
 border-style
 border-color
 border-width
 border-radius
There are some border style values, which are used with border-style
Property to define a border.

Value Description
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders with the same border-width value.
dotted It is used to define a dotted border.

25
Web Page Designing (312004)

Example:
<html>
<head>
aa
</head>
<body style="border:double;">
<p style="border:double;">Double border.</p>
<div style="border:1px solid black;"> HELLO </div>
</body>
</html>

VII Exercise

Design a web page to apply border to paragraph and web page with different
border styles.

VIII HTML Code

Write HTML code for above exercise on the blank pages
attached at the end of practical.

X Precautions to be Followed
3. Handle computer system with care.
4. Be cautious while performing html files related operations in
computer system. Closely observe and remember the html file name
and its folder.

26
Web Page Designing (312004)

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions so as to ensure the
achievement of identified CO.
1. What is the use of border property?
2. How to apply the width of border?
3. Can we apply color to border? If yes, how?

[Space for Answer]

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.w3schools.com/
2. https://www.geeksforgeeks.org/

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

28
Web Page Designing (312004)

Practical No.7: Use of Special characters in Web Page

I Practical Significance
Special characters are specific pieces of HTML code
designed to display characters that are used in the HTML code or to
include characters that are not found on the keyboard in the text the
viewer sees. This practical is used for special characters in
paragraphs.

II Industry/ Employer Expected outcome

This practical is expected to develop the following skills for the display
Special Characters using HTML entity name or the HTML entity number.

III Course Level Learning Outcomes

Use HTML formatting tags to present content on web page.

IV Laboratory Learning Outcome

Create a Web Page using Special Characters.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Follow ethical practices.

VI Minimum Theoretical Background

Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the entity
number (a decimal or a hexadecimal reference) for the symbol.

Character Entity Number Entity Name Description

" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
© © © copyright
® ® ® registered trademark
← ← ← left arrow
→ → → right arrow

You can insert various Emojis are characters from the UTF-8 character set.

<html>
29
Web Page Designing (312004)

<body>
<p>I will display 😀</p>
<p>I will display 😎</p>
</body>
</html>

Output:

HTML Special Characters:

<html>
<body>
<p>I will display ©;</p>
<p>I will display ©</p>
<p>I will display® </p>
<p>I will display ®</p>
</body>
</html>

Output:

VII Exercises

1. Execute following HTML code and attached the output.

<html>
<body>
<p>I will display ∃</p>
<p>I will display ∅</p>
<p>I will display ∑ </p>
30
Web Page Designing (312004)

<p>I will display ↓</p>

2. Write HTML code to display any 5 mathematical symbols in a web page.

VIII HTML Code

Write HTML code for above exercise on the blank pages
attached at the end of practical.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1. Write entity number and entity name to insert a copyright symbol on a
browser page?
2. What is the entity number and entity name for INDIAN RUPEE SIGN?

[Space for Answer]

……………………………………………………………………………

31
Web Page Designing (312004)

XIII Software/Learning Websites

1. https://www.w3schools.com/charsets/ref_utf_symbols.asp
2. https://www.html.am/reference/html-special-characters.cfm

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

32
Web Page Designing (312004)

Practical No.8: Work with ordered and unordered list

I Practical Significance
Lists are used to create a well-structured and easy-to-
maintain document. It is group of related pieces of information and
clearly associated with each other, which are more accessible. This
practical is useful for organizing contents of the page by
implementing different types of Lists.

II Industry /Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified outcomes through various teaching learning experiences:
‘Develop static interactive web-sites’.
1. Implement different types of list in web pages.
2. Able to combine different types of list together for grouping the
information.

III Course Level Learning Outcomes

Develop a web page using list and hyperlinks.

IV Laboratory Learning Outcome

Design a web page for implementing ordered list and unordered list.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

Different Lists types:
Tag Description

<ul>…</ul> An unordered list. This will list items using plain bullets.
<ol>…</ol> An ordered list. This will use different schemes of
numbers to list your items.

Example
<html>
<body>
<ol>
<li>First item</li>

33
Web Page Designing (312004)

<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output:
1. First item
2. Second item
3. Third item

 Item 1
 Item 2
 Item 3

VII Exercises
1) Write HTML code for following output using different types of lists.

2) Create an ordered list with lowercase roman numbers.

34
Web Page Designing (312004)

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at
the end of practical.

IX Resources Required

Sr.
Name of Resource Major Qty. Remarks
No. Specification
1 Computer System Any desktop One
or laptop computer
computer with system
basic configuration fo
r
each student
2 Software Package Text editor, Web
browser

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questionsso as to ensure the
achievement of identified CO.
1. State the purpose of list in web page.
2. Write different ways to implement unordered list.

[Space for Answer]

35
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.w3schools.com/html/html_lists.asp
2. https://www.tutorialspoint.com/html/html_lists.htm

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

36
Web Page Designing (312004)

Practical No.9: Create a web page using Different types of Lists in HTML

I Practical Significance
HTML lists allow web developers to group a set of related items in
lists. A list is a record of short pieces of related information or used
to display the data or any information on web pages in the ordered
or unordered form. This practical is used for organizing the data into
various list formats.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the
industry identified outcome ‘Develop static interactive web-sites’.
1. Implement different types of list in web pages.
2. Able to combine different types of list together for grouping the
information.

III Course Level Learning Outcomes

Develop a web page using list and hyperlinks.

IV Laboratory Learning Outcome

Design a web page for implementing
1. Ordered list within unordered list
2. Unordered list within ordered list
3. Ordered list within ordered list
4. Unordered list within unordered list

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

Different Lists types:
Tag Description

<ul>…</ul> An unordered list. This will list items using plain bullets.
<ol>…</ol> An ordered list. This will use different schemes of numbers
to list your items.
<dl>…</dl> A definition list. This arranges your items in the same way
as they are arranged in a dictionary.
<dt>…</dt> Defines a term in a description list.

<dd>…</dd> Describes the term in a description list.

37
Web Page Designing (312004)

Type attribute of Ordered List:

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers

Type attribute of Unordered List:

Type Description
type="disc" Sets the list item marker to a bullet (default)
type="circle" Sets the list item marker to a circle.
type="square" Sets the list item marker to a square
type="none" The list items will not be marked

Example 1):

<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
38
Web Page Designing (312004)

</ol>
</body>
</html>
Output:

Example 2)

<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:

VII Exercises
1) Create ordered list within unordered list.
2) Create unordered list within ordered list.
3) Create ordered list within ordered list.
39
Web Page Designing (312004)

4) Create unordered list within unordered list.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at
the end of practical.

IX Resources Required

Sr.
Name of Resource Major Qty. Remarks
No. Specification
1 Computer System Any desktop or One
laptop computer computer
with basic system for
configuration each student
2 Software Package Text editor, Web
browser

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1. State the purpose of type attribute in ordered and un-ordered list.
2. Implement definition list in HTML.

[Space for Answer]

40
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1. https://www.w3schools.com/html/html_lists.asp
2. https://www.tutorialspoint.com/html/html_lists.htm

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

41
Web Page Designing (312004)

Practical No.10: Work on HTML web page link.

I Practical Significance
Hyperlink is an element in HTML document that is used to
link one web page to another web page or different web page. This
practical is useful to link different web pages of same site, link
different locations on the same web page as well as specific location
on different web page of same site.

II Industry/ Employer Learning Outcome

This practical is expected to develop the following skills for the
industry- ide nt if ie d outcome ‘Develop static interactive web-sites as per
requirement’.
1. Understand the concept of URL and Hyperlink.
2. Able to apply link and use their attributes in a web pages.
3. Able to link one web page to another Web page.

III Course Level Learning Outcomes

Develop web page using list and hyperlinks.

IV Laboratory Learning Outcome

Create a web page to link-
1. A different web page of same site.
2. A different location on the same web page
3. A specific location on different web page of same site.

V Relevant Affective domain related Outcome(s)

3. Follow safety practices.
4. Maintain tools and equipment.
5. Follow ethical practices.

VI Relevant Theoretical Background

URL: Every document on the Web has a unique address. This

address is known as Uniform Resource Locator (URL).Example
of URL is as follows: http://www.student.com/index.com

Hyperlink:
The <a > Tag: The anchor element is used to create hyperlinks
between a source anchor and a destination anchor. The source is the
text, image, or button that links to another resource and the
destination is the resource that the source anchor links to.

42
Web Page Designing (312004)

The Most Important Anchor Attributes: There are anchor attributes to create
functional hyperlinks. These attributes are href, target. An href can do a lot more
than just link to another website.

 It can be used to link directly to any element on a web page that has been
assigned an id.
 It can be used to link to a resource using a protocol other than http.
 It can be used to run a script.

Example:

<a href="second_page.html">second page </a>

Adding a target attribute and _blank attribute to the link will tell the visitor’s browser
to open the link in a new (blank) browser tab or window to render that code in the
browser, when a visitor clicks the link, which will open in a new tab.

Procedure to create a different web page of same site

Step1) Create one folder-“website” on Desktop

Step 2) Create following two html pages and run.

<html> Save this file Output:

<body> as
<h1>The anchor english.html
tag</h1> in “website”
<a folder
href="maths.html">
Maths page</a>
</body>
</html>

<html> Save this file Output:

<body> as maths.html
<a in “website”
href="english.html"> folder
Redirect to english
page</a>
</body>
</html>

43
Web Page Designing (312004)

Procedure to create hyperlink to take you to another location of the same HTML
document
Create following html page with code:

<html>
<head>
<title>How to create a hyperlink to take you to another location of the same HTML
document</title>
</head>
<body>
<a href="#bottom">Go the bottom</a>
<p id="up">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially

44
Web Page Designing (312004)

unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
<a href="#up"></p><p id="bottom">Bottom</p>
</body>
</html>

VII Exercise
Create web pages for different branches of your college Link them on the
home page. Apply linking within a page and linking a specific location within
different pages.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
1 Computer System Any desktop or One
laptop computer computer
with basic system for
configuration each student
2 Software Package Text editor, Web
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing files related operations in computer

45
Web Page Designing (312004)

system. Closely observe and remember the file name and its
folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Write procedure for linking to a document in a different folder.

2. Write attributes of anchor tag with their meaning.

3. How to create a hyperlink to take you to another part of the same HTML document?

4. How to open a linked document in a separate browser tab?

[Space for Answer]

46
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3resource.com/html-css-exercise/basic
2. https://www.w3schools.com/tags/tag_a.asp

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

47
Web Page Designing (312004)

Practical No.11: Use of links in web page.

I Practical Significance
When creating a website, there are several things one must have on each
Web page. HTML links are one of those things. HTML links do a variety of
things for website. Without HTML links one can't have a "website" and can't
show visitors more information on the subjects that one want to talk about.
There are 3 major types of HTML links; external links, internal links, and
links within the same page. External HTML links are those HTML links that go
to another website. Email and color tag for links are also used in this process.
This practical demonstrate the use of hyperlink in a web page.

II Industry/Employer Expected outcome:

This practical is expected to develop the following skills for the industry-
ide nt if ie d outcome ‘Develop static interactive web-sites as per requirement’.
1. Able to link created website with external websites
2. Able to apply mailto tag.

III Course Level Outcome

Develop web page using list and hyperlinks.

IV Laboratory Learning Outcome

Create a web page to link-
1. An external page of different web site
2. To an email ID

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

1. Create a web page to link an external page of different web site

External pages can be linked with a full URL.

Following example shows a full URL to link to a web page:

<a href="https://www.abc.com/html/page1.html">HTML Concepts</a>

2. Create a web page to link to an email ID:

Link to email ID allows visitors to send email from your website. It is easy for
48
Web Page Designing (312004)

your visitors to send questions or comments. While using <a> tag as an email
tag, you will use mailto:email address along with href attribute.

An email link would require the following code:

<a href="mailto:your email address">Email Me</a>

Following code combine all the options and allow visitor to send email with the
address, subject and text already entered.

<a href="mailto:[email protected]?subject=Regarding Program & body=Please

send me a copy of your new program!">Email Me</a>

VII Exercise
Write a HTML code to link an external page of different web sites like
yahoo.com or google.com using URL and link web page to your mail address.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.
IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
1 Computer System Any desktop or One
laptop computer computer
with basic system for
configuration each student
2 Software Package Text editor, Web
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing files related operations in computer
system. Closely observe and remember the file name and its
folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

49
Web Page Designing (312004)

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Differentiate between active link and visited link.
2. List different types of URL?
3. How to open a linked document in a separate browser tab?

[Space for Answer]

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.geeksforgeeks.org/how-to-redirect-to-a-particular-section-of-a-page-using-
html-or-jquery/
2. https://www.w3schools.com/tags/tag_a.asp

50
Web Page Designing (312004)

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

51
Web Page Designing (312004)

Practical No.12: Use of links with images in web page.

I Practical Significance
Images and graphics can be embedded into pages. It improves the
appearance of the web pages. We can add image as a link and
other HTML elements as a link. A link is a connection from one Web page to
another web page. This practical is useful for inserting an image in web page
and formatting the images with various attributes.

II Industry /Employer Expected Outcome

This practical is expected to develop the following skills for the industry-
ide nt if ie d outcome ‘Develop static interactive web-sites as per requirement’.
1. Insert Images in web page with ALT property on the left, right and center.
2. Insert a webpage to set picture in left, right, and middle alignment.

III Course Level Learning Outcomes

Develop web page using list and hyperlinks.

IV Laboratory Learning Outcome

1. Create a web page, which includes photos, and align with the ALT property on the
left, right and center.
2. Create a web page to set picture in left, right and middle alignment.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

1. Inserting Images in HTML Documents:

In HTML, images are defined with the <img> tag.The syntax of <img> tag
can be given with:
<img src="url" alt="some_text" />

Attributes Description

src The ‘src’ attribute contains a path pointing to the image which is
inserted into the page.
alt The ‘alt’ attribute is a mandatory attribute which specifies an
alternate text for an image, if the image cannot be displayed.

Image formatting Attributes:

52
Web Page Designing (312004)

Attributes Description

width To set image width.

height To set image height.
align By default image will align at the left side of the page, ‘align’ tag
used to align attribute to set it in the center or right.
border Use to specify border thickness in terms of pixels using border
attribute. A thickness of 0 means, no border around the picture.
hspace To insert the horizontal margin around the image. ‘hspace’ used for
setting space left and right of image.
vspace To insert the vertical margin around the image. ‘vspace’ used for
setting space above and below the image.

Example:
<html
<head>
</head>
<body>
<a href="https://msbte.org.in/" target="_blank">
<img border=”5” alt="Mumbai Worli" height=200 width=200 src="mumbai.jpg">
</a>
</body>
</html>

Run above code and click on image, it will open msbte.org.in web site.

VII Exercise
Design a web page using images and apply image-formatting attributes on it.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
1. Computer System Any desktop or One
laptop computer computer
with system for
basic configuration each student

53
Web Page Designing (312004)

2. Software Package Text editor, Web

browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing html files related operations in computer
system. Closely observe and remember the html file name and its
folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Explain the tag used to insert image in a web page with height and width 250.
2. Name the tag with attribute used to change the size of image.
3. Write procedure to insert border and alternative text to the image?

[Space for Answer]

54
Web Page Designing (312004)

……………………………………………………………………………
……………………………………………………………………………

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3schools.com/tags/tag_img.asp
2. https://www.javatpoint.com/html-image

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

55
Web Page Designing (312004)

Practical No.13: Use of colors of links in web page.

I Practical Significance
There are three major types of HTML links; external links, internal links,
and links within the same page. External HTML links are those HTML links
that go to another website. When users visit any link, user can differentiate
visited links with different color.

II Industry/Employer Expected outcome

This practical is expected to develop the following skills for the industry
identified outcome ‘Develop static interactive web-sites’.
1. Add various links in a web page
2. Able to change color of visited links

III Course Level Learning Outcomes

Develop web page using list and hyperlinks.

IV Laboratory Level Outcome

Demonstrate to change colors of links on a web page.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

Tags to change colors of links:

By default, a links will appear as follows (in all browsers):

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Example

<html>
<head>
<style>
a:link { color: green;}
a:visited {color: pink;}
a:hover {color: blue;}
a:active {color: yellow;}
</style>

56
Web Page Designing (312004)

</head>
<body>

<p>You can change the default colors of links</p>

<a href="http://www.yahoo.com" target="_blank">HTML Images</a>
<a href="http://example.com/" style="color:rgb(0,255,0);">GreenLink</a>
<a href="http://example.com/" style="color:red;">Red Link</a>

</body>
</html>

VII Exercise
Write a HTML code to link an external page of different web sites like
yahoo.com or google.com using URL and link web page to your mail address.
Apply tags to change colors of links.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
1 Computer System Any desktop or One
laptop computer c omputer
with basic system for
configuration each student
2 Software Package Text editor, Web
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing files related operations in computer
system. Closely observe and remember the file name and its
folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

57
Web Page Designing (312004)

XII Practical Related Questions

[Space for Answer]

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
58
Web Page Designing (312004)

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

59
Web Page Designing (312004)

Practical No.14: Insert image on web page foreground and background with
various attributes.

I Practical Significance
Image can be set as a background in a web page to make site more attractive.
This practical demonstrate the use of image for linking web page with other web
page and as background in web pages.

II Industry/ Employer Expected outcome

This practical is expected to develop the following skills for the industry
identified outcome ‘Develop static interactive web-sites’.
1. Use Images as background and foreground in the web page.
2. Use images with height and width.

III Course Level Learning Outcomes

Develop web pages using images, colors and backgrounds.

IV Laboratory Learning Outcome

Insert images on web page using various attributes and set image as background.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practice.

VI Relevant Theoretical Background

Set image as background:

The background attribute can also be used to set the background of web pages.
To set an image in background of a web page, the valid source of image
is required.
Following is the syntax to set image in background of page attribute
with a body tag.
<body background =“valid source path of image”>
For example:

Set image as foreground:

A background image can be specified for almost any HTML element. To add a
background image on an HTML element, use the HTML style attribute and the
CSS background-image property:
60
Web Page Designing (312004)

Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">

Example:
<html>
<body background="bangalore.jpg">
<p>A background image for a p element:</p>
<p style="background-image: url('mumbai.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>

VII Exercise
Design a web page to set any image as a background and foreground to the page.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing html files related operations in computer
61
Web Page Designing (312004)

system. Closely observe and remember the html file name and its
folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Describe the use of images in web pages.
2. Write the use of background attribute.
3. Explain the attributes used for setting the center alignment to the image.

[Space for Answer]

62
Web Page Designing (312004)

XIII References / Suggestions for further Reading SOFTWARE/LEARNING

WEBSITES
1. https://www.w3schools.com/html/html_images_background.asp
2. https://www.javatpoint.com/how-to-add-background-image-in-html

XVII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

63
Web Page Designing (312004)

Practical No.15: Insert image with hyperlink and set image width and height
property of image.

I Practical Significance
Images and graphics can be embedded into pages. It improves the
appearance of the web pages. This practical is useful for inserting an image in
web page and formatting the images with height and width attributes.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills
1. Insert Images in web page with height and width property.
2. Insert a webpage to set image as link.

III Course Level Learning Outcomes

Develop web page images, colors and background.

IV Laboratory Learning Outcome

Insert image with hyperlink and set image width and height property of image.

V Relevant Affective domain related Outcome(s)

1. Follow safety practices.
2. Maintain tools and equipment.
3. Follow ethical practices.

VI Relevant Theoretical Background

1. Image formatting Attributes:

Attributes Description

width To set image width.

height To set image height.
align By default image will align at the left side of the page, ‘align’ tag
used to align attribute to set it in the center or right.
border Use to specify border thickness in terms of pixels using border
attribute. A thickness of 0 means, no border around the picture.
hspace To insert the horizontal margin around the image. ‘hspace’ used
for setting space left and right of image.
vspace To insert the vertical margin around the image. ‘vspace’ used for
setting space above and below the image.

64
Web Page Designing (312004)

Example:
<html>
<head>
</head>
<body>
<a href="https://msbte.org.in/" target="_blank">
<img border=”5” alt="Mumbai Worli" height=200 width=200
src="mumbai.jpg">
</a>
</body>
</html>

Run above code and click on image, image will appear as per height and width and
when user clicks on that image, it will open msbte.org.in web site.

VII Exercise
Design a web page using images and apply image-formatting attributes on it.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required
Sr.
Name of Resource Major Qty. Remarks
No.
Specification
1. Computer System Any desktop or One
laptop computer computer
with basic system for
configuration each student
2. Software Package Text editor, Web
browser

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing html files related operations in computer
system. Closely observe and remember the html file name and its
folder.

65
Web Page Designing (312004)

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Explain the tag used to insert image in a web page with height and width 150.
2. Name the tag with attribute used to change the size of image.

[Space for Answer]

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3schools.com/tags/tag_img.asp
2. https://www.javatpoint.com/html-image

66
Web Page Designing (312004)

XVIII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%

Product related: 20 Marks 40%

1. Completion and submission of practical in time 20%
2. Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

67
Web Page Designing (312004)

Practical No.16: Work with different background properties in web page.

I Practical Significance
Using background properties such as colors, gradients, images, and patterns can
enhance the visual appeal of a web page. This practical demonstrates the different
background properties in web page.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry identified
Competency ‘Develop and host static interactive web-site as per requirement’.

Apply CSS background properties on a web page.

III Course Level Learning Outcomes

Develop web pages using images, colors and backgrounds.

IV Laboratory Learning Outcome

Create a web page with background properties

 Set the background color of the page to line n.
 Set border to h1 tag.
 Set background image to a page and to a paragraph.

V Relevant Affective domain related Outcome(s)

Follow safety practices.
Maintain tools and equipment.
Follow ethical practices.

VI Relevant Theoretical Background

The HTML <body> background attribute is used to specify a background image or

color for the entire web page’s body. You can provide either a URL for an image or
a color code to customize the background of the HTML body element.
Note: It is not supported by HTML5 Instead of using this attribute we use CSS
background property.

Set the background Image:

Syntax:

68
Web Page Designing (312004)

Example:

<html>
<head>
<title>
HTML body Background Attribute
</title>
</head>
<body background="rk.png">
<h1>Hello All</h1>
<h2>HTML
<body> background Attribute
</h2>
Welcome to Web Page Designing
</body>
</html>

Output:

Set background color:

Setting the background color of a web page or an element on the web page, enable us to
create unique layouts for the web page.

To set the background color in HTML, use the style attribute, with the CSS property

69
Web Page Designing (312004)

background-color inside the body tag of the HTML document.

HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add
background color. The bgcolor attribute deprecated in HTML5.

We can change the background color by overriding the property with the other property.

Syntax:
<body style="background-color:red;">

Example:

<html>
<body style="background-color:red;">
<h1>HTML Articles</h1>
</body>
</html>

Output:

VII Exercise
Create a web page with background properties:
 Set the background color of the page to line n.
 Set border to h1 tag.
 Set background image to a page and to a paragraph.

70
Web Page Designing (312004)

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the
end of practical.

IX Required Resources

Sr. Name of Resource Major Specification Qty. Remarks

No.
Any desktop or laptop One computer
1. Computer System computer with basic system for
configuration each student
2. Software Package Text editor, Web
browser

X Precautions to be Followed
 Handle computer system with care.
 Be cautious while performing files related operations in computer system.
Closely observe and remember the file name and its folder.

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must design
more such questions so as to ensure the achievement of identified CO.
1. List different background tags available

[Space for Answer]

71
Web Page Designing (312004)

………………………………………………………………………………………………………
…………………….…………………………………………………………………………………
……………………………………………………………………….………………………………
…………………………………………………………………………………………………….…
………………………………………………………………………………………………………
…………………………………….…………………………………………………………………
…………………………………………………………………………….…………………………
………………………………………………………………………………………………………
…………….…………………………………………………………………………………………
…………………………………………………….…………………………………………………
………………………………………………………………………………………….……………
………………………………………………………………………………………………………
……………………….………………………………………………………………………………
………………………………………………………………………….……………………………
……………………………………………………………………………………………………….
………………………………………………………………………………………………………
……………………………………….………………………………………………………………
XIII References / Suggestions for further Reading Software/Learning Websites
1. https://www.w3schools.com/css/css3_backgrounds.asp
2. https://www.geeksforgeeks.org/css-background/

XIV Assessment Scheme

Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

72
Web Page Designing (312004)

Practical No.17: Work on HTML table in web page.

I Practical Significance

HTML Table is an arrangement of data in rows and columns in tabular format. Tables
are useful for various tasks such as presenting text information and numerical data. A
table is a useful tool for quickly and easily finding connections between different types
of data. Tables are also used to create databases. This practical demonstrates the use of
tables in we page.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified Competency ‘Develop and host static interactive web-site as per
requirement’
1. Apply table attributes to organize data on a web page.
2. Use the given table attribute to change default table setting.

III Course Level Learning Outcomes

. Design HTML forms using table and frames.

IV Laboratory Learning Outcome

Create a web page to implement Table.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

In HTML, table is represented with the <table> tag. Each table row is defined with
the <tr> tag. A table heading is defined with the <th> tag. By default, table headings
are bold and centered. A table data/cell is defined with the <td> tag. Use rowspan
and colspan tags.

Table 1:Table tags

<table>...<table> Indicates a table. The tags surround the entire table.
<tr>..</tr> Indicates a table row. The tags surround the entire
row.

73
Web Page Designing (312004)

<td>...</td> Indicates table data or a cell. The tags surround the

entire cell.

<th>...</th> Indicates table Heading

<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>ABC</td>
<td>FY</td>
<td>50</td>
</tr>
</table>

VII Exercise
1) Create a mark sheet of first semester using table tag.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at
the end of practical.

IX Resources Required

Sr. Name of Resource Major Specification Qty. Remarks

No.
Any desktop or laptop One computer
1. Computer System computer with basic system for
configuration each student
2. Software Package Text editor, Web
browser

X Precautions to be Followed
1) Handle computer system with care.
2) Be cautious while performing files related operations in computer system. Closely
observe and remember the file name and its folder.

74
Web Page Designing (312004)

XI Conclusion

……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must design more
such questions to ensure the achievement of identified CO.
1. List attributes used for formatting table.
2. Write a procedure to align a table to left or right.
3. Define cell padding and cell spacing.

[Space for Answer]

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3schools.com/html/html_tables.asp
2. https://www.tutorialspoint.com/html/html_tables.htm
75
Web Page Designing (312004)

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

76
Web Page Designing (312004)

Practical No.18: Create table within table and insert images in tables.

I Practical Significance
Nested tables can be effective for presenting complex data sets in a structured
format. Placing images within tables, helps organize content visually, especially when
presenting data or information alongside corresponding images. This practical
demonstrate table within the table and how images are inserted into table in a we page.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry-
identified competency ‘Develop static interactive websites.

1. Knowledge of the <table>, <tr>, <td>, and <img> tags.

2. Understand how rowspan and colspan attributes impact the
responsiveness of tables on different screen sizes

III Course Level Learning Outcomes

.
Design HTML forms using table and frames.

IV Laboratory Learning Outcome

Create a web page to make effective use of rowspan and colspan attributes.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

To create a nested table, we need to create a table using the <table> tag.
This table is known as the outer table. The second table that will be the
nested table is called the inner table.

77
Web Page Designing (312004)

Example:
<html>
<head>

<title>Nested Tables</title>
<style>
table table {
border: 2px solid blue;
}
td {
padding: 10px;
text-align: center;
}
</style>
</head>

<body>
<h1 style="color: green;">Nested Tables</h1>
<table border="2">
<tr>
<td>Table 1</td>
<td> Table 1
<table border="2">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Table 1</td>
<td>Table 1</td>
</tr>
</table>
</body>
</html>

78
Web Page Designing (312004)

Output:

Insert Images in tables:

Use the <img> tag to add an Image inside the <td> element in HTML.

<html>
<body>
<table border="4px">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Photo</th>
</tr>
<tr>
<td>1</td>
<td>Rose</td>
<td><img height="100" src="rose.jpg" width="100"></td>
</tr>
</table>
</body>
</html>

79
Web Page Designing (312004)

Output:

VII Exercise

1) Design a following table using different table tags.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached
at the end of practical.

80
Web Page Designing (312004)

IX Resources Required

Sr. Name of Resource Major Specification Qty. Remarks

No.
Any desktop or laptop One computer
1. Computer System computer with basic system for
configuration each student
2. Software Package Text editor, Web
browser

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must design
more such questions so as to ensure the achievement of identified CO.

1. Write a code for obtaining following output:

[Space for Answer]

…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

81
Web Page Designing (312004)

82
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning Websites

1) https://www.geeksforgeeks.org/how-to-create-nest-tables-within-tables-in-
html/#:~:text=To%20create%20a%20nested%20table,must%20be%20kept%20
in%20mind.
2) https://www.3schools.in/2022/08/add-image-inside-table-cell-in-html.html

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

83
Web Page Designing (312004)

Practical No.19: Work on row and column attributes of table.

I Practical Significance
The row and column attributes of a table in HTML is essential for creating well-
structured, visually appealing tables that effectively communicate information to
users. This practical demonstrates the use of colspan and rowspan attribute of table
tag in web page.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry identified.
competency ‘Develop static interactive websites.

1. Use <th> ,<tr> tag.

2. Understand how rowspan and colspan attributes impact the responsiveness of
tables on different screen sizes

III Course Level Learning Outcomes

.
Design HTML forms using table and frames.

IV Laboratory Learning Outcome

Create a web page to make effective use of rowspan and colspan attributes.

V Relevant Affective domain related Outcome(s)

1) Follow safety practices.
2) Maintain tools and equipment.
3) Follow ethical practices.

VI Relevant Theoretical Background

An HTML table consists of one <table> element and one or more <tr>, <th>, and
<td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and
the <td> element defines a table cell.

<html>
<head>
<style>
table, th, td {

84
Web Page Designing (312004)

border: 1px solid black;

}
</style>
</head>
<body>

<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3>

<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>abc</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>

<h3>Cell that spans two rows:</h3>

<table>
<tr>
<th>Name:</th>
<td>abc</td>
</tr>
<tr>
<th>Email:</th>
<td>[email protected]</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>123-45-678</td>
</tr>
<tr>
<td>212-00-546</td>
</tr>
</table>

</body>

85
Web Page Designing (312004)

</html>

Output:

VII Exercise
Develop a web page following web site page.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required

86
Web Page Designing (312004)

Sr. Name of Resource Major Specification Qty. Remarks

No.
Any desktop or laptop One computer
1. Computer System computer with basic system for
configuration each student
2. Software Package Text editor, Web
browser

X Precautions to be Followed
1. Handle computer system with care.
2 Be cautious while performing files related operations in computer system.
Closely observe and remember the file name and its folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must
design more such questions to ensure the achievement of identified CO.
1. Create a webpage that displays first year timetable.

[Space for Answer]

87
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning

Websites
1) https://www.tutorialspoint.com/html/html_frames.htm
XIV Assessment Scheme
Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

88
Web Page Designing (312004)

Practical No.20: HTML Frame in web page.

I Practical Significance
HTML frames provide flexibility in designing the layout of a webpage.
By dividing the browser window into frames, developers can arrange
content in different sections, such as a navigation frame, a main content
frame, and a sidebar frame. The practical show that, how web browser
window is divided into columns and rows using frame and frameset tag.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified competency ‘Develop static interactive web-sites’.
1. Describe <frameset> and <frame> tag.
2. Use different form attributes

III Course Level Learning Outcomes

Design HTML forms using table and frames.

IV Laboratory Learning Outcome

Create a web page to implement frame tags

V Relevant Affective domain related Outcome(s)

1) Follow safety practices.
2) Maintain tools and equipment.
3) Follow ethical practices.

VI Relevant Theoretical Background

<frameset> tag

HTML <frameset> tag is used to contain the group of frames which can be
controlled and styled as a unit. The <frameset> element also specifies the
number of rows and columns in the frameset, and how much space they will
occupy in a frame.

Syntax
<frameset cols=" ">............</frameset>

<frame> tag

HTML <frame> tag defines the particular area within an HTML file
where another HTML web page can be displayed.
89
Web Page Designing (312004)

A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or
frames, and each frame can contain different web pages.

Syntax:
< frame src = "URL" >

Example 1
Create Vertical frames:

<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,75%">
<frame src="frame1.html" >
<frame src="frame2.html">

</frameset>
</html>

Frame1.html:
<html>
<head>
<style>
div{
background-color: #7f4dd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

90
Web Page Designing (312004)

Frame2.html:

<html>
<head>
<style>
div{
background-color: #ff45fd;
height: 500px;

}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>

Output:

91
Web Page Designing (312004)

Example 2:
Create Horizontal frames:

<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows=”30%, 70%”>
<frame name=”top” src=”frame1.html” >
<frame name=”main” src=”frame2.html”>

</frameset>
</html>

Frame1.html:

<html>
<head>
<style>
div{
background-color: #7f4dd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

92
Web Page Designing (312004)

Frame 2.html:

<html>
<head>
<style>
div{
background-color: #ff45fd;
height: 500px;

}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>

Output:

Note: Do not use HTML <frameset> element as it is deprecated and not supported by
HTML5, but you can use <iframe> tag instead.

HTML iframes

HTML iframe is used to display a nested webpage (a webpage within a webpage).

The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline
frame.

An HTML iframe embeds another document within the current HTML document
93
Web Page Designing (312004)

in the rectangular region.

The webpage content and iframe contents can interact with each other using
JavaScript.

Syntax:
<iframe src="URL"></iframe>

Example:

<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://msbte.org.in/" height="300" width="400"></iframe>
</body>
</html>

Output:

VII Exercise
Develop a web page following web site page.

94
Web Page Designing (312004)

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

IX Resources Required
Sr. Name of Resource Major Specification Qty. Remarks
No.
Any desktop or laptop One computer
1. Computer System computer with basic system for
configuration each student
2. Software Package Text editor, Web
browser

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers must design more
such questions to ensure the achievement of identified CO.
1) Develop a web page containing four frames vertically.
2) Develop a web page by using iframe.

[Space for Answer]

95
Web Page Designing (312004)

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

XIII References / Suggestions for further Reading Software/Learning Websites

1) https://www.tutorialspoint.com/html/html_frames.htm
96
Web Page Designing (312004)

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

97
Web Page Designing (312004)

Practical No.21: Create different elements in web page.

I Practical Significance
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML
form facilitates the user to enter data that is to be sent to the server for processing such as
name, email address, password, phone number, etc. This practical demonstrates how to
create different form elements in a web page to submit the user-entered information.

II Industry/Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified competency ‘Develop static interactive web-sites’.

1. Describe the basic form elements.

2. Use Textbox, Button, CheckBox, RadioButton etc to design form.
3. Create basic form using different form fields and Button tags.

III Course Level Learning Outcome

.
Design HTML forms using table and frames.

IV Laboratory Learning Outcome

Create a webpage that provides a form for filling information.
The webpage must contain following elements:
 Buttons (Submit/Reset)
 Text area
 Textbox for passwords

V Relevant Affective domain related Outcome(s)

1) Follow safety practices.
2) Maintain tools and equipment.
3) Follow ethical practices.

VI Relevant Theoretical Background

An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

<form> element:
The HTML <form> element is used to create an HTML form for user input:

98
Web Page Designing (312004)

Syntax:

<form>
.
formelements
.
</form>

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more
of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button

Text Fields:
The <input type="text"> defines a single-line input field for text input.
Example:
<html>
<body>
<h2>Text input fields</h2>
<form>
<input type="text" id="fname" name="fname"
value="abc"><br>
<input type="text" id="lname" name="lname"
value="xyz">
</form>
</body>
</html>

99
Web Page Designing (312004)

Output:

The <label> Element:

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focuses on the input element.

Radio Buttons :

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example:
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite City:</p>
<form>
<input type="radio" id="mumbai" name="fav_language" value="Mumbai">
<label for="mumbai">Mumbai</label><br>
<input type="radio" id="delhi" name="fav_language" value="Delhi">
<label for="delhi">Delhi</label><br>
<input type="radio" id="kerla" name="fav_language" value="Kerla">
<label for="kerla">Kerla</label>
</form>
</body>
</html>

100
Web Page Designing (312004)

Output:

Checkboxes:
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

101
Web Page Designing (312004)

Output:

The Submit Button:

The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example:
<html>
<body>
<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="abc"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="xyz"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>
</html>

102
Web Page Designing (312004)

Output:

VII Exercise
Develop a web page following web site page.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached
at the end of practical.

103
Web Page Designing (312004)

X Precautions to be Followed
1) Handle computer system with care.
2) Be cautious while performing files related operations in computer
system. Closely observe and remember the file name and its folder.

XI Conclusion
……………………………………………………………………………
……………………………………………………………………………
XII Practical Related Questions
Note: Below given are few sample questions for reference. Teachers must
design more such questions so as to ensure the achievement of identified CO.
1) Develop a web page for student registration form.
2) Develop a web page for login page.

[Space for Answer]

104
Web Page Designing (312004)

XIII References / Suggestions for further Reading Software/Learning Websites

1) https://www.w3schools.com/html/html_forms.asp
2) https://www.javatpoint.com/how-to-create-a-form-in-html

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

105
Web Page Designing (312004)

Practical No.22: Create CSS by applying style sheets

I Practical Significance
Cascading Style Sheet (CSS) is a simple mechanism of describing how
documents are presented on screens. Cascading Style Sheets (CSS) provide easy
and effective alternatives to specify various attributes for the HTML tags. This
practical demonstrate the use of CSS and improves in content accessibility.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the industry
identified competency ‘Develop static interactive web-sites’.
1. Describe the basic syntax and structure of CSS.
2. Use internal, external and inline CSS.
3. Apply styles to background, text, fonts and other HTML components.

III Course Level Learning Outcomes

.
Apply presentation schemes on content using CSS.

IV Laboratory Learning Outcome

Create a web page for demonstration of CSS by applying internal style, external
and inline style.

V Relevant Affective domain related Outcome(s)

1) Follow safety practices.
2) Maintain tools and equipment.
3) Follow ethical practices.

VI Relevant Theoretical Background

CSS stands for Cascading Style Sheets and it is the language used to style the visual
presentation of web pages. CSS is the language that tells web browsers how to render
the different parts of a web page.
CSS Syntax- CSS syntax includes selectors, properties, values, declarations,
declaration blocks, rulesets, at-rules, and statements.
 A selector is a code snippet used to identify the web page element or
elements that are to be affected by the styles.
 A property is the aspect of the element that is to be affected. For
example, color, padding, margin, and background are some of the
most commonly used CSS properties.
 A value is used to define a property. For example, the property color
might be given the value of red for example: color: red;.The
combination of a property and a value is called a declaration.
106
Web Page Designing (312004)

 In many cases, multiple declarations are applied to a single selector.

A declaration block is the term used to refer to all of the declarations
applied to a single selector.
 A single selector and the declaration block that follows it in
combination are referred to as a ruleset.
 At-rules are similar to rulesets but begin with the @ sign rather than
with a selector. The most common at-rule is the @media rule which
is often used to create a block of CSS rules that are applied based on
the size of the device viewing the web page.

An Example of CSS Syntax- Let’s use a block of CSS to clarify what each
of these items is.

h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}

In this example, h1 is the selector. The selector is followed by a declaration block

that includes three declarations. Each declaration is separated from the next by a
semicolon. The tabs and line breaks are optional but used by most developers to
make the CSS code more human-readable.By using h1 as the selector, we are
saying that every level 1 heading on the web page should follow the declarations
contained in this ruleset.
The ruleset contains three declarations:
 color:red;
 font-size: 3em;
 text-decoration: underline;

color, font-size, and text-decoration are all properties. There are literally hundreds
of CSS properties that can use, but only a few dozen are commonly used. The color
property can use a color keyword or a color formula in Hex, RGB, or HSL format.
In this case, the color keyword red. There are a few dozen color keywords available
in CSS3, but millions of colors can be accessed with the other color models. The
value of 3em to the property font-size. There are a wide range of size units we
could have used including pixels, percentages, and more. Finally, the value
underline to the property text-decoration. The overline or line-through can be used
as values for text-decoration. In addition, CSS3 allows for the use of the line- styles
solid, double, dotted, dashed, and wavy was well the specification of text-
decoration colors.

107
Web Page Designing (312004)

Ways of Linking CSS Rules to an HTML Document

There are three ways of adding CSS rules to a web page:
1) Inline styles
2) Internal stylesheets
3) External stylesheets
In the vast majority of cases, external stylesheets should be used. However, there are
instances where inline styles or internal stylesheets may be used.
 Inline Styles
Inline styles are applied to specific HTML elements. The HTML attribute style is
used to define rules that only apply to that specific element. Here’s a look at the
syntax for writing inline styles.

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

That code would cause just that heading to render with red underlined text and 10 pixels
of padding on all sides. There are very few instances where inline styles should be used.
In nearly all cases they should be avoided and the styles added to a stylesheet.
 Internal Stylesheets
The earlier examples in this tutorial make use of internal stylesheets. An internal
stylesheet is a block of CSS added to an HTML document head element.
The style element is used between the opening and closing head tags, and all CSS
declarations are added between the style tags.

<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline; }
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>

That code would produce the same results as the inline styles. However, the benefit to
using internal stylesheets rather than inline styles is that all h1 elements on the page
will be affected by the styles.
 External Stylesheets
External stylesheets are documents containing nothing other than CSS statements. The
rules defined in the document are linked to one or more HTML documents by using
the link tag within the head element of the HTML document.

108
Web Page Designing (312004)

To use an external stylesheet, first create the CSS document.

Save with a name ending in .css such as styles.css

h1 {
color: red;
padding: 10px;
text-decoration: underline;
}

Now that we have an external stylesheet with some styles, we can link it to an HTML
document using the link element.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Example Heading</h1>
</body>

When this HTML document is loaded the link tag will cause the styles in the file styles.css
to be loaded into the web page. As a result, all level 1 heading elements will appear with
red text, underlined, and with 10 pixels of padding applied to every side.

VII Exercise
1) Create a web page for demonstration of CSS by applying internal style, external and
inline style

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the
end of practical.

109
Web Page Designing (312004)

X Precautions to be followed
1) Handle computer system with care.
2) Be cautious while performing files related operations in computer system. Closely
observe and remember the file name and its folder.

XI Conclusion
………………………………………………………………………
………………………………………………………………………

XII Practical Related Questions

Note: Below given are few sample questions for reference. Teachers
must design more such questions to ensure the achievement of
identified CO.
1) Develop a web page using CSS for following web site page.
2) Develop a web page using CSS for following web site page.
3) Explain the font property with syntax.

[Space for Answer]

………………………………………………………………………………………………………
…………………………….…………………………………………………………………………
…………………………………………………………………………….…………………………
………………………………………………………………………………………………………
….……………………………………………………………………………………………………
………………………………………….……………………………………………………………
………………………………………………………………………………….……………………
………………………………………………………………………………………………………
………………….……………………………………………………………………………………
……………………………………………………….………………………………………………
……………………………………………………………………………………………….………
………………………………………………………………………………………………………
……………………………….………………………………………………………………………
………………………………………………………………………………….……………………
………………………………………………………………………………………………………
……….………………………………………………………………………………………………
……………………………………………….………………………………………………………
……………………………………………………………………………………….…………
………………………………………………………………………………………………………
…………………………….…………………………………………………………………………
…………………………………………………………………….…………………………………
………………………………………………………………………………………………………
…….…………………………………………………………………………………………………
………………………………………….……………………………………………………………
…………………………………………………………………………………………….…………
………………………………………………………………………………………………………
110
Web Page Designing (312004)

………………….……………………………………………………………………………………
………………………………………………………….……………………………………………
………………………………………………………………………………………………….……

XIII References / Suggestions for further Reading Software/Learning

Websites
1)https://www.tutorialspoint.com/css/what_is_css.htm
2)https://www.w3schools.com/html/html_css.asp

XIV Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

111
Web Page Designing (312004)

Practical No.23: Work on RWD (Responsive Web Design) Templates in HTML.

I Practical Significance
RWD templates ensure that websites are accessible and functional on a wide range of
devices, including desktops, laptops, tablets, and smartphones. Instead of developing
separate versions for various devices, RWD allows for a single development effort that
caters to diverse screen sizes. This practical helps student for creating websites that
are versatile, user-friendly, cost-effective, and adaptable to the ever-changing
landscape of web technologies and devices.

II Industry/ Employer Expected outcome

This practical is expected to develop the following skills for the industry
identified competency ‘Develop static interactive web-sites’.

III Course Level Learning Outcomes

.Apply presentation schemes on content using CSS.

IV Laboratory Learning Outcome

Create a web page for demonstration of CSS responsive web design.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Web pages can be viewed using many different devices: desktops, tablets, and
phones. Your web page should look good, and be easy to use, regardless of the
device.
Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device:

112
Web Page Designing (312004)

Desktop Tablet Phone

It is called responsive web design when you use CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.

Example of Responsive Website:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

html {
font-family: "Lucida Sans", sans-serif;
}

.header {
background-color: #9933cc;

113
Web Page Designing (312004)

color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}

.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}

/* For mobile phones: */

[class*="col-"] {
width: 100%;
}

114
Web Page Designing (312004)

@media only screen and (min-width: 600px) {

/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>

115
Web Page Designing (312004)

<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>

Output:

116
Web Page Designing (312004)

VII Exercise

Create on responsive web page for your college.

VIII HTML Code

Write HTML code for above exercise on the blank pages attached at the end of
practical.

XI Conclusion
………………………………………………………………………………………………………

………………………………………………………………………………………………………

X Practical Related Questions

Note: Below given are few sample questions for reference.
Teachers must design more such questions to ensure the
achievement of identified CO.
1) Explain what you understand for responsive web design
2) Which tag we have to set to make page responsive in website.

[Space for Answer]

………………………………………………………………………………………………………
…………………….…………………………………………………………………………………
…………………………………………………………….…………………………………………
………………………………………………………………………………………………….……
………………………………………………………………………………………………………
………………………………….……………………………………………………………………

…………………………………………………………………………………….…………………
………………………………………………………………………………………………………

XI References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3schools.com/css/css_rwd_intro.asp

XII Assessment Scheme

Performance indicators Weightage

Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

118
Web Page Designing (312004)

Practical No.24: Hosting of website on open-source platform.

I Practical Significance
Web hosting services are offered free of cost to all, for publishing
website on internet. Advantage of such hosting service is their cost
effectiveness. Policy may vary from one hosting service provider to
another. The website owner gets the free space on the server, free sub-
domain name for accessing website and global reach over the World
Wide Web. This practical helps student to host website on internet.

II Industry/ Employer Expected Outcome

This practical is expected to develop the following skills for the

industry identified competency ‘Develop static interactive web-sites’.
Publish a Website on Internet.

III Course Level Learning Outcomes

.
Publish websites on internet or intranet.

IV Practical Outcome
Create a website and host on open source.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

Website: - website is actually just a bunch of files, images, html files,

and more, present on a computer accessible over network.
Domain: - Domain is the text-based address that user like to point to their
website. For example,“www.userdomain.com”. User can “register”
domain from a selection of many domain registrars.

Here's a step-by-step guide to hosting a website on an open-source platform:

 Choose a Hosting Provider: Sign up for a hosting provider that

supports open-source platforms. For this example, let's use
DigitalOcean.

 Register a Domain Name: If you don't have a domain name,

119
Web Page Designing (312004)

register one through a domain registrar like Namecheap.

 Set up DNS: In your domain registrar's dashboard, configure the

DNS settings to point to your DigitalOcean server's IP address.

 Provision a Server: Log in to your DigitalOcean account and create

a new Droplet (virtual server). Choose an appropriate plan and
select a Linux distribution like Ubuntu.

 Install the Operating System: Access your Droplet via SSH and
follow the instructions to install the chosen Linux distribution.

 Install Web Server Software: Install Apache or Nginx using your

Linux distribution's package manager.

 Configure the Web Server: Create a virtual host configuration file

for your website, specifying the domain name and document root.

 Upload Website Files: Use SCP or FTP to transfer your website

files to the document root directory on the server.

 Set Permissions: Ensure that the permissions on the website files

and directories are set correctly so that the web server can access
them.

 Test Your Website: Open a web browser and navigate to your

domain name. You should see your website's content displayed.

 Secure Your Website: Obtain an SSL certificate and configure

HTTPS for your domain to encrypt data transmission.

 Set Up Monitoring and Backups: Configure monitoring tools to

track server performance and uptime. Implement regular backups
to protect against data loss.

We will take one example for hosting website on github:

II Exercise
1) Write steps to publish website
2) Explain the procedure to configure a webserver and hosting the given website.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the end of

120
Web Page Designing (312004)

practical.

X Precautions to be Followed
1) Handle computer system with care.
2) Be cautious while performing files related operations in computer system. Closely observe
and remember the file name and its folder.

XI Conclusion
………………………………………………………………………………………………………
………………………………………………………………………………………………………
XII Practical Related Questions
Note: Below given are few sample questions for reference. Teachers
must design more such questions so as to ensure the achievement of
identified CO.
1) Create your own website and publish on GitHub.
2) Create a blog and publish it

[Space for Answer]

………………………………………………………………………………………………………
…………………………….…………………………………………………………………………
……………………………………………………………………………….………………………
………………………………………………………………………………………………………
…….…………………………………………………………………………………………………
…………………………………………….…………………………………………………………
…………………………………………………………………………………….…………………
………………………………………………………………………………………………………
…………………….…………………………………………………………………………………
………………………………………………………………………………………………………
…………………………….…………………………………………………………………………
…………………………………………………………………….…………………………………
………………………………………………………………………………………………………
……………….………………………………………………………………………………………
…………………………………………….…………………………………………………………
………………………………………………………………………………….……………………
………………………………………………………………………………………………………
121
Web Page Designing (312004)

………………….……………………………………………………………………………………
………………………………………………………………………………………………………
…………………………….…………………………………………………………………………
…………………………………………………………………….…………………………………
………………………………………………………………………………………………………
….……………………………………………………………………………………………………
…………………………………………………….…………………………………………………
………………………………………………………………………………….……………………
………………………………………………………………………………………………………
………………….……………………………………………………………………………………
………………………………………………………….…………
XIII References / Suggestions for further Reading Software/Learning Websites
1. https://www.geeksforgeeks.org/how-to-host-a-website-on-github-for-free/
2. https://careerfoundry.com/en/blog/web-development/how-to-host-a-website-for-free/

XIV Assessment Scheme

Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

122
Web Page Designing (312004)

Practical No.25: Create a web site to represent portfolio

I Practical Significance
A portfolio website provides a centralized and easily accessible
platform to showcase your projects, work samples, and achievements.
It allows potential employers, clients, or collaborators to see the range
and quality of your work. This practical is useful for creating a portfolio
website is a practical and powerful way to present your skills,
experiences, and achievements, fostering professional growth and
opening doors to new opportunities.

II Competency and Practical skills

This practical is expected to develop the following skills for the
industry-identified competency ‘Develop and host the static website as per
industry requirement.
.
Understanding the fundamentals of HTML and CSS is essential for structuring
and styling your website. Ensure your website is responsive, meaning it adapts
to different screen sizes and devices, providing a consistent user experience.
Plan your portfolio's structure, emphasizing key projects and achievements.
Consider the flow and user experience.
III Course Level Learning Outcomes
Publish websites on internet or intranet.

IV Laboratory Learning Outcome

Create a web page to represent personal portfolio.

V Relevant Affective domain related Outcome(s)

 Follow safety practices.
 Maintain tools and equipment.
 Follow ethical practices.

VI Relevant Theoretical Background

The portfolio can have the same purpose as a CV. Most CVs are written with text,
while the portfolio is for showcasing, so it is visual with images and often more
detailed than the CV.
Typical roles that use portfolios are professionals such as, but no limited to:
 Software developers
 UX designers
 Graphic designers
 Photographers
 Marketing professionals

123
Web Page Designing (312004)

 Architects
 Writers
HTML, CSS and JavaScript are the foundational languages to create a website.
You can come a long way just using these three!
Create the structure with HTML. The first thing you have to learn, is HTML,
which is the standard markup language for creating web pages.
Style with CSS. The next step is to learn CSS, to set the layout of your web page
with beautiful colors, fonts, and much more.
Make it interactive with JavaScript. After studying HTML and CSS, you should
learn JavaScript to create dynamic and interactive web pages for your users.

How to create a portfolio step-by-step

Step One: Add HTML Skeleton
Type an HTML skeleton code, which is the starting point for your website. It is the
structure which holds the code and ensures that it is properly displayed on the
internet.
Example:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
html,body {font-family:"Verdana",sans-serif}
h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",sans-serif}
</style>
<script src=""></script>
<body>

<img src="flower.jpg" alt="LA" style="width:50%">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a another paragraph.</p>

</body>
</html>

124
Web Page Designing (312004)

Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.
It is one of the first things that a visitor will see.
It helps the visitors to find and navigate through the content on website. It is important to create well-
structured navigation. So that your visitors can find what they are looking for.
Here is an example of how to create a top navigation bar:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
125
Web Page Designing (312004)

padding: 14px 16px;

text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h2> Navigation Example</h2>
<p> content..</p>
</div>
</body>
</html>

126
Web Page Designing (312004)

Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.
It should contain short information about several things such as:
Who are you?
What do you offer?
What is your profession?
Why should people work with you?
Which actions should you take?
Write in first-person and keep it short and simple.
Additional things preferred in the hero section are:
Eye-catching graphics, either as a background or side-by-side with the text.
An action button that leads to content on your portfolio or to the content of another website.
Here is an example on how to create a Hero section:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
127
Web Page Designing (312004)

.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("cartoon.avif");
height: 90%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}

.hero-text button:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am Cartoon</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
128
Web Page Designing (312004)

</div>

<p>Page Content..</p>

</body>
</html>

Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.
Here you can personalize the content and write about yourself more in-depth.
The content you can include in this section is:
Your introduction
Who are you as a professional
Your education
Your skills
Your work experience (present and/or past)
Your hobbies
Your goals and ambitions
In a way, you can consider the "About me" section as a short summary of your CV.
Feel free to write about yourself in first person.
Personalization and making people understand you as a person might bring you more attention.
Here is an example on how to create an about me section:
<!DOCTYPE html>
129
Web Page Designing (312004)

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}

.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}

.container {
padding: 0 16px;
}

.container::after, .row::after {
content: "";
clear: both;
display: table;
130
Web Page Designing (312004)

.title {
color: grey;
}

.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}

.button:hover {
background-color: #555;
}

@media screen and (max-width: 650px) {

.column {
width: 100%;
display: block;
}
}
</style>
</head>
<body>

<div class="about-section">
<h1>About Us Page</h1>
<p>Some text about who we are and what we do.</p>
<p>Resize the browser window to see that this page is responsive by the way.</p>
</div>

<h2 style="text-align:center">Our Team</h2>

<div class="row">
<div class="column">
<div class="card">
<img src="cartoon.avif" alt="Jane" style="width:100%">
<div class="container">
131
Web Page Designing (312004)

<h2>ABC</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me </p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img src="cartoon1.avif" alt="Mike" style="width:100%">
<div class="container">
<h2>XYZ</h2>
<p class="title">Art Director</p>
<p>Some text that describes me </p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img src="cartoon2.avif" alt="John" style="width:100%">
<div class="container">
<h2>PQR</h2>
<p class="title">Designer</p>
<p>Some text that describes me </p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>

</body>
</html>

132
Web Page Designing (312004)

Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made
along your way.
Here you can add:
Links to your projects with the project name and/or short description of what the project is about.
Links to blog posts that you have written with title and/or short description about what it is about.
Your professional awards or achievements.
Highlighting your work and your accomplishments is a way to create opportunities for yourself.
Visual representations such as images or graphics.

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.
You should always include a way for visitors to contact you, either through a contact form or by writing
down your contact information such as:
Address
Email
Phone number
E.g. Github profile, LinkedIn profile, Youtube profile and so on.
Here is an example on how to create a basic contact section:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
133
Web Page Designing (312004)

font-family: Arial, Helvetica, sans-serif;

}

*{
box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}

input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

/* Style the container/contact section */

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}

/* Create two columns that float next to eachother */

.column {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}

134
Web Page Designing (312004)

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each
other instead of next to each other */
@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>

<h2>Responsive Contact Section</h2>

<p>Resize the browser window to see the effect.</p>

<div class="container">
<div style="text-align:center">
<h2>Contact Us</h2>
<p>leave us a message:</p>
</div>
<div class="row">
<div class="column">
<img src="map.avif" style="width:100%">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="India">India</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
135
Web Page Designing (312004)

<textarea id="subject" name="subject" placeholder="Write something.."

style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>

</body>
</html>

Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.
It is about showing critical information based on your website goals and the needs of your visitors.
Often it contains technical information about copyright, but it can hold other information, such as:
Link to "Privacy policy" page
Link to "Terms of use" page
Contact information
Website navigation links
Links to social networks
Link to your shop
Here is an example on how to build a footer section:

<!DOCTYPE html>
<html>
<head>
136
Web Page Designing (312004)

<meta name="viewport" content="width=device-width, initial-scale=1">

<h2>Fixed/Sticky Footer Example</h2>

<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
<p>Footer</p>
</div>

</body>
</html>

137
Web Page Designing (312004)

VII Exercises
1. Create your own portfolio.
2. Create portfolio for any organization.

VIII ‘HTML’ Code

Write HTML code for above exercise on the blank pages attached at the end of practical.

X Precautions to be Followed
1. Handle computer system with care.
2. Be cautious while performing files related operations in computer system. Closely observe
and remember the file name and its folder.

XI Conclusion
………………………………………………………………………………………………………
………………………………………………………………………………………………………
XII Practical Related Questions
Note: Below given are few sample questions for reference. Teachers must design more such
questions to ensure the achievement of identified CO.
1. Define portfolio.
2. List different sessions available in portfolio.

[Space for Answer]

XIII References / Suggestions for further Reading Software/Learning Websites

1. https://www.w3schools.com/howto/howto_website_create_portfolio.asp

XIV Assessment Scheme

Performance indicators Weightage
Process related: 30 Marks 60%
1. Debugging ability 20%

2. Correctness of Program codes 30%

3. Quality of output achieved(LLO mapped) 10%
Product related: 20 Marks 40%
1. Completion and submission of practical in time 20%
2 Answer to sample questions 20%
Total 50 Marks 100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(50)
Related(30) Related(20)

139
Web Page Designing (312004)

Maharashtra State Board of Technical Education (K Scheme)

Stylus Pro 7880 9880 Field Repair Guide PDF
62% (13)
Stylus Pro 7880 9880 Field Repair Guide PDF
350 pages
Technology in Teaching and Learning Post Test
87% (15)
Technology in Teaching and Learning Post Test
15 pages
Black Wade The Wild Side of Love PDF
No ratings yet
Black Wade The Wild Side of Love PDF
4 pages
Web Designing Lab Manual
100% (6)
Web Designing Lab Manual
22 pages
Exploring Autodesk Revit 2017 for Structure , 7th Edition
From Everand
Exploring Autodesk Revit 2017 for Structure , 7th Edition
Prof. Sham Tickoo
1/5 (1)
Exploring Autodesk Revit 2018 for Structure, 8th Edition
From Everand
Exploring Autodesk Revit 2018 for Structure, 8th Edition
Prof. Sham Tickoo
5/5 (2)
Samsung Le37m86bdx Le40m86bdx Le46m86bdx Le52m86bdx Le40m87bdx Le46m87bdx Chassis Gtu37,40,46,52sen LCD-TV SM
No ratings yet
Samsung Le37m86bdx Le40m86bdx Le46m86bdx Le52m86bdx Le40m87bdx Le46m87bdx Chassis Gtu37,40,46,52sen LCD-TV SM
196 pages
Web Page Designing With HTML
No ratings yet
Web Page Designing With HTML
96 pages
Lab Manual - SWD - 2023-24 - EVEN
No ratings yet
Lab Manual - SWD - 2023-24 - EVEN
110 pages
LM - Sunil Nakum
No ratings yet
LM - Sunil Nakum
153 pages
Web Technologys
No ratings yet
Web Technologys
66 pages
(R18A0589) WebTechnologies Lab
No ratings yet
(R18A0589) WebTechnologies Lab
123 pages
Index Web
No ratings yet
Index Web
11 pages
Dronacharya WD Lab Manual 1
No ratings yet
Dronacharya WD Lab Manual 1
76 pages
Lab Manual: Jawaharlal Nehru Engineering College Aurangabad
No ratings yet
Lab Manual: Jawaharlal Nehru Engineering College Aurangabad
35 pages
Web Technologies Lab Index
No ratings yet
Web Technologies Lab Index
8 pages
314005
No ratings yet
314005
69 pages
Applied Multimedia Techniques
No ratings yet
Applied Multimedia Techniques
95 pages
Web Designing Index & Exp1
No ratings yet
Web Designing Index & Exp1
13 pages
Vaibhav wp2
No ratings yet
Vaibhav wp2
140 pages
WD Lab Jatin 1 Merged
No ratings yet
WD Lab Jatin 1 Merged
202 pages
WD Lab Manual
No ratings yet
WD Lab Manual
78 pages
New - CS3EW04-Internet and Web-Technologies-Lab Manual
No ratings yet
New - CS3EW04-Internet and Web-Technologies-Lab Manual
67 pages
WD Labmanual
No ratings yet
WD Labmanual
91 pages
Web Essential Front Page Student
No ratings yet
Web Essential Front Page Student
10 pages
Adp Lab Manual Newtemplate
No ratings yet
Adp Lab Manual Newtemplate
25 pages
Exploring Autodesk Revit 2023 for Structure, 13th Edition
From Everand
Exploring Autodesk Revit 2023 for Structure, 13th Edition
Prof. Sham Tickoo
No ratings yet
WD Lab Manual
No ratings yet
WD Lab Manual
127 pages
Lab Manual: Web Technology Laboratory
No ratings yet
Lab Manual: Web Technology Laboratory
57 pages
Web Technologies Laboratory: Lab Manual
No ratings yet
Web Technologies Laboratory: Lab Manual
47 pages
Course Handout
No ratings yet
Course Handout
14 pages
Web Designing Lab File
No ratings yet
Web Designing Lab File
19 pages
CBSWPD Manual 2024 25 Final
No ratings yet
CBSWPD Manual 2024 25 Final
163 pages
Download
No ratings yet
Download
5 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
82 pages
WE Lab Manual
No ratings yet
WE Lab Manual
44 pages
5.basic Web Design Lab
No ratings yet
5.basic Web Design Lab
7 pages
FSD Lab Manual
No ratings yet
FSD Lab Manual
64 pages
Web Technology Lab BCSL504 Manual 2024-25-1
No ratings yet
Web Technology Lab BCSL504 Manual 2024-25-1
99 pages
Web Designing Lab File
No ratings yet
Web Designing Lab File
20 pages
Full Stack Web Development Lab Manual
No ratings yet
Full Stack Web Development Lab Manual
58 pages
Het WD 10 (2) - Merged
No ratings yet
Het WD 10 (2) - Merged
169 pages
WPD D2
No ratings yet
WPD D2
4 pages
Uid Lab
No ratings yet
Uid Lab
2 pages
RWPD Lab Manual 3 - 4330705
No ratings yet
RWPD Lab Manual 3 - 4330705
291 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
83 pages
Database Management System
No ratings yet
Database Management System
141 pages
CPT 221
No ratings yet
CPT 221
13 pages
Full Stack Lab Mcert
No ratings yet
Full Stack Lab Mcert
60 pages
WP Lab
No ratings yet
WP Lab
89 pages
WD Lab Manual
No ratings yet
WD Lab Manual
78 pages
Lab-Course-File Particulars: S. No. Particulars Remarks
No ratings yet
Lab-Course-File Particulars: S. No. Particulars Remarks
49 pages
WT Menual Final File-1
No ratings yet
WT Menual Final File-1
72 pages
Web Design Syllabus 2016
No ratings yet
Web Design Syllabus 2016
8 pages
WTL Students Manual 2024-2025
No ratings yet
WTL Students Manual 2024-2025
51 pages
It Workshop (r23) Faculty Manual
No ratings yet
It Workshop (r23) Faculty Manual
72 pages
WEB TECHNOLOGY Lab Manual Edit
No ratings yet
WEB TECHNOLOGY Lab Manual Edit
52 pages
3 Grade 11 Web Design and Development Student Module 3 Sep 24
75% (4)
3 Grade 11 Web Design and Development Student Module 3 Sep 24
743 pages
FSD Lab Manual (R22a0589)
No ratings yet
FSD Lab Manual (R22a0589)
67 pages
Web Design.pdf Course Outline (1)
No ratings yet
Web Design.pdf Course Outline (1)
8 pages
Web Technology Lab Manual
No ratings yet
Web Technology Lab Manual
52 pages
Php-Initial and !ST PR
No ratings yet
Php-Initial and !ST PR
21 pages
Web Tech Lab Manual
No ratings yet
Web Tech Lab Manual
12 pages
Wad Lab Manual
No ratings yet
Wad Lab Manual
95 pages
Micro GC 3000
No ratings yet
Micro GC 3000
11 pages
MAN0070A0002 Pilots Manual
No ratings yet
MAN0070A0002 Pilots Manual
37 pages
8.10 - Gis
No ratings yet
8.10 - Gis
13 pages
M2User Guide
No ratings yet
M2User Guide
178 pages
Japanese Diet Benefits Breakthrough
No ratings yet
Japanese Diet Benefits Breakthrough
55 pages
SCCM, Microsoft System Center Configuration Manager, IDM, Windows 7, Windows 8.1
No ratings yet
SCCM, Microsoft System Center Configuration Manager, IDM, Windows 7, Windows 8.1
11 pages
2 Low-Cost - SDR-based - Tool - For - Evaluating - LoRa - Satellite - Communications-MN2022
No ratings yet
2 Low-Cost - SDR-based - Tool - For - Evaluating - LoRa - Satellite - Communications-MN2022
6 pages
Computer Accounting
No ratings yet
Computer Accounting
3 pages
1brf An Introduction To Rubrik For Mongodb Data Protection Tech Brief
No ratings yet
1brf An Introduction To Rubrik For Mongodb Data Protection Tech Brief
5 pages
B&E 105: T B S: Echnology For Usiness Olutions
No ratings yet
B&E 105: T B S: Echnology For Usiness Olutions
11 pages
Tomcat Vulnerabilities (CVE - ) NOT Impacting SAP BI Platform 4.x / 3.x
No ratings yet
Tomcat Vulnerabilities (CVE - ) NOT Impacting SAP BI Platform 4.x / 3.x
4 pages
Xii CS Practical Programs 2024 - 2025
No ratings yet
Xii CS Practical Programs 2024 - 2025
28 pages
Config Switch Core 10.16.35.1
No ratings yet
Config Switch Core 10.16.35.1
10 pages
Is 43 Upgrade en
No ratings yet
Is 43 Upgrade en
28 pages
Grade 11 - Mathematics - Model Paper 01
No ratings yet
Grade 11 - Mathematics - Model Paper 01
19 pages
4 Ways To Improve Your Plotly Graphs - by Dylan Castillo - Towards Data Science
No ratings yet
4 Ways To Improve Your Plotly Graphs - by Dylan Castillo - Towards Data Science
11 pages
CV 5
No ratings yet
CV 5
5 pages
VIN Model Series/model Designation Order Number License Plate
No ratings yet
VIN Model Series/model Designation Order Number License Plate
3 pages
2023-01-01
No ratings yet
2023-01-01
3 pages
Your Question Has Been Answered: Question: 3. Draw The 11-Item Hash Table Resulting From Hashing The Key
No ratings yet
Your Question Has Been Answered: Question: 3. Draw The 11-Item Hash Table Resulting From Hashing The Key
5 pages
Requirement For Variant Generation in
No ratings yet
Requirement For Variant Generation in
15 pages
Pygame Zero: e e R Z o
No ratings yet
Pygame Zero: e e R Z o
13 pages
Css
No ratings yet
Css
113 pages
VRV Product Catalogue For Professional Network ECPEN16-200 English
No ratings yet
VRV Product Catalogue For Professional Network ECPEN16-200 English
308 pages
LVMH IT Landscape
No ratings yet
LVMH IT Landscape
5 pages
A Project Report On "Comparative Study Between Flipkart and Amazon India"
No ratings yet
A Project Report On "Comparative Study Between Flipkart and Amazon India"
88 pages