Scribd
Upload
2 views

HTMLNOTES

The document outlines a comprehensive guide to HTML, structured into 11 chapters covering fundamental concepts such as HTML elements, syntax, tags, and various functionalities like lists, images, forms, and embedding content. Each chapter provides detailed explanations, examples, and best practices for creating and structuring web pages using HTML. The content is designed to help users understand and implement HTML effectively for web development.

Uploaded by

Chethan Bk
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTMLNOTES

The document outlines a comprehensive guide to HTML, structured into 11 chapters covering fundamental concepts such as HTML elements, syntax, tags, and various functionalities like lists, images, forms, and embedding content. Each chapter provides detailed explanations, examples, and best practices for creating and structuring web pages using HTML. The content is designed to help users understand and implement HTML effectively for web development.

Uploaded by

Chethan Bk
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

TOPICS LIST CHAPTER WAYS

📖 CHAPTER - 1 📝
👉 1- Introduction to HTML
👉 2- HTML Elements
👉 3- HTML Syntax
👉 4- HTML Tags

📖 CHAPTER - 2 📝
👉 1- DOCTYPE Declaration
👉 2- HTML Element
👉 3- Head Section
👉 4- Title
👉 5- Body Section

📖 CHAPTER - 3 📝
👉 1- Headings <h1> to <h6>
👉 2- Paragraphs <p>
👉 3- Bold <Strong> and italic <em>
👉 4- Line Breaks <br>
👉 5- Horizontal Line <hr>

📖 CHAPTER - 4 📝
👉 1- Anchor Tag <a>
👉 2- Linking to External Websites
👉 3- Internal Page Links
👉 4- Creating Navigation Menus

📖 CHAPTER - 5 📝
👉 1- Ordered Lists <ol>
👉 2- Unordered Lists <ul>
👉 3- List Items <li>

📖 CHAPTER - 6 📝
👉 1- Image Tag <img>
👉 2- Alt Text
👉 3- Image Maps

📖 CHAPTER - 7 📝
👉 1- Form Tag <form>
👉 2- Input Elements
👉 3- Textarea <textarea>
👉 4- Select Dropdown <select> and <option>
👉 5- Submit Button <input type="submit">
👉 6- Practice

📖 CHAPTER - 8 📝
👉 1- Table Structure
👉 2- Table Headers <th>
👉 3- Table Rows and Cells <tr> and <td>
👉 4- Practice

📖 CHAPTER - 9 📝
👉 1- Header
👉 2- Footer
👉 3- Article
👉 4- Section
👉 5- Practice

📖 CHAPTER - 10 📝
👉 1- Audio Embedding
👉 2- FooterVideo Embedding
👉 3- <iframe> for Embedding External Content

📖 CHAPTER - 11 📝
👉 1- Email Input Type
👉 2- Tel Input Type
👉 3- Date Input Type
👉 4- Form Validation
📖 CHAPTER - 1 📝
1. Introduction to HTML

👉 HTML, which stands for HYPERTEXT MARKUP LANGUAGE , is the standard markup language used to create and design web pages.
👉 It provides a structure for the content on the web, allowing browsers to interpret and display information in a readable format.
👉 HTML consists of various elements and tags that define the structure and content of a webpage.
2. HTML Elements

👉 HTML documents are built using various elements.


👉 An element typically consists of an opening tag, content, and a closing tag.
Here's an example of a simple paragraph element.

<p>This is a simple paragraph.</p>

In this example :

<p> is the opening tag.

THIS IS A SIMPLE PARAGRAPH . is the content.

</p> is the closing tag.

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. HTML Syntax

👉 HTML has a simple and straightforward syntax.


👉 It consists of tags and content, where tags are enclosed in ANGLE BRACKETS (< >) .
👉 Tags are used to define elements, and most HTML elements have OPENING AND CLOSING TAGS to surround the content.

👉 The basic structure of an HTML document looks like this:


<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Let's break down the structure :

<!DOCTYPE html> : This declaration defines the document type and VERSION OF HTML . In this case, it's HTML5.

<html> : This is the root element of an HTML document.

<head> : This section contains meta-information about the document, such as the title.

<title> : This tag specifies the title of the HTML document, which appears in the browser's title bar or tab.

<body> : This is the main content of the HTML document.

<h1> to <p> : These are example tags representing various HTML elements like headings and paragraphs.

4. HTML Tags

👉 HTML tags define the structure and formatting of content on a webpage.


👉 Tags are keywords surrounded by angle brackets.
👉 Some tags don't have a closing tag and are CALLED EMPTY OR VOID TAGS .
Here are a few examples :

HEADINGS

<h1> This is a Heading 1 </h1>


<h2> This is a Heading 2 </h2>
<h3> This is a Heading 3 </h3>
<h4> This is a Heading 4 </h4>
<h5> This is a Heading 5 </h5>
<h6> This is a Heading 6 </h6>

LINKS

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

IMAGES

<img src="image.jpg" alt="Description of the image" />


📖 CHAPTER - 2 📝
1. DOCTYPE Declaration

👉 This declaration defines the document type and VERSION OF HTML being used.
👉 It helps browsers understand how to interpret the document.
👉 The declaration usually comes at the very beginning of the HTML document.
<!DOCTYPE html>

2. HTML Element

👉 The < HTML > element is the root element of an HTML document
👉 It wraps all the content on the page.
<!DOCTYPE html>
<html>
<!-- Content goes here -- >
</html>

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Head Section

👉 The < HEAD > section contains meta-information about the HTML document, such as the title, character set, linked stylesheets, and
scripts.

👉 It doesn't contain the actual content visible to users.


<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> My HTML Document </title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

4. Title

👉 The < TITLE > element inside the < HEAD > section specifies the title of the HTML document, which is typically displayed in the
browser's title bar or tab.

<!DOCTYPE html>
<html>
<head>
<title> My HTML Document </title>
</head>
<body>
<!-- Content goes here -- >
</body>
</html>

5. Body Section

👉 The < BODY > section contains the actual content of the HTML document, such as text, images, links, and other elements visible to users.

<!DOCTYPE html>
<html>
<head>
<title> My HTML Document </title>
</head>
<body>
<!-- Content goes here -- >
<h1> Hello, World! </h1>
<p> This is a sample HTML document. </p>
</body>
</html>
📖 CHAPTER - 3 📝
1. Headings <h1> to <h6>

👉 Headings are used to define headings in HTML.


👉 There are six levels of headings, with < H1 > being the highest level and < H6 > the lowest.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Headings </title>
</head>
<body>
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<h3>This is a Heading</h3>
<h4>This is a Heading</h4>
<h5>This is a Heading</h5>
<h6>This is a Heading</h6>
</body>
</html>

2. Paragraphs <p>

👉 Paragraphs are used to define blocks of text.


Example :

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>
This is a paragraph of text. It can contain multiple sentences and even include <strong> formatted </strong> text.
</p>
<p> Another paragraph goes here. </p>
</body>
</html>

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Bold <strong> and Italic <em>

👉 The < STRONG > element is used to define important text that should be bold, while < EM > is used for emphasizing text, making it italic.

Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> My HTML Document </title>
</head>
<body>
<p> This is <strong> important </strong> text. </p>
<p> This is <em> emphasized </em> text. </p>
</body>
</html>

4. Line Breaks < br >

👉 The < BR > element is used to insert a line break within text.

Example :

<!DOCTYPE html>
<html>
<head>
<title> My HTML Document </title>
</head>
<body>
<p> This text will have a line break <br> right here. </p>
</body>
</html>

5. Horizontal Line < hr >

👉 The < HR > element is used to create a horizontal line, typically used to separate content.

Example :

<!DOCTYPE html>
<html>
<head>
<title> My HTML Document </title>
</head>
<body>
<!-- Content goes here -- >
<p> This is some content above the horizontal line. </p>
<hr>
<p> This is some content below the horizontal line. </p>
</body>
</html>
📖 CHAPTER - 4 📝
1. Anchor Tag <a>

👉 The <a> (anchor) tag is used to create hyperlinks in HTML.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Anchor Tag </title>
</head>
<body>
<a href="https://www.code10tb.com" > Visit CODE10TB.COM Website </a>
</body>
</html>

2. Linking to External Websites

👉 To link to an external website, use the href attribute with the full URL.

Example :

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<a href="https://www.code10tb.com" target="_blank" > Go to Code 10TB </a>
</body>
</html>

In this example, the target="_blank" attribute opens the link in a new tab or window.

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Internal Page Links

👉 You can create links within the same website using relative URLs.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> My HTML Document </title>
</head>
<body>
<a href="/about" > About Us </a>
<a href="/contact" > Contact </a>
</body>
</html>

