Scribd
Upload
8 views153 pages

Web Notes MCA (Full)

HTML, or Hyper Text Markup Language, is a markup language used for designing web pages and consists of various elements and attributes that define the structure and content of a webpage. It has evolved through multiple versions since its creation by Tim Berners-Lee in 1991, with HTML 5 being the current standard. The document outlines the basic structure, elements, attributes, and formatting tags used in HTML, as well as an introduction to CSS selectors and color formats.

Uploaded by

rbeginnernoob
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
8 views153 pages

Web Notes MCA (Full)

HTML, or Hyper Text Markup Language, is a markup language used for designing web pages and consists of various elements and attributes that define the structure and content of a webpage. It has evolved through multiple versions since its creation by Tim Berners-Lee in 1991, with HTML 5 being the current standard. The document outlines the basic structure, elements, attributes, and formatting tags used in HTML, as well as an introduction to CSS selectors and color formats.

Uploaded by

rbeginnernoob
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

HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and markup language.
● Hypertext defines the link between the web pages.
● Markup language is used to define the text document within tag which defines the
structure of web pages.

This language is used to annotate (make notes for the computer) text so that a machine can
understand it and manipulate text images and other content to display it in required format. Most
of markup (e.g. HTML) languages are human readable. Language uses tags to define what
manipulation has to be done on the text. It was created by Tim Berners-Lee in 1991.

A Short History of HTML Standards,


● HTML is a very evolving markup language and has evolved with various versions
updating. Long before its revised standards and specifications are carried in, each version
has allowed its user to create web pages in a much easier and prettier way and make sites
very efficient.
● HTML 1.0 was released in 1993 with the intention of sharing information which can be
readable and accessible via web browsers. But not much of the developers were involved
in creating websites. So the language was also not growing.
● HTML 2.0, published in 1995; which contains all the features of HTML 1.0 along with
that few additional features; which remained as the standard markup language for
designing and creating websites until January 1997 and refined various core features of
HTML.
● HTML 3.0 where Dave Raggett who introduced a fresh paper or draft on HTML. It
included improved new features of HTML, giving more powerful characteristics for
webmasters in designing web pages. But these powerful features of new HTML slowed
down the browser in applying further improvements.
● HTML 4.01 which is widely used and was a successful version of HTML before HTML
5.0, which is currently released and used worldwide.
● HTML 5 can be said for as an extended version of HTML 4.01 which was published in
the year 2012.
Structure Of HTML
The Basic structure of HTML page is given below. It contains some elements like head, title,
body, etc. These elements are used to build the blocks of web [Link] is case-insensitive

HTML Attributes
An attribute is a property name used to provide supplementary information about HTML
elements. Some common examples of HTML attributes are id, class, align, etc. Many attributes
are defined globally and are applied to any element, whereas we use some of them only for
specific HTML elements.
You can define an attribute as the characteristics of any HTML tag that needs to be placed within
the opening tag.
HTML attributes consist of two parts:
● a name and
● a value
Html Elements

<!DOCTYPE> Tag
On the HTML document you have often seen that there is a <!DOCTYPE html> declaration
before the <html> tag. It is used to inform the browser about the version of HTML used in the
document. It is called as the document type declaration (DTD).
Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the
document type. It is a null element which does not contain the closing tag, and must not include
any content within it.

<HTML> Tag
It is the root of the html document which is used to specify that the document is html. This tag
tells the browser that this is an HTML document.
The <HTML> tag is the container for all other HTML elements (except for the
<!DOCTYPE> tag). Practically <HTML> is the first tag in an HTML page and </HTML> is the
last tag.

Attribute Description

[Link] Class of the element.

2. DIR Gives the direction of directionally neural text. Possible values LTR and RTL.

3. ID Unique alphanumeric identifier for the tag, which can be used to refer it.

4. LANG Language used for the tag.

5. VERSION Version of the language is used. Now the version is stored in the <!DOCTYPE>
tag

6. XMLS Declares a namespace for custom tags in an HTML document. Attribute name can
be assigned to group.

<HEAD> Tag
It contains the head of an HTML document, which holds information about the document such as
its title. Once we opened this tag then we must close it as </HEAD>.

<TITLE> Tag
The <TITLE> tag is required in all HTML documents and it defines the title of the document. It
defines a title in the browser toolbar. That provides a title for the page when it is added to
favorites and displays a title for the page in search-engine results. It also has a closing tag
</TITLE>.
<BODY> Tag
The HTML <BODY> tag is used for indicating the main content section of the HTML
document. This tag defines the document's body. It contains all the contents of an HTML
document such as text, hyperlinks, images, tables, lists, etc. Once <BODY> tag is opened, it
must be closed </BODY> before the closing of </HTML> tag.

Attribute Values Description


[Link] url Specifies a background image for a document

2. bgcolor RGB Specifies a background color for a document

3. link RGB Specifies the color of unvisited links in a document

4. alink RGB Specifies the color of an active link in a document

5. vlink RGB Specifies the color of visited links in a document

6. text RGB Specifies the color of text

[Link] Pixel Sets a margin along the top of your body

[Link] Pixel Sets a left margin along the body

9. scroll Yes or No Specifies whether a vertical scrollbar appears to the right of the
document

Text Formatting Tags

Heading Tags
Headings are defined with the <H1> to <H6> tags. <H1> defines the most important heading.
<H6> defines the least important heading.
Eg: <H1> Heading </H1>

Bold Tag <B>


<B> element is a physical tag which displays text in bold font. Eg: <B> text </B>

Italic Tag <I>


<I> element is physical element, which display the enclosed content in italic font.\
Eg: <I>text</I>

Underline Tag <U>


<U> element is shown in underlined text. Eg: <U>text</U>

Superscript Tag<SUP>
<SUP> element, is shown in superscript Eg: <SUP>text</SUP>

Subscript Tag<SUB>
<SUB> element, is shown in subscript Eg: <SUB>text</SUB>

<HR> Tag
The <HR> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a
thematic break in an HTML page to divide or separate document sections. It is an empty tag and
it does not require an end tag.

Attribute Value Description

Align left, right, Deprecated − Specifies the alignment of the


center horizontal rule.

noshade Noshade Removes the usual shading effect that most browsers display.

Size pixels or % Specifies the height of the horizo


ntal rule.
Width pixels or % Specifies the width of the horizontal rule.

Color #0088ff Specifies the display color of a horizontal rule.

<IMG> Tag
The <IMG> tag is used to insert an image into a document. In HTML the
<IMG> tag has no end tag.
Attribute Value Description

Src URL the url of an image

Align top, bottom, middle, left, Specifies the alignment for the image.
right

Alt Text Specifies alternate text

Border Pixels Specifies the width of the image border.

Width pixels or % Sets the width of an image in pixels or in %.

Height pixels or % Specifies the height of the image.

Hspace Pixels Amount of white space to be inserted to the left


and right of the object.

Vspace Pixels Amount of white space to be inserted to the top


and bottom of the object.

List Tags
HTML offers web authors three ways for specifying lists of information. All
lists must contain one or more list elements. Lists may contain

1. <UL> − An unordered list. This will list items using plain


bullets.
2. <OL> − An ordered list. This will use different schemes
of numbers to list your items.
3. <DL> − A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.
<UL> Unordered List

An unordered list starts with the <UL> tag. Each list item starts with the
<LI> tag. The list items are marked with bullets i.e. small black circles by
default. Both require an end tag. </LI> and </UL>.

Type Attribute Description


type=disc Sets the list item marker to a bullet (default)

type=circle Sets the list item marker to a circle

type=square Sets the list item marker to a square

type=none The list items will not be marked

Eg:
<UL type=circle>
<LI>Coffee</LI>
<LI>Tea</LI>
<LI>Milk</LI>
</UL>

<OL> Ordered List

An ordered list starts with the <OL> tag. Each list item starts with the <LI> tag. The
list items will be marked with numbers by default. Both require an end tag. </LI> and
</OL>.

Type Attribute Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Eg:
<OL type=”1”>
<LI>Coffee</LI>
<LI>Tea</LI>
<LI>Milk</LI>
</OL>
<DL> Definition List
A description list is a list of terms, with a description of each term. Definition List makes
use of following three tags.

⮚ <DL> − Defines the start of the list


⮚ <DT> − A term </DT>
⮚ <DD> − Term definition </DD>
⮚ </DL> − Defines the end of the list

Eg:
<DL>
<DT>Coffee</DT>

<DD>- black hot drink</DD>

<DT>Milk</D<DT> Milk </DT>

<DD>- white cold drink</DD>

</DL>

Nested List
A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in
HTML is to recognize that the sublist is actually a child of a list item and not of a list.
Eg: <!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

Working with links


Anchor <A> Tag
The <A> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <A> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
● An unvisited link is underlined and blue
● A visited link is underlined and purple
● An active link is underlined and red

Linking Same Page and different pages using Relative and Absolute Pathname
Absolute URLs vs. Relative URLs
absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without
the "[Link] part)
Eg:
<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>

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)

Simple Selectors
The CSS element Selector

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

Eg:

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

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.

Syntax :

#para1 {
text-align: center;
color: red;
}

<!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>

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.

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>
HTML elements can also refer to more than one class.
Eg: <p class="center large"> This paragraph refers to two classes. </p>

You can also specify that only specific HTML elements should be affected by a class.
Eg:
[Link] {
text-align: center;
color: red;
}
The CSS Universal Selector

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

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

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>


<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>
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;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

h1, h2, p {
text-align: center;
color: red;
}

CSS Colors
CSS allows for a variety of color formats to style web content. Here are the types of color
formats you can use in CSS:
Hexadecimal (Hex): Uses a hash symbol followed by three or six digits representing the red,
green, and blue components. For example, #ff0000 for red.
RGB: Stands for Red, Green, and Blue. Colors are defined using the rgb(red, green, blue)
format, where each value is between 0 and 255.
RGBA: Similar to RGB but adds an alpha channel for opacity, defined as rgba(red, green, blue,
alpha). The alpha value ranges from 0 (transparent) to 1 (opaque).
HSL: Stands for Hue, Saturation, and Lightness. It’s written as hsl(hue, saturation%,
lightness%), with hue as an angle between 0 and 360 degrees, and saturation and lightness as
percentages.
HSLA: Just like HSL but includes an alpha channel for opacity, formatted as hsla(hue,
saturation%, lightness%, alpha).
Named Colors: CSS supports named colors like red, green, blue, which are predefined in all
modern browsers.
Color Keywords: CSS3 introduced keywords like transparent and currentColor, which represent
a fully transparent color and the current color of an element, respectively.

Formatting Text with HTML and CSS


The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Look at CSS Color Values for a complete list of possible color values.
The default text color for a page is defined in the body selector.
body {
color: blue;
}

h1 {
color: green;
}
Text Color and Background Color
In this example, we define both the background-color property and the color property.
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}

TEXT DECORATION
Text decoration is used to add or remove decorations from the text.
Text decoration can be underline, overline, line-through or none.
Syntax:
body
{
text-decoration:decoration type;
}
Eg:
<html>
<head>
<style>
h1
{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>
HELLO WORLD
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

TEXT TRANSFORMATION
Text transformation property is used to change the case of text, uppercase or lowercase.
Text transformation can be uppercase, lowercase or capitalize.
Capitalize is used to change the first letter of each word to uppercase.
Syntax:
body
{
text-transform:type;
}

Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-transform:lowercase;
}
</style>
</head>
<body>
<h1>
HELLO WORLD
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

TEXT INDENTATION
Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.
Syntax:
body
{
text-indent:size;
}
Eg: <!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-indent:80px;
}
</style>
</head>
<body>
<h1>
HELLO WORLD
</h1>
<h2>
This is text formatting properties.<br>
Text indentation property is used to indent the first line of the paragraph.
</h2>
</body>
</html>

LETTER SPACING
This property is used to specify the space between the characters of the text.
The size can be given in px.
Syntax:
body
{
letter-spacing:size;
}
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
letter-spacing:4px;
}
</style>
</head>
<body>
<h1>
HELLO WORLD
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>

LINE HEIGHT
This property is used to set the space between the lines.
Syntax:
body
{
line-height:size;
}
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
line-height:40px;
}
</style>
</head>
<body>
<h1>
HELLO WORLD
</h1>
<h2>
This is text formatting properties.<br>
This property is used to set the space between the lines.
</h2>
</body>
</html>

CSS Text Alignment


Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is
default if text direction is left-to-right, and right alignment is default if text direction is
right-to-left)
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
When the text-align property is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers):
div {
text-align: justify;
}

Using CSS to Style a Site


Types of CSS or Levels of CSS

CSS can be added to HTML in the following ways:


● Inline - using the style attribute in HTML elements
● Internal - using the <style> element in the <head> section
● External - using an external CSS file

Syntax:
The CSS element syntax is Selector
{
Declaration; /*property:value; Declaration; /*property:value*/
}
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 property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly braces
Inline Style Sheet:

An inline style can be used if a unique style is to be applied to one single occurrence of an
element
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any
CSS property

Example:
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Internal Style Sheet:
An internal style sheet can be used if one single document has a unique style.
Internal styles are defined in the <head> section of an HTML page, by using the <style> tag
<style> tag comes under the head tag. It is a paired tag

