0% found this document useful (0 votes)

211 views96 pages

Web Page Designing With HTML

Uploaded by

Sahil Kolande

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)

211 views96 pages

Web Page Designing With HTML

Uploaded by

Sahil Kolande

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

Document Cover and Introductory Pages
Preface
Programme and Course Outcomes
Course Outcome Matrix
List of Industry Relevant Skills
Guidelines and Instructions
Content Page / Practical List
Practical No.1: Create Sample Web Page
Practical No.2: Adding Block Level Tags
Practical No.3: Using Additional Block Level Tags
Practical No.4: Text Level Tags and Special Characters
Practical No.5: Implementing Lists
Practical No.6: Using Anchor Tags
Practical No.7: Linking and Color Customization
Practical No.8: Image Embedding
Practical No.9: Image Links and Backgrounds
Practical No.10: Applying Frame Tags
Practical No.11: Using Table Tags
Practical No.12: CSS Demonstrations
Practical No.13: Hosting on Intranet
Practical No.14: Publishing on Internet
Supporting Information

A Laboratory Manual for

Web Page Designing with

HTML

(22014)
Semester-II

(CO/CM/CW/IF)

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 First Semester of Diploma in…………………..
…………………………………… of Institute,………………………….
…………………………. (Code: ……………...) has completed the term work
satisfactorily in Subject Web Page Designing with HTML (22014) 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 with HTML (22014)

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 ‘I’ Scheme curricula for engineering diploma
programmes with outcome-base education as the focus and accordingly, relatively large
amount of time is allotted for the practical work. Thisdisplays 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 [Link], 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 ‘I’ scheme laboratory
manual development team designed the practicals to focus on theoutcomes, rather than the
traditional age old practice of conducting practicals 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 [Link] 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 theformation of web pages. There are essentially two types of web design approaches,
which aredynamic and static design. Static web design is typically based on basic HTML
code. It isessential for diploma student to learn HTML since the task of static website design
isperformed by using HTML coding. Even in dynamic websites, the task of presentation
ofcontent is handled through HTML coding. This course introduce web page design
usingHTML 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 mark-
uplanguage for formatting and styling of content. This learning enables students to design
staticweb 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.

Maharashtra State Board of Technical Education i

Web Page Designing with HTML (22014)

Programme Outcomes (POs) and Program Specific Outcomes (PSOs) to be

achieved through Practicals of this Course

Following programme outcomes are expected to be achieved out of the ten programme
outcomes and programme specific outcomesthrough the practical’s of the course on Web
Page Design.

Program Outcomes(POs)

PO1. Basic knowledge: Apply knowledge of basic mathematics, science and basic
engineering to solve the problems related to application of computers
andcommunication services in storing, manipulating and transmitting data, often in
thecontext of a business or other enterprise.
[Link] knowledge: Apply Information Technology knowledge to solve broadbased
Information Technology related problems.
[Link] and practice: Plan to perform experiments, practices and to use the
results to solve Information Technology related problems.
[Link] tools: Apply appropriate Information Technology related techniques/
tools with an understanding of the limitations.
[Link] engineer and society: Assess social, health, safety and legal issues and the
consequent responsibilities relevant to practice in the field of information technology.
[Link] and sustainability: Apply Information Technology related engineering
solutions for sustainable development practices in environmental contexts.
[Link]: Apply ethical principles for commitment to professional ethics, responsibilities
and norms of practice in the field of Information Technology.
[Link] and team work: Function effectively as a leader and team member in
diverse/ multidisciplinary teams.
[Link]: Communicate effectively in oral and written form.
PO [Link]-long learning: Engage in independent and life-long learning along with the
technological changes in the IT and allied industry.

Program Specific Outcomes (PSOs)

[Link] Information Technology: Use latest technologies for operation
andapplication of information.
[Link] Technology Process: Maintain the information processes using modern
information and communication technologies.

Maharashtra State Board of Technical Education ii

Web Page Designing with HTML (22014)

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. CO CO CO CO CO CO
Title of the Practical a. b. c. d. e. f.
No.
Create web page using structure tags to
1. √ - - - - -
display sample message.
Create a web page for displaying a paragraph
2. √ - - - - -
using block level tags, HR tags (Part-I)
Create a web page for displaying a paragraph
3. - √ - - - -
using block level tags, HR tags (Part-II)
Create a Web Page using Text level tags and
4. - √ - - - -
Special Characters
Create a web page for implementing different
5. - √ - - - -
types of Lists.
Create a web page to link-
a. A different web page of same site.
b. A different location on the same web
6. - - √ - - -
page
c. A specific location on different web
page of same site.
i) Create a web page to link-
a. An external page of different web site
7. - - √ - - -
b. To an email ID
ii) Write tags to change colors of links
Insert images on web page using various
8. - - √ - - -
attributes
Implement image as a button and set image as
9. - - √ - - -
background.
10. Create a web page to implement Frame tags. - - - √ - -
11. Create a web page to implement Table tags. - - - √ - -
Create a web page for demonstration of CSS
12. - - - - √ -
by applying Internal/External/ Inline style
Install a web server and publish a website on
13. - - - - - √
Intranet.
14. Publish a website on Internet by acquiring - - - - - √
Space on free hosting site.

Maharashtra State Board of Technical Education iii

Web Page Designing with HTML (22014)

List of Industry Relevant Skills

The following industry relevant skills of the competency ‘Develop static interactive web-
sites’are expected to be developed in students by undertaking the practicals of this laboratory
manual.
1. Use block level formatting tags to present content on web page.
2. Use text level formatting tags to present content on web page.
3. Apply hyper linking on web page.
4. Organize the content using table and frames.
5. Apply presentation schemes on content using CSS.
6. Publish websites on Internet or Intranet.

Maharashtra State Board of Technical Education iv

Web Page Designing with HTML (22014)

Guidelines to Teachers

1. For incidental writing on the day of each practical session every student should maintain
a dated log book 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. 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 practicals focus should be given on development of enlisted
skills rather than theoretical knowledge.

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.

