Html Notes

Network:Collection of computers interlinked together is called network. First network

name is ARPANET (Advanced Research Projects Agency Network). First protocol in IT
industry is FTP (File Transfer Protocol).

Internet:Internet stands for international networking.

1990
The Internet is a network of connected computers. No company owns the Internet; it is a
cooperative effort governed by a system of standards and rules. The purpose of
connecting computers together, of course, is to share information.

A Brief History of the Web

The Web was born in a particle physics laboratory (CERN) in Geneva, Switzerland in 1989.
There a computer specialist named Tim Berners-Lee first proposed a system of
information management that used a “hypertext” process to link related documents over
a network. He and his partner, RobertCailliau, created a prototype and released it for
review. For the first several years, web pages were text-only. It’s difficult to believe that
in 1992, the world had only about 50 web servers.

TimBerners-Lee internet (1989-1990)

 Html (HyperText Markup Lang)
 http (hyper Text Transfer Protocol)
 W3C org

The World Wide Web Consortium

World Wide Web Consortium (called W3C) is the organization that oversees the
development of web technologies. The group was founded in 1994 by TimBerners-Lee,
the inventor of the Web, at the Massachusetts Institute of Technology (MIT).
Tim Berners-Lee (WWW/HTTP), Cerf & Kahn (TCP/IP), Baran, Davies, Kleinrock &
Roberts (packet networking), Bob Metcalfe (Ethernet).

TYPES OF APPLICATIONS OR SOFTWARES

We can create an application or software in fallowing flavors:
1) Desktop: The applications which are installable in local systems are called desktop
applications.
2) Mobile: The applications which are installable in mobile phones or tablets
downloaded from play store for android and apple store for ios.
 3) Web: The applications which are deployable in any server and can be accessible from
any location using browser.

WHAT IS WEB APPLICATION?

Web applications are network enable applications. We can deploy any web applications
in servers and we can access them over network using server ip address and application
name.
In computing, a web application or web app isaclient–server software application which
the client (or user interface) runs in a web browser and it contains web documents in the
form electronic pages(web pages).

A web application typically contains fallowing three layers:

Presentation layer is a user interface (views) which are accessible from any web browser.
Business layeris a server-side program which is nothing but automation of business rules.
Client layer will interact with business layer to persist data.
Data layeris database software where we can store client related data. Business layer will
interact with data layer.

What is web browser?

It is client-side lightweight software installed in client machine. It sends http request from
client to server;http response from server.
Browser provides navigation among web pages, and browsers executes html, css,
JavaScript files and displays output to user.

List of Mobile Browsers:

Mobile Safari (iOS), Android Browser (Android), BlackBerry Browser (RIM), Nokia Browser
(Symbian), Opera Mobile and Mini (installed on any device), Internet Explorer Mobile
(Windows Phone), Silk (Kindle Fire) etc…

Server
A server is a computer or system that provides resources, data, services, or
programs to other machines, known as clients, over a network/inet.
In theory, whenever computers share resources with client machines, they are
considered servers.
a server stores all the data associated with the websites that are hosted by it
and shares that info with all computers and mobile devices (like yours) that
need to access them.

Client
A client is a electronic device that connects to and uses the resources of a remote
computer, or server.
Client maybe a desktop or a laptop or a tablet or a mobile phone or a TV etc.
The device which is used by the user is called as “Client”.

User
The person who is working on/operating client machine is known as User or end-user.

Client:
It is a machine or device (desktop or laptop or tablet or mobile phone or TV etc), which
can access the data from server machine.
The device which is used by the user is called as “Client”, person who is working on client
machine is known as endUser.

STATIC WEB APPS:

The applications which can’t able to handle business logic are known as static web
apps.Static apps will contain only client layer.We can develop static web applications
using HTML. To provide look and feel to these static pages we can use CSS. To handle
client layer business logic we ca use Javascript.We can’t able to maintain end user
interaction(state) using static web apps.

DYNAMIC WEB APPS:

The applications which can able to handle business logic are known as dynamic web
apps.These type of apps contains at least 2 layers client and business. If we need to store
client data then these application contains data layer too.We can develop client layer
using HTML, CSS &javascript and business layer using any one of the server programming
language like .NET, JAVA/J2EE & PHP etc...We can store end user data using any database
like mongo db, MS-SQL, MySql, Oracle etc.

What is HTML?
It is specially designed hypertext for web browsers, with meaningful tags or elements in
simple English language.

HTML Versions
From W3C organization there are fallowing versions released.
Version Specification Release Date
1.0 N/A (HTML 1.0) 1-Jan-1994
2.0 HTML 2.0 24-Nov-1995
3.2 W3C: HTML 3.2 14-Jan-1997
4.0 W3C: HTML 4.0 24-Apr-1998
4.1 W3C: HTML 4.1 24-Dec-1999
5.0 WHATWG 28-Oct-2014
(Adv Markup Language For Mobiles)
5.1 W3C: HTML 5.1 -Nov-2016
(Adv Markup Language For Small Electronic Devices)
5.2 W3C: HTML 5.2 14-Dec-2017

HTML Intro
1. HTML wasdeveloped by “Tim-Berners-Lee”, released in 1994 and
maintained by W3C Org.

2. HTML stands for “Hypertext Markup Language”.

3. Hypertext” means the text that can be transferred from internet server
to internet client.
"Markup Language" means which syntax will be in the form of tags or
you simply "markup" a text document with tags that tell a Web browser
how to structure it to display.

4. Technically, HTML is not a programming language, but rather a markup

language.

5. HTML is used to design "static web pages", means HTML is used to

create elements (such as headings, paragraphs, icons, menus, logos,
images, textboxes, button etc) in the web pages.
 static webpage means, that pages always showing same information.

6. HTML is very easy to understand (no pre-requisites).

HTML is “client sidetech”. That means the html code executes on the client
browser but not in server.

->The file extension either "filename.html" or "filename.htm"

-> for working html no need installs any software, and browser is responsible
for executing & producing output of html programs.
->html is 100% error free programming.
-> HTML is not a case sensitive language that means you can write the html
code in either upper case or lower case.

how design& execute html programs

 open any text editor (sw) and type program.

notepad, editplus, notepad++, textpad, sublime, ms vs, word, atom, coffee, ...
 save that program with any name (.html or .htm) and anywhere in
system.
Note:- but filename must be single word (space is not allowed).

Tag:
 A tag is a keyword, enclosed within "<" and ">" in HTML language.
 It is special kind of text placed between left angular brace and right
angular brace(<tag_name>).
 Tag is instruction / command to browser.
 Tag is used to display some specific output in the web page.
 browser was not identified the tag; it shows blank page or it prints as
text.
 tags also represented as elements.
  tag has some attributes(properties), those are used to change look &
feel (components or output).

types of tags:
in html we have two types tags, those are:
->paired tags
contains open tag and closing tag.
opening tag specifies starting point of operation/output, closing tag specifies ending
point of operation/output.
Syn: <tagname> something </tagname>
ex: <html> ...</html>
<head> ... </head>
<body> … </body>
<script> ... </script>
<style> ... </style>
<p> … </p>
note: paired tags also called as body-full tags

->unpaired tags
contains only open tag.
VOID => ITS not RETURNING ANY VALUE
Syn: <tagname> or <tagname/>
ex: <br/> <img/><input/>
<hr>
<link>
note: Unpaired tags also called as body-less tags

Structure of HTML
as per W3C we have to follow the following structure to design web pages (but it’s not
comp).

<!DOCTYPE html>
<html> html page/document designing starts here
<head>
-> non-content sec(non-result)
-> settings/internal info abt page
-> 1st executed sec
Ex: title tag, link tag, style tag, script tag, meta tag
</head>
<body>
-> content sec(result)
 -> data/info
-> 2nd executed sec
Ex: form, h1, h2, h3, h4, h5, h6, p, div, table, img, a, button, audio, video,
iframe, etc…
</body>
</html> html page/document designing ends here

generally, html page contains three parts, those are:

>versioning section
>head section
>body section

versioning section
this is providing information to browser which version we are using in webpage/program.
So, browser is interpreting code and producing output as per given specification.
Syn:
<!DOCTYPE htmlversioning-url>
HTML4.0:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN" "http://www.w3c.org/TR/html4/strict.dtd">

XHTML:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Html+xml =>xhtml

HTML5:
<!DOCTYPE html>  current version

strcit.dtd file (document type definition), it contains definitions of tags, specifications.

doctype is not case-sen, so we type in any case.
ex: DOCTYPE => valid (recommended)
doctype => valid
DocType => valid

html tag
the <html> tag represents starting and ending of html program. html tag contains two
child/sub tags those are head tag and body tag.

head tag
head tag represents non-content section (means not output) of the web page.
this information doesn't appear on webpage/in browser (it's called as non-content), but
it's used internally by the browser.
this tag is used to set icons, title, to provide some meta data (info about web app), css
settings, java scripting etc...
head tag contains some child/sub tags, those are
Syn:
<head>
<link>
<title></title>
<meta>
<style></style>
<script></script>
...
</head>

body tag
body tag represents content information (means output) of the web page.
this information appears on webpage/in browser (it’s called as content).
this tag is used to design UI or to display output.
body tag contains so many child/sub tags.
some of tags:
<body>
<form>
<h1>
<h2>
<p>
<div>
<input>
<a>
<audio>
<video>
<iframe> etc...
</body>

comment lines
comment lines are to provide some description about of our program.
Syn:
<!-- comments -- >
comments are not executed by browser.

title tag
 this tag used to set the title for a webpage, means every webpage they have individual