Syntax:
<head>
<style>
Selector
{
Declaration; /*property:value*/ Declaration; /*property:value*/
}
</style>
</head>
Example:
<html>
<head>
<style>
body {
background-color:pink;
}
p{
color:blue;
}
</style>
</head>
<body>
I am Jahnavi. This is Internal Style sheet
<p> Cascading Style Sheets </p>
</body>
</html>
External Style Sheet

An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by changing one file.
Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
<head> section
An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension

Syntax:

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Example:
/* This is an external style sheet file. Save this file as [Link]*/
p
{
color: yellow;
}

h2
{
color: red;
text-align: left; font-size: 8pt;
}

<!—Save this as [Link]-->


<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
Hello Everybody!!
<hr>
<p> hggggggggggggggg </p>
<h2>I am Jahnavi</h2>
<h3> Welcome to web technology </h3>
</body>
</html>

<!--Save this as [Link]-->


<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<hr>
Welcome to V sem MCA
<h2>I teach web technology</h2>
<hr>
<h3> Welcome to SJEC </h3>
</body>
</html>

The Box Model

The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages. It can be
used as a toolkit for customizing the layout of different elements. The web browser renders every
element as a rectangular box according to the CSS box model. Box-Model has multiple
properties in CSS. Some of them are given below:
● content: This property is used to displays the text, images, etc, that can be sized using
the width & height property.
● padding: This property is used to create space around the element, inside any defined border.
● border: This property is used to cover the content & any padding, & also allows to set the
style, color, and width of the border.
● margin: This property is used to create space around the element ie., around the border area.

● Content Area: This area consists of content like text, images, or other media content. It is
bounded by the content edge and its dimensions are given by content-box width and height.
● Padding Area: It includes the element’s padding. This area is actually the space around the
content area and within the border-box. Its dimensions are given by the width of the
padding-box and the height of the padding-box.
● Border Area: It is the area between the box’s padding and margin. Its dimensions are given
by the width and height of the border.
● Margin Area: This area consists of space between border and margin. The dimensions of the
Margin area are the margin-box width and the margin-box height. It is useful to separate the
element from its neighbors.

Eg:
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Creating a table
<table> tag

An HTML table is defined with the <TABLE> tag. Each table row is defined with the
<TR>tag. A table header is defined with the <TH> tag. By default, table headings are
bold and centered. A table data/cell is defined with the <TD>tag.
Attribute Value Description

Align right left centr Visual alignment.


justify char

Align rgb(x,x,x) #hexcode Specifies the background color of the


colorname table.

Border Pixels Specifies the border width. A value of


"0" means no border.

cellpadding pixels or % Specifies the space between the cell


borders and their contents. to which,
when the link is followed, post
requests with the body ping will be
sent by the browser (in the
background).
Typically used for tracking.
cellspacing pixels or % Specifies the space between cells.
Frame above below Used in conjunction with the border
hsides lhs rhs attribute, specifies which side of the
vsides box frame that makes up the border
border surrounding the table is displayed.

Width pixels or % Specifies the width of the table.


<CAPTION> Tag

The <CAPTION> tag defines a table caption. It must be inserted


immediately after the <TABLE> tag.

<TH> Tag
The <TH> tag defines a header cell in an HTML table. An

HTML table has two kinds of cells:

● Header cells - contains header information (created with the <TH> element)
● Standard cells - contains data (created with the <TD>

element) The text in <TH> elements is bold and centered by default.

The text in <TD> elements is regular and left-aligned by default.

Colspan Number Specifies the number of columns the header cell spans
across.

Height Pixels Specifies the height of the header cell.

Nowrap Nowrap Prevents text from automatically wrapping.

Rowspan Numbers Specifies the number of rows the header cell spans across.

<TR> Tag

The <TR> tag defines a row in an HTML table.

A <TR> element contains one or more <TH> or <TD> elements.


<TD> Tag

The <TD> tag defines a standard cell in an HTML [Link] HTML table has two kinds
of cells:

● Header cells - contains header information (created with the <TH> element)
● Standard cells - contains data (created with the <TD> element)The text in
<TH> elements is bold and centered by default. The text in <TD> elements is
regular and left-aligned by default.