Maharashtra State Board of Technical Education v

Web Page Designing with HTML (22014)

Content Page
List of Practicals and Progressive Assessment Sheet

Date of Date of Assess Remark

Sr. Page Dated sign.
Title of the practical perform submi ment s (if
No. No. of teacher
ance ssion marks(25) any)
Create web page using structure
1. 1
tags to display sample message.
Create a web page for displaying
2. a paragraph using block level 6
tags, HR tags (Part-I)
Create a web page for displaying
3. a paragraph using block level 10
tags, HR tags (Part-II)
Create a Web Page using Text
4. 14
level tags and Special Characters.
Create a web page for
5. implementing different types of 19
Lists.
Create a web page to link
a) A different web page of same
site.
6. b) A different location on the 23
same web page
c) A specific location on different
web page of same site.
i) Create a web page to link
a) An external page of different
web site
7. 31
b) To an email ID
ii) Write tags to change colors of
links
Insert images on web page using
8. 36
various attributes.
Implement image as a button and
9. 40
set image as background.
Create a web page to implement
10. 45
Frame tags.
Create a web page to implement
11. 52
Table tags.
Create a web page for
12. demonstration of CSS by applying 57
Internal/External/ Inline style.
Install a web server and publish a
13. 64
website on Intranet.
Publish a website on Internet by
14. acquiring space on free hosting 69
site.
Total
 To be transferred to proforma of CIAAN 2017.

Maharashtra State Board of Technical Education vi

Web Page Designing with HTML (22014)

Practical No.1: Create Sample Web Page

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 Relevant Program Outcomes

 Discipline knowledge: Apply Computer engineering discipline-specific knowledge
to solve core computer engineering related problems.
 Experiments and practice: Plan to perform experiments and practices to use the
results to solve broad-based Computer engineering problems.
 Engineering tools: Apply relevant Computer technologies and tools with an
understanding of the limitations.
 Individual and team work: Function effectively as a leader and team member in
diverse/ multidisciplinary teams.
 Communication: Communicate effectively in oral and written form.

III Competency and Practical skills

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

IV Relevant Course Outcomes

Use tags to present content on web page.

V Practical Outcome
Create a Web Page using structured tags.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

All HTML documents must start with a document type
declaration: <!DOCTYPE html>.The HTML document itself begins
with <html> and ends with </html>.
HTML document is divided into two parts: The head and the body. The <head>
element is used to specify information about the HTML Web Page as title of the Web
Page. Actual content of the Web Page are specified inside the <body> element.

Maharashtra State Board of Technical Education 1

Web Page Designing with HTML (22014)

Web page structure:

<!DOCTYPE html>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
</body>
</html>

Example of Web page structure:

Create a Web page to display sample message “Web Page Designing using
HTML”
Steps:
1. Open Text Editor.
[Link] following HTML codes to display sample message.

[Link] above program with file name “[Link]”under a folder name “HTML”
in “D” drive.
4. Run this program using web browser with the path specifiedas follows:
D:/HTML/[Link]

Maharashtra State Board of Technical Education 2

Web Page Designing with HTML (22014)

Output:

VIII Exercise
1. Create a web page to display name of your college and save the page withyour
name.
2. Create a web page to display name of any IT company you know and save the
page with yourRollno.

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

X 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
Text editor, Web
2. Software Package
browser

XI 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.

XII Resources Used

Sr.
Name of Resource Specification
No.
Computer System
1.
with broad specifications
2. Software
3. Any other resource used

Maharashtra State Board of Technical Education 3

Web Page Designing with HTML (22014)

XIII Output (Take screen shot of the webpage created as output and attachit here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XIV Conclusion
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. State the role of browser and List names of various browsers.
2. Differentiate between static and dynamic websites.
3. Write steps to save created HTML code.

[Space for Answer]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 5

Web Page Designing with HTML (22014)

Practical No.2: Create web page using Block Level tags (Part-I)
I Practical Significance
HTML (Hyper Text Markup Language) uses "block-level" elements tags.
Paragraph tag, Heading tag, break tag are different Block level tags. This practical is
useful for displaying content in blocks.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Prepare Web page using different Block level tags like paragraph tag, Heading tag
and break tag.
2. Formatting HTML document using Block level tags as per the requirement.

IV Relevant Course Outcomes

Use block level formatting tags to present content on web page.

V Practical Outcome
Create a Web Page using Block Level tags.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Block Level Tags:
HTML uses "block-level" element tags. Paragraph tag <p> defines paragraph.
HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5,
and H6 with H1 being the highest level and H6 the least level. The <br> tag inserts for
a single line break.

Following are different Block Level tags:

Tags Description Example

<p> Defines a paragraph <p> This is my First paragraph </p>

<h1>to <h6> Defines Html headings <h1> This is my First Heading </h1>

Inserts a single line

<br> To break lines<br>in a text
break

Maharashtra State Board of Technical Education 6

Web Page Designing with HTML (22014)

VIII Exercise
Write HTML Code to show following output using block level tags.

IX ‘HTML’ Code
1. Write HTML code for above exercise on the blank pages attached at the end
of practical.
2. Write HTML code to design a page using all above block level tags.

X Resources Required

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

Maharashtra State Board of Technical Education 7

Web Page Designing with HTML (22014)

XII Resources Used

Sr.
Name of Resource Specification
No.
Computer System
1.
with broad specifications
2. Software
3. Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. List different block level tags
2. Write attributes of <P> tags.
3. Identify the correct HTML tag for inserting a line break?
a. <br>
b. <lb>
c. <bk>
d. <newline>

[Space for Answer]

Maharashtra State Board of Technical Education 8

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
a. [Link]
b. [Link]
c. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 9

Web Page Designing with HTML (22014)

Practical No.3: Create a web page using Block Level tags (Part-II)
I Practical Significance
HTML uses block-level tags are used for designing a web page. This practical
is useful for applying various tags like Block Quote, Preformatted tag, Address tag and
HR tag on web page.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Prepare Web page using different Block level tags like Block Quote
<blockquote>, Preformatted tag <pre>,Address tag <address> and HR tag<hr>.
2. Formatting HTML document using Block level tags as per the requirement.

IV Relevant Course Outcomes

Use block level formatting tags to present content on web page.

V Practical Outcome
Create a web page using Block Level tags.

VI Relevant Affective domain related Outcome(s)

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

VII 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 another <p>Here is a long quotation
[Link] usually indent here is a long quotation.
<blockquote> elements. </p>
</blockquote>
<pre > The <pre> tag used for indicating <pre>
preformatted text. The pre formatting tag usedfor
indicating preformatted text.
</pre>

Maharashtra State Board of Technical Education 10

Web Page Designing with HTML (22014)

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

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

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

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

X 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
Text editor, Web
2 Software Package
browser

XII Resources Used

Sr.
Name of Resource Specification
No.
Computer System
1.
with broad specifications
2. Software
3. Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

Maharashtra State Board of Technical Education 11

Web Page Designing with HTML (22014)

XV 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. 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]

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

