HTML & Fullstack Development Notes

what is fullstack?
- end to end development
- fullstack development is nothing but involving frontend , backend and databases.

full stack is divided into majorly 3 types

[Link] end
[Link]
[Link]

1. frontEnd:- front end is nothing but building user interface(text , images, intercations ,animations.....).

technologies using in frontend are:-

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]:- backend is used to write business logics.

technologies using in backend are:-

[Link]
[Link]
[Link]
[Link]
[Link]
[Link] net , c , c# etc........

[Link]:-database is used to store the data permanently.

technologies used in database:-

[Link]
[Link]
[Link]
[Link]
[Link]

requirements to develop full stack application

what is the difference between web designer & web developer

web designer(UX developer) :- those will create the template(Image) of how an application should look.
- By using tools such as adobe photoshop , figma etc....
- UX stands for "user experience"

web developer (UI developer):-Those will develop the actual code for template and make that application as
interactive.
- by using technologies such as html , css , js ,etc.....
- UI stands for "User Interface"
major concerns(challenges) in modern web development
[Link] interface:- rich UI.
[Link]
[Link] & performance of an application.
[Link]

what is language?
-language is a medium to communicate and to share information with others.

what is programming language?

- it is a set of instructions/ codes to communicate with machine.

Programming languages divided into 3 types

[Link] level language
[Link] level language
[Link] level language

1. Low level language:- it is a language which cannot be understand by human being but can be easily
understand by the machines.
- Binary language (0's & 1's)

a = 10;
b=20;
a+b; 1010101101101000

[Link] level language:- it is also called assembly level language.

- translators are used to convert assembly level language into machine language.
- Mid level cannot used to develop applicatios such as flipkart, amazon....

a= 10;
b=20;
ADD a,b; MUL , SUB , MOVE
[Link] Level language:- Codes will be written in human understandable language and it will convert into
machine understandable language by translator(compiler).
ex:- C , C# ,Java ,JavaScript, Html , CSS , Python ,etc.......

high level language is classified into 3 types

[Link] app
[Link] app
[Link] app

desktop app:- an application which can be opened in desktop.

- needs to be installed
- doesn't need internet
-they store the data locally
- desktop applications are faster than web application & Mobile apps

web applications:-Any app which opens inside a browser.

-need not to be installed
- needs internet to connect
- no need to be updated
 - web apps are slower than desktop and mobile
- stores the data in the offsite storage

Mobile application:-Any app opens in mobile.

- needs to be installed.
- needs internet .
- needs to be updated
-faster than web apps
- stores the data in the offsite storage

HTML:-
- html stands for hyper text markup language.
- html is a standard markup langauge to create webpages.
- hyper - linking between web pages
- text - information/ data displaying on web page(UI).
- markup - markup is nothing but a "tags".

- HTML is used to create basic structure of the web pages.

- html was introduced in 1991 by "Tim Berners's lee".
- current version of html is "html5.x".
1991 - html1(18 tags)
1993 - html2
1995 - html3
1997 - html4
1999 - 2014 -> xhtml
2014 - html5(current and sustained version).

html5 features:-
- semantic tags
- media tags
- geolocation
- storages(local ,session)
- drag & drop
- canvas & svg

- is HTML case sensitive or not ?

- it is case "insensitive".

is HTML is a programming language?

- No , it is a "markup language".

TAGS:-
- Tags will tell the browser how to display the contents.
syntax :- tags are enclosed within angular braces(<>).
ex:- <></>
- html is having a series of tags to create the content.
- "Tags" are predefined.
- ex:- <img src=""/> , <video></video> , <p></p> etc...
- tags are the building blocks of html.
- tags display the actual contents on the UI(user interface).

- tags are divided into 2 types:-

[Link] tag / container tag
[Link] tag /self-closing tags / empty tags / void elements / singleton elements

[Link] tag:-
-any tags which is having opening tag and closing tag we call it as "paired tag".
syntax:- <> - opening tag
</>- closing tag
<></> - paired tag

ex:- <p></p>, <h1></h1> , <audio></audio> , <table></table> etc...

[Link] tag:-
- any tag is having only opening tag we call it as "unpaired tag".
syntax:- <> / </> - opening tag / self closing tag
ex :- <img> / <img/> , <input> / <input/>, <br> , <hr> , <link/> etc...

install vs code:-
- [Link]

- to open the vs code in the particular folder/working directory,

step -1 :- open the folder
step-2 :- open terminal in that folder
step-3 :- type command to open vs code that is "code ."

- to create a some cocntent and to display the content on the browser ,

we need to create a "html file".
- this "html file" should be created with the file extension called "[Link] / [Link]"

basic structure of html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
</body>
</html>

<!DOCTYPE html> :- it is a document type declaration statement , which gives instructions to the browser about
current version of html file.

<html></html> :- it is a root element. which act as a parent tag for head and body tag.

<head></head> :- head tag is also called as "invisible part". all the meta data / hidden information will be written
inside this head tag.
<meta> :- meta tag is used to hold actual meta information such as character set , viewport , authors etc..

<meta charset="UTF-8">
UTF-8 -> unicode transformation format 8-bit

body :- body is the visible part of the html document to the end user.

what is html element?

- the html element is a combination of opening tag and closing tag and content in between called as element.

syntax :- <p>content</p> , <div>element contains content</div>

what is Search engine optimization (SEO) ?

- Search engine optimization (SEO) is the process of improving a website's
visibility in search engine results.

[Link] / [Link] / [Link] / instagram /insta

basic tags:-
- heading tags :- these tags are used to write headings in the document.
- heading tags are h1 to h6
<h1></h1> - having more preference with default font size - 32px
<h2></h2> - 24px
<h3></h3> - 18.72px
<h4></h4> - 16px
<h5></h5> - 13.28px
<h6></h6> - having least preference with default font size - 10.72px

<p></p> :- this tag is used to create normal text in the document.

- the contents will be having defualt 16px font size.

<div></div> :- this tag is like a container to store other elements fpor desging purpose.

<br> :- to add single line break.

<hr> :- this tag is used to add horizontal line.

<img> :- this tag is used to display the image inside the webpage.

syntax :- <img src="[Link]" alt="" width="" height="">

src :- to give the path/source of the image
alt :- to provide alternate name for the image when the image is not displaying.
width :- used to set width of the image
height :- used to set the height of the image.

Attributes:-
- attributes are nothing but an additional information about the tags.
- attributes should be written isnide the opening tag.

- types of attributes
[Link] attributes
[Link]/element specific attributes
[Link] attributes
[Link] attributes :- these attributes can be used for all the html elements globally.
ex:- id , class , style , title etc..

id :- this attribute is used to select the individual elements from the document.
class :- this attribute is used to select the multiple elements from the document.
style :- this attribute is used to add stylings to the element.
title :- it is used to add abbreviation for the content.

[Link]/predefined / element specific attributes:-

- these attributes can be used with only specific tags/elements.
- ex:- src, alt , href , type etc...

[Link] attributes :-
- these attributes doesnot have a value it will take either true/false.
ex:- reversed , controls , multiple etc..

grouping of elements:-
- based on behaviour of the html elements on the browser they are grouped into 2 types. they are,
[Link] level elements
[Link] level elements

block level elements inline level elements

************************************ ***************************************
[Link] elements occupy full width of [Link] elements occupy only the content width
the screen

[Link] elements always starts in a new [Link] elements starts next to each other.
line.

[Link] elements width & height can be [Link] elements width & height cannot be modified
modified.

[Link] can be given in all the 4 sides [Link] can be given in all the 4 sides

[Link] can be given on all the sides [Link] can be given only right & left but top and bottom cannot be
given.
of an element

ex:- div , p , body , h1-h6 , section , ex:- br , hr, span , a , button , input etc....
article , ol , li eetc....

formatting tags:-
- these tags are used to format the text in the document.
- formatting tags are,
1. bold tag (<b></b>)
2. strong tag (<strong></strong>)
[Link] tag (<i></i>)
[Link] (<u></u> / <ins></ins>)
[Link] tag (<del></del> / <strike></strike>)
[Link]()
[Link] ()
[Link] tag <mark></mark> :- for highlighting the text with background color.

