Web - Basic Concepts

Internet

The Internet is essentially a global network of computing resources. You can think of the Internet as a physical
collection of routers and circuits as a set of shared resources. Some common definitions given in the past
include:

 A network of networks based on the TCP/IP communications protocol.

 A community of people who use and develop those networks.

The Internet, sometimes called simply "the Net," is a worldwide system of computer networks -- a network of
networks in which users at any one computer can, if they have permission, get information from any other
computer (and sometimes talk directly to users at other computers).

Intranet

An intranet is a private network contained within an enterprise that is used to securely share company
information. An intranet is a private network that can only be accessed by authorized users. The prefix "intra"
means "internal" and therefore implies an intranet is designed for internal communications.

WWW

WWW stands for World Wide Web. A technical definition of the World Wide Web is − All the resources and users
on the Internet that are using the Hypertext Transfer Protocol (HTTP).

A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the World
Wide Web Consortium (W3C): The World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge.

In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet,
tying them together into a vast collection of interactive multimedia resources.

In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet,
tying them together into a vast collection of interactive multimedia resources. Internet and Web is not the same
thing: Web uses internet to pass over the information.

WWW Operation

WWW works on client- server approach. Following steps explains how the web works:

1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web
browser.

2. Then browser requests the Domain Name Server for the IP address corresponding to
www.tutorialspoint.com.

3. After receiving IP address, browser sends the request for web page to the web server using HTTP protocol
which specifies the way the browser and web server communicates.

4. Then web server receives request using HTTP protocol and checks its search for the requested web page. If
found it returns it back to the web browser and close the HTTP connection.
5. Now the web browser receives the web page, it interprets it and displays the contents of web page in web
browser’s
window.

HTTP

HTTP stands
for Hypertext Transfer Protocol. This is the protocol being used to transfer hypertext documents that makes the
World Wide Web possible. A standard web address such as Yahoo.com is called a URL and here the
prefix http indicates its protocol.

URL

IP addresses are not convenient for users to remember easily. So an IP address can be represented by a natural
language convention called a domain name.

Website

Currently you are on our website Tutorialspoint.com which is a collection of various pages written in HTML
markup language. This is a location on the web where people can find tutorials on latest technologies. Similarly,
there are millions of websites available on the web. Each page available on the website is called a web page and
first page of any website is called home page for that site.

Web Server

Web Servers are used to store, process and deliver web pages to clients (e.g. web browsers like Google
Chrome).

Every Website sits on a computer known as a Web server. This server is always connected to the internet. Every
Web server that is connected to the Internet is given a unique address made up of a series of four numbers
between 0 and 256 separated by periods. For example, 68.178.157.132 or 68.122.35.127.

Web Browser

A web browser, often referred to as a “browser” is a software application used for accessing information on the
Web.

Web Browsers are software installed on your PC. To access the Web you need web browsers, such as Netscape
Navigator, Microsoft Internet Explorer or Mozilla Firefox. Currently you must be using any sort of Web browser
while you are navigating through my site tutorialspoint.com. On the Web, when you navigate through pages of
information this is commonly known as browsing or surfing.

SMTP Server

SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering emails from one
server to another server. When you send an email to an email address, it is delivered to its recipient by a SMTP
Server.

ISP

ISP stands for Internet Service Provider. They are the companies who provide you service in terms of internet
connection to connect to the internet. You will buy space on a Web Server from any Internet Service Provider.
This space will be used to host your Website.

An Internet service provider (ISP) is an organization that provides services for accessing, using, or
participating in the Internet. Internet service providers can be organized in various forms, such as commercial,
community-owned, non-profit, or otherwise privately owned.

IP Address
An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer
network that uses the Internet Protocol for communication. An IP address serves two main functions: host or
network interface identification and location addressing.

Internet Protocol version 4 (IPv4) defines an IP address as a 32-bit number.[2] However, because of the growth
of the Internet and the depletion of available IPv4 addresses, a new version of IP (IPv6), using 128 bits for the IP
address, was standardized in 1998. IPv6 deployment has been ongoing since the mid-2000s.

HTML

HTML stands for Hyper Text Markup Language. This is the language in which we write web pages for any
Website. This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic publishing, the
specific standard used for the World Wide Web.

Hyperlink

A hyperlink or simply a link is a selectable element in an electronic document that serves as an access point to
other electronic resources. Typically, you click the hyperlink to access the linked resource. Familiar hyperlinks
include buttons, icons, image maps, and clickable text links.

Domain name

A domain name is a unique name (e.g. google.com) used to identify the location of a website on a web server.
When you access a website through a web browser like Google Chrome, the domain name is translated to an
Internet Protocol (IP) address (e.g. 172.217.12.206) which represents the server on which the website is hosted.
This translation is dynamically performed by a domain name server (DNS).

DNS

DNS stands for Domain Name System. When someone types in your domain name, www.example.com, your
browser will ask the Domain Name System to find the IP that hosts your site. When you register your domain
name, your IP address should be put in a DNS along with your domain name. Without doing it your domain name
will not be functioning properly.

Domain Name Servers are the Internet’s equivalent of a phone book or directory. They keep an updated list of
domain names and translate them back into IP addresses. This is necessary because, although domain names
are easy for humans to remember, computers (which include all devices that can connect to the internet) use IP
addresses to access websites.

W3C

W3C stands for World Wide Web Consortium which is an international consortium of companies involved with
the Internet and the Web. The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World
Wide Web. The organization's purpose is to develop open standards so that the Web evolves in a single direction
rather than being splintered among competing factions. The W3C is the chief standards body for HTTP and
HTML.

Web - How it Works ?

How the Web Works? When you enter something like Google.com the request goes to one of many special
computers on the Internet known as Domain Name Servers (DNS). All these requests are routed through
various routers and switches. The domain name servers keep tables of machine names and their IP addresses,
so when you type in Google.com it gets translated into a number, which identifies the computers that serve the
Google Website to you.

When you want to view any page on the Web, you must initiate the activity by requesting a page using your
browser. The browser asks a domain name server to translate the domain name you requested into an IP
address. The browser then sends a request to that server for the page you want, using a standard called
Hypertext Transfer Protocol or HTTP.

The server should constantly be connected to the Internet, ready to serve pages to visitors. When it receives a
request, it looks for the requested document and returns it to the Web browser. When a request is made, the
server usually logs the client's IP address, the document requested, and the date and time it was requested.
This information varies server to server.

An average Web page actually requires the Web browser to request more than one file from the Web server and
not just the HTML / XHTML page, but also any images, style sheets, and other resources used in the web page.
Each of these files including the main page needs a URL to identify each item. Then each item is sent by the
Web server to the Web browser and Web browser collects all this information and displays them in the form of
Web page.

In Short

We have seen how a Web client - server interaction happens. We can summarize these steps as follows:

A user enters a URL into a browser (for example, Google.com. This request is passed to a domain name server.

The domain name server returns an IP address for the server that hosts the Website (for example,
68.178.157.132).

The browser requests the page from the Web server using the IP address specified by the domain name server.

The Web server returns the page to the IP address specified by the browser requesting the page. The page may
also contain links to other files on the same server, such as images, which the browser will also request.

The browser collects all the information and displays to your computer in the form of Web page.

Introduction to Web Technology

Web Browser

A web browser is software that allows you to find and view websites on the internet.

“A web browser (commonly referred to as a browser) is a software application for accessing information on the
World Wide Web. When a user requests a web page from a particular website, the web browser retrieves the
necessary content from a web server and then displays the page on the screen. (Wikipedia)

A web browser, or browser for short, is a computer software application that enables a person to locate,
retrieve and display content such as webpages, images, video, as well as other files on the World Wide Web.

A Web browser can be considered as a utility which client uses to access web services and documents from
the server.

Browsers are used primarily for displaying and accessing websites on the internet, as well as other content
created using languages such as Hypertext Markup Language (HTML) and Extensible Markup Language (XML).

Browsers translate web pages and websites delivered using Hypertext Transfer Protocol (HTTP) into human-
readable content. They also have the ability to display other protocols and prefixes, such as secure HTTP
(HTTPS), File Transfer Protocol (FTP), email handling (mailto:), and files (file:).

How Internet Browsers Work: Here's a very quick overview of how browsers work:

 You type a website's URL into your browser's address bar; "http://www.thebalance.com" is an example of a
URL.
 The browser locates and requests that page's information from a web server.
 The browser receives a file in a computer code like HTML or JavaScript, which includes instructions about
how to display the information on that page.
 The browser interprets that file and displays the page for you to read and interact with. And it does all of this
in just a few seconds, usually.

BASIS FOR SEARCH ENGINE WEB BROWSER

COMPARISON
Basic Maintains the information about the web Used for searching the information on the
pages stored in the Internet. web and displaying it over the user's
computer.
Intended to Information gathering regarding several Display the web page of the current URL.
URL's.
Database Contains its own database No database is present
Examples Google, Yahoo, Bing, DuckDuckgo, Baidu Mozilla Firefox, Netscape Navigator, and
Internet Explorer. Google Chrome.

What is a web server?

“A web server is server software, or hardware dedicated to running this software, that can satisfy client
requests on the World Wide Web. A web server can, in general, contain one or more websites. A web server
processes incoming network requests over HTTP and several other related protocols.
A Web server is software or hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to
respond to client requests made over the World Wide Web (WWW).

Web Server is a piece of software running on a computer whose primary job is to distribute web pages to users
whenever they demand it and provides an area in which to store and organize the pages of the website.

The primary function of a web server is to store, process and deliver web pages to clients. The communication
between client and server takes place using the Hypertext Transfer Protocol (HTTP). Pages delivered are most
frequently HTML documents, which may include images, style sheets and scripts in addition to the text content.”
(Wikipedia)

"Web server" can refer to hardware or software, or both of them working together.

1. On the hardware side, a web server is a computer that stores web server software and a website's
component files (e.g. HTML documents, images, CSS stylesheets, and JavaScript files). It is connected to the
Internet and supports physical data interchange with other devices connected to the web.

2. On the software side, a web server includes several parts that control how web users access hosted files, at
minimum an HTTP server. An HTTP server is a piece of software that understands URLs (web addresses)
and HTTP (the protocol your browser uses to view webpages). It can be accessed through the domain names
(like mozilla.org) of websites it stores, and delivers their content to the end-user's device.

At the most basic level, whenever a browser needs a file which is hosted on a web server, the browser requests
the file via HTTP. When the request reaches the correct web server (hardware), the HTTP server (software)
accepts request, finds the requested document (if it doesn't then a 404 response is returned), and sends it back
to the browser, also through HTTP.

To publish a website, you need either a static or a dynamic web server.

A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). We call it
"static" because the server sends its hosted files "as-is" to your browser.

A dynamic web server consists of a static web server plus extra software, most commonly an application
server and a database. We call it "dynamic" because the application server updates the hosted files before
sending them to your browser via the HTTP server.

For example, to produce the final webpages you see in the browser, the application server might fill an HTML
template with contents from a database. Sites like MDN or Wikipedia have many thousands of webpages, but
they aren't real HTML documents, only a few HTML templates and a giant database. This setup makes it easier
and quicker to maintain and deliver the content.

Difference between Web Browser and Web Server

The web browser is an application program that displays a www document. It usually uses other internet
services to access the document. Web server is a program or a computer that can provide services to other
programs called clients.

The main difference between a Web browser and a Web server is that Web browser requests for the document
and services, and act as an interface between a client and a server which displays the web content. On the
other hand, Web server accepts, approve, and response to the request made by a web browser for a web
document.

WEB BROWSER WEB SERVER

Web Browser is an Application program that Web server is a program or the computer that provides
displays a World wide web document. It usually services to other programs called client.
uses the internet service to access the
document.
 The Web browser requests the server for the The Web server accepts, approve and respond to the
web documents and services. request made by the web browser for a web document or
services.
The web browser acts as an interface between The web server is software or a system which maintains
the server and the client and displays a web the web applications, generate response and accept
document to the client. clients data.
The web browser sends an HTTP request and The web server gets HTTP requests and sends HTTP
gets an HTTP response. responses.
Doesn’t exist any processing model for the web There exist three types of processing models for web
browser. server i.e. Process-based, Thread based and Hybrid.
Web browser stores the cookies for different Web servers provide an area to store and organize the
websites. pages of the website.
The web browser is installed on the client The web server can be a remote machine placed at the
computer. other side of your network or even on the other end of
the globe, or it is your very own personal computer at
home.

Web Page

Web page is a document available on World Wide Web. Web Pages are stored on web server and can be
viewed using a web browser.

A web page or webpage is a document, commonly written in HTML that is viewed in an Internet browser. A
web page can be accessed by entering a URL address into a browser's address bar. A web page may contain
text, graphics, and hyperlinks to other web pages and files.

The data found in a Web page is usually in HTML or XHTML format. The Web pages usually also contain other
resources such as style sheets, scripts and images for presentation. Users may be able to navigate to other
pages through hypertext links.

A Web page is a document for the World Wide Web that is identified by a unique uniform resource locator
(URL).

A web page can be defined as a solitary page of a website. When a user wants to access a webpage, it can be
accessed by using a single URL, and that page can be copied and shared. Viewing a webpage doesn’t require
any navigation, unlike a website. It can contain text, graphics, audio, video, downloadable hyperlink to other
pages, etc. Web browsers are used to display the contents of the webpage through connecting to the server so
that the remote files can be displayed. These are created by using a programming language such as HTML, PHP,
Python and Perl etc. The HTML pages have a simple appearance and are not that interactive but consume less
time to load and browse.

Static Web pages:

Static Web pages are very simple. It is written in languages

such as HTML, JavaScript, CSS, etc. For static web pages when
a server receives a request for a web page, then the server
sends the response to the client without doing any additional
process. And these web pages are seen through a web
browser. In static web pages, Pages will remain the same until
someone changes it manually.

Dynamic Web Pages:

Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc. In dynamic web pages, the
Content of pages is different for different visitors. It takes more time to load than the static web page. Dynamic
web pages are used where the information is changed frequently, for example, stock prices, weather
information, etc.
 S. STATIC WEB PAGE DYNAMIC WEB PAGE
N.
1. In static web pages, pages will remain same In dynamic web pages, content of pages are
until someone changes it manually. different for different visitors.
2. Static Web Pages are simple in terms of Dynamic web pages are complicated.
complexity.
3. In static web pages, information is changed In dynamic web page, information is change
rarely. frequently.
4. Static Web Page takes less time for loading Dynamic web page takes more time for loading.
than dynamic web page.
5. In Static Web Pages, database is not used. In dynamic web pages, database is used.
6. Static web pages are written in languages such Dynamic web pages are written in languages such
as: HTML, JavaScript, CSS, etc. as: CGI, AJAX, ASP, ASP.NET, etc.
7. Static web pages do not contain any application Dynamic web pages contains application program
program. for different services.
8. Static web pages require less work and cost in Dynamic web pages require comparatively more
designing them. work and cost in designing them.

Website

A website is the group of web pages which are placed in a location on the internet under a domain. For
example, a company website can have various web pages such as home, about us, contact us, products,
services and other. It is accessible through a web address. The website can be designed using static web pages
or dynamic web pages. Contents on a website are globally viewed, remains same for the different individuals. A
website can be industry-specific, product specific or services specific etc.; these websites are intended to
educate their site visitors about their industry, products or services information. A website must be hosted on a
server at first so that it can be accessed on the internet.

A website (also written as web site) is a collection of web pages and related content that is identified by a
common domain name and published on at least one web server. Notable examples are wikipedia.org,
google.com, and amazon.com.

All publicly accessible websites collectively constitute the World Wide Web. There are also private websites that
can only be accessed on a private network, such as a company's internal website for its employees.

Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce,
entertainment, or social networking. Hyperlinking between web pages guides the navigation of the site, which
often starts with a home page.

Static Web page

Static web pages are also known as flat or stationary web page. They are loaded on the client’s browser as
exactly they are stored on the web server. Such web pages contain only static information. User can only read
the information but can’t do any modification or interact with the information.

It is written in languages such as HTML, JavaScript, CSS, etc. For static web pages when a server receives a
request for a web page, then the server sends the response to the client without doing any additional process.
And these web pages are seen through a web browser. In static web pages, Pages will remain the same until
someone changes it manually.

Whenever server receives a request regarding a web page, it sends a response along with the requested web
page to the client without performing any additional processing. It just locates that page on its hard disk and
add HTTP headers, and reply back an HTTP response.

The peculiar thing in a static web page is that the content in these types of the web page does not change
depending on the request. They are always the same unless the content is changed physically on the server’s
hard disk. That is the reason these web pages are known as static web pages.

Points:

 They are build using HTML code

 Very easy to code and assemble
 They are presented in the web browsers in the same way as they are stored in the server
 Example: Simple web forms, classical websites etc.
 They have predefined contents in the web page
 Display same information to all the users
 Users cannot control the content of the web page

Dynamic Web page

In dynamic web pages, the content of pages is different for different visitors. It takes more time to load than the
static web page.

There are several tools used for the creation of dynamic web pages. For example, CGI (Common Gateway
Interface), ASP (Active Server Pages), JSP (Java Server Pages), ASP.NET, AJAX (Asynchronous JavaScript and
XML), etc.

Dynamic web pages provide a solution for the static web pages. The dynamic web page content can vary
depending on the number of parameters. As it is discussed above that dissimilar to static web age, it not just
simply send HTML page in response. The web server calls a program located on the hard disk which can access
a database, perform transaction procedure, etcetera. If the application program produces HTML output, which is
used to construct an HTTP response by the web server. The web server sends the HTTP response thus created,
back to the web browser.

The dynamic web pages are employed where the information changes very often such as stock prices, weather
information, news and sports updates. Let’s assume a person has to physically change the Web page every 10
seconds to show the latest update of the stock prices which is impractical to physically alter the HTML pages
very often, so in this case, a dynamic web page can be used.

Points:

 They contain contents that can change

 Contents depend upon the viewer, the time of the day, the time zone, the viewer’s native language and
many other factors
 It can also contain client side and server side scripting language
 Code of the dynamic page are invisible
 Only the value of the variable is displayed in the dynamic page as content
 Programming language such as Java, PHP etc. are used along with HTML to make the page dynamic

Server-side dynamic web page - It is created by using server-side scripting. There are server-side scripting
parameters that determine how to assemble a new web page which also include setting up of more client-side
processing.
Client-side dynamic web page - It is processed using client side scripting such as JavaScript. And then
passed in to Document Object Model (DOM).

Scripting Languages

Scripting languages are like programming languages that allow us to write programs in form of script. These
scripts are interpreted not compiled and executed line by line. Scripting language is used to create dynamic web
pages.

Client-side Scripting - Client-side scripting refers to the programs that are executed on client-side. Client-
side scripts contains the instruction for the browser to be executed in response to certain user’s action. Client-
side scripting programs can be embedded into HTML files or also can be kept as separate files. Some of the
commonly used Client-Side scripting languages: JavaScript, ActionScript, Dart, VBScript etc.

Server-side Scripting - Sever-side scripting acts as an interface for the client and also limit the user access
the resources on web server. It can also collect the user’s characteristics in order to customize response. Some
of the commonly used Server-Side scripting languages: ASP (Active Server Pages), ActiveVFP, ASP.net, Java,
Python, WebDNA.

Difference between Static and Dynamic Web Pages:

S. STATIC WEB PAGE DYNAMIC WEB PAGE

N.
1. In static web pages, pages will remain same In dynamic web pages, Content of pages are different
until someone changes it manually. for different visitors.
2. Static Web Pages are simple in terms of Dynamic web pages are complicated.
complexity.
3. In static web pages, information changes In dynamic web page, information changes
rarely. frequently.
4. Static Web Page takes less time for loading Dynamic web page takes more time for loading.
than dynamic web page.
5. In Static Web Pages, database is not used. In dynamic web pages, database is used.
6. Static web pages are written in languages such Dynamic web pages are written in languages such as:
as: HTML, JavaScript, CSS, etc. CGI, AJAX, ASP, ASP.NET, etc.
7. Flexibility is the main advantage of static Content Management System (CMS) is the main
website. advantage of dynamic website.
8. The content is only changed when someone The page contains "server-side" code which allows
publishes and updates the file (sends it to the the server to generate the unique content when the
web server). page is loaded.

Difference between Web page and Website

A web page can be considered as a single entity whereas a website is a combination

of web pages. Web pages are accessed through a browser while in website HTTP, and
DNS protocols are used to access it. Web pages have the navigational links to connect
a web page to another on the website. The content in a website changes according to
the web page while a web page contains more specific information.

BASIS FOR WEB PAGE WEBSITE

 COMPARIS
ON
Basic Web page is a part of website which Website is a cluster of related web pages
comprises links to other web pages. addressed to a typical URL.
Presented by Multiple web pages can have the same By a unique URL.
name if they reside in different documents.
Use It is a content that is to be displayed on a It is a place used to display the content.
website.
Extension The web page URL has an extension. There is no extension used in the URL of a
website.
Address Web page address depends on website Website address doesn't rely upon web page
dependency address. address.
Development Requires less time to develop as it is a part Usually, take more time as compared to a web
period of a website. page.

Client/Server Computing Model:

The client-server modal has been defined as: A software partitioning paradigm in which a distributed system is
split between one or more server tasks which accept requests, according to some protocol, form (distributed)
client tasks, asking for information or action. There may be either one centralized server or several distributed
ones. This model allows clients and servers to be placed independently on nodes in a network.

 A model of computing in which powerful personal computers are connected in a network together with one
or more servers

 Client is a powerful personal computer that is part of a network; service requester

 Server is a networked computer dedicated to common functions that the client computers on the network
need; service provider

 Web is based on client/server technology. Web servers are included as part of a larger package of internet
and intranet related programs for serving e-mail, downloading requests for FTP files and building and
publishing web pages. Typically the e-commerce customer is the client and the business is the server. In the
client/ server model single machine can be both client and the server. The client/ server model utilizes a
database server in which RDBMS user queries can be answered directly by the server.

 The client/ server architecture reduces network traffic by providing a query response to the user rather than
transferring total files. The client/ server model improves multi-user updating through a graphical user
interface (GUI) front end to the shared database. In client/ server architectures client and server typically
communicate through statements made in structured query language (SQL).

Tier Technology

Software Architecture: Software Architecture consists of One Tier, Two Tier, Three Tier and N-Tier architectures.

A “tier” can also be referred to as a “layer”.

Three layers involved in the application namely Presentation Layer, Business Layer and Data Layer. Let’s see
each layer in detail:

Presentation Layer: It is also known as Client layer. Top most layer of an application. This is the layer we see
when we use software. By using this layer we can access the webpages. The main functionality of this layer is to
communicate with Application layer. This layer passes the information which is given by the user in terms of
keyboard actions, mouse clicks to the Application Layer. For example, login page of Gmail where an end user
could see text boxes and buttons to enter user id, password and to click on sign-in.

In simple words, it is to view the application.

Application Layer: It is also known as Business Logic Layer which is also known as logical layer. As per the
Gmail login page example, once user clicks on the login button, Application layer interacts with Database layer
and sends required information to the Presentation layer. It controls an application’s functionality by performing
detailed processing. This layer acts as a mediator between the Presentation and the Database layer. Complete
business logic will be written in this layer.

In simple words, it is to perform operations on the application.

Data Layer: The data is stored in this layer. Application layer

communicates with Database layer to retrieve the data. It contains
methods that connects the database and performs required action
e.g.: insert, update, delete etc.

In simple words, it is to share and retrieve the data.

Types of Software Architecture:

One-Tier Architecture:

One Tier application AKA Standalone application

One tier architecture has all the layers such as Presentation,

Business, and Data Access layers in a single software package.
Applications which handle all the three tiers such as MP3 player, MS
Office are come under one tier application. The data is stored in the
local system or a shared drive.

Two-Tier Architecture:

Two Tier application AKA Client-Server application

The Two-tier architecture is divided into two parts:

1. Client Application (Client Tier)

2. Database (Data Tier)

Client system handles both Presentation and Application layers

and Server system handles Database layer. It is also known as
client server application. The communication takes place
between the Client and the Server. Client system sends the
request to the Server system and the Server system processes
the request and sends back the data to the Client System

Three-Tier Architecture:

Three Tier application AKA Web Based application

The Three-tier architecture is divided into three parts:

1. Presentation layer (Client Tier)

2. Application layer (Business Tier)
3. Database layer (Data Tier)

Client system handles Presentation layer, Application server handles Application layer
and Server system handles Database layer.

What Do the 3 Tiers Mean?

 Presentation Tier- The presentation tier is the front end layer in the 3-tier system
and consists of the user interface. This user interface is often a graphical one
accessible through a web browser or web-based application and which displays content and information
useful to an end user. This tier is often built on web technologies such as HTML5, JavaScript, CSS, or through
other popular web development frameworks, and communicates with others layers through API calls.

1. This is the topmost level of the application.

 2. Provides user interface, handles the interaction with the user. Sometimes called the GUI or client view or
front-end.
3. It sends content to browsers in the form of HTML/JS/CSS. This might leverage frameworks like React,
Angular, Ember, Aurora, etc.
4. It communicates with other tiers by which it provides the results to the browser/client side.

 Application Tier- The application tier contains the functional

business logic which drives an application’s core capabilities.
It’s often written in Java, .NET, C#, Python, C++, etc.

1. Also called ‘Business Logic’ or ‘Middle Tier’.

2. This contains set of rules for processing information,
business logic and able to accommodate many users.
Sometimes also called as middleware.
3. It processes the inputs received from the clients and
interacts with the database.
4. The logic tier will have the JSP, Java Servlets, Ruby, PHP,
C++, Python and other programs. The logic tier would be
run on a Web server.

 Data Tier- The data tier comprises of the database/data storage system and data access layer. Examples of
such systems are MySQL, Oracle, PostgreSQL, Microsoft SQL Server, MongoDB, etc. Data is accessed by the
application layer via API calls.

1. A database, comprising both data sets and the database management system or RDBMS software that
manages and provides access to the data (back-end).
2. It provides security, data integrity and support application.
3. The data tier would be some sort of database, such as a MySQL, SQLite or PostgreSQL database. All of
these are run on a separate database server.

Advantages

 Maintainability - Because each tier is independent of the other tiers, updates or changes can be carried
out without affecting the application as a whole.
 Scalability - Because tiers are based on the deployment of layers, scaling out an application is reasonably
straightforward.
 Flexibility - Because each tier can be managed or scaled independently, flexibility is increased.
 Availability - Applications can exploit the modular architecture of enabling systems using easily scalable
components, which increases availability.
 Reusability - Components are reusable
 Faster development - Because of division of work web designer does presentation, software engineer
does logic, DB admin does data model.

Disadvantages

 High installation cost.

 Structure is more complex as compare to 1 & 2 tier architectures.

Applications

 E-commerce Websites
 Database related Websites

Note: Another layer is N-Tier application. N-Tier application AKA Distributed application. It is similar to three tier
architecture but number of application servers are increased and represented in individual tiers in order to
distribute the business logic so that the logic will be distributed.

Web Protocols

A protocol is a standard set of rules that allow electronic devices to communicate with each other. These rules
include what type of data may be transmitted, what commands are used to send and receive data, and how
data transfers are confirmed.

The Internet Protocol (IP) is a protocol, or set of rules, for routing and addressing packets of data so that they
can travel across networks and arrive at the correct destination.

HTTP

Definition of HTTP
HTTP (Hypertext Transfer Protocol) is the base of the data communication for the web this is how the
internet works when it comes to delivering the web pages. It is TCP/IP based protocol and things like text, audio,
videos, images can be transmitted through it.

HTTP works
on request and response cycle where
the client requests a web page. Suppose,
if you browse to google.com, you are
requesting a web page from the server,
and the server will deliver you response.

HTTP is a stateless protocol which

means every single transaction you made
through HTTP is independent in nature.
However, this can be delivered through
using HTTP cookies, server side sessions,
variables, URL rewriting.

When a client wants to browse a website first thing that happens is that request is sent to the server known
as HTTP message. Thereafter, the server will prepare a response and send it back. The message will be
different depending on its message response and request.

The main issue of HTTP is that it is not encrypted and plain text is used, meaning that it is unsecured at
transferring data among the computer and server. It is popular to exploit the man-in-the-middle attacks, if you
run a HTTP connection anyone can put himself in the middle and start using names, emails, and passwords in
the plain text.

Basic Features

There are three basic features that make HTTP a simple but powerful protocol:

 HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and after a request is
made, the client waits for the response. The server processes the request and sends a response back after
which client disconnect the connection. So client and server knows about each other during current request
and response only. Further requests are made on new connection like client and server are new to each
other.

 HTTP is media independent: It means, any type of data can be sent by HTTP as long as both the client
and the server know how to handle the data content. It is required for the client as well as the server to
specify the content type using appropriate MIME-type.

 HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result of HTTP being a
stateless protocol. The server and client are aware of each other only during a current request. Afterwards,
both of them forget about each other. Due to this nature of the protocol, neither the client nor the browser
can retain information between different requests across the web pages.

Points:

 Hyper Text Transfer Protocol

 It is a protocol that is used by the World Wide Web
 It defines how messages are formatted and transmitted to the user
 It is a stateless protocol as each commands are executed independently
 This is based on request response communication mode
 Basically, clients send a request and server provides the response

HTTPS

Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to
send data between a web browser and a website. HTTPS is encrypted in order to increase security of data
transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank
account, email service, or health insurance provider.

An HTTPS URL begins with https:// instead of http://. Modern web browsers also indicate that a user is
visiting a secure HTTPS website by displaying a closed padlock symbol to the left of the URL:
Definition: HTTPS (Hypertext Transfer Protocol Secure) is nothing but the HTTP working in tandem
with SSL (Secure Socket Layer) that is the “S” in HTTPS. SSL takes care of ensuring that the data goes
securely over the internet. The alternative names given to HTTPS are HTTP over TLS, HTTP over SSL and HTTP
secure.

This protocol was designed to increase

primarily on the internet when communicating
with web sites and sending sensitive data. This
made man-in-the-middle attack increasingly
difficult as the data send is no longer in plain
text.

To secure your website one needs to purchase

something called SSL certificate. These are
relatively expensive and most hosting
companies offer them. SSL certificate is
analogous to an online identification card. SSL
certificate also encrypts any data that passes through https protocol.

Now, a client requests data from the server it looks for the SSL certificate which will verify websites identity with
the certificate. If everything is good, a handshake takes place where an encryption method is decided through
SSL.

How does HTTPS work?

HTTPS uses an encryption protocol to encrypt communications. The protocol is called Transport Layer Security
(TLS), although formerly it was known as Secure Sockets Layer (SSL). This protocol secures communications by
using what’s known as an asymmetric public key infrastructure. This type of security system uses two different
keys to encrypt communications between two parties:

1. The private key - this key is controlled by the owner of a website and it’s kept, as the reader may have
speculated, private. This key lives on a web server and is used to decrypt information encrypted by the
public key.

2. The public key - this key is available to everyone who wants to interact with the server in a way that’s
secure. Information that’s encrypted by the public key can only be decrypted by the private key.

Advantages of HTTP:

 HTTP can be implemented with other protocol on the Internet, or on other networks
 HTTP pages are stored on computer and internet caches, so it is quickly accessible
 Platform independent which allows cross-platform porting
 Does not need any Runtime support
 Usable over Firewalls! Global applications are possible
 Not Connection Oriented; so no network overhead to create and maintain session state and information

Advantages of HTTPS

 In most cases, sites running over HTTPS will have a redirect in place. Therefore, even if you type in HTTP:// it
will redirect to an https over a secured connection
 It allows users to perform secure e-commerce transaction, such as online banking.
 SSL technology protects any users and builds trust
 An independent authority verifies the identity of the certificate owner. So each SSL Certificate contains
unique, authenticated information about the certificate owner.

Limitations of HTTP

 There is no privacy as anyone can see content

 Data integrity is a big issue as someone can alter the content. That's why HTTP protocol is an insecure
method as no encryption methods are used.
 Not clear who you are talking about. Anyone who intercepts the request can get the username and
password.

Limitations of HTTPS

 HTTPS protocol can't stop stealing confidential information from the pages cached on the browser
 SSL data can be encrypted only during transmission on the network. So it can't clear the text in the browser
memory
 HTTPS can increase computational overhead as well as network overhead of the organization
Points:

 Hyper Text Transfer Protocol Secure

 This adds a layer of security on the data
 Enables encrypted and secure communication between a remote user and primary web server
 It is designed to provide enhanced security layer over the unsecured HTTP protocol for sensitive data and
transactions

Parameter HTTP HTTPS

Protocol It is hypertext transfer protocol. It is hypertext transfer protocol with secure.
Security It is less secure as the data can be It is designed to prevent hackers from
vulnerable to hackers. accessing critical information. It is secure
against such attacks.
Port It uses port 80 by default It was use port 443 by default.
Starts with HTTP URLs begin with http:// HTTPs URLs begin with https://
Used for It's a good fit for websites designed for If the website needs to collect the private
information consumption like blogs. information such as credit card number, then it
is a more secure protocol.
Scrambling HTTP does not scramble the data to be HTTPS scrambles the data before transmission.
transmitted. That's why there is a higher At the receiver end, it descrambles to recover
chance that transmitted information is the original data. Therefore, the transmitted
available to hackers. information is secure which can't be hacked.
Protocol It operates at TCP/IP level. HTTPS does not have any separate protocol. It
operates using HTTP but uses encrypted
TLS/SSL connection.
Domain HTTP website do not need SSL. HTTPS requires SSL certificate.
Name
Validation
Data HTTP website doesn't use encryption. HTTPS websites use data encryption.
encryption
Search HTTP does not improve search rankings. HTTPS helps to improve search ranking.
Ranking
Speed Fast Slower than HTTP
Vulnerability Vulnerable to hackers It Is highly secure as the data is encrypted
before it is seen across a network.

FTP

o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting the files from one host to
another.
o It is mainly used for transferring the web page files from their creator to the computer that acts as a server
for other computers on the internet.
o It is also used for downloading the files to computer from other servers.
Objectives of FTP

o It provides the sharing of files.

o It is used to encourage the use of remote computers.
o It transfers the data more reliably and efficiently.

Why FTP?

Although transferring files from one

system to another is very simple and
straightforward, but sometimes it
can cause problems. For example,
two systems may have different file
conventions. Two systems may have
different ways to represent text and
data. Two systems may have
different directory structures. FTP
protocol overcomes these problems
by establishing two connections
between hosts. One connection is
used for data transfer, and another
connection is used for the control
connection.

Advantages of FTP:

o Speed: One of the biggest advantages of FTP is speed. The FTP is one of the fastest way to transfer the files
from one computer to another computer.

o Efficient: It is more efficient as we do not need to complete all the operations to get the entire file.

o Security: To access the FTP server, we need to login with the username and password. Therefore, we can
say that FTP is more secure.

o Back & forth movement: FTP allows us to transfer the files back and forth. Suppose you are a manager of
the company, you send some information to all the employees, and they all send information back on the
same server.

Disadvantages of FTP:

o The standard requirement of the industry is that all the FTP transmissions should be encrypted. However,
not all the FTP providers are equal and not all the providers offer encryption. So, we will have to look out for
the FTP providers that provides encryption.

o FTP serves two operations, i.e., to send and receive large files on a network. However, the size limit of the
file is 2GB that can be sent. It also doesn't allow you to run simultaneous transfers to multiple receivers.

o Passwords and file contents are sent in clear text that allows unwanted eavesdropping. So, it is quite
possible that attackers can carry out the brute force attack by trying to guess the FTP password.

o It is not compatible with every system.

Mail Server

A mail server (or email server) is a computer system that sends and receives email. In many cases, web
servers and mail servers are combined in a single machine. However, large ISPs and public email services (such
as Gmail and Hotmail) may use dedicated hardware for sending and receiving email.

Types of Email Servers

Email is one of the best known and most widely used services across the Internet. It allows users to send text
messages, files, pictures, music, videos and other media to anyone else who has an email address--no matter
where they're located in the world. Email is usually a bundled feature with many Internet service providers or
web-hosting domains. Choose from many free email providers, all of which use different types of email servers.

Web-Based Email - This may be the type of email that most users are familiar with. Many free email providers
host their servers as web-based email. This allows users to log into the email server through the use of an
Internet browser to send and receive their mail. It is useful for people on the go since they can check their email
anywhere they have access to the Internet.
POP3 Email Servers - Post Office Protocol 3 (POP3) is another common type of email server, often used by
ISPs that provide users with email accounts along with Internet service. POP3 servers will store incoming email
messages on a remote server until user opens email client software to check her mail. The messages will be
retrieved from the server, transferred to the user's computer and deleted off the server to make space for more
incoming messages.

IMAP Email Servers - Internet Message Access Protocol (IMAP) is an alternate to the POP3 email server, often
used by business email accounts. The benefit of IMAP is that it allows users to preview, delete and organize
emails before they transfer them from the email server to their computers. The IMAP server will leave copies of
the email on the server until the user decides it is time to delete them.

SMTP Email Servers - Simple Mail Transfer Protocol (SMTP) servers usually work alongside other mail servers
such as POP3 or IMAP. This server handles the email that users send out from email clients.

Introduction to Free and Open Source Software

Free Software

“Free software” means software that respects users’ freedom and community. Roughly, it means that the
users have the freedom to run, copy, distribute, study, change and improve the software. The term “free
software” is sometimes misunderstood—it has nothing to do with price. It is about freedom.

Free software or libre software is computer software distributed under terms that allow users to run the software
for any purpose as well as to study, change, and distribute it and any adapted versions. Free software is a
matter of liberty, not price: users—individually or in cooperation with computer programmers—are free to do
what they want with their copies of free software (including profiting from them) regardless of how much is paid
to obtain the program. Computer programs are deemed free if they give users (not just the developer) ultimate
control over the software and, subsequently, over their devices. (Wikipedia)

The four essential freedoms

A program is free software if the program's users have the four essential freedoms:

Freedom to

 Run (freedom 0)
 Study how program works (freedom 1)
 Redistribute copies (freedom 2)
 Modify / improvise (freedom 3)

“Free software” does not mean “noncommercial”. A free program must be available for commercial use,
commercial development, and commercial distribution. Commercial development of free software is no longer
unusual; such free commercial software is very important. You may have paid money to get copies of free
software, or you may have obtained copies at no charge. But regardless of how you got your copies, you always
have the freedom to copy and change the software, even to sell copies.

A free program must offer the four freedoms to any user that obtains a copy of the software, provided the user
has complied thus far with the conditions of the free license covering the software. Putting some of the
freedoms off limits to some users, or requiring that users pay, in money or in kind, to exercise them, is
tantamount to not granting the freedoms in question, and thus renders the program nonfree.

Advantages

Often, free software has the same features as its high-priced proprietary counterparts – and that is only one of
the many advantages:

 Free to Download. Would you rather pay upwards of a thousand dollars for the program you need, or
nothing?

 Many Choices. There are more than 6,500 pieces of free software available today.

 Large Communities. Many free software programs have large and active communities online that offer
support to users of free software via blogs and forums.

 Supportive of Social Movement. The use of free software supports a movement that believes computer
users should be free from technology that conducts surveillance and gathers information about what users
do on their devices.
 Shared Improvements. Users are allowed to have source code, study it, make functional changes to a
program, and redistribute the modified software to others in any way they choose. A crafty entrepreneur
can take advantage of this to save money by developing his or her own custom business software.

Disadvantages

Despite the upsides, there are also disadvantages to free software:

 No Guaranteed Support. Some free software programs don’t have a large user base, and therefore the
user support for certain programs can be lacking or nonexistent.

 Inconsistent Updates. Since many members of the free software community develop the code in their
spare time as unpaid volunteers, there is a chance that some of the programs in the free software directory
haven’t been updated in a while, and may not function properly on newer operating systems.

 Varying Interfaces. Some free software programs have a much different user interface than their
commercial counterparts, and can have a steep learning curve.

Open Source Software

Open Source Software is something which you can modify as per your needs, share with others without any
licensing violation burden. When we say Open Source, source code of software is available publicly with Open
Source licenses like GNU (GPL) which allows you to edit source code and distribute it. Read these licenses and
you will realize that these licenses are created to help us.

1. Coined by the development environments around software produced by open collaboration of software
developers on the internet.

2. Later specified by the Open Source Initiative (OSI).

3. It does not explicitly state ethical values, besides those directly associated to software development.

Open-source software (OSS) is a type of computer software in which source code is released under a license
in which the copyright holder grants users the rights to study, change, and distribute the software to anyone
and for any purpose. Open-source software may be developed in a collaborative public manner. Open-source
software is a prominent example of open collaboration. (Wikipedia)

If a program is open-source, its source code is freely available to its users. Its users – and anyone else – have the
ability to take this source code, modify it, and distribute their own versions of the program. The users also have
the ability to distribute as many copies of the original program as they want. Anyone can use the program for
any purpose; there are no licensing fees or other restrictions on the software. The OSI has a more detailed
definition of “open source” on its website.

For example, Ubuntu Linux is an open-source operating system. You can download Ubuntu, create as many
copies as you want, and give them to your friends. You can install Ubuntu on an unlimited amount of your
computers. You can create remixes of the Ubuntu installation disc and distribute them. If you were particularly
motivated, you could download the source code for a program in Ubuntu and modify it, creating your own
customized version of that program – or of Ubuntu itself. Open-source licenses all allow you to do this, while
closed-source licenses place restrictions on you.

The opposite of open-source software is closed-source software, which has a license that restricts users and
keeps the source code from them.

Firefox, Chrome, OpenOffice, Linux, and Android are some popular examples of open-source software, while
Microsoft Windows is probably the most popular piece of closed-source software out there.

Advantages

 Powerful Networking Community. Many commonly used programs are open-source (such as Mozilla
Firefox), and therefore have a large community when compared to free software.

 Worldwide Usage. Because many open-source programs are heavily used all over the world, they have
much more online support available than some free software programs.

 No Cost. Open-source software can be downloaded for free.

 Variety of Options. The use of open-source programs supports a movement that believes in software with
higher reliability, more flexibility, lower cost, and no predatory vendor lock-in.
 Accessible Source Code. Users are given access to a program’s source code, or are directed to where
they can obtain it for studying.

Disadvantages

 Semi-restrictive Licenses. The open-source software community is not as concerned as the free software
community with developing software licenses that respect users’ personal freedoms.

 Software Must Be Culled From Various Sources. There is no definitive directory of open-source
programs like there is with free software.

 Less Freedom to Change Things. Users are allowed less freedom to study and make functional changes
to a program when compared to free software.

Open Source vs. Free Software

Open source applications are generally freely available – although there’s nothing stopping the developer from
charging for copies of the software if they allow redistribution of the application and its source code afterwards.

However, that’s not what “free software” refers to. The “free” in free software means “free as in freedom,” not
“free as in beer.” The free software camp, led by Richard Stallman and the Free Software Foundation, focuses
on the ethics and morals of using software that can be controlled and modified by the user. In other words, the
free software camp focuses on user freedoms.

The open-source software movement was created to focus on more pragmatic reasons for choosing this type of
software. Open-source advocates wanted to focus on the practical benefits of using open-source software that
would appeal more to businesses, rather than ethics and morals.

Ultimately, both open-source and free software advocates are developing the same type of software, but they
disagree on the messaging.

S. FS PHILOSOPHY OSS PHILOSOPHY

N.
1. Software is an important part of people’s Software is just software. There are no ethics associated
lives. directly to it.
2. Software freedom translates to social Ethics are to be associated to the people not to the
freedom. software.
3. Freedom is a value that is more important Freedom is not an absolute concept. Freedom should be
than any economic advantage. allowed, not imposed.
4. Examples: The Free Software Directory Examples: Prime examples of open-source products are
maintains a large database of free- the Apache HTTP Server, the e-commerce platform
software packages. Some of the best- osCommerce, internet browsers Mozilla Firefox and
known examples include the Linux kernel, Chromium (the project where the vast majority of
the BSD and Linux operating systems, the development of the freeware Google Chrome is done) and
GNU Compiler Collection and C library; the the full office suite LibreOffice.
MySQL relational database; the Apache
web server; and the Sendmail mail
transport agent.

Free and Open Source Software

Free and open-source software (FOSS) is software that can be classified as both free software and open-
source software. That is, anyone is freely licensed to use, copy, study, and change the software in any way, and
the source code is openly shared so that people are encouraged to voluntarily improve the design of the
software. This is in contrast to proprietary software, where the software is under restrictive copyright licensing
and the source code is usually hidden from the users. (Wikipedia)

There are two terms to separate “free” and “open source” in FOSS.

 Free as in freedom of speech not as in free beer.

 Open mainly points to Open Source Code of the program, available for others.
 So free and open source software is in some ways free but the source code is available for analysis.

Points:

 Free and open source software allows users and programmers to edit, modify or reuse the software’s source
code
 It gives developers the opportunity to improve program functionality by modifying
 The term free specifies that the software does not have any bounds to copyrights
 They have free access to the source code
 They can be used and distributed for free
 This saves a lot of time and money for both small and big organizations
 It can be used in any platform with improved security
 Sometimes the interfaces are not so user-friendly and are quite difficult to use
 They do not have good support or service
 Data may be at risk due to the very low grade security
 Some organization may require specially trained manpower to use the software

Advantages of FOSS:

 Free
 Source code is visible to everyone
 Source code is available to modify
 Open source software fosters innovation
 Most malware is designed for the more popular proprietary software so open source is more secure

Disadvantages of FOSS:

 Less technical support

 Lack of financial incentive to improve and make software
 Some argue open source software allows hackers to find flaws in the code more easily and exploit these
 Some proprietary applications are not compatible with open source software
 Some open source software can be more complicated to use

Proprietary Software

Proprietary software is any software that is copyrighted and bears limits against use, distribution and
modification that are imposed by its publisher, vendor or developer. Proprietary software remains the property
of its owner/creator and is used by end-users/organizations under predefined conditions.

Proprietary software may also be called closed-source software or commercial software.

Proprietary software is primarily commercial software that can be bought, leased or licensed from its
vendor/developer. In general, proprietary software doesn't provide end users or subscribers with access to its
source code. It can be purchased or licensed for a fee, but relicensing, distribution or copying is prohibited. Most
software is proprietary software and is produced by an independent software vendor (ISV). The restrictions or
conditions imposed by the vendor/developer on proprietary software is elaborated within the software's end-
user license agreement (EULA), terms of service agreement (TOS) or other related use agreements. The
user/organization must accept the agreement prior to installing or using the software. The software
developer/vendor can take legal action against the end-user/organization for violating the EULA or TOS.

Advantages of Commercial Software

Easy to Acquire

 One of the main advantages of commercial software is that it is easy to acquire. Virtually any technology
store, computer or that has something to do with devices and accessories, have different types of
commercial software for sale in your inventory.

 Unlike non-commercial software, to call it in any way, this type of software you regularly have to download
from the Internet, and you will not find it in commercial stores, although this is not always the case and this
is where many confuse free software with software not commercial, which would seem to be the same, but
it is not.

Programs for Specific Tasks

 Commercial software is developed to execute specific tasks.

 With this, the quality of the software increases and the user experience mainly.

 Unlike free software that we can find anywhere, but that may not be especially for the task we want.

Best Interface

 Well, without a doubt, something you should have noticed is that in design and graphic issues, commercial
applications are much better.
 As your graphic design team puts the batteries and makes the scheme of work for you the customer, is
much more pleasant and comfortable.

 Unlike a person who developed software and is simply functional, but the design or area where you will work
is really bad, without organization, without color and without visual enthusiasm.

Greater Compatibility

 Mainly, in what refers to Games and all the multimedia area that today is so abundant, commercial software
stands out for having the greatest compatibility. Therefore, if this is the sector that you use the most in a
computer, surely you will always approach the commercial software, the purchase of games and everything
that moves in this sector of software development.

Greater Hardware Compatibility

 The compatibility of the software with the Hardware is simply perfect.

 In fact, you will always see that the commercial software brings in detail the specifications by means of
which it works of a better way, something that with the free software they do not take so much importance.

 Simply the optimal performance well analyzed can be found in commercial software commonly.

Clear usage and licensing requirements

 One of the benefits of commercial software for businesses is that it comes with a well-documented
guarantee that you have support behind it.

A single point of contact for any problems

 The reasoning here is as straightforward as it could be. When you’ve paid for a software product, there is a
tangible counterparty to address if an issue arises.

A well-defined and upgrade and development plan for the software

 Timely updates allow companies to prevent the expenses that result from technical failures.

Disadvantages of Commercial Software

No Multiplatform Programs

Do you want a program for Windows? Then go and buy it. Now you want the same program, in its version for
MAC ?. I’m sorry, you’ll have to buy it also individually. What is it about? Well, the licenses through which the
commercial software is handled, does not speak about the fact that you can be the owner of each of the
versions of the purchased software, only of the desktop version, so to speak. But if you want to use it in MAC
and not in Windows, then you will surely have to go to the store to buy the MAC version now. Sadly, this is how it
is handled.

Cannot Copy

You bought a licensed software and you want to share it with your friends … I regret to tell you that this activity
is illegal and in case two or more access with your same license, it can be banned and canceled. So in a
nutshell, one of the most notorious disadvantages of Commercial Software is the fact that you cannot copy the
software. It is only of the person who bought it and you swim, for any doubt with this, you can consult the
license or the same developer.

Impossible to Modify

A few paragraphs ago, he mentioned that for developers, commercial software is not his favorites, nor for
programmers, something that ordinary users do not share. And one of the main reasons, is because you cannot
get your hands on the source code of the software. In fact, most of the systems you buy, do not give you access
to the source code. Therefore, there is no way you can make any changes.

Restrictions for Use

Commercial Software is equal to software for which you buy nothing and that covers not only people, but
computers. In case, for example, that you have 3 computers in your house, you would legally have to buy 3
licenses if you want to use it in the 3 computers simultaneously. The other option is that every time you go to
use the software on a different computer, remove and put the license to not have any kind of problem.
Now imagine this at the business level. If a company has a development team with 10 people, you will need 10
licenses. For a company is much more delicate process of licensing, since they are constantly monitored and
monitored by the companies responsible for legal software and the legality and use of this mainly.

Redistribution is NOT Possible

Possibly I have already mentioned it before, but it is important to mention this great inconvenience that
commercial Software has in it. For example let’s see. A very noticeable drawback is that it is not possible to
redistribute the software that you just bought. For example, you cannot make a CD image and upload it to the
Internet so that others can download it, because this activity is completely illegal and if you do not believe me,
you can find it in the license that you just acquired, just check it to find out of what you cannot really do.

Higher cost in Commercial Software

Do you want to talk about prices? Surely you have already gone to a technology store and checked the price of
the Office package, a good antivirus or the Windows operating system itself. Any of this Commercial Software
has a really high cost or market value. Obviously comparing what would be free software and the possibility of
downloading the internet programs quietly and without spending or moving your economy. This is one of the
reasons why many use pirated software, something that is not good, but that the high cost borders on that.

Technical support

Earlier I mentioned that technical support was one of the advantages of commercial software. And that certainly
was an important part to highlight, for the help that this can provide us. However, something that few know is
that the technical support of software is only for that person who acquired it. If more people use it, and want to
contact technical support, this help will be denied, even when you are already in a phone call with them.

Proprietary Software

As you know, commercial software is also called Proprietary Software. And specifically, this is also one of the
drawbacks. When acquiring proprietary software, you as a client or user, will have a certain level of dependence
towards the company that owns the software. Unlike Free Software as such, in which you will not even have the
need to contact the developer, you can send your comments or doubts, but regularly among the same users in
some forums, they give what is the attention to clients or the support help.

Points:

 Source code can only be modified by the individual or organization that created it
 It is the software that is made or owned by specific organization for their use
 The internal development structure of this software is not exposed to the public
 Examples: iTunes, Windows, macOS etc.

Open Source Software Proprietary Software

It refers to the software that is developed and tested It refers to the software that is solely owned by the
through open collaboration. individual or the organization that developed it
Anyone with the academic knowledge can access, Only the owner or publisher who holds the legal
inspect, modify and redistribute the source code. property rights of the source code can access it.
The project is managed by an open source The project is managed by a closed group of individual
community of developers and programmers. or team that developed it.
They are not aimed at unskilled users outside of the They are focused on a limited market of both skilled
programming community. and unskilled end users.
It provides better flexibility which means more There is a very limited scope of innovation with the
freedom which encourages innovation. restrictions and all.
Not secured Highly secured
Examples: Android, Firefox, LibreOffice, Ubuntu, Examples: Windows, macOS, iTunes, Google Earth,
Drupal, GNOME etc. Adobe Flash Player etc.

Software Licensing

 Licensing is a measure or a legal document to maintain the legal rights to authorize the use of digital media

 Licensing is very important as this is related to intellectual property and copyright material

 Free and open source license have software that are free with no charge for using them however, they are
bounded by different agreement terminologies

 Proprietary license are given to the software that are sold for commercial purpose and they have bold
legalities
A software license is a legal instrument (usually by way of contract law, with or without printed material)
governing the use or redistribution of software.

Software licensing describes the legal rights pertaining to the authorized use of digital material. Failure to
adhere to software license agreement terms often incurs criminal charges related to licensed intellectual
property (IP) and copyrighted material.

A software license is a license agreement that gives an individual, company, or organization permission to use
a software program. For example, in most situations, it is illegal to purchase one copy of a program and copy it
onto multiple computers. Instead of requiring tens, hundreds, or thousands of individually licensed copies of a
program, companies often purchase site licenses which scale according to the number of installed users.

A software license is an agreement between you and the owner of a software program that allows you to do
certain things that would otherwise be an infringement of copyright law. The software license usually answers
questions such as

 Where and how and how often can you install the program?
 Can you copy, modify, or redistribute it?
 Can you look at the underlying source code?

The price of the software and the licensing fees, if any, is sometimes discussed in the license agreement, but
usually it's described elsewhere.

Open-Source License

An open-source license allows for a software product to be shared in certain ways, or for some types of
collaborative research or development. In general, open-source licensing allows the source code of a project to
be open or transparent, utilized by third parties, or changed or manipulated by members of a developer
community.

An open-source license is a type of license for computer software and other products that allows the source
code, blueprint or design to be used, modified and/or shared under defined terms and conditions. This allows
end users and commercial companies to review and modify the source code, blueprint or design for their own
customization, curiosity or troubleshooting needs. Open-source licensed software is mostly available free of
charge, though this does not necessarily have to be the case.

Commercial Licensing

A Commercial license is the standard licensing option for organizations and business entities. Licenses are
purchased by the company and can be used by any single person within this organization.

Commercial software is any software or program that is designed and developed for licensing or sale to end
users or that serves a commercial purpose. Commercial software was once considered to be proprietary
software, but now a number of free and open-source software applications are licensed or sold to end users.

HTML & HTML5

Introduction

Markup language: A markup language is a computer language that is used to apply layout and formatting
conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text
into images, tables, links, etc.

Hypertext - Hypertext provides the links between different documents and different document types. In a
hypertext document, links from one place in the document to another are included with the text. By selecting a
link, you are able to jump immediately to another part of the document or even to a different document. In the
WWW, links can go not only from one document to another, but from one computer to another

HTML

First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language. HTML is used to
create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a
series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using
one version of HTML code or another.

HTML5
Hypertext Markup Language revision 5 (HTML5) is markup language for the structure and presentation of World
Wide Web contents. HTML5 supports the traditional HTML and XHTML-style syntax and other new features in its
markup, New APIs, XHTML and error handling.

New features of HTML5 include:

 New parsing rules that are not based on SGML but are oriented towards flexible parsing and compatibility.
 Support of use of inline Scalar Vector Graphics (SVG) and Mathematical Markup Language (MathML) in
text/html.
 New available elements include article, aside, audio, bdi, canvas, command, datalist, details, embed,
figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section,
source, summary, time, video and wbr.
 New available types of form controls include dates and times, email, url, search, number, range, tel and
color.
 New available attributes of charset on meta and async on script.
 Global attributes that can be applied for every element that include id, tabindex, hidden, data-* or customer
data attributes.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of
browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more
attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

NOTE: It is recommended to write all tags in lower-case for consistency, readability, etc.

Applications of HTML

As mentioned before, HTML is one of the most widely used languages over the web. I'm going to list few of them
here:

 Web pages development - HTML is used to create pages which are rendered over the web. Almost every
page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to another and is
heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platforms, mobile, tabs, desktop or laptops
owing to responsive design strategy.
 Offline support HTML pages once loaded can be made available offline on the machine without any need
of internet.
 Game development- HTML5 has native support for rich experience and is now useful in gaming
development arena as well.

Building blocks of HTML

An HTML document consist of its basic building blocks which are:

1. Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
Elements are usually made up of two tags: an opening tag and a closing tag. The closing tag has an extra
forward slash in it.

2. Attribute: An attribute in HTML provides extra information about the element, and it is applied within the
start tag. An HTML attribute contains two fields: name & value.

Syntax: <tag name attribute_name= " attr_value"> content </ tag name>

3. Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written
within tags are termed as HTML elements.
 Basic Structure of HTML

Basic HTML Document - Below mentioned are the basic HTML tags which divides the whole document into
various parts like head, body etc.

 Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good
convention to start the document with this below mentioned tag: <!DOCTYPE html>

 <html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends
with </html> tag.

 <head> : The head tag comes next which contains all the header information of the web page or document
like the title of the page and other miscellaneous information. This information are enclosed within head tag
which opens with <head> and ends with </head>. The contents will of this tag will be explained in the
later sections of course.

 <meta charset="utf-8">: This element specifies the character set for your document to UTF-8, which
includes most characters from the vast majority of human written languages. Essentially, it can now handle
any textual content you might put on it. There is no reason not to set this, and it can help avoid some
problems later.

 <title> : We can mention the title of a web page using the <title> tag. This is header information and
hence mentioned within the header tags. The tag begins with <title> and ends with </title>

 <body> : Next step is the most important of all the tags we have learned so far. The body tag contains the
actual body of the page which will be visible to all the users. This opens with <body> and ends
with </body>. Every content enclosed within this tag will be shown on the web page be it writings or
images or audios or videos or even links. We will see later in the section how using various tags we may
insert mentioned contents into our web pages.

The whole pattern of the code will look something like this:

<html>
<head>
<!-- Information about the page -->
<!--This is the comment tag-->
<title>GeeksforGeeks</title>
</head>
<body>
<!--Contents of the webpage-->
</body>
</html>

HTML Tags

HTML tags are like keywords which define that how web browser will format and display the content. With the
help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain
three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags
are used to create HTML documents and render their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and
HTML text. You can use as many tags you want as per your code requirement.

 All HTML tags must enclosed within < > these brackets.
 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax: <tag> content </tag>

Some Commonly Use Tags

Unclosed HTML Tags - Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags - DOCTYPE, title, link, meta and style

HTML Text Tags - <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>,
<var> and <br>

HTML Link Tags - <a> and <base>

HTML Image and Object Tags - <img>, <area>, <map>, <param> and <object>

HTML List Tags - <ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags - table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags - form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags - script and noscript

HTML - Attributes

HTML attributes are special words which provide additional information about the elements or attributes are the
modifier of the HTML element.

Syntax: <element attribute_name="value">content</element>

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening
tag. All attributes are made up of two parts: a name and a value:

 All HTML elements can have attributes. Attributes provide additional information about an element.

 It takes two parameters: a name and a value. These define the properties of the element and are placed
inside the opening tag of the element. The name parameter takes the name of the property we would like to
assign to the element and the value takes the property’s value or extent of the property names that can be
aligned over the element.

 Every name has some value that must be written within quotes.

Example

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

Below are some of the most commonly used Attributes in HTML:

1. src Attribute: If we want to insert an image into a webpage, then we need to use the <img> tag and the
src attribute. We will need to specify the address of the image as the attribute’s value inside the double
quote.
 <html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src="https://media.geeksforgeeks.org/Geek_logi_-low_res.png">
</body>
</html>

2. alt Attribute: As the name goes this is an alternate tag that is used to show or display something if the
primary attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be used to
describe the image to a developer who is actually sitting at the coding end.

<html>
<head>
<title>alt Attribute</title>
</head>
<body>
<!--If the image is not found or the img field
is left blank the alt value gets displayed-->
<img src="https://media.geeksforgeeks.org/Geek_logi_-low_res.png" alt="The Logo"><br>
<img src="" alt="Since the src value is blank,the alt value is displayed">
</body>
</html>

3. The width and height Attribute: This attribute is used to adjust the width and height of an image.

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=https://media.geeksforgeeks.org/Geek_logi_-low_res.png width="300px"
height="100px" >
</body>
</html>

4. The id Attribute: This attribute is used to provide a unique identification to an element. Situations may
arise when we will need to access a particular element which may have a similar name as the others. In that
case, we provide different ids to various elements so that they can be uniquely accessed. The properties
extending the use of id are generally used in CSS, which we will be learning later.

<html>
<head>
<title>id Attribute</title>
</head>
<body>
<p id = "GfG">Hello geeks<br>
<p id = "ui">This is unique to this paragraph<br>
<p id = "head">This is also unique to this paragraph
</body>
</html>

5. The title Attribute: The title attribute is used to explain an element on hovering the mouse over it. The
behavior differs with various elements but generally the value is displayed while loading or hovering mouse
pointer over it.
Example:

<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello GeeksforGeeks">Hover to see the effect</h3>
</body>
</html>
6. The href Attribute: This attribute is used to specify a link to any address. This attribute is used along
with <a> tag. The link put inside the href attribute gets linked to the text displayed inside the<a> tag. On
clicking on the text we will be redirected to the link. By default, the link gets opened in the same tag but by
using the target attribute and setting its value to “_blank”, we will be redirected to another tab or another
window based on the browsers configuration.

<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org/">
Click to open in the same tab
</a><br>
<a href="https://www.geeksforgeeks.org/" target="_blank">
Click to open in a different tab
</a>
</body>
</html>

7. The style Attribute: This attribute is used to provide various CSS(Cascading Style Sheets) effects to the
HTML elements such as increasing font-size, changing font-family, coloring etc. For a detailed explanation
refer HTML | Style Tag. The program below shows few name and values that go along the style attribute

<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Chaparral Pro Light;">Hello GeeksforGeeks.</h2>
<h3 style="font-size:20px;">Hello GeeksforGeeks.</h3>
<h2 style="color:#8CCEF9;">Hello GeeksforGeeks.</h2>
<h2 style="text-align:center;">Hello GeeksforGeeks.</h2>
</body>
</html>

HTML - Elements

HTML element is the collection of start and end tag with the content inserted in between them.

Syntax: <tagname > Contents... </tagname>

An HTML file is made of elements. These elements are responsible for creating web pages and define content in
that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and
content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content
between them.

Note: Some elements do not have end tag and content, these elements are termed as empty elements or self-
closing element or void elements.

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag,
where the element name is preceded by a forward slash as shown below with few tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />

Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not
have content and end tag such elements are known as Void elements or empty elements. These elements are
also called as unpaired tag.

Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.
HTML Tag vs. Element - An HTML element is defined by a starting tag. If the element contains other content,
it ends with a closing tag. For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements: The HTML element is use inside another HTML Element is called nested HTML
elements.

<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body style = "text-align:center">
<h1>GeeksforGeeks</h1>
<p>Computer science portal</p>
</body>
</html>

Explanation: In the above example, <html> tag contains the <head> and <body>. The <head< and <body>
tag contains another elements so it is called nested element.

Necessary to add end tag: It is necessary to add end tag of element. Otherwise the displayed content may
not be display correctly.

Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two categories:

Block-level element: A block-level element always starts on a new line and stretches out to the left and right
as far as it can.

 These are the elements, which structure main part of web page, by dividing a page into coherent blocks.
 These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML: <address>, <article>, <aside>, <blockquote>, <canvas>,
<dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>,
<header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>,
<table>, <tfoot>, <ul> and <video>.

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second div</div>
<p style="background-color: pink">This is a block level element</p>
</body>
</html>

Output:

Inline elements: An inline element is the opposite of the block-level element. It does not start on a new line
and takes up only necessary width.

 Inline elements are those elements, which differentiate the part of a given text and provide it a particular
function.
 The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>,
<img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
<span style="background-color: lightblue">this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>

Output:

Document metadata

The metadata means information about data. The <meta> tag in HTML provides information about HTML
Document or in simple words, it provides important information about a document. These tags are basically
used to add name/value pairs to describe properties of HTML document, such as expiry date, author name, list
of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no
closing tag but it carries information within its attributes. A web document can include one or more meta tag
depending on information, but in general, it doesn’t affect the physical appearance of the document.

You can include one or more meta tags in your document based on what information you want to keep in your
document but in general, meta tags do not impact physical appearance of the document so from appearance
point of view, it does not matter if you include them or not.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is
represented by <head> and </head> tags. A meta tag can have following attributes in addition to core
attributes:

S.N Attribute & Description

.
1 Name - Name for the property. Can be anything. Examples include, keywords, description, author,
revised, generator etc.
2 Content - Specifies the property's value.
3 Scheme - Specifies a scheme to interpret the property's value (as declared in the content attribute).
4 http-equiv - Used for http response message headers. For example, http-equiv can be used to
refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords - You can use <meta> tag to specify important keywords related to the document and
later these keywords are used by the search engines while indexing your webpage for searching purpose.
Following is an example, where we are adding HTML, Meta Tags, Metadata as important keywords about the
document.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
 </body>
</html>

Document Description - You can use <meta> tag to give a short description about the document. This again
can be used by various search engines while indexing your webpage for searching purpose.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Revision Date - You can use <meta> tag to give information about when last time the document
was updated. This information can be used by various web browsers while refreshing your webpage.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Refreshing - A <meta> tag can be used to specify a duration after which your web page will keep
refreshing automatically. If you want your page keep refreshing after every 5 seconds then use the following
syntax.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Page Redirection - You can use <meta> tag to redirect your page to any other webpage. You can also specify
a duration if you want to redirect the page after a certain number of seconds.

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect
page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
 <body>
<p>Hello HTML5!</p>
</body>
</html>

Setting Cookies - Cookies are data, stored in small text files on your computer and it is exchanged between
web browser and web server to keep track of various information based on your web application need. You can
use <meta> tag to store cookies on client side and later this information can be used by the Web Server to
track a site visitor.

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect
page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15
23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted
when the user exits the browser.

Setting Author Name - You can set an author name in a web page using meta tag. See an example below −

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Specify Character Set - You can use <meta> tag to specify character set used within the webpage. By
default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. Following is an
example to set UTF-8 encoding −

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Text-Level Semantics

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format
text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold,
italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

 Physical tag: These tags are used to provide the visual appearance to the text.
 Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance, but they will be
different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element Description
name
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.

HTML contains several elements that are used to format the text in the HTML page. For instance, elements exist
to markup headlines, paragraphs, bold, italic, underlined text etc. This text looks at these HTML elements.

The h1 to h6 Elements - The <h1> to <h6> elements are used for document headings.
A heading can be a title for a page, paragraph, chapter, etc. The <h1> element defines
the main heading(s) of the document. The <h2> element defines a heading smaller than
<h1> etc. The <h6> element can be used as the least important heading.

Heading elements are typically displayed in a larger font than the rest of the text in the
HTML document. Here is how the heading elements look in HTML code:

<h1> heading 1 </h1>

<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>

The p Element - Whenever you use the <br /> element, anything following it starts from the next line. This tag
is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go
in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older
browsers will have trouble rendering the line break, while if you miss the forward slash character and just use
<br> it is not valid in XHTML. Here is an example:

<p> paragraph1 </p>

<p> paragraph2 </p>

The br Element (Line Break Tag) - The <br> element can be used to force an automatic
single line break e.g. in between two paragraphs, or after a line within a paragraph. The <br> element do not
need an end tag, because it is an empty element. Here is an example:

<p>
line 1 <br>
line2
</p>
The hr Element - The <hr> element creates a horizontal ruler, which can be used to separate different vertical
sections of your webpage. Two paragraphs following each other with a <hr> element in between will have a
horizontal line displayed in between them. Here is an example:

<p> paragraph1 </p>

<hr>
<p> paragraph2 </p>

Again <hr /> tag is an example of the empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older
browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just
use <hr> it is not valid in XHTML.

The b Element - The <b> element marks text to be displayed as bold. Here is an example:

Text in <b> bold </b>

The i Element - The <i> elements marks text to be displayed as italic. Here is an HTML
example:

This text is in <i>italic</i>.

The strong Element - The <strong> element is used to mark text to be displayed strong. In practice the effect
is similar to the <b> element, although browsers may differentiate between the effect of the two elements.
Here is an example:

This text is <strong> strong</strong>.

The big Element - The <big> element is used to marks text to be displayed as bigger than the default text
size. Here is an HTML example:

This text is <big> big text</big>.

The em Element - The <em> element marks text to be displayed as emphasized. In practice the effect is
similar to that of the <i> element, although browsers may differentiate between the effect of the two elements.
Here is an example:

This text is <em>emphasized</em>.

The code Element - The <code> element is used to markup blocks of text to be displayed using a monosize
font, like Courier. The <code> element is typically used to display programming code.
Here is an example:

<code> computer code </code>

The sub Element - The <sub> element marks text to be displayed in smaller characters (subscript). Here is an
example:

<p> This is _subscript. </p>

The sup Element - The <sup> element marks text to be displayed in smaller characters, but lifted up from the
text base line. Here is an example:

<p> This is ^superscript </p>

The del Element - The <del> element marks text as deleted, meaning it will be
displayed with a line through it. Here is an example:

This is <del>deleted</del>

The pre Element (Preserve Formatting) – Sometimes, you want your text to follow the
exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag
<pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source
document. Here is an HTML example:

<pre>
This is text inside a pre
 and line breaks are preserved
just like in a normal text document.
</pre>

The samp Element - The samp element is used to show output from a computer in an HTML document.
The samp element also formats the text with a mono space font. Line breaks are handled just like elsewhere in
HTML. Thus, the samp element is in reality similar to the code element. Here is an HTML example:

<samp>
This text is inside a
samp element
line 2
line 3
</samp>

Nonbreaking Spaces - Suppose you want to use the phrase "12 Angry Men." Here, you would not want a
browser to split the "12, Angry" and "Men" across two lines:

An example of this technique appears in the movie "12 Angry Men."

In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity
&nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should
use something similar to the following code:

Example

<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

White space - In order to make code easier to read, web page authors often add extra spaces or start some
elements on new lines. When the browser comes across two or more spaces next to each other, it only displays
one space. Similarly if it comes across a line break, it treats that as a single space too. This is known as white
space collapsing.

HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage.
When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold
format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1
(main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is
used for least important.

Headings in HTML helps the search engine to understand and index the structure of web page.

Note: The main keyword of the whole content of a webpage should be display by h1 heading tag.

<h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>

HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see
how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML
<p> tag indicates starting of new paragraph.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line
between the two paragraphs.

See this example:

<p>This is first paragraph.</p>

<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

HTML Comments

Comments are some text or code written in your code to give an explanation about the code, and not visible to
the user. Comments which are used for HTML file are known as HTML comments. Anything written between
these tags will be ignored by the browser, so comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase readability of code. Comments are also part
of the code, which gives an explanation of the code.

Types of HTML Comments: There are three types of comments in HTML which are:

 Single-line comment
 Multi-lines comment

How to add comment In HTML - You can add comments in your HTML file using <! -- ... --> tag. So if you will
write anything between theses comment tag that will be treated as comment and browser will not read it.

Syntax:

<! -- Write commented text here -->

Note: The commented code will not be visible to a webpage, and hence you can use comment tag for
documentation purpose, and debugging purpose:

Such as:

<!-- <p>There is some text</p>

<p>There is second text</p> -->

Multiline Comment - In HTML code, we can also comments multiple lines at a time. In multiline comment we
can use any description about code or multiple line code to debug, etc.

Syntax

<!---
Your code is commented.
Write description of code.
It will not display at webpage.
-->

HTML Phrase tag

The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or
semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML
formatting.

 Abbreviation tag : <abbr>

 Acronym tag: <acronym> (not supported in HTML5)
 Marked tag: <mark>
 Strong tag: <strong>
 Emphasized tag : <em>
 Definition tag: <dfn>
 Quoting tag: <blockquote>
 Short quote tag : <q>
 Code tag: <code>
 Keyboard tag: <kbd>
 Address tag: <address>

1. Text Abbreviation tag - This tag is used to abbreviate a text. To abbreviate a text, write text between
<abbr> and </abbr> tag.
<p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pag
es. </p>

2. Marked tag: The content written between <mark> and </mark> tag will show as yellow mark on browser.
This tag is used to highlight a particular text.

<p>This tag will <mark>highlight</mark> the text.</p>

3. Strong text: This tag is used to display the important text of the content. The text written between
<strong> and </strong> will be displayed as important text.

<p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>

4. Emphasized text - This tag is used to emphasize the text, and displayed the text in italic form. The text
written between <em> and </em> tag will italicized the text.

<p>HTML is an <em>easy </em>to learn language.</p>

5. Definition tag: When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content.
Following is the example to show how to definition element.

<p><dfn>HTML </dfn> is a markup language. </p>

6. Quoting text: The HTML <blockquote> element shows that the enclosed content is quoted from another
source. The Source URL can be given using the cite attribute, and text representation of source can display
using <cite> ..... </cite>element.

<blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>?The first step toward succe

ss is taken when you refuse to be a captive of the environment in which you first find yoursel
f.?</p></blockquote>

<cite>-Mark Caine</cite>
7. Short Quotations: An HTML <q> ....... </q> element defines a short quotation. If you will put any content
between <q> ....... </q>, then it will enclose the text in double quotes.

<p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don?t H
ave To Be Pushed. The Vision Pulls You.</q>?</p>

8. Code tags - The HTML <code> </code> element is used to display the part of computer code. It will display
the content in monospaced font.

<p>First Java program</p>

<p><code>class Simple{ public static void main(String args[]){
System.out.println("Hello Java"); }} </code>
</p>

9. Keyboard Tag - In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from
keyboard.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</

p>

10. Address tag - An HTML <address> tag defines the contact information about the author of the content.
The content written between <address> and </address> tag, then it will be displayed in italic font.

<address> You can ask your queries by contact us on <a href="">[email protected]</a>

<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address>

HTML Links

What is a link? It is a connection from one web resource to another. A link has two ends: An anchor and
direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web
resource such as an image, a video clip, a sound bite, a program, an HTML document or an element within an
HTML document.

HTML Anchor: The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important
attribute of the HTML a tag which links to destination page or URL.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Syntax Explanation:

href: The href attribute is used to specify the destination address of the link used.

Text link: The text link is the visible part of the link.

Example

Let's try following example which links http://www.tutorialspoint.com at your page:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>

This will produce the following result, where you can click on the link generated to reach to the home page of
Tutorials Point (in this example).

Appearance of HTML anchor tag

 An unvisited link is displayed underlined and blue.

 A visited link displayed underlined and purple.
 An active link is underlined and red.

The target Attribute - We have used target attribute in our previous example. This attribute is used to
specify the location where linked document is opened. Following are the possible options −

S. Option & Description

N.
1 _blank - Opens the linked document in a new window or tab.
2 _self - Opens the linked document in the same frame.
3 _parent - Opens the linked document in the parent frame.
4 _top - Opens the linked document in the full body of the window.
5 Targetframe - Opens the linked document in a named targetframe.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>

What is a hyperlink?

A hyperlink is an element in an HTML document that links to either another portion of the document or to
another document altogether. On webpages, hyperlinks are usually colored purple or blue and are sometimes
underlined.

A hyperlink can be thought of as an interface that links a source to a target. Clicking the hyperlink at the source
will navigate to the target. Hyperlinks can assume any of the following appearances: Text, Images, URLs,
Controls (for example, a button)
absolute URL: Points to a location defined by its absolute location on the web, including protocol and domain
name. So for example, if an index.html page is uploaded to a directory called projects that sits inside the root of
a web server, and the web site's domain is http://www.example.com, the page would be available
at http://www.example.com/projects/index.html (or even just http://www.example.com/projects/, as most web
servers just look for a landing page such as index.html to load if it is not specified in the URL.)

An absolute URL will always point to the same location, no matter where it is used.

relative URL: Points to a location that is relative to the file you are linking from, more like what we looked at in
the previous section. For example, if we wanted to link from our example file
at http://www.example.com/projects/index.html to a PDF file in the same directory, the URL would just be the
filename — e.g. project-brief.pdf — no extra information needed. If the PDF was available in a subdirectory
inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent absolute URL would
be http://www.example.com/projects/pdfs/project-brief.pdf.)

A relative URL will point to different places depending on the actual location of the file you refer from — for
example if we moved our index.html file out of the projects directory and into the root of the web site (the top
level, not in any directories), the pdfs/project-brief.pdf relative URL link inside it would now point to a file located
at http://www.example.com/pdfs/project-brief.pdf, not a file located
at http://www.example.com/projects/pdfs/project-brief.pdf.

HTML Images

Earlier, the webpages used to comprise of only texts, which made them appear quite boring and uninteresting.
Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. Let’s see
how to add images on a webpage.

Adding images on a webpage : The “img” tag is used to add images on a webpage. The “img” tag is an
empty tag, which means it can contain only a list of attributes and it has no closing tag.

Syntax:<img src="url" alt="some_text">

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.

1) src - It is a necessary attribute that describes the source or path of the image. It instructs the browser where
to look for the image on the server. The location of image may be on the same directory or another server.