Maharashtra State Board of Technical Education 12

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]
3. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 13

Web Page Designing with HTML (22014)

Practical No.4: Create a Web Page using Text level tags and Special
Characters in HTML
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. This practical is useful for formatting a text of
a web page using text level tags and inserting the special characters by using HTML
entity name or the HTML entity number.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Format web pages using Text level tags.
2. Display Special Characters using HTML entity name or the HTML entity number.

IV Relevant Course Outcomes

Use Text level formatting tags to present content on web page.

V Practical Outcome
Create a Web Page using Text level tags and Special Characters.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Knowledge of HTML, HTML tags and Attributes, Concepts of Text level tags such as
Bold, Italic, Teletype, Underline, Strikethrough, Superscript, Subscript, DIV tag.

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>...</strike> Text that appears within <strike>...</strike> element is displayed
with strikethrough.

Maharashtra State Board of Technical Education 14

Web Page Designing with HTML (22014)

<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 subscript.
<div>…</div> The <div> elements allow to group together several elements to
create sections or subsections of a page.

HTML Special Characters:

Character Entity Number Entity Name Description

" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
© © © copyright
® ® ® registered trademark

VIII Exercise

Write HTML code for following output using text level tags and special symbols.

IX HTML Code
1. Write HTML code for above exercise on the blank pages attached at the end of
practical showing use of all above mentioned tags.
2. Write HTML code to design a page using all text level tags.

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

XI 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.

Maharashtra State Board of Technical Education 15

Web Page Designing with HTML (22014)

XII Resources Used

Sr.
Name of Resource Specification
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. Name the HTML tag used to bold text.
2. Explain the meaning of the following code.
<div id="menu" align="middle" >
3. Write procedure to insert a copyright symbol on a browser page?
4. State the difference between block level and text level tags.

[Space for Answer]

Maharashtra State Board of Technical Education 16

Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 17

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 18

Web Page Designing with HTML (22014)

Practical No.5: Create a web page using Different types of Lists in HTML
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 Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘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.

IV Relevant Course Outcomes

Use Lists tags to present content on web page.

V Practical Outcome
Create a web page by implementing different types of Lists.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Knowledge of HTML language tags and attributes, Concept of Ordered Lists,
Unordered Lists, Definition Lists and Nested Lists.

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.

Maharashtra State Board of Technical Education 19

Web Page Designing with HTML (22014)

VIII Exercise
Write HTML code for following output using different types of lists.

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

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

XII Resources Used

Sr.
Name of Resource Specification
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

Maharashtra State Board of Technical Education 20

Web Page Designing with HTML (22014)

XV 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. Enlist the different types of formats in ordered list?
2. Differentiate between bullet and number list in HTML?
3. Write HTML code for a definition list.

[Space for Answer]

Maharashtra State Board of Technical Education 21

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 22

Web Page Designing with HTML (22014)

Practical No.6: Create a web page to Apply anchor tag for

linking Web pages
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 Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
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.

IV Relevant Course Outcomes

Apply hyperlinking on web page.

V Practical 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.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum 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:
[Link]

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.

Maharashtra State Board of Technical Education 23

Web Page Designing with HTML (22014)

The Most Important Anchor Attributes: There are anchor attributes to create
functional hyperlinks. These attributes are href, [Link] 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.

Example:

<p>Example of target attribute<a href=[Link]

target="_blank">target</a> with us!</p>

1. Procedure for Applying anchor tag for linking Web pages

Step1:Create a web page with name “first_page” with following code

<!DOCTYPE html>
<html>
<body>
<h1>My First page</h1>
<p>Example of linking pages with HTML</p>
<a href="second_page.html">second page </a>
</body>
</html>

Step [Link] a web page with name “second page” with following code

<!DOCTYPE html>
<html>
<body>
<h1>My second page</h1>
<p>Welcome to world of Hyperlinking with HTML</p>
</body>
</html>

Maharashtra State Board of Technical Education 24

Web Page Designing with HTML (22014)

Step 3: In browser type URL of first page and see the output.

2. Procedure for Linking within the document (HTML Links - Create a Bookmark)
HTML bookmarks are used to allow readers to jump to specific part of a Web page.
Bookmarks can be useful if webpage is very long.
Create a bookmark with the id attribute:

Ex:<h2 id="Link">Link in HTML</h2>

Then, add a link to the bookmark ("Link in HTML"), from within the same page:

Ex: <a href="#link"> Links in HTML</a>

Step 1: Create a Web page as follows:

<!DOCTYPE html>
<html>
<body>
<p><a href="#link">Links in HTML</a></p>

<h2>Introduction of HTML</h2>
<p>This Point explains Introduction of HTML</p>

<h2>concept of Website</h2>
<p>This Point explains concept of Website</p>
<h2>Concept of URL</h2>
<p>This Point explains Concept of URL</p>

<h2>Images in HTML </h2>

<p>This Point explains Images in HTML</p>

<h2 id="link">Links in HTML</h2>