semantic tags :-
- semantic tags convey the meaning of the content written inside it.
ex:- <header>header</header> , <footer> anything footer</footer>
- semantic tags clearly describes the meaning of the content for the devlopers.

semantic tags are:-

- header , nav , main , aside , section , article , footer ,
figure , figcaption , details , summary

figure tag :- this tag is a container to store image and caption of this image.
figcaption :- this tag is used to provide caption for the image.

details :- The <details> tag specifies additional details that the user can open and close

summary :-The <summary> tag defines a visible heading for the <details> element. The heading can be clicked
to view/hide the details.

anchor tag :-
- anchor tag is used to provide a hyper link between 2 web pages.
syntax:- <a href="" target="">Google</a>

- href :- hyper reference attribute is used to link the path of the web pages.
- we can link either internal pages or external paths.

- target :- this attribute is used to open the webpage either in the same tab or in a different tab.

media tags :-
- media tags are audio and video to display mp3 , mp4 , mov musics and videos etc..

audio tag:-
- used to display the music.
syntax:- <audio src='' controls></audio>

- src- this attribute provides source of the audio.

- inside the this audio with the formats like mp3 , mp4, webm , ogg etc...

controls :- it is used to provide controls such as play , pause , forward , backward etc...

video tag:-
- used to display the videos.
syntax:- <video src='' controls></video>

- src- this attribute provides source of the video.

- inside the src formats like mp4, mov , ogg etc... can be given

controls :- it is used to provide controls such as play , pause , forward , backward etc...
Iframe tag :- this is also called as inline frame tag which is used to embed(to
add) another html document(web page)
inside current html document(web page).
- iframe tag is used to create nested web pages(one page inside another one).
- iframe is used to embed youtube videos and google maps into html document.
- attributes are :- src , frameborder , width , height
- src :- it is used to add source of web page , videos , maps , pdf etc..

- iframe tag is also used to embed youtube videos into html document.
syntax :- <iframe src="" frameborder=""></iframe>

marquee tag:-

marquee tag:-marquee tag is used to display the content which is moving

from either top , left , bottom , right.
-Marquee is used to provide scrollable text on the browser.
syntax : - <marquee direction="" behavior="">text to move</marquee>

direction - defines direction of content flow

-> left(default) , right , up , download
behavior:- it defines how the content should scroll

scroll(default): infinite number of times it will scroll from one end to another end
slide: is happens only once
alternate: it bounces the content

scrollamount :- it is used to specify the speed of scroll .

list
- list out the items
- collection of items in a sequential orders.

3 types of list:-
[Link] list(<ol></ol>)
[Link] list(<ul></ul>)
[Link] list(<dl></dl>)

[Link] list(<ol></ol>):-
- ordered list is used to list the items in a sequential order.
- orderd list can be created with <ol> tag which is associated with <li></li> tag.
- - ol is having mainly 3 attributes
-type :- to specify the numbering type
-start:- to specify the start from inbetween
-reversed:- to reverse the numbering type

[Link] list (<ul></ul>):-

- unordered list is used to list the items with unsequential order.
- unorderd list can be created with <ul> tag which is associated with <li></li> tag.
- unorderd list is having only one attribute that is "type".
- type attribute values are disc , circle & square.

- ex:- <ul>
<li>list1
<ul>
<li>list2
<ul>
<li>list3
<ul>
<li>list4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

- in the unorderd list the first preference based on nesting position it will take disc , circle followed by square.

nested list :-
- it is a combination of orederd list & unordered list.

- ex:- <ol>
<ul>
<ol></ol>
</ul>
</ol>

[Link] list :-
- in html , we can a list a content exactly similar to content of dictionary or encyclopedia.
- this tag can be created with <dl></dl>
- <dl></dl> tag is having 2 children that is <dt></dt> & <dd></dd>

HTML <dt></dt>
kajhcjd <dd></dd>
dt - defintion terms
dd - defintiion description

