CHAPTER - 1

INTRODUCTION
TO WEB DESIGN
WHAT IS INTERNET?
Internet stands of "international networks". It is a network of millions of
computers connected to each other worldwide, that provides
information on almost every subject and facilitates data transmission
and exchange of data resources. It make possible for millions of users
to connect one another via telephone lines, cable lines and satellites.
In India internet services started on 15 Aug 1995 through VSNL (Videsh
Sanchar Nigam Limited) Private internet service provider are - Airtel,
Reliance, Sify, Tata etc.

COMPUTER G
USES OF INTERNET
Education
Email
Business
E-commerce
Media and Entertainment
Social networking
Health and fitness
Forum
COMPUTER G
WORLD WIDE WEB (WWW)
The World Wide Web (WWW) is the most popular and promising method of
accessing the internet. The World Wide Web (WWW) is an interconnected
system of public webpages accessible through the internet. It is a network of
online content that is formatted in HTML and accessed via HTTP. The term
refers to all the interlinked HTML pages that can be accessed over the
Internet.
The World Wide Web was originally designed in 1991 by Tim Berners-Lee
while he was a contractor at CERN. The World Wide Web is most often
referred to simply as "The Web." An example of WWW is internet.

COMPUTER G
WEBSITE
A website is a collection of digital documents, primarily HTML files
and multimedia files, that are linked together and that exist on the
internet under the same domain. In other word, A group of web
pages that follow the same theme and are connected together with
hyperlinks is called a website. The first page of website is called
home page of that website.

COMPUTER G
WEBSITES CAN BE CLASSIFIED INTO TWO TYPES :-
STATIC WEBSITE
1. Static web page contain fixed code, the content of each page does not
change unless it is manually updated by the webmaster.
2. A static website is primarily coded in Hyper Text Markup Language (HTML).
3. Appearance beyond basic HTML website is controlled using Cascading
Style Sheets (CSS) language.
4. Images are commonly used for the effective appearance and also for the
main content.
5. If audio or video plays automatically, and then it is considered as Static
content.

COMPUTER G
ADVANTAGES OF STATIC WEBSITE

1. Quick developing time.

2. Cheap development cost.
3. Host is inexpensive / affordable.

COMPUTER G
DISADVANTAGES OF STATIC WEBSITE

1. Not as useful to the user.

2. Content can become outdated.

COMPUTER G
DYNAMIC WEBSITE
1. A Dynamic website is one in which the web pages changes or customizes itself
frequently and automatically.
2. Server-side dynamic pages are generated by computer code that produces the
HTML and CSS.
3. There is a wide range of scripting languages and web servers that are available to
generate dynamic web servers and scripting languages such as CGI, Java Servlets
and Java Server Pages (JSP), Active Server Pages (ASP) and Cold Fusion (CFML) are
some of the examples.

COMPUTER G
DYNAMIC WEBSITE
4. A dynamic website can display the current state of the communication between
users, monitor a changing situation, or provide information that is required by an
individual user.
5. JavaScript code is used to instruct the web browser how to interactively modify
the page contents at client side.

COMPUTER G
ADVANTAGES OF DYNAMIC WEBSITE
1. A highly functional website.
2. Very easy to update.
3. More than one user can develop/work on the site.

COMPUTER G
DISADVANTAGES OF DYNAMIC WEBSITE
1. Takes longer time to develop.
2. More costly to develop.
3. Cost more to host.