<p>This Point explains Links in HTML</p>

<h2>Tables in HTML</h2>
<p>This Point explains Tables in HTML</p>

<h2>Hyperlink in HTML</h2>
<p>This Point explains Hyperlink in HTML</p>

Maharashtra State Board of Technical Education 25

Web Page Designing with HTML (22014)

<p>This Point explains HTML list</p>

<h2>HTML Headings</h2>
<p>This Point explains HTML Headings</p>

<h2>HTML paragraph</h2>
<p>This Point explains HTML paragraph</p>

<h2>HTML Frame</h2>
<p>This Point explains HTML Frame</p>
</body>
</html>

Step2: Open this web page with browser then you will get following output including link
named “Link in html”.

Step 3: When we click on the link “Link in html” then cursor goes to “Link to HTML” point
on the same page.

3. Procedure for linking a specific location on different web page of same site.

Step 1: Create a web page with following code :

<!DOCTYPE html>

Maharashtra State Board of Technical Education 26

Web Page Designing with HTML (22014)

<html>
<body>
<h1> Hyper Text Markup language</h1>
<p><a href="link within [Link]#link">Links in HTML</a></p>
</body>
</html>

Step2:Create another web page with book mark id. (destination page) as follows
Which include id of bookmark.

Step3: Open First web page on browser and click on the link. Then it directly link to
specific part of destination page.

VIII 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.

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

Maharashtra State Board of Technical Education 27

Web Page Designing with HTML (22014)

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. Write procedure for linking to a document in a different folder.
2. Write attributes of anchor tag with their meaning.
3. Explain Bookmark with its use.

[Space for Answer]

Maharashtra State Board of Technical Education 28

Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 29

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 30

Web Page Designing with HTML (22014)

Practical No.7: Create a web page to link an external page of different

web sites, email ID and change colors of links
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 above tags.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Able to link created website with external websites
2. Able to apply mailto tag.
3. Able to change color of links

IV Relevant Course Outcomes

Apply hyperlinking on web page to create website.

V Practical Outcome
Create a web page to link-
1. An external page of different web site
2. To an email ID
3. Applytags to change colors of links

VI Relevant Affective domain related Outcome(s)

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

VII Minimum 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="[Link] Concepts</a>

Maharashtra State Board of Technical Education 31

Web Page Designing with HTML (22014)

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 your
visitors to send questions or comments. While using <a> tag as an email tag, you will
use [Link] address along with href attribute.
An email link would require the following code:

<a href="[Link] 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="[Link] Program & body=Please send me a

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

3. 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

<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: green;}
a:visited {color: pink;}
a:hover {color: red;}
a:active {color: yellow;}
</style>
</head>
<body>

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

<a href="[Link] target="_blank">HTML Images</a>
</body>
</html>

VIII Exercise
Write a HTML code to link an external page of different web sites like [Link] or
[Link] using URL and also link web page to your mail address. Apply tags to change
colors of links.

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

Maharashtra State Board of Technical Education 32

Web Page Designing with HTML (22014)

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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.
[Link] between active link and visited link.
[Link] different types of URL?
[Link] the use of Title attributes of anchor tag.

[Space for Answer]

Maharashtra State Board of Technical Education 33

Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 34

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 35

Web Page Designing with HTML (22014)

Practical No.8: Insert images on web page using various attributes

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 various attributes.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Insert Images in web page.
2. Format the Image with using various attributes.

IV Relevant Course Outcomes

Insert Image with its attributes on web page.

V Practical Outcome
Design a web page using image with various attributes.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Knowledge of HTML language tags and attributes, Concept of Images with its format
such as JPEG images, PNG images & GIF images and IMG tag with its attributes.

1. Inserting Images in HTML Documents:

In HTML, images are defined with the <img> [Link] 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.

Maharashtra State Board of Technical Education 36

Web Page Designing with HTML (22014)

2. 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.

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

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

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

XII Resources Used

Sr. Specification
Name of Resource
No.
1. Computer system
with broad specifications
2. Software
3. Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

Maharashtra State Board of Technical Education 37

Web Page Designing with HTML (22014)

XV 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. Explain the tag used to insert image in a web page.
2. Name the tag with attribute used to change the size of image.
3. Write procedure to insert border to the image?

[Space for Answer]

Maharashtra State Board of Technical Education 38

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 39

Web Page Designing with HTML (22014)

Practical No.9: Implement image as a button or link and Set image as

background
I Practical Significance
Image can be used as a hyperlink, simply by replacing the text hyperlink with image
code. 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 Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Embed Images as button or link in web page.
2. Use Images as background in the web page.

IV Relevant Course Outcomes

Use of Image as button or link and set image as a background in web page.

V Practical Outcome
Implement image as a button or link and set image as background.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

1. Implement image as a button or link:
Image link are constructed by embedding an <img> tag inside of an anchor element
<a>.In HTML image links require opening and closing anchor tags with valid source
path of image. The syntax is as follows:

For Example:

Two web pages are created by name as “[Link]” and “[Link]”. First page
is link with second page by implementing image as link. By clicking on the image-link
created on first page, the second page will appears. The code for linking of both the
page by image as link is given below:

Maharashtra State Board of Technical Education 40

Web Page Designing with HTML (22014)

b)Second web [Link]

<html>
<head>
<title> [Link] </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
</body>
</html>
The First web page-Output of above HTML code as follows:

Second page output

2. 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.

Maharashtra State Board of Technical Education 41

Web Page Designing with HTML (22014)

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:

VIII Exercise
Design a web page which include image hyperlink and set any image as a background
to the page.

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

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

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. 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.

Maharashtra State Board of Technical Education 42

Web Page Designing with HTML (22014)

[Space for Answer]

XVI References / Suggestions for further Reading

SOFTWARE/LEARNING WEBSITES
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 44

Web Page Designing with HTML (22014)

Practical No.10: Create a Web page to implement Frame tags