2) alt - The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describes the image in words. The alt attribute is considered good for SEO prospective.

3) width - It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height - It h3 the height of the image. The HTML height attribute also supports iframe, image and object
elements. It is not recommended now. You should apply CSS in place of height attribute.

5) title – You can also use the title attribute with the <img> element to provide additional information about
the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the
image.

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file
name in src attribute. Image name is always case sensitive. The alt attribute is a mandatory attribute which
specifies an alternate text for an image, if the image cannot be displayed.
Set Image Location - Usually we keep all the images in a separate directory. So let's keep HTML file test.htm
in our home directory and create a subdirectory images inside the home directory where we will keep our
image test.png.

Assuming our image location is "image/test.png", try the following example:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>

Set Image Width/Height - You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in terms of either pixels or
percentage of its actual size.

<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>

Set Image Border - By default, image will have a border around it, you can specify border thickness in terms
of pixels using border attribute. A thickness of 0 means, no border around the picture.

<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>

Set Image Alignment - By default, image will align at the left side of the page, but you can use align attribute
to set it in the center or right.

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>

Use <img> tag as a link - We can also link an image with other page or we can use an image as a link. To do
this, put <img> tag inside the <a> tag.

<a href="https://www.javatpoint.com/what-is-robotics"><img src="robot.jpg" height="100" width=

