SHRI G.P.M.
DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Experiment No.—1 : Use of Basic and Advanced Tags, Lists and Backgrounds.
Aim:
a. Understanding elements, Tags and basic structure of HTML files.
b. Design a web page using basic and advanced text formatting tags.
c. Design a web page using ordered, unordered list and description list.
d. Design a web page by choosing Background and Foreground Colors
e. Design a web page using Nested list and special characters.
f. Write an HTML code to display your CV on a web page.
Tools Used:
Text Editor: Any text editor like Sublime Text, Visual Studio Code, or Notepad++ to write HTML code.
Web Browser: Chrome, Firefox, or any other browser to preview and test the HTML page.
Developer Tools (optional): Inspect element in the browser to debug and view the page structure.
Learning Objectives:
1. Understand the basic structure of an HTML document.
2. Learn how to use basic and advanced text formatting tags in HTML.
3. Create different types of lists (ordered, unordered, and description) using HTML.
4. Implement background and foreground colors in a webpage.
5. Design a webpage using nested lists and special characters.
6. Write a simple HTML webpage to display their CV.
7. Apply proper tags and structures to create a functional and attractive webpage.
Theory:
1. Basic Structure of HTML:
An HTML document is structured with the following essential elements:
• <!DOCTYPE html>: Declares the document type and version of HTML.
• <html>: The root element that contains all HTML content.
• <head>: Contains metadata like the title of the page, link to stylesheets, etc.
• <body>: Contains the content displayed on the webpage, such as headings, paragraphs, and images.
2. Basic and Advanced Text Formatting Tags:
• Basic tags: <b> (bold), <i> (italic), <u> (underline), <mark> (highlight).
• Advanced tags: <strong> (important), <em> (emphasized), <sub> (subscript), <sup> (superscript).
These tags are used to format and style text, making the content more readable or giving it more meaning.
1
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
3. Lists in HTML:
• Ordered List: <ol> for creating numbered lists, and <li> for each list item.
• Unordered List: <ul> for creating bullet-point lists, and <li> for each list item.
• Description List: <dl> is used to define terms and their descriptions. <dt> defines the term, and <dd> defines
the description.
4. Background and Foreground Colors:
• Background Color: Set using the background-color property in the style attribute of a tag or using CSS.
• Foreground (Text) Color: Set using the color property in the style attribute.
5. Nested Lists and Special Characters:
• Nested Lists: A list inside another list (either ordered or unordered).
• Special Characters: Special characters like <, >, &, and others can be represented using HTML character
entities like <, >, and &.
6. HTML Code for Displaying CV:
A simple CV webpage uses basic HTML elements like headings, paragraphs, and lists to present
information such as contact details, education, skills, and experience. It's a practical application of many
HTML tags.
CODE:
Code- a :
<!DOCTYPE html>
2
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<html lang="en">
<head>
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a basic HTML structure example.</p>
</body>
</html>
Code-b :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Formatting</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<p><strong>This text is bold</strong> and <em>this text is italicized</em>.</p>
<p><u>This text is underlined</u> and <mark>this text is highlighted</mark>.</p>
<p><small>This text is small</small> and <big>This text is big</big>.</p>
</body>
</html>
Code- c :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lists Example</title>
</head>
3
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<body>
<h1>Types of Lists</h1>
<!-- Unordered List -->
<h2>Unordered List:</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered List -->
<h2>Ordered List:</h2>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Description List -->
<h2>Description List:</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A style sheet language used for describing the presentation of a document</dd>
</dl>
</body>
</html>
Code- d :
<!DOCTYPE html>
4
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<html lang="en">
<head>
<title>Background and Foreground Colors</title>
<style>
body {
background-color: #f0f0f0; /* Light gray background */
color: #333333; /* Dark text color */
h1 {
color: #0066cc; /* Blue text color */
</style>
</head>
<body>
<h1>Web Page with Background and Foreground Colors</h1>
<p>This web page has customized background and text colors.</p>
</body>
</html>
Code- e :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested List and Special Characters</title>
</head>
<body>
<h1>Nested List and Special Characters</h1>
<!-- Nested List -->
<ul>
5
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<!-- Special Characters -->
<p>Some special characters: & < > ©</p>
</body>
</html>
Code- f :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My CV</title>
</head>
<body>
<h1>John Doe - Curriculum Vitae</h1>
<h2>Contact Information</h2>
<p>Email: john.doe@example.com</p>
<p>Phone: +123456789</p>
6
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<h2>Education</h2>
<ul>
<li>Bachelor's in Computer Science - University of ABC</li>
<li>Master's in Information Technology - University of XYZ</li>
</ul>
<h2>Experience</h2>
<ul>
<li>Software Developer at Tech Corp</li>
<li>Web Designer at Web Solutions</li>
</ul>
</body>
</html>
OUTPUT:
Output- a: Output- b:
Output- c : Output- d :
7
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Output- e : Output- f :
Learning Outcomes:
1. The basic structure of an HTML document is understood.
2. Basic and advanced text formatting tags in HTML are learned.
3. Different types of lists (ordered, unordered, and description) are created using HTML.
4. Background and foreground colors are implemented in a webpage.
5. A webpage is designed using nested lists and special characters.
6. A simple HTML webpage is written to display the CV.
7. Proper tags and structures are applied to create a functional and attractive webpage.
Course Outcomes:
• Be able to design basic static webpages using HTML.
• Understand the structure and syntax of HTML tags.
• Gain familiarity with basic text formatting, lists, and colors.
• Be able to implement special characters and nested lists for organizing content.
• Have hands-on experience in designing a personal CV webpage.
• Understand the relationship between HTML, CSS, and web development.
Conclusion:
a. Understanding elements, Tags and basic structure of HTML files. Practical has been done successfully.
b. Design a web page using basic and advanced text formatting tags. Practical has been done successfully.
c. Design a web page using ordered, unordered list and description list. Practical has been done successfully.
d. Design a web page by choosing Background and Foreground Colors. Practical has been done successfully.
e. Design a web page using Nested list and special characters. Practical has been done successfully.
f. Write an HTML code to display your CV on a web page. Practical has been done successfully.
Viva Questions:
1. What is HTML and why is it important in web development?
2. What is the purpose of the <head> and <body> tags in an HTML document?
3. Explain the difference between an ordered list (<ol>) and an unordered list (<ul>)?
4. What is a description list in HTML? How do you use it?
8
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
5. How can you change the background and text color in an HTML page?
6. What is a nested list? Provide an example.
7. What are special characters in HTML and why are they important?
8. What is the purpose of the <strong> and <em> tags in HTML?
9. How would you structure a webpage to display your personal CV using HTML?
10. What do you understand by the term "HTML tags"? Give an example.
For Faculty use:
Correction Parameters Formative Timely Completion of Attendance Learning
Assessment[40%] Practical[40%] Attitude[20%]
9
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Experiment No.—2 : Creating Hyperlinks, Anchors and style sheets.
Aim:
a. Design a web page with links to different pages and allow navigation between web pages.
b. Design a web page that automatically redirects the user to Other Content.
c. Creating Hyperlinking to an E-Mail Address.
d. Design a web page for creating Styles for Nested Tags.
e. Design a web page by applying Styles to Hyperlinks.
f. Design a web page by Creating and Linking to External Style Sheets.
Tool Used:
1. Text Editor (e.g., Sublime Text, Visual Studio Code, Notepad++): For writing HTML, CSS, and JavaScript code.
2. Web Browser (e.g., Google Chrome, Mozilla Firefox): For testing and viewing the web pages.
3. CSS (Cascading Style Sheets): For styling the web pages.
4. HTML (HyperText Markup Language): For creating the structure of web pages.
Learning Objectives:
1. Understand how to create and use hyperlinks for navigation.
2. Learn to design web pages with automatic redirects.
3. Explore the process of linking email addresses within a webpage.
4. Learn how to apply styles to nested HTML tags.
5. Create and manage styles specifically for hyperlinks.
6. Understand how to create and link to external style sheets.
Theory:
1. Creating Hyperlinks (Anchor Tags):
o Hyperlinks are the foundation of web navigation. The anchor (<a>) tag is used to link a web page
to another location or web page.
o Example: <a href="https://www.example.com">Visit Example</a>
2. Automatic Redirection:
o HTML provides the <meta> tag to automatically redirect users to another URL after a certain
time interval.
o Example: <meta http-equiv="refresh" content="5;url=https://www.example.com" /> (Redirects
after 5 seconds)
3. Hyperlinking to an E-Mail Address:
o The mailto: protocol is used to create a hyperlink that opens the user's email client with a pre-
filled recipient address.
10
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
o Example: <a href="mailto:someone@example.com">Send Email</a>
4. Styles for Nested Tags:
o CSS allows the styling of nested HTML tags by using descendant selectors or specific class/id
selectors.
o Example: div p { color: blue; }
5. Styling Hyperlinks:
o Hyperlinks can be styled in CSS using pseudo-classes such as :link, :visited, :hover, and :active to
define different states of the link.
o Example: a:hover { color: red; }
6. External Style Sheets:
o External style sheets are used to separate HTML content from CSS styling. This improves
maintainability and reduces redundancy.
o Example: <link rel="stylesheet" type="text/css" href="styles.css" />
CODE:
Code- a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation Links</title>
</head>
<body>
<h1>Navigation Example</h1>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
11
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Code- b:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="3; url=https://www.example.com">
<title>Redirecting...</title>
</head>
<body>
<p>You are being redirected to another page. If not, <a href="https://www.example.com">click
here</a></p>
</body>
</html>
Code- c:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Email Link</title>
</head>
<body>
<h1>Contact Me</h1>
<p>You can email me at <a href="mailto:john.doe@example.com">john.doe@example.com</a>.</p>
</body>
</html>
Code- d:
<!DOCTYPE html>
<html lang="en">
12
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<head>
<title>Nested Tags with Styles</title>
<style>
p{
font-size: 16px;
color: #333;
p strong {
font-weight: bold;
color: red;
p em {
font-style: italic;
color: green;
</style>
</head>
<body>
<h1>Styled Nested Tags</h1>
<p><strong>This is bold text</strong> and <em>This is italic text</em>.</p>
</body>
</html>
Code- e:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Hyperlinks</title>
13
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<style>
a:link {
color: blue;
a:visited {
color: purple;
a:hover {
color: red;
a:active {
color: orange;
</style>
</head>
<body>
<h1>Styled Hyperlinks</h1>
<p><a href="https://www.example.com">Visit Example</a></p>
</body>
</html>
Code- f:
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" href="styles.css">
</head>
14
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<body>
<h1>External Style Sheet Example</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
h1 {
color: #0066cc;
OUTPUT:
Output- a: Output- b:
Output- c: Output- d:
15
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Output- e: Output- f:
Learning Outcomes :
1. Hyperlinks for navigation are created and used to understand their purpose.
2. Web pages with automatic redirects are designed to learn the process.
3. The process of linking email addresses within a webpage is explored.
4. Styles are applied to nested HTML tags to learn how to manage them.
5. Styles specifically for hyperlinks are created and managed.
6. External style sheets are created and linked to understand their usage.
Course Outcomes:
➢ Knowledge of Web Development: Students will gain a strong foundation in web development technologies
such as HTML and CSS.
➢ Web Page Navigation: Students will be able to create interactive and navigable web pages using hyperlinks
and other navigation tools.
➢ Redirection Mechanisms: Students will learn how to redirect users from one page to another using various
methods.
➢ Email Linking: Students will be able to incorporate email functionalities in their web pages.
➢ Advanced Styling: Students will learn to create aesthetically pleasing and functional web pages using CSS for
both static and interactive content.
➢ Web Page Maintenance: Students will understand how to organize and manage external stylesheets for
scalable web design.
Conclusion:
a. Design a web page with links to different pages and allow navigation between web pages. Practical has
been done successfully.
b. Design a web page that automatically redirects the user to Other Content. Practical has been done
successfully.
c. Creating Hyperlinking to an E-Mail Address. Practical has been done successfully.
16
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
d. Design a web page for creating Styles for Nested Tags. Practical has been done successfully.
e. Design a web page by applying Styles to Hyperlinks. Practical has been done successfully.
f. Design a web page by Creating and Linking to External Style Sheets. Practical has been done successfully.
Viva Questions:
1. What is the purpose of the <a> tag in HTML?
2. How can you redirect a user to another page after a few seconds using HTML?
3. What is the syntax for linking to an email address in HTML?
4. Explain how CSS can be used to style nested HTML tags.
5. What are the different states of a hyperlink, and how do you style them in CSS?
6. What is the advantage of using an external style sheet in web development?
For Faculty use:
Correction Parameters Formative Timely Completion of Attendance Learning
Assessment[40%] Practical[40%] Attitude[20%]
17
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Experiment No.—3 : Formatting Text and Paragraph by Using Style Sheets and displaying graphics.
Aim:
a. Design a web page by using text formatting tags.
b. Design a web page using Indenting Paragraphs, Applying Border to a Paragraph and Specifying Horizontal
Alignment of a Paragraph.
c. Implement a web page by creating inline spans and adjusting space between lines.
d. Implement a web page by inserting a image and controlling the image size and padding.
e. Design a web page by making image as a hyperlink.
f. Develop a web page by using thumbnail graphics and also implement text for graphics
Tools Used:
1. Text Editor: Any code editor (e.g., Visual Studio Code, Sublime Text, Notepad++).
2. Web Browser: For previewing the web page (e.g., Google Chrome, Mozilla Firefox).
3. HTML: The basic structure and formatting of web content.
4. CSS: For styling, text formatting, and image control.
5. Graphics Software: (Optional) Tools like Photoshop or GIMP for creating and editing images used in the
webpage.
Learning Objectives:
1. Understand the basic structure of HTML and CSS.
2. Learn how to format text using HTML tags for bold, italics, paragraphs, headers, etc.
3. Master the use of CSS for styling web elements, including borders, text alignment, and indentation.
4. Gain the ability to work with inline elements like <span> for precise styling.
5. Learn to insert and manipulate images in a webpage, including resizing and adding padding.
6. Implement image hyperlinks to create interactive elements on a webpage.
7. Develop an understanding of how to use thumbnails and text-based descriptions for images.
8. Improve the ability to design web pages with structured layouts and visual aesthetics.
Theory:
1. Text Formatting in HTML:
o HTML provides various tags to format text. For example:
▪ <b>: Bold text.
▪ <i>: Italics text.
▪ <u>: Underlined text.
18
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
▪ <h1> - <h6>: Header tags for creating various levels of headings.
▪ <p>: Paragraph tag for text block organization.
2. CSS for Paragraph Styling:
o Indentation: text-indent property to control the start of a paragraph.
o Borders: The border property applies borders to any block element, including paragraphs.
o Alignment: The text-align property helps in horizontal alignment (left, center, right).
3. Inline Spans and Line Spacing:
o The <span> tag is an inline element used for styling small portions of text.
o The line-height property in CSS adjusts the space between lines in a paragraph.
4. Image Handling in HTML:
o The <img> tag is used to insert images.
o width and height properties in CSS or the width and height attributes in the <img> tag can be
used to control the size.
o Padding can be applied to images using the padding property in CSS.
5. Image as a Hyperlink:
o Use the <a> tag to wrap an image and make it clickable, linking to another webpage or resource.
6. Thumbnail Graphics:
o Thumbnails are smaller versions of larger images used for previewing. They are typically linked to
full-sized images.
CODE:
Code- a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Formatting</title>
</head>
<body>
19
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<h1>Text Formatting Example</h1>
<p><strong>Bold text</strong> and <em>italic text</em> are common formatting styles.</p>
</body>
</html>
Code- b:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph Formatting</title>
<style>
p{
border: 2px solid #000;
padding: 10px;
text-align: center;
</style>
</head>
<body>
<h1>Paragraph Formatting</h1>
<p>This paragraph has a border, padding, and centered alignment.</p>
</body>
</html>
Code- c:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Spans and Line Spacing</title>
20
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<style>
span {
font-weight: bold;
color: red;
p{
line-height: 1.8;
</style>
</head>
<body>
<h1>Inline Spans and Line Spacing</h1>
<p>This is an example of <span>inline span text</span> and adjusted line spacing.</p>
</body>
</html>
Code- d:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Formatting</title>
<style>
img {
width: 200px;
height: auto;
padding: 20px;
</style>
21
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
</head>
<body>
<h1>Image Formatting Example</h1>
<img src="example.jpg" alt="Example Image">
</body>
</html>
Code- e:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image as Link</title>
</head>
<body>
<h1>Click the Image</h1>
<a href="https://www.example.com">
<img src="example.jpg" alt="Clickable Image">
</a>
</body>
</html>
Code- f:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thumbnail Graphics</title>
</head>
<body>
<h1>Thumbnail Graphics</h1>
22
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
<a href="full-image.jpg">
<img src="thumbnail.jpg" alt="Thumbnail Image" width="100">
</a>
<p>Click on the thumbnail to view the full-size image.</p>
</body>
</html>
OUTPUT:
Output- a: Output- b:
Output- c: Output- d:
Output- e: Output- f:
23
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
Learning Outcomes:
1. The basic structure of HTML and CSS is understood.
2. Text is formatted using HTML tags for bold, italics, paragraphs, headers, etc.
3. The use of CSS for styling web elements, including borders, text alignment, and indentation, is mastered.
4. Inline elements like <span> are worked with for precise styling.
5. Images are inserted and manipulated in a webpage, including resizing and adding padding.
6. Image hyperlinks are implemented to create interactive elements on a webpage.
7. An understanding of how to use thumbnails and text-based descriptions for images is developed.
8. The ability to design web pages with structured layouts and visual aesthetics is improved.
Course Outcomes:
1. Web Page Design: Students will be able to design and format web pages effectively using HTML and CSS.
2. Text and Image Styling: Students will learn to apply various styling techniques such as text alignment, paragraph
indentation, borders, and image manipulation.
3. Interactive Web Pages: Students will implement functionality such as clickable images and text-based graphics for better
interactivity.
4. Responsive Web Elements: Learners will gain the skills to handle images, text, and layouts in a responsive and visually
appealing way.
Conclusion:
a. Design a web page by using text formatting tags. Practical has been done successfully.
b. Design a web page using Indenting Paragraphs, Applying Border to a Paragraph and Specifying Horizontal
Alignment of a Paragraph. Practical has been done successfully.
c. Implement a web page by creating inline spans and adjusting space between lines. Practical has been done
successfully
d. Implement a web page by inserting a image and controlling the image size and padding. Practical has been
done successfully.
e. Design a web page by making image as a hyperlink. Practical has been done successfully.
f. Develop a web page by using thumbnail graphics and also implement text for graphics. Practical has been
done successfully.
Viva Questions:
a. What are the different text formatting tags in HTML?
b. Explain how to apply borders to a paragraph using CSS.
c. What is the difference between <div> and <span> tags in HTML?
d. How do you resize an image using CSS?
e. How can you make an image a clickable hyperlink in HTML?
f. What is a thumbnail graphic and how is it used in web design?
g. How can you adjust the line spacing between paragraphs?
h. What is the significance of the text-align property in CSS?
i. What is the role of padding in image styling?
j. How do you apply text indentation in HTML and CSS?
24
SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE
Department of Computer
Affiliated to University of Mumbai
For Faculty use:
Correction Parameters Formative Timely Completion of Attendance Learning
Assessment[40%] Practical[40%] Attitude[20%]
25
