Scribd
Upload
6 views56 pages

Web Programming HTML Notes

Web Programming HTML Notes This section provides comprehensive notes on HTML (HyperText Markup Language), the fundamental building block of web pages. The notes cover essential HTML elements, attributes, and syntax for creating structured and visually appealing web content. Topics include text formatting, lists, tables, links, images, forms, and more. These notes will help you understand HTML concepts and effectively structure your web pages.

Uploaded by

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

Web Programming HTML Notes

Web Programming HTML Notes This section provides comprehensive notes on HTML (HyperText Markup Language), the fundamental building block of web pages. The notes cover essential HTML elements, attributes, and syntax for creating structured and visually appealing web content. Topics include text formatting, lists, tables, links, images, forms, and more. These notes will help you understand HTML concepts and effectively structure your web pages.

Uploaded by

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

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:

You might also like