Eg:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCA Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.lunch {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h2>MCA Course Timetable</h2>
<table>
<tr>
<th>Day / Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 13:00</th>
<th>13:00 - 14:00</th>
<th>14:00 - 15:00</th>
<th>15:00 - 16:00</th>
<th>16:00 - 17:00</th>
</tr>
<tr>
<th>Monday</th>
<td>Subject 1</td>
<td>Subject 2</td>
<td>Subject 3</td>
<td>Subject 4</td>
<td class="lunch" rowspan="5">Lunch Break</td>
<td colspan="3">Lab</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Subject 6</td>
<td>Subject 7</td>
<td>Subject 8</td>
<td>Subject 9</td>
<td colspan="3">Lab</td>
</tr>
</table>
</body>
</html>

Boarders and cells

HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:
To add a border, use the CSS border property on table, th, and td elements:

Eg:

table, th, td {
border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property
to collapse.

This will make the borders collapse into a single border:

Eg:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the
document background), you get the impression of an invisible border:

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Round Table Borders
With the border-radius property, the borders get rounded corners:table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Dotted Table Borders

With the border-style property, you can set the appereance of the border.

The following values are allowed:

● dotted
● dashed
● solid
● double
● groove
● ridge
● inset
● outset
● none
● hidden

eg:
th, td {
border-style: dotted;
}
Border Color

With the border-color property, you can set the color of the border.

Eg:
th, td {
border-color: #96D4D4;
}

Creating Forms

HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc. An HTML form contains form elements.

A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application will
perform required processing on the passed data based on defined business logic inside
the application
. Then your back-end application will do required processing on that data in whatever way you
like. Form elements are like text fields, text area fields, drop-down menus, radio buttons,
checkboxes, etc. which are used to take information from the user.
A simple syntax of using <form> is as follows:
<form action="back-end script" method="posting
method">form elements like input, textarea etc.
</form>
The various form attributes are:
● name: This is the name of the form.
● action: Here you will specify any script URL which will receive uploaded data.
● method: Here you will specify method to be used to upload data. It can take various
values but most frequently used are GET and POST.
The get method sends the data captured by form elements to the web server encoded into a
URL, which points to a web server. The data is appended to the URL. This method is used
when the amount of data sent to the web server is small. This is the default method used
The post method sends the data captured by form elements to the web server as a separate bit
stream of data. This method is used when the amount of data sent to the web server is large.
target: It specifies the target page where the result of the script will be displayed. It
takes values like _blank, _self, _parent etc.

<FORM> Tag

The HTML <FORM> element defines a form that is used to collect user input:

Form elements are different types of input elements,


There are different types of form controls that you can use to collect data from a visitor to your
site.
● Text inputcontrols
● Buttons
● Checkboxes and radiobuttons
● Selectboxes
● File selectboxes
● Hidden controls
● Submit and reset button
<label> Element

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

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.

<!DOCTYPE html>

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

Creating Form Controls with the <input> tag

<INPUT> Tag

The <INPUT> tag is used within a <FORM> element to declare input controls that
allow users to input data.

An input field can vary in many ways, depending on the type attribute. The <INPUT>
element is empty, it contains attributes only

Attribute Value Description

Accept content types Specifies a comma-separated list of content


types that the server accepts.

Align left right Deprecated − Defines the alignment


top of content
middle
bottom

Alt Text This specifies text to be used in case the


browser/user agent can't render the input
control.
on off Specifies for enabling or disabling of
autocomplete autocomplete in <input> element

Autofocus pecifies that <input> element should


autofocus automatically get focus when the page loads

checked Checked If type = "radio" or type = "checkbox" it will


already be selected when the page loads.

disabled Disabled Disables the input control. The button won't


accept changes from the user. It also cannot
receive focus and will be skipped when
tabbing.

form_id Specifies one or more forms


Form

URL Specifies the URL of the file that will process


formaction the input control when the form is submitted

application/ Specifies how the form-data should be


formenctype x-www-form- encoded when submitting it to the serve
urlencoded
multipart/form-
data
text/plain

post Defines the HTTP method for sending data to


Form method get the action URL

Formnovalidate Defines that form elements should not be


formnovalidate validated when submitted

_blank Specifies the target where the response will be


formtarget _self display that is received after submitting the
_parent form
_top

Pixels Specifies the height


Height

datalist_id Specifies the <datalist> element that contains


List pre-defined options for an <input> element
Autofocus Specifies the maximum value.
Max

maxlength Number Defines the maximum number of characters


allowed in a text field

Number Specifies the minimum value.


Min

Multiple Specifies that a user can enter multiple values


multiple

Name Text Assigns a name to the input control.

Regexp Specifies a regular expression that an <input>


Pattern element's value is checked against

Text Specifies a short hint that describes the expected


placeholder value.

readonly Readonly Sets the input control to read-only. It won't


allow the user to change the value. The control
however, can receive focus and are included
when tabbing through the form controls.

Required Specifies that an input field must be filled out


required before submitting the form

Size Number Specifies the width of the control. If type =


"text" or type = "password" this refers to the
width in characters. Otherwise it's in pixels.

Src URL Defines the URL of the image to display. Used


only for type = "image".

Number Specifies the legal number intervals for an


Step input field

Value Text Specifies the intial value for the [Link] type
= "checkbox" or type = "radio" this attribute is
required.

Pixels Specifies the width


Width
Input Types:

In HTML <INPUT TYPE=" "> is an important element of HTML form. The "type" attribute of
input element can be various types, which defines information field. Such as <INPUT
TYPE="text" NAME="name"> gives a text box.

Description
<INPUT TYPE=" ">

Text Defines a one-line text input field

text area Defines multiple line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a


task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

Select Defines a drop-down list


Eg:

● <input type="button">
● <input type="checkbox">
● <input type="password">
● <input type="radio">
● <input type="reset">
● <input type="submit">
● <input type="text">
Eg:

<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <br>
<input type = "text" name = "first_name" /><br> Last name:
<br>
<input type = "text" name = "last_name" />
</form>
</body>

</html>

Using other form controls

HTML Forms –

Text Input Controls:


There are actually three types of text input used on forms:
● Single-line text input controls: Used for items that require only one line of user input, such as
search boxes or names. They are created using the <input>element.
● Password input controls: <input> elements of type password provide a way for the user to
securely enter a password. The element is presented as a one-line plain text editor control in which
the text is obscured so that it cannot be read,
● Multi-line text input controls: Used when the user is required to give details that may be longer
than a single sentence. Multi-line input controls are created with the <textarea> element.

Single-line text input controls:


Single-line text input controls are created using an <input> element whose type attribute has a value of
text.

Example:

<html>
<body>
<form action="/cgi-bin/hello_get.cgi" method="get"> First
name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Following is the list of attributes for <input> tag.
● type: Indicates the type of input control you want to create. This element is also used to create
other form controls such as radio buttons and checkboxes.
● name: Used to give the name part of the name/value pair that is sent to the server, representing
each form control and the value the user entered.
● value: Provides an initial value for the text input control that the user will see when the form
loads.
● size: Allows you to specify the width of the text-input control in terms of characters.
● maxlength: Allows you to specify the maximum number of characters a user can enter into the
textbox.

Password input controls:


This is also a form of single-line text input controls are created using an <input> element whose
type attribute has a value of password. The input characters are masked here.
Example:
<html>
<head>

<title>Login Page</title>
</head>
<body>
<form action="" method="get">Login :
<input type="text" name="login" />
<br> Passwod:
<input type="password" name="password" /><br>
<input type="reset" value="reset" />
</form>
</body>
</html>

Multiple-Line Text Input Controls:


If you want to allow a visitor to your site to enter more than one line of text, you should create a
multiple-line text input control using the <textarea> element. The attributes of textarea elementare
● name: The name of the control. This is used in the name/value pair that is sent to the server.
● rows: Indicates the number of rows of text areabox.
● cols: Indicates the number of columns of text areabox.
Example:
<html>
<body>
<form action=" " method="get"> Description : <br />
<textarea rows="5" cols="50" name="description"> Enter
description here...
</textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>

HTML Forms - Creating Button:


There are various ways in HTML to create clickable buttons. You can create clickable button using
<input> tag

When you use the <input> element to create a button, the type of button you create is specified using the
type attribute. The type attribute can take the following values:
● submit: This creates a button that automatically submits aform.
● reset: This creates a button that automatically resets form controls to their initial values.
● button: This creates a button that is used to trigger a client-side script when the user clicks that
button.
Example:
<html>
<body>
<form action=" " method="get">
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button"/>
</form>
</body>
</html>
Output
HTML Forms - Checkboxes Control:
Checkboxes are used when more than one option is required to be selected. They are created using
<input> tag as shown below.
Following is the list of important checkbox attributes:
● type: Indicates that you want to create acheckbox.
● name: Name of the control.
● value: The value that will be used if the checkbox is selected. More than one checkbox should
share the same name only if you want to allow users to select several items from the same list.
● checked: Indicates that when the page loads, the checkbox should beselected.

Example:
<html>
<body>
<form action=" " method="get"> Select your hobbies from the
list <br>
<input type="checkbox" name="Cricket" value="on"> Cricket<br>

<input type="checkbox" name="Football" value="on"> Football<br>


<input type="checkbox" name="Reading" value="on"> Reading <br>
<input type="submit" value="Hobby Selected" />
</form>
</body>
</html>

Output
HTML Forms - Radio box Control:
Radio Buttons are used when only one option is required to be selected. They are created using
<input> tag as illustrated below.
Following is the list of important radiobox attributes:
● type: Indicates that you want to create a radiobox.
● name: Name of the control.
● value: Used to indicate the value that will be sent to the server if this option isselected.
● checked: Indicates that this option should be selected by default when the pageloads.
Example:
<html>
<body>
<form action=" " method="post">
<input type="radio" name="gender" value="Male" /> Male <br>
<input type="radio" name="gender" value="Female" /> Female<br>
<input type="submit" value="Select Gender" />
</form>
</body>
</html>

Output

HTML Forms - Select box Control:


Drop Down Box is used when we have many options available to be selected but only one or two will be
selected.
Following is the list of important attributes of <select>:
● name: This is the name for the control.
● size: This can be used to present a scrolling listbox.
● multiple: If set to "multiple" then allows a user to select multiple items from themenu.
Following is the list of important attributes of<option>:
● value: The value that is sent to the server if this option isselected.
● selected: Specifies that this option should be the initially selected value when the page loads.
● label: An alternative way of labeling options.

Example:
<html>
<body>
<form action=" " method="post">
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>

HTML Forms - File Select Boxes:


If you want to allow a user to upload a file to your web site from his computer, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element.

Example:
<html>
<body>
<form action="" method="post" name="fileupload"
enctype="multipart/form-data">
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Output:
Introduction to JavaScript and jQuery :The Basics of JavaScript: Overview of JavaScript, Object
Orientation and JavaScript, General Syntactic Characteristics- Primitives, Operations, and Expressions, Screen
Output and Keyboard Input, Control Statements, Object Creation and Modification, Arrays, Functions. Callback
Functions, Java Script HTML DOM.

Introduction to jQuery: Overview and Basics.

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as
Internet Explorer, Mozilla, Firefox, Netscape, Opera.

​ Overview of JavaScript
ORIGIN

Originally developed at Netscape by Brendan Eich, as LiveScript

Initially named Mocha, later renamed as LiveScript

Became a joint venture of Netscape and Sun in 1995, renamed JavaScript

Now standardized by the European Computer Manufacturers Association as ECMA-262 (also ISO 16262)

Javascript is divided into three parts

1) Core Javascript - Heart of the language , including its operators, expressions, statements and
subprogram.