In this case, "/about" and "/contact" are assumed to be internal pages of the same website.

4. Creating Navigation Menus

👉 Navigation menus are often created using lists <ul> for unordered lists or <ol> for ordered lists with list items <li> containing anchor
tags.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Creating Navigation Menus </title>
</head>
<body>
<ul>
<li> <a href="/home"> Home </a> </li>
<li> <a href="/about"> About </a> </li>
<li> <a href="/services"> Services </a> </li>
<li> <a href="/contact"> Contact </a> </li>
</ul>
</body>
</html>

This example creates an unordered list for a simple navigation menu.


📖 CHAPTER - 5 📝
1. Ordered Lists <ol>

👉 Ordered lists are used when the order of items is important.


👉 Each list item is numbered sequentially.
👉 You create an ordered list using the <ol> tag, and each list item within it is represented by the <li> tag.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Ordered Lists </title>
</head>
<body>
<ol>
<li> First item </li>
<li> Second item </li>
<li> Third item </li>
</ol>
</body>
</html>

This will render as:

1. First item

2. Second item

3. Third item

2. Unordered Lists <ul>

👉 Unordered lists are used when the order of items is not important.
👉 Each list item is represented by a bullet point.
👉 You create an unordered list using the <ul> tag, and each list item within it is represented by the <li> tag.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Unordered Lists </title>
</head>
<body>
<ul>
<li> Red </li>
<li> Green </li>
<li> Blue </li>
</ul>
</body>
</html>

This will render as:

Red
Green
Blue

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. List Items <li>

👉 The <li> tag is used to define each item within a list, whether it's an ordered or unordered list.

Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> List Items </title>
</head>
<body>
<ul>
<li> Apple </li>
<li> Orange </li>
<li>
<ol>
<li> Small </li>
<li> Medium </li>
<li> Large </li>
</ol>
</li>
<li> Grapes </li>
</ul>
</body>
</html>

This will render as:

Apple
Orange
1. Small
2. Medium
3. Large
Grapes

In this example, there's an unordered list <ul> containing items "Apple", "Orange" and "Grapes".

The third item in the list is itself an ordered list <ol> with items "Small", "Medium" and "Large".
📖 CHAPTER - 6 📝
1. Image Tag <img>

👉 The < img > tag is used in HTML to embed images in a web page.
👉 It is a self-closing tag, meaning it does not have a closing tag.
👉 Here's the basic syntax.
<img src="image-url" alt="alternative-text" width="width-value" height="height-value">

👉 src Specifies the source (URL or path) of the image.


👉 alt Provides alternative text for the image. This is important for accessibility and SEO.
👉 height and width Optional attributes to specify the dimensions of the image.
👉 If not specified, the image will be displayed in its original size.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Image </title>
</head>
<body>
<img src="code10tb.jpg" alt="A beautiful landscape" width="500" height="300">
</body>
</html>

2. Alt Text

👉 The alt attribute in the < img > tag is used to provide alternative text for the image.
👉 This text is displayed if the image cannot be loaded or if the user is using a screen reader.
👉 It's crucial for accessibility and improves the user experience.
Example :

<img src="profile.jpg" alt="Code 10TB profile picture">

In this example, if the image fails to load, the user will see "Code 10TB profile picture" instead.

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Image Maps

👉 Image maps allow you to define clickable regions on an image, turning different parts of the image into links.
👉 This is achieved using the < map > and < area > tags.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Image Maps </title>
</head>
<body>
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,200,100" href="north-america.html" alt="North America">
<area shape="rect" coords="200,0,400,100" href="europe.html" alt="Europe">
<!-- Additional areas for other regions -->
</map>
</body>
</html>

In this example, the image has been divided into clickable rectangles, each corresponding to a different region.

Clicking on these regions will navigate the user to the specified URLs.
📖 CHAPTER - 7 📝
1. Form Tag <form>

👉 The < form > tag is used to create an HTML form that allows users to input data.
👉 It is a container for various input elements such as text fields, radio buttons, checkboxes, and more.
👉 Here's the basic syntax.
<form action="submit-url" method="post/get">
<!-- form elements go here -->
</form>

👉 action Specifies the URL where the form data will be submitted.

