UNIT I

INTRODUCTION TO CSS and JAVASCRIPT

Introduction to Web: Server - Client - Communication Protocol (HTTP) – Structure of HTML Documents
– Basic Markup tags – Working with Text and Images with CSS– CSS Selectors – CSS Flexbox -
JavaScript: Data Types and Variables - Functions - Events – AJAX: GET and POST.

Introduction to Web

Web consists of billions of clients and server connected through wires and wireless networks. The web
clients make requests to web server. The web server receives the request, finds the resources and return
the response to the client. When a server answers a request, it usually sends some type of content to the
client. The client uses web browser to send request to the server. The server often sends response to the
browser with a set of instructions written in HTML(HyperText Markup Language). All browsers know
how to display HTML page to the client.

Web Application

A website is a collection of static files(webpages) such as HTML pages, images, graphics etc. A Web
application is a web site with dynamic functionality on the server. Google, Facebook, Twitter are
examples of web applications.

Server - Client - Communication Protocol (HTTP)

HTTP is abbreviated as Hypertext Transfer Protocol, an application layer protocol used primarily with the
WWW (World Wide Web) in the client-server model where a web browser is a client communicating
with the webserver which is hosting the website. Since 1990, this has become the foundation for data
communication. HTTP is a standard and stateless protocol that is used for different purposes as well using
extensions for request methods, error codes, as well as headers.

HTTP is a communication protocol which is employed for delivering data (usually HTML files,
multimedia files, etc.) on the World Wide Web through its default TCP port 80. However, there are other
ports also which can be implemented for this function. HTTP has two different versions, HTTP/1.0,

1
which is the old one and the newest HTTP/1.1. In its older version, a separate connection was required. In
the case of a new version, the same connection can be recycled several times.

Steps Involved in HTTP Request

A necessary HTTP request has the following steps:

Initially, a link to the HTTP server gets opened.

Then a request is sent.

It does some processing on the server.

Once the request processing is done, the response is sent back from the server.

Finally, the connection is closed.

Architecture of HTTP

The basic block diagram of web application architecture which makes use of HTTP in it.

The HTTP is meant for request/response depending on a client-server architecture where the user requests
information through a web browser to the web server, which then responds to the requested data.

Web Client: The client of this client-server architecture asks for a request to a specific server through the
HTTP (TCP/IP connection) as a request method in the form of a URL. It also contains a MIME-like
message that contains request modifier and client information.

Web Server: This accepts the request and process with a response by a status line, together with the
version of the message's protocol as well as the success or error code, followed by a MIME-like message
having server information, some metadata, and possible the entity-body content holding the requested
information.

Features of HTTP

HTTP is connectionless: An HTTP request is initiated by the browser (HTTP client) as per the user's
request for information. The server will process the request and launch back with a response which the
client waits for.

HTTP is simple: HTTP/2 does the encapsulation of HTTP messages into frames; i.e., HTTP is typically
designed to be plain and human-readable.

HTTP is extensible/customized: HTTP can be integrated with new functionality by providing a simple
agreement between a client and a server.
2
HTTP is stateless, but not sessionless: HTTP is stateless, which means there is no connection among
two requests being consecutively carried out on the same connection. However, when the core of HTTP is
itself a stateless one, HTTP cookies provide in making use of stateful sessions. Through the concept of
header extensibility, HTTP cookies can be incorporated into the workflow, making session creation on
each HTTP request for sharing the same content.

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative,
hypermedia information systems. This is the foundation for data communication for the World Wide Web
(i.e. internet) since 1990. HTTP is a generic and stateless protocol which can be used for other purposes
as well using extensions of its request methods, error codes, and headers.

Basically, HTTP is a TCP/IP based communication protocol, that is used to deliver data (HTML files,
image files, query results, etc.) on the World Wide Web. The default port is TCP 80, but other ports can
be used as well. It provides a standardized way for computers to communicate with each other. HTTP
specification specifies how clients' request data will be constructed and sent to the server, and how the
servers respond to these requests.

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.

HTTP/1.0 uses a new connection for each request/response exchange, where as HTTP/1.1 connection
may be used for one or more request/response exchanges.

Basic Architecture

