0% found this document useful (0 votes)
7 views25 pages

IWWW I Assignment

Download as pdf or txt
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 25

1.Create a HTML document highlighting Name and Address of your college.

Here are the steps to create an HTML document that highlights the name and address of your
college:

Step 1: Open a Text Editor

You can use any text editor, such as Notepad (Windows), TextEdit (Mac), or any other code editor
like Visual Studio Code, Sublime Text, etc.

Step 2: Write the HTML Structure

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">

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

<title>College Name and Address</title>

</head>

<body>

<h1>My College Name</h1>

<p>123 College Avenue, City Name, State, Postal Code</p>

</body>

</html>

```

Step 3: Replace College Name and Address

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.

Step 4: Save the File


1. After writing the code, save the file by choosing File > Save As.

2. In the save dialog, make sure to:

- Set the file extension to .html (e.g., `college-info.html`).

- Choose a folder where you'd like to save the file.

Step 5: Open the HTML File in a Browser

1. Navigate to the folder where you saved the file.

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.

2. Create a HTML document of ‘Practice of Font tag’.


Here’s a simple HTML document demonstrating the use of the `<font>` tag for changing font styles.
The `<font>` tag is considered obsolete in HTML5, but it’s still useful for learning and practice.
Modern web development typically uses CSS for styling fonts. Nevertheless, here's how the `<font>`
tag works:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Practice of Font Tag</title>

</head>

<body>

<h1>Practice of Font Tag</h1>

<!-- Default text without any font tag -->

<p>This is a regular paragraph without any styling using the <code>&lt;font&gt;</code> tag.</p>
<!-- Font tag with color -->

<p><font color="red">This text is red using the font tag. </font></p>

<! -- Font tag with size -->

<p><font size="5">This text is larger using size="5" in the font tag. </font></p>

<! -- Font tag with face (font family) -->

<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:

1. Color Attribute: Changes the text color (e.g., `color="red"`).

2. Size Attribute: Specifies the font size (e.g., `size="5"` where 1 is the smallest, 7 is the largest).

3. Face Attribute: Specifies the font family (e.g., `face="Arial"`).

Steps to Create this HTML Document:

1. Open a text editor.

2. Copy the above HTML code into the editor.

3. Replace any placeholder content if necessary.

4. Save the file as `font-practice.html`.

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.

3. Create a HTML document of ‘Famous Indian Folk Dances’.


Here’s a simple HTML document listing some famous Indian folk dances. The document uses
headings, paragraphs, and lists to organize the information:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Famous Indian Folk Dances</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f9f9f9;

color: #333;

h1 {

text-align: centre;

color: #4CAF50;

h2 {

color: #333;

border-bottom: 2px solid #ddd;

padding-bottom: 5px;

ul {
list-style-type: square;

padding-left: 20px;

p{

line-height: 1.6;

</style>

</head>

<body>

<h1>Famous Indian Folk Dances</h1>

<h2>1. Bhangra - Punjab</h2>

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

<h2>2. Garba - Gujarat</h2>

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

<h2>3. Ghoomar - Rajasthan</h2>

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

<h2>4. Lavani - Maharashtra</h2>

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

<h2>5. Bihu - Assam</h2>


<p>Bihu is a traditional folk dance from Assam, performed during the Bihu festival that marks the
Assamese New Year. The dance is characterized by brisk steps, rapid hand movements, and rhythmic
music.</p>

<h2>6. Yakshagana - Karnataka</h2>

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

<h2>7. Chhau - West Bengal, Odisha, Jharkhand</h2>

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

<h2>8. Kathakali - Kerala</h2>

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

<h2>9. Giddha - Punjab</h2>

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

<h2>10. Dandiya Raas - Gujarat</h2>

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

Steps to Create this HTML Document:

1. Open a text editor.

2. Copy and paste the above HTML code into the editor.

3. Save the file as `indian-folk-dances.html`.

4. Open the file in a browser to view the information.

This template can be extended by adding more folk dances, images, or additional styling.

4. Create a HTML document using various heading tags.


Here’s an example of an HTML document that demonstrates the use of various heading tags (`<h1>`
to `<h6>`):

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Practice with Heading Tags</title>

<style>

body {

font-family: Arial, sans-serif;

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>

<h1>This is Heading 1 (H1)</h1>

<p>Heading 1 is usually the most important heading on the page. It is often used for the main title
of the document.</p>

<h2>This is Heading 2 (H2)</h2>

<p>Heading 2 is used for subheadings under the main heading, dividing the content into
sections.</p>

<h3>This is Heading 3 (H3)</h3>

<p>Heading 3 can be used for further sub-sections within a Heading 2 section.</p>


<h4>This is Heading 4 (H4)</h4>

<p>Heading 4 is typically used for even more specific content or smaller subsections.</p>

<h5>This is Heading 5 (H5)</h5>

<p>Heading 5 is rarely used but can still help organize information when there are multiple levels
of hierarchy.</p>

<h6>This is Heading 6 (H6)</h6>

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

Steps to Create this HTML Document:

1. Open a text editor.

2. Copy the HTML code above into the editor.

3. Save the file as `heading-tags-practice.html`.

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">

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

<title>Practice of Superscript and Subscript Tags</title>

</head>

<body>

<h1>Practice of Superscript and Subscript Tags</h1>

<section>

<h2>Superscript Example</h2>

<p>The superscript tag (<code>&lt;sup&gt;</code>) is commonly used for mathematical


exponents or ordinal indicators.</p>

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

<p>Ordinal indicator: Today is the 4<sup>th</sup> of the month.</p>

</section>

<section>

<h2>Subscript Example</h2>

<p>The subscript tag (<code>&lt;sub&gt;</code>) is often used in chemical formulas or to


represent indices in math.</p>

<p>Example: The chemical formula for water is H<sub>2</sub>O, where each hydrogen atom
has a subscript of 2.</p>

<p>Mathematical notation: In sequences, we can use subscripts like a<sub>n</sub> to


represent the n-th term.</p>
</section>

<section>

<h2>Combining Superscript and Subscript</h2>

<p>Sometimes, both superscript and subscript are used together, as in mathematical equations
or scientific notation.</p>

<p>Example: Einstein’s famous equation is E = mc<sup>2</sup>.</p>

<p>Complex formula: CO<sub>2</sub><sup>-2</sup> represents the carbon dioxide ion with a


charge of -2.</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.

6. Create an Advertisement web page of Cambridge T- Shirts.


Here's a simple HTML document for an advertisement webpage promoting "Cambridge T-Shirts." This
example includes a header, product details, images, and a call-to-action section for users to shop or
learn more about the T-shirts.

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Cambridge T-Shirts</title>

<style>

body {

font-family: Arial, sans-serif;


margin: 0;

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;

padding: 10px 20px;

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 Section -->

<header class="header">

<h1>Cambridge T-Shirts</h1>

<p>Your Ultimate Style and Comfort Choice!</p>

</header>

<!-- Main Content Section -->

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

<img src="https://via.placeholder.com/300" alt="Cambridge T-Shirt Collection">

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

<a href="#" class="cta-button">Learn More</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>

<img src="https://via.placeholder.com/300" alt="Cambridge T-Shirt New Arrivals">

<p>Fresh designs, exclusive colors, and limited editions available only at Cambridge T-
Shirts.</p>

<a href="#" class="cta-button">Shop New Arrivals</a>

</section>

</main>

<!-- Footer Section -->

<footer class="footer">

<p>&copy; 2024 Cambridge T-Shirts. All rights reserved.</p>

<p>Follow us on:

<a href="#">Facebook</a> |

<a href="#">Instagram</a> |

<a href="#">Twitter</a>

</p>

</footer>

</body>

</html>

```