"100"></a>

HTML Lists
What is a list? A list is a record of short pieces of information, such as people’s names, usually written or
printed with a single thing on each line and ordered in a way that makes a particular thing easy to find. For
example: A shopping list, To-do list

HTML offers three ways for specifying lists of information. All lists must contain one or more list elements. The
types of lists that can be used in HTML are:

ul: An unordered list. This will list items using plain bullets.
ol: An ordered list. This will use different schemes of numbers to list your items.
dl: A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by
using HTML <ul> tag. Each item in the list is marked with a bullet.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

The type Attribute - You can use type attribute for <ul> tag to specify the type of bullet you like. By default,
it is a disc. Following are the possible options −

<ul type = "square">

<ul type = "disc">
<ul type = "circle">

Following is an example where we used <ul type = "square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
 HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used.
This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

The type Attribute - You can use type attribute for <ol> tag to specify the type of numbering you like. By
default, it is a number. Following are the possible options −

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Following is an example where we used <ol type = "I">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The start Attribute - You can use start attribute for <ol> tag to specify the starting point of numbering you
need. Following are the possible options:

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary
or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

HTML Tables

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are
widely used in communication, research, and data analysis.

 Tables are useful for various tasks such as presenting text information and numerical data.
 Tables can be used to compare two or more items in tabular form layout.
 Tables are used to create databases.

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and
<th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by
<td> tags. HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page.

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption It defines the table caption.
>
<colgroup It specifies a group of one or more columns in a table for formatting.
 >
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

Example:

<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

Important Table options in HTML:

1. Adding a border to a HTML Table: A border is set using the CSS border property. If you do not specify a
border for the table, it will be displayed without borders.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
 <td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one border, add the CSS
border-collapse property.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
3. Adding Cell Padding in a HTML Table: Cell padding specifies the space between the cell content and its
borders. If we do not specify padding, the table cells will be displayed without padding.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</
td>
<td>Sharma</
td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</
td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

4. Adding Left Align Headings in a HTML Table: By default the table headings are bold and centered. To
left-align the table headings, we must use the CSS text-align property.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
 }
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</
td>
<td>Singh</
td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</
td>
<td>41</td>
</tr>
</table>
</body>
</html>

5. Adding Border Spacing in a HTML Table: Border spacing specifies the space between the cells. To set
the border spacing for a table, we must use the CSS border-spacing property.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
 <td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

6. Adding Cells that Span Many Columns in HTML Tables: To make a cell span more than one column,
we must use the colspan attribute.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>

7. Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row,we must
use the rowspan attribute:

<!DOCTYPE html>
 <html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Vikas Rawat</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>
</html>

8. Adding a Caption in a HTML Table: To add a caption to a table, we must use the “caption” tag.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>DETAILS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
 <tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

9. Adding a Background Color to a Table in HTML: A color can be added as a background in HTML table
using the “background-color” option.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
 <td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
