Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
Introduction To HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C Recommendation: HTML5.2 |
A Simple HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the HTML page - The
<title>element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) - The
<body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>element defines a large heading - The
<p>element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| Start Tag | Element Content | End Tag |
| <h1> | My First Heading | </h1> |
| <p> | My First Paragraph | </p> |
| <br> | none | none |
HTML Editors
A simple text editor is all you need to learn HTML.
Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<img src="E:\media images\d.jfif" alt="laxmicomputer" width="100" height="100">
</body>
</html>
HTML attributes provide additional information about HTML elements.
HTML Attributes
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<a href="https://www.laxmicomputerindia.com">This is a link</a>
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a paragraph.</p>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Background Color
The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Certainly! Below is a simple HTML code for a basic website structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Website</title>
<style>
/* CSS styles can also be included within <style> tags in the head section */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Simple Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>About Us</h2>
<p>This is a simple website created using HTML.</p>
</section>
<footer>
<p>© 2024 My Simple Website. All rights reserved.</p>
</footer>
</body>
</html>
Creating a website for a mobile shop in HTML involves several steps including designing the layout, creating pages for products, and ensuring functionality such as navigation and contact forms. Below is a basic example of how you can structure such a website. This example includes HTML and CSS for basic styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shop</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
.container {
width: 80%;
margin: 20px auto;
}
.product {
float: left;
width: 30%;
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.product img {
width: 100%;
height: auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Mobile Shop</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#contact">Contact</a>
</nav>
<div class="container" id="home">
<h2>Welcome to our Mobile Shop!</h2>
<p>We offer a wide range of mobile phones at competitive prices.</p>
</div>
<div class="container" id="products">
<h2>Our Products</h2>
<div class="product">
<img src="E:\media images\mobile.jpeg" alt="iPhone">
<h3>iPhone</h3>
<p>$999</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="E:\media images\samsung.jpeg" alt="Samsung">
<h3>Samsung</h3>
<p>$899</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="E:\media images\googlep.jpeg" alt="Google Pixel">
<h3>Google Pixel</h3>
<p>$799</p>
<button>Add to Cart</button>
</div>
</div>
<div class="container" id="contact">
<h2>Contact Us</h2>
<p>Email: info@example.com</p>
<p>Phone: 123-456-7890</p>
<p>Address: 123 Main St, City, Country</p>
</div>
<footer>
<p>© 2024 Mobile Shop. All rights reserved.</p>
</footer>
</body>
</html>
Creating a website for an Indian festival involves incorporating vibrant colors, traditional elements, and information about the festival's significance, rituals, and celebrations. Below is a basic example of how you can structure such a website for a popular festival like Diwali:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diwali Festival</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #f57c00;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav {
background-color: #ffa726;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container h2 {
color: #f57c00;
}
.container p {
line-height: 1.6;
}
footer {
background-color: #f57c00;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Diwali Festival</h1>
</header>
<nav>
<a href="#about">About Diwali</a>
<a href="#rituals">Rituals</a>
<a href="#celebrations">Celebrations</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</nav>
<div class="container" id="about">
<h2>About Diwali</h2>
<p>Diwali, also known as the Festival of Lights, is one of the most important festivals celebrated by Hindus across the world. It signifies the victory of light over darkness, good over evil, and knowledge over ignorance.</p>
<p>The festival usually lasts for five days, during which people clean and decorate their homes, light oil lamps (diyas), burst fireworks, exchange gifts, and sweets.</p>
</div>
<div class="container" id="rituals">
<h2>Rituals</h2>
<p>Diwali is marked by various rituals and traditions such as:</p>
<ul>
<li>Decorating homes with rangoli (colorful patterns made on the floor), flowers, and lights</li>
<li>Offering prayers to Goddess Lakshmi, the goddess of wealth and prosperity</li>
<li>Exchanging gifts and sweets with friends and family</li>
<li>Bursting fireworks to ward off evil spirits</li>
</ul>
</div>
<div class="container" id="celebrations">
<h2>Celebrations</h2>
<p>Diwali is celebrated with great enthusiasm and fervor. People dress in new clothes, visit temples, and participate in community events and cultural programs.</p>
<p>The night sky is lit up with fireworks, and homes are illuminated with diyas and colorful lights. Families come together to share delicious meals and sweets, fostering a sense of joy and togetherness.</p>
</div>
<div class="container" id="gallery">
<h2>Gallery</h2>
<p>Images and videos of Diwali celebrations</p>
<!-- Add your image gallery here -->
</div>
<div class="container" id="contact">
<h2>Contact Us</h2>
<p>Email: info@diwali.com</p>
<p>Phone: 123-456-7890</p>
<p>Address: 123 Main St, City, Country</p>
</div>
<footer>
<p>© 2024 Diwali Festival. All rights reserved.</p>
</footer>
</body>
</html>
Creating a website for the Indian cricket team would typically involve showcasing information about the team, its players, matches, achievements, and latest news. Below is a basic example of how you can structure such a website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Cricket Team</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #008cba;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav {
background-color: #005b80;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container h2 {
color: #008cba;
}
.container p {
line-height: 1.6;
}
footer {
background-color: #008cba;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Indian Cricket Team</h1>
</header>
<nav>
<a href="#about">About</a>
<a href="#players">Players</a>
<a href="#matches">Matches</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</nav>
<div class="container" id="about">
<h2>About Indian Cricket Team</h2>
<p>The Indian cricket team, also known as Team India, represents the country of India in international cricket. It is governed by the Board of Control for Cricket in India (BCCI).</p>
<p>India is one of the leading cricketing nations and has achieved success in all formats of the game, including Test cricket, One Day Internationals (ODIs), and Twenty20 Internationals (T20Is).</p>
</div>
<div class="container" id="players">
<h2>Players</h2>
<p>List of current players:</p>
<ul>
<li>Virat Kohli</li>
<li>Rohit Sharma</li>
<li>Jasprit Bumrah</li>
<li>Ravindra Jadeja</li>
<!-- Add more players -->
</ul>
</div>
<div class="container" id="matches">
<h2>Matches</h2>
<p>Upcoming and recent matches:</p>
<ul>
<li>India vs England - Test Series</li>
<li>India vs Australia - ODI Series</li>
<li>India vs Pakistan - T20I Match</li>
<!-- Add more matches -->
</ul>
</div>
<div class="container" id="news">
<h2>News</h2>
<p>Latest news and updates:</p>
<!-- Add news articles -->
</div>
<div class="container" id="contact">
<h2>Contact Us</h2>
<p>Email: info@indiancricket.com</p>
<p>Phone: 123-456-7890</p>
<p>Address: 123 Main St, City, Country</p>
</div>
<footer>
<p>© 2024 Indian Cricket Team. All rights reserved.</p>
</footer>
</body>
</html>
Creating a basic website for a computer institute using HTML involves structuring the content and designing the layout. Below is a simple example of how you can create such a website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Institute</title>
<style>
/* Basic CSS styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
section {
padding: 20px;
margin: 20px 0;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Computer Institute</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<h2>Welcome to our Computer Institute!</h2>
<p>We offer a variety of courses to help you enhance your computer skills.</p>
</section>
<section id="courses">
<h2>Our Courses</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Programming</li>
<li>Networking</li>
</ul>
</section>
<section id="about">
<h2>About Us</h2>
<p>We are a leading computer institute dedicated to providing quality education in various fields of computer science.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Address: 123 Main Street, Cityville</p>
<p>Phone: 123-456-7890</p>
<p>Email: info@computerinstitute.com</p>
</section>
<footer>
© 2024 Computer Institute. All rights reserved.
</footer>
</body>
</html>
To create a dropdown menu in HTML, you can use the <select> and <option> elements. Here's a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu Example</title>
</head>
<body>
<h2>Select a Fruit:</h2>
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="mango">Mango</option>
</select>
<h3>You selected: <span id="selectedFruit"></span></h3>
<script>
// JavaScript code to handle the selection
document.getElementById('fruits').addEventListener('change', function() {
var selectedValue = document.getElementById('fruits').value;
document.getElementById('selectedFruit').innerText = selectedValue;
});
</script>
</body>
</html>
Example of an HTML calculator:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.calculator {
width: 300px;
margin: 50px auto;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
}
.calculator input[type="button"] {
width: 48%;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
cursor: pointer;
}
.calculator input[type="button"]:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<input type="button" value="1" onclick="addToDisplay('1')">
<input type="button" value="2" onclick="addToDisplay('2')">
<input type="button" value="3" onclick="addToDisplay('3')">
<input type="button" value="+" onclick="addToDisplay('+')">
<input type="button" value="4" onclick="addToDisplay('4')">
<input type="button" value="5" onclick="addToDisplay('5')">
<input type="button" value="6" onclick="addToDisplay('6')">
<input type="button" value="-" onclick="addToDisplay('-')">
<input type="button" value="7" onclick="addToDisplay('7')">
<input type="button" value="8" onclick="addToDisplay('8')">
<input type="button" value="9" onclick="addToDisplay('9')">
<input type="button" value="*" onclick="addToDisplay('*')">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="0" onclick="addToDisplay('0')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="addToDisplay('/')">
</div>
<script>
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var expression = document.getElementById('display').value;
var result = eval(expression);
document.getElementById('display').value = result;
}
</script>
</body>
</html>
Create Salary Report
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salary Report Calculation</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<header>
<h1>Salary Report Calculation</h1>
</header>
<main>
<form id="salaryForm">
<label for="basicSalary">Basic Salary:</label>
<input type="number" id="basicSalary" name="basicSalary" required><br><br>
<label for="allowances">Allowances:</label>
<input type="number" id="allowances" name="allowances" value="0"><br><br>
<label for="deductions">Deductions:</label>
<input type="number" id="deductions" name="deductions" value="0"><br><br>
<button type="button" onclick="calculateSalary()">Calculate</button>
</form>
<div id="salaryReport">
<!-- Salary report will be displayed here -->
</div>
</main>
<script>
function calculateSalary() {
// Get input values
var basicSalary = parseFloat(document.getElementById('basicSalary').value);
var allowances = parseFloat(document.getElementById('allowances').value);
var deductions = parseFloat(document.getElementById('deductions').value);
// Calculate gross salary
var grossSalary = basicSalary + allowances;
// Calculate net salary
var netSalary = grossSalary - deductions;
// Display salary report
var salaryReport = "<h2>Salary Report</h2>";
salaryReport += "<p><strong>Basic Salary:</strong> $" + basicSalary.toFixed(2) + "</p>";
salaryReport += "<p><strong>Allowances:</strong> $" + allowances.toFixed(2) + "</p>";
salaryReport += "<p><strong>Deductions:</strong> $" + deductions.toFixed(2) + "</p>";
salaryReport += "<p><strong>Gross Salary:</strong> $" + grossSalary.toFixed(2) + "</p>";
salaryReport += "<p><strong>Net Salary:</strong> $" + netSalary.toFixed(2) + "</p>";
document.getElementById('salaryReport').innerHTML = salaryReport;
}
</script>
</body>
</html>
Create Admission Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Admission Form</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<header>
<h1>Student Admission Form</h1>
</header>
<main>
<form id="admissionForm" action="submit.php" method="post">
<label for="firstName">First Name:</label><br>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label><br>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="dateOfBirth">Date of Birth:</label><br>
<input type="date" id="dateOfBirth" name="dateOfBirth" required><br><br>
<label for="gender">Gender:</label><br>
<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="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="phoneNumber">Phone Number:</label><br>
<input type="tel" id="phoneNumber" name="phoneNumber" pattern="[0-9]{10}" required><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" required></textarea><br><br>
<label for="courses">Courses:</label><br>
<input type="checkbox" id="course1" name="courses" value="Mathematics">
<label for="course1">Mathematics</label><br>
<input type="checkbox" id="course2" name="courses" value="Science">
<label for="course2">Science</label><br>
<input type="checkbox" id="course3" name="courses" value="English">
<label for="course3">English</label><br><br>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<p>© 2024 Student Admission Form</p>
</footer>
</body>
</html>
Railway Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Railway Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
nav a:hover {
background-color: #555;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Railway Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome to our Railway Website</h2>
<p>This website provides information about our railway services, including schedules, ticket prices, and more.</p>
<p>Explore the links above to learn more about us.</p>
</section>
<footer>
© 2024 Railway Website. All rights reserved.
</footer>
</body>
</html>
Hotel Booking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel Booking</title>
<style>
/* Basic CSS styles can be added here */
</style>
</head>
<body>
<header>
<h1>Hotel Booking</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#rooms">Rooms</a></li>
<li><a href="#booking">Bookings</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Welcome to Our Hotel</h2>
<p>Discover comfort and luxury in our hotel rooms.</p>
</section>
<section id="rooms">
<h2>Our Rooms</h2>
<div class="room">
<h3>Standard Room</h3>
<p>Description of the standard room.</p>
<button onclick="bookRoom('standard')">Book Now</button>
</div>
<div class="room">
<h3>Deluxe Room</h3>
<p>Description of the deluxe room.</p>
<button onclick="bookRoom('deluxe')">Book Now</button>
</div>
<!-- Add more room options as needed -->
</section>
<section id="booking">
<h2>Bookings</h2>
<!-- Booking form can be added here -->
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Contact information goes here.</p>
</section>
<footer>
<p>© 2024 Hotel Booking. All rights reserved.</p>
</footer>
<script>
function bookRoom(roomType) {
// You can add JavaScript code here to handle room booking
alert("You have booked the " + roomType + " room.");
}
</script>
</body>
</html>
Hospital data in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Data Management</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Hospital Data Management</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>45</td>
<td>Male</td>
<td>Injury</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</body>
</html>
Attandence sheet in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance Sheet</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Attendance Sheet</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Jane Smith</td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox" checked></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</body>
</html>
Create Multiple Type Question & Answers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Choice Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.question {
margin-bottom: 20px;
}
.result {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Multiple Choice Quiz</h1>
<form id="quizForm">
<div class="question">
<p>1. What is the capital of France?</p>
<input type="radio" id="q1a" name="q1" value="a">
<label for="q1a">a) Berlin</label><br>
<input type="radio" id="q1b" name="q1" value="b">
<label for="q1b">b) Madrid</label><br>
<input type="radio" id="q1c" name="q1" value="c">
<label for="q1c">c) Paris</label><br>
<input type="radio" id="q1d" name="q1" value="d">
<label for="q1d">d) Rome</label><br>
</div>
<div class="question">
<p>2. What is the largest planet in our solar system?</p>
<input type="radio" id="q2a" name="q2" value="a">
<label for="q2a">a) Earth</label><br>
<input type="radio" id="q2b" name="q2" value="b">
<label for="q2b">b) Jupiter</label><br>
<input type="radio" id="q2c" name="q2" value="c">
<label for="q2c">c) Mars</label><br>
<input type="radio" id="q2d" name="q2" value="d">
<label for="q2d">d) Venus</label><br>
</div>
<div class="question">
<p>3. Who wrote 'To Kill a Mockingbird'?</p>
<input type="radio" id="q3a" name="q3" value="a">
<label for="q3a">a) Harper Lee</label><br>
<input type="radio" id="q3b" name="q3" value="b">
<label for="q3b">b) Mark Twain</label><br>
<input type="radio" id="q3c" name="q3" value="c">
<label for="q3c">c) J.K. Rowling</label><br>
<input type="radio" id="q3d" name="q3" value="d">
<label for="q3d">d) Jane Austen</label><br>
</div>
<button type="button" onclick="checkAnswers()">Submit</button>
</form>
<div id="result" class="result"></div>
<script>
function checkAnswers() {
var correctAnswers = ['c', 'b', 'a'];
var userAnswers = [
document.querySelector('input[name="q1"]:checked'),
document.querySelector('input[name="q2"]:checked'),
document.querySelector('input[name="q3"]:checked')
];
var score = 0;
for (var i = 0; i < userAnswers.length; i++) {
if (userAnswers[i] && userAnswers[i].value === correctAnswers[i]) {
score++;
}
}
var resultText = "You got " + score + " out of " + correctAnswers.length + " correct.";
document.getElementById("result").innerText = resultText;
}
</script>
</body>
</html>
Create Simple Billing In HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billing System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
border: 1px solid #000;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.total {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Billing System</h1>
<form id="billingForm">
<table>
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price per Item</th>
<th>Total</th>
</tr>
</thead>
<tbody id="billingTable">
<tr>
<td><input type="text" name="itemName" placeholder="Item Name"></td>
<td><input type="number" name="quantity" value="1" min="1" onchange="calculateTotal(this)"></td>
<td><input type="number" name="price" value="0" min="0" step="0.01" onchange="calculateTotal(this)"></td>
<td class="total">$0.00</td>
</tr>
</tbody>
</table>
<button type="button" onclick="addItem()">Add Item</button>
<h2>Grand Total: $<span id="grandTotal">0.00</span></h2>
</form>
<script>
function calculateTotal(element) {
var row = element.parentElement.parentElement;
var quantity = row.querySelector('input[name="quantity"]').value;
var price = row.querySelector('input[name="price"]').value;
var total = quantity * price;
row.querySelector('.total').innerText = `$${total.toFixed(2)}`;
calculateGrandTotal();
}
function addItem() {
var table = document.getElementById('billingTable');
var row = table.insertRow();
row.innerHTML = `
<td><input type="text" name="itemName" placeholder="Item Name"></td>
<td><input type="number" name="quantity" value="1" min="1" onchange="calculateTotal(this)"></td>
<td><input type="number" name="price" value="0" min="0" step="0.01" onchange="calculateTotal(this)"></td>
<td class="total">$0.00</td>
`;
}
function calculateGrandTotal() {
var table = document.getElementById('billingTable');
var rows = table.getElementsByTagName('tr');
var grandTotal = 0;
for (var i = 0; i < rows.length; i++) {
var totalCell = rows[i].querySelector('.total');
if (totalCell) {
var total = parseFloat(totalCell.innerText.replace('$', ''));
grandTotal += total;
}
}
document.getElementById('grandTotal').innerText = grandTotal.toFixed(2);
}
</script>
</body>
</html>