In this HTML template:

- Header: Includes the title and a brief tagline.

- 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!

7. Create a web page containing hyperlinks of five portals.


Here’s an HTML template with hyperlinks to five popular web portals. This example includes a title, a
brief introduction, and a list of clickable links.

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Popular Web Portals</title>

<style>

body {

font-family: Arial, sans-serif;

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>

<h1>Explore Popular Web Portals</h1>

<p>Click on any of the links below to visit some of the most popular web portals:</p>

<ul>

<li><a href="https://www.google.com" target="_blank">Google</a></li>

<li><a href="https://www.yahoo.com" target="_blank">Yahoo</a></li>

<li><a href="https://www.bing.com" target="_blank">Bing</a></li>

<li><a href="https://www.msn.com" target="_blank">MSN</a></li>

<li><a href="https://www.aol.com" target="_blank">AOL</a></li>

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

8. Create a HTML document of ‘Birthday Invitation’.


Here’s an HTML document template for a "Birthday Invitation" webpage. This example includes a
festive design, details of the event, and RSVP information.

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Birthday Invitation</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #fffbf0;

color: #333;

text-align: center;

padding: 20px;

.invitation-card {

background-color: #fff8e1;

border: 2px solid #ffd54f;

border-radius: 10px;

padding: 20px;

margin: auto;

width: 80%;
max-width: 600px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

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

<h1>You're Invited to a Birthday Celebration!</h1>

<p>Join us as we celebrate a special day full of joy, laughter, and memories.</p>


<div class="date-time">

<p><strong>Date:</strong> Saturday, November 25, 2024</p>

<p><strong>Time:</strong> 3:00 PM - 7:00 PM</p>

</div>

<div class="location">

<p><strong>Location:</strong> Sunshine Park Pavilion</p>

<p>123 Celebration Lane, Happyville</p>

</div>

<p>Come ready for games, cake, and lots of fun!</p>

<div class="rsvp">

<p>Please RSVP by November 18th</p>

<p>Contact: <a href="mailto:rsvp@example.com">rsvp@example.com</a> or call (123) 456-


7890</p>

</div>

</div>

</body>

</html>

```

Explanation:

- Invitation Card: The `. invitation-card` div provides a centred, festive-looking card with rounded
borders and a shadow.

- Event Details: Includes the event date, time, and location.

- 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">

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

<title>Pav Bhaji Menu</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #fff8e1;

color: #333;

text-align: center;

padding: 20px;

h1 {

color: #d32f2f;

table {

width: 80%;

margin: 20px auto;

border-collapse: collapse;

th, td {

padding: 12px;

border: 1px solid #ccc;

th {
background-color: #d32f2f;

color: white;

td {

background-color: #ffe0b2;

</style>

</head>

<body>

<h1>Pav Bhaji Menu</h1>

<p>Enjoy our delicious range of Pav Bhaji options!</p>

<table>

<tr>

<th>Dish</th>

<th>Description</th>

<th>Price</th>

</tr>

<tr>

<td>Classic Pav Bhaji</td>

<td>A traditional blend of mashed vegetables, spices, and butter served with soft pav.</td>

<td>$5.99</td>

</tr>

<tr>

<td>Cheese Pav Bhaji</td>

<td>Classic pav bhaji topped with melted cheese for an extra layer of flavor.</td>

<td>$6.99</td>

</tr>

<tr>

<td>Jain Pav Bhaji</td>


<td>Prepared without onion, garlic, or root vegetables. Perfect for Jain dietary
requirements.</td>

<td>$6.49</td>

</tr>

<tr>

<td>Paneer Pav Bhaji</td>

<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!

10.Create a web page of ‘Car Price List’ by inserting Table.


Here’s an HTML template for a "Car Price List" webpage. The table includes details like the car
model, description, and price.

```html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Car Price List</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f4f8;

color: #333;

text-align: center;

padding: 20px;

h1 {

color: #1e88e5;

table {

width: 90%;

margin: 20px auto;

border-collapse: collapse;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

th, td {

padding: 12px;

border: 1px solid #ccc;

text-align: left;

th {

background-color: #1e88e5;

color: white;
}

td {

background-color: #e3f2fd;

</style>

</head>

<body>

<h1>Car Price List</h1>

<p>Find the latest prices for popular car models below:</p>

<table>

<tr>

<th>Car Model</th>

<th>Description</th>

<th>Price</th>

</tr>

<tr>

<td>Toyota Corolla</td>

<td>A reliable and fuel-efficient sedan with advanced safety features.</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>Spacious SUV with off-road capabilities and luxury interior options.</td>

<td>$50,000</td>

</tr>

<tr>

<td>BMW 3 Series</td>

<td>Luxury sedan with high-performance features and modern technology.</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.

Encoded With Chat GPT 4.2


ChatGPT can make mistakes. Check important info.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy