Scribd
Upload
16 views30 pages

HTML Code Examples for Web Development

The document provides various HTML code examples demonstrating how to create ordered and unordered lists, nested lists, image insertion, tables with colspan and rowspan, hyperlinks, sign-up forms, online reservation forms, personal profiles, and webpages for an insurance company and online shopping. Each section includes the relevant HTML structure and CSS styles to enhance the design. The examples serve as practical templates for web development tasks.

Uploaded by

sharmalaptop7886
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
16 views30 pages

HTML Code Examples for Web Development

The document provides various HTML code examples demonstrating how to create ordered and unordered lists, nested lists, image insertion, tables with colspan and rowspan, hyperlinks, sign-up forms, online reservation forms, personal profiles, and webpages for an insurance company and online shopping. Each section includes the relevant HTML structure and CSS styles to enhance the design. The examples serve as practical templates for web development tasks.

Uploaded by

sharmalaptop7886
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

HTML CODE TO DEMONSTRATE :

A) Ordered List-

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>SAMOSA</li>
<li>CHOLE</li>
<li>PANEER</li>
<li>PARATHE</li>
</ol>
</body>
</html>
B) Unordered List-

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>SAMOSA</li>
<li>CHOLE</li>
<li>PANEER</li>
<li>PARATHE</li>
</ul>
</body>
</html>
C) Nested List-

<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>My Name <i>jitesh</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

HTML code to insert an image in the webpage


<html>
<body>
<h2>HTML Image</h2>
<img
src=[Link]
width="200" height="100"
alt="Image Indigo"> </img>
</body>
</html>
HTML code to design Table Colspan & Rowspan

<html>
<head>
<title>Colspan & Rowspan Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>

<table>
<tr>

<th colspan="2">Header Colspan 2</th>


<th rowspan="2">Header Rowspan 2</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>Row 1, Cell 4</td>
</tr>
<tr>
<td colspan="2">Row 2, Cell 1 and 2</td>
<td>Row 2, Cell 3</td>
<td>Row 2, Cell 4</td>
<td>Row 2, Cell 5</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
<td>Row 3, Cell 4</td>
<td>Row 3, Cell 5</td>
</tr>
</table>

</body>
</html>
HTML code for use of anchor tag
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<ahref="[Link]
</body>
</html>

HTML code to design Sign up Form


<html>
<head>
<title>Sign Up Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<div class="container">
<h2>Sign Up</h2>
<form action="#" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="Sign Up">
</form>
</div>

</body>
</html>

HTML code to design an online reservation form


<html>
<head>
<title>Online Reservation Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
.form-group input[type="submit"] {
background: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.form-group input[type="submit"]:hover {
background: #0056b3;
}
</style>
</head>
<body>

<div class="container">
<h2>Online Reservation Form</h2>
<form action="#" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="date">Date of Reservation:</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="time">Time of Reservation:</label>
<input type="time" id="time" name="time" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required>
</div>
<div class="form-group">
<label for="message">Additional Requests:</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Reservation">
</div>
</form>
</div>

</body>
</html>
HTML to design Personal Profile

<html>
<head>
<title>My Personal Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #333;
}
p{
color: #666;
line-height: 1.6;
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
}
.section p {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Ritesh Dasgupta</h1>
<p>Web Developer</p>
</header>
<div class="section">
<h2>About Me</h2>
<p>I'm a passionate web developer with experience in HTML, CSS,
JavaScript, and various web frameworks.</p>
</div>
<div class="section">
<h2>Experience</h2>
<p>Frontend Developer at Foliate Design Studio (2019 - Present)</p>
<p>Intern at Deshmukh Agency (2018 - 2019)</p>
</div>
<div class="section">
<h2>Education</h2>
<p>Bachelor of business administration, NEW DELHI INSTITUTE OF
MANAGMENT(2023- 2026)</p>
</div>
<div class="section">
<h2>Skills</h2>
<p>HTML, CSS, JavaScript, [Link], [Link], Bootstrap, Git</p>
</div>
<div class="section">
<h2>Contact</h2>
<p>Email: sharmajitesh764@[Link]</p>
<p>Phone: +919310536322</p>
<p>Website: [Link]</p>
</div>
</div>
</body>
</html>
HTML code to design webpage for insurance company

<html>
<head>
<title>Insurance Company</title>
<style>
/* CSS styles go here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #003366;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f4f4f4;
padding: 10px 0;
text-align: center;
}
nav a {
margin: 0 10px;
color: #333;
text-decoration: none;
}
nav a:hover {
color: #003366;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
}
footer {
background-color: #003366;
color: #fff;
text-align: center;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Insurance Company</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<h2>Welcome to Our Insurance Company</h2>
<p> As an experienced life insurance agent, I understand the
importance of protecting your family’s financial security. With a passion
for providing personalized insurance solutions, I help my clients find the
right insurance coverage for their needs. Whether you need life
insurance, health insurance, or business protection policies, I am here to
provide customized coverage. </p>
</div>
<footer>
<p>&copy; 2024 Insurance Company. All rights reserved.</p>
</footer>
</body>
</html>
HTML code to design an online shopping form
<html>
<head>
<title>Online Shopping Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
}
label {
font-weight: bold;
}
input[type="text"], input[type="email"], select {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 20px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Online Shopping Form</h2>
<form action="#" method="post">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Your full
name.." required>

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your email.."
required>

<label for="address">Address</label>
<input type="text" id="address" name="address" placeholder="Your
address.." required>

<label for="product">Product</label>
<select id="product" name="product" required>
<option value="">Select a product..</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>

<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="1" max="10"
required>

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


</form>
</div>
</body>
</html>
HTML code to design a webpage for “FOOD CORNER”.
Using Form

<html>
<head>
<title>Food Corner</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"], input[type="email"], input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Food Corner</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
HTML code to insert frame
<html>
<head>
<title>Frame Example</title>
</head>
<frameset cols="25%,75%">
<frame src="[Link]" name="frame1">
<frame src="[Link]" name="frame2">
</frameset>
</html>

You might also like