What is HTML?
HTML (Hyper Text Markup Language) is introduced by Tim-Berners-Lee in 1991 as a
standard of creating web pages for websites. It is a markup language used to define some
elements such as headings, paragraphs, links and images. It is a Backbone for web content.
A web page can display text, images, and videos.
Key points:
Html is a web based language used to display the web sites.
We save the html file as .html or .htm files.
Html is like a skeleton for building the websites.
There are several versions in HTML as HTML5 which was current version.
Features of HTML:
It is a platform independent. For example chrome displays same web pages in different
operating systems like windows and Mac Os.
It shows audios, videos, and text in web pages as like youtube has multiple content.
Html is a markup language not a programming language.It can be integrated with other
languages such as css and javascript
1
History of HTML:
In 1989, Tim Berners-Lee established the World Wide Web (www), and in 1991, he created
the first version of HTML.
From 1995 to 1997, further work was done to develop and refine different versions of
HTML.
In 1999, a committee was organized that standardized HTML 4.0, a version still used by
many today.
The latest and most stable version of HTML is 5, also known as HTML5.
How do websites work?
When we want to access any information on the internet, we search for it using a web
browser. The web browser retrieves the content from web servers, where it is stored in the
form of HTML documents.
An HTML document is created by writing code with specific tags in a code editor of your
choice. The document is then saved with the '.html' extension. Once saved, the browser
interprets the HTML document, reads it, and renders the web page.
The text editor has the HTML code of a website. This website can now be viewed in a
beautifully rendered format using a computer program known as a web browser.
What is a Web Browser?
A web browser is a program that understands HTML tags and renders them in a human-
readable format that is easily viewable by people visiting the website. Developers write
code in HTML because it's a straightforward way to instruct the web browser on what to
display. In the next section, I'll show you how to set up VS Code for writing your own HTML
code and rendering it in a web browser.
What is an HTML Document?
An HTML document is a text document saved with the '.html' or '.htm' extension, containing
text and specific tags enclosed in '< >'. These tags provide the necessary instructions for
configuring the web page. The tags themselves are standardized and fixed. The structure of
an HTML document will be explained later in this HTML tutorial.
What is a Rendered Page:
The rendered page is the output screen of our HTML Document which is the page displayed
on the browser.
How does a basic website work?
2
Web Browser(client) requests websites like www.codewithharry.com from the web server.
Web server in return sends HTML, CSS, and JavaScript files to it.
HTML, CSS, and JavaScript files are parsed by a web browser which is responsible for
showing you a beautiful website.
How does a browser work?
A web browser plays a crucial role in parsing and rendering HTML code to the client. A web
browser is a complex program that performs many tasks behind the scenes. Here's a
summary of how it works:
A browser is an application that reads HTML documents and displays them as web pages.
Browsers can't access the content directly from where it's stored; this is where servers come
into play.
A server acts as an intermediary, listening to browser requests and fulfilling them by
delivering the HTML document to the browser.
Web browsers perform two main tasks: parsing and rendering.
During the parsing stage, the browser receives raw bytes, which are converted into
characters. These characters are then converted into tokens, which in turn are transformed
into nodes. These nodes are organized into a tree-like data structure known as the DOM
(Document Object Model).
Once the DOM tree is constructed, the browser moves on to the rendering stage. At this
point, each node in the DOM tree is rendered and displayed on the screen.
3
Basic format of HTML:
Create a new file:
Click on ‘New file’ in any editor.
Type the filename as “index.html” and hit Enter.
Syntax of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- content -->
</body>
</html>
A typical HTML page looks like this:
<html>
<head>
<title>Page title</title>
</head>
<body>
4
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Summary:
The <!DOCTYPE html> tag specifies that the document is an HTML5 document.
The <html lang="en"> tag defines the document to be in English.
The <head> section contains metadata and the title of the webpage, which appears
in the browser's title bar.
The <body> section contains the content that will be displayed on the webpage.
The h1 and p are two types of tags. We will learn about more tags in the later
section.
Pictorial Representation of Tags:
The image below offers a visual representation of how tags are structured in HTML. As you
can see, an element can contain other elements, which may also contain additional
elements, forming a tree-like structure. This hierarchy can include self-closing tags as well as
nested tags, as illustrated in the picture.
HTML Tags:
For making beautiful websites, tags are essential elements that you achieve that. Tags are
like containers for other html tags. We represent them as <HTML TAG>. They help web
browser that how it should need to display the content.
Document structure Tags:
<Doctype html>: Specifies the document type.
<Html>: Encloses the entire html document.
<Head>: Contains Meta information and Headings.
<Body>: Contains the content of the web page.
Metadata Tags:
<Title>: Sets the title of the web page.
<Meta>: provides metadata such as character set, author and viewport settings.
<Link>: It links external resourses like style sheets.
5
Text Formatting Tags:
<p> : This is used to create a paragraph.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> : These are used for size of the headings.
<strong> : typically bold.
<em> : typically italic.
<br> : Line break.
<hr> : horizontal rule.
List Tags:
<ol> : ordered list.
<ul> : unordered list.
<li> : list item.
Hyperlink and Media Tags:
<a> : anchor tag.(Used for links hyperlinks)
<img> : image display.
<audio> : audio content.
<video> : video content.
Form Tags:
<form> : creates a form.
<input> : input field.
<textarea> : creates a text area.
<button> : creates a button.
<select> : dropdown list.
<option> : options with in a <select> or <datalist>.
Table Tags :
<table>: creates a table.
<tr> : creates a table row.
<td> : table data cell.
<th> : creates a header cell.
<thead> : table header group.
<tbody> : table body group.
<tfoot> : table footer groups.
Semantic Tags:
<header> : creates a header section.
<footer> : creates a footer section.
<article> : creates an article.
6
<section> : creates an section.
<nav> : creates a navigation.
<aside> : sidebar content.
First HTML program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kotas Web Development Course</title>
</head>
<body>
Hey there this is suresh.
How are you?
What are u doing?
7
</body>
</html>
Linking HTML with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>title of the page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
content
</body>
</html>
Style.css FILE:
body{
Background-color: red;
HTML ATTRIBUTES:
Html attributes are used for defining characteristics of Html. It has two parts name and
value. And there types are:
Id
Title
Class
Style
8
Program using Id attribute:
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
</head>
<body>
<h1 id="highlight">This is a heading with an ID</h1>
<p>This is a regular paragraph.</p>
</body>
</html>
Program using title attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title Attribute Example</title>
</head>
<body>
<p title="This is extra info shown on hover.">
Hover over this paragraph to see the tooltip.
</p>
<a href="https://example.com" title="Go to Example.com">Visit Example</a>
</body>
</html>
9
Program using class attribute:
<!DOCTYPE html>
<html>
<head>
<title>Class Attribute Example</title>
</head>
<body>
<h1 class="title">Welcome to My Website</h1>
<p class="intro">This is an introductory paragraph.</p>
<div class="container">
<p class="content">This is some content inside a container.</p>
</div>
</body>
</html>
Program using style attribute:
<!DOCTYPE html>
<html>
<head>
<title>Attribute Style Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Hello, World!</h1>
<p style="font-size: 18px; color: green;">This is a paragraph with inline CSS using the style
attribute.</p>
</body>
</html>
10
What are Inline Elements?
Inline elements do not start on a new line and only take up as much width as necessary.
They are part of the flow within other elements.
Inline elements can contain other inline elements, but they generally should not contain
block-level elements. For example, you could nest a <strong> (strong emphasis) element
within a <span> (a generic inline container) element, like so:
<span>This is <strong>important</strong> text.</span>
Common Inline Elements
<span>: A generic inline container for text
<a>: Defines a hyperlink
<strong>: Defines important text
<em>: Defines emphasized text
<img>: Embeds an image
<input>: Defines an input control
Examples for inline elements:
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p>This is an <strong>inline</strong> example with <em>italic</em> and <span
style="color: red;">colored</span> text.</p>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<title>More Inline Elements</title>
</head>
<body>
<p>Click <a href="https://www.google.com">here</a> to visit Google.</p>
<p>This word is <mark>highlighted</mark> using an inline element.</p>
</body>
</html>
What are Block-level Elements?
Block-level elements are those that start on a new line and take up the entire width of their
container by default. They essentially claim all the horizontal space for themselves, pushing
any content that comes after them to a new line.
Characteristics of Block-level Elements:
Always start on a new line.
Take up the full width available.
Width and height can be controlled via CSS.
Can contain other block-level as well as inline elements.
Common Block-level Elements:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Headings
<p> - Paragraphs
<hr> - Horizontal rule
<address> - Address information
<article> - Article content
12
<aside> - Sidebar content
<blockquote> - Block quotations
<canvas> - Drawing area
<dd> - Description in a description list
<div> - Generic container
<dl> - Description list
<dt> - Term in a description list
<fieldset> - Group of related form elements
<figcaption> - Caption for a figure
<figure> - Image or media with a caption
<footer> - Footer of a section or page
<form> - HTML form
<header> - Header of a section or page
<li> - List item
<main> - Main content of a document
<nav> - Navigation links
<noscript> - Alternate content when JavaScript is not enabled
<ol> - Ordered list
<ul> - Unordered list
<pre> - Preformatted text
<section> - Standalone section in a document
<table> - Table
<video> - Video content
13
Examples for block elements:
<!DOCTYPE html>
<html>
<head>
<title>More Block Elements</title>
</head>
<body>
<header>
<h2>This is a Header Section</h2>
</header>
<section>
<p>This is a section with a paragraph inside it.</p>
</section>
</body>
</html>
Another example:
<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<h1>This is a Heading (Block Element)</h1>
<p>This is a paragraph (Block Element)</p>
14
<div style="background-color: lightblue; padding: 10px;">This is a div block</div>
</body>
</html>
Types of HTML Lists
HTML provides different types of lists to display data in various forms. Each list contains one
or more list items.
Unordered List: Displays items using bullets.
Ordered List: Displays items in a numerical sequence, and supports various numbering
styles like Arabic numerals, Roman numerals, and so on.
Definition List: Organizes items in a format similar to a dictionary, with terms and their
corresponding definitions.
Example for unordered list:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
15
Example for ordered list:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>Steps to Make Tea</h2>
<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Add sugar and milk</li>
<li>Strain into a cup</li>
</ol>
</body>
</html>
Example for definition list:
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h2>Web Development Terms</h2>
<dl>
16
<dt>HTML</dt>
<dd>HyperText Markup Language - used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to make web pages interactive.</dd>
</dl>
</body>
</html>
HTML Tables
HTML tables allow you to arrange data like text, images, and links in rows and columns. You
use the <table> tag to start and end a table.
Syntax of HTML Table
<table> // table content</table>
Key Elements of HTML Table
<table>: Defines the table itself.
<tr>: Used for table rows.
<th>: Used for table headings.
<td>: Used for table cells (data).
Basic Table Structure
<table>
<tr>
<th>Name</th>
17
<th>Age</th>
</tr>
<tr>
<td>Harry</td>
<td>100</td>
</tr>
</table>
rowspan and colspan Attributes:
Rowspan: If you want a table cell to span multiple rows, you can use the rowspan attribute.
<td rowspan="value">
Colspan: If you want a table cell to span multiple columns, you can use the colspan attribute.
<td colspan="value">
Visual representation of rowspan and colspan:
Examples
Here are simple examples to demonstrate the use of rowspan and colspan in HTML tables.
Example for Colspan:
<table border="1">
<tr>
<td colspan="2">Merged Columns</td>
</tr>
<tr>
<td>Column 1</td>
18
<td>Column 2</td>
</tr>
</table>
Example for rowspan:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td rowspan="2">Merged Rows</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
</tr>
</table>
Sample Html program includes important elements:
<table border="1">
<!-- Caption -->
<caption>Employee Information</caption>
<!-- Table Header -->
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
19
</thead>
<!-- Table Body -->
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
<td>Manager</td>
<td>$90,000</td>
</tr>
</tbody>
<!-- Table Footer -->
<tfoot>
20
<tr>
<td colspan="3">Total Employees</td>
<td>3</td>
</tr>
</tfoot>
</table>
Introduction to HTML Forms
HTML forms are essential for collecting user input on web pages. Whether it's a search bar,
a login screen, or a multi-field registration form, HTML forms play a key role in web
interactions. They enable users to submit data, which can be processed, stored, or returned
by a server.
Why Do We Use Forms?
Forms serve as the gateway between the user and the server, allowing for dynamic,
interactive web experiences. They are crucial for tasks such as user authentication, data
submission, feedback collection, and more. Simply put, forms make websites more engaging
and functional.
HTML Forms Structure:
The fundamental structure of an HTML form is encapsulated within the <form> tags. Inside
these tags, you'll place various form controls like text fields, checkboxes, radio buttons, and
buttons for submitting the form.
<form action="/submit" method="post">
<!-- Text input for username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
21
<br><br>
<!-- Radio buttons for gender -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
How to Use Form Controls?
The <input> tag is commonly used to create form controls. The attributes of this tag define
the control's behavior.
<input type="" name="" value="">
The "type" attribute specifies the type of input control (e.g., text, password, checkbox).
The "name" attribute is used for identifying the control, especially when the data is sent to
the server.
The "value" attribute sets a default value for the control, which the user can overwrite.
HTML Input Types
Input types in HTML forms are the backbone of interactive web applications. They allow
users to send information to web servers for various purposes like searching, logging in, or
providing feedback. In this blog, we'll explore common HTML input types: text, password,
radio, and checkbox.
22
Text Input
The text input type is the most basic form of input and is widely used for collecting simple
text data.
<input type="text" name="username" placeholder="Enter your username">
In the above example, the placeholder attribute provides a hint to the user about what to
enter.
Password Input
The password input type is similar to the text type but hides the characters entered by the
user for security reasons.
<input type="password" name="password" placeholder="Enter your password">
Radio Buttons
Radio buttons are used when you want the user to select only one option from a set of
choices.
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
Checkbox
Checkboxes allow the user to select multiple options from a set.
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
More Input Types
Here is a comprehensive list of input types you can use in HTML:
Input Type Description
text Allows the user to type a single line of text.
password Allows the user to type a password.
23
Input Type Description
submit Represents a button that, when pressed, submits the form.
Represents a button that, when pressed, resets all the form controls to
reset their initial values.
Represents an option in a set of options that are mutually exclusive with
radio each other.
Represents an option in a set that may be selected independently of other
checkbox options.
button Represents a clickable button.
color Allows the user to select a color.
date Allows the user to select a date.
datetime-
local Allows the user to select a date and time with no time zone.
email Allows the user to enter an email address.
file Allows the user to select one or more files from their device storage.
hidden Represents a value that is not displayed but is submitted to the server.
image Defines an image that acts as a submit button.
24
Input Type Description
month Allows the user to select a month and year.
number Allows the user to enter a number.
range Allows the user to select a number from a range.
search Allows the user to enter a search query string.
tel Allows the user to enter a telephone number.
time Allows the user to select a time.
url Allows the user to enter a URL.
week Allows the user to select a week.
Textarea & Select
In addition to the basic input types, HTML forms offer other controls
like textarea and select for richer user interaction. These elements allow for more complex
data collection and provide a better user experience.
For example:
<form action="/submit">
<textarea name="comment" rows="4" cols="50">Enter your comment
here...</textarea>
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
25
<option value="cherry">Cherry</option>
</select>
<input type="submit" value="Submit">
</form>
The <link> Tag:
The <link> tag is commonly used to link external stylesheets to an HTML document. It's a
self-closing tag, meaning it doesn't require a closing tag.
Below is an example HTML code snippet that includes a <link> tag to link an external
stylesheet:
<link rel="stylesheet" type="text/css" href="styles.css">
The <script> Tag:
The <script> tag is used to include JavaScript code or files in an HTML document. Unlike
the <link> tag, the <script> tag must be closed with a </script> tag.
Below is an example HTML code snippet that includes a <script> tag to link an external
JavaScript file:
<script src="script.js" type="text/javascript"></script>
The <video> Tag
The <video> tag is used to embed video files in an HTML document. It supports multiple
attributes to control the video playback.
Example usage:
<video src="video.mp4" controls></video>
Attributes for <video> Tag:
src: Specifies the path to the video file.
controls: Adds video controls, like play, pause, and volume.
autoplay: Automatically starts playing the video when the page loads.
loop: Repeats the video once it ends.
muted: Mutes the video by default.
poster: Specifies an image to be displayed before the video starts playing.
26
width and height: Specifies the dimensions of the video.
The <audio> Tag
The <audio> tag is used to embed audio files in an HTML document. It also supports multiple
attributes for control.
Example usage:
<audio src="audio.mp3" controls></audio>
Attributes for <audio> Tag:
src: Specifies the path to the audio file.
controls: Adds audio controls, like play, pause, and volume.
autoplay: Automatically starts playing the audio when the page loads.
loop: Repeats the audio once it ends.
muted: Mutes the audio by default.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio and Video Example</title>
</head>
<body>
<h2>🎧 Audio Player</h2>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
27
<hr>
<h2>🎥 Video Player</h2>
<video width="640" height="360" controls>
<source src="video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Single Page HTML Portfolio Website
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1 align="center">My Portfolio</h1>
<p align="center">
<a href="#home">Home</a> |
<a href="#about">About Me</a> |
<a href="#projects">Projects</a> |
<a href="#skills">Skills</a> |
<a href="#contact">Contact</a>
</p>
<hr>
28
<!-- Home Section -->
<h2 id="home">Home</h2>
<p>Hello! I'm <b>[Your Name]</b>, a passionate web developer and technology
enthusiast.</p>
<!-- About Me Section -->
<h2 id="about">About Me</h2>
<p>I am currently pursuing my B.Tech in Information Technology with a focus on Full Stack
Development, Networking, and Cybersecurity.</p>
<p>I love building websites and learning new technologies.</p>
<!-- Projects Section -->
<h2 id="projects">Projects</h2>
<ul>
<li><b>Student Attendance Management System:</b> A web-based system to manage
daily and subject-wise attendance using Oracle DB.</li>
<li><b>Cardboard Projector:</b> A DIY project using waste materials to create a
functioning projector.</li>
<li><b>Personal Portfolio Website:</b> A showcase of my work, built using HTML, CSS,
and JavaScript.</li>
</ul>
<!-- Skills Section -->
<h2 id="skills">Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Oracle, MS SQL Server</li>
<li>PL/SQL, SQL Queries</li>
29
<li>Cybersecurity & Networking Basics</li>
<li>Git & GitHub</li>
</ul>
<!-- Contact Section -->
<h2 id="contact">Contact</h2>
<p><b>Email:</b> [email protected]</p>
<p><b>Phone:</b> +91-9876543210</p>
<p><b>LinkedIn:</b> <a
href="https://linkedin.com/in/yourprofile">linkedin.com/in/yourprofile</a></p>
<p><b>GitHub:</b> <a
href="https://github.com/yourusername">github.com/yourusername</a></p>
<hr>
<p align="center">© 2025 [Your Name]. All rights reserved.</p>
</body>
</html>
Multi-page school website
1. index.html – Home
2. about.html – About Us
3. academics.html – Academics
4. contact.html – Contact
30
1.index.html
<!DOCTYPE html>
<html>
<head>
<title>Sunrise Public School - Home</title>
</head>
<body>
<h1 align="center">Sunrise Public School</h1>
<h3 align="center">Knowledge | Discipline | Excellence</h3>
<hr>
<p align="center">
<a href="index.html">Home</a> |
<a href="about.html">About Us</a> |
<a href="academics.html">Academics</a> |
<a href="contact.html">Contact</a>
</p>
<hr>
<h2>Welcome to Sunrise Public School</h2>
<p>We are committed to nurturing young minds through quality education and a values-
based learning environment.</p>
<hr>
<p align="center">© 2025 Sunrise Public School</p>
</body>
</html>
31
2. about.html
<!DOCTYPE html>
<html>
<head>
<title>Sunrise Public School - About Us</title>
</head>
<body>
<h1 align="center">Sunrise Public School</h1>
<h3 align="center">Knowledge | Discipline | Excellence</h3>
<hr>
<p align="center">
<a href="index.html">Home</a> |
<a href="about.html">About Us</a> |
<a href="academics.html">Academics</a> |
<a href="contact.html">Contact</a>
</p>
<hr>
<h2>About Us</h2>
<p>Founded in 2001, Sunrise Public School has grown to become one of the most
respected schools in the region, focusing on academic success, character building, and
leadership development.</p>
<hr>
<p align="center">© 2025 Sunrise Public School</p>
</body>
</html>
32
3. Academics.html
<!DOCTYPE html>
<html>
<head>
<title>Sunrise Public School - About Us</title>
</head>
<body>
<h1 align="center">Sunrise Public School</h1>
<h3 align="center">Knowledge | Discipline | Excellence</h3>
<hr>
<p align="center">
<a href="index.html">Home</a> |
<a href="about.html">About Us</a> |
<a href="academics.html">Academics</a> |
<a href="contact.html">Contact</a>
</p>
<hr>
<h2>About Us</h2>
<p>Founded in 2001, Sunrise Public School has grown to become one of the most
respected schools in the region, focusing on academic success, character building, and
leadership development.</p>
<hr>
<p align="center">© 2025 Sunrise Public School</p>
</body>
</html>
33
4. contact.html
<!DOCTYPE html>
<html>
<head>
<title>Sunrise Public School - About Us</title>
</head>
<body>
<h1 align="center">Sunrise Public School</h1>
<h3 align="center">Knowledge | Discipline | Excellence</h3>
<hr>
<p align="center">
<a href="index.html">Home</a> |
<a href="about.html">About Us</a> |
<a href="academics.html">Academics</a> |
<a href="contact.html">Contact</a>
</p>
<hr>
<h2>About Us</h2>
<p>Founded in 2001, Sunrise Public School has grown to become one of the most
respected schools in the region, focusing on academic success, character building, and
leadership development.</p>
<hr>
<p align="center">© 2025 Sunrise Public School</p>
</body>
</html>
34
