WEB APPLICATION DEVELOPMENT AND

SOFTWARE FRAMEWORKS

CSEN3071
Course Educational Objectives
 Design static web page using Markup languages.
 Design and implement web pages using style sheets.
 Implement with java script web applications with dynamic
web pages.
 Understand working of Web servers
 Develop web applications using frameworks.
UNIT 1:Introduction to Web Application Designing
 Introduction: Building a Web Application, Components –
Client Side, Server-side Components, 2 tier, n-tier
architectures, Networks, Protocols. MVC Pattern.
 HTML5: Basic syntax, HTML document structure, text
formatting, images, lists, links, tables, forms, frames.
Cascading Style Sheets (CSS3): Levels of style sheets, style
specification formats, selector forms, font properties, list
properties, colour properties, alignment of text, background
images, The Box Model.
UNIT 2:Client-Side Scripting
 JavaScript: Introduction, Functions, Arrays, DOM, Built-in
Objects, Regular Expression, Event handling, Validation,
Dynamic documents.
UNIT 3:XML, JSON
 Syntax of XML, document structure, and document type
definition, namespaces, XML schemas, document object
model, presenting XML using CSS, XSLT, XPath, XQuery,
FLOWR. JSON: Features, JSON vs. XML, JSON Data
Types, JSON Objects, JSON Arrays, JSON HTML.
UNIT 4:Server-side processing with Java
 Introduction to Servlet, Life cycle of Servlet, Servlet
methods, Java Server Pages.
 Working with tomcat webserver Database connectivity –
Servlets, JSP, JDBC, Practice of SQL Queries
UNIT 5:Web Application Frameworks
 Introduction to Web application development frameworks,
Types of Frameworks. ReactJS. Angular JS. Angular JS:
Introduction, Angular JS Expressions, Modules, Data
Binding, Controllers, DOM, Events, Forms, Validations.
 ReactJS: Introduction, components, Styling, Form
programming, Building and Deployment

 LAB Experiments:

 Design static web pages required for any online services web site.
 Apply Cascading Style Sheets to the Web pages.
 Design dynamic webpages using Java script.
 Write JavaScript to validate input fields
 Write an XML file to display various contents.
 Write a XSD to validate an XML file.
 Design a web application and deploy on Tomcat webserver
 Connect to a Database (MySQL/SQLServer/Oracle/MongoDB)
and create data and query data using JDBC
 Implement a Simple Application using JSON
 Develop a Complete Web Application for a simple case study
using ReactJS /AngularJS
 Course Outcomes:

 After successful completion of the course the student will be able to:

 Understand the fundamentals of web application development and

frameworks.

 Design interactive web pages with client and server side scripting

 Apply validations on user input using Javascript

 Compare and analyse XML and JSON documents.

 Create and deploy Web Applications over web server.

 What is A Web Application?

 Web application development describes the process of

designing, building, testing and deploying web-based
applications that will be installed on remote servers and
delivered to users or customers via the internet.
 Once a web application has been deployed on an application
server, users can access the application and its functions and
services using any web browser (Google Chrome, Mozilla
Firefox, Microsoft Edge, etc.)
 What is A Web Application?

 Web application development is the creation of application programs that reside on

remote servers and are delivered to the user’s device over the Internet.
 A web application (web app) does not need to be downloaded and is instead accessed
through a network. An end user can access a web application through a web browser
such as Google Chrome, Safari, or Mozilla Firefox.
 A majority of web applications can be written in JavaScript, Cascading Style Sheets
(CSS), and HTML5.
 Web application development will typically have a short development life-cycle lead by a
small development team. Front-end development for web applications is accomplished
through client-side programming.
 Client refers to a computer application such as a web browser.
 Client-side programming will typically utilize HTML, CSS and JavaScript. HTML
programming will instruct a browser how to display the on-screen content of web pages.
 CSS keeps displayed information in the correct format.
 JavaScript will run JavaScript code on a web page, making some of the content
interactive.
 What is A Web Application?

 A web application is an interactive program that runs on a

web server and is accessed through a web browser.
 A web app is built so that the user interface provides data
back to the development team that designed it. This data
offers insights into customer interests, usage, and preferences
that can prove invaluable to product and marketing
strategies.
 The data can also inform optimization and other client-
centered aspects of the mobile app or desktop applications.
 Application of Web application
 This sort of application development bodes well with every
industry, including;
 Education
 eCommerce
 Transportation
 Media
 Entertainment
 Banking
 What is A Web Application?

 A web application is software developed with a specific set of

technologies, and it works over the internet. It is an
application you use on your mobile, tablet, desktop, or
laptop without downloading anything.
 HTML
 CSS
 JavaScript
 JSP,PHP,ASP.NET,etc.
 Different Types of Web Applications

 Static Web Application looks the same to everyone who visits. It doesn't
update in real-time or store any information on you, the user.
 Dynamic Web Applicationslook different to different users, even though
they all share the same base code. They are updated in real-time and store
information about the users. They generally run scripts and CSS to achieve their
look.
 E-commerce Web Applications allow you to buy a product or make a
payment. They are generally built with PHP, Python, and Ruby on Rails.
 Multilingual Web Applications allows users to view multiple languages
corresponding to them simultaneously.
 Single-Page Web Applications act like a single webpage and can achieve
almost everything traditional web applications can do. Some examples are
Gmail and PayPal.
 Multiple-Page Web Application reloads the entire page whenever the user
switches to another one. Major examples include Facebook and Wikipedia.
 Server side vs Client Side
 In the world of web development, the terms "server-side"
and "client-side" refer to the location where certain tasks or
processes are carried out in a web application.
 Understanding the difference between these two types of
processes can help developers to choose the right approach
for a particular task or goal.
 By choosing the right mix of server-side and client-side
processes, developers can create web applications that are
efficient and effective, and that provide a good user
experience.
 What is server-side?

 Server-side refers to processes that are carried out on the

web server, where the website or web application is hosted.
 These processes are typically executed by the server before
the website or web application is delivered to the user's
device, and they can include tasks such as retrieving data
from a database, rendering a web page, or handling user
input.
 What is client-side?

 Client-side, on the other hand, refers to processes that are

carried out on the user's device, typically in the user's web
browser.
 These processes are executed after the website or web
application has been delivered to the user's device, and they
can include tasks such as rendering and displaying a web
page, handling user interactions, or running JavaScript code.
 Client-side vs. Server-side

 Client-side means that the processing takes place on the

