HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag , close tag and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them, All the elements I used in the that example we can understand this elements by below code and output of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* universal selector */
* {
background-color: #4d4d4d;
}
/* individual selector */
p {
background-color: #d1ea76;
}
/* class and id selector */
.warning {
background-color: #ef9323;
color: #FFFFFF;
}
#danger {
background-color: #e93916;
color: #FFFFFF;
}
/* and selector (chained) */
li.bg-black.text-white {
background-color: #000;
color: #ef9323;
}
/* combined selector */
span,
li {
background-color: burlywood;
}
/* inside an element */
div ul li {
background-color: #4b35f1;
}
/* direct child */
div>li>p {
background-color: #7667e4;
}
/* sibling ~ or + */
.sibling+p {
background-color: pink;
}
</style>
</head>
<body>
<div>Welcome to live class</div>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me <a href="#">test</a></li>
<li>highlight me</li>
</ul>
</div>
<section>
<p class="sibling">Test 1</p>
<p>Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
</body>
</html>
The Input element of HTML
The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login page</title>
</head>
<body>
<form action="">
First Name <input type="text" required placeholder="First Name"> Last Name <input type="text" required placeholder="Last Name"><br>
Dob <input required type="date"><br>
Gender: <input type="radio" required name="gender" id="">Male
<input type="radio" required name="gender" id="">female <br>
Email:<input type="email"><br>
Password <input type="text,number" required placeholder="Passwored"><br>
<input type="Submit" value="submit"><input type="reset" value="reset">
</form>
</body>
</html>
types
button:
A push button with no default behavior displaying the value of the value attribute, empty by default.
<input type="Submit" value="submit">
checkbox:
A check box allowing single values to be selected/deselected.
<input type="checkbox">
color:
A control for specifying a color; opening a color picker when active in supporting browsers.
<input type="color">
date:
A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
<input type="date">
datetime-local:
A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.
<input type="datetime-local">
email:
A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<input type="email">
file:
A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
<input type="file">
hidden:
A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden!
<input type="hidden">
image:
A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.
<input type="image">
month:
A control for entering a month and year, with no time zone.
<input type="month">
number:
A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.
<input type="number">
password:
A single-line text field whose value is obscured. Will alert user if site is not secure.
<input type="password">
radio:
A radio button, allowing a single value to be selected out of multiple choices with the same name value.
<input type="radio">
range:
A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
<input type="range">
reset:
A button that resets the contents of the form to default values. Not recommended.
<input type="reset">
search:
A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.
<input type="search">
submit:
A button that submits the form.
<input type="submit">
tel
The default value. A single-line text field. Line-breaks are automatically removed from the input value.
<input type="tel">
text:
The default value. A single-line text field. Line-breaks are automatically removed from the input value.
<input type="text"> (default value)
time:
A control for entering a time value with no time zone.
<input type="time">
url:
A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<input type="url">
week:
A control for entering a date consisting of a week-year number and a week number with no time zone.
<input type="week">
Tip: Always use the"label" tag to define labels for
<input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.
Audio and Video Tag:
Audio
The tag is used to embed sound content in a document, such as music or other audio streams.
The tag contains one or more tags with different audio sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed in browsers that do not support the element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="./O Sanam Unwind - Lucky Ali.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
</body>
</html>
Video tag:
The tag is used to embed video content in a document, such as a movie clip or other video streams.
The tag contains one or more tags with different video sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed in browsers that do not support the element.
There are three supported video formats in HTML: MP4, WebM, and OGG.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="./GBWA-20181230162752.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
How to Embed Youtube Video in Html:
If we want to embed the Youtube video in Html document, we have to follow the steps which are given below. Using these steps, we can easily show a Youtube video on the web page
Step 1: Firstly, we have to upload a video on a Youtube which is to be shown on a web page. And then we have to take an Id of that video.
Step 2: Now, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to embed a video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam Time table</title>
</head>
<body>
<h1>
<center> <bdo dir="rlt">Hitesh Sir</bdo></center>
</h1>
<p><b>Select your favourate video</b></p>
<style>
table,
tr,
td,
th {
border: 2px solid rgb(28, 12, 95);
border-collapse: collapse;
}
</style>
<table>
<tr <th style="background-color: yellow">
<th title="Code with Hitesh">Javascript course</th>
<th title="Code with Hitesh">Javascript marathon</th>
<th title="Code with Hitesh">DevOps Roadmap for beginners</th>
<th title="Code with Hitesh">Confusing part of THIS in javascript</th>
</tr>
<tr>
<th><iframe src="https://www.youtube.com/embed/2md4HQNRqJA" frameborder="1"></iframe></th>
<th><iframe src="https://www.youtube.com/embed/_gg5_gFP0gQ" frameborder="0"></iframe> </th>
<th><iframe src="https://www.youtube.com/embed/7pT0oviBZk0" frameborder="0"></iframe></th>
<th><iframe src="https://www.youtube.com/embed/jTPt5XO7KoU" frameborder="0"></iframe></th>
</tr>
</table>
<a href="https://www.youtube.com/@HiteshChoudharydotcom">You can find more video </a>
</body>
</html>