What is Html?

It is used to Structure a webpage with some tags/codes.

Technically we'll call HTML programming Language.
Generally we'll call these as markup Language.
markup - Structure/Layout

Browser will understand three languages:

HTML - Hyper text markup languages- Structuring webpage.
CSS - Cascading StyleSheet - Design a webpage.
JS - Javascript - It is used to make webpage dynamic.
dynamic - it is used to perform some action.

Hyper - web -Browser

text- normal text writting in tags.
markup languages - Structuring ur layout of ur webpage.

HTTP- Hyper text transfer protocol.(Globally u can access)

FTP - File transfer protocol.(Local way of accessing the code/files).

Html - case insensitive

Http:(not have secured connection)

it is a protocol to manage the serve.
Https:(secured connection)
it is used to connect our webpage to server with secured manner.

Html element ?
An Html element is defined by a start tag,contents,end tag.
Syntax:
<tag_name>CONTENT</tag_name>
Html tags are like keywords which defines that how web browser will format and
display the content.
NOTE:
Some Html elements have no content these elements are called empty
elements.Empty elements do not have an end tag.
<tag_name> Content </tag_name>
| |
start tag/open tag end tag/close tag

All html tag must enclosed within <> these bracket.

Every tag in html performs different task.
If you have used an open tag<tag>,then you must use a close tag</tag?(except
some tags).
Html tags are always written in lower case letters.

Heading tags in HTML?

This h1-h6 tags are used for Heading purpose.
Till h1,h2,h3,h4,h5,h6 we're having pre-defiend tags in Html.
h1- is having higher priority.
h6- is having lower priority.

what is paragraph tag ?

paragraph tag is nothing but it'll take block of text.
if u want to break the text into next line u have to use br tag.

what is pre tag?

pre tag - preformatted text element
it also used to store block of text but font style will be changed here.
if u want to break the text next line we can directly print the text
in next line.

br - break the text in next line (Self closing tag).

b - tag is bold tag it is out dated or deprecated.

strong - tag is having same functionality of bold which newly added
in html 5.

LINK Tag IN HTML:

Link tag is used to link the pages or send information about
file path we're linking with browser.
How it linked with browser?
href - hyper reference it is used to send information to the browser about file
path.
it is also used to link the files path and pages to the browser.
rel - it is nothing but relational attribute which is used to identify the type of
file.

what is attribute?
attribute is nothing but a property Which used to change the behaviour of elements.

Hyper Link:
It is used to navigate from one page to another page with help of href.
<a href=""></a> - anchor element.
1. Absolute Linking:
absolute linking - Entier URL
<a href="https://www.facebook.com/">Home</a> // absolute path
linking
2. Relative Linking:
Relative linking - file path from the project folder.
./ - it is used access files inside the project.
../ - it is used to access files outside the project folder.
<a href="./HTML.TXT">Home</a>
<!-----Relative linking-->

attributes of hyper link:

target-
it is used to traget which page i want to navigate.
multiple attribute inside target attribute:
-_self - it is used to navigate the page in same page but old page is overrided
by new page.
-_blank - it is used to navigate the page in new blank page.
Note: by default anchor will perform self action of navigation.

image extention
.png
.ico
.jpg
.jpeg
.mega

ordered and unordered list

ordered list: It is a list of products or collection of values which is arranged in
order.
<ol></ol> <li></li> - list of
zen coding - it is used to reduce the user work incase of building lines of
code.
li*5 - build 5 li's build from ol tag - ol>li*5
type - "1", "A", "a", "I", "i" this are the pre-defind values to arrange the
list items
in order.

nesting of ol element:
embbeding multiple ol elements inside the ol tag .

unordered list: It is a list of products which is not arranged order.

This list used for menu creation purpose.
<ul></ul> <li></li> - list of item

image tag :
image tag is most important to add the picture to our webpage.
src - it is used to track the source of our image file.
alt - it is used to add the text to our default image thumbnail.
srcset - it is used to add responsive image with different resolution based on
screen size
it'll print the image.
Can i add multiple images in my image tag?
it is not possible.

Empty tag or self closing tag:

because using this tag we can do some in -built functionality
but we can't store a text inside this tag.
<br/>
<img/>
<link/>
<input/>
<meta/>

<source/>

elements:
it is used to store block of text
<head> </head>
<title></title>
<body></body>
<a></a>
<nav></nav>
<div></div>
<ol></ol>
<ul></ul>
<section></section>

<li></li>
<p></p>
<pre></pre>

semantic tags or elements: <html5 semantic>

The tag which has meaning is called semantic tags.
<section></section> - <html5> - it can hold block of text and code in structural
manner.
<article></article> - it is used easily understand by both user and browser to wrap
blog of text.
<aside></aside> - this content always places as slideshows.
<nav></nav> - which is used for navigation purpose.
<header></header> - title purpose.
<footer></footer> - bottom page layout.
<details></details> - highlight some important inform send to the browser.
<figure></figure> - used to place a picture for identify.
<figcaption></figcaption> - it marks a photo in a document.
<address></address> - it is used for email,pincode,zipcode and location purpose.
<time></time> - It is used for browser understand time and date as mentioned.
<main></main> - It is used for important layout purpose.
<Link /> - It will send the file, icon information to the browser.
<table></table> - It is used for table representation.
<form></form> - It is used to collect user information with the help of non
semantic tags
<head></head> - It send information to browser.
<title></title> - It is used to name the browser tab.

Non-semantic tags or elements:

The tag which have no meaning is called non-semantic tags.
<br />
<p></p>
<pre></pre>
<span></span>
<hr />
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div></div> - <html4> - it can hold block of text and code in structural manner.
<a href=""></a>
<ul></ul>
<ol></ol>
<li></li>
<input />
<tr></tr>
<td></td>
<th></th>
<meta>

How to include css in Html:

1.Inline way
By using Style attribute we can link some css property in Html.
<i class="fab fa-500px" style="font-size: 200px"></i>
2.Internal way:
By adding style tag we can specify the code in Html.
 <style>
body {
background-color: crimson;
}
section {
background-color: darkgreen;
}
i {
color: deeppink;
}
</style>
3.External way:
By creating separate file and using link tag we can connect that file.
<link rel="stylesheet" href="./Style.css" />
File name Style.css

How to create a table using html?

By using <table></table> element we can specify a table.
<tr></tr> - row,<td></td> - data, <th></th> - table heading purpose
<caption></caption> - table heading purpose

Type of CSS selectors:

1. id selectors - first priority - #.
2. class selectors - second priority - . .

id:
Defines a unique identifier (ID)
which must be unique in the whole document.
Its purpose is to identify the element when
linking (using a fragment identifier),
scripting, or styling (with CSS).

class:
Class is the most prefered selector to select the element
with dot notation (".") in css.

Box modeling:
1.Margin:
with the help of margin we can align the block of text or image in webpage.
which is having two properties (marging: (top to bottom, left to right))
With help of margin we can make text invisible with negative number.
if the value of first property will be positive it'll align the block from top
to bottom.
if the value is negative it'll align the property from bottom to top.
if the value of second property will be positive it'll align the block from
left to right.
if the value is negative it'll align the property from right to left.
Note: margin means space between webpage to border.
2.padding:
with help of padding we can align the text inside the block.
padding will have two properties (padding: (top to bottom, left to right))
It'll not have negative value.
Note: padding means space between content to border.

3. border:
With the help of border we can build our block border line.
it's the space between block to margin.
border will have three property (border :(size shape color)).
dashed
solid
dotted
double

Box -modeling 🔢:
with help this modeling we can design the block based the Structure design we
want for that
we're using margin,padding,border.

Block level element:

In block level element it'll take block width of the property.
which take extra unwanted space in webpage.
with help of block level element we can convert inline element into block level
element.
by wrapping <div><span></span></div>.

inline element:
In inline element it'll take only the content width of the property.
Which'll consume less space in webpage.
it is not possible to convert block level into inline.

Features of html 5:
Doctype - it is used to identify which type document (browser)
- Browser works efficiently because it has clear meaning about the document
type.
- it case insensitive.
lang - which is used to identify which lang we're using.

what is meta tag?

It is used to specify the short descrpition about the webpage & Browser.
It is used for reading purpose.
It is not mandatory but good standard for writting code.

charset - It is sequence of character or collection of character which is used for

encoding.
UTF 8 - This a encoding format Which is having by default 8 bit of data.
- It stands for Unifide text format or unicode tranformation Format.
http-equiv - It is used for connectivity purpose.

viewport - The interface with different dimension of the screen resolution.

How to add background image using css?

background-image and url method
we can add image using css.
background-size is for adding size of image.
background-repate we have to make it no repate always
this is used to avoid multiple images.

How to add background color gradients?

we're having two types of gradients:
1. linear gradients - will have color position with color shades linearity.
2. radial gradients - will have only the shapes inside our color background.
https://cssgradient.io/ refer this site for gradients creation.

Universal selector:
The Universal selector is build top on body tag.
So it'll override the body tag.
With the help of Universal selector we can select all the elements in the
document.
 Inside Universal selector we can call margin and padding and assign value as 0
to
reduce the extra space of background images.
Universal selector always start with asterisk *.

how to add position of the block using css?

The position property in css is used to align the blocks.

4 types of position property:

1.Absolute:
It'll override the next block of the code.
with help of top, right, left, bottom we can align the block.
2.Relative:
It'll not override the next block of the code.
But we can algin the property.
3.fixed:
with the help of this property we fix the position we'll not change it's
position.
4.static:
By default position of css will be static.

Note: right,left,bottom,top always works only if we apply position otherwise it

won't work.

Most important topic in Html:

Form:
It is used to collect the end user information.
input tag:
It is used for user to edit the field for storing information.
it is mandatory to add the input tag in form.
attribute of form:
type - It is used to mention the type of field user editable field.
for & id - attribute is is used to control the input field with help of id
attribute in input tag.

action - This is attribute will establish connection b/w frontend to background.

Fieldset - It is used to add border for every block of text or forms.

- Inside fieldset legend tag is act as caption (heading) of fieldset.

datalist - It is used to store optional values.

option - It is used to store multiple values.

Note: list attribute in input tag and datalist id name should be same otherwise
we'll be not
getting any suggestion.