<br />
<br />
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

10. Creating Nested Tables in HTML: Nesting tables simply means making a Table inside another Table.
Nesting tables can lead to complex tables layouts, which are visually interesting and have the potential of
introducing errors.

<!DOCTYPE html>
<html>
<body>
<table border=5 bordercolor=black>
<tr>
<td>
 First Column of Outer Table
</td>
<td>
<table border=5 bordercolor=grey>
<tr>
<td>
First row of Inner Table
</td>
</tr>
<tr>
<td>
Second row of Inner Table
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Table Header, Body, and Footer - Tables can be divided into three portions − a header, a body, and a foot.
The head and foot are rather similar to headers and footers in a word-processed document that remain the
same for every page, while the body is the main content holder of the table. The three elements for separating
the head, body, and foot of a table are −

<thead> − to create a separate table header.

<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable
that <thead> and <tfoot> tags should appear before <tbody>

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Basic sections of a document

Webpages can and will look pretty different from one another, but they all tend to share similar standard
components, unless the page is displaying a full screen video or game, is part of some kind of art project, or is
just badly structured:

header: Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the
same from one webpage to another.

navigation bar: Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the
header, this content usually remains consistent from one webpage to another — having inconsistent navigation
on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to
be part of the header rather than an individual component, but that's not a requirement; in fact, some also
argue that having the two separate is better for accessibility, as screen readers can read the two features better
if they are separate.

main content: A big area in the center that contains most of the unique content of a given webpage, for
example, the video you want to watch, or the main story you're reading, or the map you want to view, or the
news headlines, etc. This is the one part of the website that definitely will vary from page to page!

sidebar: Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the
main content (for example on a news article page, the sidebar might contain the author's bio, or links to related
articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

footer: A strip across the bottom of the page that generally contains fine print, copyright notices, or contact
info. It's a place to put common information (like the header) but usually, that information is not critical or
secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick
access to popular content.

 header: <header>.
 navigation bar: <nav>.
 main content: <main>, with various content subsections represented by <article>, <section>,
and <div> elements.
 sidebar: <aside>; often placed inside <main>.
 footer: <footer>.

HTML layout elements in more detail

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something
you'll work on gradually as you start to get more experience with web development. You can find a lot of detail
by reading our HTML element reference. For now, these are the main definitions that you should try to
understand:

 <main> is for content unique to this page. Use <main> only once per page, and put it directly
inside <body>. Ideally this shouldn't be nested within other elements.

 <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g.,
a single blog post).

 <section> is similar to <article>, but it is more for grouping together a single part of the page that
constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries).
It's considered best practice to begin each section with a heading; also note that you can break <article>s
up into different <section>s, or <section>s up into different <article>s, depending on the context.

 <aside> contains content that is not directly related to the main content but can provide additional
information indirectly related to it (glossary entries, author biography, related links, etc.).

 <header> represents a group of introductory content. If it is a child of <body> it defines the global header
of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try
not to confuse this with titles and headings).
 <nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the
navigation.

 <footer> represents a group of end content for a page.

Non-semantic wrappers

<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text
element to wrap your content, or don't want to add any specific meaning. For example:

<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point
in the
play, the lights should be down low]</span>.</p>
In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not
supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note
slightly from the main text.

<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic
block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget
that you could choose to pull up at any point during your time on an e-commerce site.

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it
viewable from anywhere). It doesn't even particularly warrant using a <section>, as it isn't part of the main
content of the page. So a <div> is fine in this case.

Div Tag - HTML

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page
like (text, images, header, footer, navigation bar, etc.). Div tag has both open (<div>) and closing (</div>) tag
and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to
separate out data in the web page and we can create a particular section for particular data or function in the
web pages.

 Div tag is Block level tag

 It is a generic container tag
 It is used to the group of various tags of HTML so that sections can be created and style can be applied to
them.

As we know Div tag is block-level tag in this example div tag contain entire width. It will be displayed div tag
each time on a new line, not on the same line.

Difference between HTML div tag and span tag

div tag span tag

HTML div is a block element. HTML span is an inline element
HTML div element is used to wrap large sections HTML span element is used to wrap small portion of
of elements. texts, image etc.

HTML - Forms

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for
processing.

An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user
registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script
or PHP script etc. The back-end application will perform required processing on the passed data based on
defined business logic inside the application.

HTML Form Tags

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
 <input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup It defines a group of related options in a drop-down list.
>
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.
</form>

Form Attributes

Apart from common attributes, following is a list of the most frequently used form attributes −

S. Attribute & Description

N
1 Action - Backend script ready to process your passed data.
2 Method - Method to be used to upload data. The most frequently used are GET and POST methods.
3 Target - Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
4 Enctype - You can use the enctype attribute to specify how the browser encodes the data before it
sends it to the server. Possible values are:
application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like image,
word file etc.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form:

 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls - There are three types of text input used on forms:

 Single-line text input controls − This control is used for items that require only one line of user input,
such as search boxes or names. They are created using HTML <input> tag.

 Password input controls − This is also a single-line text input but it masks the character as soon as a user
enters it. They are also created using HTML <input> tag.

 Multi-line text input controls − This is used when the user is required to give details that may be longer
than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are
created using HTML <input> tag. Here is a basic example of a single-line text input used to take first name and
last name:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>

Following is the list of attributes for <input> tag for creating text field.

S. Attribute & Description

N
1 type - Indicates the type of input control and for text input control it will be set to text.
2 Name - Used to give a name to the control which is sent to the server to be recognized and get the
value.
3 value - This can be used to provide an initial value inside the control.
4 size - Allows specifying the width of the text-input control in terms of characters.
5 maxlength - Allows specifying the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created
using HTML <input>tag but type attribute is set to password. Here is a basic example of a single-line password
input used to take user password:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>

Following is the list of attributes for <input> tag for creating password field.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag. Here is a basic example of a multi-line text input used to take
item description:

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input
Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>

Following is the list of attributes for <textarea> tag.

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox. Here is an example HTML code for a form with two
checkboxes −

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>

Following is the list of attributes for <checkbox> tag.

Radio Button Control

Radio buttons are used when out of many options; just one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to radio. Here is example HTML code for a form with
two radio buttons:

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>

Following is the list of attributes for radio button.

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of drop
down list, from where a user can select one or more options. Here is example HTML code for a form with one
drop down box:

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as
a file select box. This is also created using the <input> element but type attribute is set to file. Here is example
HTML code for a form with one file upload box:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button. The type attribute can take the following values −

S.N Type & Description

1 submit - This creates a button that automatically submits a form.
2 reset - This creates a button that automatically resets form controls to their initial values.
3 button - This creates a button that is used to trigger a client-side script when the user clicks that
button.
4 image - This creates a clickable button but we can use an image as background of the button.

Here is example HTML code for a form with three types of buttons:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>

HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be
various types, which defines information field. Such as <input type="text" name="name"> gives a text box.
Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
image Defines a graphical submit button.

Following is the description about types of <input> element with examples.

1. <input type="text">: <input> element of type "text" are used to define a single-line input text field.
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
</form>

Note: The default maximum character length is 20.

2. <input type="password">: The <input> element of type "password" allow a user to enter the password
securely in a webpage. The entered text in password filed converted into "*" or ".", so that it cannot be read by
another user.

<form>
<label>Enter User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>

3. <input type="submit">: The <input> element of type "submit" defines a submit button to submit the form
to the server when the "click" event occurs.

<form action="https://www.javatpoint.com/html-tutorial">
<label>Enter User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>

After clicking on submit button, this will submit the form to server and will redirect the page to action value.We
will learn about "action" attribute in later chapters

4. <input type="reset">: The <input> type "reset" is also defined as a button but when the user performs a
click event, it by default reset the all inputted values.

<form>
<label>User id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>

Try to change the input values of user id and password, and then when you click on reset; it will reset input
fields with default values.

5. <input type="radio">: The <input> type "radio" defines the radio buttons, which allow choosing an option
between a set of related options. At a time only one radio button option can be selected at a time.

<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
<input type="submit" value="submit">
</form>

6. <input type="checkbox">: The <input> type "checkbox" are displayed as square boxes which can be
checked or unchecked to select the choices from the given options.
Note: The "radio" buttons are similar to checkboxes, but there is an important difference between both types:
radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero
to multiple options at a time.

<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favorite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>
<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>

7. <input type="button">: The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event. Note: It mainly works with JavaScript.

<form>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
</form>

8. <input type="file">: The <input> element with type "file" is used to select one or more files from user
device storage. Once you select the file, and after submission, this file can be uploaded to the server with the
help of JS code and file API.

<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>

We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file"
option

9. <input type="image">: The <input> type "image" is used to represent a submit button in the form of
image.

<!DOCTYPE html>
<html>
<body>
<h2>Input "image" type.</h2>
<p>We can create an image as submit button</p>
<form>
<label>User id:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="login.png" width="100px">
</form>

</body>
</html>

Difference between GET and POST Method in HTML

GET POST
In GET method, values are visible in the URL. In POST method, values are not visible in the URL.
GET has a limitation on the length of the values, POST has no limitation on the length of the values
generally 255 characters. since they are submitted via the body of HTTP.
GET performs are better compared to POST because It has lower performance as compared to GET method
of the simple nature of appending the values in the because of time spent in including POST values in the
URL. HTTP body.
This method supports only string data types. This method supports different data types, such as
string, numeric, binary, etc.
GET results can be bookmarked. POST results cannot be bookmarked.
GET request is often cacheable. The POST request is hardly cacheable.
 GET Parameters remain in web browser history. Parameters are not saved in web browser history.

Advantages of GET - Here, are benefits/ pros of using GET:

 The GET method can retrieve information identified by the request-URl (Uniform Resource Identifier).
 GET requests can be viewed in the browser history.
 It enables you to save the results of a HTML form.
 You can easily use GET method to request required data.

Advantages of POST - Here, are benefits/ pros of using POST:

 This method helps you to determine resource URI.

 Specifying a new resource location header is very easy using location header.
 You can send a request to accept the entity as a new resource, which is identified by the URI.
 You can send user-generated data to the web server.
 It is very useful when you do not have any idea about the resource you have to keep in the URL.
 Use POST when you need the server, which controls URL generation of your resources.
 POST is a secure method as its requests do not remain in browser history.
 You can effortlessly transmit a large amount of data using post.
 You can keep the data private.
 This method can be used to send binary as well as ASCII data.

