[go: up one dir, main page]
Scribd
Upload
37 views50 pages

WT Notes PSP

Uploaded by

kingomsri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views50 pages

WT Notes PSP

Uploaded by

kingomsri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

UNIT I:

 Introduction to HTML5
o Headings
o Linking
o Images
o Lists
o Tables
o Forms
 Cascading Style Sheets (CSS)
o Types of CSS
o CSS Selectors
o CSS Positioning
o CSS Backgrounds
o CSS Box Model
o CSS Gradients
o Animation
 JavaScript
o Introduction to JavaScript
o Control Statements
Introduction to HTML5
 HTML stands for Hyper Text Markup Language.

 HTML is the language of the World Wide Web.

 HTML is not a programming language.

 HTML is a markup language.

 HTML is used for creation of Web pages.

 HTML is not case sensitive

 HTML specifies the structure and content of documents


that are displayed in web browsers.
HTML5 document

 To create a HTML5 document, we need text editor.

 To display web page, we require a web browser.

 A Web Browser reads HTML5 documents and also displays


them as web pages

 HTML5 document has tags, which are the basic elements


of a document.

 A tag is made up of a left operator (<) and a right

operator (>) and tag name between these two operators.

 All tags are paired.


i.e., all tags in HTML have staring tag and ending tag.

 The stating tags are called as opening tags and ending


tags are called as closing tags.

 Both tags will be similar except the (/) before the tag name
in ending tag.

 Some of the opening tags include attributes.

 Attributes are used to define the character of the tag.


 HTML5 document must start with document type
declaration.
<!DOCTYPE html>

 <!DOCTYPE> just an instruction to the browser about the


document type.

 <!DOCTYPE> tag is used to inform the browser about the


version of HTML used in the document.

 <!DOCTYPE> is a null element which does not contain the


closing tag.

 HTML documents should begin with <html> and end with


</html> tag.

 These tags tell the web browser that it is HTML document.

 Each HTML5 document is divided into two sections. These


are
 Head section

 Body section
Head Section

This is the first part of our html document.

The following tags can be added to the head section

Tag Description

<head> Defines information about the document

<title> Defines the title of a document

<link> Defines the relationship between a


document and an external resource

<meta> Defines metadata about an HTML document

<script> Defines a client-side script

<style> Defines style information for a document

Example :

<html>

<head>

<title> my first page </title>

</head>

</html>
Body Section:

This section contains the tags, which make up the web page
very attractive.

This tag contains attributes to set the background color,


background image, text size and so on.

Example:

<body bgcolor=”red”>

</body>
HTML Heading

Headings are defined with the <h1> to <h6> tags.

These tags display the headings with different font sizes,


paragraph breaks.

<h1> defines the most important heading.

<h6> defines the least important heading.


Example
<!DOCTYPE html>
<html>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>
Output
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
HTML Paragraphs
HTML documents are divided into paragraphs.

Paragraphs are defined with the <p> tag.

A paragraph always starts on a new line, and browsers


automatically add some white space (a margin) before and after
a paragraph.

Example

<!DOCTYPE html>

<html>

<body>

<p>This is a first paragraph.</p>

<p>This is a second paragraph.</p>

<p>This is a third paragraph.</p>

</body>

</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.


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

HTML img tag is an empty tag that contains attributes only, closing tags
are not used in HTML image element.

Attributes of HTML img tag

1. src
2. alt
3. width
4. height
Example:

<!DOCTYPE>
<html>
<body>
<img src="Murugan.jpg" height="200" width="200" alt="God image">
</body>
</html>
Output

alt Attribute

The alt attribute defines an alternate text for the image, if it can't be
displayed. The value of the alt attribute describes the image in words.
HTML Linking
The HTML anchor tag defines a hyperlink that links one page to another
page.

It can create hyperlink to other web page as well as files, location, or any
URL.

The "href" attribute is the most important attribute of the HTML a tag.
and which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked.

In other words, it points out the destination page.

<a href="second.html">Click for Second Page</a>

void Elements

HTML elements with no content are called void elements.

<img> is an void element without a closing tag

<br> is an void element without a closing tag

Using Images as Hyperlinks

We can also link an image with other page or we can use an image as a
link. To do this, put <img> tag inside the <a> tag.

<a href="flower1.html"><img src="flower.jpg" ></a>


HTML Lists
HTML Lists are used to specify lists of information. All lists may
contain one or more list elements.

 Ordered List or Numbered List (ol)


 Unordered List or Bulleted List (ul)

We can create a list inside another list, which will be termed as


nested list.

Ordered List or Numbered List (ol)

In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also.

The ordered list starts with <ol> tag and the list items start with
<li> tag.

Example:

<!DOCTYPE>

<html>

<body>

<ol>

<li>BAT</li>

<li>CAT</li>

<li>MAT</li>

<li>RAT</li>
</ol>

</body>

</html>

Unordered List or Bulleted List (ul)

In HTML Unordered list, all the list items are marked with
bullets. It is also known as bulleted list also.

The Unordered list starts with <ul> tag and list items start with
the <li> tag.

<!DOCTYPE>

<html>

<body>

<ul>

<li>BAT</li>

<li>CAT</li>

<li>MAT</li>

<li>RAT</li>

</ul>

</body>

</html>
HTML Tables
HTML tables allow web developers to arrange data into rows
and columns.

A table in HTML consists of table cells inside rows and columns.

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the


table cell.

A table cell can contain text, images, lists and links.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers

Sometimes you want your cells to be table header cells. In


those cases use the <th> tag instead of the <td> tag:

th stands for table header.


Write HTML code to insert text and images into table

<html>
<body>
<table border=3 bordercolor=red align="center">
<tr>
<th bgcolor=yellow>text</th>
<th bgcolor=yellow>images</th>
</tr>
<tr>
<td> Murugan </td>
<td><img src="murugan.jpg" width=200 height=200></td>
</tr>
<tr>
<td> Saraswati </td>
<td><img src="saraswati.jpg" width=200 height=200></td>
</tr>
</table>
</body>
</html>
Output:
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.

The <form> element is a container for different types of input


elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

<input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending


on the type attribute.

Here are some examples:


Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button


Text Fields

The <input type="text"> defines a single-line input field for text


input.

<label> Element

The <label> tag defines a label for many form elements.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of


choices.

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited


number of choices.

Submit Button

The <input type="submit"> defines a button for submitting the


form data to a form-handler.

The form-handler is typically a file on the server with a script for


processing input data.

The form-handler is specified in the form's action attribute.


Create your bio-data form on a web page using all input types

<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<form>
<fieldset>
<legend>Employee Details</legend>
<p>
First name: <input type = "text" name = "fname" />
</p>
<p>
Last name: <input type = "text" name = "lname" />
</p>
<p>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</p>
<p>
Employee ID: <input type = "text" name = "ID" />
</p>
<p>
Designation: <input type = "text" name = "ID" />
</p>
<p>
Phone Number: <input type = "text" name = "phone" />
</p>
<p>
<input type = "submit" name = "submit" value = "Submit" />
</p>
</fieldset>
</form>
</body>
</html>
Cascading Style Sheets (CSS)
CSS stands for Cascading Style Sheets.

It provides an additional feature to HTML.

It is generally used with HTML to change the style of web


pages.

With CSS, we can add new looks to old HTML documents.

We can completely change the look of website with only a few


changes in CSS code.

CSS is added to HTML pages to format the document.

Types of CSS

There are three ways to insert CSS in HTML documents.

1. Inline Style Sheet


2. Internal(embedded) Style Sheet
3. External Style Sheet
Inline Style Sheet

 It applies style to a particular element in a web page.


 This is the HTML-specific style inclusion method.
 In this, style information is directly attached to the HTML
elements.
 In this, operator colon (:) is followed by style property.
 To separate multiple properties, we have to use operator
semicolon (;).
 With this style sheet, only one tag can be formatted at a
time

Example:

<html>
<body>
<h1 style=”color: red; font-style: italic”> RVR</h1>
</body>
</html>
Internal (embedded) style sheet:

If style is used as tag in header section, then that style sheet is


known as internal style sheet.

If we include all the formatting parameters in between <style>


and </style>, then this is called as internal style sheets.

With this style sheet, several tags can be formatted at a time.

Example:

<html>
<head>
<style>
h1 {color: red; font-style: italic}
p { color: green; font-style: bold}
</style>
</head>
<body>
<h1>RVR</h1>
<p>Rayapati Venkata Rangarao</p>
</body>
</html>
External style sheet:

It is a file created separately, saved with the .css extension and


attached to an html document by the link element.

Linking an external style sheet can apply styles to multiple web


pages.

So, In this, total style elements are defined in a separate


document and this document is added to required web page.

Example:

mystyle.css

h1 {color: red; font-style: italic}

p { color: green; font-style: bold

mypage.html

<html>

<head>

<link rel=”stylesheet” href=”mystyle.css”>

< /head>

<body>

<h1>RVR</h1>

<p>Rayapati Venkata Rangarao</p>

</body>

</html>
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:

1. CSS element Selector


2. CSS id Selector
3. CSS class Selector
4. CSS Universal Selector
5. CSS Grouping Selector

CSS element Selector

The element selector selects HTML elements based on the


element name.

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>II/IV CSE A-SECTION Students </h1>
</body>
</html>
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>
#a
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id=”a”>II/IV CSE A-SECTION Students </h1>
</body>
</html>
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.

<!DOCTYPE html>
<html>
<head>
<style>
.a
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”a”>RVR&JC COLLEGE OF ENGINEERING </h1>
<p class=”a”> II/IV CSE A-SECTION Students</p>
</body>
</html>
CSS Universal Selector

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


page.

<!DOCTYPE html>

<html>

<head>

<style>

text-align: center;

color: red;

</style>

</head>

<body>

<h1>RVR&JC COLLEGE OF ENGINEERING </h1>

<h2>CSE DEPARTMENT</h2>

<p> II/IV CSE A-SECTION Students</p>

</body>

</html>
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;
}
It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In this example we have grouped the selectors from the code


above:

h1, h2, p {
text-align: center;
color: red;
}
CSS Positioning
CSS position is one of the key topics in CSS which helps to
understand how to place HTML elements at various locations
on a web page.

The CSS position property defines, as the name says, how the
element is positioned on the web page.

Relative Positioning:-

The element is positioned relative to its normal position.

Absolute positioning:-

The element is positioned absolutely to its first positioned


parent.
CSS Background
Following table shows various CSS background properties.

Background properties Description

background-color Sets background color to the element.


background-image Sets background image to the element.

background-repeat Repeats background image horizontally/vertically

background-attachment Sets background image is fixed or scrolls

background-position Sets background image position.

Background color property sets background color to the HTML element.

Example Description

Sets background color using CSS class.