The following diagram shows a very basic architecture of a web application and depicts where HTTP sits:

3
The HTTP protocol is a request/response protocol based on the client/server based architecture where
web browsers, robots and search engines, etc. act like HTTP clients, and the Web server acts as a server.

Client

The HTTP client sends a request to the server in the form of a request method, URI, and protocol version,
followed by a MIME-like message containing request modifiers, client information, and possible body
content over a TCP/IP connection.

Server

The HTTP server responds with a status line, including the message's protocol version and a success or
error code, followed by a MIME-like message containing server information, entity meta information,
and possible entity-body content.

HTTP (Hypertext Transfer Protocol)

HTTP is a protocol that clients and servers use on the web to communicate.

It is similar to other internet protocols such as SMTP(Simple Mail Transfer Protocol) and FTP(File
Transfer Protocol) but there is one fundamental difference.

HTTP is a stateless protocol i.e HTTP supports only one request per connection. This means that with
HTTP the clients connect to the server to send one request and then disconnects. This mechanism allows
more users to connect to a given server over a period of time.

The client sends an HTTP request and the server answers with an HTML page to the client, using HTTP.

4
HTTP Methods

HTTP request can be made using a variety of methods, but the ones you will use most often
are Get and Post. The method name tells the server the kind of request that is being made, and how the
rest of the message will be formatted.

HTTP Methods and Descriptions :

Method Name Description

OPTIONS Request for communication options that are available on the request/response chain.

GET Request to retrieve information from server using a given URI.

Identical to GET except that it does not return a message-body, only the headers and
HEAD
status line.

POST Request for server to accept the entity enclosed in the body of HTTP method.

DELETE Request for the Server to delete the resource.

CONNECT Reserved for use with a proxy that can switch to being a tunnel.

This is same as POST, but POST is used to create, PUT can be used to create as
PUT well as update. It replaces all current representations of the target resource with the
uploaded content.

Difference between GET and POST requests

GET Request POST Request

Data is sent in header to the server Data is sent in the request body

Get request can send only limited amount of data Large amount of data can be sent.

Get request is not secured because data is exposed Post request is secured because
in URL data is not exposed in URL.

Get request can be bookmarked and is more Post request cannot be

efficient. bookmarked.

General Difference between PUT and POST methods

Following are some basic differences between the PUT and the POST methods :

POST to a URL creates a child resource at a server defined URL while PUT to a URL creates/replaces the
resource in its entirety at the client defined URL.
5
POST creates a child resource, so POST to /books will create a resources that will live under
the /books resource. Eg. /books/1. Sending the same post request twice will create two resources.

PUT is for creating or replacing a resource at a URL known by the client.

PUT must be used for CREATE when the client already knows the url before the resource is created.

PUT replaces the resource at the known url if it already exists, so sending the same request twice has no
effect. In other words, calls to PUT are idempotent.

Anatomy of an HTTP GET request

Anatomy of an HTTP POST request

Post requests are used to make more complex requests on the server. For instance, if a user has filled a
form with multiple fields and the application wants to save all the form data to the database. Then the
form data will be sent to the server in POST request body, which is also known as Message body.

HTML is a language of the web. It’s used to design the web pages or we can say structure the page
layouts of a website. HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form
suggests it’s not any programming language, a markup language. So, while the execution of HTML
6
code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML
code was rendered by the browser. which is similar to the compilation of a program. Html content is
parched through the browser to display the content of HTML.

HTML DOCUMENTS STRUCTURE

Html used predefined tags and attributes to tell the browser how to display content, means in which
format, style, font size, and images to display. Html is a case insensitive language. Case
insensitive means there is no difference in upper case and lower case ( capital and small letters) both
treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:
Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.

Empty Tags: These tags do not require to be closed.

Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text inside it.

Tags and attributes:

Tags are individuals of html structure, we have to open and close any tag with a forward slash like this
<h1> </h1>. There are some variations with the tag some of them are self-closing tag which isn’t
required to close and some are empty tag where we can add any attributes in it. Attributes are
additional properties of html tags that define the property of any html tags. i.e. width, height, controls,
loops, input, and autoplay. These attributes also help us to store information in meta tags by using
name, content, and type attributes. Html documents structured mentioned below:

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, the Title of the page,
version of HTML, Meta Data, etc.

