PS02CINT51 Web Programming Unit 1 - Part 1

Web Technology (PS02CMCA53)
Unit 1: Client-side Web Technologies – I
Introduction to HTTP and HTML5:
HTTP:
HTTP is a protocol which allows the fetching of resources, such as HTML documents. It
is the foundation of any data exchange on the Web and it is a client-server protocol,
which means requests are initiated by the recipient, usually the Web browser.
(HyperText Transfer Protocol) The communications protocol used to connect to Web

servers on the Internet or on a local network (intranet). The primary function of HTTP is
to establish a connection with the server and send HTML pages back to the user's
browser.
It is stateless protocol.
OR
HTTP is the protocol used to transfer data over the web. It is part of the Internet protocol
suite and defines commands and services used for transmitting webpage
data. HTTP uses a server-client model. A client, for example, may be a home computer,
laptop, or mobile device.
HTML5:
HTML5 is a markup language used for structuring and presenting content on the World
Wide Web. It is the fifth and last major HTML version that is a World Wide Web
Consortium recommendation. The current specification is known as the HTML Living
Standard.
HTML5 is a programming language whose acronym stands for Hyper Text Markup
Language. It is a system that allows the modification of the appearance of web pages,
as well as making adjustments to their appearance. It also used to structure and present
content for the web.
HTML5 is the latest version of HTML programming that allows better management of
the web application or the website contents. While HTML doesn't allow support for
Video and Audio data in the programming language, HTML5 allows any kind of data to
be incorporated into the program.
HTML5 may contain HTML, JavaScript, CSS.
HTML5 document structure:
DOCTYPE - A basic HTML page starts with the Document Type Declaration or doctype.
That is a way to inform the browser what type of document it is. The doctype is always
the first item at the top of any HTML file. Then sections and subsections come, each
possibly has its heading and subheading. These heading and sectioning elements help
the reader to perceive the content meaning.
The <html> element

The <html> element follows the doctype information, which is used to inform the
browser that this is an HTML document.
he <head> section
The next part is the <head> section. The <head> element contains metadata (document
title, character set, styles, links, scripts), specific information about the web page that is
not displayed to the user.
The <body> element
The <body> of a document contains the content of the document. The content may be
presented by a user agent in different ways. E.g., the content can be text, images, links,
colors, graphics, etc.
Headers:
The <header> element represents a container for introductory content or a set of

navigational links.
A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
Example:
A header for an <article>:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
Body:
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
Example:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Declarations:
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
XHTML and HTML5:
• Extensible HyperText Markup Language (XHTML) and HyperText Markup

Language (HTML5) are both markup languages.
• XHTML is an extension of HTML that was created to solve compatibility issues
across browsers.
• It can be considered as a part of the XML markup language this is because of
XHTML have features of both XML and HTML.
• XHTML is extended from XML and HTML.
• XHTML can be considered as a better version of HTML.
• HTML5 is a newer version of HTML.
HTML elements:
An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>

<p>My first paragraph.</p>
Element ID:
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
Using The id Attribute:
The id attribute specifies a unique id for an HTML element. The value of the id attribute
must be unique within the HTML document.
For example:
<h1 id="head">Demo</h1>
Name:
The name attribute specifies a name for an HTML element.
For example: <input type=”text” name=”txttest” />
Attributes: HTML attributes provide additional information about HTML elements.
 All HTML elements can have attributes

 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
