lOMoARcPSD|30616144

lOMoARcPSD|30616144

UNIT 1 - 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.

Server - Client

A server is simply a computer that provides the network resources and provides service to other
computers when they request it.

A client is the computer running a program that requests the service from a server. Local area
network (LAN) is based on client server network relationship.

Communication Protocol (HTTP)

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
 lOMoARcPSD|30616144

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.

Basic Features

 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:
 lOMoARcPSD|30616144

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 - Requests
An HTTP client sends an HTTP request to a server in the form of a request message which
includes following format:
 A Request-line
 Zero or more header (General|Request|Entity) fields followed by CRLF
 An empty line (i.e., a line with nothing preceding the CRLF) indicating the end of the
header fields
 Optionally a message-body

Request-Line

The Request-Line begins with a method token, followed by the Request-URI and the protocol
version, and ending with CRLF. The elements are separated by space SP characters.
Request-Line = Method SP Request-URI SP HTTP-Version CRLF

Request Method

The request method indicates the method to be performed on the resource identified by the
given Request-URI. The method is case-sensitive and should always be mentioned in uppercase.
The following table lists all the supported methods in HTTP/1.1.

S.N. Method and Description

1 GET - The GET method is used to retrieve information from the given server using a
given URI. Requests using GET should only retrieve data and should have no other effect
on the data.

2 HEAD - Same as GET, but it transfers the status line and the header section only.
 lOMoARcPSD|30616144

3 POST - A POST request is used to send data to the server, for example, customer
information, file upload, etc. using HTML forms.

Examples of Request Message

GET /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Accept-Language: en-us
Accept-Encoding: gzip,
deflate Connection:
HTTP - Responses
After receiving and interpreting a request message, a server responds with an HTTP response
message:

 A Status-line
 Zero or more header (General|Response|Entity) fields followed by CRLF
 An empty line (i.e., a line with nothing preceding the CRLF)indicating the end of the
header fields
 Optionally a message-body

Message Status-Line

A Status-Line consists of the protocol version followed by a numeric status code and its
associated textual phrase. The elements are separated by space SP characters.
Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF

HTTP Version

A server supporting HTTP version 1.1 will return the following version
information: HTTP-Version = HTTP/1.1

Status Code

The Status-Code element is a 3-digit integer where first digit of the Status-Code defines the class
of response and the last two digits do not have any categorization role. There are 5 values for the
first digit:

S.N. Code and Description

1 1xx: Informational - It means the request was received and the process is continuing.

2 2xx: Success - It means the action was successfully received, understood, and accepted.

3 3xx: Redirection - It means further action must be taken in order to complete the request.
 lOMoARcPSD|30616144

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.

<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.
<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.
<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……….
Basic Markup tags

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
 lOMoARcPSD|30616144

<body> Defines the document's body

<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment

Working with Text and Images with CSS

Text Color

The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"

