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

Web Design

The document contains multiple HTML code examples for creating web pages. It includes a basic organization website layout, a student biodata form, a web page with three paragraphs and an image, and a centered heading with styled text. Each example demonstrates different HTML elements and structures for web development.

Uploaded by

olami.se09
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views6 pages

Web Design

The document contains multiple HTML code examples for creating web pages. It includes a basic organization website layout, a student biodata form, a web page with three paragraphs and an image, and a centered heading with styled text. Each example demonstrates different HTML elements and structures for web development.

Uploaded by

olami.se09
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

1. Design a web page for an organization.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Organization Website</title>

<link rel="stylesheet" href="[Link]"> <!-- Optional CSS file for styling -->

</head>

<body>

<!-- Header Section -->

<header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<!-- Main Content Section -->

<main>

<section>

<h1>Welcome to our Organization</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit magna euismod metus
aliquet, eu ultricies nisl pharetra.</p>

</section>
<section>

<h2>About Us</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod augue ut finibus
auctor.</p>

</section>

<section>

<h2>Our Services</h2>

<ul>

<li>Service 1</li>

<li>Service 2</li>

<li>Service 3</li>

</ul>

</section>

<section>

<h2>Contact Us</h2>

<p>123 Main Street, City, Country</p>

<p>Email: info@[Link]</p>

<p>Phone: +1 123-456-7890</p>

</section>

</main>

<!-- Footer Section -->

<footer>

<p>&copy; 2023 Organization. All rights reserved.</p>

</footer>

</body>
</html>

2. Write HTML program to design a form which should allow to enter


BIODATA of students

<!DOCTYPE html>

<html>

<head>

<title>Student Biodata Form</title>

</head>

<body>

<h1>Student Biodata Form</h1>

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="age">Age:</label>

<input type="number" id="age" name="age" required><br><br>

<label for="gender">Gender:</label>

<select id="gender" name="gender" required>

<option value="">Select</option>

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select><br><br>

<label for="address">Address:</label>

<textarea id="address" name="address" rows="4" required></textarea><br><br>

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required><br><br>

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

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

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

<input type="text" id="course" name="course" required><br><br>

<label for="semester">Semester:</label>

<input type="number" id="semester" name="semester" required><br><br>

<label for="marks">Marks:</label>

<input type="number" id="marks" name="marks" required><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

3. write an html code for web page that is divided into 3 paragraphs and
import an image to rhe web page and border= 2

<!DOCTYPE html>

<html>

<head>

<title>Three Paragraphs with Image</title>

<style>

img {
border: 2px solid black;

</style>

</head>

<body>

<h1>My Web Page</h1>

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

<p>This is the third paragraph.</p>

<img src="[Link]" alt="Example Image">

</body>

</html>

4. write an html code for web page with heading at the center of the page
and paragragh which introduces general information about the heading 3
physical style tags on a paragraph.

<!DOCTYPE html>

<html>

<head>

<title>Centered Heading</title>

<style>

body {

display: flex;

justify-content: center;
align-items: center;

height: 100vh;

text-align: center;

</style>

</head>

<body>

<h1>Heading</h1>

<p>

This is an example of a paragraph with different physical style tags applied.

<strong>This text is bold.</strong>

<em>This text is italicized.</em>

<u>This text is underlined.</u>

</p>

</body>

</html>

You might also like