👉 method Specifies the HTTP method (either "post" or "get") used when sending form data.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Form </title>
</head>
<body>
<form action="submit-url" method="post/get">
<!-- form elements go here -->
</form>
</body>
</html>

2. Input Elements

👉 Input elements are used within a form to gather user input.


👉 Here are some common types.
TEXT INPUT : < input type="text" >

<label for="username">Username:</label>
<input type="text" id="username" name="username">

PASSWORD INPUT : < input type="password" >

<label for="password">Password:</label>
<input type="password" id="password" name="password">

RADIO BUTTONS : < input type="radio" >

<label for="male">Male:</label>
<input type="radio" id="male" name="gender" value="male">

<label for="female">Female:</label>
<input type="radio" id="female" name="gender" value="female">

CHECKBOXES : < input type="checkbox" >

<label for="subscribe">Subscribe to newsletter</label>


<input type="checkbox" id="subscribe" value="yes">

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Textarea <textarea>

👉 Textarea allows users to input multi-line text.


👉 t is often used for comments or longer messages.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Textarea </title>
</head>
<body>
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</body>
</html>

4. Select Dropdown <select> and <option>

👉 Select dropdowns provide a list of options for the user to choose from.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Select Dropdown </title>
</head>
<body>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
</body>
</html>

5. Submit Button <input type="submit">

👉 The submit button is used to send the form data to the server.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Submit Button </title>
</head>
<body>
<input type="submit" value="Submit">
</body>
</html>

6. Practice

Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Putting it all together Code 10TB </title>
</head>
<body>
<form action="submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="gender">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>
<label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output :

Username:

Password:

Gender:
Male
Female
This is a basic example of an HTML form with various input elements.

Subscribe to newsletter
Message:

Country:

United States

Submit

This is a basic example of an HTML form with various input elements.


📖 CHAPTER - 8 📝
1. Table Structure

👉 In HTML, a table is created using the < table > element.


👉 The basic structure of an HTML table consists of the following components.
👉 table This is the main container for the entire table.
👉 thead This section is used to define the header of the table.
👉 tbody This section contains the body of the table, where the actual data rows are placed.
👉 tfoot This section is optional and is used to define the footer of the table.
Here's an example of a simple table structure

<!DOCTYPE html>
<html>
<head>
<title> Table Structure </title>
</head>
<body>
<table>
<thead>
<!-- Header row goes here -->
</thead>
<tbody>
<!-- Data rows go here -->
</tbody>
<tfoot>
<!-- Footer row goes here -->
</tfoot>
</table>
</body>
</html>

2. Table Headers <th>

👉 In the thead section of the table, header cells are defined using the < th > table header element.

👉 The content within < th > is typically bold and centered by default.
👉 Header cells are used to label the columns of the table.
Example of a table with headers :

<!DOCTYPE html>
<html>
<head>
<title> Table Headers </title>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<!-- Data rows go here -->
</tbody>
</table>
</body>
</html>

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Table Rows and Cells <tr> and <td>

👉 The actual data in the table is placed within the < tbody > section.
👉 Rows are defined using the < tr > (table row) element, and individual cells within the rows are defined using < td > (table data) elements.

Example of a table with data :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Table Rows and Cells </title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</body>
</html>

In this example, there are two rows in the < tbody > section, each containing three cells corresponding to the columns defined in the < thead >
section.

4. Practice

Example of a table

<!DOCTYPE html>
<html>
<head>
<title> Practice </title>
</head>
<body>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-center">Footer Row</td>
</tr>
</tfoot>
</table>
</body>
</html>

Output :

Name Age City

John Doe 25 New York

Jane Smith 30 Los Angeles

Footer Row
📖 CHAPTER - 9 📝
1. Header

👉 The < header > element represents the introductory content of a section or a page.
👉 It often includes headings, logos, navigation menus, and other elements related to the overall introduction of the content.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Header </title>
</head>
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

2. Footer

👉 The footer element represents the footer of a section or a page.


👉 Header cells are used to label the columns of the table.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Footer </title>
</head>
<body>
<footer>
<p>© 2024 Website Name. All rights reserved.</p>
<p><a href="#">Privacy Policy</a></p>
</footer>
</body>
</html>

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Article

👉 The < article > element represents a self-contained piece of content that could be distributed and reused independently.
👉 It's commonly used for blog posts, news articles, forum posts, etc.
Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Article </title>
</head>
<body>
<article>
<h2>Article Title</h2>
<p>Published on <time datetime="2024-01-18">January 18, 2024</time></p>
<p>Article content goes here...</p>
</article>
</body>
</html>

