HTML

FRONT END DEVELOPMENT

IN A NUTSHELL

HTML adds meaning to text by logically dividing it and identifying the

text’s role on the page.

CSS introduces styles and layouts to provide beautiful feels and looks.

JS offers great dynamics for making and handling change in the

document
HTML

Definition:

- HyperText Markup Language

Syntax:

- <tag attribute=“value”> content </tag>

- Nested tags

- Each tag has a number of attributes

HTML STRUCTURE
COMMENTS IN HTML
HTML comments are used to add explanatory or informational notes within the HTML code that are not rendered or
displayed on the web page. Comments are helpful for documenting the code, making it more readable, and adding
reminders or instructions for developers. In HTML, comments are enclosed between <!-- and --> and can span multiple
lines.

<!-- This is an HTML comment. -->

<p>This is a paragraph of text.</p>

<!-- <p>This paragraph is commented out and won't be displayed.</p> -->

In the above example, the HTML comment is used to add a note or comment within the code. It won't be displayed on
the web page. The commented-out <p> tag is an example of how you can temporarily remove an element from
rendering.
HTML TAGS
Heading tag in HTML (H1 to H6):

HTML provides six heading tags, <h1> to <h6>, for defining different levels of headings. These tags are used to
structure the content hierarchy and indicate the importance of headings on a web page. The <h1> tag represents
the highest level heading, typically used for the main title or heading of a page, while <h6> represents the lowest
level heading. Heading tags also come with default styling, with <h1> being the largest and <h6> the smallest.

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Sub-subheading</h3>

In this example, heading tags from <h1> to <h3> are used to create headings of different levels. The text within
the tags represents the content of the headings. The <h1> tag represents the highest level heading, while <h3>
represents a lower level heading.
HTML TAGS
. Paragraph tag:

The <p> tag in HTML is used to define a paragraph. It is a block-level element that represents a
distinct section of text or content.

<p>This is a paragraph of text.</p>

<p>This is another paragraph.</p>

The <p> tag is used to define paragraphs of text. In this example, two paragraphs are created, and
each <p> tag encloses a separate block of text.
v. Anchor Tag:

The HTML <a> tag, also known as the anchor tag, is used to create hyperlinks or links to other web pages, files, or specific sections within a page. It
allows users to navigate between different pages or locations on the web. The <a> tag requires an href attribute that specifies the URL or
destination of the link. Additionally, it can contain text or other HTML elements as its content.

<a href="https://www.example.com">Visit Example</a>

In the above example, the <a> tag is used to create a hyperlink. The href attribute specifies the URL ("https://www.example.com") to which the
link should navigate. The text "Visit Example" represents the clickable text displayed on the web page.

 vi. Image Tag:

The <img> tag is used in HTML to embed or display images on a web page. It is a self-closing tag that does not require a closing tag. The <img> tag
requires the src attribute, which specifies the source URL or file path of the image to be displayed. It also supports optional attributes like alt
(alternative text for accessibility and when the image cannot be displayed), width, height, and more.

<img src="image.jpg" alt="Example Image">

The <img> tag is used to embed an image in HTML. In this example, the src attribute specifies the image file path ("image.jpg"), and the alt
attribute provides alternative text that is displayed when the image cannot be loaded or for accessibility purposes.
Tag for formatting:-
In HTML, there are various tags used for formatting and styling text. Some commonly used
formatting tags include <strong> (to make text bold), <em> (to emphasize text, typically rendered in
italics), <u> (to underline text), <del> (to represent deleted or struck-through text), <sub> (to
subscript text), <sup> (to superscript text), and <code> (to represent inline code or program code
snippets).

<p>This is <strong>bold</strong> text.</p>

<p>This is <em>emphasized</em> text.</p>

In this example, the <strong> tag is used to make the word "bold" appear in bold font weight, and
the <em> tag is used to emphasize the word "emphasized," typically displayed in italics.
Div & Span
The <div> and <span> tags are used as container elements in HTML for grouping and styling other
elements or sections of a web page. <div class="container">

<h3>Title</h3>

<p>This is a div container.</p>

</div>

<p>This is a <span style="color: blue;">span element</span> with inline styling.</p>

In the first example, the <div> tag is used to create a container element with a class attribute. It
encloses a heading and a paragraph, providing a way to group and style them together. In the
second example, the <span> tag is used to create an inline element, and inline styling is applied
using the style attribute to make the text appear in blue color.
List in HTML
HTML provides three types of lists: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).

Ordered List (<ol>): Represents a numbered list where each item is ordered sequentially.

Unordered List (<ul>): Represents a bulleted list where each item is preceded by a bullet point.

Definition List (<dl>): Represents a list of terms and their definitions.

Example of an ordered list:

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>
Tables in HTML
HTML <table> element is used to create tabular data. It consists of rows (<tr>), columns (<td>), and optional header cells (<th>).

<table>: Represents the entire table.

<tr>: Represents a table row.

<td>: Represents a table data cell within a row.

<th>: Represents a table header cell, typically used for column headings.
Example of a simple table: <td>25</td>

html </tr>

<tr>
<table>
<td>Jane</td>
<tr>
<td>30</td>
<th>Name</th>
</tr>
<th>Age</th>
</table>
</tr>
 
<tr>

<td>John</td>
Forms in HTML
HTML <form> element is used to create interactive forms that allow users to input data. It contains
form controls like input fields, checkboxes, radio buttons, and buttons.

<form>: Represents a container for form controls.

<input>: Represents an input field where users can enter data.

<select>: Represents a drop-down list of options.

<textarea>: Represents a multi-line text input field.

<button>: Represents a clickable button.

Example of a simple form:

html

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<button type="submit">Submit</button>

</form>
Frames in HTML
Frames in HTML:

HTML <iframe> element is used to embed another HTML document within the current document,
creating a frame or window.

<iframe>: Represents an inline frame or subwindow.

src: Specifies the source URL of the document to be embedded.

width and height: Define the dimensions of the frame.

<iframe src="https://www.example.com" width="500" height="300"></iframe>

<!DOCTYPE html> </frameset>

<html> </html>

<head>

<title>Frames Example</title>

</head>

<frameset cols="25%, 75%">

<frame src="left.html">

<frame src="right.html">
Video tag
HTML <video> element is used to embed videos or audio content on a web page.

<video>: Represents a video player.

src: Specifies the source URL of the video file.

width and height: Define the dimensions of the video player.

controls: Adds playback controls to the video player.

Example of a video:

<video src="video.mp4" width="640" height="360" controls></video>

These are the descriptive details and examples of the HTML elements you requested.