HTML, or HyperText Markup Language, is a markup language used to describe

the structure of a web page. It uses a special syntax or notation to organize and
give information about the page to the browser. Elements usually have opening
and closing tags that surround and give meaning to content

------------------------------------------------------------------------------------------------------

1) Headers - h1 to h6 ( size decreases)

------------------------------------------------------------------------------------------------------

2) All HTML tags are written in lowercase, for example <p></p> and not <P></P>

------------------------------------------------------------------------------------------------------3)
Fill in the Blank with Placeholder Text

'Lorem ipsum text' has been used as placeholder text by typesetters since the
16th century , matlab temporarily paragraph mai ye paste kardenge fir aage jaake
actual para edit karenge.

------------------------------------------------------------------------------------------------------

4) Comment out HTML

Comments in HTML start with <!-- and end with a -->

------------------------------------------------------------------------------------------------------

5) The main HTML5 tag helps search engines and other developers find the main
content of your page.

------------------------------------------------------------------------------------------------------

6) Add Images to Your Website

(i) You can add images to your website by using the img element, and point to a
specific image's URL using the src attribute.

An example of this would be:

<img src="https://www.your-image-source.com/your-image.jpg">

Note that img elements are self-closing.

(ii) All img elements must have an alt attribute. The text inside an alt attribute is
used for screen readers to improve accessibility and is displayed if the image
fails to load.

Let's add an alt attribute to our img example above:

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author

standing on a beach with two thumbs up.">

(iii) <img src="path" alt="cats" width="100" height="100">

(iv) <img src="path" alt="cats" title="catto" width="100" height="100">

When we hover over the image , the title will be displayed near the mouse
pointer

------------------------------------------------------------------------------------------------------

6-a) Make image as background

(i)Using background-image property

<style>

body{

background-image: url('https:// .jpg');

or

background-image: url(name-of-file.jpg); // if present in the same folder

background-repeat:no-repeat;

background-size:cover; // to fit into the webpage

background-position:center;
height: Ypx //or else it wont be visible unless there is some content

</style>

https://www.w3schools.com/html/html_images_background.asp

(ii)declare an image element displaying the image in the .html or react

component and make it’s width 100% & height a/c to your preference in .css

To place the items , need to use position property (refer parallax react project)

------------------------------------------------------------------------------------------------------

7) Link to External Pages with Anchor Elements

You can use a (anchor) elements to link to content outside of your web page.

a elements need a destination web address called an href attribute. They also
need anchor text. Here's an example:

<a href="https://freecodecamp.org"> this links to freecodecamp.org </a>

------------------------------------------------------------------------------------------------------

8) Link to Internal Sections of a Page with Anchor Elements

a (anchor) elements can also be used to create internal links to jump to different
sections within a webpage.

To create an internal link, you assign a link's href attribute to a hash symbol #
plus the value of the id attribute for the element that you want to internally link
to, usually further down the page. You then need to add the same id attribute to
the element you are linking to. An id is an attribute that uniquely describes an
element.

Below is an example of an internal anchor link and its target element:

<a href="#contacts-header">Contacts</a>
...

<h2 id="contacts-header">Contacts</h2>

------------------------------------------------------------------------------------------------------

9) Nest an Anchor Element within a Paragraph

<p>

Here's a <a target="_blank" href="http://freecodecamp.org"> link to

freecodecamp.org</a> for you to follow.

</p>

o/p - Here's a link to freecodecamp.org for you to follow.

You must give your element an attribute of target and set it to _blank in order
for your link to open in a new tab (i.e. target="_blank")

------------------------------------------------------------------------------------------------------

10) Make Dead Links Using the Hash Symbol

Sometimes you want to add a elements to your website before you know where
they will link.Replace the href attribute value with a #, also known as a hash
symbol, to create a dead link

href="#"

------------------------------------------------------------------------------------------------------

11) Turn an Image into a Link

<a href="#">

<img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the

camera.">

</a>
------------------------------------------------------------------------------------------------------

12)Bulleted/Unordered list

<ul>

<li>milk</li>

<li>cheese</li>

</ul>

------------------------------------------------------------------------------------------------------

13)Numbered/Ordered list

<ol>

<li>Garfield</li>

<li>Sylvester</li>

</ol>

------------------------------------------------------------------------------------------------------

14)Create a Text Field

input elements are a convenient way to get input from your user.

<input type="text"> // input type is text

Note that input elements are self-closing.

You can create placeholder text like so:

<input type="text" placeholder="this is placeholder text">

if you wanted to make a text input field required, you can just add the attribute
required within your input element, like this:

<input type="text" required>

------------------------------------------------------------------------------------------------------

15)Create a Form Element

You can build web forms that actually submit data to a server using nothing more
than pure HTML. You can do this by specifying an action on your form element.

<form action="/open-this-link-when-submitted.php"></form>

Add a Submit Button to a Form

<input type="submit" value="This button submits the form!">

Example -
 · <Select> is drop-down menu.

· input type = "reset" resets all the fields to blank.

· input type="password" mai wo 'minlength' hai

Note - method="GET" vs POST . If you click on the register button to submit the
form and if you are using GET , then all the information of your input will be
shown in the url of that same page but if you use POST , that info will be
attached to the body of the page.
Note - "name" attribute helps to group similar elements like radio buttons.And
while submiting the form , the "name" attr will make a field of it's name given in
the backend. The "value" attr can be used to rename the submit button and
most importantly , it will give the value to that "name" attr in the
backend.Mandatory to use both of them.

------------------------------------------------------------------------------------------------------

16)Create a Set of Radio Buttons{ refer 18) }

