HTML

(Hyper Text markup language)

• HTML (Hyper Text Markup Language) is the standard language used to create and structure
content on the web.
• It uses a system of tags and attributes to define elements like headings, paragraphs, images,
links, tables, and forms, allowing browsers to display them in a readable format.
• HTML is not a programming language but a markup language, meaning it focuses on
organizing and presenting information rather than performing calculations or logic.

HTML TAGS
HTML Tags are like keywords which defines how web browser will format and display the
content.

HTML Heading:
HTML Heading tags are used to define title or subtitle. There are 6 heading tags defined with
<h1> to <h6>.
<h1>Heading no.1</h1> <br>
<h2>Heading no.2</h2> <br>
<h3>Heading no.3</h3> <br
<h4>Heading no.4</h4> <br>
<h5>Heading no.5</h5> <br>
<h6>Heading no.6</h6>

HTML Paragraph:
<p>
HTML (Hyper Text Markup Language) is the standard language used to create and structure
content on the web. It uses a system of tags and attributes to define elements like headings,
paragraphs, images, links, tables, and forms, allowing browsers to display them in a readable
format. HTML is not a programming language but a markup language, meaning it focuses on
organizing and presenting information rather than performing calculations or logic. It works
 alongside CSS (for styling) and JavaScript (for interactivity) to build complete and interactive
web pages.
</p>

Bold, Italic, Underline Text:

<!--Bold, Strong, Italic, Mark, Underlined tag-->
<p>HTML is not a programming language but a <b>markup language</b></p>
<p>HTML is not a programming language but a <strong>markup language</strong></p>
<p>HTML is not a programming language but a <i>markup language</i></p>
<p>HTML is not a programming language but a <mark>markup language</mark></p>
<p>HTML is not a programming language but a <u>markup language</u></p>

HTML pre tag:

<pre>
This text will appear
exactly as you type it,
with spaces, tabs, and
line breaks preserved.
</pre>

HTML superscript and subscript tag:

<!-- Superscript tag -->
<p>10 ^th students.</p>
<!-- Subscript tag -->
<p> H ₂SO ₄</p>
HTML anchor tag:
<a href="[Link]
<br>
<a href="[Link] target="_blank">Google</a>

HTML Image:
<img src="[Link]" alt="Image">
<!--If image address wrong then alt-->
<img src="[Link]" alt="Image">

HTML Table:
<table border="1">
<thead>
<tr>
<th rowspan="2">Heading</th>
<th>Students</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Id</th>
<th>Name</th>
<th>Departments</th>
<th>Roll no.</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Students List</td>
<td>1</td>
 <td>Dip</td>
<td>Computer</td>
<td>101</td>
</tr>
<tr>
<td>2</td>
<td>Rocky</td>
<td>Mechanical</td>
<td>102</td>
</tr>
<tr>
<td>3</td>
<td>Jay</td>
<td>Electrical</td>
<td>103</td>
</tr>
</tbody>
</table>

HTML Lists:
<!--Ordered List-->
<ol type="1">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ol>
<hr>
<ol type="A">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ol>
<hr>
<ol type="a">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ol>
<hr>
<ol type="I">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ol>
<hr>
<ol type="i">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ol>
<hr>
<!-- Unordered List -->
<ul type="disk">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ul>
<hr>
<ul type="circle">
<li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ul>
<hr>
<ul type="square">
 <li>Virat</li>
<li>Rocky</li>
<li>Jay</li>
</ul>
<hr>
<!-- Description List-->
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>

HTML Form:
<form action="">
<fieldset>
<legend>Application Form</legend>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" required> <br><br>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email"> <br><br>
<label for="number">Mobile Number:</label>
<input type="number" name="number" id="number"> <br><br>
Gender:
<input type="radio" name="Gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="Gender" id="female" value="female">
<label for="male">Female</label> <br><br>
Hobbies:
<input type="checkbox" name="Hobbies" id="swim">
<label for="swim">Swimming</label>
<input type="checkbox" name="Hobbies" id="run">
<label for="run">Running</label>
<input type="checkbox" name="Hobbies" id="travel">
<label for="travel">Travelling</label> <br>
<label for="file">File Upload</label>
<input type="file" name="file" id="file"> <br>
<label for="dod">Date Of Birth:</label>
<input type="date" name="dob" id="dob"> <br>
<label for="time">Birth Time:</label>
<input type="time" name="time" id="time"> <br>
<label for="month">Birth Month:</label>
<input type="month" name="month" id="month"> <br>
<label for="week">Birth Week:</label>
<input type="week" name="week" id="week"> <br>
<label for="color">Favourite color:</label>
<input type="color" name="color" id="color"> <br>
<label for="search">Search something:</label>
<input type="search" name="search" id="search"> <br>
<label for="city">Select city:</label>
<select name="city" id="city">
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
</select> <br><br>
<label for="textarea">Write about yourself:</label>
<textarea name="textarea" id="textarea" rows="5" cols="8"></textarea> <br><br>
<input type="submit" name="" id="" value="Submit">
<input type="reset" name="" id="" value="Reset">
</fieldset>
</form>
HTML abbreviation, insertion and delete tag:
<!-- HTML abbrevation tag -->
<abbr title="HyperText Maarkup Language">HTML</abbr> <hr>
<!-- HTML insertion tag -->
<p>This is a book</p>
<p>This is a <ins>old</ins> book.</p> <hr>
<!--HTML delete tag -->
<p>I am happy today</p>
<p>I am happy <del>today.</del></p> <hr>

HTML div tag:

<div style="background-color: aqua;">
<p>
HTML (HyperText Markup Language) is the standard language used to create and structure
content on web [Link] is a markup language, not a programming language, and uses tags to define
elements like headings, paragraphs, images, and links. HTML works together with CSS for styling and
JavaScript for interactivity, allowing developers to build visually appealing and functional websites. It
can include text, images, tables, forms, and multimedia, and is displayed in web browsers like Chrome,
Firefox, or Edge. HTML files usually have the .html or .htm extension.
</p>
</div>

Marquee tag:
<marquee behavior="scroll" direction="right">This is a scrolling text.</marquee>
<marquee behavior="slide" direction="left">This is a scrolling text.</marquee>
<marquee behavior="alternate" direction="right">This is a scrolling text.</marquee>
<marquee behavior="slide" direction="left" scrollamount="10">This is a scrolling text.</marquee>
<marquee behavior="scroll" direction="right" scrollamount="30">This is a scrolling text.</marquee>
HTML audio, video and iframe tag:
<!-- HTML Audio tag -->
<audio src="" type="audio/mp3" controls></audio> <hr>
<!-- HTML Video tag -->
<video src="" type="video/mp4" controls></video> <hr>
<!-- HTML iframe tag -->
<iframe src="[Link]" frameborder="1"></iframe> <hr>

HTML navbar tag:

<nav style="background-color: aqua; display: flex; justify-content: space-evenly; padding: 10px;">
<a href="#" style="color: black; text-decoration: none;">Home</a>
<a href="#" style="color: black; text-decoration: none;">About us</a>
<a href="#" style="color: black; text-decoration: none;">Portfolio</a>
<a href="#" style="color: black; text-decoration: none;">Services</a>
<a href="#" style="color: black; text-decoration: none;">Contact</a>
</nav>