VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Web Programming
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Unit 1 - HTML
Fundamental Elements of HTML, Formatting Text in HTML, Organizing
Text in HTML, Links and URLs in HTML, Tables in HTML, Images on a
Web Page, Image Formats, Image Maps, Colors, FORMs in HTML,
Interactive Elements, Working with Multimedia - Audio and Video File
Formats, HTML elements for inserting Audio / Video on a web page
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Unit 1 - CSS
Understanding the Syntax of CSS, CSS Selectors, Inserting CSS in an
HTML Document, CSS properties to work with background of a Page,
CSS properties to work with Fonts and Text Styles, CSS properties for
positioning an element
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Unit 1 - Javascript
Using JavaScript in an HTML Document, Programming Fundamentals
of JavaScript – Variables, Operators, Control Flow Statements, Popup
Boxes, Functions – Defining and Invoking a Function, Defining
Function arguments, Defining a Return Statement, Calling Functions
with Timer, JavaScript Objects - String, RegExp, Math, Date, Browser
Objects - Window, Navigator, History, Location, Document, Cookies,
Document Object Model, Form Validation using JavaScript
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
What is HTML?
• HTML stands for Hyper Text Markup Language
• It describes the structure of web page
• It consists of different elements and this elements tell the browser
how to display the content
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Here is the simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<!DOCTYPE html> - defines this document to be HTML5
<html> - this element is root element of HTML page
<head> - defines meta information about the document
<title> - specifies name for the document
<body> - this element contains the visible page content
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Now lets see how to create a basic web
page…!
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Basic Elements of HTML
• A text header, denoted using
the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
• A paragraph, denoted using the <p> tag.
• A horizontal ruler, denoted using the <hr> tag.
• A link, denoted using the <a> (anchor) tag.
• A list, denoted using the <ul> (unordered list), <ol> (ordered list)
and <li> (list element) tags.
• An image, denoted using the <img> tag
• A divider, denoted using the <div> tag
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Text Formatting in HTML
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Organizing text in HTML
• HTML has many tags that allow us to organize the text of our page. These
tags provide indications such as "This is a paragraph", "This is a title", etc.
• Paragraphs are defined by the<p> </p>tag and line breaks by the<br />tag.
• There are six levels of titles, from<h1> </h1>to<h6> </h6>, which are used
according to the title importance.
• You can highlight certain words with the<strong>,<em>and<mark>tags.
• To create lists, you have to use the<ul>tag (unordered bulleted list) or
the<ol>tag (ordered list). Inside the list, items are inserted using a<li>tag for
each item
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<ul>
<li>Web</li>
<li>OS</li>
</ul>
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<ol>
<li>Web </li>
<li>OS</li>
</ol>
</html>
</body>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Links
<html>
<body>
<ul>
<li> <a href="list.html">Home</a></li>
<li>About Us</li>
</ul>
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Images
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked
to web pages. The <img> tag creates a holding space for the
referenced image.
• The <img> tag is empty, it contains attributes only, and does not have
a closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<img src= “demo.png” alt=“demo image” >
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<img src= “demo.png” alt=“demo image”
style="width:500px;height:600px;">
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<img src= "demo.png" alt="demo image"
style="width:500px;height:600px;">
<br>
<img src= "demo.png" alt="demo image" width="300" height="200">
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<html>
<body>
<img src= "demo.png" alt="demo image"
style="width:500px;height:600px;float:right;">
<br>
<img src= "demo.png" alt="demo image" width="300" height="200">
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Image Maps
• The HTML <map> tag defines an image map. An image map is an image
with clickable areas. The areas are defined with one or more <area> tags.
<img src="demo.png" alt="demo image" usemap="#htmlmap" height ="500"
width="500">
<map name="htmlmap">
<area shape="rect" coords="34,44,270,350" alt="textformatting"
href="textformat.html">
<area shape="circle" coords="337,300,44" alt="table" href="table.html">
</map>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
How it works?
• The idea behind an image map is that you should be able to perform
different actions depending on where in the image you click.
• To create an image map you need an image, and some HTML code
that describes the clickable areas.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
The image is inserted using the <img> tag. The only difference from
other images is that you must add a usemap attribute
<img src="demo.png" alt="demo image" usemap="#htmlmap”>
The usemap value starts with a hash tag # followed by the name of the
image map, and is used to create a relationship between the image
and the image map.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Create Image Map
add a <map> element.
• The <map> element is used to create an image map, and is linked to
the image by using the required name attribute:
<map name="htmlmap">
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
The Areas
• Then, add the clickable areas. A clickable area is defined using
an <area> element.
Shape
• You must define the shape of the clickable area, and you can choose
one of these values:
• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Shape="rect"
• The coordinates for shape="rect" come in pairs, one for the x-axis and
one for the y-axis.
Shape="circle"
• To add a circle area, first locate the coordinates of the center of the
circle , and then specify the radius of the circle
Shape="poly"
• The shape="poly" contains several coordinate points, which creates a
shape formed with straight lines (a polygon). This can be used to
create any shape.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Background Images
Background Image on a HTML element
• To add a background image on an HTML element, use the
HTML style attribute and the CSS background-image property
<p style="background-image: url('demo.png');>[
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
The <form> Element
• The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
The <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.
• <input type="text"> Displays a single-line text input field
• <input type="radio"> Displays a radio button (for selecting one of
many choices)
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
• <input type="check"> 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
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
• 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.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Working with Multimedia
HTML Audio
• The HTML <audio> element is used to play an audio file on a web
page.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
HTML Video
• The HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
How it Works
• The controls attribute adds video controls, like play, pause, and
volume.
• It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video
loads.
• The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
HTML <video> Autoplay
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
HTML YouTube Videos
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IGQBtbKSVhY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-
in-picture" allowfullscreen></iframe>
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
CSS
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Why Use CSS?
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Example :
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
H1{
color : blue;
font-size : 12px;
}
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
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. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute
value)
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
The CSS element Selector
• The element selector selects HTML elements based on the element name.
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.
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.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
*{
text-align: center;
color: blue;
}
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
How to add css?
Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
1. External CSS
2. Internal CSS
3. Inline CSS
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
External css
• With an external style sheet, you can change the look of an entire website by changing just one
file!
• Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Cascading Order
• What style will be used when there is more than one style specified
for an HTML element?
• All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
• So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
VIVEKANAND EDUCATION SOCIETY’S
College of Arts, Science and Commerce
Name of the Teacher: Neha Narne Class: SYCS Subject: Web Programming Paper:
