Scribd
Upload
3 views

WEB DESIGN PROGRAMS

The document outlines various exercises for designing web pages using HTML and CSS, covering topics such as text formatting, multi-page navigation, CSS types, image maps, and forms with different input controls. Each exercise includes an aim, procedure, and example code demonstrating the concepts. The exercises are intended to enhance web development skills through practical implementation.

Uploaded by

dkr93743
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

WEB DESIGN PROGRAMS

The document outlines various exercises for designing web pages using HTML and CSS, covering topics such as text formatting, multi-page navigation, CSS types, image maps, and forms with different input controls. Each exercise includes an aim, procedure, and example code demonstrating the concepts. The exercises are intended to enhance web development skills through practical implementation.

Uploaded by

dkr93743
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

EX 1 - Design a web page using different text formatting tags.

AIM:
To demonstrate various text formatting techniques in HTML, such as headings, bold,
italic, underlined, strikethrough, monospace, subscript, superscript, blockquotes, and
preformatted text.
PROCEDURE:

1. Create an HTML document with basic structure, including the <html>, <head>, and
<body> tags.
2. Add the <meta> tags for character set and viewport settings in the <head> section.
3. Include a <title> tag to name the page "Text Formatting Example."
4. Use <h1>, <h2>, and <h3> tags to demonstrate different heading levels.
5. Use the <b> and <strong> tags for bold and strongly emphasized text, respectively.
6. Demonstrate italicized text with the <i> tag and emphasized text with the <em> tag.
7. Show underlined text using the <u> tag and strikethrough text with the <s> tag.
8. Display monospace text using the <code> tag.
9. Demonstrate subscript and superscript text using the <sub> and <sup> tags.
10. Include blockquote and preformatted text using the <blockquote> and <pre> tags for
formatting.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Text Formatting Example</title>

</head>

<body>

<h1>Main Heading (H1)</h1>

<h2>Subheading (H2)</h2>

<h3>Smaller Heading (H3)</h3>

<p>This is a <b>bold</b> text using the <code>&lt;b&gt;</code> tag.</p>


<p>This is a <strong>strongly emphasized</strong> text using
<code>&lt;strong&gt;</code>.</p>

<p>This is an <i>italic</i> text using <code>&lt;i&gt;</code>.</p>

<p>This is an <em>emphasized</em> text using <code>&lt;em&gt;</code>.</p>

<p>This is an <u>underlined</u> text using <code>&lt;u&gt;</code>.</p>

<p>This is a <s>strikethrough</s> text using <code>&lt;s&gt;</code>.</p>

<p>Here is some <code>monospace</code> text using


<code>&lt;code&gt;</code>.</p>

<p>Water's chemical formula is H<sub>2</sub>O.</p>

<p>Einstein's equation: E = mc<sup>2</sup>.</p>

<blockquote>

"This is a blockquote used to highlight an important quote or message."

</blockquote>

<pre>

This is preformatted text.

It preserves spaces, line breaks,

and formatting as is.

</pre>

</body>

</html>
OUTPUT:

RESULT
EX 2 - Design a web page with links to different pages and allow navigation between
web pages.

AIM:

To create a simple multi-page website with consistent navigation and styling using
HTML and CSS. It demonstrates basic web development skills, including page structure,
linking, and styling.

PROCEDURE:

1. Create three HTML pages: index.html, about.html, and contact.html, each


representing different sections of the website.
2. Include a <header> with a title and a navigation menu in each HTML file.
3. The navigation menu contains links to the three pages: Home, About, and Contact.
4. Link all HTML files to a common CSS file, styles.css, for styling.
5. In styles.css, set global styles for body text, margin, and padding.
6. Style the <header> element with a background color and text color.
7. Style the navigation menu by removing list styles and adding inline display for the
links.
8. Style the navigation links to have white text and remove underlines.
9. Ensure each page's <main> section contains specific content (e.g., "Home Page,"
"About Us," "Contact Us").
10. Test the website to ensure proper navigation between pages and styling consistency.

PROGRAM:

Main Page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>This is the home page. Click the links above to navigate.</p>
</main>
</body>
</html>

