HTML: Hypertext Markup Language.

is used to create web pages.

it create static web pages(to add interactive at client end we use JS,jQuery).
and to decorate the web pages(CSS,bootstrap).

HTML basic structure:

Block-level elements(<h1>,<p>,div)
<p> elements are meant to write a paragraph while div acts as a container which can
contain other html elements.
span: is an inline html element.
br: used to break the line.
hr: horizontal line

if an html element does not have content, it can be closed like

<img/>

In html, list can be ordered or unordered:

<ol>: ordered list

<ul>: unordered list
<dl>: definition list

html forms:
it is used to collect input data from user and that data will be submitted/sent to
the server application for further processing.
<form>
</form>

1.How to disable past date?

create a date field for booking ticket. It should not allow to select past date and
should only allow to select date for next 3 months.

name= group elements

reg.jsp
request.getParameter("fname"): will return the value of that inout field.

request.getParameter("city")

CSS: Cascading style sheet

it describes that how an html element will appear on the web page.

CSS styling can be done in 3 ways:

1. Inline styles
we use "style" attribute in the html tag.
This styling is only applied to that particular element in which it is written.

2. Internal styles:
we use "<style>" tag in the head section of the html file.
This style is applied to the elements in the html file where it is written.

3. External styles
we use a separate .css file. this can be applied to any html file elements by using
"<link>" tag.

Any CSS has two parts:

"property-name":"value"

CSS selectors:
1. Element selector:
 We specify the element for which CSS is being written.

2. id selector: we specify the id of the element to which CSS shoudl be applied.

(applies to one element)

3. class selector: we specify the class of elements to which CSS should be applied.

em
browser text size: 16px
1em: normal: 16px

descendents
child

CSS Box Model:

width=300px
+left padding+right padding=20px
+left border+right border=20px
+left margin+right margin=80px
total width=420px

padding: top right bottom left

padding: 10px 20px 30px:
top right bottom
left
padding: 10px 20px
top right
bottom left
padding: 10px (all sides)

width=100px+20px+20px=140px

to fix the total width,irrespective of amount of padding, use box-sizing:border-

box.
border: width style color

margin:auto:horizontally center

1. remove bullets: list-style-type:none

2. push list towards left: float:left
3. make it horizontal
4. create space: padding
5. character spacing: letter-spacing
6. remove underlines and color from hyperlink: text-decoration:none

overflow: visible,hidden,scroll,auto

after: it will add some content after the element

,before selector

display css:
none,inline,block,inline-block,
table: element will be like a table

clear: do not allow to float elements

clear:none(allow floating on both sides)
left,right,both: no allow floating as per the parameter
JavaScript:
scripting programming language
--respond to change in input at client side.
-- majorly used for client side validation.

JS access the html element content bu using HTML DOM(Document object Model)

DOM: when an html page is loaded on the browser it create a DOM of that page in the
memory as a tree structure

JS has the ability to access and modify the content of DOM tree.

A JS code is written inside <script> tag.

innerText will simply store any data as simple text.

innerHTML can recognize html tags if used.

innerText="<h3>Simant</h3>";
output: <h3>Simant</h3>

innerHTML="<h3>Simant</h3>";
output: Simant will be diplayed in h3

focus event:
onfocus(): event is fired when the mouse is clicked on the element(element gets the
focus).

onblur(): event is fired when focus is shifted away from the html element.