4. Section

👉 The < section > element is used to group related content together.
👉 helps in organizing the page's structure and provides a way to apply styles or scripts to a specific section of content.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Section </title>
</head>
<body>
<section>
<h2>Section Title</h2>
<p>Section content goes here...</p>
</section>
</body>
</html>

4. Practice

Example :

<!DOCTYPE html>
<html>
<head>
<title> Practice </title>
</head>
<body>
<header class="bg-dark text-white text-center p-4">
<h1>Website Title</h1>
<nav class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="container mt-4">
<article class="bg-light p-4 mb-4">
<h2>Article Title</h2>
<p>Published on <time datetime="2024-01-18">January 18, 2024</time></p>
<p>Article content goes here...</p>
</article>
<section class="bg-light p-4">
<h2>Section Title</h2>
<p>Section content goes here...</p>
</section>
</section>
<footer class="bg-dark text-white text-center p-4 mt-4">
<p>© 2024 Website Name. All rights reserved.</p>
<p><a class="text-white" href="#">Privacy Policy</a></p>
</footer>
</body>
</html>

Output :

Website Title
Home About Contact

Article Title
Published on January 18, 2024

Article content goes here...

Section Title
Section content goes here...

© 2024 Website Name. All rights reserved.

Privacy Policy
📖 CHAPTER - 10 📝
1. Audio Embedding

👉 To embed audio in a webpage, you can use the < audio > element.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Audio Embedding </title>
</head>
<body>
<audio controls>
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>

The controls attribute adds play, pause, and volume controls to the audio player.

The <source> element specifies the audio file (example.mp3) and its type.

2. Video Embedding

👉 For embedding videos, you can use the <video> element.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Video Embedding </title>
</head>
<body>
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

The height and width attributes set the dimensions of the video player.

The controls attribute adds play, pause, and volume controls.

The <source> element specifies the video file (example.mp4) and its type.

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. <iframe> for Embedding External Content

👉 The < iframe > tag is used to embed external content, such as videos, maps, or other webpages, within an HTML document.

Example of Embedding a YouTube Video :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Example of Embedding a YouTube Video </title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen>
</iframe>
</body>
</html>

The height and width attributes set the dimensions of the iframe.

The src attribute specifies the source URL of the external content (replace "your_video_id" with the actual YouTube video ID).

The frameborder="0" removes the iframe border.

The allowfullscreen attribute allows the content to be viewed in fullscreen mode.

Example of Embedding a Google Map :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Example of Embedding a Google Map </title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed" width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy"></iframe>
</body>
</html>
📖 CHAPTER - 11 📝
1. Email Input Type

👉 The < input > element with the type="email" attribute is used for capturing email addresses.
👉 It provides built-in validation for ensuring that the entered value is in a valid email format.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Email Input Type </title>
</head>
<body>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</body>
</html>

The required attribute ensures that the field must be filled out before submitting the form.

2. Tel Input Type

👉 The < input > element with the type="tel" attribute is used for capturing telephone numbers.
👉 It is suitable for both landline and mobile phone numbers.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Tel Input Type </title>
</head>
<body>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</body>
</html>

👉 SUBSCRIBE MY CHANNEL CODE 10TB ▶

3. Date Input Type

👉 The < input > element with the type="date" attribute allows users to select a date from a date picker.

Example :

<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and linked resources go here -->
<title> Date Input Type </title>
</head>
<body>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
</body>
</html>

4. Form Validation

👉 HTML5 introduced client-side form validation, which means the browser can validate the user's input before submitting the form.
👉 This helps in reducing server requests and providing real-time feedback to users.
👉 As shown in the examples above, the required attribute is used to make a form field mandatory.
👉 If the user tries to submit the form without filling out a required field, they will receive an error message.
👉 The pattern attribute allows you to specify a regular expression for the expected input format.
Example :

<!DOCTYPE html>
<html>
<head>
<title> Form Validation </title>
</head>
<body>
<label for="password">Password (at least 8 characters, one uppercase, one lowercase, one digit):</label>
<input type="password" id="password" name="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$" required>
</body>
</html>

In this example, the pattern enforces that the password must be at least 8 characters long and contain at least one uppercase letter, one lowercase
letter, and one digit.

You might also like