IWWW I Assignment
IWWW I Assignment
IWWW I Assignment
Here are the steps to create an HTML document that highlights the name and address of your
college:
You can use any text editor, such as Notepad (Windows), TextEdit (Mac), or any other code editor
like Visual Studio Code, Sublime Text, etc.
In the editor, start by writing the basic HTML structure. Here's an example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
```
Replace the placeholder text with the actual name and address of your college:
- Replace "My College Name" with your college’s name i.e., Smt. LRT College of Commerce, Akola
- Replace "123 College Avenue, City Name, State, Postal Code" with the actual address of your
college i.e., Ratanlal Plots, Necklace Rd, Ranpise Nagar, Akola, Maharashtra 444001.
2. Double-click the file, and it will open in your default web browser.
3. You will see your college name and address displayed as a simple webpage.
You can place this `<style>` section inside the `<head>` tag. This will make the page look a bit more
styled and professional.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is a regular paragraph without any styling using the <code><font></code> tag.</p>
<!-- Font tag with color -->
<p><font size="5">This text is larger using size="5" in the font tag. </font></p>
<p><font face="Arial">This text is styled with the Arial font family. </font></p>
<! -- Font tag with multiple attributes (color, size, face) -->
<p><font color="blue" size="4" face="Courier">This text is blue, size 4, and uses the Courier font.
</font></p>
</body>
</html>
```
Explanation:
2. Size Attribute: Specifies the font size (e.g., `size="5"` where 1 is the smallest, 7 is the largest).
5. Open the file in a web browser to see how the `<font>` tag changes the appearance of text.
Note:
In modern web development, you would typically use CSS for such styling. For example:
```html
<p style="color: red; font-size: 20px; font-family: Arial;">This text is red, larger, and in Arial font
using CSS.</p>
```
The `<font>` tag is not supported in HTML5 and is deprecated in favor of CSS for controlling the
presentation of text.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 20px;
background-color: #f9f9f9;
color: #333;
h1 {
text-align: centre;
color: #4CAF50;
h2 {
color: #333;
padding-bottom: 5px;
ul {
list-style-type: square;
padding-left: 20px;
p{
line-height: 1.6;
</style>
</head>
<body>
<p>Bhangra is a lively and energetic folk dance from Punjab, typically performed to the beats of a
dhol (drum) during harvest festivals and other celebrations. It is characterized by powerful and fast
movements.</p>
<p>Garba is a traditional dance form from Gujarat, performed during the festival of Navratri. It is
performed in a circle, symbolizing the cycle of life, and dancers move gracefully to rhythmic clapping
and singing.</p>
<p>Ghoomar is a folk dance from Rajasthan, mainly performed by women wearing traditional
attire. The dancers twirl in circles, displaying their colorful ghagras (long skirts), creating a
captivating spectacle.</p>
<p>Lavani is a popular folk dance of Maharashtra known for its powerful rhythm and energetic
movements. It is often performed to the beats of dholki, with themes ranging from romantic to
social issues.</p>
<p>Yakshagana is a traditional folk dance-drama form from Karnataka, combining dance, music,
dialogue, and elaborate costumes. It narrates mythological stories from Indian epics such as the
Mahabharata and Ramayana.</p>
<p>Chhau is a semi-classical dance form from the states of West Bengal, Odisha, and Jharkhand.
The dancers wear colorful masks and perform acrobatic movements to depict various stories from
mythology.</p>
<p>Kathakali is a traditional dance-drama from Kerala, known for its elaborate costumes, face
paint, and intricate expressions. The dance narrates stories from Hindu epics like the Ramayana and
Mahabharata.</p>
<p>Giddha is a traditional folk dance performed by women in Punjab. It is a vibrant and joyful
dance accompanied by clapping and boliyan (short folk couplets), highlighting the spirit of
Punjab.</p>
<p>Dandiya Raas is another popular folk dance from Gujarat, performed with colorful sticks called
dandiyas during Navratri. It is performed in pairs, and the rhythmic clashing of sticks adds to the
lively atmosphere.</p>
</body>
</html>
```
Key Features:
1. Headings (`<h1>`, `<h2>`): Used for the title and each folk-dance name.
2. Paragraphs (`<p>`): Describe each dance with brief information about its origin and
characteristics.
3. Lists (`<ul>` and `<li>`): Used indirectly to structure the dance names, but can be replaced with
bullet points if needed.
4. Styling (CSS): Basic CSS is added for font, colors, and layout.
2. Copy and paste the above HTML code into the editor.
This template can be extended by adding more folk dances, images, or additional styling.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 20px;
background-color: #f4f4f4;
color: #333;
h1 {
color: #4CAF50;
h2 {
color: #2196F3;
h3 {
color: #FF5722;
h4 {
color: #9C27B0;
h5 {
color: #FF9800;
h6 {
color: #607D8B;
p{
font-size: 16px;
color: #555;
</style>
</head>
<body>
<p>Heading 1 is usually the most important heading on the page. It is often used for the main title
of the document.</p>
<p>Heading 2 is used for subheadings under the main heading, dividing the content into
sections.</p>
<p>Heading 4 is typically used for even more specific content or smaller subsections.</p>
<p>Heading 5 is rarely used but can still help organize information when there are multiple levels
of hierarchy.</p>
<p>Heading 6 is the smallest and least important heading, used for minor or supplementary
information.</p>
</body>
</html>
```
Explanation:
- Headings (`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`): Each heading tag is demonstrated from
the largest (`<h1>`) to the smallest (`<h6>`).
- Paragraphs (`<p>`): Each heading is followed by a paragraph explaining its typical usage.
- CSS Styling: Each heading tag is given a different color to help visually differentiate them.
4. Open the file in a web browser to view the document, and see how each heading tag appears
differently.
This example showcases how the different heading levels can be used to structure a webpage.
5. Create a HTML document of ‘Practice of Super – Script and sub- script tag.
Here's an HTML document that demonstrates the use of superscript (`<sup>`) and subscript (`<sub>`)
tags in HTML. This example showcases their usage in mathematical expressions and chemical
formulas.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<section>
<h2>Superscript Example</h2>
<p>Example: The formula for the area of a square is A = s<sup>2</sup>, where <em>s</em>
represents the length of a side.</p>
</section>
<section>
<h2>Subscript Example</h2>
<p>Example: The chemical formula for water is H<sub>2</sub>O, where each hydrogen atom
has a subscript of 2.</p>
<section>
<p>Sometimes, both superscript and subscript are used together, as in mathematical equations
or scientific notation.</p>
</section>
</body>
</html>
```
This document includes sections for both superscript and subscript tags with relevant examples to
illustrate their uses. You can save it as an `.html` file and view it in any browser to see the tags in
action.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cambridge T-Shirts</title>
<style>
body {
padding: 0;
color: #333;
.header {
background-color: #007acc;
color: white;
padding: 20px;
text-align: center;
.main {
padding: 20px;
text-align: center;
.product {
margin: 20px 0;
.product img {
width: 300px;
height: auto;
border-radius: 10px;
margin: 10px 0;
.cta-button {
display: inline-block;
margin: 10px;
background-color: #007acc;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
.cta-button:hover {
background-color: #005b99;
.footer {
background-color: #f1f1f1;
color: #555;
padding: 10px;
text-align: center;
font-size: 0.9em;
margin-top: 20px;
</style>
</head>
<body>
<header class="header">
<h1>Cambridge T-Shirts</h1>
</header>
<main class="main">
<section class="product">
<h2>Classic Collection</h2>
<p>Discover the perfect blend of comfort and style with our Cambridge T-Shirts. Made from
premium materials to ensure durability and a soft feel.</p>
<p>Available in various colors and sizes. Get ready to experience unparalleled comfort in our
classic design.</p>
<a href="#" class="cta-button">Shop Now</a>
</section>
<section class="product">
<h2>New Arrivals</h2>
<p>Stay trendy with our latest designs, updated regularly to fit every season and style.</p>
<p>Fresh designs, exclusive colors, and limited editions available only at Cambridge T-
Shirts.</p>
</section>
</main>
<footer class="footer">
<p>Follow us on:
<a href="#">Facebook</a> |
<a href="#">Instagram</a> |
<a href="#">Twitter</a>
</p>
</footer>
</body>
</html>
```
- Main Section: Displays two sections — one for the "Classic Collection" and another for "New
Arrivals."
- Footer: Contains copyright information and social media links.
To see it in action, save it as an `.html` file and open it in a web browser. Adjust image URLs or add
real product images for a complete experience!
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
text-align: center;
padding: 20px;
background-color: #f4f4f4;
h1 {
color: #333;
p{
font-size: 1.2em;
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
a{
text-decoration: none;
color: #007acc;
font-weight: bold;
a:hover {
color: #005b99;
</style>
</head>
<body>
<p>Click on any of the links below to visit some of the most popular web portals:</p>
<ul>
</ul>
</body>
</html>
```
Explanation:
- Title and Header: The `<title>` and `<h1>` tags display the page’s purpose.
- Paragraph: Provides a brief introduction.
- Unordered List of Links: Contains hyperlinks to five portals, each opening in a new tab with
`target="_blank"` for user convenience.
- CSS Styling: Simple styles are applied for text alignment, font, and link hover effects.
To view this, save it as an `.html` file and open it in a browser. Enjoy exploring these popular portals!
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Birthday Invitation</title>
<style>
body {
background-color: #fffbf0;
color: #333;
text-align: center;
padding: 20px;
.invitation-card {
background-color: #fff8e1;
border-radius: 10px;
padding: 20px;
margin: auto;
width: 80%;
max-width: 600px;
.invitation-card h1 {
color: #ff6f00;
.invitation-card p {
font-size: 1.2em;
.invitation-card .date-time,
.invitation-card .location {
margin: 15px 0;
font-weight: bold;
.rsvp {
margin-top: 20px;
font-size: 1.1em;
color: #007acc;
.rsvp a {
color: #ff6f00;
font-weight: bold;
text-decoration: none;
</style>
</head>
<body>
<div class="invitation-card">
</div>
<div class="location">
</div>
<div class="rsvp">
</div>
</div>
</body>
</html>
```
Explanation:
- Invitation Card: The `. invitation-card` div provides a centred, festive-looking card with rounded
borders and a shadow.
- RSVP Section: Encourages the invitee to RSVP with a contact email and phone number.
To use it, save this as an `.html` file and open it in a browser to view the invitation! You can
customize colors, date, time, and details to fit the specific event.
9. Create a Web page of ‘PAV Bhaji Menu’ by inserting Table.
Here’s an HTML template for a "Pav Bhaji Menu" webpage with a table displaying various options,
prices, and descriptions.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #fff8e1;
color: #333;
text-align: center;
padding: 20px;
h1 {
color: #d32f2f;
table {
width: 80%;
border-collapse: collapse;
th, td {
padding: 12px;
th {
background-color: #d32f2f;
color: white;
td {
background-color: #ffe0b2;
</style>
</head>
<body>
<table>
<tr>
<th>Dish</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>A traditional blend of mashed vegetables, spices, and butter served with soft pav.</td>
<td>$5.99</td>
</tr>
<tr>
<td>Classic pav bhaji topped with melted cheese for an extra layer of flavor.</td>
<td>$6.99</td>
</tr>
<tr>
<td>$6.49</td>
</tr>
<tr>
<td>A delicious twist with chunks of paneer mixed into the bhaji.</td>
<td>$7.49</td>
</tr>
<tr>
<td>Butter Pav</td>
<td>Soft pav buns toasted with a generous amount of butter. Perfect with any bhaji.</td>
<td>$1.99</td>
</tr>
</table>
</body>
</html>
```
Explanation:
- Table Structure: The menu is organized in a table with three columns — Dish, Description, and
Price.
- CSS Styling:
- The header and table styling emphasize the colors associated with Pav Bhaji and an Indian food
aesthetic.
- The `th` and `td` elements have different background colors for a neat look.
- Menu Entries: Different variations of Pav Bhaji are listed with prices and descriptions.
Save it as an `.html` file to view it in a web browser, and enjoy the look of your Pav Bhaji menu!
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #f0f4f8;
color: #333;
text-align: center;
padding: 20px;
h1 {
color: #1e88e5;
table {
width: 90%;
border-collapse: collapse;
th, td {
padding: 12px;
text-align: left;
th {
background-color: #1e88e5;
color: white;
}
td {
background-color: #e3f2fd;
</style>
</head>
<body>
<table>
<tr>
<th>Car Model</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Toyota Corolla</td>
<td>$20,000</td>
</tr>
<tr>
<td>Honda Civic</td>
<td>A sporty compact car known for its smooth handling and performance.</td>
<td>$22,500</td>
</tr>
<tr>
<td>Ford Mustang</td>
<td>Iconic muscle car with powerful engine options and a bold design.</td>
<td>$28,000</td>
</tr>
<tr>
<td>Chevrolet Tahoe</td>
<td>$50,000</td>
</tr>
<tr>
<td>BMW 3 Series</td>
<td>$41,000</td>
</tr>
</table>
</body>
</html>
```
Explanation:
- Table Structure: This table is organized with three columns: Car Model, Description, and Price.
- Styling:
- The header has a blue theme, with the table cells given a soft blue background.
- The `th` and `td` elements have different background colors to enhance readability and visual
appeal.
- Car Listings: Five car models are included, each with a description and price.
To view this webpage, save it as an `.html` file and open it in any browser.