BODY: This contains everything you want to display on the Web Page.

7
Let us now have a look at the basic structure of HTML. That is the code that is a must for every
webpage to have:

HTML

<!DOCTYPE html>

<!-- Defines types of documents : Html 5.O -->

<!DOCTYPE html>

<!-- Defines types of documents : Html 5.O -->

<html lang="en">

<!-- DEfines languages of content : English -->

<head>

<!-- Information about website and creator -->

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Defines the compatibility of version with browser -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- for make website responsive -->

<meta name="author" content="Mr.X">

<meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" >

8
 <!-- To give information about author or owner -->

<meta name="description "

content="A better place to learn computer science">

<!-- to explain about website in few words -->

<title>CSIIT</title>

<!-- Name of website or content to display -->

</head>

<body>

<!-- Main content of website -->

<h1>DEPARTMENT OF MCA</h1>

<p>A computer science portal for MCA</p>

</body>

</html>

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in
the above piece of HTML code:

<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is
HTML 5.0

<html> </html> : <html> is a root element of html. It’s a biggest and main element in complete html
language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to
structure a web page. <html> tag is parent tag of <head> and <body> tag , other tags enclosed within
<head > and <body>. In <html > tag we use “lang” attributes to define languages of html page such as
<html lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans =
Chinese, fr= french and el= Greek etc.

<head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not
displayed to the user, it is just written for reference purposes and as a watermark of the owner. Note:
for better understanding refer above code of html.

<title> = to store website name or content to be displayed.

<link> = To add/ link css( cascading style sheet) file.

<meta> = 1. to store data about website, organisation ,

creator/ owner

2. for responsive website via attributes

9
 3. to tell compatibility of html with browser

<script> = to add javascript file.

<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the
content that you see rendered in the browser is contained within this element. Following tags and
elements used in the body.

1. <h1> ,<h2> ,<h3> to <h6>

2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video> and<iframe>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others……….

10
Basic HTML Tags

If you happen to view the source code of a Web page, say this for example, you'll understand, what's
prominent is: HTML Tags – hundreds of them together compose the Web Page. Here's a few that you
should be aware of:
Comment Tag in HTML

Comments are a standard programming convention. It's the description that you place in your HTML
Source code which makes it easy for you to debug, update and maintain your Web Page at a later stage.
<!-- This is a comment -->
The contents enclosed within the Comment tags <!-- and --> do not appear in the browser.
Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and one line after that heading.

Example

<!DOCTYPE html>

<html>

<head>

<title>Heading Example</title>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

Paragraph Tag: The <p> tag offers a way to structure your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a closing </p> tag as shown below in the example −

Example

11
<!DOCTYPE html>

<html>

<head>

<title>Paragraph Example</title>

</head>

<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

Line Break Tag

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.

Example

<!DOCTYPE html>

<html>

<head>

<title>Line Break Example</title>

</head>

<body>

<p>Hello<br />

You delivered your assignment ontime.<br />

Thanks<br />

12
 Mahnaz</p>

</body>

</html>

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>

<html>

<head>

<title>Centring Content Example</title>

</head>

<body>

<p>This text is not in the center.</p>

<center>

<p>This text is in the center.</p>

</center>

</body>

</html>

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.For example, you
may want to give a line between two paragraphs as in the given example below −Example

<!DOCTYPE html>

<html>

<head>

<title>Horizontal Line Example</title>

</head>

13
 <body>

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

</body>

</html>

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

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.

Example

<!DOCTYPE html>

<html>

<head>

<title>Preserve Formatting Example</title>

</head>

<body>

<pre>

