HTML 🡺 hypertext markup language

🡺 data presentation and UI designing (sign up, login,

registration, search form…)
🡺We can design static web pages

CSS 🡺 Cascading Style Sheets

🡺 Used to change look & feel of webpage (html elements)
🡺It helps to present data more effectively, attractively &
animations

JavaScript 🡺it provides logical support to html pages

🡺 its works like as back-end for html/css
🡺used to develop responsive web pages

Html, css & JavaScript are web technologies, these techs are
used to develop web applications.
WHAT IS APPLICATION OR SOFTWARE?
Application is an Automation process of manual business operations
(human being work) by using a programming language.

TYPES OF APPLICATIONS OR SOFTWARES

We can create an application or software in following 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 a browser.
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 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.
HOW MANY TYPES OF WEB APPLICATIONS WE HAVE?
A webpage is an electronic page developed on HTML.
A web page is a group of elements.
Collection of WebPages or web documents is called web application
(website).
STATIC WEB APPS:

⇨ The static web app directly delivers the content to the end user’s
browser without fetching any data from the server. Most static
web apps are known to be simple and effortless to develop across
the web.
⇨ HTML, CSS, and JavaScript are used to develop most static web
applications.
⇨ You can also add GIFs, animations, videos in static web apps.

DYNAMIC WEB APPS:

⇨ A web application that generates the data in real-time based on

the user’s request and server response, is known as a dynamic web
application.
Eg: Facebook

SINGLE PAGE APPS:

 ⇨ A single-page application runs entirely within a browser and
doesn’t require page reloading.
Eg: Gmail

E-COMMERCE APPS:

⇨ A web application that helps users electronically buy or sell goods

over the internet is called an e-commerce web app.
Eg: Amazon

CMS APPS
A content management system (CMS) allows website owners to create,
edit, and publish content, including images, text, and video, without
involving a technical team. You can modify content through an admin
panel without any knowledge of programming language.
Ex: Webflow, Wordpress

PORTAL WEB APPS:

⇨ A portal web application is a website that provides access to many

different pages and links.
⇨ Portal web applications are often used for online shopping, news
sites, blogs, and search engines.
⇨ A portal web application's main idea is to browse through different
content without leaving the site.
⇨ Eg: telangana.gov.in
Network
Collection of computers interlinked together is called a 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.

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, Robert Cailliau, created a prototype and released it for
review. For the first several years, web pages were text-only.

Tim Berners-Lee 🡺 WEB (1989-1990)

🡺 Html (HyperText Markup Lang)
🡺 WWW
🡺 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,
Klein rock & Roberts (packet networking), Bob Metcalfe (Ethernet).
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 device that connects to and uses the resources of a remote
computer, or server.
Clients may use a desktop or a laptop or a tablet or a mobile phone or a
TV or a car 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.
What is web browser?
It is client-side lightweight software installed in client machine. It sends http
request 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 user.

List of Computer Browsers:

Internet Explorer(1995), Opera(1995), Mozilla Firefox(1998), Safari(2005), Google
Chrome(2008) etc…
Email: Electronic mail services. It is a free service to communicate with other
internet users. Email is 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 daily updating website or webpage. Every post displayed in reverse
chronological order.
Forum: It is an online discussion website to exchange resources each other.
Http: It is a transfer protocol to exchange hypertext documents in the world wide
web.
Http(s): Secured transfer protocol to exchange hypertext documents with the
help of SSL (cipher text).
Cipher text is encrypted text. Plaintext is what you have before encryption, and
cipher text is the encrypted result. The term cipher is sometimes used as a
synonym for cipher text, but it more properly means the method of encryption
rather than the result.
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) 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 introduction
1. HTML was developed by “Tim-Berners-Lee”, released in 1993 and
maintained by W3C Org.
GML 🡺 SGML 🡺 HTML

2. HTML stands for “Hypertext Markup Language”.

“Hypertext” means the text that can be transferred from internet server to
internet client.
"Markup" 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.
“Language” is an interface between web developer and web browser

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

language.

4. 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.
5. HTML is very easy to understand (no pre-requisites).

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

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

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

8. HTML is used in all real time web sites today; html is the only language
available in world for designing Web pages.

9. The file extension either "filename.html" or "filename.htm"

10. HTML is an interpreter-based language. Browser interprets HTML code.

Translators: converting high level code (human) into machine level code (MP/OS)
is called as translation. Who performs this operation those called translators.
Types: compiler, interpreter, assembler
interpreter 🡺 it translates code line-by-line and executes line-by-line
(interpretation)
interpreter
html code <===============> machine code
(English) (Binary code)

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 upper case or lower case.

15. html is interpreter oriented language

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 predefined program, program is instructions / 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.

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 lang=”en”> 🡸 web page/document designing starts here
<head>
</head>
<body>
</body>
</html> 🡸 web page/document designing ends here

Generally, html program contains three parts, those are:

> versioning section
> head section
> body section

versioning section

This is providing information to the browser which version we are using in the web
page/program. So, browser is interpreting code and producing output as per given
specification.

Syn:

<!DOCTYPE html version-url>

HTML4.0:

<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN"

"http://www.w3c.org/TR/html4/strict.dtd">

HTML5:

<!DOCTYPE html> it uses current version of html

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

html tag
The <html> tag represents the starting and ending of an 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 web page/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

<link>, <title>, <meta>, <style>, <script> and <base> tags

body tag

body tag represents content information (means output) of the web page.

this information appears on the web page/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: p, img, h1, table, div, a, table, audio, video, input, button, form, ol,
ul, li, hr tags …

