Hi all,

here i am sharing previous videos links, plz check it once.

HTML | CSS | JavaScript @ 6:00 PM (IST) by Mr. Shiva Kumar
Day-1 https://youtu.be/X8waFp5OAKY

Day-2 https://youtu.be/ML43iLHvOoE

Day-3 https://youtu.be/nS3YRucnE2A

Day-4 https://youtu.be/SeQgj1XhZxo

Day-5 https://youtu.be/g-itA5uBOqg

Day-6 https://youtu.be/n_iy3pqsEPw

html => hypertext markup language

=> data presentation
=> UI designing (sign up, login, registration, search form…)
= static webpages
CSS => Cascading Style Sheets
=> used to change look & feel of webpage (html elements)
JS => JavaScript
=> its back-end for html/css (Front-end)
=> it provides logical support or client validations

Html/css/JavaScript 🡺 static web site designing

Html/css/JavaScript+angular or reactJS🡺 front-end developer

UI developer
advJava/spring/asp.net/python/php/nodejs 🡺 back-end dev

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

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

Internet: Internet stands for international networking.

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.

Internet is a collection web application,

Web application is group of web pages
Web pages are group components (means heading, para, image,
button, tables, …)

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 (hyperText 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).

WHAT IS APPLICATION OR SOFTWARE?

Automation of manual business operations by using a programming language.

WHAT IS WEB APPLICATION?

Web applications are network enabled applications. We can deploy any web
applications in servers and we can access them over the network using server ip
address and application name.
In computing, a web application or web app is a client–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 following three layers:

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

What is a web browser?

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

List of Computer Browsers:

Internet Explorer(1995), Opera(1995), Mozilla Firefox(1998), Safari(2005), Google
Chrome(2008) etc…

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 an electronic device that connects to and uses the resources
of a remote computer, or server.
Clients may be 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 a “Client”.

User
The person who is working on/operating a 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 a server machine.
The device which is used by the user is called a “Client”, a person who is working
on a client machine is known as User.

Email: Electronic mail services. It is a free service to communicate with other

internet users. Email was invented by Shabeer Bhatia. Sabeer Bhatia is an Indian
entrepreneur who founded the webmail company Hotmail.com.
SMTP: Simple Mail Transfer Protocol. It takes care of delivering emails from one
server to another.
MIME: Multipurpose Internet Mail Extensions. It exchanges different kinds of data.
Blog: It is a daily updating website or webpage. Every post displayed in reverse
chronological order.
Forum: It is an online discussion website to exchange resources with each other.
Http: It is a transfer protocol to exchange hypertext documents on the world wide
web.
Http(s): Secured transfer protocol to exchange hypertext documents with the help
of SSL(ciphertext).
Ciphertext is encrypted text. Plaintext is what you have before encryption, and
ciphertext is the encrypted result. The term cipher is sometimes used as a
synonym for ciphertext, but it more properly means the method of encryption
rather than the result.
HOW MANY TYPES OF WEB APPLICATIONS WE HAVE?
A webpage is an electronic page developed on HTML. It is classified into two types.

Collection of webpages or web documents are called web applications(website).

These are classified into two types:

STATIC WEB APPS: The applications which can't 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 can use Javascript.We can't
maintain end user interaction(state) using static web apps.

DYNAMIC WEB APPS:The applications which are able to handle business logic are
known as dynamic web apps. These types of apps contain 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 the W3C organization there are the following versions released.
Version Specification Release Date
1.0 N/A (HTML 1.0) 1993
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 was developed by “Tim-Berners-Lee”, released in 1993 and
maintained by W3C Org.

2. HTML stands for “Hypertext Markup Language”.

3. Hypertext” means the text that can be transferred from the

internet server to the 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", meaning HTML is used
to create elements (such as headings, paragraphs, icons, menus,
logos, images, textboxes, buttons etc) in the web pages.
a static webpage means that pages always showing the same
information.

6. HTML is very easy to understand (no prerequisites).

7. HTML is “client side tech”. That means the html code executes on
the client browser but not on the server.
web tech:
which sw are supporting to design web pages or providing API to
dev web coding those sw are called as web tech.
>client side tech ex: html/css, js, jquery, BS ...
used for static web pages.
bw rec source code & trans after execution then produced
the output.
>server side tech ex: servlet, jsp, asp.net, php, cgi, nodejs, cold
fusion ...
dynamic web pages.
code trans, execute with in server only, and produced output,
this output sent to the client machine.

8. HTML is supported by all the browsers such as Google Chrome,

Mozilla Firefox, Microsoft Internet Explorer, Safari, Opera and
other browsers.

9. HTML is used in all real time web sites today; html is the only
language available in the world for designing Web Pages.
10. The file extension either "filename.html" or "filename.htm"
11. HTML is an interpreter-based language. That means the HTML code
will be converted into machine language in +. Browser interprets HTML
code.
Translators: converting high level code (human) into machine level
code (MP/OS) is called translation. who performs this operation
are called translators.
types: >compiler ex: c, cpp,...
>interpreter ex: html, js, oracle,...
>assembler

12. for working html no need installs any software, and browser is
responsible for executing & producing output of html programs.

13. html is error free programming.

14. HTML is not a case sensitive language that means you can write the
html code in either uppercase or lower case.
Tag:
● A tag is a keyword, enclosed within "<" and ">" in HTML language.
● It is a special kind of text placed between the left angular brace
and right angular brace(<tag_name>).
● Tag is a predefined program, program is instructions / command to
the browser.
● Tag is used to display some specific output in the web page.
● browser did not identify the tag; it shows a 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 an 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>çweb page/document designing starts here

