AchieversIT - Provides a wide group of opportunities for freshers and Experienced candidates who can develop their skills and build their career opportunities across multiple Companies.

1. What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web
pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Difference between Html vs Html5
HTML
 It didnt support audio and video without the use of flash
player support.
 It does not allow drag and drop effects.
 Elements like nav, header were not present.

2.  Older version of HTML are less mobile-friendly.
HTML5
 It supports audio and video controls with the use of <audio>
and <video> tags.
 It allows drag and drop effects.
 New element for web structure like nav, header, footer etc.
 HTML5 language is more mobile-friendly.
Basic Structure of HTML page:
HTML Element:
An HTML element is defined by a start tag, some content, and an
end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>

3. <p>My first paragraph.</p>
HTML Attributes:
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like:
name="value"
Example:
The href Attribute:
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src and alt Attribute:
<img src="img_girl.jpg" alt="Girl with a jacket">

4. HTML headings:
HTML headings are titles or subtitles that you want to display on a
webpage.
ex:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML paragraphs:
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
ex:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.

5. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
Example:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<hr> tag: It provides a horizontal line
Styles:
-> Inline <h1 style="font-size:300%;color:red">This is a
heading</h1>
-> Internal <style></style> we use it inside the head tag
-> External styles.css
Classes and id:
<h1>My <span class="note">Important</span> Heading</h1>
<h1>My <span id="note">Important</span> Heading</h1>
Formatting tags:

6. HTML Block and Inline Elements:
Block-level Elements:
 A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before
and after the element.
 A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
ex: <h1>-<h6>,<header>,<hr>, <nav>, <p>
Inline Elements:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>, <br>, <button>, <a>
HTML Iframes:

7. An HTML iframe is used to display a web page within a web page.
Syntax:
<iframe src="url" title="description"></iframe>
// we can set height and width as well
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS
border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>
HTML Semantic Elements:
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of semantic elements: <form>, <table>, and <article> -
Clearly defines its content.
HTML non-semantic Elements:
A non-semantic element which does not describes any meaningfull
information to the users.
Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
HTML Lists:
Unordered HTML List:

8. An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
The list items will be marked with bullets (small black circles) by
default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
// we can change the bullets of unordered list
<ul style="list-style-type:disc;"> // circle, square, none
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>

9. <li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
ex: <ol type='1'>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers
Nested HTML Lists:
Lists can be nested (list inside list):

10. Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
HTML Other Lists
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Tables:
HTML tables allow web developers to arrange data into rows and
columns.

11. ex:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
=> border-collapse: collapse; // add this to remove the outer border
// Example to create a time table
<table style="border: 1px solid black;border-collapse: collapse;">
<tr>
<th colspan="6">Time table</th>
</tr>
<tr>
<td rowspan="6">Hours</td>
<th>2</th>
<th>2</th>
<th>2</th>

12. <th>2</th>
<th>2</th>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th colspan="5">Lunch</th>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>

13. <td>2</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
What is Multimedia?
Multimedia comes in many different formats. It can be almost
anything you can hear or see, like images, music, sound, videos,
records, films, animations, and more.
Web pages often contain multimedia elements of different types
and formats.
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
Video tag:
we have some properties for video tag such as :
controls, muted, autoplay
ex: <video width="320" height="240" autoplay muted></video>
HTML forms
An HTML form is used to collect user input. The user input is most

14. often sent to a server for processing.
The Action Attribute
The action attribute defines the action to be performed when the
form is submitted.
Action: 1) get 2) post
method="get" :
Here in the below example we not specified any action type such
as get or post, so initially the form submission is in get method.
Whenever the method is get then you can see the formdata in the
url once the form is submitted.
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>

15. <label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<form action="/action_page.php" method="get">
<form action="/action_page.php" autocomplete="on">
<form action="/action_page.php" novalidate>