About Page (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>This is the About page.</p>
</main>
</body>
</html>

Contact Page (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>This is the Contact page.</p>
</main>
</body>
</html>

CSS File (styles.css)

body { font-family: Arial, sans-serif;


margin: 0;
padding: 0;
text-align: center;}

header { background-color: #333;


color: white;
padding: 10px;}

nav ul { list-style-type: none;


padding: 0;}

nav ul li { display: inline;


margin: 0 15px;}

nav ul li a { color: white;


text-decoration: none;}
OUTPUT:

RESULT
EX 3 – . Design a web page demonstrating all Style sheet types
AIM:

PROCEDURE:

1. Create an HTML file (index.html) and define the basic structure using <!
DOCTYPE html>.
2. Add a <head> section with a <title>, meta tags, and links to an external CSS file
(external.css).
3. Include Internal CSS inside a <style> tag to style elements within the same HTML
file.
4. Write the <body> content with a heading (<h1>) and three <p> elements
demonstrating Inline, Internal, and External CSS.
5. Apply Inline CSS directly using the style attribute in an HTML tag.
6. Use Internal CSS by assigning a class to an element and defining its style inside the
<style> tag.
7. Link an External CSS file using <link rel="stylesheet" href="external.css"> for
better separation.
8. Add three buttons styled with Inline, Internal, and External CSS for better
understanding.
9. Create and save external.css, defining styles for .external-style and .external-btn
with hover effects.
10. Run the index.html file in a browser to observe different styles applied using the
three CSS methods.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Demo</title>

<!-- Internal CSS -->


<style>
h1 { color: blue; text-align: center; }
.internal-style { font-size: 18px; color: green; background: #f0f0f0; padding: 10px; }
button { padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; }
.internal-btn { background-color: teal; color: white; }
.internal-btn:hover { background-color: darkslategray; }
</style>
<!-- External CSS -->
<link rel="stylesheet" href="external.css">
</head>
<body>

<h1>CSS Stylesheet Demonstration</h1>

<p style="color: red; font-weight: bold;">This is styled using Inline CSS.</p>


<p class="internal-style">This is styled using Internal CSS.</p>
<p class="external-style">This is styled using External CSS.</p>

<button style="background-color: orange; color: white;">Inline CSS Button</button>


<button class="internal-btn">Internal CSS Button</button>
<button class="external-btn">External CSS Button</button>

</body>
</html>

External (External.Css)

.external-style {
font-size: 18px;
color: purple;
font-style: italic;
background: #f8e6ff;
padding: 10px;
}

.external-btn {
background-color: blue;
color: white;
}
.external-btn:hover { background-color: navy; }

OUTPUT:
RESULT:

The program was entered and executed successfully, demonstrating Inline, Internal,
and External CSS, applying different styles to text and buttons with distinct colors, fonts,
and styles based on the applied CSS method.
EX 4 - . Design a web page with Image maps.

AIM:

To demonstrate the use of Image Maps in HTML, allowing users to click on different
regions of an image to navigate to relevant links. The image map is implemented using the
<map> and <area> elements, enabling interactive navigation to different geographic
locations.

PROCEDURE:

1. Create an HTML file and define the basic structure using <!DOCTYPE html>,
<html>, <head>, and <body> tags.
2. Set the title of the page inside the <title> tag.
3. Link an external CSS file using <link rel="stylesheet" href="styles.css"> (optional).
4. Add internal CSS styles inside the <style> tag to format the page layout.
5. Insert an image using the <img> tag and set its usemap attribute to associate it with
an image map.
6. Define an image map using the <map> tag and give it a name matching the usemap
attribute in the <img> tag.
7. Create clickable areas using <area> tags, specifying the shape, coords, and href for
each clickable region.
8. Use different area shapes (rect, circle, poly) to match the regions of interest on the
image.
9. Save the file and open it in a browser to test the clickable regions.
10. Ensure the coordinates are correct using an image mapping tool if needed.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Demonstration</title>

<!-- External CSS -->


<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->


<style>
.image-container {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1 style="color: red;">Image Map Example</h1>

<div class="image-container">
<h2>Clickable Image Map</h2>
<img src="WORLD MAP" usemap="#worldmap" alt="World Map" width="600">

<map name="worldmap">
<area shape="rect" coords="34,44,270,350"
href="https://en.wikipedia.org/wiki/North_America" alt="North America">
<area shape="rect" coords="290,172,333,250"
href="https://en.wikipedia.org/wiki/South_America" alt="South America">
<area shape="circle" coords="337,300,44"
href="https://en.wikipedia.org/wiki/Africa" alt="Africa">
<area shape="poly" coords="400,44,560,44,560,200,400,200"
href="https://en.wikipedia.org/wiki/Europe" alt="Europe">
</map>
</div>
</body>
</html>

OUTPUT:

RESULT:

The web page successfully displays an interactive image map, allowing users to click
on different regions to navigate to relevant links
EX 5 - Design a web page with a form that uses all types of controls.

AIM:
To demonstrate how to create a form using all types of input controls in HTML,
including text fields, password fields, radio buttons, checkboxes, dropdowns and file uploads.

PROCEDURE:

1. Create an HTML file and define the basic structure using <!DOCTYPE html>,
<html>, <head>, and <body> tags.
2. Set the title of the page inside the <title> tag.
3. Link an external CSS file using <link rel="stylesheet" href="styles.css"> (optional).
4. Define internal CSS styles inside the <style> tag to format the form layout.
5. Create a <form> element with attributes action="#" (for form submission) and
method="post".
6. Add different input fields such as text, password, email, number, date, radio buttons,
and checkboxes using <input> tags.
7. Include a dropdown menu using the <select> and <option> elements.
8. Add a textarea using the <textarea> element for multiline input.
9. Include additional controls like file upload, range slider, and color picker using
respective <input> types.
10. Add a submit button using <button type="submit">Submit</button> to complete the
form functionality.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with All Input Controls</title>

<!-- External CSS -->


<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->


<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
max-width: 500px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
font-weight: bold;
}
input, select, textarea, button {
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
</style>
</head>
<body>
<h1>Form with All Input Controls</h1>

<form action="#" method="post">


<label for="text">Text Input:</label>
<input type="text" id="text" name="text" placeholder="Enter text">

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter
password">

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email">

<label for="number">Number:</label>
<input type="number" id="number" name="number" placeholder="Enter
number">

<label for="date">Date:</label>
<input type="date" id="date" name="date">

<label for="radio">Radio Buttons:</label><br>


<input type="radio" id="option1" name="radio" value="Option 1"> Option 1
<input type="radio" id="option2" name="radio" value="Option 2"> Option 2

<label for="checkbox">Checkboxes:</label><br>
<input type="checkbox" id="checkbox1" name="checkbox1" value="Check 1">
Check 1
<input type="checkbox" id="checkbox2" name="checkbox2" value="Check 2">
Check 2

<label for="dropdown">Dropdown:</label>
<select id="dropdown" name="dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<label for="textarea">Textarea:</label>
<textarea id="textarea" name="textarea" placeholder="Enter your
message"></textarea>

<label for="file">File Upload:</label>


<input type="file" id="file" name="file">

<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">

<label for="color">Color Picker:</label>


<input type="color" id="color" name="color">

<button type="submit">Submit</button>
</form>
</body>
</html>

OUTPUT:
RESULT:

You might also like