All related radio buttons should have the same name attribute to create a radio
button group. By creating a radio group, selecting any single radio button will
automatically deselect the other buttons within the same group ensuring only one
answer is provided by the user.

<label>

<input type="radio" name="indoor-outdoor">

Indoor

</label>

It is considered best practice to set a for attribute on the label element, with a
value that matches the value of the id attribute of the input element. This allows
assistive technologies to create a linked relationship between the label and the
child input element.

<label for="indoor">

<input id="indoor" type="radio" name="indoor-outdoor">

Indoor

</label>

------------------------------------------------------------------------------------------------------
17)Create a Set of Checkboxes{ refer 18) }

Forms commonly use checkboxes for questions that may have more than one
answer.Checkboxes are a type of input.All related checkbox inputs should have
the same name attribute

<label for="loving">

<input id="loving" type="checkbox" name="personality">

Loving

</label>

------------------------------------------------------------------------------------------------------

18)Use the value attribute with Radio Buttons and Checkboxes

<label for="indoor">

<input id="indoor" value="indoor" type="radio" name="indoor-

outdoor">Indoor

</label>

<label for="outdoor">

<input id="outdoor" value="outdoor" type="radio" name="indoor-

outdoor">Outdoor

</label>

Here, you have two radio inputs. When the user submits the form with the
indoor option selected, the form data will include the line: indoor-
outdoor=indoor. This is from the name and value attributes of the "indoor"
input.

If you omit the value attribute, the submitted form data uses the default value,
which is on. In this scenario, if the user clicked the "indoor" option and
submitted the form, the resulting form data would be indoor-outdoor=on, which
is not useful. So the value attribute needs to be set to something to identify the
option.

------------------------------------------------------------------------------------------------------

19)Check Radio Buttons and Checkboxes by Default

You can set a checkbox or radio button to be checked by default using the
checked attribute.

<input type="radio" name="test-name" checked>

------------------------------------------------------------------------------------------------------

20)Nest Many Elements within a Single div Element

The div element, also known as a division element, is a general purpose container
for other elements.The div element is probably the most commonly used HTML
element of all.Just like any other non-self-closing element, you can open a div
element with <div> and close it on another line with </div>.

------------------------------------------------------------------------------------------------------

21)Declare the Doctype of an HTML Document

At the top of your document, you need to tell the browser which version of HTML
your page is using.You tell the browser this information by adding the <!
DOCTYPE ...> tag on the first line, where the ... part is the version of HTML. For
HTML5, you use <!DOCTYPE html>

<!DOCTYPE html>

<html>

<!-- Your HTML code goes here -->

</html>

------------------------------------------------------------------------------------------------------
22)Define the Head and Body of an HTML Document

Any markup with information about your page would go into the head tag. Then
any markup with the content of the page (what displays for a user) would go into
the body tag.Metadata elements, such as link, meta, title, and style, typically go
inside the head element.

Here's an example of a page's layout:

<!DOCTYPE html>

<html>

<head>

<title> </title>

<!-- metadata elements -->

</head>

<body>

<!-- page contents -->

</body>

</html>

Note - <head> it defines/holds what information is needed for the html file , it's
effect cant be seen visibly on the page like other elements.Example adding links
to an external css files , etc.

------------------------------------------------------------------------------------------------------

23)Add a space between elements

<br> = break

------------------------------------------------------------------------------------------------------
24)Text formatting

<b> or <strong> - bold

<i> - italics
<u> - underline
<del> - striked line
<sub> - sub script
<sup> - super script

o/p -
------------------------------------------------------------------------------------------------------
25)To give a horizontal line
<hr>
-------------------------------------------------------------------------------------------------x-x-x-x-x-
x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------

w3school is founded by w3c.

-----------------------------------------------------------------------------------------------
1)some new elements
semantic elements -
https://www.w3schools.com/html/html5_semantic_elements.asp
(i)article
----------------------------------------------------------
(ii)aside
----------------------------------------------------------
(iii)details , summary
Without the 'open' attribute
with the 'open' attribute
----------------------------------------------------------
(iv)figure , figcaption
----------------------------------------------------------
(v)footer
----------------------------------------------------------
(vi)header
----------------------------------------------------------
(vii)main
----------------------------------------------------------
(viii)nav
----------------------------------------------------------
(ix)progress

o/p -

----------------------------------------------------------
(x)section
----------------------------------------------------------
(xi)wbr
-----------------------------------------------------------------------------------------------
2)Form input types
http://html5doctor.com/html5-forms-input-types/
-----------------------------------------------------------------------------------------------
3)HTML Canvas

Using JS , inside canvas tag we can make graphics.

-----------------------------------------------------------------------------------------------
4)HTML SVG
Using svg tag we can make graphics using predfined tags.
Difference between canvas & svg is that when we zoom the webpage svg donot
gets distorted as it is a vector , meaning more dynamic.

-----------------------------------------------------------------------------------------------
5)HTML audio

audio formats -
 · mp3 : type = audio/mpeg
· ogg : type = audio/ogg
· wav : type = audio/wav
----------------------------------------------------------
· <audio controls loop> : will loop the audio after it ends
· <audio controls autoplay> : will play the audio as soon as the page loads
· <audio controls muted> : will mute the audio
-----------------------------------------------------------------------------------------------
6)HTML video

video formats -
· mp4 : type = video/mp4
· webm : type = video/webm
· ogg : type = video/ogg
----------------------------------------------------------
loop , muted , autoplay
-----------------------------------------------------------------------------------------------
Note - To embed youtube video to a site.
Step 1 - click on share button on the video
Step 2 - then click on embed
Step 3 - copy the <iframe> code to the html file