Tables:-
- table is a collection of rows & columns.
- data will be arranges in the systematic order.

how to create table in html?

- mainly table , tr , th , td tags are needed
- apart from these 4 we have caption , thead , tbody , tfoot , colgroup ,col

<table></table>:-this tag is a parent container for table data.

-this tag defines structure of the table data.
<tr></tr> - tr tag stands for "table row".
 - to create a row in the table.
<th></th> - th stands for "table header".
- to define table headers.
- by default , they arrange content in center as well as boldness to the text
<td></td> - td stands for table data.
- it is used to define actual data of a table.
- by default , arranged in left with normal thickness.

border :- it is a attribute used to add border for the table.

cellspacing :- it is used to add space / remove space between 2 cells.
cellpadding :- it is used to add a space within the cell / around the content.
align :- to align the content to center.
bgColor:- to give background color

note:- border , cellspacing , cellpadding should be given to only table tag.

rowspan :-merging of two or more rows into single row.

syntax : - rowspan="count" , count-> number of rows

colspan:- merging of two or more columns in to single column.

syntax :- colspan="count" , count:-number of coulmns.

thead:- table head defines the header portion of the table (container for table heading )
tbody:- table body defines the actual body portion of the table(container to hold actual data)
caption:- caption tag is used to give caption(heading) for the table.
- by default it will be aligned exactly center with respect to table.

note:- in html tables , we dont have any tag called as table [Link] only have table row.

forms :-
- forms are used to collect the data from the user.
<form></form> tag is having some attributes action , method , autocomplete , onsubmit.
<input> - it is a common tag to collect data from the users.
action :- which specifies the path/url where data will go after submit
method:- which specifies the method like get ,post , put , delete
autocomplete:- The autocomplete attribute specifies whether a form or an input field should have autocomplete
on or off.
- Autocomplete allows the browser to predict the value. When a user starts to type in a
field, the browser should
display options to fill in the field, based on earlier typed values.

- form , input , label , textarea , select , option , datalist

- form tag attributes :- action , method ,autocomplete , novalidate
- input tag attributes :- type , id , name , value ,placeholder , required , autofocus
readonly , maxlength , patterns ,disabled , list

Input element :-
The HTML <input> is a fundamental form element. It can be displayed in many ways, depending on its type
attributes.

There are several types of inputs. Some of the important ones include:
- The <input type =“text”> defines a single-line text input field.

- The <input type="password"> defines a password field.

- The <input type="submit"> defines a button for submitting form data to a server page.

- The <input type=”radio”> defines a radio button. The radio button is used when only a single option needs to
be selected out of several offered options.

- The <input type="checkbox"> defines a checkbox. Checkboxes are used when one (or more than one) option
is required to be selected.

- The <input type="email" > defines a email field.

- The <input type="tel" > defines telephone fields , where we can enter a phone numbers.

- The <input type="file" > defines a file field , where we can select resumes , pdf , images etc..

- The <input type="number" > defines a number field where we can collect the data like age , numbers etc...

- The <input type="date" > defines a calender files , where we can select date along with time .

- The <input type="reset" > defines reset field for resetting the form to clear.

The <label> tag:-

- A label can be assigned with a <label> element.
- The label element makes the browser user-friendly and provides a focus when you click on a label tag.

The <textarea></textarea> tag :-This is used when the user has to enter details that may exceed a single
sentence.

<select> </select> & <option></option> :-

- The HTML <select> tag is used to create a drop-down list for user input, containing <option> tags to display
the available choices.
- It provides functionality for selecting one or multiple options from a list.

<datalist></datalist>:-
- The <datalist> tag specifies a list of pre-defined options for an <input> element.

- The <datalist> tag is used to provide an "autocomplete" feature for <input> elements.
Users will see a drop-down list of pre-defined options as they input data.

<fieldset></fieldset> :-
- The <fieldset> tag in HTML is used to group related elements within a form.
- It provides a visual and semantic structure to the form.
- The <fieldset> tag is often used with the <legend> tag, which provides a caption or title for the group of fields.