2) Client-side JavaScript - Collections of JavaScript code scripts , not programs, support the control
of browsers and interaction with the user

3) Server side Javascript - Collection of objects that make the language useful on a web server.

2 Java and JavaScript


• Java and JavaScript are two completely different languages in both concept and design!

• Java (developed by Sun Microsystems) is a powerful and much more complex programming
language - in the same category as C and C++.
• Object model of Javascript is quite different from java & C++.

• Java is strongly typed and Javascript is Dynamically typed.

• In Java ,types are all known at compile time, where as in Javascript variables need not be
declared and compile time type checking impossible.

• Objects in Java are static where as Javascript objects are dynamic.

3. General Syntactic Characteristics


• JavaScript are embedded in HTML documents

• Either directly, as in
<script type = "text/javaScript">

<! -- JavaScript script //-- >

</script>
Or indirectly, as a file specified in the src attribute of <script>, as in

<script type = "text/javaScript" src = "[Link]">

</script>

Identifier form: begin with a letter or underscore, or dollar sign ($) followed by any number of
letters, underscores, and digits

• Case sensitive

• 25 reserved words, plus future reserved words Eg:

Break, continue, switch, case, if ,else, while, for…

• Comments: both // and /* … */

• Scripts are usually hidden from browsers that do not support JavaScript interpreters by

putting them in special comments.

<!--
-- JavaScript script –

//-->

• Semicolons can be a problem. They are “somewhat” optional.


Problem: When the end of the line may not be the end of a statement – JavaScript puts a semicolon
there. But this implicit insertion can lead to problems
Eg: return x;

The interpreter will insert a semicolon after return, because return need not be followed by an expression,
making x an invalid orphan.

To avoid this problem, put each statement on its own line and terminate each statement with a
semicolon.

When separated by semicolons, multiple statements on one line are allowed: a = 5; b = 6; c = a + b;

• Javascript is case sensitive

• Test,TEST,Test all are distinct names

//[Link]

<!DOCTYPE html>

<html lang=“EN”>

<head><title>My Javascript page</title>

<meta charset=“utf-8” />

</head>

<body>

<script type="text/javascript">

[Link]("Hello World!");

</script>

</body>

</html>

4.4 Primitives, Operations, & Expressions

[Link] Types
Five primitive types: Number, String, Boolean, Undefined, or Null.

Javascript includes predefined objects that are closely related to primitive types named Number ,string and
Boolean. These objects are called wrapper objects. Because each objects contains a property that stores a value
of the corresponding primitive type. The purpose of Wrapper objects are used to provide properties and
methods that are convenient to use with the values of primitive types. Javascript coerces values between the
number type primitive values and number objects and between the string type primitive values and string
objects. The methods of Number and String objects can be used on variables of the corresponding primitive
types.

The difference between primitives and objects

Suppose that prim is a primitive variable with the value 17 and obj is a Number object with property value 17.
prim and obj are stored differently .

2. Numeric & String Literals

Numeric literals – like Java All numeric values are stored in double-precision floating point. Numeric values
in Javascript are often called numbers. Numeric literals can be either integer or floating point values.

72,7.2,.72,7E2,7e2 etc are valid numeric literals.

String literals are delimited by either ' or " .Can include escape sequences (e.g., \n,\t).

Var str1=”Hello”;

Var str2=’Hello’;

To include a single quote character in a string delimited by single quotes, the embedded single quote must be
preceded by a backslash.

‘You \’re the best person I \’ve ever seen’

A double quote can be embedded in a double quoted string literal by preceding it with a backslash.

• A null string (a string with no characters) can be denoted with ‘ ‘ or “ “.

• All string literals are primitive types.

3. Other Primitive Types

Boolean values are true and [Link] for evaluating Boolean Expressions.

Var boo1= true;

Var boo2=false;

The only value of type Null is reserved word null which means no value. A variable is Null if it has not been
explicitly declared or assigned a value.

The only value of type Undefined is undefined. If a variable has been explicitly declared, but not assigned a
value it has the value undefined.

A variable declared without a value will have the value undefined.

ex) var carName;

[Link](carName);

[Link] variables
JavaScript is dynamically typed – any variable can be used for anything ie variable are not typed but values are
typed. A variable can have values of any primitive type, or it can be a reference to any objects .The interpreter
determines the type of the value of a particular occurrence of a variable. Variables can be implicitly or
explicitly declared.

• A variable can be declared either by assigning it a value(implicit)in which case the interpreter
implicitly declares it to be a variable or by listing it in a declaration statement that begins with the
reserved word var(explicit)

var sum =0,today ="Monday",flag =

false; var counter;

• Initial values can be included in a var declaration