Disadvantages of GET - Here, are cons/drawback of using GET:

 GET can't be used to send word documents or images.

 GET requests can be used only to retrieve data
 The GET method cannot be used for passing sensitive information like usernames and passwords.
 The length of the URL is limited.
 If you use GET method, the browser appends the data to the URL.
 You can easily bookmark Query string value in GET

Disadvantages of POST - Here, are cons/drawback of using POST:

 It is not possible to save data as the data sent by the POST method is not visible in the URL.
 You cannot see POST requests in browser history.
 This method is not compatible with many firewall setups.
 You cannot use spaces, tabs, carnage returns, etc.
 This method is not compatible with some firewall setups.
 POST method takes lots of time when uploading the large binary file.

HTML Frames

Not Supported in HTML5.

HTML frames are used to divide your browser window into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables are organized: into rows and columns.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your webpages:

 Some smaller devices cannot cope with frames often because their screen is not big enough to be divided
up.
 Sometimes your page will be displayed differently on different computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to
divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this element.

Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

HTML iframes

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag
defines an inline frame, hence it is also called as an Inline frame. An HTML iframe embeds another document
within the current HTML document in the rectangular region. The webpage content and iframe contents can
interact with each other using JavaScript.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag: <iframe src="URL"></iframe>

Here, "src" attribute specifies the web address (URL) of the inline frame page.

Set Width and Height of iframe - You can set the width and height of iframe by using "width" and "height"
attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%,
60% etc.

Example: (Pixels)

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
</body>
</html>

Remove the border of iframe - By default, an iframe contains a border around it. You can remove the border
by using <style> attribute and CSS border property.

<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>This iframe example doesn't have any border</p>
<iframe src="https://www.javatpoint.com/" style="border:none;"></iframe>
</body>
</html>

You can also change the size, color, style of the iframe's border.

<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<iframe src="https://www.javatpoint.com/" style="border:2px solid tomato;"></iframe>
</body>
</html>

Iframe Target for a link - You can set a target frame for a link by using iframe. Your specified target attribute
of the link must refer to the name attribute of the iframe.

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame.
</p>

</body>
</html>

Output

new.html output code:

<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the ifarme click on link to open new iframe. </p>
</body>
</html>

Embed YouTube video using iframe - You can also add a YouTube video on your webpage using the
<iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay,
and many more properties for the video. Following are some steps to add YouTube video on your webpage:

 Goto YouTube video which you want to embed.

 Click on SHARE ➦ under the video.
 Click on Embed <> option.
 Copy HTML code.
 Paste the code in your HTML file
 Change height, width, and other properties (as per requirement).

<iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4" frameborder="

0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullsc
reen style="padding:20px;"></iframe>
<iframe width="550" height="315" src="https://www.youtube.com/embed/O5hShUO6wxs" frameborder="
0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="padd
ing:20px;">></iframe>

HTML Classes
Class Attribute in HTML - The HTML class attribute is used to specify a single or multiple class names for an
HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can
use this class in CSS with a specific class; write a period (.) character, followed by the name of the class for
selecting elements.

A class attribute can be defined within <style> tag or in separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

Defining an HTML class - To create an HTML class, firstly define style for HTML class using <style> tag within
<head> section as following example:

<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>

We have define style for a class name "headings", and we can use this class name with any of HTML element in
which we want to provide such styling. We just need to follow the following syntax to use it.

<tag class="ghf"> content </tag>

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>

Another Example with different class name

Example: Let's use a class name "Fruit" with CSS to style all elements.

<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>

Here you can see that we have used the class name "fruit" with (.) to use all its elements.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.
Multiple Classes - You can use multiple class names (more than one) with HTML elements. These class names
must be separated by a space.

Example: Let's style elements with class name "fruit" and also with a class name "center".

<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
.center {
text-align: center;
}
</style>
<body>
<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name
"center", which center-aligns the text.</p>
<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>
</body>
</html>

You can see that the first element <h2> belongs to both the "fruit" class and the "center" class.

Same class with Different Tag - You can use the same class name with different tags like <h2> and <p>
etc. to share the same style.

<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>

HTML Id Attribute

The id attribute is used to specify the unique ID for an element of the HTML document. It allocates the unique
identifier which is used by the CSS and the JavaScript for performing certain tasks.

Note: In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using the #
symbol followed by id.

Note: JavaScript can access an element with the given ID by using the getElementById() method.

Syntax: <tag id="value">

Example 1: The following example describes how to use the id attribute in CSS document:

<!DOCTYPE html>
<html>
<head>
<title>
Example of Id attribute in CSS
</title>
<style>
#Cars {
padding: 40px;
background-color: lightblue;
color: black;
text-align: center;
}

#Bikes
{
padding: 50px;
background-color: lightGreen;
text-align: center;
}
</style>
</head>
<body>
<p> Use CSS to style an element with the id: </p>
<h1 id="Cars"> Cars </h1>
<h1 id="Bikes"> Bikes </h1>
</body>
</html>

Example 2: The following example describes how to use the ID attribute in JavaScript.

<!DOCTYPE html>
<html>
<head>
<title> Date Attribute </title>
<script>
function viewdate() {
var x = document.getElementById("dob").value;
document.getElementById("demo").innerHTML = x;
</script>
</head>
<body>
Employee Name: <input type="text" placeholder="Your Good name"/>
<br>
<br>
Date of Joining:
<input type="date" id="dob">
<br>
<button onclick="viewdate()"> Submit
</button>
<br>
<h2 id="demo"> </h2>
</body>
</html>

HTML Colors

Colors are very important to give a good look and feel to your website. You can specify colors on page level
using <body> tag or you can set colors for individual tags using bgcolor attribute. The <body> tag has
following attributes which can be used to set different colors:

 bgcolor − sets a color for the background of the page.

 text − sets a color for the body text.
 alink − sets a color for active links or selected links.
 link − sets a color for linked text.
 vlink − sets a color for visited links − that is, for linked text that you have already clicked on.

HTML Color Coding Methods - There are following three different methods to set colors in your web page −

 Color names − You can specify color names directly like green, blue or red.
 Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the color.
 Color decimal or percentage values − This value is specified using the rgb( ) property.
 HTML Colors - Color Names

You can specify direct a color name to set text or background color. W3C has listed 16 basic color names that
will validate with an HTML validator but there are over 200 different color names supported by major browsers.

Here are the examples to set background of an HTML tag by color name:

<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>

HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two
are a green value(GG), and the last are the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #. Here are the examples to set background
of an HTML tag by color code in hexadecimal:

<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>

HTML Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes three values, one each for red, green,
and blue. The value can be an integer between 0 and 255 or a percentage.

Note − All the browsers does not support rgb() property of color so it is recommended not to use it.

Here are the examples to set background of an HTML tag by color code using rgb() values:

<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>

<table bgcolor = "rgb(0,0,0)">

 <tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>
</html>

Cascading Style Sheet (CSS)

CSS is used to control the style of a web document in a simple and easy way. CSS is the acronym
for "Cascading Style Sheet". This tutorial covers both the versions CSS1,CSS2 and CSS3, and gives a
complete understanding of CSS, starting from its basics to advanced concepts.

Why to Learn CSS? Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.

CSS is a MUST for students and working professionals to become a great Software Engineer especially when
they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:

 Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs, and variations in display for different
devices and screen sizes as well as a variety of other effects.
 Become a web designer - If you want to start a career as a professional web designer, HTML and CSS
designing is a must skill.
 Control web - CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
 Learn other languages - Once you understand the basic of HTML and CSS then other related technologies
like javascript, php, or angular are become easier to understand.

Applications of CSS

As mentioned before, CSS is one of the most widely used style language over the web. I'm going to list few of
them here:

 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just
write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster
download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of
device. By using the same HTML document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being recommended to use
CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future
browsers.

There are three types of CSS which are given below:

1. Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as
inline CSS. This kind of style is specified within an HTML tag using the style attribute. Inline CSS is used to
apply CSS on a single line or element.

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;">
 GeeksForGeeks
</p>
</body>
</html>

2. Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The
CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the HTML
file. Internal CSS is used to apply CSS on a single document or page.

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

3. External CSS: External CSS is used to apply CSS on multiple pages or all pages. External CSS contains
separate CSS file which contains only style property with the help of tag attributes (For example class, id,
heading … etc.). CSS property written in a separate file with .css extension and should be linked to the HTML
document using link tag. This means that for each element, style can be set only once and that will be
applied across web pages. Example: The file given below contains CSS property. This file saves with .css
extension. For Ex: geeks.css

body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}

Below is the HTML file that is making use of the created external style sheet

 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Properties of CSS: Inline CSS has the highest priority, and then comes Internal/Embedded followed by External
CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are
defined in multiple style sheets then the below order will be followed.

 As Inline has the highest priority, any styles that are defined in the internal and external style sheets are
overridden by Inline styles.
 Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
 External style sheets have the least priority. If there are no styles defined either in inline or internal style
sheet then external style sheet rules are applied for the HTML tags.

CSS - Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding
elements in your document. A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or
<table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted
into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows − selector { property: value }

Example − You can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.

CSS - Measurement Units

Before we start the actual exercise, we would like to give a brief idea about the CSS Measurement Units. CSS
supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as
well as relative measures such as percentages and em units. You need these values while specifying various
measurements in your Style rules e.g. border = "1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples:

Uni Description Example

t
 % Defines a measurement as a percentage relative to another value, p {font-size: 16pt;
typically an enclosing element. line-height: 125%;}
cm Defines a measurement in centimeters. div {margin-bottom:
2cm;}
em A relative measurement for the height of a font in em spaces. Because an p {letter-spacing:
em unit is equivalent to the size of a given font, if you assign a font to 7em;}
12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.
ex This value defines a measurement relative to a font's x-height. The x- p {font-size: 24pt;
height is determined by the height of the font's lowercase letter x. line-height: 3ex;}
in Defines a measurement in inches. p {word-
spacing: .15in;}
mm Defines a measurement in millimeters. p {word-spacing: 15mm;}
pc Defines a measurement in picas. A pica is equivalent to 12 points; thus, p {font-size: 20pc;}
there are 6 picas per inch.
pt Defines a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;}
px Defines a measurement in screen pixels. p {padding: 25px;}

CSS - Colors

CSS Color property is used to set the color of HTML elements. This property is used to set font color, background
color etc. Color of an element can be defined in the following ways:

1. Built-In Color: These are a set of predefined colors which are used by its name. For example: red, blue,
green etc.

h1 {
color: color-name;
}

2. RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by
specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0),
Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.

h1 {
color: rgb(R, G, B);
}

3. RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which
specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully
transparent and 1.0 represents not transparent.

h1 {
color:rgba(R, G, B, A);
}

4. Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters each
range from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.

h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

5. HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate
system.

 Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120
represents green and 240 represents blue color.
 Saturation: It takes percentage value, where 100% represents completely saturated, while 0%
represents completely unsaturated (gray).
 Lightness: It takes percentage value, where 100% represents white, while 0% represents black.

h1 {
color:hsl(H, S, L);
}

6. HSLA: The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha)
which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0.
represents fully transparent and 1.0 represents not transparent.
 h1 {
color:hsla(H, S, L, A);
}

CSS - Fonts

 The font-family property is used to change the face of a font.

 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font properties.

Set the Font Family - Following is the example, which demonstrates how to set the font family of an element.
Possible value could be any font family name.

<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>

Set the Font Style - Following is the example, which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.

<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>

Set the Font Weight - The following example demonstrates how to set the font weight of an element. The
font-weight property provides the functionality to specify how bold a font is. Possible values could be normal,
bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>

Set the Font Size - The following example demonstrates how to set the font size of an element. The font-size
property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger, size in pixels or in %.

<html>
<head>
</head>
<body>
 <p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>

Set the Font Size Adjust - The following example demonstrates how to set the font size adjust of an element.
This property enables you to adjust the x-height to make fonts more legible. Possible value could be any
number.

<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>

CSS - Text

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the letters that make up a word.
 The word-spacing property is used to add or subtract space between the words of a sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough text.
 The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.

CSS Box model

CSS box model is a container which contains multiple properties including borders, margin, padding and the
content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing
the layout of different elements. The web browser renders every element as a rectangular box according to the
CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:

 borders
 margins
 padding
 Content

The following figure illustrates the box model.

Border Area: It is the area between the

box’s padding and margin. Its dimensions are
given by the width and height of border.

Margin Area: This area consists of space

between border and margin. The dimensions
of Margin area are the margin-box width and
the margin-box height. It is useful to separate
the element from its neighbors.

Padding Area: It includes the element’s

padding. This area is actually the space
around the content area and within the border
box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
Content Area: This area consists of content like text, image, or other media content. It is bounded by the
content edge and its dimensions are given by content box width and height.

Example 1:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size:36px;
font-weight:bold;
Text-align:center;
}
.gfg {
margin-left:60px;
border:50px solid #009900;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1 {
font-size:42px;
font-weight:bold;
color:#009900;
margin-top:60px;
background-color:#c5c5db;
}
.gfg2 {
font-size:18px;
font-weight:bold;
background-color:#c5c5db;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">GeeksforGeeks</div>
<div class = "gfg2">A computer science portal for geeks</div>
</div>
</body>
</html>

CSS - Measurement Units

Before we start the actual exercise, we would like to give a brief idea about the CSS Measurement Units. CSS
supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as
well as relative measures such as percentages and em units. You need these values while specifying various
measurements in your Style rules e.g. border = "1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples:

Unit Description Example

% Defines a measurement as a percentage relative to another value, p {font-size: 16pt; line-
typically an enclosing element. height: 125%;}
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
em A relative measurement for the height of a font in em spaces. Because p {letter-spacing: 7em;}
an em unit is equivalent to the size of a given font, if you assign a font
to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.
ex This value defines a measurement relative to a font's x-height. The x- p {font-size: 24pt; line-
height is determined by the height of the font's lowercase letter x. height: 3ex;}
in Defines a measurement in inches. p {word-spacing: .15in;}
mm Defines a measurement in millimeters. p {word-spacing: 15mm;}
pc Defines a measurement in picas. A pica is equivalent to 12 points; thus, p {font-size: 20pc;}
 there are 6 picas per inch.
pt Defines a measurement in points. A point is defined as 1/72nd of an body {font-size: 18pt;}
inch.
px Defines a measurement in screen pixels. p {padding: 25px;}

CSS - Dimension

You have seen the border that surrounds every box i.e. element, the padding that can appear inside each box
and the margin that can go around them. In this tutorial we will learn how we can change the dimensions of
boxes.

We have the following properties that allow you to control the dimensions of a box.

 The height property is used to set the height of a box.

 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

The Height and Width Properties - The height and width properties allow you to set the height and width for
boxes. They can take values of a length, a percentage, or the keyword auto.

<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>

The line-height Property - The line-height property allows you to increase the space between lines of text.
The value of the line-height property can be a number, a length, or a percentage.

<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;
line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is
30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is
30pixels.
</p>
</body>
</html>

The max-height Property - The max-height property allows you to specify maximum height of a box. The
value of the max-height property can be a number, a length, or a percentage.

<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
 <br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>

The min-height Property - The min-height property allows you to specify minimum height of a box. The value
of the min-height property can be a number, a length, or a percentage.

<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>

The max-width Property - The max-width property allows you to specify maximum width of a box. The value
of the max-width property can be a number, a length, or a percentage.

<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>

The min-width Property - The min-width property allows you to specify minimum width of a box. The value of
the min-width property can be a number, a length, or a percentage.

<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>

CSS Margin

CSS Margin property is used to define the space around elements. It is completely transparent and doesn't have
any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties. You can also
change all properties at once by using shorthand margin property.

CSS Margin Properties

 Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.
Note: You can also use negative values to overlap content.

CSS margin Example

You can define different margin for different sides for an element.

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

Output:

Margin: Shorthand Property

CSS shorthand property is used to shorten the code. It specifies all the margin properties in one property.

There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;

2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin 50px;

1) margin: 50px 100px 150px 200px;