.bColor { background-color:Yellow;

h1 {background-color:Yellow;} Sets background color (Yellow) to all H1 elements.

div { background-color:Blue; } Sets background color (Blue) to all DIV elements.

body{background-color:Green;} Sets background color (Green) to BODY element.

h1,h3 {background-color:Yellow;}
Sets background color (Yellow) to elements (h1,h3).
CSS Box Model
HTML page is a collection of HTML elements (ex: P, DIV, H1).
Each element is considered as a box.

Each box has four areas/layers.

 First area is a content area. Content can be text and image.


 Around content area, padding area (space around the
HTML element content) is applied.

 Around padding area, border area is applied.

 Around border area, margin area (space around the HTML


element border) is applied.
Each element’s content, padding, border and margin properties
can be adjusted.
All the time, padding, border and margin properties are applied
to each element implicitly or explicitly.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>BOX</div>
</body>
</html>

Output:
CSS Gradients
CSS gradients let you display smooth transitions between two
or more specified colors.

CSS defines two types of gradients:

o Linear Gradients (goes down/up/left/right/diagonally)


o Radial Gradients (defined by their center)

Linear Gradients

To create a linear gradient you must define at least two color


stops.

Color stops are the colors you want to render smooth


transitions among.

You can also set a starting point and a direction (or an angle)
along with the gradient effect.

Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Example:

<html>
<head>
<style>
#grad1
{
height: 200px;
background-color: red;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to
yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>

Output:-
Radial Gradients
A radial gradient is defined by its center.

To create a radial gradient you must also define at least two


color stops.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
Introduction to JavaScript
We can use JavaScript with HTML to create interactive web
pages.

JavaScript turns static HTML web pages into interactive web


pages by dynamically updating content.

Variables in JavaScript

To create a variable in JavaScript, we use the let keyword or var


keyword.

<html>

<head>

<script>

var name;

name = 'Abhiram';

document.write(name);

</script>

</head>

</html>
UNIT II

 JavaScript
o Functions
o Arrays
o JavaScript Objects
Functions in JavaScript
Functions are the basic building block of JavaScript. Functions
allow us to encapsulate a block of code and reuse it multiple
times.

Functions make JavaScript code more readable, organized,


reusable, and maintainable.

Syntax:

function <function-name>(arg1, arg2, arg3,...)


{
//write function code here
}
In JavaScript, a function can be defined using the function
keyword, followed by the name of a function and parentheses.

Example:

<html>
<head>
<script>
function message()
{
document.write(“HELLO”);
}
</script>
<body>
<button onclick=”message()”>Message</button>
</body>
</html>
Random Number Generation

<html>
<head>
<script>
function RandomNumber()
{
document.getElementById('a').innerHTML= Math.random();
}
</script>
</head>
<body>
<button onclick=RandomNumber()>Random</button>
<h1 id="a"></h1>
</body>
<html>
Create a web page having radio buttons labeled as name of
colours. Clicking on each radio button should change the
colour of the Web page
<html>
<head>
<script>
function Pink( )
{
document.bgColor=”pink”;
}
function Red( )
{
document.bgColor=”red”;
}
</script>
</head>
<body>
<label><input type="radio" onClick=”Pink()”> Pink</label><br>

<label><input type="radio" onClick=”Red()”> Red</label><br>

</body>
</html>
JavaScript Array
JavaScript array represents a collection of similar type of
elements.

Example:

<html>

<body>

<script>

var emp=["prasad","ramesh","chandra"];

for (i=0;i<emp.length;i++)

document.write(emp[i] + "<br/>");

</script>

</body>

</html>

Output:

Prasad

Ramesh

Chandra
Random Image Generator Using Arrays

<html>
<head>
<script>
function RandomImage()
{
var
i=["saraswati.jpg","lakshmidevi.jpg","murugan.jpg","saibaba.jpg"
];
var n=Math.floor(Math.random()*i.length);
document.getElementById('a').innerHTML=n;
document.getElementById('b').src=i[n];
}
</script>
</head>
<body>
<button onclick=RandomImage()>Random Image</button>
<h1 id="a"></h1>
<img id="b" width=200px height=200px>
</body>
</html>
Output:
JavaScript Objects
We know JavaScript is an object-based language.

In the world of JavaScript, an object is a collection of properties


and methods that are grouped together in a single name.

Properties contain data and methods perform operations on


that data contained in those properties.

Properties and methods are the core elements from which


objects formed in JavaScript.

In JavaScript, there are four types of objects. They are as


follows:
1. User-defined objects
2. Built-in objects (Date, Number, String, Math, Boolean objects)
3. Browser object (window object)
4. Document object
Math Object

The JavaScript Math object provides several constants and


methods to perform mathematical operation.

Methods of Math Object

Let's see the list of JavaScript Math methods with description.

Methods Description
min() It returns minimum value of the given numbers.
max() It returns maximum value of the given numbers.
pow() It returns value of base to the power of exponent.
round() It returns closest integer value of the given number.
sqrt() It returns the square root of the given number
round() It returns closest integer value of the given number.
random() It returns random number between 0 and 1
Write a Javascript code to find square root of the given number

<!DOCTYPE html>
<html>
<body>
<script>
document.writeln(Math.sqrt(12));
</script>
</body>
</html>
Output:
3.464
Write a Javascript code to generate random number

<!DOCTYPE html>

<html>

<body>

<script>

document.writeln(Math.random());

</script>

</body>

</html>
String Object

The JavaScript string is an object that represents a sequence of


characters.

Example:

<!DOCTYPE html>
<html>
<body>
<script>
var str="SIVA PRASAD";
document.write(str);
</script>
</body>
</html>
Methods of String object

Let's see the list of JavaScript string methods with description

Methods Description
charAt() It provides the char value present at the
specified index.
concat() It provides a combination of two or more
strings.
indexOf() It provides the position of a char value present
in the given string.
substr() It returns closest integer value of the given
number.
toLowerCase() It converts the given string into lowercase
letter..
toUpperCase() It converts the given string into uppercase
letter.
Write a JavaScript code to find the length of a given string

<!DOCTYPE html>
<html>
<body>
<script>
var name="RVRJC";
document.write(name.length);
</script>
</body>
</html>
Output: 5
Date Object

The JavaScript Date object can be used to get year, month and
day. You can display a timer on the webpage by the help of
JavaScript date object.

Methods of Date object Methods

Let's see the list of JavaScript date methods with their


description.

Methods Description
It returns the integer value between 1 and 31 that
getDate()
represents the day for the specified date

It returns the integer value between 0 and 6 that


getDay()
represents the day of the week
getFullYears() It returns the value that represents the year
It returns the integer value between 0 and 23 that
getHours()
represents the hours.

It returns the integer value between 0 and 59 that


getMinutes()
represents the minutes.

It returns the integer value between 0 and 11 that


getMonth()
represents the month.

It returns the integer value between 0 and 60 that


getSeconds()
represents the seconds.
Write a JavaScript which generates a different greeting each
time the script is executed.

<html>
<head>
<script>
var time=new Date();
var hrs=time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
document.writeln("Time is "+hrs+":"+min+":"+sec+"<br>");
if((hrs>0)&&(hrs<=12))
document.writeln("good morning");
else if((hrs>12)&&(hrs<=16))
document.writeln("good afternoon");
else if((hrs>16)&&(hrs<=20))
document.writeln("good evening");
else
document.writeln("good night");
</script>
</head>
</html>
Number Object

The JavaScript number object enables you to represent a


numeric value.

Methods of Number object

Methods Description
parseInt() It converts the given string into an integer number.
parseFloat() It converts the given string into a floating point
number.
isInteger() It determines whether the given value is an
integer.

Boolean object

JavaScript Boolean is an object that represents value in two


states: true or false.

JavaScript Boolean Example

<script>

document.write(10<20);//true

document.write(10<5);//false

</script>

You might also like