html is a collection of tags(elements) and every tag has some

attributes.
how design & execute html programs

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

notepad, editplus, notepad++, textpad, sublime, vs code, atom, coffee, ...

⇒ save that program with any name (.html or .htm) and anywhere in the system.

⇒ execution:

1st Approach: goto file location, then double click on file

2nd Approach: goto file location, then right click on file and click on open
then select browser

3rd Approach: open any browser, then goto address bar and type filename
with address.

for ex: d:/siva/test.html e:/test.html

comment lines
⇒ Comment lines are to provide some description about our program.

⇒ Comments are not executed by browser.

Syn:

<!-- text -->

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>

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 English 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;

b tag or strong
> b stands for bold

> b & strong tags used to print text in bold format

> both are paired tags & inline tags

Syn:

<b> text </b>

<strong> text </strong>

I or em tag

>i stand for italic (inclined)

>i & em tags used to print text in italic format

>i is paired

Syn:

<i> text </i>

<em> text </em>

u or ins tag

> u stands for underline

> used to print text with underline (draws a line base of text)

> paired tag

Syn:

<u> text </u>

<ins> text </ins>

Strike or del tag

> used to strike out the text

> paired tag

Syn:

<strike> text </strike>

<del> text </del>

superscript tag

>this tag used to display text above the base line

> super script is paired tag

Syn:

^text

subscript tag

>this tag used to display text below the base line

> subscript is paired tag

Syn:

_text

All these tags are paired tags & inline tags

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 </pre>

HTML Attributes
⇒ Attribute is a special feature/setting of a tag.

⇒ Every tag they have attributes

⇒ An HTML attribute is a piece of markup language used to adjust the behavior or

display of an HTML element. For example, attributes can be used to change the
color, size, or functionality of HTML elements.

⇒ HTML Attribute is something that we use in the starting tag of HTML Elements
or HTML Tags which provides extra information about those HTML Elements or
HTML Tags.

Syn:

<tagname attribute="value" attribute=’value’ ...>

Note:

⇒ Parameters should be enclosed within “ “ or ‘ ‘ or without quotes.

⇒ Every attribute must be separated by a space

Types of attributes

⇒ general attributes
These attributes are common for most tags (99% of tags). These attributes are
used to adjust the behavior or display of an HTML element, to provide extra
information about those HTML Elements to the browser.

those attributes are:

 class, id, name, style, align, action, method, href, src, target, width, height,
alt, title, lang, min, max, step, maxlength, type, checked, selected, value,
readonly, placeholder etc…

⇒ event attributes
An event is a notification that is triggered when something changes in the
browser.

With event attributes these events are directed to JavaScript which then
responds to the event.

These attributes are used to perform some logical operations.

logical operations we can perform by using JavaScript, these also called dynamic
attributes.
By using event attributes From Html page we can tigger JavaScript or we can call
JavaScript
attributes are:
onclick, ondblclick, onfocus, onblur, onkeypress, onkeyup, onkeydown,
onsubmit, onchange, oninput, onreset, onselect, onmousemove, onmouseout,
onmouseover, onwheel, onload, onsubmit, onchange etc…

🡺 Optional attributes
These attributes are used to provide additional information and are not
mandatory in HTML5.

Eg: lang, type

HTML4: <link rel="stylesheet" type="text/css" href="css file url">

HTML5: <link rel="stylesheet" href="css file url">

title tag
this tag used to set the title for a webpage, means every webpage
They have individual titles.
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”/>
Relative => icon or stylesheet
Hyper reference =>.jpg .bmp .png .jfif .gif .tif .ico

images
> "img" tag is used to display images on a webpage.
> in one web pages 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/>
.jfif .svg .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 tooltip. (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

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

>web application basically contains links to other pages, so it's a 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”
“https://www.abc.com/login.aspx”
“” 🡺self-calling
“.” 🡺 home page of web site/home dir of web application
“#id” 🡺 it creates bookmarks (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)
framename ==> opens the link in specific frame

working with list tags

These tags are used to display data/info points wise.
html supports three types of list, those are
Ordered list ⇒ numbering
Unorderedlist ⇒ bullets

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 in points wise
> li is paired tag & block level element
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
ul tag
>ul stands for "Unordered List".
>it is used to display the list of items(names, colors, team names, course name...)
with bullets.
>It supports 3 types of bullets, those are dot, circle, square. by default, is dot.
>by using "ul" tag we can create unordered 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>
…
</ul>

dl 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>
...
</dl>

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

attributes:
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>Heading</legend>

div tag
> div is a container, meaning its grouping elements of html.
> inside the div tag we can place any content like normal text or images.
> div tag is used to divide web pages as no.of subpages/parts, each part is rep as
div.
> for better maintained, effective design of web pages and simplifying css code.
>its paired tag, and block level element
Syn: <div attributes>
Contents
</div>
>one webpage may contain any no.of div tags.
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 a 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 part, <tbody> tag is rep of table body part and
<tfoot> tag Is rep of table footer part.

tableè used to draw a table, means it grouping no.of rows

captionè to set main heading of table
tr è table row, used to draw a row, means it grouping no.of columns
thè table heading, used to set column headings
tdè table data, used to print the data in columns
+
theadè table head section since html4
tbodyè table body section
tfootè table footer section

> all these 8 tags are paired tags

> table, tr, caption, thead, tbody & tfoot are block level tags
> th & td are inline tags

Syn:
<table>
<tr>
<th>heading</th> <th>heading</th>
</tr>
<tr>
<td>data</td> <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
...