It identifies that:

top margin value is 50px

right margin value is 100px
bottom margin value is 150px
left margin value is 200px

2) margin: 50px 100px 150px;

It identifies that:

top margin value is 50px

left and right margin values are 100px
bottom margin value is 150px

3) margin: 50px 100px;

It identifies that:

top and bottom margin values are 50px

left and right margin values are 100px

4) margin: 50px;

It identifies that:

top right bottom and left margin values are 50px

CSS Padding

CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is
affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also
change all properties at once by using shorthand padding property.

CSS Padding Properties

Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.

CSS Padding Values

Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.

CSS Padding Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

Output:

Difference Between margin and Padding

Margin is used to create space around element and padding is used to create space around element inside the
border.

CSS - Positioning

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You
can specify whether you want the element positioned relative to its natural position in the page or absolute
based on its parent element.

Now, we will see all the CSS positioning related properties with examples:

Relative Positioning - Relative positioning changes the position of the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels to the element's LEFT position. You can use two
values top and left along with the position property to move an HTML element anywhere in the HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.
NOTE − You can use bottom or right values as well in the same way as top and left.

<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>

Absolute Positioning - An element with position: absolute is positioned at the specified coordinates relative
to your screen top-left corner. You can use two values top and left along with the position property to move an
HTML element anywhere in the HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>

</html>

Fixed Positioning - Fixed positioning allows you to fix the position of an element to a particular spot on the
page, regardless of scrolling. Specified coordinates will be relative to the browser window.

You can use two values top and left along with the position property to move an HTML element anywhere in the
HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
CSS Static Positioning - This is a by default position for HTML elements. It always positions an element
according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.

CSS Visibility vs. Display

The display and visibility CSS properties appear to be the same thing, but they are in fact quite different and
often confuse those new to web development.

 visibility: hidden; hides the element, but it still takes up space in the layout. Child element of a hidden box
will be visible if their visibility is set to visible.

 display: none; turns off the display and removes the element completely from the document. It does not
take up any space, even though the HTML for it is still in the source code. All child elements also have their
display turned off, even if their display property is set to something other than none.

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id, class, type, attribute etc. There are several different types of
selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector - The element selector selects the HTML element by name.

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS Id Selector - The id selector selects the id attribute of an HTML element to select a specific element. An
id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash
character (#), followed by the id of the element. Let?s take an example with the id "para1".

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

3) CSS Class Selector - The class selector selects HTML elements with a specific class attribute. It is used with
a period character . (full stop symbol) followed by the class name. Note: A class name should not be started with
a number.

Let's take an example with a class "center".

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

CSS Class Selector for specific element - If you want to specify that only one specific HTML element should
be affected then you should use the element name with class selector. Let's see an example.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

4) CSS Universal Selector - The universal selector is used as a wildcard character. It selects all the elements
on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
5) CSS Group Selector - The grouping selector is used to select all the elements with the same style
definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping. Let's see the CSS code without group selector.

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}

As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:

h1,h2,p {
text-align: center;
color: blue;
}

CSS - Pseudo Elements & Pseudo Classes

Pseudo-classes – A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are
the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you
had applied a class to some part of your document, often helping you cut down on excess classes in your
markup, and giving you more flexible, maintainable code.

Pseudo-classes are keywords that start with a colon:

Pseudo-classes select regular elements but under certain conditions, like when their position relative to siblings
or when they’re under a particular state. Here is a list of pseudo-classes in CSS3:

Dynamic pseudo-classes

 :link
 :visited
 :hover
 :active
 :focus

UI element states pseudo-classes

 :enabled
 :disabled
 :checked

Structural pseudo-classes

 :first-child
 :nth-child(n)
 :nth-last-child(n)
 :nth-of-type(n)
 :nth-last-of-type(n)
 :last-child
 :first-of-type
 :last-of-type
 :only-child
 :only-of-type
 :root
 :empty

Other pseudo-classes

 :not(x)
 :target
 :lang(language)

Pseudo-elements – Pseudo-elements behave in a similar way, however they act as if you had added a whole
new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start
with a double colon ::.

Pseudo-elements effectively create new elements that are not specified in the markup of the document and can
be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal
markup, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where
it belongs.

With the introduction of CSS3 the difference between pseudo-classes and pseudo-elements is a lot more clear as
it is now the standard to use double colon (::) on pseudo-elements, however we should be using single colon
until certain browsers are phased out (I’m looking at you IE8 and below). Here is a list of pseudo-elements in
CSS3:

 ::before
 ::after
 ::first-letter
 ::first-line

Difference between HTML and HTML5

FEATURES HTML HTML5

definition A hypertext markup language (HTML) is HTML5 is a new version of HTML with new
the primary language for developing web functionalities with markup language with
pages. Internet technologies.
Multimedia Language in HTML does not have HTML5 supports both video and audio.
support support for video and audio.

Storage The HTML browser uses cache memory HTML5 has the storage options like: application
as temporary storage. cache, SQL database, and web storage.

Browser HTML is compatible with almost all In HTML5, we have many new tags, elements,
compatibility browsers because it has been present for and some tags that have
a long time, and the browser made been removed/modified, so only some
modifications to support all the features. browsers are fully compatible with HTML5.
Graphics In HTML, vector graphics are possible In HTML5, vector graphics are supported by
support with tools Like Silver light, Adobe Flash, default.
VML, etc.
Threading In HTML, the browser interface and The HTML5 has the JavaScript Web Worker API,
JavaScript running in the same thread. which allows the browser interface to run in
multiple threads.
Storage Uses cookies to store data. Uses local storage instead of cookies

Vector and Vector graphics are possible with the Vector graphics is an integral part of HTML5,
Graphics help of technologies like VML, Silverlight, SVG and canvas.
Flash,etc.
Shapes It is not possible to create shapes We can draw shapes like circles, rectangles,
like circles, rectangles, triangles. triangles.

Doc type Doctype declaration in html is too long The DOCTYPE declaration in html5 is very
<! DOCTYPE HTML PUBLIC "- // W3C // simple "<! DOCTYPE html>
DTD HTML 4.01 // EN"
"http://www.w3.org/TR/html4/strict.dtd">
Character Character encoding in HTML is too long. Character encoding declaration is simple
Encoding <! DOCTYPE HTML PUBLIC "- // W3C // <meta charset = "UTF-8">
DTD HTML 4.0 Transitional // EN">

Multimedia Audio and video are not the part of Audio and video are essential parts of
support HTML4. HTML5,like: <Audio>, <Video>.

Vector Graphics In HTML4, vector graphics are possible Vector graphics are an integral part of HTML5,
with the help of techniques like VML, SVG, and canvas.
Silver light and Flash.
 Html5 uses cookies. It supplies local storage in place of cookies.

Shapes It is not possible to draw shapes like Using html5, you can draw shapes like circles,
circles, rectangles, triangles. rectangles, triangles.

Browser Works with all older browsers A new browser supports this.
Support

Difference between CSS and CSS3

Features CSS CSS3

Compatibili The primary purpose of CSS was to focus on When CSS3 code is written in CSS, it is invalid.
ty formatting features. They have capabilities CSS3 makes the Web Pages more attractive. It
for positioning texts and objects. takes less time to create a page.
CSS is backward compatible with CSS3.
Design CSS does not support responsive design. CSS3 is the latest version and supports the
responsive design.
Modules CSS is not divided into modules. CSS3 could split into modules.
Animation CSS cannot produce 3D animation and In CSS3, the animation and 3D transformations
transformation. are used. Elements are moved across the screen
with the assistance of JavaScript and flash. By
using the elements, also be ready to change the
size and color. All kinds
of transformations and animations are
performed by using CSS3.
Rounded When CSS3 was launched, the developers In CSS3 the developer writes the code like:
corners and designed some images that looked like the round border {border-radius: 20px}.
gradient rounded corners with
the structures and backgrounds. Developers They have not been sent by any server and
are designing a border and uploading the perform any other activities. Gradients will also
design to the server. be set by using the code which is given below:
gradBG {Background:linear-
gradient(red,black);}
Text Effects In CSS, animations are written In CSS3, the developer adds text-shadows to
and Text in JavaScript and JQuery. It has not to design make it easy and effective. They add words for
Animations layer features and page elements. It had no the visual effects of the break line and a
special effects such as shadowing text, text comfortable fit inside the column. It changes the
animation, etc. size and color of the text.
Capacity CSS is slower. CSS3 is faster than CSS.
Color CSS provides unique color schemas and CSS3 supports HSL RGBA, HSLA and the
standard color. gradient colors.
Blocks Multi-column text blocks are defined CSS supports single text blocks.
in CSS3.
Lists CSS allows a user to: In CSS3, The list item has a counter and affected
 It set different lists for ordered lists by counter increment and counter reset
 CSS set an image for a list item marker properties.
 CSS add background colors to the list In CSS if we use list in CSS3 the 'display'
and list items. property must have a list defined in it.
Some list item markers are: list-style-type.
These can be set circle, square, etc. CSS3 cannot support a numbering system.

The list style image property enables an image

is set against the style type marker.
It will set as inside the box or outside the box.

CSS vs. Tables- 9 Reasons Why CSS Tableless Designs are Better

1. CSS tableless design allows web designers the possibility to make more complex layouts and designs when
producing a website. With table based layouts, web designers are confined to creating layouts that can be rigid,
inflexible, and based on grids. CSS tableless based layouts, on the other hand, allow the designer to be as
creative as their imagination allows them to be.

2. If your intention is to improve search engine rankings for your website, then a CSS tableless design will help
your cause. CSS tableless designs result in smaller web page file sizes, a reduction in the ratio of code to
content, and the elimination of the extraneous “junk” HTML markup that many table based web editors use. This
makes it easier for search engine spiders to crawl through your website and results in a more favorable ranking
in search engines.

3. By using CSS style sheets it is extremely easy to maintain visual consistency throughout your website. When
using table based layouts, it is easy to lose this consistency because each web page’s style, layout, and design
are frequently hard-coded individually into every page. If you need to make a change to your website across all
pages, you’ll have to change the code on each individual page. With CSS, all pages can use the same CSS
document for their layout and styles. If you change a property in the CSS file, the changes will be
instantaneously reflected across all pages of your website.

4. Updating a CSS tableless website is easier and less time consuming than compared to table based designs.
For example, if you want to change font sizes and colors within your website, your external CSS file can be
simply opened and the necessary changes made without making the change on each and every page of your
website. To change the look of your website for special or seasonal promotions, the entire website “look and
feel” can be completely altered simply by changing properties in the CSS file without touching the HTML code of
the web page.

5. Redesigning a website using CSS tableless design is faster and less expensive than redesigning a website
using table based design. This is because CSS tableless designs have separate files for content and visual data
including web page structure whereas table based designs mix layout information with content in the same file.
By separating the visual data and layout from the content, a web designer is able to quickly and easily make
changes across the entire website.

6. Table web page designs rely heavily on the use of spacer .gifs, a transparent image used to control blank
space within a table based web page. Having to create a series of custom sized transparent images to organize
your web page layout creates messy code and a rigid page structure that can’t be easily changed. CSS tableless
design eliminates this problem by using DIVs instead of tables which can be easily resized, positioned anywhere
on a page, or even dynamically manipulated through the use of scripting languages.

7. A common advantage of using CSS tableless web design is a reduction in web page file size which equates to
your web pages loading faster. When compared to a CSS tableless layout, a table based web page frequently
takes twice as long to load. Also, the amount of bandwidth you will save using a CSS tableless based approach,
especially as your website grows in size, can be vast resulting in a faster overall loading website while saving
you money.

8. Using CSS tableless web design makes your website more accessible by making content consumption and site
navigation easier for users. You’ll also do a much better job of accommodating those with visual impairments
and other disabilities. Screen readers, Braille devices, and special browsers for the impaired have fewer
problems with tableless designs because they can control the CSS file making font sizes larger, or even modify
the web page structure to make it easier to read.

9. CSS enables the web designer to attach multiple style sheets for different media types. If a potential
customer visits your site with her Blackberry or mobile phone, a different CSS style sheet is called which dictates
a completely different layout and styling for your entire website formatting it for optimal viewing on the small
screen of the device.

CSS tableless design is a great method for developing modern websites and offers many valuable advantages
over traditional table based design. Using CSS tableless design will provide your website visitors better usability
and accessibility, faster page load times with greater, more elegant design possibilities. For the web developer
and website owner, CSS tableless websites are easier and less expensive to redesign, update and maintain.
When given a choice, CSS tableless design will be the best option for most present day website designs.

Points:

The problem with using tables

 File sizes of your pages unnecessarily large

 This makes redesigns of existing sites and content extremely developer intensive
 Extremely hard to maintain Visual Consistency
 Much less accessible

Why CSS Tableless Designs Are Better

 Widely supported by modern browsers

 Allows extreme flexibility in positioning
 Redesigns are easier
 Increases usability by encouraging liquid design
 Keeps the HTML/text ratio at a low level thus decreasing load time
 Allows the display of main content first while the graphics load afterwards
 Increasing accessibility through CSS

Why using CSS in Web Design Layout is better than Table-based Layout?

 Web pages will load faster: No one likes waiting for web pages to load and if a page takes too long to
load, many users will often simply leave. Generally, CSS based page layouts require much less html coding
than table-based layouts. This usually results in the pages loading more quickly. Moreover, an externally
linked CSS file, once loaded the first time, does not have to be reloaded and re-read on every page. When
using CSS for layout, browsers can cache (keep in memory) all the formatting and stylizing for your pages
instead of having to read and interpret each style tag on every page. This can also result in much faster
page loading times!

 Visual consistency across pages: One of the strengths of using Cascading Style Sheets in a website
layout is that design elements can be defined in a single place (the CSS file) and will automatically be
applied to those elements on the website. No longer does each individual page have to be updated to reflect
the new style. This makes for much greater consistency throughout the site. With CSS, you do not have to
re-code every element on every page (and check and double check that you didn't miss some pages!),
styling updates are automatic and site-wide.

 Accessibility and usability: CSS allows for more interactive style elements, including font size and line
heights, which can make web pages more usable for people with disabilities. Web pages that use CSS
layouts are also often more compatible with more browsers. What's more, designers can create specific CSS
files specifically for printing, or mobile devices, as well as the standard computer screen, thereby making
websites truly multimedia applications.

 CSS is better for SEO: Since pages load faster with CSS Layouts, search engines can more easily crawl
through the site. Also, since there is often less coding on the pages and because CSS separates the design
elements from the content, it is easier for search engines to determine what a page is about and to index it
appropriately. Finally, search engine spiders rely heavily on structural organization (heading (h1, h2, h3,
etc.) tags) and CSS allows designers to design those elements as needed and to place them within the page
layout in a way that is most beneficial for search engine optimization.

 Future redesigns will be more efficient (read, less expensive!): Since CSS layouts separate design
elements from content, once a site has been designed using Cascading Style Sheets, making changes to the
design is often easier because fewer files need to be updated (often only the CSS files rather than every
page on the website!) This makes for faster and less expensive design changes in the future. Set your site
up using CSS now and you can have easier, more efficient and quicker updates in the future.