<head>
-> non-content sec(non-result)
-> settings/internal info about page
st
-> 1 executed sec
Ex: title tag, link tag, style tag, script tag, meta tag
</head>
<body>
-> content sec(result)
->it contains page designing
-> 2nd executed sec
Ex: form, h1, h2, h3, h4, h5, h6, p, div, table, img, a, button, audio,
video, iframe, etc…
</body>

</html>çweb 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 htmlversion-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">

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 the starting and ending of the html program. html tag
contains two child/sub tags those are head tag and body tag.

head tag

head tag represents a non-content section (means not output) of the web page.

This information doesn't appear on the webpage/in the 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 the webpage/in the browser (it’s called 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>

html is a collection of tags(elements) and attributes.

comment lines

comment lines are to provide some description about our program.

comments are not executed by browser.

Syn:
<!-- comments -- >

heading tags
these tags are used to print data/text in heading format.

html provides 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 the body section we can repeat any tag and no.of times.

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

Syn:

<p> text or info </p>

Note:
>browser/html doesn't accept more than one space (space bar & tab key), means
while designing the program we are given more space but browser prints only
one space.

>browser/html doesn't accept enter key (line breaking), means while designing a
program we use enter key but browser prints data without breaking line.

br tag
Ø br stands for break line (enter key)

Ø it moves the cursor to the beginning of the next line.

Ø its un-paired

Syn: <br> or <br/>

Html entities

=> Entities nothing but Special characters or html operators

=> every operator is used to perform some task or to print some special text.

=> Operator is a word

Syn: &operator;

Html hexa-decimal operators, these operators are starts with #

Hexa-dec base 16 è 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Syn: &#operator;

nbsp => it produces 1 space

lt => it prints < symbol

gt => it prints > symbol

euro => it print euro symbol

pound, yen, copy, reg, trade, frac12, frac13, frac34,

ex1
<!-- example on heading tags -->
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hypertext Markup Language</h1>
<h2>Hypertext Markup Language</h2>
<h3>Hypertext Markup Language</h3>
<h4>Hypertext Markup Language</h4>
<h5>Hypertext Markup Language</h5>
<h6>Hypertext Markup Language</h6>
<h1>Cascading Style Sheets</h1>
<h3>JavaScript</h3>
<h5>Angular</h5>
</body>
</html>

ex2
<!-- example on p tag -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>No Cost EMI:</h3>
<p>In an attempt to make high-end products accessible to all, our No Cost
EMI plan enables you to shop with us under EMI, without shelling out any
processing fee. Applicable on select mobiles, laptops, large and small appliances,
furniture, electronics and watches, you can now shop without burning a hole in
your pocket. If you've been eyeing a product for a long time, chances are it may be
up for a no cost EMI. Take a look ASAP! Terms and conditions apply.</p>

<h3>EMI on Debit Cards:</h3>

<p>Did you know debit card holders account for 79.38 crore in the country,
while there are only 3.14 crore credit card holders? After enabling EMI on Credit
Cards, in another attempt to make online shopping accessible to everyone, Flipkart
introduces EMI on Debit Cards, empowering you to shop confidently with us
without having to worry about pauses in monthly cash flow. At present, we have
partnered with Axis Bank, HDFC Bank, State Bank of India and ICICI Bank for this
facility. More power to all our shoppers! Terms and conditions apply.</p>

<h3>Mobile Exchange Offers:</h3>

<p>Get an instant discount on the phone that you have been eyeing on.
Exchange your old mobile for a new one after the Flipkart experts calculate the
value of your old phone, provided it is in a working condition without damage to
the screen. If a phone is eligible for an exchange offer, you will see the 'Buy with
Exchange' option on the product description of the phone. So, be smart, always
opt for an exchange wherever possible. Terms and conditions apply.</p>
</body>
</html>

ex3
<!-- example on br tag and html operators -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
red&nbsp;&nbsp;&nbsp;apple<br>
yellow &nbsp;&nbsp;&nbsp;&nbsp; mango<br/> <br/> <br/> <br/>
black grape<br>
100$<br> 100&euro; <br> 100&pound; <bR> 100&yen; <br>
&lt;hi&gt; <br>
Intel&copy; Core&trade; I7&reg; Processor <br>
&frac14; &frac12; &frac34; <br>
10&divide;3 <br>
&#8377;1000 <br>
&#128520; &#128525; &#128530; &#128535; &#128540; &#128545;
&#128550;
</body>
</html>

formatting tags
<b><strong> <u> <i><em> <strike> <sub> <sup>

Ex: Apple apple 4568 apple H20

a2

All are paired tags

Inline tags
b tag or strong
> b stands for bold
> b tag used to print text in bold format
>both are paired tags & inline tags
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

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

ex4
<!-- example on formatting tags -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<strong>HTML</strong>
<b>CSS</b>
<br>
<em>JavaScript</em>
<i>BootStrap</i>
<br>
<strike>AngularJS</strike>
<br>
<u>ReactJs</u>
<br>
Glucose => C₆H₁₂O₆
<br>
(a-b)² = a² + b² - 2ab
<br>
<!-- nesting tags -->
<h1>
<u>
<em>
Siva Kumar Y
</em>
 </u>
</h1>

<h4>Samsung Galaxy S23</h4>

offer price <strong>&#8377;80000</strong> &nbsp;&nbsp;old price
&#8377;<strike>100000</strike> &nbsp;&nbsp;discount <em>20%</em>
</body>
</html>