I Practical Significance
In HTML, a frame is used to display multiple web pages in the same web page, at a
time. Each frame in a window may be separated from the others with border. This
practical used to create a frame with its attributes.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Use frames and frameset to partition the contents of web site.
2. Adding different documents to different frames.
3. Follow safety practices.

IV Relevant Course Outcomes

Organize the content using frames.

V Practical Outcome
Create a web page to implement Frame tags.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Concept of different types of Frames with their attribute, Creating a frames using
FRAMESET tag. The basic concept behind frames is to:

 Use the ‘frameset’ element in place of the ‘body’ element in an HTML document.
 Use the ‘frame’ element to create frames for the content of the web page.
 Use the ‘src’ attribute to identify the resource that should be loaded inside each
frame.
 Create a different file with the contents for each frame.

Maharashtra State Board of Technical Education 45

Web Page Designing with HTML (22014)

For example:

Create four different HTML documents. Here’s what the first will contain:

<!DOCTYPE>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

The first document will save as frame_1.html. The other three documents will have similar
contents and follow the same naming sequence like frame_2.html, frame_3.html and
frame_4.html.
1. Creating Vertical Columns
To create a set of four vertical columns, use the frameset element with the cols
attribute. The cols attribute is used to define the number and size of columns
the frameset will contain. The value of ‘*’ will cause to automatically sized to fill the
available space. Here’s HTML markup looks like.

<!DOCTYPE>
<html>
<frameset cols="*,*,*,*">
<frame src="../file_path/frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>

And here’s an example of how that HTML will render.

Maharashtra State Board of Technical Education 46

Web Page Designing with HTML (22014)

2. Creating Horizontal Rows

Rows of frames can be created by using the rows attribute rather than the cols attribute
as shown in the HTML below.

<!DOCTYPE >
<html>
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>

By making that one change, the frames now load as four rows stacked up on top of
each other.

3. Mixing Columns and Rows

Columns and rows of frames can both appear on the same webpage by nesting
one frameset inside of another. To do this, first create a frameset and then nest a
child frameset within the parent element. Here’s an example of how to nest two
rows within a set of three columns.

Maharashtra State Board of Technical Education 47

Web Page Designing with HTML (22014)

</frameset>
</frameset>

That code creates a set of two equally sized columns. Then split the second column
into two rows. Finally, Split the second row into two columns. Here’s what that
actually looks like.

Element
Attributes Notes
Name
The <noframes> element was used within a parent
<frameset> to provide fallback content for users whose
noframes browsers did not support <frame> content. Frames have
been deprecated, so the <noframes> element should not
be in use on modern websites.
The <frameset> element was used to create a group of
frameborder frames which could be styled and controlled as a unit.
frameset cols
Frames have been deprecated and should no longer be
bordercolor
used.
src The <frame> element was used to break a single browser
name window into multiple independent browsing contexts.
marginwidth Frames have been deprecated and should not use by
frame scrolling
modern websites.
noresize
frameborder
bordercolor

VIII Exercise
Write HTML code to divide web page into 2 rows and second into 3 columns using
frameset and its attributes and showing text links in first column, ordered list in second
column and image in third column.

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

Maharashtra State Board of Technical Education 48

Web Page Designing with HTML (22014)

X Resources Required

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

XII Resources Used

Sr. Name of Resource Specification
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. Write steps to create frame.
2. Explain different attribute that can be used with frame elements?
3. Write procedure to make a frame with vertical scrollbar but without a
horizontal scrollbar.
[Space for Answer]
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
Maharashtra State Board of Technical Education 49
Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 50

Web Page Designing with HTML (22014)

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 51

Web Page Designing with HTML (22014)

Practical No.11: Create a Web page to implement table tags

I Practical Significance
Tables are used to show tabular data i.e. information that is logically presented
in rows and columns.

II Relevant Program Outcomes

III Competency and Practical skills

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

IV Relevant Course Outcomes

Organize the content using table.

V Practical Outcome
Organize data in table format on web page.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum 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.
<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>
Maharashtra State Board of Technical Education 52
Web Page Designing with HTML (22014)

</table>

VIII Exercise
Write a program to create HTML table having border as below or similar table given
by teacher implementing above table tags.

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

Maharashtra State Board of Technical Education 53

Web Page Designing with HTML (22014)

XII Resources Used

Sr.
Name of Resource Specification
No.
1. Computer System
with broad specifications
2. Software
3. Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. 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]

Maharashtra State Board of Technical Education 54

Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 55

Web Page Designing with HTML (22014)

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 56

Web Page Designing with HTML (22014)

Practical No.12: Create a web page for demonstration of CSS by

applying Internal/External/ Inline style
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 Relevant Program Outcomes

III Competency and Practical skills

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.

IV Relevant Course Outcomes

Apply presentation schemes on content using CSS.

V Practical Outcome
Create a web page for demonstration of CSS by applyingInternal/External/ Inline
style.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum 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.
Maharashtra State Board of Technical Education 57
Web Page Designing with HTML (22014)

 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.
 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 [Link] 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.

Maharashtra State Board of Technical Education 58

Web Page Designing with HTML (22014)

Ways of Linking CSS Rules to an HTML Document

There are three ways of adding CSS rules to a web page:

 Inline styles
 Internal stylesheets
 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.

Maharashtra State Board of Technical Education 59

Web Page Designing with HTML (22014)

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

/*************************************************
Save with a name ending in .css such as [Link]
*************************************************/
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="[Link]">
</head>
<body>
<h1>Example Heading</h1>
</body>

When this HTML document is loaded the link tag will cause the styles in the
file [Link] 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.

VIII Exercise
Develop a web page using CSS for following web site page.

Maharashtra State Board of Technical Education 60

Web Page Designing with HTML (22014)

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

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XV 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. Explain different ways of adding style sheets files to HTML document?
2. Differentiate between internal and inline style sheet?
3. Explain the font property with syntax.

[Space for Answer]

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
Maharashtra State Board of Technical Education 61
Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 62

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 63

Web Page Designing with HTML (22014)

Practical No.13: Install a web server and publish a website on Intranet