COMPUTER G
WEB PAGE
The backbone of the www is made of files, called pages or web pages, containing
information and
links to resources both text and multimedia throughout the internet. It is created
using HTML (Hyper Text Markup Language

COMPUTER G
CLINT & SERVER

COMPUTER G
FRONT END-
Frontend and Backend are the two most popular terms used in web
development. These terms are very crucial for web development but are
quite different from each other.
Front end development refers to "client-side" development, where the focus
is on what users visually see first in their browser or application. Front end
developers are responsible for the look and feel of a site. Common front end
language are HTML, CSS, JavaScript, Jquery. Back End-

COMPUTER G
BACKEND-
Backend is the server-side development of the website. It stores and
arranges data, and also makes sure everything on the client-side of the
website works fine. It is the part of the website that you cannot see and
interact with.
It is the portion of software that does not come in direct contact with users.
The back end portion is built by using some language are PHP, C++, Java,
Python, JavaScript, etc.

COMPUTER G
 हम आपका ये पूरा कोर्स और
नोट्स फ्री में अपलोड कर रहे हैं,
हमारे चैनल को सपोर्ट करने के
लिए आप QR कोड से हमें सपोर्ट
कर सकते हैं, आप का हर छोटा
सा सहयोग, हमें और अच्छे कं टेंट
बनाने में सहयोग करेगा।
WHAT IS A SCRIPTING LANGUAGE?
A scripting language is used to write scripts. It contain a series of
commands that are interpreted one by one at runtime unlike
programming languages that are compiled first before running.
Scripts are generally associated with web development where they
are widely used to make dynamic web applications. Scripting
languages is of two types

COMPUTER G
CLIENT SIDE SCRIPTING LANGUAGE: -
web browsers execute client side scripting. It is use when browsers has
all code. Source code used to transfer from web server to user's
computer over internet and run directly on browsers. It is also used for
validations and functionality for user events. It allows for more
interactivity. It usually performs several actions without going to user. It
cannot be basically used to connect to databases on web server. These
scripts cannot access file system that resides at web browser. Pages are
altered on basis of users choice. It can also used to create "cookies" that
store data on user's computer.
COMPUTER G
SERVER SIDE SCRIPTING LANGUAGE: -
Web servers are used to execute server side scripting. They are basically
used to create dynamic pages. It can also access the file system residing
at web server. Server-side environment that runs on a scripting language
is a web-server. It is used to retrieve and generate content for dynamic
pages. It is used to require to download plugins. In this load times are
generally faster than client- side scripting. When you need to store and
retrieve information a database will be used to contain data. It can use
huge resources of server. It reduces client-side computation overhead.
Server sends pages to request of user/client.

COMPUTER G
RESPONSIVE WEB DESIGNING-
Responsive Web Designing (RWD) is a modern age design
approach where in a website is developed to fluidly modify its
layout to fit all types of screen size and device.
How to make responsive website-
A variety of responsive design techniques can be utilized to create
responsive websites. Responsive website design consists of the
following 3 main components:

COMPUTER G
Flexible layouts - Using a flexible grid to create the website layout that will
dynamically resize to any width.
Media queries - An extension to media types when targeting and including styles.
Media queries allow designers to specify different styles for specific browser and
device circumstances.
Flexible media - Makes media (images, video and other formats) scalable, by changing
the size of the media as the size of the viewport changes.
How does responsive web design work?
Responsive web design works through Cascading Style Sheets (CSS), using various
settings to serve different style properties depending on the screen size, orientation,
resolution, color capability, and other characteristics of the user's device. A few
examples of CSS properties related to responsive web design include the viewport
and media queries.

COMPUTER G
Benefits Responsive Web design :-
One website for all device:- Whether viewed on a 27-inch iMac with a wireless
connection or from the screen of your Android phone, the website will be
configured for the user's optimal viewing pleasure.
Optimal design for the device:- With the responsive web design approach, all
images, fonts, and other HTML elements will be scaled appropriately, maximizing
whatever screen size the user has.
No need for redirects:- Other options towards designing for multiple devices
require the use of redirects to send the user to the appropriate version of a web
page. Without the need for redirects, the user can access the content he wants to
look at, as quickly as possible

COMPUTER G
 हम आपका ये पूरा कोर्स और
नोट्स फ्री में अपलोड कर रहे हैं,
हमारे चैनल को सपोर्ट करने के
लिए आप QR कोड से हमें सपोर्ट
कर सकते हैं, आप का हर छोटा
सा सहयोग, हमें और अच्छे कं टेंट
बनाने में सहयोग करेगा।
CHAPTER - 3
HTML
WHAT IS HTML?
HTML (HyperText Markup Language) is a web programming language
designed to create web documents or web pages. Based upon SGML
(Standard Generalized Markup Language), HTML's basic concept
involves the use of "tags". These "tags", "mark up" or alert the
browser that the document contains hypertext so it can be
interpreted and rendered as a web page document.

COMPUTER G
HTML documents are plain-text files that can be created using any
basic or high-level text editor, such as Notepad, TextPad, or
Microsoft Word or any other HTML authoring program. When you
create an HTML document, you must save it with a .html or .htm
extension. By default, most text editors save documents with a .txt
extension, which is not capable of being displayed by a web
browser. The .html or .htm extension allows the document to be
rendered and displayed by a browser.

COMPUTER G
 HTML - short for HyperText Markup Language; basic programming language
of the World Wide Web based upon SGML (Standard Generalized Markup
Language).
Web browser - application capable of interpreting and rendering HTML
code and other web programming languages.
URL - [Uniform Resource Locator] - the address to any web site or web page
document that is part of the World Wide Web.
Hyperlink, link - text, image or object in a web page document that "links" or
"points" to another document on the World Wide Web.
Element - a fundamental component of structure in a web document; web
pages are ultimately divided into many individual elements.

COMPUTER G
 Tag - used to denote various elements in a document; it signals a command
or instruction for a web browser and specifically describes the type of
content.
Attribute - additional information included inside the start tag of an
element; issues a command to a web browser telling what kind of operation
is required.
Web document - actual web page text file with an extension of .html or .htm
that is capable of being displayed by a browser.

COMPUTER G
HTML TAGS:-
Every HTML document should contain the basic document structure tags,
which include <html></html>, <head></head> and <body></body>. The
heading contains the title, which is displayed in the title bar of a browser,
and the body contains the elements that are made up of text, images,
paragraphs, tables, lists and any other legal HTML element. HTML is also not
case sensitive, which means <bODy> is the same as <BODY> or <body>, but it
is highly recommended to use a consistent tag writing style. The standard
writing convention is for all tags to be written in lowercase.

COMPUTER G
 हम आपका ये पूरा कोर्स और
नोट्स फ्री में अपलोड कर रहे हैं,
हमारे चैनल को सपोर्ट करने के
लिए आप QR कोड से हमें सपोर्ट
कर सकते हैं, आप का हर छोटा
सा सहयोग, हमें और अच्छे कं टेंट
बनाने में सहयोग करेगा।
 <br>

Using the break tag causes a line to break with no extra space. It is the same as pressing
enter in a word processing document; it simply breaks the line and begins a new one.

 <center> </center>
Even though the center tag is very basic and extremely easy to understand, it can be very
useful in a document. Everything placed between the start and end <center> tags will be
centered on the screen or centered in its current cell space.

 Text Headings (block-level) <h1> </h1> through <h6> </h6>

HTML has six levels of text form heading, from 1 to 6, with 1 being the most prominent
(biggest) level.
<hr>
This tag produces a horizontal rule that extends across the content area in a web browser.

You can use two attributes with the horizontal rule tag. The size attribute specifies the line
thickness in pixels. The width attribute specifies the line width in percentage of the screen
or the line width in pixel values.
<hr width=350 size=20>
 CHARACTER FORMATTING –
 <b></b> ---> Specifies Bold Text
 <i></i> ---> Specifies Italic Text
 <u></u> ---> Specifies Underlined Text
  ---> Specifies Subscript Format
  ---> Specifies Superscript Format

 <div> </div> --> content division tag allowing for align="left | center | right" attribute
<div align="center">Ending of document content.</div>

<div align="center">Ending of document content.</div> Using bold

characteristic tag.

Using italic characteristic tag.

Using underline characteristic tag.

Using subscript format.

 The following is a listing of popular block-level text
tags:
 <div> </div> --> content division tag allowing for align="left | center |
right" attribute
 <p> </p> --> paragraph tag
 <h(1-6)> </h(1-6)> ---> text heading tags


For an example, consider the following HTML code segment:

<h3>Welcome!</h3>
<p>Beginning of document content.</p>
<div align="center">Ending of document content.</div>

The above HTML code would produce the results in the following box, in a
web browser:

WELCOME!

Beginning of document content.

Ending of document content.

4PT font size rendered in Arial Type

The following HTML code segment illustrates the size of possible point values
when using the font tag:
<font size=1pt face="arial" color=#FF2400>1 point arial type
text</font>
<font size=2pt face="arial" color=#FF2400>2 point arial type
text</font>
<font size=3pt face="arial" color=#FF2400>3 point arial type
text</font>
<font size=4pt face="arial" color=#FF2400>4 point arial type
text</font>
<font size=5pt face="arial" color=#FF2400>5 point arial type
text</font>
<font size=6pt face="arial" color=#FF2400>6 point arial type
text</font>
<font size=7pt face="arial" color=#FF2400>7 point arial type
text</font>

The above HTML code would produce the results in the following box:
1 point arial type text

2 point arial type text

3 point arial type text

4 point arial type text

5 point arial type text

6 point arial type text

7 point arial type text

 HTML LISTS -
Three block-level list types:

Unnumbered (ul)

Numbered (ol)

Unnumbered or unordered lists are usually displayed with bullets, which

depict each new line of information to be displayed in the list structure.
Unordered lists should be used when needing to display related group of
data not necessarily in a particular order. The following are the steps
required to create an unnumbered list:

1. Start with the opening unnumbered list tag <ul>.

2. Enter the list item tag <li> followed by the item to be listed.
3. Continue to list items using the list item tag.
4. End the unnumbered list by using the closing tag </ul>.

Example 1: Unnumbered/Unordered list

<html>
<head><title>Unordered List Example</title></head>
<body>

<ul>
<li>List Item 1
<li>List Item 2
<li>List Item 3
<li>List Item 4
</ul>

</body>
</html>
The above HTML code would produce the results in the following box, in a
web browser:

List Item 1
List Item 2
List Item 3
List Item 4

Numbered lists are coded identical to an unnumbered list except for the
opening and closing tag, which are: <ol> </ol>. Numbered lists should be
used when needing to display data in steps or numerical sequential order.

Example 2: Numbered/Ordered list

<html>
<head><title>Numbered List Example</title></head>
<body>

<ol type="A">
<li>List Item 1
<li>List Item 2
<li>List Item 3
<li>List Item 4
</ol>

</body>
</html>

The above code would produce the results shown in the following box:

List Item 1
List Item 2
List Item 3
List Item 4
HTML <img> Tag
The <img> tag is used to embed an image in an HTML page.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

Attributes
Attribute Value Description

height pixels Specifies the height of an image

sizes sizes Specifies image sizes for different page layouts

src URL Specifies the path to the image

width pixels Specifies the width of an image

What is CSS?
CSS stands for Cascading style sheets. It describes to the user how to display HTML
elements on the screen in a proper format. CSS is the language that is used to style
HTML documents. In simple words, cascading style sheets are a language used to
simplify the process of making a webpage.

CSS is used to handle some parts of the webpage. With the help of CSS, we can
control the colour of text and style of fonts, and we can control the spacing between
the paragraph and many more things. CSS is easy to understand but provides strong
control on the Html documents.CSS is combined with HTML.

 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 stylesheets are stored in CSS files

Types of CSS:-
 Inline CSS
 Internal CSS
 External CSS
Inline CSS:
Inline CSS is a way of defining the styling of an HTML element by adding
CSS rules directly to the element’s tag using the “style” attribute. It is used
for quick and simple styling changes to specific elements, without creating
a separate CSS file.

<html>

<head>
<title>
Inline CSS
</title>
</head>

<body>
<h2 style="color: green;
font-size: 18px;">
Welcome To GFG
</h2>
<p style="color: red;
font-size: 14px;">
This is some text. style by inline CSS
</p>
</body>

</html>
Internal CSS:
Internal CSS, also known as embedded CSS, involves adding CSS rules
directly within the <style> element in the <head> section of an HTML
document. It allows styling specific to that document.

<head>
<title>
Internal CSS
</title>

<style>
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}

p {
color: green;
font-size: 16px;
}
</style>
</head>

<body>
<h1>ComputerG</h1>
<p>ComputerG</p>
</body>

</html>
External CSS:
External CSS is used to place CSS code in a separate file and link to the
HTML document. To use external CSS, create a separate file with the .css
file extension that contains your CSS rules.

<html>

<head>
<title>External Style</title>
<link rel="stylesheet"
type="text/css" href="style.css">
</head>

<body>
<h1>ComputerG</h1>
<p>ComputerG</p>
</body>

</html>

CSS File
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}

p {
color: green;
font-size: 16px;
}
Class Selector :-
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.

You can also specify that only specific HTML elements should be affected by a
class.

 Class can be use more than one time in webpage

 Class can be use more than one tume in a element.

Example:-

<html>

<head>

<style>

p.hometown {

background: yellow;

</style>

</head>

<body>

<h1>Demo of the .class selector</h1>

<p>My name is Donald.</p>

<p class="hometown">I live in Uttar Pradesh.</p>

<p>My name is Computer G.</p>

<p class="hometown">I also live in Uttar Pradesh.</p>

</body>

</html>
ID Selector
The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is 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

Example:-

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Note:- Preference of ID in higher than class

DIV :-
The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Example:-

<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

</body>
</html>
Float Property
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
Position Property
Position: relative;
An element with position: relative; is positioned relative to its normal
position.

Setting the top, right, bottom, and left properties of a relatively-positioned

element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

.rel {
position: relative;
left: 30px;

Position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it

uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and
can overlap elements.

.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
Position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally
have been located.

.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
CSS Borders
The CSS border properties allow you to specify the style, width, and color
of an element's border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the
border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-
color value
 outset - Defines a 3D outset border. The effect depends on the
border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:
p.one {
border-style: solid;
border-width: 15px;
}

p.two {
border-style: solid;
border-width: medium;
}

CSS Border Color

The border-color property is used to set the color of the four borders.

p.one {
border-style: solid;
border-color: red;
}

CSS Border - Individual Sides

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

 border-style: dotted solid double dashed;

o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

p {
border: 2px solid red;
border-radius: 5px;
}
 CSS Margins
The CSS margin properties are used to create space around elements, outside of any
defined borders.

With CSS, you have full control over the margins. There are properties for setting
the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parentelement

Tip: Negative values are allowed.

Example
Set different margins for all four sides of a <p> element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property

Example

Use the margin shorthand property with four values:

p {
margin: 25px 50px 75px 100px;
}
 CSS Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an
element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.

 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parentelement

Note: Negative values are not allowed.

Example
Set different padding for all four sides of a <div> element:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Shorthand Property

Example

Use the padding shorthand property with four values:

div {
padding: 25px 50px 75px 100px;
}
 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:

a {text-decoration: none;}
h1 {text-decoration: overline;}

h2 {text-decoration: line-through;}

h3 {text-decoration: underline;}

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a
text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize

the first letter of each word:

Example

p.uppercase {text-transform: uppercase;}

p.lowercase {text-transform: lowercase;}

p.capitalize {text-transform: capitalize;}

Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:

Example

p {
text-indent: 50px;
}
 Letter Spacing
The letter-spacing property is used to specify the space between the characters in a
text.

The following example demonstrates how to increase or decrease the spacebetween characters:

h1 {letter-spacing: 3px;}

h2 {letter-spacing: -3px;}

Line Height
The line-height property is used to specify the space between lines:

Example

p.small {line-height: 0.8;}

p.big {line-height: 1.8;}

Word Spacing
The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space

between words:

Example

h1 {word-spacing: 10px;}

h2 {word-spacing: -5px;}
 Text Shadow
The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the verticalshadow (2px):

Example

h1 {text-shadow: 2px 2px;}

Next, add a color (red) to the shadow:

Example

h1 {text-shadow: 2px 2px red;}

Then, add a blur effect (5px) to the shadow:

Example

h1 {text-shadow: 2px 2px 5px red;}

Font Style
The font-style property is mostly used to specify italic text.

 normal - The text is shown normally

 italic - The text is shown in italics

Font Weight
The font-weight property specifies the weight of a font:

 normal - The text is shown normally

 bold - The text is shown in bold
 Font Variant
The font-variant property specifies whether or not a text should be displayed in a
small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters.

However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.

 normal - The text is shown normally

 small-caps - The text is shown in SMALL-CAPS

Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Resize the browser window to see how the font size scales.

Example

<h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport
is 50cm wide, 1vw is 0.5cm.
 HTML Lists and CSS List Properties
In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or lettersThe 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

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:

Example

ol {
background: #ff9999;
padding: 20px;
}
W3.CSS Introduction
A Quality Alternative to Bootstrap
W3.CSS is Smaller, Faster and Easier to Use.

W3.CSS is a modern, responsive, mobile first CSS framework.

W3.CSS provides equality for all browsers: Chrome. Firefox. Edge. IE. Safari.
Opera.

W3.CSS provides equality for all devices: Desktop. Laptop. Tablet. Mobile.

W3.CSS is standard CSS only (No jQuery or JavaScript library).

W3.CSS is Free
W3.CSS is free to use. No license is necessary.

How To
To use W3.CSS in your web site, just add a link to "w3.css" from your web pages:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Or download w3.css from w3css_downloads and add a link to w3.css:
<link rel="stylesheet" href="w3.css">

W3.CSS Colors
Coloring HTML Elements
The w3-color and w3-text-color classes can be used to color any HTML element:
Background Colors
The w3-color classes set the background color for any HTML element:

Example
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Text Colors
The w3-text-color classes set the text color of any HTML element:

Example
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Hover Colors
The w3-hover-color classes define the background hover color for any HTML
element:

Example
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a
metropolitan area of over 9 million inhabitants.</p>
</div>
The w3-hover-text-color classes define the text hover color for any HTML
element:

Example
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a
metropolitan area of over 9 million inhabitants.</p>
</div>

Color libraries
In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of
different color libraries:

Windows Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css">

Example
<div class="w3-win8-lime">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Fashion Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2021.css">

Example
<div class="w3-2021-marigold">Marigold</div>
<div class="w3-2021-cerulean">Cerulean</div>
<div class="w3-2021-rust">Rust</div>

Highway Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">

<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>
W3.CSS Containers

The Container Class

The w3-container class has a default 16px left and right padding, and no top or
bottom padding to any HTML element.

The w3-container class is the perfect class to use for all HTML container elements
like:

<div>, <article>, <section>, <header>, <footer>, <form>, and more.

Containers Provides Equality

The w3-container provides equality for all HTML container elements:

 Common margins
 Common paddings
 Common alignments
 Common fonts
 Common colors

Example (To add a color, just add a w3-color class)

<div class="w3-container w3-red ">
<p>The w3-container class is an important w3.CSS class.</p>
</div>
Headers and Footers
The w3-container class can be used to style headers:

Example
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>

Example
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>

Articles and Sections

The w3-container class can be used to style <article> and <section> elements:
<article class="w3-container w3-red">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>

<section class="w3-container w3-blue">

<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>

W3.CSS Panels
The Panel Class
The w3-panel class adds a 16px top and bottom margin and a 16px left and right
padding to any HTML element.

Example
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
W3.CSS Borders

W3.CSS Border Classes

W3.CSS provides the following border classes:

Class Defines

w3-border Adds borders (top, right, bottom, left) to an element

w3-border-top Adds a top border to an element

w3-border-right Adds a right border to an element

w3-border-bottom Adds a bottom border to an element

w3-border-left Adds a left border to an element

w3-border-0 Removes all borders

 w3-hover-border- Adds a hoverable border color
color

w3-bottombar Adds a thick bottom border to an element

w3-leftbar Adds a thick left border to an element

w3-rightbar Adds a thick right border to an element

w3-topbar Adds a thick top border to an element

w3-border-color Displays the border in a specified color (like red, blue,
etc)
Adding Borders
Example
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>

<div class="w3-panel w3-border-left">

<p>I have only a left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom">

<p>I have top and bottom borders.</p>
</div>

Border Colors
The w3-border-color classes are used to add colors to borders:

Example
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>

<div class="w3-panel w3-border-left w3-border-blue">

<p>I have a blue left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">

<p>I have a green top and bottom border.</p>
</div>
Rounded Borders
To add rounded borders, add one of the w3-round-size classes:

Example
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>

<div class="w3-panel w3-border w3-round-small">

<p>My borders are rounded (small).</p>
</div>

<div class="w3-panel w3-border w3-round">

<p>My borders are rounded.</p>
</div>

<div class="w3-panel w3-border w3-round-large">

<p>I have large rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xlarge">

<p>I have xlarge rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xxlarge">

<p>I have xxlarge rounded borders.</p>
</div>
Thick Borders
The w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used
to add thick borders to an element:

Example
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">

<p>I have a thick blue left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">

<p>I have a thick blue left border and a pale-blue background color.</p>
</div>

<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">

<p>I have a thick red top and bottom border and a pale-red background
color.</p>
</div>

Hoverable Borders
The w3-hover-border-color classes change the color of the border on mouse-
over:

Example
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-green">

<p>Red border that turns green on hover</p>
</div>

Example
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">

<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
 W3.CSS Fonts
Using Font Classes
With W3.CSS you can use 4 different built-in font classes:

 w3-serif
 w3-sans-serif
 w3-monospace
 w3-cursive

Example
<p class="w3-sans-serif">
<div class="w3-monospace">
<div class="w3-cursive">

W3.CSS Text
Text Alignment
The w3-left-align and the w3-right-align classes are used to align text.

Example
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>

Centering Elements
The w3-center class is used to center-align elements:

Example
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
Wide Text
The w3-wide class specifies a wider text:

This text is wider.

Example
<p class="w3-wide">The w3-wide class specifies a wider text.</p>

Text Opacity
The w3-opacity class is designed to work with all colors:

Example
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>

Text Shadow
The CSS3 text-shadow property can be used to add shadow or blur effects to text:

Example
<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>

Special Effects
Example
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>

<div class="w3-panel w3-amber">

<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>

<div class="w3-panel w3-blue">

<h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
W3.CSS Tables
W3.CSS Table Classes
W3.CSS provides the following classes for tables:

Class Defines

w3-table Container for an HTML table

w3-striped Striped table

w3-border Bordered table

w3-bordered Bordered lines

w3-centered Centered table content

w3-hoverable Hoverable table

w3-table-all All properties set

Basic Table
The w3-table class is used to display a basic table:

Example
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Striped Table
The w3-striped class is used to add zebra-stripes to a table:

Example
<table class="w3-table w3-striped">

Bordered Table
The w3-bordered class adds a bottom border to each table row:

Example
<table class="w3-table w3-bordered">

Striped Bordered Table

Combine the w3-striped class and the w3-bordered class to create a striped
bordered table:

Example
<table class="w3-table w3-striped w3-bordered">
Border around a Table
The w3-border class is used to display a border around a table:

Example
<table class="w3-table w3-striped w3-border">

Tip: The w3-border class is not only for tables. It can be used on any HTML element!

Displaying it All
The w3-table-all class combines all of the classes above:

Example
<table class="w3-table-all">

Centering all Content

The w3-centered class centers the content of the table:

Example
<table class="w3-table-all w3-centered">

Centering one Column

The w3-center class centers the content of a column:

Example
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>

Right Align one Column

The w3-right-align class right aligns the content of a column:
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>

Hoverable Table
The w3-hoverable class adds a grey background color on mouse-over:

Example
<table class="w3-table-all w3-hoverable">

Hover Colors
If you want a specific hover color, add any of the w3-hover-color classes to each
<tr> element:

Example
<tr class="w3-hover-green">

Responsive Table
The w3-responsive class creates a responsive table. The table will then scroll
horizontally on small screens. When viewing on large screens, there is no
difference.

Example
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>

Table as a Card
Use a w3-card class to display a table as a card:

20
<table class="w3-table-all w3-card-4">

Tiny Table
Use the w3-tiny class to display a tiny table:

Example
<table class="w3-table-all w3-tiny">

Small Table
Use the w3-small class to display a small table:

Example
<table class="w3-table-all w3-small">

Large Table
Use the w3-large class to display a large table:

Example
<table class="w3-table-all w3-large">

XLarge Table
Use the w3-xlarge class to display an xlarge table:

Example
<table class="w3-table-all w3-xlarge">

XXLarge Table
Use the w3-xxlarge class to display an xxlarge table:

Example
<table class="w3-table-all w3-xxlarge">

21
XXXLarge Table
Use the w3-xxxlarge class to display an xxxlarge table:

Example
<table class="w3-table-all w3-xxxlarge">

Jumbo Table
Use the w3-jumbo class to display a jumbo large table:

Example
<table class="w3-table-all w3-jumbo">

22
W3.CSS Lists
Basic List
The w3-ul class is used to display a basic list:

Example
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Bordered List
The w3-border class adds a border around the list:

Example
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

23
List as a Card
The w3-card-number classes can be used to show a list as a card:

Example
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Centered List
The w3-center class can be used to center the list items in a list:

Example
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Colored List
The w3-color classes can be used to add a color to the list:

Example
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Colored List Item

The w3-color classes can be used to add a color to the list item:

Example
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

24
Hoverable List
The w3-hoverable class adds a grey background color to each list item on mouse-
over:

Example
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

If you want a specific hover color, add any of the w3-hover-color classes to each
<li> element:

Example
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>

List with Padding

The w3-padding classes can be used to add padding to list items:

Example
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>

25
Avatar List
Example
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
<img src="img_avatar2.png" class="w3-bar-item w3-
circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</div>
</li>

List Width
Lists have a 100% width by default. Use the width property to change this.

Example
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tiny List
Use the w3-tiny class to display a tiny list:

Example
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Small List
Use the w3-small class to display a small list:

26
Large List
Use the w3-large class to display a large list:

XLarge List
Use the w3-xlarge class to display an extra-large list:

XXLarge List
Use the w3-xxlarge class to display an XXLarge list:

XXXLarge List
Use the w3-xxxlarge class to display an XXXLarge list:

Jumbo List
Use the w3-jumbo class to display an enormous "jumbo" list:

27
W3.CSS Images

The w3-round class adds rounded corners to an image:

Example
<img src="img_snowtops.jpg" class="w3-round-small" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-large" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-xlarge" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-xxlarge" alt="Norway">

28
The w3-circle class shapes an image to a circle:

Example
<img src="snowtops.jpg" class="w3-circle" alt="Alps">

Bordered Image
The w3-border class adds borders around the image:

Example
<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">

Image as a Card
Wrap any of the w3-card-* classes around the <img> element to display it as a
card (add shadows):

Example
<div class="w3-card-4">
<img src="img_avatar.png" alt="Person">
</div>

29
Image Text
Position the text in an image with the w3-display-classes:

<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights">
<div class="w3-display-topleft w3-container">Top Left</div>
<div class="w3-display-topright w3-container">Top Right</div>
<div class="w3-display-bottomleft w3-container">Bottom Left</div>
<div class="w3-display-bottomright w3-container">Bottom Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>

30
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.

If you want the image to scale down if it has to, but never scale up to be larger
than its original size, use the w3-image class.

Example
<img src="img_lights.jpg" alt="Lights" class="w3-image">

If you want to restrict a responsive image to a maximum size, use the max-width
property:

Example
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">

Opacity
The w3-opacity classes make images transparent:

Example
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">

Grayscale
The w3-grayscale classes add a grayscale effect to an image:

<img src="image.jpg" alt="Table" class="w3-grayscale-min">

<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">

31
Sepia
The w3-sepia classes add a sepia effect to an image:

Example
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">

Hover Effects
You can also add special effects on hover/mouse-over.

Example
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">

Opacity Off
The w3-hover-opacity class adds transparency to the image on mouse-over, and
the w3-hover-opacity-off class removes transparency on mouse-over.

Example
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">

32
Introduction to Scripting Languages
All scripting languages are programming languages. The scripting language is
basically a language where instructions are written for a run time environment. They
do not require the compilation step and are rather interpreted. It brings new
functions to applications and glue complex system together. A scripting language is
a programming language designed for integrating and communicating with other
programming languages.

Advantages of scripting languages:

 Easy learning: The user can learn to code in scripting languages quickly, not
much knowledge of web technology is required.
 Fast editing: It is highly efficient with the limited number of data structures
and variables to use.
 Interactivity: It helps in adding visualization interfaces and combinations in
web pages. Modern web pages demand the use of scripting languages. To create
enhanced web pages, fascinated visual description which includes background
and foreground colors and so on.
 Functionality: There are different libraries which are part of different scripting
languages. They help in creating new applications in web browsers and are
different from normal programming languages.

There are two types of scripting language

Client-side scripting is performed to generate a code that can run on the client
end (browser) without needing the server side processing. Basically, these types of
scripts are placed inside an HTML document. The client-side scripting can be used
to examine the user’s form for the errors before submitting it and for changing the
content according to the user input. As I mentioned before, the web requires three
elements for its functioning which are, client, database and server.

Server-side scripting is a technique of programming for producing the code which

can run software on the server side, in simple words any scripting or programming
that can run on the web server is known as server-side scripting. The operations like
customization of a website, dynamic change in the website content, response
generation to the user’s queries, accessing the database, and so on are performed
at the server end.

2
 BASIS FOR
SERVER-SIDE SCRIPTING CLIENT-SIDE SCRIPTING
COMPARISON

Basic Works in the back end which Works at the front end

could not be visible at the and script are visible

client end. among the users.

Processing Requires server interaction. Does not need interaction

with the server.

Languages PHP, ASP.net, Ruby on Rails, HTML, CSS, JavaScript,

involved ColdFusion, Python, etcetera. etc.

Affect Could effectively customize Can reduce the load to the

the web pages and provide server.

dynamic websites.

Security Relatively secure. Insecure

JavaScript Introduction
JavaScript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup
menus, etc.). JavaScript contains a standard library of objects, such
as Array, Date, and Math, and a core set of language elements such as operators,
control structures, and statements.

3
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the
element content (innerHTML) to "Hello JavaScript":

<html>
<body>

<h2>What Can JavaScript Do? </h2>

<p id="demo">JavaScript can change HTML content. </p>

<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me! </button>

</body>
</html>

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>