user’s computer. It requires browsers to run the scripts on
the client machine without involving any processing on the
server.
 Server-side means that the processing takes place on a web
server.

 Differences between client-side and server-side

Client-side Server-side

Does not need interaction with the server Requires interaction with the server

Runs on the user’s computer Runs on the web server

Reduces load on the server’s proccessing Allows the server to provide dynamic
unit

Languages used: HTML, CSS, JavaScript websites tailored to the user. Increases the
processing load on server.

Languages used: PHP, ASP.net, Python

 What is N-Tier?
 An N-Tier Application program is one that is distributed
among three or more separate computers in a distributed
network.
 The most common form of n-tier is the 3-tier Application, and it
is classified into three categories.
 User interface programming in the user’s computer
 Business logic in a more centralized computer, and
 Required data in a computer that manages a database.
 This architecture model provides Software Developers to create
Reusable application/systems with maximum flexibility.
 In N-tier, “N” refers to a number of tiers or layers are being used
like – 2-tier, 3-tier or 4-tier, etc. It is also called “Multi-Tier
Architecture”.
 N-Tier Architecture
 The n-tier architecture is an industry-proven software
architecture model.
 It is suitable to support enterprise level client-server
applications by providing solutions to scalability, security,
fault tolerance, reusability, and maintainability.
 It helps developers to create flexible and reusable
applications.
N-Tier Architecture
 N-Tier Architecture
 These three layers can be further subdivided into different
sub-layers depending on the requirements.
 Some of the popular sites who have applied this architecture
are
 MakeMyTrip.com
 Sales Force enterprise application
 Indian Railways – IRCTC
 Amazon.com, etc.
 Types of N-Tier Architectures
 There are different types of N-Tier Architectures, like 3-tier
Architecture, 2-Tier Architecture and 1- Tier
Architecture.
 First, we will see 3-tier Architecture, which is very
important.
 3-Tier Architecture
 By looking at the below diagram, you can easily identify
that 3-tier architecture has three different layers.
 Presentation layer
 Business Logic layer
 Database layer
 2 tier architecture
 In a two-tier architecture, the client is on the first tier.The
database server and web application server reside on the
same server machine, which is the second tier.
 This second tier serves the data and executes the business
logic for the web application.
 2-Tier Architecture
 It is like Client-Server architecture, where communication
takes place between client and server.
 In this type of software architecture, the presentation layer or
user interface layer runs on the client side while dataset layer
gets executed and stored on server side.
 There is no Business logic layer or immediate layer in
between client and server.
 2-Tier Architecture
 Client-Server Architecture: It is an architecture model where the
client (one program) requests a service from a server (another
program) i.e. It is a request-response service provided over the internet
or through an intranet.In this model, Client will serve as one set of
program/code which executes a set of actions over the network.
While Server, on the other hand, is a set of another program, which
sends the result sets to the client system as requested.
 In this, client computer provides an interface to an end user to request a
service or a resource from a server and on the other hand server then
processes the request and displays the result to the end user.
 An example of Client-Server Model– an ATM machine. A bank is the server
for processing the application within the large customer databases and ATM
machine is the client having a user interface with some simple application
processing.
 Single Tier or 1-Tier Architecture
 It is the simplest one as it is equivalent to running the
application on the personal computer. All of the required
components for an application to run are on a single
application or server.
 Presentation layer, Business logic layer, and data layer are all
located on a single machine.
Application Protocols in Network

 There are several protocols which work for users in

Application Layer. Application layer protocols can be broadly
divided into two categories:
 Protocols which are used by users. For email for example,
eMail.
 Protocols which help and support protocols used by users.
For example DNS.
 Domain Name System
 The Domain Name System (DNS) works on Client Server
model.
 It uses UDP protocol for transport layer communication.
 DNS uses hierarchical domain based naming scheme.
 The DNS server is configured with Fully Qualified Domain
Names (FQDN) and email addresses mapped with their
respective Internet Protocol addresses.
 A DNS server is requested with FQDN and it responds back
with the IP address mapped with it. DNS uses UDP port 53.
 Hypertext Transfer Protocol (HTTP)
 Like FTP, HTTP is a file sharing protocol that runs over TCP/IP.
But HTTP primarily works over web browsers and is commonly
recognizable for most users. When a user enters a website domain
and aims to access it, HTTP provides the access. HTTP connects
to the domain's server and requests the site's HTML, which is the
code that structures and displays the page's design.
 Another form of HTTP is HTTPS, which stands for HTTP over
Secure Sockets Layer or HTTP Secure. HTTPS can encrypt a
user's HTTP requests and webpages. This provides more security
to users and can prevent common cybersecurity threats, such as
man-in-the-middle attacks.
 HTTP provides users with access to the various components of a
website's domain.
 Internet Protocol (IP)
 IP functions similarly to a postal service. When users send and
receive data from their device, the data gets spliced into packets.
Packets are like letters with two IP addresses: one for the sender
and one for the recipient.
 After the packet leaves the sender, it goes to a gateway, like a post
office, that directs it in the proper direction. Packets continue to
travel through gateways until they reach their destinations.
 IP is commonly paired with TCP to form TCP/IP, the overall
internet protocol suite. Together, IP sends packets to their
destinations, and TCP arranges the packets in the correct order, as
IP sometimes sends packets out of order to ensure the packets
travel the fastest ways
 Transmission Control Protocol (TCP)
 TCP is the other half of TCP/IP and arranges packets in
order so IP can deliver them. Specifically, TCP numbers
individual packets because IP can send packets to their
destinations through different routes and get them out of
order, so TCP amends this before IP delivers the packets.
 TCP also detects errors in the sending process -- including if
any packets are missing based on TCP's numbered system --
and requires IP to retransmit those packets before IP delivers
the data to its destination. Through this process, the TCP/IP
suite controls communication across the internet.
 User Datagram Protocol (UDP)
 UDP is an alternative to TCP and also works with IP to
transmit time-sensitive data. UDP enables low-latency data
transmissions between internet applications, making it ideal
for VoIP or other audio and video requirements.
 Unlike TCP, UDP doesn't wait for all packets to arrive or
organize the packets. Instead, UDP transmits all packets even
if some haven't arrived.
 UDP solely transmits packets, while TCP transmits,
organizes and ensures the packets arrive. While UDP works
more quickly than TCP, it's also less reliable.
 File Transfer Protocol
 The File Transfer Protocol (FTP) is the most widely used protocol
for file transfer over the network. FTP uses TCP/IP for
communication and it works on TCP port 21.
 FTP works on Client/Server Model where a client requests file
from Server and server sends requested resource back to the
client.
 FTP uses out-of-band controlling i.e. FTP uses TCP port 20 for
exchanging controlling information and the actual data is sent over
TCP port 21.
 The client requests the server for a file. When the server receives a
request for a file, it opens a TCP connection for the client and
transfers the file. After the transfer is complete, the server closes
the connection. For a second file, client requests again and the
server reopens a new TCP connection.
 MVC Architecture

 The Model-View-Controller (MVC) framework is an

architectural/design pattern that separates an application into
three main logical components Model, View, and Controller.
 Each architectural component is built to handle specific
development aspects of an application.
 It isolates the business logic and presentation layer from each
other. It was traditionally used for desktop graphical user
interfaces (GUIs).
 Nowadays, MVC is one of the most frequently used industry-
standard web development frameworks to create scalable and
extensible projects.
 It is also used for designing mobile apps.
 Components of MVC :

 The MVC framework includes the following 3 components:

 Controller
 Model
 View
 MVC Architecture

 Model View Controller or MVC as it is popularly called, is a

software design pattern for developing web applications.
 A Model View Controller pattern is made up of the following
three parts
 Model − The lowest level of the pattern which is
responsible for maintaining data.
 View − This is responsible for displaying all or a portion of
the data to the user.
 Controller − Software Code that controls the interactions
between the Model and View.
 −
MVC Architecture
 The Model

 The model is responsible for managing the data of the application.

 It responds to the request from the view and it also responds to
instructions from the controller to update itself.
 The Model component corresponds to all the data-related logic
that the user works with.
 This can represent either the data that is being transferred
between the View and Controller components or any other
business logic-related data.
 It can add or retrieve data from the database.
 It responds to the controller’s request because the controller can’t
interact with the database by itself.
 The model interacts with the database and gives the required data
back to the controller.
 The View

 It means presentation of data in a particular format, triggered

by a controller's decision to present the data.
 They are script-based templating systems like JSP, ASP, PHP
and very easy to integrate with AJAX technology.
 The View component is used for all the UI logic of the
application.
 It generates a user interface for the user.
 Views are created by the data which is collected by the model
component but these data aren’t taken directly but through
the controller.
 It only interacts with the controller.
 The Controller

 The controller is responsible for responding to the user input and

perform interactions on the data model objects.
 The controller receives the input, it validates the input and then
performs the business operation that modifies the state of the data
model.
 The controller is the component that enables the interconnection
between the views and the model so it acts as an intermediary.
 The controller doesn’t have to worry about handling data logic, it
just tells the model what to do.
 It processes all the business logic and incoming requests,
manipulates data using the Model component, and interact with
the View to render the final output.
 Features of MVC :

 It provides a clear separation of business logic, Ul logic,

and input logic.
 It offers full control over your HTML and URLs which
makes it easy to design web application architecture.
 It is a powerful URL-mapping component using which we
can build applications that have comprehensible and
searchable URLs.
 It supports Test Driven Development (TDD).
Working of the MVC framework with an example:
 Advantages of MVC:

 Codes are easy to maintain and they can be extended easily.

 The MVC model component can be tested separately.
 The components of MVC can be developed simultaneously.
 It reduces complexity by dividing an application into three
units. Model, view, and controller.
 It supports Test Driven Development (TDD).
 It works well for Web apps that are supported by large teams
of web designers and developers.
 This architecture helps to test components independently as
all classes and objects are independent of each other
 Search Engine Optimization (SEO) Friendly.
 Disadvantages of MVC:

 It is difficult to read, change, test, and reuse this model

 It is not suitable for building small applications.
 The inefficiency of data access in view.
 The framework navigation can be complex as it introduces
new layers of abstraction which requires users to adapt to the
decomposition criteria of MVC.
 Increased complexity and Inefficiency of data
 Popular MVC Frameworks:

 Some of the most popular and extensively used MVC frameworks

are listed below.
 Ruby on Rails
 Django
 CherryPy
 Spring MVC
 Catalyst
 Rails
 Zend Framework
 Fuel PHP
 Laravel
 Symphony
HTML
 Introduction
 HTML stands for HyperText Markup Language.
 It is used to design the web pages. With the help of HTML, you can creat
website structure.
 HTML is the combination of Hypertext and Markup language.
 Hypertext defines the link between the web pages and markup language
document within the tag that define the structure of web pages.
 HTML5 is the next major revision of the HTML standard superseding HT
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
content on the World Wide Web.
 HTML5 is a cooperation between the World Wide Web Consortium (W3
Hypertext Application Technology Working Group (WHATWG).
 The new standard incorporates features like video playback and drag-and
been previously dependent on third-party browser plug-ins such as Adob
Silverlight, and Google Gears.
What is HTML?
 HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 Hypertext refers to the way in which Web pages (HTML documents) a
Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you
simply "mark-up" a text document with tags that tell a Web browser how
display.
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table
 Browsers do not display the HTML tags, but use them to render the cont
What is HTML?
 HTML is an acronym which stands for Hyper Text Markup L
used for creating web pages and web applications. Let's see what
Hypertext Markup Language, and Web page.
 Hyper Text: HyperText simply means "Text within Text." A te
it, is a hypertext. Whenever you click on a link which brings you
webpage, you have clicked on a hypertext. HyperText is a way to
web pages (HTML documents) with each other.
 Markup language: A markup language is a computer languag
apply layout and formatting conventions to a text document. Ma
makes text more interactive and dynamic. It can turn text into im
links, etc.
 HTML History
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd

Edition
Tim Berners-Lee
New Features

 HTML5 introduces a number of new elements and attributes th

a modern website. Following are great features introduced in HT
 New Semantic Elements − These are like <header>, <foote
<section>.
 Forms 2.0 − Improvements to HTML web forms where new a
introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to t
 WebSocket − A a next-generation bidirectional communicatio
web applications.
 Server-Sent Events − HTML5 introduces events which flow
the web browsers and they are called Server-Sent Events (SSE).
New Features

 Canvas − This supports a two-dimensional drawing surface that

with JavaScript.
 Audio & Video − You can embed audio or video on your web
resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical
web application.
 Microdata − This lets you create your own vocabularies beyon
extend your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one location
on a the same webpage.
HTML Document Structure
HTML Document Structure

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Example Explained

 The <!DOCTYPE html declaration defines the documents to b

 The <html> element is the root element of an HTML page.
 The <head> element contains meta information about the doc
 The <title> element specifies a title for the document.
 The <body> element contains the visible page content.
 The <h1> element defines a large heading.
 The <p> element defines a paragraph.
HTML Comment Tags

 You can add comments to your HTML source by using the following syntax
 <!-- Write your comments here -->
 Notice that there is an exclamation point (!) in the opening tag, but not in th
 Note: Comments are not displayed by the browser, but they can help docum
source code.
 With comments you can place notifications and reminders in your HTML:
 Example
 <!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
 Comments are also great for debugging HTML, because you can comment o
code, one at a time, to search for errors:
HTML Tags

 HTML tags are element names surrounded by angle brackets:

 <tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end
 The end tag is written like the start tag, but with a forward sla
the tag name
HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="valu
Text Formatting Tags

 HTML Formatting is a process of formatting text for better lo

are many formatting tags in HTML.
 These tags are used to make text bold, italicized, or underlined.
 There are almost 12 options available that how text appears in H
XHTML.
Text Formatting Tags

Element name Description

<b> This is a physical tag, which

written between it.
<strong> This is a logical tag, which te
text is important.
<i> This is a physical tag which is
<em> This is a logical tag which is u
italic.
<mark> This tag is used to highlight te
<u> This tag is used to underline t
 Text Formatting Tags
Element name Description

<tt> This tag is used to appear a

supported in HTML5)
<strike> This tag is used to draw a striket
text. (Not supported in HTML5)
<sup> It displays the content slightly ab

