[go: up one dir, main page]
Scribd
Upload
202 views46 pages

WT File

The document is a practical file for a Web Technologies course, detailing various web development exercises to be completed by a student named Devansh. It includes tasks such as creating web pages with different formatting styles, designing tables, and implementing various HTML and CSS features. Each practical task is accompanied by specific coding requirements and examples to guide the student in their assignments.

Uploaded by

ishantkochar11
Copyright
© © All Rights Reserved
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
202 views46 pages

WT File

The document is a practical file for a Web Technologies course, detailing various web development exercises to be completed by a student named Devansh. It includes tasks such as creating web pages with different formatting styles, designing tables, and implementing various HTML and CSS features. Each practical task is accompanied by specific coding requirements and examples to guide the student in their assignments.

Uploaded by

ishantkochar11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

MAHARAJA SURAJMAL INSTITUTE

Affiliated to GGSIP University & NAAC 'A' grade


accredited.

DEPARTMENT OF COMPUTER
APPLICATIONS

WEB TECHNOLOGIES
PRACTICAL FILE
SUBJECT CODE- BCA 105P
SUBMITTED BY: SUBMITTED TO:

Name: Devansh Dr. Ravinder Kajal


Enroll no: Associate Professor
Course: BCA-I-A MSI
(Shift 1)
Index
S. No. Practicals Sign
1 Make following five different web pages (Formatting Styles, Font
Styles, Marquee, Other tags, Hyperlinks etc.)

2 Create an unordered list nested inside ordered list and apply


formatting (image, marquee, font styles, horizontal line).

3 Design a table with row span and column span and make use of
attributes (colspan, rowspan, cellpadding, cellspacing etc.).

4 Design a frame with menu and explanation sections.


5 Make an image map using shape, coords, href attributes linking to
details with proper styling.

6 Design Student registration form for admission in college.


7 Create a webpage and show the usage of inline and external style
sheets.

8 Create a webpage with a background image and apply all styling


attributes.

9 Create a webpage showing the usage of font styling attributes.


10 Create a webpage and apply all text styling attributes using Id and
class selectors.

11 Create a webpage and implement all list styling attributes.


12 Create a webpage with three equal columns.
13 Create a webpage containing bootstrap table.
14 Create a webpage containing various types of images.
15 Create a webpage containing various types of buttons.
16 Create a webpage containing various typography classes.
17 Create a webpage displaying headings using Jumbotron.
18 Write a program showing usage of inbuilt functions and dialog
boxes.

19 Write a program showing usage of alert box and confirm box.


20 Write a program implementing event handling using onclick,
onmouseover, onmouseout events.

21 Write a program showing usage of date, math, and string object


functions.
Q1.

Make following five different web pages:


i. Formatting Styles and Headings: Include Bold, Italics, Underline, Strike, Subscript,
Superscript, and all six types of headings
ii. Font Styles and Image tag
iii. Marquee: Move text, image and hyperlink
iv. Other tags: br, hr, pre, p

• Insert a background image on homepage


• Make all topics as hyperlinks and go to some other page for description
• Insert a marquee showing HTML tutorial as moving text
• Use different font styles for different topics
• On every page, make a hyperlink for going back to homepage and internal link
also

CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
font-family: Arial, sans-serif;
color: white;
}
.container {
text-align: center;
margin-top: 50px;
}
a{
color: rgb(8, 80, 105);
text-decoration: none;
font-size: 20px;
margin: 10px;
}
.marquee {
font-size: 30px;
color: rgb(192, 53, 11);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to HTML Tutorials</h1>
<p class="marquee"><marquee>HTML Tutorial - Learn the basics of web
development!</marquee></p>

<h2>Topics:</h2>
<ul>
<li><a href="page1.html">Formatting Styles and Headings</a></li>
<li><a href="page2.html">Font Styles and Image Tag</a></li>
<li><a href="page3.html">Marquee: Move Text, Image, and Hyperlink</a></li>
<li><a href="page4.html">Other Tags: br, hr, pre, p</a></li>
</ul>
</div>
</body>
</html>

OUTPUT

Page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatting Styles and Headings</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: #f0f0f0;
}
h1 {
font-family: 'Verdana', sans-serif;
}
a{
color: darkblue;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Formatting Styles and Headings</h1>
<ul>
<li><a href="index.html">Go Back to Homepage</a></li>
<li><a href="#bold">Bold Text</a></li>
<li><a href="#italic">Italic Text</a></li>
<li><a href="#underline">Underlined Text</a></li>
<li><a href="#strike">Strikethrough Text</a></li>
<li><a href="#subscript">Subscript Text</a></li>
<li><a href="#superscript">Superscript Text</a></li>
<li><a href="#headings">Headings</a></li>
</ul>

<h2 id="bold"><b>Bold Text Example</b></h2>


<p>This is an example of <b>bold text</b>.</p>

<h2 id="italic"><i>Italic Text Example</i></h2>


<p>This is an example of <i>italic text</i>.</p>

<h2 id="underline"><u>Underlined Text Example</u></h2>


<p>This is an example of <u>underlined text</u>.</p>

<h2 id="strike"><strike>Strikethrough Text Example</strike></h2>


<p>This is an example of <strike>strikethrough text</strike>.</p>

<h2 id="subscript"><sub>Subscript Example</sub></h2>


<p>This is an example of subscript: H<sub>2</sub>O.</p>

<h2 id="superscript"><sup>Superscript Example</sup></h2>


<p>This is an example of superscript: 2<sup>3</sup>.</p>

<h2 id="headings">Headings</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

OUTPUT
Page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Styles and Image Tag</title>
<style>
body {
font-family: 'Georgia', serif;
background-color: #e8e8e8;
}
h1 {
font-family: 'Arial', sans-serif;
color: darkgreen;
}
</style>
</head>
<body>
<h1>Font Styles and Image Tag</h1>
<ul>
<li><a href="index.html">Go Back to Homepage</a></li>
<li><a href="page1.html">Formatting Styles and Headings</a></li>
</ul>

<h2>Font Style Example</h2>


<p style="font-family: 'Times New Roman', serif;">This is an example of a <i>Times New
Roman</i> font style.</p>

<h2>Image Tag Example</h2>


<p>Here's an example of an image tag:</p>
<img src="example-image.jpg" alt="Example Image" width="300">

</body>
</html>

OUTPUT
Page3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee: Move Text, Image, and Hyperlink</title>
<style>
body {
font-family: 'Tahoma', sans-serif;
background-color: #e0f7fa;
}
h1 {
font-family: 'Verdana', sans-serif;
}
</style>
</head>
<body>
<h1>Marquee: Move Text, Image, and Hyperlink</h1>
<ul>
<li><a href="index.html">Go Back to Homepage</a></li>
<li><a href="page1.html">Formatting Styles and Headings</a></li>
</ul>

<h2>Text Marquee</h2>
<marquee>This is a scrolling text using the marquee tag!</marquee>

<h2>Image Marquee</h2>
<marquee><img src="example-image.jpg" alt="Example Image" width="200"></marquee>

<h2>Hyperlink Marquee</h2>
<marquee><a href="https://www.w3schools.com" target="_blank">Visit W3Schools for more
HTML Tutorials!</a></marquee>

</body>
</html>

OUTPUT

Page4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Other Tags: br, hr, pre, p</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #fafafa;
}
</style>
</head>
<body>
<h1>Other Tags: br, hr, pre, p</h1>
<ul>
<li><a href="index.html">Go Back to Homepage</a></li>
<li><a href="page1.html">Formatting Styles and Headings</a></li>
</ul>

<h2>Break Line (br) Tag Example</h2>


<p>This is a paragraph.<br>And here's a line break using the <code>&lt;br&gt;</code>
tag.</p>

<h2>Horizontal Rule (hr) Tag Example</h2>


<p>This is an example of a horizontal line below:</p>
<hr>

<h2>Preformatted Text (pre) Tag Example</h2>


<pre>
This is preformatted text.
It maintains white spaces and line breaks.
</pre>

<h2>Paragraph (p) Tag Example</h2>


<p>This is an example of a <code>&lt;p&gt;</code> tag used to define a paragraph.</p>

</body>
</html>

OUTPUT
Q2.

Create an unordered list nested inside an ordered list and apply the
following:

• Insert an image of Main item on top right corner of webpage


• Display heading as a marquee
• Use different font styles and colors for different ordered list items
• Insert horizontal line after each ordered item

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List with Nested Unordered List</title>
<style>
.image-container img {
position: absolute;
top: 20px;
right: 20px;
width: 150px;
height: auto;
}

.marquee-heading {
font-size: 24px;
font-weight: bold;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}

