MD HASHIR IMTEYAZ

What is HTML?

HTML is the backbone of web pages, allowing developers to structure content using elements like
headings, paragraphs, lists, tables, forms, and media HTML Elements and Features Guide

1. Input Elements

HTML provides various types of input elements that allow users to enter data in a form. These
elements help in gathering user informa on through different input methods.

Common HTML Elements

 Headings (<h1> to <h6>) – Define headings with different sizes.
 Paragraphs (<p>) – Used for text content.
 Lists
o Ordered List (<ol>)
o Unordered List (<ul>)
o Descrip on List (<dl>)

 Tag Description

Tag Descrip on

<ul> Defines an unordered list (bulleted list).

<ol> Defines an ordered list (numbered list).

<li> Defines a list item inside <ul> or <ol>.

<dl> Defines a descrip on list.

<dt> Defines a term inside a descrip on list.

<dd> Describes the term inside a descrip on list.

 Tables (<table>) – Represent tabular data.

 Forms (<form>) – Allow user input with <input>, <textarea>, and <bu on>.
 Links (<a href="URL">) – Create hyperlinks.
 Images (<img src="image.jpg" alt="descrip on">) – Display images.

Input Types:

 Text Input: Allows users to enter single-line text.

 Password Input: Masks the entered text for security purposes.

 Email Input: Validates and accepts email format.

  Number Input: Accepts only numerical values.

 Checkbox: Allows mul ple selec ons.

 Radio Bu on: Allows selec ng one op on from a group.

 Date Input: Provides a date picker.

 File Input: Allows users to upload files.

 Submit Bu on: Sends the form data to the server.

<form>

<input type="text" placeholder="Enter text"> <br>

<input type="password" placeholder="Enter password"> <br>

<input type="email" placeholder="Enter email"> <br>

<input type="number" placeholder="Enter number"> <br>

<input type="checkbox"> Checkbox <br>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female <br>

<input type="date"> <br>

<input type="file"> <br>

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

</form>

2. Tables

Tables in HTML help in structuring data in a tabular format. They consist of rows and columns
defined using <table>, <tr> (table row), <th> (table header), and <td> (table data).

Merging Cells: colspan and rowspan

 colspan="n" → Merges mul ple columns into one.
 rowspan="n" → Merges mul ple rows into one.

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

<th>City</th>

</tr>

<tr>
 <td>Alice</td>

<td>25</td>

<td>New York</td>

</tr>

<tr>

<td>Bob</td>

<td>30</td>

<td>Chicago</td>

</tr>

</table>

3. Forms

Forms help in collec ng user data and sending it to the server. The <form> tag is used to create
forms, and the ac on a ribute specifies the script that processes the form.

<form ac on="submit_form.php" method="post">

Name: <input type="text" name="name"> <br>

Email: <input type="email" name="email"> <br>

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

</form>

4. Bu ons and Events

Bu ons trigger ac ons such as form submission or JavaScript func ons. The onclick event is used to
perform an ac on when a bu on is clicked.

<bu on onclick="alert('Bu on Clicked!')">Click Me</bu on>

5. Links

Links are created using the <a> tag to navigate between pages or open external resources.

<a href="h ps://www.gyansys.com" target="_blank">GyanSys Website</a>

6. Shapes (Box, Circle, Triangle, Rectangle)

Shapes can be created using CSS by se ng the width, height, and border proper es.

<div style="width:100px; height:100px; background-color:red;"></div> <!-- Box -->

<div style="width:100px; height:100px; background-color:blue; border-radius:50%;"></div> <!-- Circle

-->

<div style="width: 0; height: 0; border-le : 50px solid transparent; border-right: 50px solid
transparent; border-bo om: 100px solid green;"></div> <!-- Triangle -->
<div style="width:200px; height:100px; background-color:purple;"></div> <!-- Rectangle -->

7. Image

Images are inserted using the <img> tag with a ributes like src (source URL) and alt (alterna ve text).

<img src="image.jpg" alt="Example Image" width="200" height="150">

8. Block and Inline Elements

Block elements take up the full width available, while inline elements take up only as much width as
necessary.

<div>This is a block element</div>

<span>This is an inline element</span>

1. Block-Level Elements
Defini on:
A block-level element starts on a new line and takes up the full width available, stretching
from le to right. It always begins a new "block" in the document structure.
Common Block Elements:

Tag Descrip on

A generic container for grouping <p> Defines a paragraph.

<div>
elements.

<h1> - Defines headings (H1 is the <ul> Defines an unordered list.

<h6> largest, H6 is the smallest).

<ol> Defines an ordered list. <li> Defines a list item inside <ul> or <ol>.

<table> Defines a table. <sec on> Defines a sec on in a document.

Defines an ar cle (independent <nav> Defines naviga on links.

<ar cle>
content).

Defines a footer for a document

<footer>
or sec on.

2. Inline Elements
Defini on:
An inline element does not start on a new line and only takes up as much width as
necessary. It does not force a line break and remains within the flow of surrounding text.
 Tag Descrip on Tag Descrip on

<a> Defines a hyperlink. <strong> Makes text bold.

<em> Emphasizes text (italic). <b> Makes text bold (non-seman c).

<i> Makes text italic (non-seman c). <u> Underlines text.

<small> Makes text smaller. <mark> Highlights text.

<img> Embeds an image. <br> Inserts a line break.

<input> Defines an input field. <span> A generic inline container.

3. Key Differences Between Block and Inline Elements

Feature Block Elements Inline Elements

Starts on new line? Yes No

Takes full width? Yes (by default) No (only as much as needed)

Can contain block elements? Yes No

Block inside Inline - Not Allowed

9. Dropdowns

Dropdown lists allow users to select an op on from a list.

<select>

<op on value="apple">Apple</op on>

<op on value="banana">Banana</op on>

<op on value="cherry">Cherry</op on>

</select>

10. Lists

Lists are used to group related items.

Ordered List:

<ol>

<li>Item 1</li>
 <li>Item 2</li>

</ol>

Unordered List:

<ul>

<li>Item A</li>

<li>Item B</li>

</ul>

11. Drag and Drop

Drag and drop func onality allows users to move elements across the page using JavaScript event
handlers.

<div id="dragItem" draggable="true" ondragstart="drag(event)"

style="width:100px;height:100px;background:red;"></div>

<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)"

style="width:200px;height:200px;background:yellow;"></div>

<script>

func on allowDrop(event) {

event.preventDefault();

func on drag(event) {

event.dataTransfer.setData("text", event.target.id);

func on drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

</script>

12. Web Storage

Web storage is more secure, and large amounts of data can be stored locally, without affec ng
website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and informa on is never transferred to
the server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access
the same data.

Web storage allows storing data locally in the browser using localStorage or sessionStorage.

<script>

localStorage.setItem("username", "JohnDoe");

document.write(localStorage.getItem("username"));

</script>

13. Web Workers

When execu ng scripts in an HTML page, the page becomes unresponsive un l the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without
affec ng the performance of the page. You can con nue to do whatever you want: clicking, selec ng
things, etc., while the web worker runs in the background.

Web Workers allow running JavaScript code in the background without affec ng UI performance.

<script>

var worker = new Worker("worker.js");

worker.onmessage = func on(event) {

document.getElementById("output").innerHTML = event.data;

};

</script>

<p id="output"></p>

This documenta on provides explana ons and examples for various HTML elements and
func onali es to assist developers in understanding and implemen ng them effec vely.