<sub> It displays the content slightly be

<del> This tag is used to display the del

<ins> This tag displays the content whi
<big> This tag is used to increase t
conventional unit.
<small> This tag is used to decrease the
from base font size.
HTML Heading

 A HTML heading or HTML h tag can be defined as a title or a su

want to display on the webpage. When you place the text within
<h1>.........</h1>, it is displayed on the browser in the bold f
the text depends on the number of heading.
 There are six different HTML headings which are defined with t
tags, from highest level h1 (main heading) to the least level h6 (l
heading).
 h1 is the largest heading tag and h6 is the smallest one. So h1 is u
important heading and h6 is used for least important.
 <!DOCTYPE html>
 <html>
 <body>
 <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>
 </body>
 </html>
HTML Paragraph

 HTML paragraph or HTML p tag is used to define a paragraph i

take a simple example to see how it work. It is a notable point th
add an empty line before and after a paragraph. An HTML <p>
starting of new paragraph.
 A paragraph always starts on a new line, and browsers automatic
white space (a margin) before and after a paragraph.
 If you put a lot of spaces inside the HTML p tag, browser remov
extra line while displaying the page. The browser counts number
as a single one.
 <!DOCTYPE html>
 <html>
 <body>
 <p>This is first paragraph.</p>
 <p>This is second paragraph.</p>
 <p>This is third paragraph.</p>
 </body>
 </html>
HTML Horizontal Rules

 The <hr> tag defines a thematic break in an HTML page, and is

displayed as a horizontal rule.
 The <hr> element is used to separate content (or define a chan
page:
 The <hr> tag is an empty tag, which means that it has no end ta
 <!DOCTYPE html>
 <html>
 <body>
 <h1>This is heading 1</h1>
 <p>This is some text.</p>
 <hr>
 <h2>This is heading 2</h2>
 <p>This is some other text.</p>
 <hr>
 <h2>This is heading 2</h2>
 <p>This is some other text.</p>
 </body>
 </html>
How to Use <br> and <hr> tag with parag

 An HTML <br> tag is used for line break and it can be used wit
elements.
 An HTML <hr> tag is used to apply a horizontal line between t
two paragraphs
HTML Line Breaks

 The HTML <br> element defines a line break.

 Use <br> if you want a line break (a new line) without starting
 The <br> tag is an empty tag, which means that it has no end ta
 <!DOCTYPE html>
 <html>
 <body>
 <p>This is<br>a paragraph<br>with line breaks.</p>
 </body>
 </html>
HTML Image

 HTML img tag is used to display image on the web page.

 The HTML <img> tag is used to embed an image in a web page
 HTML img tag is an empty tag that contains attributes only, clos
used in HTML image element.
 Images are not technically inserted into a web page; images are l
pages.
 The <img> tag creates a holding space for the referenced image
 Attributes of HTML img tag
 The src and alt are important attributes of HTML img tag. All attributes of HTM
given below.
 1) src
 It is a necessary attribute that describes the source or path of the image. It instr
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.
attribute describe the image in words. The alt attribute is considered good for S
 3) width
 It is an optional attribute which is used to specify the width to display the imag
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,
elements. It is not recommended now. You should apply CSS in place of heigh
HTML img tag Example
 <!DOCTYPE html>
<html>
<head>
<title>GITAM University</title>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width=“200" height
</body>
</html>
HTML Links

 HTML links are hyperlinks.

 The HTML anchor tag defines a hyperlink that links one page to
 It can create hyperlink to other web page as well as files, location
"href" attribute is the most important attribute of the HTML a t
to destination page or URL.
 href attribute of HTML anchor tag
 The href attribute is used to define the address of the file to be li
words, it points out the destination page.
 The HTML <a> tag defines a hyperlink. It has the following syn
 <a href="url">link text</a>
HTML Links

 The most important attribute of the <a> element is the href att
indicates the link's destination.
 The link text is the part that will be visible to the reader.
 Clicking on the link text, will send the reader to the specified U
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Links

 HTML Links - The target Attribute

 By default, the linked page will be displayed in the current brow
change this, you must specify another target for the link.
 The target attribute specifies where to open the linked documen
 The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
HTML Links Example

 <!DOCTYPE html>
 <html>
 <head>
 <title>GITAM</title>
 </head>
 <body>
 <p>Click on <a href="https://www.gitam.edu" target="_bl
UNiversity </a>to go on home page of GITAM University.</
 </body>
 </html>
HTML Lists

 HTML Lists are used to specify lists of information. All lists may
more list elements.
 There are three different types of HTML lists:
 Ordered List or Numbered List (ol)
 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)
HTML Ordered List or Numbered List

 in the ordered HTML lists, all the list items are marked with nu
 It is known as numbered list also.
 The ordered list starts with <ol> tag and the list items start wit
 <ol>
 <li>Aries</li>
 <li>Bingo</li>
 <li>Leo</li>
 <li>Oracle</li>
 </ol>
HTML Ordered List or Numbered List
 Numeric Number (1, 2, 3)
 Capital Roman Number (I II III)
 Small Romal Number (i ii iii)
 Capital Alphabet (A B C)
 Small Alphabet (a b c)
 HTML Ordered List or Numbered List
To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description

Type "1" This is the default type. In this

numbered with numbers.
Type "I" In this type, the list items are
case roman numbers.
Type "i" In this type, the list items are
case roman numbers.
Type "A" In this type, the list items are
case letters.
Type "a" In this type, the list items are
case letters.
HTML Ordered List or Numbered List
 start attribute
 The start attribute is used with ol tag to specify from where to s
 <ol type="1" start="5"> : It will show numeric values star
 <ol type="A" start="5"> : It will show capital alphabets st
 <ol type="a" start="5"> : It will show lower case alphabet
 <ol type="I" start="5"> : It will show Roman upper case v
"V".
 <ol type="i" start="5"> : It will show Roman lower case v
"v".
 <ol type="i" start="5">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
 </ol>
HTML Ordered List or Numbered List
 reversed Attribute:
 This is a Boolean attribute of HTML <ol> tag, and it is new in HTML
the reversed attribute with tag then it will numbered the list in descen
4......1).
 <ol reversed>
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
 </ol>

HTML Unordered List or Bulleted List

 In HTML Unordered list, all the list items are marked with bulle
 It is also known as bulleted list also.
 The Unordered list starts with <ul> tag and list items start with
 <ul>
 <li>Aries</li>
 <li>Bingo</li>
 <li>Leo</li>
 <li>Oracle</li>
 </ul>
HTML Unordered List or Bulleted List

 There can be 4 types of bulleted list:

 disc
 circle
 square
 none
HTML Unordered List or Bulleted List

Type Description

Type "disc" This is the default style. In th

marked with bullets.
Type "circle" In this style, the list items are
Type "square" In this style, the list items are
Type "none" In this style, the list items are
HTML Unordered List or Bulleted List

 <ul>
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
 </ul>
HTML Description List or Definition List

 HTML Description list is also a list style which is supported by HTML

also known as definition list where entries are listed like a dictionary
 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list, the <dt> tag defines the te
the <dd> tag describes each term:
 The definition list is very appropriate when you want to present gloss
other name-value list.
 The HTML definition list contains following three tags:
 <dl> tag defines the start of the list.
 <dt> tag defines a term.
 <dd> tag defines the term definition (description).
HTML Description List or Definition List

 <dl>
 <dt>HTML</dt>
 <dd>HTML to define the content of web pages.</dd>
 <dt>CSS</dt>
 <dd>CSS describes how HTML elements should be displayed
 <dt>Javascript</dt>
 <dd>JavaScript to program the behavior of web pages.</dd
 <dt>JSP</dt>
 <dd>JSP is a technology to build dynamic web applications.<
 </dl>
HTML Tables

 HTML <table> tag is used to display data in tabular form (ro

There can be many columns in a row.
 We can create a table to display data in tabular form, using <tab
the help of <tr> , <td>, and <th> elements.
 In Each table, table row is defined by <tr> tag, table header is d
and table data is defined by <td> tags.
 HTML tables are used to manage the layout of the page e.g. head
navigation bar, body content, footer section etc. But it is recomm
tag over table to manage the layout of the page .
 HTML Table Tags

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 m
for formatting.
<col> It is used with <colgroup> elem
properties for each column.
<tbody> It is used to group the body cont
<thead> It is used to group the header co
<tfooter> It is used to group the footer con
HTML Table Example

 <table>
 <tr><th>First_Name</th><th>Last_Name</th><th>M
 <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td><
 <tr><td>James</td><td>William</td><td>80</td>
 <tr><td>Swati</td><td>Sironi</td><td>82</td></
 <tr><td>Chetna</td><td>Singh</td><td>72</td><
 </table>
HTML Table Example
 HTML Table with Border
 By border attribute of table in HTML
 <table border="1">
 <tr><th>First_Name</th><th>Last_Name</th><th>M
>
 <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td><
 <tr><td>James</td><td>William</td><td>80</td>
 <tr><td>Swati</td><td>Sironi</td><td>82</td></
 <tr><td>Chetna</td><td>Singh</td><td>72</td><
 </table>
HTML Table Attributes
 Align − Visual alignment.
 Border- Specifies the border width. A value of "0" means no border.
 width
 Bgcolor- Specifies the background color of the table.
 Cellpadding -Specifies the space between the cell borders and their co
 Cellspacing- Specifies the space between cells.
 Colspan- Colspan is an attribute which assigns multiple columns to a
 Rowspan- Rowspan in table, works similar to the clospan for columns
assign multiple rows to a cell
 Width –specifies the width of the table
 Height- Specifies the height of the table
 <html>
 <head><title>GITAM Time Table</title>
 </head>
 <body>
 <table border="1" width="500" height="500" align="center" bgcolor="red" cellspacing=
>
 <caption>TIME TABLE</caption>
 <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
 <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
 <tr><td>James</td><td>William</td><td>80</td></tr>
 <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
 <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
 </table>
 </body>
 </html>
HTML <video> Tag

 HTML 5 supports <video> tag also.

 The HTML video tag is used for streaming video files such as a m
clip on the web page.
 Currently, there are three video formats supported for HTML v
 mp4
 webM
 ogg
 <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attribute Value Description
autoplay autoplay Specifies that the video will start play

controls controls Specifies that video controls should b

play/pause button etc).

height pixels Sets the height of the video player

loop loop Specifies that the video will start ove
finished
muted muted Specifies that the audio output of the

poster URL Specifies an image to be shown while

downloading, or until the user hits th

preload auto Specifies if and how the author thinks

metadata loaded when the page loads
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
HTML Audio Tag

 HTML audio tag is used to define sounds such as music and o

Currently there are three supported file format for HTML 5 aud
 mp3
 wav
 ogg
 HTML5 supports <video> and <audio> controls. The Flash, Si
similar technologies are used to play the multimedia items.
HTML Audio Tag

 <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
HTML Audio Tag

 The <audio> tag is used to embed sound content in a documen

other audio streams.
 The <audio> tag contains one or more <source> tags with diff
HTML Audio Tag Attributes
Attribute Description

controls It defines the audio controls

play/pause buttons.
autoplay It specifies that the audio wi
it is ready.
loop It specifies that the audio f
every time when it is comple
muted It is used to mute the audio o
preload It specifies the author view t
the page loads.
src It specifies the source URL of
HTML Form

 The HTML <form> element is used to create an HTML form f

 An HTML form is a section of a document which contains contro
fields, password fields, checkboxes, radio buttons, submit button
 An HTML form facilitates the user to enter data that is to be sen
processing such as name, email address, password, phone numbe
 The <form> element is a container for different types of input
text fields, checkboxes,radio buttons, submit buttons, etc.
 HTML Form

The <form> tag is used to create an HTML form for use

The <form> element can contain one or more of the fo
elements:
•<input>
•<textarea>
•<button>
•<select>
•<option>
•<optgroup>
•<fieldset>
•<label>
•<output>
Why use HTML Form

 HTML forms are required if you want to collect some data from
 For example: If a user want to purchase some items on internet,
the form such as shipping address and credit/debit card details s
sent to the given address.
HTML Form Syntax

 <form>
.
form elements
.
</form>
 Attributes
Attribute Value Description
accept-charset character_set Specifies the character encod
for the form submission
action URL Specifies where to send the fo
is submitted
autocomplete on Specifies whether a form sho
off on or off
enctype application/x-www-form-urlencoded Specifies how the form-data
multipart/form-data when submitting it to the ser
text/plain method="post")
method get Specifies the HTTP method t
post form-data
name text Specifies the name of a form
novalidate novalidate Specifies that the form should
when submitted
target _blank Specifies where to display the
_self received after submitting the
 HTML Form Tags

Tag Description

<form> It defines an HTML form to enter inputs by the u

<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-do

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.
The <input> Element

 The <input> tag specifies an input field where the user can ente
 The HTML <input> element is the most used form element.
 An <input> element can be displayed in many ways, depending
attribute.
The <input> Element

•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
The <input> Element

•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
 The <input> Element