title.
its paired tag.
<title> is the sub tag of <head> tag.
Web site => 10 web pages =>Title 10 times
Syn:
<title>text</title>
Note: one web page/one title

Link tag
Link tag used to set the icon/logo for a webpage.
Un-paired tag.
<link> is the sub tag of <head> tag.
Syn:
<link rel=”icon” href=”filename.ext”>
Relative
Hyper reference =>.jpg .bmp .png .gif .tif .ico
Preferable image size:
18px X 18px
20X20px

heading tags
these tags are used to print data/text in heading format.
html providing 6 heading tags, those are h1, h2, h3, h4, h5, h6.
These 6 tags are used to display headings in different sizes.
six tags are paired tags and block level elements.
Syn:
<h1> text </h1>
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6>
Note: inside body section we can repeated any tag and no.of times.

Note:- head tag is very important because search engine and other user agent
usually index page content based on heading element.so if you are writing any
content then it is good approach to use heading tag for you content title.

p tag
> p stands for paragraph.
> this tag is used to display/print more lines of text (paragraph)
> its paired tag and block level.
> browser display an empty line(gap) between paragraphs (5px to 10px)
Syn:
<p> text or info </p>

Note:
>browser/html doesn't accept more than one space (space bar & tab key), means while
designing of program we given more space but browser prints only one space.
>browser/html doesn't accepts enter key (line breaking), means while designing of
program we use enter key but browser prints data without breaking line.
br tag

 br stands for break line (enter key)

 its non-paired

Syn: <br> or <br/>

Html operators
Special characters or html entities

Syn: &Operator;

nbsp
nbsp stands for non-remove blank space
nbsp produce one space.
html operator/ html entity
Syn: &nbsp;
&copy; &trade; &reg; &euro; &pound; &yen;

&lt; &gt; &frac14; &frac12; &frac34; etc…

Label tag
>label tag used for displaying prompting text.
>its paired tag, inline tag
Syn: <label> text </label>

Span tag
>span tag used for small textual data, like as error message, mandatory specification.
> in continuity of text, if we want to highlight couple of word or letters, we use span tag
>its paired tag, inline tag
Syn: <span> text </span>

pre tag
> pre stands for pre-formatting (alignment)
> pre tag is used to print data/text, how we typed in same format
> pre is paired tag, block level
Syn:
<pre> text/tag</pre>

formatting tags
<b></b>
<strong></strong>
<u></u>
<i></i>
<em></em>
<strike></strike>


<mark></mark>
..etc

b tag or strong
> b stands for bold
> b tag used to print text in bold format
> b is paired tag
Syn:
<b> text </b>
<strong> text </strong>

u tag
> u stands for underline
> u tag used to print text with underline (draws a line base of text)
> u is paired tag
Syn:
<u> text </u>
strikeout tag
> strikeout tag used to print text with line (draws a line middle of text)
>strikeout is paired tag
Syn:
<strike> text </strike>

superscript tag
>this tag used to display text top of upper line
> superscript is paired tag
Syn:
^text

subscript tag
>this tag used to display text bottom of baseline
> subscript is paired tag
Syn:
_text

itag
>i stand for italic (inclined)
>i tag used to print text with little banding
>i is paired
Syn:
<i> text </i>
<em> text </em>

Mark
->it is used to high light the text

All tags are inline elements

<b>codeminestech</b>
<br>
<u>codemienstech</u>
<br>
<i>codeminestech</i>
<br>
<em>codeminestech</em>
<br>
<strong>codeminestech</strong>
<br>
h²0
<br>
 co₂

<br>
<p>Lorem ipsum dolor sit amet <mark>codeminstech</mark>aspernatur culpa,
porro quos earum?</p>

Abbrevation <abbr>
->To mark some expression as abbreviation
Ex:- <p> I like codeminestech <abbr title=”hello”>java</abbr> </p>

Inserted , Deleted , or Stricken

->to mark text as inserted use <ins></ins>
->to mark text as deleted use <del></del>
->to stricke through text use <s></s>
<ins>codeminestech</ins>

<del>2500</del>

<s>36000</s>

attributes
> attribute is a special feature/setting/property of a tag.
> attributes are used to change the default look/feel of data(elements).
Syn:
<tagnameattribute="parameter"attribute=’parameter’ ...> Html
Note:
 parameter means the value of attribute.
 Parameter should enclosed within “ “ or ‘ ‘ or without quotes.
 Every attribute must be separated by a space

<tagname style=”attribute : value; attribute : value; …"> C S S

Note:
 quotes are comp
 Every attribute must be separated by ;

types:
as per html5 we have 4types of attributes, those are
>global attributes (universal)
Ex: id, name, class, style, align,etc…
>specific attributes (personal)
Ex: rel, href, src, colspan, rowspan, action etc…
>event attributes (dynamic)
Ex: onclick, onload, onfocus, onsubmit,
>optional attribute <== html5
Ex: lang, type,

