HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages. HTML defines the structure of a webpage by using elements such as headings, paragraphs, images, links, tables, and forms.
HTML is not a programming language. It is a markup language that tells the web browser how different parts of a webpage are organized.
After completing this lesson, students will be able to:
HTML is used to create the structure and content of websites.
For example, HTML can define:
A simple HTML page looks like:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to DSD Education</h1>
<p>Welcome to our computer education website.</p>
</body>
</html>Every basic HTML document generally follows a standard structure.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>
</html>| Tag | Purpose |
|---|---|
<!DOCTYPE html> |
Defines the document as HTML5 |
<html> |
Root element of the webpage |
<head> |
Contains information about the webpage |
<title> |
Sets the browser tab title |
<body> |
Contains visible webpage content |
HTML uses tags to define different types of content.
Example:
<h1>Welcome to DSD Education</h1>Here:
<h1> is the opening tag.Welcome to DSD Education is the content.</h1> is the closing tag.Most HTML elements have an opening and closing tag.
<p>This is a paragraph.</p>Some elements are void elements and do not require a closing tag.
Example:
<img src="student.jpg" alt="Student">
<br>
<hr>An HTML element generally consists of:
Opening Tag + Content + Closing Tag
Example:
<p>Learn computer skills with DSD Education.</p>The complete structure is called an HTML element.
Attributes provide additional information about an HTML element.
Example:
<a href="https://example.com">Visit Website</a>Here:
href is an attribute.Another example:
<img src="computer.jpg" alt="Computer">Here:
src specifies the image location.alt provides alternative text.HTML provides six levels of headings:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Small Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6><h1> is normally used for the main heading of a page, while <h2> to <h6> can be used for subheadings and sections.
The <p> tag is used to create paragraphs.
<p>
DSD Education provides computer and professional courses
for students and working professionals.
</p>Multiple paragraphs can be created using multiple <p> elements.
The <br> tag moves content to the next line.
<p>
DSD Education<br>
Computer Courses<br>
Digital Skills Training
</p>The <hr> tag creates a horizontal separator.
<hr>HTML provides several elements for formatting text.
<strong>Important Text</strong>
<em>Emphasized Text</em>
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<mark>Highlighted Text</mark>
<small>Small Text</small>H<sub>2</sub>OOutput represents H₂O.
X<sup>2</sup>Output represents X².
Comments are used to add notes inside HTML code.
Comments are not displayed on the webpage.
<!-- This is the main heading -->
<h1>DSD Education</h1>Comments are useful for organizing and explaining code.
The <a> tag is used to create hyperlinks.
<a href="https://example.com">Visit Website</a>To open a link in a new browser tab:
<a href="https://example.com" target="_blank">
Visit Website
</a>Links can be used for:
The <img> tag is used to display images.
<img src="computer.jpg" alt="Computer">Example with dimensions:
<img src="computer.jpg"
alt="Computer Training"
width="500"
height="300">| Attribute | Purpose |
|---|---|
src |
Specifies image location |
alt |
Alternative text |
width |
Image width |
height |
Image height |
alt important?Alternative text helps:
HTML provides different types of lists.
The <ul> tag creates a bullet list.
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>PowerPoint</li>
<li>Internet</li>
</ul>The <ol> tag creates a numbered list.
<ol>
<li>Computer Basics</li>
<li>MS Office</li>
<li>Internet</li>
<li>HTML</li>
</ol><dl>
<dt>HTML</dt>
<dd>Used to structure webpages.</dd>
<dt>CSS</dt>
<dd>Used to style webpages.</dd>
</dl>Tables are used to display data in rows and columns.
Important table elements include:
<table><tr> – Table Row<th> – Table Heading<td> – Table Data<caption> – Table title<thead> – Table header section<tbody> – Table body section<table border="1">
<caption>Student Details</caption>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Rahul</td>
<td>ADCA</td>
</tr>
<tr>
<td>102</td>
<td>Priya</td>
<td>ADCA</td>
</tr>
</tbody>
</table>In modern web development, table styling is normally handled with CSS rather than relying on the
borderattribute.
Forms are used to collect information from users.
Common uses include:
<form>
<label>Name:</label>
<input type="text">
<br><br>
<label>Email:</label>
<input type="email">
<br><br>
<button type="submit">Submit</button>
</form>HTML provides different types of input fields.
<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="submit"><form>
<label>Student Name:</label>
<input type="text" name="student_name">
<br><br>
<label>Email:</label>
<input type="email" name="email">
<br><br>
<label>Age:</label>
<input type="number" name="age">
<br><br>
<label>Date of Birth:</label>
<input type="date" name="dob">
<br><br>
<input type="submit" value="Register">
</form>Radio buttons are useful when the user needs to select one option from a group.
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>Checkboxes allow users to select multiple options.
<label>
<input type="checkbox" name="course" value="excel">
Advanced Excel
</label>
<label>
<input type="checkbox" name="course" value="digital-marketing">
Digital Marketing
</label>The <select> element creates a dropdown list.
<label>Select Course:</label>
<select name="course">
<option value="adca">ADCA</option>
<option value="excel">Advanced Excel</option>
<option value="tally">Tally Prime</option>
<option value="digital-marketing">Digital Marketing</option>
</select>The <textarea> element is used for longer text.
<label>Message:</label>
<textarea rows="5" cols="40">
</textarea>It can be used for:
Semantic HTML elements clearly describe the purpose of different parts of a webpage.
Common semantic elements include:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer><header>
<h1>DSD Education</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>Our Courses</h2>
<p>We offer professional computer courses.</p>
</section>
</main>
<footer>
<p>© 2026 DSD Education</p>
</footer>Semantic HTML improves structure, accessibility, and maintainability.
<div> and <span><div><div> is a generic block-level container.
<div>
<h2>Computer Course</h2>
<p>Learn essential computer skills.</p>
</div><span><span> is a generic inline container.
<p>
Learn <span>HTML</span> and CSS.
</p>CSS can later be used to style these elements.
HTML entities are used to display reserved characters and special symbols.
Examples:
< <
> >
& &
" "
SpaceFor example:
<p>5 < 10</p>Some common symbols can also be represented using entities, such as:
©
®
€The <audio> element can be used to add audio.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>The controls attribute provides playback controls.
The <video> element is used to display video.
<video width="600" controls>
<source src="training.mp4" type="video/mp4">
Your browser does not support video.
</video>Common video attributes include:
controlswidthheightautoplaymutedloopposterAutoplay behavior can be restricted by modern browsers, especially when audio is enabled.
Students can create an HTML webpage using Notepad or any code editor.
Open:
Start → Notepad
<!DOCTYPE html>
<html>
<head>
<title>ADCA Course</title>
</head>
<body>
<h1>Advanced Diploma in Computer Applications</h1>
<p>
Welcome to DSD Education. Learn computer applications
and develop practical digital skills.
</p>
<h2>Course Subjects</h2>
<ul>
<li>Computer Fundamentals</li>
<li>MS Word</li>
<li>MS Excel</li>
<li>Internet & Networking</li>
<li>HTML & CSS</li>
</ul>
</body>
</html>Save the file as:
index.htmlMake sure the file extension is .html.
Double-click the HTML file.
It will open in a web browser such as Chrome, Edge, or Firefox.
Students can create a simple ADCA Course Webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADCA Course - DSD Education</title>
</head>
<body>
<header>
<h1>DSD Education</h1>
<p>Advanced Diploma in Computer Applications</p>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">Courses</a> |
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>About ADCA</h2>
<p>
ADCA is a professional computer course designed
to develop practical computer and digital skills.
</p>
</section>
<section>
<h2>Course Subjects</h2>
<ol>
<li>Computer Fundamentals</li>
<li>MS Word</li>
<li>MS Excel</li>
<li>Internet & Networking</li>
<li>C Programming</li>
<li>HTML & CSS</li>
</ol>
</section>
<section>
<h2>Student Registration</h2>
<form>
<label>Full Name:</label>
<input type="text" name="name" required>
<br><br>
<label>Email:</label>
<input type="email" name="email" required>
<br><br>
<label>Phone:</label>
<input type="tel" name="phone">
<br><br>
<label>Select Course:</label>
<select name="course">
<option>ADCA</option>
<option>Advanced Excel</option>
<option>Tally Prime</option>
</select>
<br><br>
<label>Message:</label><br>
<textarea name="message" rows="4"></textarea>
<br><br>
<button type="submit">Register Now</button>
</form>
</section>
</main>
<footer>
<p>© 2026 DSD Education. All Rights Reserved.</p>
</footer>
</body>
</html>
Leave a Reply