•<input type="tel">
•<input type="text"> (default v
•<input type="time">
•<input type="url">
•<input type="week">
<input> Tag Attributes
Attribute Value Description
accept file_extension Specifies a filter for what file
audio/* the file input dialog box (only
video/*
image/*
media_type
alt text Specifies an alternate text for
type="image")
autocomplete on Specifies whether an <input>
off autocomplete enabled

autofocus autofocus Specifies that an <input> ele

get focus when the page loads

checked checked Specifies that an <input> ele

when the page loads (for type
type="radio")
<input> Tag Attributes
Attribute Value Description

disabled disabled Specifies that an <input> e

form form_id Specifies the form the <inp

formaction URL Specifies the URL of the fil

control when the form is su
type="submit" and type="
formenctype application/x-www-form- Specifies how the form-dat
urlencoded submitting it to the server (
multipart/form-data type="image")
text/plain
formmethod get Defines the HTTP method
post action URL (for type="sub
<input> Tag Attributes
Attribute Value Description
formnovalidate formnovalidate Defines that form elements sh
submitted
height pixels Specifies the height of an <inp
type="image")
list datalist_id Refers to a <datalist> elemen
options for an <input> eleme
max number Specifies the maximum value
date
maxlength number Specifies the maximum numb
an <input> element
min number Specifies a minimum value for
date
minlength number Specifies the minimum numbe
an <input> element
<input> Tag Attributes
Attribute Value Descriptio
multiple multiple Specifies tha
than one val
name text Specifies the
element
pattern regexp Specifies a r
<input> ele
against
placeholder text Specifies a s
expected va
<input> Tag Attributes
x
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled ou
form
size number Specifies the width, in characters, of an <inp
src URL Specifies the URL of the image to use as a su
type="image")
step number Specifies the interval between legal numbers
any
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled ou
form
size number Specifies the width, in characters, of an <inp
src URL Specifies the URL of the image to use as a su
HTML <select> Tag

 The <select> element is used to create a drop-down list.

 The <select> element is most often used in a form, to collect u
 The name attribute is needed to reference the form data after th
submitted (if you omit the name attribute, no data from the dro
submitted).
 The id attribute is needed to associate the drop-down list with a
 The <option> tags inside the <select> element define the avail
drop-down list.
 Tip: Always add the <label> tag for best accessibility practices!
 <select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML <frame> tag (Not supported in HTM

 HTML <frame> tag define the particular area within an HTML

HTML web page can be displayed.
 A <frame> tag is used with <frameset>, and it divides a webpa
sections or frames, and each frame can contain different web pag
 HTML frames are used to divide your browser window into mu
where each section can load a separate HTML document.
 A collection of frames in the browser window is known as a fram
 The window is divided into frames in a similar way the tables are
rows and columns.
Attributes of <frame> tag
 src: is implemented for fetching the HTML file that needs to be loaded in o
takes the value as filename.html or filename.htm within double-quotes.
 name: facilitates you in giving a name to your frame, and hence you can indi
you are supposed to load into your page.
 frameborder: is used for specifying if the borders are being shown in the fra
you can assign values either: 1 (yes) or 0 (no) for it.
 marginwidth: facilitates specifying the frame borders width spacing on the l
takes the value in pixels.
 marginheight: facilitates specifying the frame borders height spacing on top
also takes the value in pixels.
 noresize: It is generally possible to resize your frame by clicking and draggin
But this attribute helps users stop resizing the frames. It is written somethin
like: noresize="noresize".
 scrolling: is used for activating and deactivating the scroll-bar appearance in
either yes, no, or auto as values to be assigned to it within double-quotes.
HTML <frameset> tag (Not supported in H

 HTML <frameset> tag is used to contain the group of frames w

controlled and styled as a unit.
 The <frameset> element also specifies the number of rows and
frameset, and how much space they will occupy in a frame.
 Syntax
 <frameset cols=" ">............</frameset>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Frame tag</title>
 </head>
 <frameset cols=“40%,60%">
 <frame src=“first.html">
 <frame src=“second.html">
 </frameset>
 </html>
Attribute

Attribute Value Description

cols Pixels It specifies the number and

% the frameset. (Not Supporte
*
rows Pixels It specifies the number and
% in the frameset. (Not Suppo
*
CSS
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of
multiple web pages all at once
 External style sheets are stored in CSS files
Why Use CSS?

 CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices
and screen sizes.
Advantages of CSS

 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.
Advantages of CSS

 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.
 Offline Browsing − CSS can store web applications locally with the
help of an offline catche.Using of this, we can view offline websites. The
cache also ensures faster loading and better overall performance of the
website.
 Platform Independence − The Script offer consistent platform
independence and can support latest browsers as well.
Who Creates and Maintains CSS?

 CSS was invented by Håkon Wium Lie on October 10,

1994 and maintained through a group of people within the
W3C called the CSS Working Group.
 The CSS Working Group creates documents called
specifications. When a specification has been discussed and
officially ratified by W3C members, it becomes a
recommendation
CSS Versions

 Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a

recommendation in December 1996. This version describes the
CSS language as well as a simple visual formatting model for all
the HTML tags.
 CSS2 was became a W3C recommendation in May 1998 and
builds on CSS1. This version adds support for media-specific style
sheets e.g. printers and aural devices, downloadable fonts, element
positioning and tables.
 CSS3 was became a W3C recommendation in June 1999 and
builds on older versions CSS. it has divided into documentations is
called as Modules and here each module having new extension
features defined in CSS2.
CSS3 Modules

 CSS3 Modules are having old CSS specifications as well as

extension features.
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface
CSS Style Rules

 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.
CSS Syntax

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated
by semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
 A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
The Type Selectors

The Universal Selectors

 Rather than selecting elements of a specific type, the
universal selector quite simply matches the name of any
element type −
 *{
 color: #000000;
 }
The Type Selectors

The Descendant Selectors

 Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element. As
given in the following example, style rule will apply to
<em> element only when it lies inside <ul> tag.
 ul em {
 color: #000000;
 }
The Type Selectors
The Class Selectors
 The class selector selects elements with a specific class
attribute.
 To select elements with a specific class, write a period (.)
character, followed by the name of the class.
 In the example below, all HTML elements with
class="center" will be red and center-aligned:
 .black {
 color: #000000;
 }
The Type Selectors

The ID Selectors
 The id selector uses the id attribute of an HTML element to
select a specific element.
 The id of an element should be unique within a page, so the
id selector is used to select one unique element!
 To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
 #black {
 color: #000000;
 }
The Type Selectors

The Child Selectors

 There is one more type of selector, which is very similar to
descendants but have different functionality. Consider the
following example −
 body > p {
 color: #000000;
 }
The Attribute Selectors
 You can also apply styles to HTML elements with particular
attributes. The style rule below will match all the input
elements having a type attribute with a value of text −
 input[type = "text"]{
 color: #000000;
 }
Grouping Selectors
 You can apply a style to many selectors if you like. Just separate
the selectors with a comma, as given in the following example −
 h1, h2, h3 {
 color: #36C;
 font-weight: normal;
 letter-spacing: .4em;
 margin-bottom: 1em;
 text-transform: lowercase;
 }
CSS Comments

 Comments are used to explain the code, and may help when you edit
the source code at a later date.
 Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */. Comments can also
span multiple lines:
 Example
 p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Levels of Stylesheets
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
 When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
External Style Sheet

 With an external style sheet, you can change the look of an

entire website by changing just one file!
 Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element
goes inside the <head> section:
 Example
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 An external style sheet can be written in any text editor.
 The file should not contain any html tags.
 The style sheet file must be saved with a .css extension.
 Here is how the "mystyle.css" looks:
 body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
 An internal style sheet may be used if one single page has a unique style.
 Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
 Example
 <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles

 An inline style may be used to apply a unique style for a

single element.
 To use inline styles, add the style attribute to the relevant
element.
 The style attribute can contain any CSS property.
 The example below shows how to change the color and the
left margin of a <h1> element:
 Example
 <h1 style="color:blue;margin-left:30px;">This is a
heading</h1>
Cascading Order
 Generally speaking we can say that all the styles will "cascade"
into a new "virtual" style sheet by the following rules, where
number one has the highest priority:
 Inline style (inside an HTML element)
 External and internal style sheets (in the head section)
 Browser default
 So, an inline style (inside a specific HTML element) has the
highest priority, which means that it will override a style defined
inside the <head> tag, or in an external style sheet, or a browser
default value.
 There are four ways to associate styles with your HTML
document. Most commonly used methods are inline CSS and
External CSS.
CSS Colors Properties

 Color Names
 In HTML, a color can be specified by using a color name:
 Color Values
 In HTML, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values:
 RGB Value
 In HTML, a color can be specified as an RGB value, using this
formula:
 rgb(red, green, blue)
 rgb(255, 0, 0) is displayed as red
 HEX Value
 In HTML, a color can be specified using a hexadecimal value
in the form:
 #rrggbb
 Where rr (red), gg (green) and bb (blue) are hexadecimal
values between 00 and ff (same as decimal 0-255).
 For example, #ff0000 is displayed as red, because red is set
to its highest value (ff) and the others are set to the lowest
value (00).
 HSL Value
 In HTML, a color can be specified using hue, saturation, and
lightness (HSL) in the form:
 hsl(hue, saturation, lightness)
 Hue is a degree on the color wheel from 0 to 360. 0 is red,
120 is green, and 240 is blue.
 Saturation is a percentage value, 0% means a shade of gray,
and 100% is the full color.
 Lightness is also a percentage, 0% is black, 50% is neither
light or dark, 100% is white
 RGBA Value
 RGBA color values are an extension of RGB color values
with an alpha channel - which specifies the opacity for a
color.
 An RGBA color value is specified with:
 rgba(red, green, blue, alpha)
 The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):
 HSLA Value
 HSLA color values are an extension of HSL color values with
an alpha channel - which specifies the opacity for a color.
 An HSLA color value is specified with:
 hsla(hue, saturation, lightness, alpha)
 The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):
 Example
 hsla(9, 100%, 64%, 0)
 CSS Text Properties

CSS Text Property Description values

color The color property can be applied to set the color in Blue, #ff0000,
your text. rgb(255,0,0)

direction The direction property can be applied to set the rtl. ltr
direction of your text.

letter-spacing The letter-spacing property can be applied to add or normal, length

subtract space between letters, which will form a word.

text-decoration The text-decoration property can be applied for None, line-through,

underlining, overlining, and strikethrough text. overline, underline

text-shadow The text-shadow property can be applied for setting the

text-shadow on your text.
 CSS Text Properties
CSS Text values
Description
Property
text-transform The text-transform property can be applied to capitalize Uppercase, lowercase,
text or convert text to uppercase or lowercase letters. capitalize
word-spacing The word-spacing property can be applied to add or
subtract space between different words in your sentence.

text-indent The text-indent property can be applied to indent the