.marquee-heading marquee {
font-family: 'Arial', sans-serif;
color: #ff5733;
font-size: 36px;
}

ol {
font-family: 'Verdana', sans-serif;
padding: 20px;
}

ol li {
margin: 15px 0;
font-size: 18px;
padding: 10px;
}

ol li:nth-child(1) {
color: #2e8b57;
font-style: italic;
}

ol li:nth-child(2) {
color: #1e90ff;
font-weight: bold;
}

ol li:nth-child(3) {
color: #ff6347;
font-size: 20px;
}

ol li:nth-child(4) {
color: #8a2be2;
text-transform: uppercase;
}

ol li:nth-child(5) {
color: #ff1493;
font-family: 'Courier New', Courier, monospace;
}

ol li::after {
content: "";
display: block;
border-top: 2px solid #ccc;
margin-top: 10px;
}

ul {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/150" alt="Main item">
</div>

<div class="marquee-heading">
<marquee>Welcome to the Ordered List Example with Nested Unordered List</marquee>
</div>

<ol>
<li>First Item
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
<li>Second Item
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
<li>Third Item
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
<li>Fourth Item
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
<li>Fifth Item
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ol>
</body>
</html>

OUTPUT
Q3.
Design a table with row span and column span and make use of
attributes: colspan, rowspan, width, height, cellpadding, cellspacing
etc.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Rowspan and Colspan</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 2px solid #000;
padding: 15px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<table cellpadding="10" cellspacing="5">


<thead>
<tr>
<th colspan="3" width="50%">Main Header (Spanning 3 Columns)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" height="100">Row 1, Column 1 (Spanning 2 Rows)</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td colspan="2" height="100">Row 2, Column 2 and 3 (Spanning 2 Columns)</td>
</tr>
<tr>
<td colspan="3" height="100">Row 3, All Columns (Spanning 3 Columns)</td>
</tr>
</tbody>
</table>

</body>
</html>

OUTPUT
Q4.
Design following frame:

MAIN MENU Explanation


Topic 1 ---------
Topic 2 ---------
Topic 3 View Example
Example

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Layout</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
margin: 0;
}

.main-menu {
width: 250px;
background-color: #f4f4f4;
padding: 20px;
border-right: 2px solid #ccc;
}

.main-menu h2 {
text-align: center;
}

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

.main-menu li {
margin: 15px 0;
}

.main-menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
padding: 8px 10px;
background-color: #e0e0e0;
border-radius: 4px;
}

.main-menu li a:hover {
background-color: #ddd;
}

.content {
flex-grow: 1;
padding: 20px;
background-color: #f9f9f9;
}

.content h2 {
margin-top: 0;
}

.example {
margin-top: 20px;
padding: 20px;
background-color: #e0f7fa;
border: 1px solid #00bcd4;
border-radius: 8px;
}
</style>
</head>
<body>

<div class="main-menu">
<h2>Main Menu</h2>
<ul>
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
</ul>
</div>

<div class="content">
<h2>Explanation</h2>
<hr>
<p>This section will provide detailed information regarding the selected topic. The content
will expand based on the topic selected from the main menu.</p>

<div class="example">
<h3>View Example</h3>
<p>This is an example related to the selected topic.</p>
</div>
</div>

</body>
</html
OUTPUT
Q5.
Make an image map showing the usage of shape, coords, href
attributes in map definition. Link each hotspot to their respective
details. Webpages should have background color, images, font styles,
and headings.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>India States Image Map</title>
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
text-align: center;
}

h1 {
color: #2c3e50;
margin-top: 30px;
}

p{
font-size: 18px;
color: #333;
}

img {
max-width: 90%;
height: auto;
border: 3px solid #333;
}

.note {
margin-top: 20px;
font-style: italic;
color: #555;
}
</style>
</head>
<body>

<h1>Interactive Image Map of Indian States</h1>


<p>Click on the highlighted regions to visit the official state websites.</p>

<!-- Map Image -->


<img src="india-map.jpg" alt="Map of India" usemap="#india">

<!-- Map Definition -->


<map name="india">
<!-- Rajasthan -->
<area shape="rect" coords="146,309,276,380" href="https://rajasthan.gov.in/" alt="Rajasthan"
title="visit Rajasthan">

<!-- Uttar Pradesh -->


<area shape="rect" coords="383,317,465,373" href="https://up.gov.in/" alt="Uttar Pradesh"
title="visit Uttar Pradesh">

<!-- Madhya Pradesh -->


<area shape="rect" coords="254,503,426,422" href="https://mp.gov.in/" alt="Madhya Pradesh"
title="Madhya Pradesh">

<!-- Karnataka -->


<area shape="rect" coords="229,670,293,779" href="https://www.karnataka.gov.in/"
alt="Karnataka" title="karnataka">

<!-- Jammu & Kashmir -->


<area shape="rect" coords="243,54,371,120" href="https://jk.gov.in/" alt="Jammu & Kashmir"
title="Jammu & Kashmir">
</map>

<p class="note">This example shows usage of <code>shape</code>, <code>coords</code>, and


<code>href</code> attributes in an image map.</p>

</body>
</html>
OUTPUT
Q6.
Design Student registration form for admission in college

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Admission Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<h1>STUDENT REGISTRATION</h1>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email Address</label>


<input type="email" id="email" name="email" required>

<label for="phone">Phone Number</label>


<input type="tel" id="phone" name="phone" required>

<label for="dob">Date of Birth</label>


<input type="date" id="dob" name="dob" required>

<label for="course">Select Course</label>


<select id="course" name="course" required>
<option value="">--Select a Course--</option>
<option value="cs">Computer Science</option>
<option value="bca">Bachelor Of Computer Application</option>
<option value="me">Mechanical Engineering</option>
<option value="ce">Civil Engineering</option>
</select>

<label for="address">Address</label>
<textarea id="address" name="address" rows="4" required></textarea>

<button type="submit">Register</button>
</form>
</div>

</body>
</html>

CSS
body {
font-family: Arial, sans-serif;
background-color: #def7d9;
margin: 0;
padding: 0;
}

.container {
width: 350px;
margin: 50px auto;
padding: 40px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

label {
display: block;
margin: 10px 0 5px;
color: #555;
}

input, select, textarea {


width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}

input:focus, select:focus, textarea:focus {


border-color: #007bff;
outline: none;
}

button {
width: 100%;
padding: 10px;
background-color:rgb(36, 235, 36);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

OUTPUT
Q7.
Create a webpage and show the usage of inline and external
stylesheet.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline and External Styles</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1 class="header">Demonstration of Inline and External Styles</h1>

<div class="external-style">
<p>This paragraph is styled using an external stylesheet.</p>
</div>

<p style="color: red; font-size: 20px;">This paragraph is styled using inline CSS.</p>

<div class="external-style">
<p>This text is also styled using the external stylesheet. It is within a div with the 'external-
style' class.</p>
</div>

</body>
</html>

External CSS for styling


Style.CSS

body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

h1.header {
text-align: center;
color: #333;
margin-top: 50px;
}

.external-style {
background-color: #3498db;
color: white;
padding: 20px;
margin: 10px 0;
border-radius: 5px;
}

OUTPUT
Q8.
Create a webpage containing a background image and apply all
background styling attributes.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Styling Attributes</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-image: url('https://www.w3schools.com/w3images/forest.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
line-height: 1.6;
padding: 40px;
}

h1 {
text-align: center;
font-size: 3em;
margin-bottom: 20px;
}

.background-properties {
margin-top: 30px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}

.property {
margin-bottom: 15px;
font-size: 1.2em;
}

.property span {
font-weight: bold;
color: #f39c12;
}
.property-code {
font-family: 'Courier New', Courier, monospace;
font-size: 1em;
color: #ecf0f1;
}

.background-color {
background-color: rgba(0, 0, 0, 0.4);
}

.background-image {
background-image: url('https://www.w3schools.com/w3images/lights.jpg');
}

.background-position {
background-position: bottom right;
}

.background-size {
background-size: contain;
}

.background-repeat {
background-repeat: repeat-x;
}

.background-attachment {
background-attachment: local;
}
</style>
</head>
<body>

<h1>Background Styling Attributes</h1>

<div class="background-properties">
<div class="property background-color">
<p><span>background-color</span>: Applied as a semi-transparent black background to
the section.</p>
<p class="property-code">background-color: rgba(0, 0, 0, 0.4);</p>
</div>

<div class="property background-image">


<p><span>background-image</span>: Displays a background image. (Changed on
hover)</p>
<p class="property-code">background-image:
url('https://www.w3schools.com/w3images/lights.jpg');</p>
</div>

<div class="property background-position">


<p><span>background-position</span>: Positions the background image at the bottom-
right corner.</p>
<p class="property-code">background-position: bottom right;</p>
</div>

<div class="property background-size">


<p><span>background-size</span>: Adjusts the background image to fit the container.
(Changed on hover)</p>
<p class="property-code">background-size: contain;</p>
</div>

<div class="property background-repeat">


<p><span>background-repeat</span>: Specifies the image repeats horizontally.</p>
<p class="property-code">background-repeat: repeat-x;</p>
</div>

<div class="property background-attachment">


<p><span>background-attachment</span>: Makes the background image scroll with the
page.</p>
<p class="property-code">background-attachment: local;</p>
</div>
</div>

</body>
</html>

OUTPUT
Q9.
Create a webpage showing the usage of font styling attributes.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Styling Attributes</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
color: #333;
padding: 40px;
}

h1 {
text-align: center;
font-size: 3em;
color: #2c3e50;
margin-bottom: 30px;
}

.font-size {
font-size: 1.5em;
margin-bottom: 20px;
}

.font-weight {
font-weight: 900;
margin-bottom: 20px;
}

.font-style {
font-style: italic;
margin-bottom: 20px;
}

.line-height {
line-height: 2;
margin-bottom: 20px;
}

.letter-spacing {
letter-spacing: 2px;
margin-bottom: 20px;
}

.text-transform {
text-transform: uppercase;
margin-bottom: 20px;
}

.font-family {
font-family: 'Georgia', serif;
margin-bottom: 20px;
}

.text-align {
text-align: center;
margin-bottom: 20px;
}

.text-decoration {
text-decoration: underline;
margin-bottom: 20px;
}

.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}

.font-variant {
font-variant: small-caps;
margin-bottom: 20px;
}

</style>
</head>
<body>

<h1>Font Styling Attributes</h1>

<div class="font-size">
<p>This text demonstrates <strong>font-size</strong> set to 1.5em, making it larger than
normal text.</p>
</div>

<div class="font-weight">
<p>This text demonstrates <strong>font-weight</strong> set to 900, making it extra
bold.</p>
</div>

<div class="font-style">
<p>This text demonstrates <strong>font-style</strong> set to italic, which makes the text
slanted.</p>
</div>
<div class="line-height">
<p>This text demonstrates <strong>line-height</strong> set to 2, which increases the
space between lines of text for better readability.</p>
</div>

<div class="letter-spacing">
<p>This text demonstrates <strong>letter-spacing</strong> set to 2px, which adds extra
space between characters.</p>
</div>

<div class="text-transform">
<p>This text demonstrates <strong>text-transform</strong> set to uppercase, making all
letters capitalized.</p>
</div>

<div class="font-family">
<p>This text demonstrates <strong>font-family</strong> set to 'Georgia', a serif font.</p>
</div>

<div class="text-align">
<p>This text demonstrates <strong>text-align</strong> set to center, which centers the
text horizontally.</p>
</div>

<div class="text-decoration">
<p>This text demonstrates <strong>text-decoration</strong> set to underline, adding an
underline to the text.</p>
</div>

<div class="text-shadow">
<p>This text demonstrates <strong>text-shadow</strong>, which gives the text a subtle
shadow effect.</p>
</div>

<div class="font-variant">
<p>This text demonstrates <strong>font-variant</strong> set to small-caps, making all
lowercase letters appear as small capital letters.</p>
</div>

</body>
</html>
OUTPUT
Q10.
Create a webpage and apply all text styling attributes using Id and
class selector.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling Attributes</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
padding: 40px;
color: #333;
line-height: 1.6;
}

h1 {
text-align: center;
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 30px;
}

#main-title {
font-size: 3em;
color: #3498db;
font-weight: bold;
text-transform: uppercase;
}

.highlight {
color: #e74c3c;
font-style: italic;
font-weight: 700;
}

.large-text {
font-size: 2em;
line-height: 1.4;
}
.underline-text {
text-decoration: underline;
}

.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

.bold-text {
font-weight: bold;
}

.letter-spacing {
letter-spacing: 2px;
}

.word-spacing {
word-spacing: 4px;
}

.line-height {
line-height: 2;
}

.italic-text {
font-style: italic;
}

.font-family {
font-family: 'Georgia', serif;
}

.text-align-center {
text-align: center;
}

.text-align-right {
text-align: right;
}

.text-align-left {
text-align: left;
}

.color-text {
color: #16a085;
}
</style>
</head>
<body>

<h1 id="main-title">Text Styling with CSS</h1>

<p class="highlight">This is a <span class="bold-text">highlighted text</span> with some


<span class="italic-text">italic</span> style.</p>

<p class="large-text">This paragraph has a larger font size and line height for better
readability.</p>

<p class="underline-text">This text has an underline decoration.</p>

<p class="text-shadow">This text has a shadow effect applied to it.</p>

<p class="uppercase">This text is converted to uppercase using the text-transform


property.</p>

<p class="lowercase">This text is in lowercase.</p>

<p class="capitalize">this text has its first letter capitalized using text-transform.</p>

<p class="letter-spacing">This text has increased letter spacing.</p>

<p class="word-spacing">This text has increased word spacing.</p>

<p class="line-height">This text has a larger line height for better readability between
lines.</p>

<p class="font-family">This text uses a different font family.</p>

<p class="color-text">This text has a custom color applied to it using CSS.</p>

<p class="text-align-center">This text is aligned to the center using text-align.</p>

<p class="text-align-right">This text is aligned to the right.</p>

<p class="text-align-left">This text is aligned to the left (default).</p>

</body>
</html>
OUTPUT
Q11.
Create a webpage and implement all list styling attributes.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Styling Attributes</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #fafafa;
color: #333;
padding: 40px;
line-height: 1.6;
}

h1 {
text-align: center;
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
font-weight: 600;
}

h2 {
color: #2c3e50;
font-size: 1.8em;
margin-bottom: 15px;
text-transform: uppercase;
}

.list-container {
display: flex;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}

ul, ol {
list-style-position: inside;
padding-left: 20px;
margin-bottom: 20px;
}
li {
font-size: 18px;
padding: 8px 0;
transition: all 0.3s ease;
}

li:hover {
background-color: #f1f1f1;
padding-left: 25px;
}

.unordered {
list-style-type: disc;
}

.circle {
list-style-type: circle;
}

.square {
list-style-type: square;
}

.decimal {
list-style-type: decimal;
}

.lower-alpha {
list-style-type: lower-alpha;
}

.upper-alpha {
list-style-type: upper-alpha;
}

.lower-roman {
list-style-type: lower-roman;
}

.upper-roman {
list-style-type: upper-roman;
}

.custom-bullet {
list-style-type: none;
}

.custom-bullet li {
position: relative;
padding-left: 30px;
}

.custom-bullet li::before {
content: "★";
position: absolute;
left: 0;
top: 0;
color: #ff6347;
font-size: 22px;
}

.image-bullet {
list-style-image: url('https://www.clipartkey.com/mpngs/m/3-33174_light-blue-circle-
png.png');
}

.list-container div {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 30%;
min-width: 250px;
}

.list-container div h2 {
text-align: center;
font-size: 1.5em;
color: #3498db;
}

@media (max-width: 768px) {


.list-container {
flex-direction: column;
align-items: center;
}

.list-container div {
width: 80%;
}
}
</style>
</head>
<body>

<h1>List Styling Attributes</h1>

<div class="list-container">
<div>
<h2>Unordered Lists</h2>
<ul class="unordered">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="circle">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<ul class="square">
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>

<div>
<h2>Ordered Lists</h2>
<ol class="decimal">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<ol class="lower-alpha">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol class="upper-alpha">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<ol class="lower-roman">
<li>i</li>
<li>ii</li>
<li>iii</li>
</ol>
<ol class="upper-roman">
<li>I</li>
<li>II</li>
<li>III</li>
</ol>
</div>

<div>
<h2>Custom and Image Bullets</h2>
<ul class="custom-bullet">
<li>Custom Bullet 1</li>
<li>Custom Bullet 2</li>
<li>Custom Bullet 3</li>
</ul>
<ul class="image-bullet">
<li>Image Bullet 1</li>
<li>Image Bullet 2</li>
<li>Image Bullet 3</li>
</ul>
</div>
</div>
</body>
</html>

OUTPUT
Q12.
Create a webpage with three equal columns.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Equal Columns</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}

.container {
display: flex;
justify-content: space-between;
gap: 20px;
}

.column {
flex: 1;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}

h2 {
color: #333;
}
</style>
</head>
<body>

<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the first column. You can add any content here, such as text, images, or other
elements.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the second column. The content will be evenly spaced with the other
columns.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is the third column. All three columns are equal in width and aligned in a
row.</p>
</div>
</div>

</body>
</html>

OUTPUT

You might also like