I Practical Significance
An Intranet is designed to be a private space. Intranet sites are accessible via the
web browser in a similar way as websites in the internet. The primary function of
a web server is to store, process and deliver web pages to clients. Internet Information
Services (IIS) is a web server runs on systems to serve requested HTML pages or files.
This practical is useful for developing skills for publishing a website on intranet using
IIS as web server.

II Relevant Program Outcomes

III Competency and Practical skills

This practical is expected to develop the following skills for the industry identified
competency ‘Develop static interactive web-sites’.
1. Install and configure a Web Server.
2. Publish a Website on Intranet

IV Relevant Course Outcomes

Publish websites on Intranet.

V Practical Outcome
Install a web server and publish a website on Intranet.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum Theoretical Background

Steps to Configure IIS to Host a Simple Intranet Website

Step 1: In Control Panel, select Programs. Open Programs and Features and
select Turn Windows features on and off.

Step2: Check the Internet Information Services checkbox.

Maharashtra State Board of Technical Education 64

Web Page Designing with HTML (22014)

Step 3: After IIS is enabled, the system will need to reboot.

Step4: Place the files or folders you want to include on your site in:
%systemdrive%\inetpub\wwwroot
Step 5: Search for “IIS” from the Start menu.
Step 6: Open Internet Information Services (IIS) Manager. From this program, you
can configure your site and server, although the default settings are typically sufficient
for publishing a basic intranet site with static HTML pages.
Step 7: The files in your \inetpub\wwwroot directory should appear under the “Default
Web Site”.

Maharashtra State Board of Technical Education 65

Web Page Designing with HTML (22014)

Step 8: Verify you can access these files with a URL path from the same computer.
For example:

[Link]

- or –

[Link]

Step 9: Verify you can access your site from another computer on the network. If you
receive a server error, try the following:

a) In Control Panel, click System and Security, click Windows Firewall, and then
click Allow a program through Windows Firewall.
b) Click Change Settings.
c) Under World Wide Web Services (HTTP), check the “Domain” checkbox.

VIII Exercise
Install a web server and publish a website that you have created on Intranet.

IX HTML Code
Not Applicable

X Resources Required

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

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used

XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

XIV Conclusion
…………………………………………………………………………………………
…………………………………………………………………………………………
Maharashtra State Board of Technical Education 66
Web Page Designing with HTML (22014)

XV 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. Write steps to change default folder in IIS.
2. Differentiate between Internet and Intranet.

[Space for Answer]

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

Maharashtra State Board of Technical Education 67

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
[Link]
2. [Link]
iis/

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 68

Web Page Designing with HTML (22014)

Practical No.14: Publish a website on Internet by acquiring space

on hosting site

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 Relevant Program Outcomes

III Competency and Practical skills

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

IV Relevant Course Outcomes

Publish website on Internet.

V Practical Outcome
Register sub-domain using free hosting service.
Publish a website on Internet.

VI Relevant Affective domain related Outcome(s)

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

VII Minimum 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,“[Link]”. User can “register” domain from a selection of
many domain registrars.

Steps to host website on internet:

1. Create ‘Gmail ID’ for which you want to create a website.
2. Go to ‘[Link]’.
3. Sign in.

Maharashtra State Board of Technical Education 69

Web Page Designing with HTML (22014)

Maharashtra State Board of Technical Education 70

Web Page Designing with HTML (22014)

4. Either choose ‘G+ account’ or ‘a blogger limited account’ and click on ‘continue to
blog’.
5. Click on ‘create new blog.’
6. Enter ‘Title’, ‘Address’, and choose ‘Theme’ (e.g. Contempo) for your website for that
page and click on ‘Create Blog’.

7. This is how interface looks.

8. Click on Test . It's next to the blog title that appears below the word "Blogger" in
the upper-left corner of the window.

Maharashtra State Board of Technical Education 71

Web Page Designing with HTML (22014)

9. Select a blog. In the drop-down menu, click on the title of the blog to which you'd like
to add a page. It will be in either the "Recent blogs" or "All blogs" section.

10. Click on Pages. It's on the left side of the window, in the first section of the menu.

Maharashtra State Board of Technical Education 72

Web Page Designing with HTML (22014)

11. Click on New page. It's a gray button near the top-center of the window.

12. Title your page. Do so in the "Page title" field at the top of the window.

 Examples of typical page titles include "About me" or "Contact," however you can use any
title you wish.

Maharashtra State Board of Technical Education 73

Web Page Designing with HTML (22014)

13. Compose your page. In the white text field below the tool bar, type the content you
want to include on your new page.
 If you prefer to compose in or edit the page's HTML code, click on HTML in the upper-left
of the window.
 To save your work as you go or a draft of your page, click on Save in the upper-right part of
the window.

14. Click on Publish. It's in the upper-right part of the window. This takes your new page
live on your blog.
 To see what your page looks like before you save it, click on Preview in the upper-right part
of the window.

Maharashtra State Board of Technical Education 74

Web Page Designing with HTML (22014)

15. Click on Layout. It's on the left side of the window in the Blogger dashboard menu.
If you haven't added it already, you need to add the Pages gadget to create links from your
main blog to any pages you create.
If the Pages gadget has already been added to your blog, you don't have to do anything
else to add your new page.

16. Scroll down and click on + Add a Gadget. Select a button in the part of the layout where
you want your page links to appear, like the cross column or a sidebar.

Maharashtra State Board of Technical Education 75

Web Page Designing with HTML (22014)

17. Scroll down and click on +. It's to the right of "Pages."

[Link] on Save. It's in the lower-left corner of the dialog box. This adds a menu of
hyperlinks to your pages from your blog, allowing readers to navigate between them.
 The default title for this menu is "Pages," but you can change it at the top of the dialog box
before you click on Save.

Maharashtra State Board of Technical Education 76

Web Page Designing with HTML (22014)

In the above example the given steps are sample procedure for reference. Teachers cansuggest
other procedures or follow other steps for hosting website on internet so as to ensure the
achievement of identified CO.

VIII Exercise
Publish a website created by student on internet.