• Rules for variable names:

– Variable names are case sensitive

– They must begin with a letter or the underscore character

strname – STRNAME (not same)

3. Uses of JAVASCRIPT

• JavaScript was designed to add interactivity to HTML

• JavaScript is a scripting language

• It is usually embedded directly into HTML pages

• JavaScript is an interpreted language

• Provide programming capability at both the server and the client ends of a Web connection.

• Improve appearance especially graphics

• Perform calculations

• Validation of input

• Less server interaction – we can validate the user i/p before sending the page off to the server. This
saves server traffic.

[Link] Browsers & HTML- JAVASCRIPT Doc

• When a JavaScript code is encountered in the HTML document, the browser uses its JavaScript
interpreter to “execute” the script. Output from the script becomes the next markup to be rendered.
When the end of the script is reached, the browser goes back to reading the HTML document and
displaying its content.

• There are two different ways to embed JavaScript in an HTML document:


– implicitly and explicitly.

• In explicit embedding, the JavaScript code physically resides in the HTML document.

• In implicit embedding the JavaScript can be placed in its own file, separate from the HTML document.

• When JavaScript scripts are explicitly embedded, they can appear in either part of an
HTML document—the head or the body

• The interpreter notes the existence of scripts that appear in the head of a document, but it does not
interpret them while processing the head. This method is useful when using Javascript functions.
The function can be defined in the head of the HTML [Link] that are found in the body of
a document are interpreted as they are found.

[Link] Operators

5.1Arithmetic Operators

• Eg:increment operator If

the variable a has the value 7,

(++a )*3 =24

(a++)*3 = 21
In both cases a is set to 8

The precedence rules of a language specify which operator is evaluated first when two operators with different
precedence are adjacent in an expression.

The associativity rules of a language specify which operator is evaluated first when two operators with the same
precedence are adjacent in an expression.

• Precedence and associativity

• Operator Associativity

++,--,unary-,unary+ Right(though it is irrelevant)

*,/,% Left

Binary +,Binary - Left

>,<,>=,<= Left

==,!= Left

===,!=== Left

&& Left

|| Left

=,+=,-=,*=,/=,&&=,||=,%= Right

• Example of operator precedence and associativity

var a=2,

b=4,c,d; C=3+a*b;

//* is first, so c is now

11 d=b/a/2;

// associates left , so d is now 1

Paranthesis can be used to force any desired

precedence. (a+b)*c

Addition will be done before multiplication

5.2Assignment Operators
[Link] Operators

5.4 Logical Operators


Javascript Functions
In JavaScript, a function is a block of code designed to perform a particular task. A function is
executed when it is called (invoked).

function greet(name) {

return 'Hello, ' + name + '!';

let message = greet('Alice');


[Link](message); // Output: Hello, Alice!

In this example:

● function is the keyword that starts the declaration of a function.


● greet is the name of the function.
● name is the parameter that the function takes.
● The code block within the curly braces {} is the body of the function, which is executed when the
function is called.
● return specifies the value to be returned by the function.

When you call the function greet('Alice'), it returns the string 'Hello, Alice!', which is then stored in the
variable message and logged to the console.

Functions can take multiple parameters, have default values, and be used in various ways, such as being
assigned to variables, passed as arguments to other functions, or even returned from other functions. They
are a fundamental part of JavaScript and are used for code modularity and reusability.

The Window object has three methods for creating dialog boxes for user interactions , alert, confirm
, and prompt

The alert method opens a dialog window and displays its parameter in that window. It also displays an
OK
button

alert(“The sum is :” +sum + “\n”);

O/P

The confirm method opens a dialog window in which the method displays its string parameter along with
two buttons OK and Cancel to offer the user the choice of continuing some process.
Var question = confirm(“Do you want to continue this download”);

O/P
The prompt method used to create dialog window that contains a textbox used to collect string of input
from from the user .The window also includes 2 buttons: OK and [Link] prompt takes 2
parameters: the string that prompts user for input and a default string in case user does not type a
string before pressing one of the 2 buttons.

name=prompt(“What is your name?” ,””);

O/p

1. alert

Parameter in alert is plain text, not [Link] a dialog box which displays the parameter
string and an OK button.

<!DOCTYPE html>

<html lang =“en”>


<head><title>[Link]</title>

<meta charset = “utf-8” />


<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
[Link](5 + 6);
</script>
</body>
</html>

OUTPUT

My First Web Page


My first paragraph.

2. confirm

Opens a dialog box and displays the parameter and two buttons, OK and Cancel

if (confirm("Press a button!"))

{
txt = "Do you want to continue?";
} else {
txt = "You pressed Cancel!";
} [Link](txt);

3. Prompt

Opens a dialog box and displays its string parameter, along with a text box and two buttons, OK and
Cancel.

The second parameter is for a default response if the user presses OK without typing a response in the
text box (waits for OK) .

var person = prompt("How old are you?", "");


if (person == null || person == "") {
txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you?";
}

[Link](txt);

Sum of two numbers

<script type= “text/javascript”>

var no1 = prompt("Please enter

No1", ""); var no2 = prompt("Please

enter No2", ""); if (no1 != "" ||


no2 != "")

var res = Number(no1)+Number(no2);

} else {

res= "Failed ";


}

[Link](res);

</script>

​CONTROL STATEMENTS

Conditional Statements

• if statement - use this statement if you want to execute some code only if a specified condition is true

• if...else statement - use this statement if you want to execute some code if the condition is true
and another code if the condition is false.

• if...else if else statement - use this statement if you want to select one of many blocks of code to be
executed .

• switch statement - use this statement if you want to select one of many blocks of code to be executed .

Control

Statements-1 if

(condition)

code to be executed if condition is true


}

<script>

var x = prompt("Enter the Name \n",

""); if(x=="admin")

alert ("Welcome Administrator");

</script>

if-else

if (condition)

code to be executed if condition is true

else

code to be executed if condition is not true

Example

<script type = “text/javascript”>

var x = prompt("Enter the Number \n", "");

if(x<0)

alert ("negative");

else

alert ("positive");

}
</script>

else if Statement

Use the else if statement to specify a new condition if the first condition is false.

Syntax

if (condition1)

{
block of code to be executed if condition1 is true
} else if (condition2)

{
block of code to be executed if the condition1 is false and condition2 is true
} else {
block of code to be executed if the condition1 is false and condition2 is false
}

Example

<script>

var time = prompt("Enter the time \n", "");

if (time < 10)

greeting = "Good morning";

} else if (time < 20)

greeting = "Good day";

} else

greeting = "Good evening";

alert(greeting);

</script>

JavaScript Switch Statement

• Use the switch statement to select one of many blocks of code to be executed.
Syntax

switch(expression)

{
case n:
code block
break;
case n:
code block
break;
default:
code block
}