function testFunction( strText ){

alert (strText)

</pre>

</body>
14
</html>

This will produce the following result −

Try using the same code without keeping it inside <pre>...</pre> tags

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>

Line break Tag

The <BR> tag is used to display the text following it on the next line.
For example the HTML Source Code: This is a: <BR> Book Would be displayed as:
This is a:
Book
The peculiarity here is - Unlike other tags <BR> is a stand alone tag and does not pair up with a closing
tag.

HTML - 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 −

15
 Start Tag Content End Tag

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

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some
HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are
known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents should be
built, and what kind of content should be placed in what part of an HTML document.

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

It is very much allowed to keep one HTML element inside another HTML element −

Example

<!DOCTYPE html>

<html>

<head>

<title>Nested Elements Example</title>

</head>

<body>

<h1>This is <i>italic</i> heading</h1>

<p>This is <u>underlined</u> paragraph</p>

</body>
16
</html>

HTML - Attributes

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

The name is the property you want to set. For example, the paragraph <p> element in the example carries
an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within quotations. The
below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium
(W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

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>

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are −

Id

Title

Class

Style

The Id Attribute
17
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
There are two primary reasons that you might want to use an id attribute on an element −

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its
content.

If you have two elements of the same name within a Web page (or style sheet), you can use the id
attribute to distinguish between elements that have the same name. For now, let's use the id attribute to
distinguish between two paragraph elements as shown below.

Example

<p id = "html">This para explains what is HTML</p>

<p id = "css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as
explained for id attribute −

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as
a tooltip when cursor comes over the element or while the element is loading.

Example

<!DOCTYPE html>

<html>

<head>

<title>The title Attribute Example</title>

</head>

<body>

<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>

</body>

</html>

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element.
You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS).
So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For example −

18
class = "className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>

<html>

<head>

<title>The style Attribute</title>

</head>

<body>

<p style = "font-family:arial; color:#FF0000;">Some text...</p>

</body>

</html>

At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS.
Here, you need to understand what are HTML attributes and how they can be used while formatting
content.

Internationalization Attributes

There are three internationalization attributes, which are available for most (although not all) XHTML
elements.

dir

lang

xml:lang

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow.
The dir attribute can take one of two values, as you can see in the table that follows −

Value Meaning

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

19
Example

<!DOCTYPE html>

<html dir = "rtl">

<head>

<title>Display Directions</title>

</head>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

</html>

When dir attribute is used within the <html> tag, it determines how text will be presented within the
entire document. When used within another tag, it controls the text's direction for just the content of that
tag.

The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this attribute was
kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been
replaced by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML
Language Codes: ISO 639 for a complete list of language codes.

Example

<!DOCTYPE html>

<html lang = "en">

<head>

<title>English Language Page</title>

</head>

<body>

This page is using English Language

</body>

</html>
20
HTML - Formatting

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or
underlined; these are just three of the ten options available to indicate how text can appear in HTML and
XHTML.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>The following word uses an <i>italicized</i> typeface.</p>

</body>

</html>
21
Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Underlined Text Example</title>

</head>

<body>

<p>The following word uses an <u>underlined</u> typeface.</p>

</body>

</html>

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin
line through the text as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Strike Text Example</title>

</head>

<body>

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>

</html>

Monospaced Font

22
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as
variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider
than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>

Superscript Text

The content of a ^... element is written in superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's height above the other characters.

Example

<!DOCTYPE html>

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

<p>The following word uses a ^superscript typeface.</p>

</body>

</html>

Subscript Text

23
The content of a _... element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

<!DOCTYPE html>

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

<p>The following word uses a _subscript typeface.</p>

</body>

</html>

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Inserted Text Example</title>

</head>

<body>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

24
Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Deleted Text Example</title>

</head>

<body>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text
surrounding it as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Larger Text Example</title>

</head>

<body>

<p>The following word uses a <big>big</big> typeface.</p>

</body>

</html>

25
Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text
surrounding it as shown below −

Example

<!DOCTYPE html>

<html>

<head>

<title>Smaller Text Example</title>

</head>

<body>

<p>The following word uses a <small>small</small> typeface.</p>

</body>

</html>

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or
subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that
all of the elements within that <div> element relate to the footnotes. You might then attach a style to this
<div> element so that they appear using a special set of style rules.

Example

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<div id = "menu" align = "middle" >

<a href = "/index.htm">HOME</a> |

26
 <a href = "/about/contact_us.htm">CONTACT</a> |

<a href = "/about/index.htm">ABOUT</a>

</div>

<div id = "content" align = "left" >

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

</body>

</html>

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part
of a sentence or paragraph which you want to group together, you could use the <span> element as
follows.

Example

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <span style = "color:green">span tag</span>

and the <span style = "color:red">div tag</span> alongwith CSS</p>

</body>

</html>

************************************************************************

27
 Working With CSS Images

With Cascading Style Sheets (CSS), you can style your site and transform the
related images. For example, you can create static or sticky positioning for the
graphics, define backgrounds and borders, resize, and create cool filters to show off
the artistry.

CSS offers numerous options for those tasks. Gratifyingly, CSS supports many image
formats and types, including raster images (like JPEG), vector images (like SVG),
combination images (like ICO), and fileless images (like CSS gradients).

Image transformation in CSS is based on the <image> data type, which can take the

form of HTML elements, <url> or <gradient> CSS data types,

or element(), Image(), cross-fade(), or image-set() functions. After defining an image, you can
transform it by setting CSS properties, as described in this article.

This is part of an extensive series of guides about Front-End Development.

Here are the topics:

Positioning

Backgrounds

Borders

Resizing

Filters

Effects

Transformations With Cloudinary

Additional Resources
Positioning

Copy link to this heading

The position property specifies how to render webpage elements, including images, by
defining them as static, relative, fixed, absolute, or sticky.

28
To specify an image’s position, set the right, left, top, or bottom property. Those properties
support the values auto, length, %, initial, and inherit, which define how the property affects
positioning.
Static

Copy link to this heading

HTML elements are assigned a static position by default. You cannot configure the
placement properties (right, left, etc.) for a static position. Static images stay inline with
the page content as the user scrolls through the page.
.static {

position: static;

border: 3px solid #73AD21;

Relative

Copy link to this heading

You assign elements a relative position to move them away from their normal position
without other elements filling any gap that is left. Images positioned as relative stay
inline with the flow of your page content as the user scrolls.

See this example snippet:

.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

Fixed

Copy link to this heading

Images assigned a fixed position are placed in a location relative to your user’s
viewport and do not move along with the page content. For example, the code below
positions an image in the bottom right corner of the user’s browser, causing the image
to overlap other content on a scroll. No gap is left where the content would be if
positioned otherwise.
29
.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid #73AD21;

Absolute

Copy link to this heading

An absolute position assigned to images places them relative to their nearest positioned
parent. If no wrapping elements are positioned, the image is placed relative to your
document body, moving with the content as the user scrolls. See this example snippet:
.absolute {

position: absolute;

top: 80px;

right: 0;

border: 3px solid green;

Sticky

Copy link to this heading

Sticky images are positioned according to the user’s scrolling behavior. They start out
relatively positioned in their container, transitioning to fixed positions when a position
is met. For example, sticky positioning keeps an image visible even after the user has
scrolled past where the image was first displayed.

Note: sticky positioning does not work in Internet Explorer and Edge 15 and its earlier
versions.

Here’s an example snippet:

.sticky {

position: -webkit-sticky; /* Safari */

30
 position: sticky;

top: 0;

background-color: green;

border: 2px solid #4CAF50;

Backgrounds

Copy link to this heading

You specify the CSS property background-image to set one or more images, including the
child elements for your page and the <main> or <body> element, as an element’s
background. By default, background images are placed in the top-left corner both
horizontally and vertically.

To change the background image’s defaults, set the background-repeat, background-position,

and background-attachment properties. Set background-color as a fallback in case your image
fails to render.

See this example snippet:

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

background-color: purple;

Borders

Copy link to this heading

To create a border for an image, set the border property and the style, color,
and width options. Feel free to mix and match the style options with all four sides of
your border and set a different style for each side with a separate border-style property.
For example:
img {

width: 270px;
31
 border: 1px solid black;

You can also add borders that are images with the border-image property by referencing
the images. Because each image is sectioned into a nine-piece grid, you can define
where the gridlines fall and whether to stretch or repeat the middle segments. For
example:
#borderimg {

border: 10px solid transparent;

padding: 15px;

border-image: url(https://i.stack.imgur.com/sjbeu.png) 30 round;

Resizing

Copy link to this heading

You can resize images in CSS in three ways: absolutely, proportionally, and
relatively, by modifying the images’ `height` and `width` properties.
Absolute Resizing

Copy link to this heading

To resize images absolutely, specify their dimensions as static measurements, such as

pixels or ems, regardless of the original dimensions. For example:
img{

height: 100px;

width: 200px;

Note: If the dimension values you specify are not proportional to the original, your
image will appear warped.
Proportional Resizing: Retention of Aspect Ratio

Copy link to this heading

32
Resizing an image proportionally involves statically modifying
its height or width property and setting the other to auto. That way, you maintain the
image’s original aspect ratio. For example:
img{

height: 100px;

width: auto;

Relative Sizing

Copy link to this heading

You can resize an image in relation to its parent element or the viewport. Typically,
you also set the object-fit property to define whether the image should stretch. For
example:
img{

height: 100%;

width: 100%;

object-fit: contain;

For more details, see the article Image Resizing: Manually With CSS and
Automatically With Cloudinary.
Filters

Copy link to this heading

You can change an image’s color profile, clarity, opacity, etc. with CSS filters, which
perform basic edits directly in CSS rather than through an image editor. Here’s the
standard syntax:
filter-me {

filter: <filter-function> [<filter-function>]* | none

.filter-me {

filter: blur(10px);

}
33
Following are the effects you can choose for image filters:
Name Effect

blur() Applies a Gaussian blur.

brightness() Changes the brightness of the image.

contrast() Changes the image contrast.

drop-shadow() Adds a shadow behind the image.

grayscale() Colors the image black and white.

hue-rotate() Changes the image’s base hue.

invert() Inverts the image colors.

opacity() Changes the image’s transparency.

saturate() Changes the image’s color saturation.

sepia() Makes the image sepia toned.

For more details, see the article Creating Image-Filter Effects With CSS and Riveting
Transformations.
Effects

Copy link to this heading

You can create elaborate effects or compound changes for images with CSS.
Examples are rounded corners, placeholders or thumbnails, responsive sizing, and
transformations, such as skewing.
Rounded Corners

Copy link to this heading

A rounding configuration through the border-radius property makes images appear softer
or circular. Additionally, you can set uniform image corners or corners with separate
properties to create an ellipse or obloid.

For example, to create a slightly rounded shape:

img {

border-radius: 15px;

34
}

To create an ellipse or circle:

img {

border-radius: 50%;

Thumbnails

Copy link to this heading

Image thumbnails, which often serve as previews or placeholders for elements, are set
apart with borders, text, or other effects. The code example below creates a small
image with round corners and a gray border to denote interactivity, setting the image
apart from other elements.
img {

border: 2px solid #ddd;

border-radius: 3px;

padding: 5px;

width: 350px;

For more details, see the article CSS Image Effects: Five Simple Examples and a
Quick Animation Guide.
Responsive Sizing

Copy link to this heading

Responsive images resize according to your user’s viewport size. You can create them
by defining their width as a percentage of the viewport width, as in the example
below, or by programming in CSS and JavaScript with media queries.
img {

max-width: 70vw;

height: auto;

For more details, see the article How to Create Images for Responsive Web Design.

35
Transformations

Copy link to this heading

You can transform images by setting their scale, skew, rotate, or perspective parameter
through the transform property. Furthermore, combining transform with JavaScript or
animation modules creates movement or rotational images.

However, because browsers do not yet fully support the transform property, you must
add prefixes to ensure compatibility, as in this example:
img {

-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/

-moz-transform: rotate(20deg) skewY(20deg); /Firefox/

-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /

For compatibility with Internet Explorer, add the following:

img {

-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/

-moz-transform: rotate(20deg) skewY(20deg); /Firefox/

-o-transform: rotate(20deg) skewY(20deg); / Internet Explorer /

-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /

-sand-transform: rotate(20deg) skewY(20deg); / Internet Explorer /

Transformations With Cloudinary

Copy link to this heading

A cloud-based service for managing images and videos, Cloudinary offers a

generous free-forever subscription plan. While on that platform, you can upload
images and apply built-in effects, filters, and modifications. You can also create
image effects that are difficult or impossible to produce with just CSS.

Additionally, you can transform images programmatically with SDKs or simple URL
parameters. Cloudinary applies changes dynamically, leaving your original images
intact. That means you can modify images on the fly as your site design evolves and
as you support more devices and screen sizes—a huge convenience and time saver.
36
37