IX HTML Code
Not Applicable

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

XII Resources Used

Sr. Specification
Name of Resource
No.
1 Computer System
with broad specifications
2 Software
3 Any other resource used
XIII Output (Take screen shot of the webpage created as output and attach it here)
…………………………………………………………………………………………
…………………………………………………………………………………………

Maharashtra State Board of Technical Education 77

Web Page Designing with HTML (22014)

XV 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. Define Domain.
2. Explain process of hosting website on Internet.
3. Differentiate between interactive and non-interactive websites.

[Space for Answer]

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

Maharashtra State Board of Technical Education 78

Web Page Designing with HTML (22014)

XVI References / Suggestions for further Reading

Software/Learning Websites
1. [Link]
2. [Link]

XVII Assessment Scheme

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

Product related: 17.5 Marks 70%

1. Quality of output achieved 30%
2. Correctness of Program codes 20%
3. Completion and submission of practical in time 10%
4. Answer to sample questions 10%
100%

Dated Sign of
Marks obtained
Teacher
Process Product
Total(25)
Related(7.5) Related(17.5)

Maharashtra State Board of Technical Education 79

Maharashtra State
Board of Technical Education, Mumbai
(Autonomous) (ISO 9001:2015) (ISO/IEC 27001:2013)

A Laborator

MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. / Ms. …………………………………………… Roll
No.
……….

Web Page Designing with HTML (22014)
Maharashtra State Board of Technical Education
i
Preface
The primary focus of any engine

Web Page Designing with HTML (22014)
Maharashtra State Board of Technical Education
ii
Programme Outcomes (POs) and Program S

Web Page Designing with HTML (22014)
Maharashtra State Board of Technical Education
iii
Practical- Course Outcome matrix
Cour

Web Page Designing with HTML (22014)
Maharashtra State Board of Technical Education
iv
List of Industry Relevant Skills
The f