• The switch expression is evaluated once.

• The value of the expression is compared with the values of each

case. If there is a match, the associated block of code is e

<script type=”text/javascript”>

var d= new Date();

Var day = [Link]();

switch (day) {

case 0:

day = "Sunday";

break;

case 1:

day = "Monday";

break;

case 2:

day =

"Tuesday";

break;

case 3:

day =
"Wednesday";

break;

case 4:

day = "Thursday";

break;

case 5:

day = "Friday";

break;

case 6:

day = "Saturday";

alert(day);

</script>

Loop Statements
Different Kinds of Loops

JavaScript supports different kinds of loops:

for - loops through a block of code a number of times

for/in - loops through the properties of an object

while - loops through a block of code while a specified condition is true

do/while - also loops through a block of code while a specified condition is true

for loop

syntax:

for (statement 1; statement 2; statement 3)

{
code block to be executed
}

• Statement 1 is executed before the loop (the code block) starts.

• Statement 2 defines the condition for running the loop (the code block).

• Statement 3 is executed each time after the loop (the code block) has been executed.
Example
for (i = 0; i < 5; i++)

{
text += "The number is " + i + "<br>";

alert(text);
}

for/in Loop

• The JavaScript for/in statement loops through the properties of an object:

• Example

var person = {fname:"John", lname:"Doe", age:25};


var text = "";
var x;
for (x in person)

{
text += person[x];
alert(text);}

While Loop

• The while loop loops through a block of code as long as a specified condition is true.

while (condition)

{
code block to be executed
}

Example

<script type = “text/javascript”>

var i=0;

while (i < 10)

alert("i="+i);

i++;

</script>

Do/While Loop
• The do/while loop is a variant of the while loop.

• This loop will execute the code block once, before checking if the condition is true, then it will
repeat the loop as long as the condition is true.

Syntax

do {
code block to be executed
}
while (condition);

Example

<script type=”text/javascript”>

var i=0;

do

alert("i="+i);

i++;

}while (i <= 3);

</script>

Break

The break statement "jumps out" of a loop. It was used to "jump out" of a switch() statement. break statement
also be used to jump out of a loop. The break statement breaks the loop and continues executing the code after
the loop (if any):

Example

<script type="text/javascript">

var i,text="";

for (i = 0; i < 10; i++)

if (i === 3) { break; }

text += "The number is " + i;

alert(text);

}
</script>

Continue Statement

• The continue statement "jumps over" one iteration in the loop.

• The continue statement breaks one iteration (in the loop), if a specified condition occurs, and
continues with the next iteration in the loop.

• This example skips the value of 3:

<script type="text/javascript">

var i, text="";

for (i = 0; i < 10; i++) {

if (i === 3) { continue; }

text += "The number is " + i;

}alert(text);

</script>

​ OBJECTS CREATION
JavaScript Objects (characteristics)

• In JavaScript, object is the king. Almost "everything" is an object.

• Booleans can be objects (if defined with the new keyword)

• Numbers can be objects (if defined with the new keyword)

• Strings can be objects (if defined with the new keyword)

• Dates are always objects

• Maths are always objects

• Regular expressions are always objects

• Arrays are always objects

• Functions are always objects

• Objects are always objects

• All JavaScript values, except primitives, are objects.

• JavaScript objects are written with curly braces.


• Object properties are written as name:value pairs, separated by commas.

Example

var person = {firstName:“xyz”, lastName:“pqr", age:50, eyeColor:"blue"};

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

A JavaScript object is a collection of named values . The named values, in JavaScript objects, are
called properties.

Creating a JavaScript Object

With JavaScript, you can define and create your own

objects. There are different ways to create new objects:

1)Define and create a single object, using an object literal.

2)Define and create a single object, with the keyword new.

3)Define an object constructor, and then create objects of the constructed type.

1. Using an Object Literal

Easiest way to create a JavaScript Object. Using an object literal, define and create an object in one statement.

An object literal is a list of name:value pairs inside curly braces {}.

The following example creates a new JavaScript object with four properties:

var person = {
firstName:“xyz",
lastName:“pqr",
age:50,
eyeColor:"blue"
};

2. Using the JavaScript Keyword new

Most common way of creating javascript objects.

The following example also creates a new JavaScript object with four properties:

Example

var person = new Object();


[Link] = “xyz";
[Link] = “pqr";
[Link] = 50;
[Link] = "blue";

3)Define an object constructor, and then create objects of the constructed type
Because the objects can be nested , we can create new objects with the properties of person with the properties
of its own.

[Link] =new Object();

[Link]=“Ernakulam”;

[Link]=“Kerala”;

Example:

// Object constructor function