text of your paragraph.

text-align The text-align property can be applied to align text in left;,right,center or justify
your document.
white-space The white-space property can be applied to control flow,
as well as to the formatting of your text.

line-height The line-height property is applied to assign space normal, number, length, %
between lines:
CSS Text Properties

 Text Color
 The color property is used to set the color of the text. The
color is specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 Text Alignment
 The text-align property is used to set the horizontal
alignment of a text.
 A text can be left or right aligned, centered, or justified.
 Text Decoration
 The text-decoration property is used to set or remove
decorations from text.
 The value text-decoration: none; is often used to remove
underlines from links:
CSS Fonts Properties

 The CSS font properties define the font family, boldness, size,
and the style of a text.
Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text Times New Roman, Times,
serif, Arial, sans-serif
font-size Specifies the font size of text

font-style The font- Normal, italic, oblique

Specifies the font style for text,
style property is mostly used to specify
italic text
font-variant Specifies whether or not a text should be Normal, small-caps
displayed in a small-caps font

font-weight Specifies the weight of a font Normal, bold

CSS Backgrounds Properties

 The CSS background properties are used to define the

background effects for elements.
Property Description value
background Sets all the background properties in one background-color
declaration background-image
background-repeat
background-attachment
background-position

background-attachment Sets whether a background image is fixed or Scroll, fixed, local, initial, inherit
scrolls with the rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element url('URL')

background-position Sets the starting position of a background left top,left center,left bottom,
image right top,right center,right bottom,
center top,center center,
center bottom
background-repeat Sets how a background image will be repeat-x, repeat-y, no-repeat
repeated
CSS Border Properties

 The CSS border properties allow you to specify the style, width,
and color of an element's border.
 Border-style
 The border-style property specifies what kind of border to display.
 Border -width
 The border-width property specifies the width of the four
borders.
 Border -color
 The border-color property is used to set the color of the four
borders.
 Border-radius
 The border-radius property is used to add rounded borders to an
element:
CSS Margins
 The CSS margin properties are used to create space around
elements, outside of any defined borders.
 CSS has properties for specifying the margin for each side of
an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
CSS Padding

 The CSS padding properties are used to generate space

around an element's content, inside of any defined borders.
 CSS has properties for specifying the padding for each side of
an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
The CSS Box Model

 In CSS, the term "box model" is used when talking about design
and layout.
 The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content. The image below illustrates the box model:
 Explanation of the different parts:
 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is
transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is
transparent
The CSS Box Model

 The box model allows us to add a border around elements,

and to define space between elements.
CSS Lists Properties

 The CSS list properties allow you to:

 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
 The list-style-type property specifies the type of list item
marker.
 The list-style-image property specifies an image as the list item
marker:
 The list-style-position property specifies whether the list-item
markers should appear inside or outside the content flow:
CSS Lists Properties

Property Description

list-style Sets all the properties for a list in one

declaration

list-style-image Specifies an image as the list-item marker

list-style-position Specifies if the list-item markers should

appear inside or outside the content flow

list-style-type Specifies the type of list-item marker

CSS Tables roperties
 The border-collapse property sets whether the table borders
should be collapsed into a single border:
 table {
border-collapse: collapse;
}
For zebra-striped tables, use the nth-child() selector and add
a background-color to all even (or odd) table rows:
 tr:nth-child(even) {background-color: #f2f2f2;}
 The empty-cells property sets whether or not to display borders
on empty cells in a table.
 table {
empty-cells: hide;
}
CSS Tables properties
Property Description

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be

collapsed

border-spacing Specifies the distance between the borders of

adjacent cells

caption-side Specifies the placement of a table caption

empty-cells Specifies whether or not to display borders and

background on empty cells in a table

table-layout Sets the layout algorithm to be used for a table

CSS Links Properties

 links can be styled differently depending on what state they

are in.
 The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
 Example
 /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
CSS Layout - The display Property

 The display property is the most important CSS property for

controlling layout.
 The display property specifies if/how an element is
displayed.
 Every HTML element has a default display value depending
on what type of element it is. The default display value for
most elements is block or inline.
 Block-level Elements
 A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
 The <div> element is a block-level element.
 Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
 Inline Elements
 An inline element does not start on a new line and only takes up as
much width as necessary.
 This is an inline <span> element inside a paragraph.
 Examples of inline elements:
 <span>
 <a>
 <img>
 display: none; is commonly used with JavaScript to hide and
show elements without deleting and recreating them. Take a look
at our last example on this page if you want to know how this can
be achieved.
CSS Layout - The position Property

 The position property specifies the type of positioning method

used for an element (static, relative, fixed, absolute or sticky).
 The position property specifies the type of positioning method
used for an element.
 There are five different position values:
 static
 relative
 fixed
 absolute
 sticky

 div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div.relative {
 position: relative;
 width: 400px;
 height: 200px;
 border: 3px solid #73AD21;
 }
 div.absolute {
 position: absolute;
 top: 80px;
 right: 0;
 width: 200px;
 height: 100px;
 border: 3px solid #73AD21;
 }
 </style>
 </head>
 <body>
 <h2>position: absolute;</h2>
 <p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed):</p>
 <div class="relative">This div element has position: relative;
 <div class="absolute">This div element has position: absolute;</div>
 </div>
 </body>
 </html>
CSS Layout - float and clear

 The CSS float property specifies how an element should float.

 The CSS clear property specifies what elements can float beside
the cleared element and on which side.
 The float property is used for positioning and formatting content
e.g. let an image float left to the text in a container.
 The float property can have one of the following values:
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it
occurs in the text). This is default
 inherit - The element inherits the float value of its parent
 !DOCTYPE html>
 <html>
 <head>
 <style>
 img {
 float: right;
 }
 </style>
 </head>
 <body>
 <h2>Float Right</h2>
 <p>In this example, the image will float to the right in the paragraph, and the text in the paragraph
will wrap around the image.</p>
 <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-
left:15px;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante
ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris
quis diam velit.</p>
 </body>
 </html>
CSS Layout - The z-index Property

 The z-index property specifies the stack order of an element

 When elements are positioned, they can overlap other
elements.
 The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the
others).
 An element can have a positive or negative stack order:

.
 img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 img {
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: -1;
 }
 </style>
 </head>
 <body>
 <h1>This is a heading</h1>
 <img src="img_tree.png">
 <p>Because the image has a z-index of -1, it will be placed behind the
text.</p>
 </body>
 </html>