Bootstrap Framework Lab Manual
No ratings yet
Bootstrap Framework Lab Manual
291 pages
Web Application Development Lab Manual
No ratings yet
Web Application Development Lab Manual
123 pages
Web Development Lab Manual for IT Students
No ratings yet
Web Development Lab Manual for IT Students
169 pages
Web Programming Lab Manual for CSE
No ratings yet
Web Programming Lab Manual for CSE
140 pages
Web Development Lab Manual for IT Students
No ratings yet
Web Development Lab Manual for IT Students
95 pages
Mobile App Development Course Guide
No ratings yet
Mobile App Development Course Guide
71 pages
CSS Lab Assignments for BCA Students
No ratings yet
CSS Lab Assignments for BCA Students
5 pages
Overview of Web Document Structure
No ratings yet
Overview of Web Document Structure
144 pages
Web Programming Lab Manual (3160713)
No ratings yet
Web Programming Lab Manual (3160713)
83 pages
Web Design and Programming Lab Manual
No ratings yet
Web Design and Programming Lab Manual
3 pages
CSS Notes & HTML Notes
100% (1)
CSS Notes & HTML Notes
5 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
129 pages
Introduction To HTML
No ratings yet
Introduction To HTML
103 pages
Introduction to JavaScript Basics
No ratings yet
Introduction to JavaScript Basics
143 pages
Lesson Plan Introduction To Basic Web Page Design - 0
No ratings yet
Lesson Plan Introduction To Basic Web Page Design - 0
9 pages
HTML Resume and Practical Exercises
100% (1)
HTML Resume and Practical Exercises
68 pages
HTML & CSS Lab Exercises Guide
No ratings yet
HTML & CSS Lab Exercises Guide
29 pages
Web Development Lab Manual for IT Students
No ratings yet
Web Development Lab Manual for IT Students
202 pages
XML Employee Data with DTD & CSS/XSL
No ratings yet
XML Employee Data with DTD & CSS/XSL
2 pages
Overview of Programming Languages
No ratings yet
Overview of Programming Languages
35 pages
.NET Programming Summative Test Guide
100% (1)
.NET Programming Summative Test Guide
4 pages
Class 9-10 Computer Science Syllabus
100% (1)
Class 9-10 Computer Science Syllabus
6 pages
HTML and CSS Assignment Overview
No ratings yet
HTML and CSS Assignment Overview
5 pages
Scratch Programming for Beginners: Lesson 1
100% (2)
Scratch Programming for Beginners: Lesson 1
10 pages
Understanding CSS and Its Usage
No ratings yet
Understanding CSS and Its Usage
47 pages
Online Quiz System Development Guide
100% (1)
Online Quiz System Development Guide
25 pages
JavaScript Tutorial Full Course - Beginner To Pro
No ratings yet
JavaScript Tutorial Full Course - Beginner To Pro
8 pages
Web Design Evaluation and HTML/CSS Guide
No ratings yet
Web Design Evaluation and HTML/CSS Guide
44 pages
HTML and CSS Web Page Design Practice
No ratings yet
HTML and CSS Web Page Design Practice
3 pages
ICT Lab Manual for CSC 101 Students
No ratings yet
ICT Lab Manual for CSC 101 Students
26 pages
JavaScript Application Design Assignments
No ratings yet
JavaScript Application Design Assignments
7 pages
Class 9-10 Computer Science Syllabus
No ratings yet
Class 9-10 Computer Science Syllabus
3 pages
Web Technology Lab Manual for CSE
No ratings yet
Web Technology Lab Manual for CSE
61 pages
JavaScript Practice Exercises with Solutions
No ratings yet
JavaScript Practice Exercises with Solutions
19 pages
HTML & CSS Practical Quiz
100% (1)
HTML & CSS Practical Quiz
6 pages
Web Page Design and Development Guide
No ratings yet
Web Page Design and Development Guide
20 pages
HTML Basics for Kids: Holiday Homework
No ratings yet
HTML Basics for Kids: Holiday Homework
5 pages
HTML Basics: Create a Simple Webpage
No ratings yet
HTML Basics: Create a Simple Webpage
3 pages
HTML and CSS Exercises for Web Development
No ratings yet
HTML and CSS Exercises for Web Development
10 pages
Scratch Activities for Beginners
No ratings yet
Scratch Activities for Beginners
21 pages
HTML & CSS Exam Guide 2025
No ratings yet
HTML & CSS Exam Guide 2025
2 pages
Understanding Dynamic HTML (DHTML)
No ratings yet
Understanding Dynamic HTML (DHTML)
135 pages
Web Designing Lab: BCA 3rd Sem Guide
100% (1)
Web Designing Lab: BCA 3rd Sem Guide
1 page
HTML and CSS Lab Exercises Guide
No ratings yet
HTML and CSS Lab Exercises Guide
41 pages
HTML and JavaScript Practice Solutions
No ratings yet
HTML and JavaScript Practice Solutions
10 pages
Web Programming Laboratory Manual
No ratings yet
Web Programming Laboratory Manual
28 pages
WT Lab: Web Technologies Certificate
No ratings yet
WT Lab: Web Technologies Certificate
68 pages
HCI Laboratory Manual for IT Students
No ratings yet
HCI Laboratory Manual for IT Students
54 pages
Python Exam Resource Guide
No ratings yet
Python Exam Resource Guide
7 pages
CSS Styling and Background Techniques
No ratings yet
CSS Styling and Background Techniques
7 pages
Web Technology Practical File Guide
No ratings yet
Web Technology Practical File Guide
32 pages
Web Application Development Lab Manual
0% (1)
Web Application Development Lab Manual
96 pages
HTML Web Page Design Laboratory Manual
No ratings yet
HTML Web Page Design Laboratory Manual
66 pages
Web Page Designing Lab Manual
No ratings yet
Web Page Designing Lab Manual
154 pages
Static Webpage Design Lab Manual
No ratings yet
Static Webpage Design Lab Manual
110 pages
Web Page Designing Lab Plan 2023
No ratings yet
Web Page Designing Lab Plan 2023
4 pages
Declare Variables in JavaScript
No ratings yet
Declare Variables in JavaScript
153 pages
Static Webpage Design Lab Manual
No ratings yet
Static Webpage Design Lab Manual
153 pages
HTML & JavaScript Lab Manual
No ratings yet
HTML & JavaScript Lab Manual
35 pages
Static HTML Page Development Guide
No ratings yet
Static HTML Page Development Guide
5 pages
Speed Control of DC Motor Using TRIAC
No ratings yet
Speed Control of DC Motor Using TRIAC
3 pages
Sugarcane Crusher: Types, Mechanism & Maintenance
No ratings yet
Sugarcane Crusher: Types, Mechanism & Maintenance
5 pages
Bangalore Residential Sale Agreement
No ratings yet
Bangalore Residential Sale Agreement
52 pages
Process Improvement Strategies Explained
No ratings yet
Process Improvement Strategies Explained
25 pages
Disaster Recovery for Banks: Zenith Case Study
No ratings yet
Disaster Recovery for Banks: Zenith Case Study
92 pages
FATF: Global Standards Against Money Laundering
No ratings yet
FATF: Global Standards Against Money Laundering
5 pages
1 - Introduction To Web Development - 1
No ratings yet
1 - Introduction To Web Development - 1
11 pages
Scania R450 A6x2/2NA Specifications
No ratings yet
Scania R450 A6x2/2NA Specifications
8 pages
Telephone Survey Advantages and Disadvantages
No ratings yet
Telephone Survey Advantages and Disadvantages
1 page
JSP Overview and Key Concepts Explained
No ratings yet
JSP Overview and Key Concepts Explained
49 pages
Sealed Linear Encoders Overview
No ratings yet
Sealed Linear Encoders Overview
8 pages
Non-Teaching Tasks Overview
No ratings yet
Non-Teaching Tasks Overview
6 pages
Codigos Cics PDF
No ratings yet
Codigos Cics PDF
586 pages
Mig 500i Welding Machine Manual
No ratings yet
Mig 500i Welding Machine Manual
23 pages
Minimizing Thermocouple Errors in DACs
No ratings yet
Minimizing Thermocouple Errors in DACs
3 pages
Community Health Nursing Overview 2024
No ratings yet
Community Health Nursing Overview 2024
120 pages
Maths Project: Price Survey Analysis
No ratings yet
Maths Project: Price Survey Analysis
18 pages
CHEM 121 Practice Questions Guide
No ratings yet
CHEM 121 Practice Questions Guide
1,017 pages
Birmingham Doctoral Research Guide
No ratings yet
Birmingham Doctoral Research Guide
62 pages
Document Formatting and Styling Guide
No ratings yet
Document Formatting and Styling Guide
2 pages
QR Code - Wikipedia
No ratings yet
QR Code - Wikipedia
19 pages
January 2020 Crypto Exchange Review
No ratings yet
January 2020 Crypto Exchange Review
22 pages
e-Governance Systems: Features & Frameworks
No ratings yet
e-Governance Systems: Features & Frameworks
14 pages
External Growth Strategies Explained
100% (1)
External Growth Strategies Explained
10 pages
Vitamin C (VC) Colorimetric Assay Kit: 8th Edition, Revised in February, 2018
No ratings yet
Vitamin C (VC) Colorimetric Assay Kit: 8th Edition, Revised in February, 2018
5 pages
Theresa Mallen: Liposomal Drug Delivery
No ratings yet
Theresa Mallen: Liposomal Drug Delivery
7 pages
Provia Mahlong: Bcom Financial Accounting CV
No ratings yet
Provia Mahlong: Bcom Financial Accounting CV
2 pages
Consumer Behavior in Luxury Marketing
No ratings yet
Consumer Behavior in Luxury Marketing
2 pages
2024 - SE - Lec03 - Advanced MOSCAP Theory
No ratings yet
2024 - SE - Lec03 - Advanced MOSCAP Theory
20 pages
Drilling Fluids Testing Equipment Guide
No ratings yet
Drilling Fluids Testing Equipment Guide
2 pages