global attributes:
these attributes are common for most of tags (99% of tags)
those attributes are:
class, id, name, style, align etc...
ex:
<h1 class="" id="" name="a" style="" ...>
<p id="" class="" name="b" style="" ...>
<pre class="" id="" name="c" style="" ...>

specific attributes:
these attributes are specific to some tags/elements only (not common).
those attributes are:
src, href, rel, target, colspan, rowspan, alt, placeholder, poster, loop, etc...
ex:
<a href="url" ... >
<imgsrc="" ...>
<audio controls>
event attributes:
these attributes are used to some logical operations.
logical operations we can perform by using JavaScript, these also called dynamic
attribute.
attributes are:
onclick, oninput, onfocus, onexit, onload, onchange,onblur, ....
ex:
<button onclick="js code/fun1">
<body onload="js code">

optional attributes:
these attributes are not comp to specify/to use.
these type attributes are supported since html5.0.
those attributes are:
lang, type, method ...
ex:
<style type="text/css" ...>
<script type="text/javascirpt" ...>
<link type="image/jpg" ...>
<form method="get" ...>

images
> "img" tag is used to display images on webpage.
> in one webpages we can display any no.of images and any type of images.
> it is strongly recommended to place all images in side root folder or create sub folder
with name images in root folder
>its un-paired tag, and its inline element
Syn:
<img attributes>
.jpg .bmp .gif .tif .png .webp

attributes:
src => to specify which img you want to display
width => width of image (pixel)
height => height of image (pixel)
title => it is used to specify tool tip. (whenever mouse pointer comes on top of image)
alt => alternative text, if image not loaded in webpage/not display, we want to display
text message to user it called as alt
syn
<img src=”location” alt=”nice” >

You can also get it from url

<img src=”address” />

<body>

<img src="https://www.topgear.com/sites/default/files/2022/07/13.jpg"
width="200px" height="200px">
</body>

<img src="location" alt=" " >

Note:- in above cases images are actually not inserted into webpage infact images are
linked to HTML pages.
->it is also possible to embed images directly inside pages using base64.
->you can easily convert any image to base64 from internet and put in <img> tag

Responsive image using picture

> To display different images under different screen width, you must
include all images using the source tag in a picture tag

<picture>
<source media="(min-width:600px)" srcset="amazon.png">
<source media="(min-width:550px)" srcset="border.jpg" >
<img src="placeholder.jpg" >
</picture>

Above
If screen width>600px ,show amazon.png
If screen width>550px ,show border.jpg
If screen width is other then above then show default picture in our case placeholder.jpg
Image Maps
->an image maps is an image with clickable areas that usually act as hyperlink.
->the image is defined by <img> tag and map is defined by <map> tag
with<area> tag to denote clickable area.

<img src="border.jpg" usemap="#shape" width="400px" height="400px">

<map name="shape">
<area shape="circle" coords="200,200,65" href="https://www.facebook.com">
</map>

<img src="border.jpg" usemap="#shape1" width="400px" height="400px">

<map name="shape1">
<area shape="rect" coords="50,50,350,200" href="https://www.facebook.com">
</map>

hyperlinks
> a stand for "anchor”
>"a" tag is used to create hyperlink,hyperlinks are used to move from one webpage to
another webpage.
>whenever user clickon the hyperlink, it moves to the specified page.
> destination page sometime within same application or other application.

>web application basically contains links to other pages, so it's very commonly used tag.
> by default, every browser provides built-in style for each hyperlink,
i.e blue color+handsymbol+under line.
we can customize these styles by using CSS.
> its paired tag, and inline element
Syn:
<a attributes>Display Text</a>
<a attributes><img></a>

attributes:
href : hyper reference, used to specify the address of webpage or web site,
i.e whenever user clicks on this link, which page you want to open
 url may be html page, server-side file, image, audio file, video, pdf file, documents
etc...
href=”url”
“” self-calling
“.”  home page of web site/home dir of web application
“#id”  it creates book marks (moving within same page)

target : where you want open destination page

_blank ==> opens the link in a window/tab
_self ==> opens the link in current working tab/window (its default)
_parent ==> opens the link in parent frame
_top ==> opens the link in full body of window
framename ==> opens the link in specified frame

html colors
html supports 3types of patterns, those are
> named colors
> RGB colors
> Hexadecimal number colors

named colors:
>it supports to write direct colorname
>we have some limited colors
ex: white, black, red, green etc...
> color names are not case-sen

RGB colors:
>RGB model specifies that the composition of 3 basic colors (Red, Green, Blue)
>RGB produces 16millions colors.
Syn: rgb(red,green,blue)
red => 0 - 255
green => 0 - 255
blue => 0 – 255

ex: rgb(10, 45, 100)

Hexadecimal number colors:

>Hexadecimal model is the shortcut for rgb model
>Hexadecimal system ranges from 0 - 15
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
Syn: #RRGGBB
ex: #13aa5c
Note: in realtime "Hexadecimal model" is recommended.