Program:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
color: blue;
}
h1
{
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is
defined in the body selector.</p>
<p>Another paragraph.</p>
</body>
</html>
CSS Text Alignment and Text Direction
The CSS Text Alignment/Direction Properties
Property Description
direction Specifies the text direction/writing direction
text-align Specifies the horizontal alignment of text
text-align- last Specifies how to align the last line of a text
 lOMoARcPSD|30616144

unicode- bidi Used together with the direction property to set or return whether the text should be
overridden to support multiple languages in the same document

vertical- align Sets the vertical alignment of an element

Text Alignment
Program:
<html>
<head>
<style>
h1 {
text-align: center;
}
h2
{
text-align: left;
}

h3
{
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
CSS Text Decoration
Program:
<html>
<head>
<style>
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
 lOMoARcPSD|30616144

p.ex {
text-decoration: overline underline;
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>

<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this

often confuses the reader.</p>

</body>
</html>

All CSS text-decoration Properties

Property Description
text-decoration Sets all the text-decoration properties in one declaration

text-decoration-color Specifies the color of the text-decoration

text-decoration-line Specifies the kind of text decoration to be used (underline,
overline, etc.)
text-decoration-style Specifies the style of the text decoration (solid, dotted, etc.)
text-decoration- thickness Specifies the thickness of the text decoration line

The CSS Text Spacing Properties

Property Description
letter-spacing Specifies the space between characters in a text
line-height Specifies the line height
text-indent Specifies the indentation of the first line in a text-block
white-space Specifies how to handle white-space inside an element
word-spacing Specifies the space between words in a text

CSS Images
CSS plays a good role to control image display. You can set the following image properties using
CSS.
 The border property is used to set the width of an image border.
 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity property is used to set the opacity of an image.
 lOMoARcPSD|30616144

The Image Border Property

The border property of an image is used to set the width of an image border. This property can
have a value in length or in %.
A width of zero pixels means no border.

<html>
<head>
</head>

<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>

The Image Height Property

The height property of an image is used to set the height of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in which an
image is available.

The Image Width Property

The width property of an image is used to set the width of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in which an
image is available

The -moz-opacity Property

The -moz-opacity property of an image is used to set the opacity of an image. This property is
used to create a transparent image in Mozilla.

CSS Selectors

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
 lOMoARcPSD|30616144

The CSS element Selector

The element selector selects HTML elements based on the element name.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

The CSS 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.
<!DOCTYPE html>
<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>
 lOMoARcPSD|30616144

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;}

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the
page.

Example
The CSS rule below will affect every HTML element on the page:

*{
text-align:
center;
color: blue;}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center; color:
red;}
h2 {
text-align:
center;
color: red;}
p{
text-align: center; color:
red;
}
CSS Flexbox Layout Module
Before the Flexbox Layout module, there were four layout modes:

 Block, for sections in a webpage

 Inline, for text
 Table, for two-dimensional table data
 Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
without using float or positioning.

Flexbox Elements
To start using the Flexbox model, you need to first define a flex container.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to
<em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>
 Output:

Create a Flex Container

1
2
3
A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements(s) of the flexible container automatically becomes flexible

items.

JavaScript: Data Types and Variables

JavaScript Data Types

Data Types Description Example

Number an integer or a floating-point number 3 , 3.234 , 3e-2 etc.
BigInt an integer with arbitrary precision 900719925124740999n , 1n etc.
Boolean Any of two values: true or false true and false
undefined a data type whose variable is not initialized let a;

const x = 5;
const y = "Hello";

Here,
 5 is an integer data.
 "Hello" is a string data.

JavaScript String

String is used to store text. In JavaScript, strings are surrounded by quotes:

 Single quotes: 'Hello'
 Double quotes: "Hello"
 Backticks: `Hello`
For example,
//strings example
const name = 'ram';
const name1 = "hari";
const result = `The names are ${name} and ${name1}`;

JavaScript Number
Number represents integer and floating numbers (decimals and exponentials). For
example,

const number1 = 3;
const number2 = 3.433;
const number3 = 3e5 // 3 * 10^5

JavaScript Boolean
This data type represents logical entities. Boolean represents one of two
values: true or false . It is easier to think of it as a yes/no switch. For example,

const dataChecked = true;

const valueCounted = false;

Javascript Variables:
4 Ways to Declare a JavaScript Variable:
 Using var
 Using let
 Using const
 Using nothing

What are Variables?

Variables are containers for storing data (storing data values).

In this example, x, y, and z, are variables, declared with the var keyword:

Example
var x= 5;
var y= 6;
var z = x + y;
 Declaring a JavaScript Variable
Creating a variable in JavaScript is called "declaring" a variable. You declare a JavaScript variable with
the var or the let keyword:
var carName;
To assign a value to the variable, use the equal sign:
carName = "Volvo";

One Statement, Many Variables

You can declare many variables in one statement.

Start the statement with let and separate the variables by comma:

Example
let person = "John Doe", carName = "Volvo", price = 200;

JavaScript Identifiers(Rules for Variables)

 Names can contain letters, digits, underscores, and dollar signs.
 Names must begin with a letter.
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names.

JavaScript Functions
A JavaScript function is a block of code designed to perform a particular

task. A JavaScript function is executed when "something" invokes it (calls it).

Example:

function myFunction(p1, p2) {

return p1 * p2; // The function returns the product of p1 and p2
}

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {

// code to be executed
}

Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:

 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

Function Return
When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the
invoking statement.

Functions often compute a return value. The return value is "returned" back to the "caller":

Example
Calculate the product of two numbers, and return the result:

let x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

The result in x will be:

12

Why Functions?(Advantages)
You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce different results.

Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Javascript Events
Event Description
onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and
browser actions:

 Things that should be done every time a page loads

 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
JavaScript HTML Events
Click the button to display the date.

The time is?

Tue Jun 28 2022 15:42:44 GMT+0530 (India Standard Time)

jQuery Ajax GET and POST Requests
jQuery $.get() and $.post() Methods
The jQuery's $.get() and $.post() methods provide simple tools to send and
retrieve data asynchronously from a web server. Both the methods are pretty
much identical, apart from one major difference — the $.get() makes Ajax
requests using the HTTP GET method, whereas the $.post() makes Ajax requests
using the HTTP POST method.

The basic syntax of these methods can be given with:

$.get(URL, data, success); —0r— $.post(URL, data, success);