For Example:
<a href="https://www.google.com">Visit Search Engine</a>
<img src="img_girl.jpg">
<p style="color:red;">This is a red paragraph.</p>
HTML Events:
HTML has the ability to let events trigger actions in a browser, like starting a JavaScript
when a user clicks on an element.
1. Onclick: A function is triggered when the button is clicked.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked. The function outputs some text
in a p element with id="demo".</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";
</script>
</body>
</html>
2. Ondblclick: A function is triggered when the button is double-clicked.
<!DOCTYPE html>
<html>
<body>
<button ondblclick="myFunction()">Double-click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is double-clicked. The function outputs
some text in a p element with id="demo".</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
</script>
</body>
</html>
3. OnFocus: A function is triggered when one of the input fields get focus.
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when one of the input fields get focus. The function
changes the background-color of the input field.</p>
First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="myFunction(this.id)">
<script>
function myFunction(x) {
document.getElementById(x).style.background = "yellow";
</script>
</body>
</html>
4. On Submit: When you submit the form, a function is triggered which alerts some
text.
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
alert("The form was submitted");
</script>
</body>
</html>
5. Onblur: When you leave the input field, a function is triggered.

<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" name="fname" id="fname"

onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input
text to upper case.</p>
<script>
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
</script>
</body>
</html>
HTML Forms:
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
HTTP Verbs:
 GET: It is a default method. Passes user input with URL query string. That is
why, it is not considered as secure method.
 POST: It is not a default method. It never pass user input with URL query string.
That is why, it is considered as secure method.
HTML5 media:
Multimedia on the web is sound, music, videos, movies, and animations.
Multimedia comes in many different formats. It can be almost anything you can hear or
see, like images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works:
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not
set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
<video width="320" height="240" autoplay>

</video>
Add muted after autoplay to let your video start playing automatically (but muted):
<video width="320" height="240" autoplay muted>

</video>
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>

</audio>
Add muted after autoplay to let your audio file start playing automatically (but muted):
<audio controls autoplay muted>

</audio>
DOM:
The Document Object Model (DOM) is a programming interface for HTML and
XML(Extensible markup language) documents. It defines the logical structure of
documents and the way a document is accessed and manipulated.
Introduction to CSS:
What is CSS?
 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at
once
 External stylesheets are stored in CSS files
CSS Syntax:
A CSS rule consists of a selector and a declaration block.
CSS Syntax as below:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
CSS (Different properties, value, units and specifying colors):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
font-size:50px;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
JavaScript Features:
 Object-Centered Script Language.

 Client edge Technology.
 Validation of User's Input.
 Else and If Statement.
 Interpreter Centered.
 Ability to perform In Built Function.
 Case Sensitive format.
 Light Weight and delicate.
JavaScript Advantages:
 Speed. Since JavaScript is an 'interpreted' language, it reduces the time required by
other programming languages like Java for compilation. ...
 Simplicity. JavaScript is easy to understand and learn. ...
 Popularity. ...
 Interoperability. ...
 Server Load. ...
 Rich Interfaces. ...
 Extended Functionality. ...
 Versatility.
Dialogue Boxes (PopUp Boxes):
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the
user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
The window.alert() method can be written without the window prefix.
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.
Syntax
window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.
Syntax
window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window prefix.

PS02CINT51 Web Programming Unit 1 - Part 1

Uploaded by

Copyright:

Available Formats

PS02CINT51 Web Programming Unit 1 - Part 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PS02CINT51 Web Programming Unit 1 - Part 1

Uploaded by

Copyright:

Available Formats

Web Technology (PS02CMCA53)

Unit 1: Client-side Web Technologies – I

Introduction to HTTP and HTML5:

(HyperText Transfer Protocol) The communications protocol used to connect to Web

HTML5 may contain HTML, JavaScript, CSS.

HTML5 document structure:

The <html> element

The <header> element represents a container for introductory content or a set of

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

A header for an <article>:

The <body> tag defines the document's body.

All HTML documents must start with a <!DOCTYPE> declaration.

• Extensible HyperText Markup Language (XHTML) and HyperText Markup

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

The HTML id attribute is used to specify a unique id for an HTML element.

Using The id Attribute:

Attributes: HTML attributes provide additional information about HTML elements.

 All HTML elements can have attributes

1. Onclick: A function is triggered when the button is clicked.

<button onclick="myFunction()">Click me</button>

document.getElementById("demo").innerHTML = "Hello World";

2. Ondblclick: A function is triggered when the button is double-clicked.

<button ondblclick="myFunction()">Double-click me</button>

document.getElementById("demo").innerHTML = "Hello World";

First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>

Last name: <input type="text" id="lname" onfocus="myFunction(this.id)">

<form action="/action_page.php" onsubmit="myFunction()">

Enter name: <input type="text" name="fname">

<input type="submit" value="Submit">

alert("The form was submitted");

5. Onblur: When you leave the input field, a function is triggered.

Enter your name: <input type="text" name="fname" id="fname"

Multimedia on the web is sound, music, videos, movies, and animations.

<video width="320" height="240" controls>

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

<video width="320" height="240" autoplay>

<video width="320" height="240" autoplay muted>

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:

<audio controls autoplay>

<audio controls autoplay muted>

 CSS stands for Cascading Style Sheets

A CSS rule consists of a selector and a declaration block.

CSS Syntax as below:

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

The declaration block contains one or more declarations separated by semicolons.

CSS (Different properties, value, units and specifying colors):

<p>These paragraphs are styled with CSS.</p>

 Object-Centered Script Language.

The window.alert() method can be written without the window prefix.

The window.confirm() method can be written without the window prefix.

The window.prompt() method can be written without the window prefix.

You might also like