function Person(first, last, age, eyeColor) {

[Link] = first;

[Link] = last;

[Link] = age;

[Link] = eyeColor;

// Creating new objects from the constructor

var myFather = new Person("John", "Doe", 50, "blue");

var myMother = new Person("Sally", "Rally", 48, "green");

[Link]([Link]); // Output: 50

[Link]([Link]); // Output: Sally

JavaScript Object Properties

Properties are the values associated with a JavaScript object.A JavaScript object is a collection of unordered
[Link] can usually be changed, added, and deleted, but some are read only.

syntax for accessing the property of an object

is: [Link] // [Link]

or

objectName["property"] // person["age"]

or
objectName[expression] // x = "age";

person[x] [Link] + " is " + [Link] + " years

old.";

or

person["firstname"] + " is " + person["age"] + " years old.";

JavaScript for...in Loop

The JavaScript for...in statement loops through the properties of an object. The block of code inside of the
for...in loop will be executed once for each property.

Syntax

for (variable in object)

{
code to be executed
}

Example

var person = {fname:“xyz", lname:“pqr", age:25};


for (x in person)

{
txt += person[x];
}

Adding New object Properties

You can add new properties to an existing object by simply giving it a value. Assume that the person object
already exists - you can then give it new properties:

Example

[Link] = “kochi";

Deleting Object Properties

• The delete keyword deletes a property from an object:

• Example

var person = {fname:“xyz", lname:“pqr", age:50, city:“kochi"};


delete [Link]; // or delete person["age"];

The delete keyword deletes both the value of the property and the property itself. After deletion, the property
cannot be used before it is added back again. The delete operator is designed to be used on object properties. It
has no effect on variables or functions.
Adding a Method to an Object

Adding a new method to an object is easy:

function person(firstName, lastName, age) {

[Link] =fname;

[Link] = lname;

[Link] = age;

var person1= new Car("John", "Doe", "55");

[Link] = function ()

{
return [Link] + " " + [Link];
};

Strings, Numbers, and Booleans as Objects

When a JavaScript variable is declared with the keyword "new", the variable is created as an object:

var x = new String();

// Declares x as a String
object var y = new Number();

// Declares y as a Number
object var z = new Boolean();

// Declares z as a Boolean object

Avoid String, Number, and Boolean objects.

​ JavaScript Arrays
• JavaScript arrays are used to store multiple values in a single variable.
• Example

var cars = [“Maruthi", “Toyoto", "BMW"];

• An array can hold many values under a single name,

• Access the values of array by referring to an index number.

Creating an Array

Using an array literal we can create a JavaScript

Array. Syntax:

var array_name = [item1, item2, ...];

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

Example

var s = new Array(“AA", ”BB", “CC”);

var list = new Array(2, 4, 6, 8);

Access the Elements of an Array

An array element can be accessed by referring to the index number.

To access the value of the first element in s:

var name = s[0];

EXAMPLE

<!DOCTYPE html>

<html>

<body>

<h1 id="demo"></h1>

<script>

var s = ["AA", "BB", "CC"];

[Link]("demo").innerHTML = s[0]+

" "+s[1]+" "+s[2];

</script>

</body>
</html>

Array Properties and Methods


1. The length property of an array returns the length of an array (the number of array elements). Ex)

var s = new Array(“AA", ”BB", “CC”);

alert([Link]); //return 3

2. Adding Array Elements

• To add a new element to an array is using the push method:

Example

[Link](“XX");

Example

<!DOCTYPE html>

<html><body><h1 id="demo"></h1>

<script>

var s = ["AA", "BB", "CC"];

[Link]("XX");

for (i = 0; i < [Link]; i++) {

[Link]("demo").innerHTML +=

"<ul><li>" + s[i] + "</li>";

</script>

</body></html>

Add new element to array

• New element can also be added to an array using the length property:
var s = ["BB", "OO", "AA", "MM"];

s[[Link]] = "LL";

//add as last element

• Adding elements with high indexes can create undefined "holes" in an array:

var s = ["BB", "OO", "AA", "MM"];

s[6] = "PP";

Popping

• The pop() method removes the last element from an array:

• Example

var s = ["AA", "BB", "CC"];

[Link](); // Removes the last element (“CC") from array s

• The pop() method returns the value that was "popped out":

• Example

var s = ["BB", "OO", "AA", “MM"];

var x = [Link](); // the value of x is "MM"

Shifting Elements

• Shifting is equivalent to popping, working on the first element instead of the last.

• The shift() method removes the first array element and "shifts" all other elements to a lower index.

• Example

var s = ["BB", "OO", "AA", “MM"];


[Link](); // Removes the first element "BB" from ‘ s’

unshift() method

• The unshift() method adds a new element to an array (at the beginning), and "shifts" older elements:

Example

var s = ["BB", "OO", "AA", “MM"];

[Link](“AA"); // Adds a new element “AA" to s

• The unshift() method returns the new array length.

Example
var s = ["BB", "OO", "AA", “MM"]; alert([Link](“AA"); //
Returns 5

Deleting Elements

Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete:

Example

var s = ["BB", "OO", "AA", “MM"]; delete s[0]; // Changes the first element in s to

undefined Using delete may leave undefined holes in the array. Use pop() or shift() instead.

Merging (Concatenating) Arrays

• concat() method creates a new array by merging (concatenating) existing arrays:


• Example (Merging Two Arrays)

var girls = [“mary", “jane"];

var boys = ["jack", “john", "james"];


var mystds = [Link](boys); //Concatenates (joins) girls and boys

The concat() method can also take values as arguments:

Example (Merging an Array with Values)

var arr1 = ["Cecilie", "Lone"];


var myChildren = [Link](["Emil", "asi", "Linu"]);

slice() method

slice() method slices out a piece of an array into a new array.

Eg: slices out a part of an array starting from array element 1 ("Orange"):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];


var citrus = [Link](1);

• slice() method creates a new array. It does not remove any elements from the source [Link] returns the
part of the array object specified by its parameters.

• This example slices out a part of an array starting from array element 3 ("Apple"):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];


var citrus = [Link](3);

returns “Apple” ,”Mango”

• The slice() method can take two arguments like slice(1, 3).

• The method then selects elements from the start argument, and up to (but not including) the
end argument.
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = [Link](1, 3);

returns “Orange” ,”Lemon”

Sorting an Array

• The sort() method sorts an array alphabetically:

var fruits = ["Banana", "Orange", "Apple", "Mango"];


[Link](); // Sorts the elements of fruits

By default, the sort() function sorts values as strings. This works well for strings . However, if numbers are
sorted as strings, "25" is bigger than "100", because "2" is bigger than "1". Because of this, the sort() method
will produce incorrect result when sorting numbers. Use compare function for numeric sorting .

Reversing an Array

The reverse() method reverses the elements in an array. use it to sort an array in descending order:

var fruits = ["Banana", "Orange", "Apple", "Mango"];


[Link](); // Sorts the elements of fruits
[Link](); // Reverses the order of the elements

Associative Arrays

Arrays with named indexes are called associative arrays (or hashes). JavaScript does not support arrays with
named indexes. In JavaScript, arrays always use numbered indexes.

function function_name(param0) {
–statements–
}
function function_name(param0, param1) {
–statements–
}
function function_name(param0, param1, /* …, */ paramN) {
–statements–
}
Creating a session Variable.
<?php
// Start the session
session_start();

// Set session variables


$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";

echo "Session variables are set.";


?>

Accessing Session Variables


<?php
session_start();

// Echo session variables


echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
?>

To change a session variable, simply overwrite it.


For example:
<?php
session_start();
// To change a session variable, just overwrite it
$_SESSION["favcolor"] = "blue";
?>
Difference between include and require.
include: When a file is included using the include statement and PHP cannot find it, it will emit a warning
(E_WARNING), but the script will continue to execute. This is useful when the file is not essential for the
application to run, and you want the script to continue even if the file is missing.

require: In contrast, the require statement will produce a fatal error (E_COMPILE_ERROR) and stop the
script if the file cannot be found. This is typically used when the file is critical for the application, and you
do not want the script to continue without it.

● Use include when the file is not mandatory, and the application should still run if the file is
missing.
● Use require when the file is essential, and the application should not continue if the file is not
found.

MySQLi functions in PHP


mysqli_connect(): This function attempts to open a connection to the specified MySQL server. It returns a
resource representing the connection to the MySQL server on success or FALSE on failure

mysqli_query(): This function is used to perform a query against the database. It returns FALSE on failure
and for successful SELECT, SHOW, DESCRIBE, or EXPLAIN queries it will return a mysqli_result object.
For other successful queries, it will return TRUE
mysqli_num_rows(): This function returns the number of rows in a result set. It’s useful for determining
the number of rows returned by a SELECT query

mysqli_fetch_array(): This function fetches a result row as an associative array, a numeric array, or both.
It’s used to read a single row from a result set

* Refer the Php Mysql Lab program*

You might also like