Gradient colors used from css

background: #FC466B; /* fallback for old browsers */

background: -webkit-linear-gradient(to bottom, #3F5EFB, #FC466B);  Chrome 10-25,
Safari 5.1-6

background: linear-gradient(to bottom, #3F5EFB, #FC466B); W3C, IE 10+/ Edge,

Firefox 16+, Chrome 26+, Opera 12+, Safari 7+

-webkit-linear-gradient(to left, #3F5EFB, #FC466B);

linear-gradient(to left, #3F5EFB, #FC466B);

background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(38,38,162,1) 60%,

rgba(0,212,255,1) 100%);

radial-gradient(circle, rgb(131,58,180) 0%, rgb(29,166,65) 50%, rgb(252,176,69) 100%);

radial-gradient(circle, rgba(166,29,142,1) 57%, rgba(100,180,111,1) 78%,

rgba(69,252,96,1) 100%);

div tag
>div is a container, means its grouping elements/controls/components of html.
>inside div tag we can place any content like normal text or images.
>div tag is used to divide web page as no.of subpages/parts, each part is rep as div.
>for better maintained, effective design of web page and simplifying css code.
>its paired tag, and block level element
Syn: <div attributes>
contents
</div>
>one webpage may contains any no.of div tags.

Nesting of div
->it is a common practice to place multiple dic inside another div.this is also called
nesting.
Ex:-
<div>
<div>...<div>
<div>
main element
->the <main></main> element contains the main content for your web
page.this is like unique to individual page means what ever the main content
of our webpage we can write inside it.
->as good practice <main> element should used at most once on a single
page.
<body>
<header></header>
<main></main>
<footer></footer>
</body>

Header
->in simple it is used to place introductory or navigational things
<header>...<header>

Footer
->in simple and general it contains footer part of the page
Ex: <footer>..</footer>

section
->it is just used to define a section on document
<section>..<section>

working with list tags

these tags are used to display data/info in points wise.
html supports three types of list, those are
>ol
> ul
> dl

ol tag
>ol stands for "Ordered List".
>it is used to display the text(names, colors, team names, course name...) with
numbering.
>it supports 5types numbering, those are 1, A, a, i, I. by default it displaying in number.
> by using "ol" tag we can create ordered list
>ol is paired tag& block level element

li tag
> li stands for "list item"
> li is sub tag of ol tag
> li tag is used to print text/data
> li is paired tag& block level elements
Syn:
<ol attributes>
<li> text </li>
<li> text </li>
<li> text </li>
...
</ol>

ol attributes:
type : which type numbering to display (Default is 1)
start : from where u want to start numbering (default is 1)
reversed : to displaying numbers in desc order

li attributes:
value : used for restarting numbering with specified value

<ol start="3">
<li value="7">maths</li>
<li>physics</li>
<li>science</li>
<li>hindi</li>
</ol>

<ol type="1">
<li>maths</li>
<li>physics</li>
<li>science</li>
<li>hindi</li>
</ol>

<ol type="a">
<li>maths</li>
<li>physics</li>
<li>science</li>
<li>hindi</li>
</ol>

<ol type="A">
<li>maths</li>
<li>physics</li>
 <li>science</li>
<li>hindi</li>
</ol>
<ol type="I">
<li>maths</li>
<li>physics</li>
<li>science</li>
<li>hindi</li>
</ol>

ul tag
>ul stands for "Un-Ordered List".
>it is used to display the list of items(names, colors, team names, course name...) with
bulleting.
>it supports 3types bulleting, those are dot, circle, square. by default is dot.
>by using "ul" tag we can create un-ordered list items
> ul is paired tag
>"li" tag used for creating list items
Syn:
<ul type="dot/circle/square">
<li> text </li>
<li> text </li>
<li> text </li>
...
</ul>
dl (description list/definition list) tag
>dl stands for Definition list (since html5 description list)
>dl tag used for to display definitions/full forms (collection of definitions)
>its paired tag
> "dt" and "dd" are sub tags of "dl" tag
> "dt" stands for definition title, "dd" stands for definition data.
> dt & dd are paired
Syn:
<dl>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
...
</dl>

<dl>
<dt>java</dt>
<dd>very wonderfull lang</dd>
<dt>html</dt>
<dd>hyper text markup language</dd>
<dt>css</dt>
<dd>cascading sheet</dd>
...
</dl>

fieldset tag
> this tag used for drawing a line/border around elements/controls.
> its paired tag and block level
> we can draw any no.of borders
Syn:<fieldset attributes>
designing/text
</fieldtset>

attributes(css)
align : align of elements, it supports 3 alignments center, left, right
left is default align
border : style of line, thickness of line, color of line
width : width of box (size in % )

legend tag
>legend tag used for set title/heading for fieldset
>legend is sub tag of fieldset tag
>its paired tag
Syn:<legend attributes>Heading</legend>
attributescss
align :align of elements, it supports 3 alignments center, left, right
left is default align
color :

table tag
>table tag is used to display the data in form rows & cols in the web page.
> a table is a collection of rows, each row is collection of cells/col/field.
> a table is represented as <table> tag, a row represented as <tr> tag, a colheading is
represented as <th> tag, data rep as <td> tag.
> table heading is represented as <caption> tag.
><thead> tag is rep of table head and <tbody> tag is rep of table body.
> these 2tags ava since html5.0

tr => table row

th => table header(col heading)
td => table data (col data)
thead => table head
tbody => table body

> all these 7tags are paired tags

Syn:
<table>
<tr>
<th>heading</th> or <td>data</td>

<th>heading</th> or <td>data</td>
</tr>
<tr>
<th>heading</th> or <td>data</td>
<th>heading</th> or <td>data</td>
</tr>
...
</table>

NOte:
<th> and <td> are sub tags of <tr>
<tr> is sub tag of <table>

table attributes:
border : border of table (0 means no border, 1-n border req)
align : alignment of table
width : width of table (%)
...
th& td attributes:
colspan : specifies the no.of columns to merge/expend
rowspan : specifies the no.of rows to merge/expend

<table border="1" cellspacing="0" cellpadding="3">

<tr>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>

<tr>
<td>one</td>
<td>21</td>
<td>jbp</td>
</tr>

<tr>
<td>two</td>
<td>22</td>
<td>jbp</td>
</tr>

<tr>
<td>three</td>
<td>23</td>
<td>jbp</td>
</tr>

</table>
 <table border="1" cellspacing="0" cellpadding="3">

<tr>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>

<tr>
<td colspan="3">colspane 3</td>
</tr>

<tr>
<td rowspan="3">row span</td>
<td>21</td>
<td>jbp</td>
</tr>

<tr>
<td>22</td>
<td>jbp</td>
</tr>

<tr>
<td>23</td>
<td>jbp</td>
</tr>

</table>

Colgroup , col
->sometime we need to apply styling to a group of column then you can do it
by lot of ways but we can also use colgroup tag with col attribute.
<table border="1" cellspacing="0" cellpadding="3">

<colgroup>
<col span="2" bgcolor="blue">
<col span="" bgcolor="green">
</colgroup>
<tr>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>

<tr>
<td>one</td>
<td>21</td>
<td>jbp</td>
</tr>

<tr>
<td>one</td>
<td>21</td>
<td>jbp</td>
</tr>

<tr>
<td>one</td>
<td>21</td>
<td>jbp</td>
</tr>
</table>

Thead,tbody,tfoot
->these additional elements are useful for adding separate styling as well as it
provide clear and cut view regarding table sections.
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>

Semantic elements
->element which have some meaning means it define its meaning to browser
and as well developer to

->developer have to use their own id/class and style it using css lik
header,bottom,top,navigation,main,container…etc

->so it is sometime complex to search what content written in which part we

need to see while things but if you use elements like
<header>,<footer>,<nav>,<section>,<main> etc it seem clear and cut view
that all top header part comes inside headerelement like that ..

So these are the semantic elements only which increase the accessibility of
your website.

Nav element
->these block are mainly used for navigational part means include links to
reach other pages
->you can make it either using <a> tag or using list items.
<nav>
<a href="https://google.com" target="_blank">google</a>
<a href="https://facebook.com">facebook</a>
<a href="https://facebook.com">mybook</a>
</nav>

<nav>
<li><a href="https://google.com">google</a></li>
<li><a href="https://amazon.com">amazon</a></li>
<li><a href="https://flipkart.com">flipkart</a></li>
</nav>

working with html forms

-> form is collection/group of html elements

-> by using <form> tag we can create html form(s) (mean application form)

-> web document/page it contains only one body, but a body can contain
multiple forms.

-> forms are used to collect info from users(ex: signup page, singing page, user
registration, product delivery info etc...)

info we collected by using some fields (created by tag) like text field,
password, checkbox, radio button, combo-box, list box, date, submit button,
etc...

-> form is used to submit input values (user’s data) to a server-side program.

-> form is a paired tag & block level

-> form tag is sub tag of body tag

Syn: <form attributes >

UI designing
</form>

attributes:
action :url represents destination program address or
which program we want to call specify here

"" -- > self-calling (its calling/sending data to current prog)

"." -- > home of current application
method : it represents the way of sending data from client
to server
it supports two ways, those are
get:
-> it displaying data in address bar
-> get method stores user inputs in browser history
-> it’s not more secured
-> get is a default method
-> we can bookmark these pages
-> get methods max data limit is 2048kb
-> get is faster than post
use-case's �search page, retrieving data from db, ...
Post:
-> it not displaying any data in address bar
-> post method doesn’t store user inputs in browser history
-> it's more secured
> we can't bookmark these pages
> post method data no limit
> post method slower than the get
use-case's �login page, sign-up page, registration pages, ...

target : its rep where to open destination page,

_self, _blank, parent, frame name ..
default is _self
enctype : it rep in which format we are sending data to server
html support two types, those are
->multipart/form-data
if u want send data to server with attachment and file
uploading

autocomplete : it automatically saves data while typing in the

UI (textbox, password, address, pincode, ....)
 on/off
on is default

6 novalidate : while submitting html perform some basic

validation, if u don't do those validations, switch off this.
form controls
input tag
> input tag is used create a form control (form elements)
> these controls are used to take input/accept data from
users.
> controls nothing but text field, button, radio button, file,
color, password, etc...
> input is un-paired tag and inline element
Syn:
<input attributes/>
Note: by default, input tag creates “text field”.

attributes of input tag:

1 type =>it represents which type of control u want to create.

if we are not specified by default, it creates a textbox.

input
type="text|hidden|password|number|button|reset|submit|image|checkbo
x|radio|file|color|email|url|range|date|time|datetime-
local|month|week..."

2 name => it represents name of control used in server-side programming

(not unique)

3 id =>it represents id of control used in client-side programming (unique)

4 value =>it represents value of control

5 readonly => this attribute not allowed to change the value of control

6 size => this attribute specifies size of control (width of control)

7 disabled => this attribute disabled the control without typing data

8 placeholder => this attribute used to display prompting text with in the
control

9 maxlength => this attribute used to set max limit of data (no.of chars)

10 required => this attribute used to force the user to enter data (mandatory
field)

11 autofocus => this attribute set's cursor position (Default location)

12 tabindex => this attribute controlling cursor movements (when we r

pressing tab key, where cursor is moving)

13 min

14 max

15 step
Text
-> The most basic input type and the default input if no type is specified. This input
type defines a single-line text field

<input type="text">
or (without specifying a type, using the default attribute):
<input>
You can specify size also
attribute like this:
<input type="text" size="50">

Note:- size attribute will not limit the number of character which can be entered
into box it just give you the idea how wide the box is displayed.

Checkbox
A single stand-alone checkbox element is used for a single binary option
such as a yes-or-no question. Checkboxes are independent, meaning the
user may select as many choices as they would like in a group of
checkboxes. In other words, checking one checkbox does not uncheck the
other checkboxes in checkbox group.

<input type="checkbox">

Radio button
Radio buttons usually come in groups identified by using the same name attribute
on all buttons within that group. The selection of radio buttons are mutually
exclusive, meaning the user may only select one choice from a group of radio
buttons.

<input type="radio" name="color" >Red

<input type="radio" name="color" >Green
<input type="radio" name="color" >Blue

value
the value attribute specifies the string value to associate with the button in the event
of form submission. However, checkboxes and radio buttons are special in that when the
value is omitted, it defaults to on when submitted

checked
The checked attribute specifies the initial state of a checkbox or radio button. This is a boolean attribute
 <input type="radio" checked name="color" >Red
<input type="radio" name="color" >Green
<input type="radio" name="color" >Blue

<input checked type="checkbox" />

Input validations
-> HTML input validation is done automatically by the browser based on
special attributes on the input element.
it does not replace server-side input validation. The validation only
occurs when attempting to submit the form,

Required
Use the required attribute to indicate that a field must be completed in order to pass
validation.
<form>
<input type="text" required />
<input type="submit" />
</form>

Minimum / Maximum Length

Use the minlength and maxlength attributes to indicate length requirements. Most browsers will
prevent the user from typing more than max characters into the box, preventing them from
making their entry invalid even before they attempt submission.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Use min and max attributes to restrict the range of numbers a user can input into an input
of type number or range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />

Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

Accept File Type

For input fields of type file, it is possible to accept only certain types of files, such
as videos, images, audios,
specific file extensions, or certain media types. For example:

<input type="file" accept="image/*" title="Only images are allowed">

Multiple values can be specified with a comma, e.g.:
<input type="file" accept="image/*,.rar,application/zip">

Color
->it help us to select color by showing color picker
<input type="color"/>

Password
<input type="password" name="password">
The input element with a type attribute whose value is password creates a single-
line text field similar to the input type=text, except that text is not displayed as the
user enters it.
<input type="password" name="password" placeholder="Password">

Placeholder text is shown in plain text and is overwritten automatically when a

user starts typing.

File
<input type="file" name="fileSubmission">
File inputs allow users to select a file from their local filesystem for use with the current
page. If used in conjunction with a form element, they can be used to allow users to
upload files to a server (for more info see Uploading Files).

The following example allows users to use the file input to select a file from their
filesystem and upload that file to
a script on the server named upload_file.php.

<form action="upload_file.php" method="post" enctype="multipart/form-data">

Select file to upload:
<input type="file" name="fileSubmission" id="fileSubmission">
<input type="submit" value="Upload your file" name="submit">
</form>

Button
<input type="button" value="Button Text">
Buttons can be used for triggering actions to occur on the page, without submitting the
form. You can also use the
<button> element if you require a button that can be more easily styled or contain other
elements:

<button type="button">Button Text</button>

Buttons are typically used with an "onclick" event:

<input type="button" onclick="alert('hello world!')" value="Click Me">

Or

<button type="button" onclick="alert('hello world!')">Click Me</button>

Possible values are:
submit : The button submits the form data to the server. This is the default if the attribute
is not specified, or if the
attribute is dynamically changed to an empty or invalid value.
reset : The button resets all the controls to their initial values.

hidden field
>an in-visible text field with default value is called a "hidden field".

>hidden fields are used to send some information about user/client to a

server-sideprogram without asking the user.

>to perform session tracking, we are using hidden fields.

>these hidden field when you want to submit some fixed text value to
server(that don't want accept from user)

>like normal text fields, hidden fields data is also sent to the server when we
click the submit button.

Syn:

<input type="hidden" name="NAME" value="VAL" attributes>

Email
E-mail address can be automatically validated when submitted depending on browser
support.
<form>
<input type="email" />
<input type="submit" />
</form>
Range
<input type="range" min="" max="" step="" />
A control for entering a number whose exact value is not important.

Attribute Description Default value

min Minimum value for range 0

max Maximum value for range 100
step Amount to increase by on each increment. 1

Search
Input type search is used for textual search. It will add magnifier symbol next to
space for text on most browsers
<input type="search" >

Week
<input type="week" />
Dependent on browser support, a control will show for entering a week-year
number and a week number with no
time zone.

DateTime-Local
<input type="datetime-local" />
Dependent on browser support, a date and time picker will pop up on screen for
you to choose a date and time.
Month
<input type="month" />
Dependent on browser support, a control will show to pick the month.

Time
<input type="time" />
The time input marks this element as accepting a string representing a time.

Link that dial no.

<a href=”tel:2536547856”>call us</a>

Audio tag
The <audio> is one of the HTML5 elements added to allow embedding audio
files to a web page. Since not all browsers support all audio formats, the audio
file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the
same audio file. The path to an audio file can contain absolute or relative
URLs.

Syn:-

<audio attributes></audio>
 OR

<audio attributes>

<source src="a.mp3" type="audio/mp3">

<source src="a.mpeg" type="audio/mpeg">

<source src="a.wav" type="audio/wav">

</audio>

Attribute Definition

src URL => Specifies the path to the audio file.

controls Displays the control panel (start button, scroll, volume control).

If the controls attribute is missing, the audio file will not be displayed on the
page.

autoplay Plays the audio file automatically after loading the page.

loop Repeat the audio file from the beginning after its completion.

muted Mutes the sound when the audio file is played.

Video tag
The <video> is one of the HTML5 elements added to allow
embedding video files to a web page. Since not all browsers support
all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations
of the same audio file. The path to an audio file can contain absolute
or relative URLs.

Syn:-
<video attributes></video>

OR

<video attributes>

<source src="filename" type="video/mp4">

...

</video>

Attribute Definition

src URL => Specifies the path to the video file.

controls Displays the control panel (start button, scroll, volume

control).

If the controls attribute is missing, the video file will not be

displayed on the page.

autoplay Plays the audio file automatically after loading the page.

loop Repeats continuously the audio file from the beginning

after its

completion.

muted Mutes the sound when the audio file is played.

width width of video player

height height of video player

poster to set wall poster/paper of video

marquee tag

> used to move text/element in different directions

> its deprecated tag.

> its paired tag

Syn:

<marquee attributes>text|img| component </marquee>

attributes:
direction => down, up, left (default), right

loop => continues moving (default)

scrollamount => 6
scrolldelay => 84ms

behavior => alternate

What is HTML Canvas?
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and
no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and

a width and height attribute to define the size of the canvas. To add a border, use
the style attribute.Here is an example of a basic, empty canvas:

<html>
 <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

</canvas>

</body>

</html>

We will se canvas more in js

HTML <frame> tag

->HTML <frame> tag define the particular area within an HTML file where another HTML web
page can be displayed.

->A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or
frames, and each frame can contain different web pages.

1. < frame src = "URL" >

2. Vertical frames
3. <html>
4. <head>
5. <title>Frame tag</title>
6. </head>
7. <frameset cols="25%,50%,25%">
8. <frame src="frame1.html" >
9. <frame src="frame2.html">
10. <frame src="frame3.html">
11. </frameset>
12. </html>

Horizontal frame
1. <html>
2. <head>
3. <title>Frame tag</title>
4. </head>
5. <frameset rows="30%, 40%, 30%">
6. <frame name="top" src="frame1.html" >
7. <frame name="main" src="frame2.html">
8. <frame name="bottom" src="frame3.html">
9. </frameset>
10. </html>
11.