[go: up one dir, main page]
Scribd
Upload
9 views107 pages

Chapter 1 HTML

Uploaded by

aryanair100408
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
9 views107 pages

Chapter 1 HTML

Uploaded by

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

XII SCIENCE :

1. Advanced Web Designing


2. Introduction To SEO
3. Advanced JavaScript
4. Emerging Technologies
5. Server-Side Scripting(PHP)
6. E-commerce and E-governance
REVISION

 STRUCTURE OF HTML PROGRAM:


XI STD TAGS
 HEADING TAGS:
REVISION:
• - <SUB>
 <H1><H2>……….<H6>
 PARAGRAPH TAG:
 <P>……..</P>
– <SUP>
 FORMATTING TAGS: – <MARK>
 <B>
 <U>
 <I>
REVISION OF HTML FORMS
 <FORM> ………….</FORM>
 1) ACTION
 2) METHOD

 3)NAME
 <INPUT> ………….</INPUT>
➢ Textbox
 1) NAME ➢ Password box
 2) TYPE ➢ Submit and reset
button
 3) SIZE ➢ Radio button
 4)MAXLENGTH ➢ checkbox

REVISION OF HTML FORMS
 <select> PULL DOWN
 <option>……….</option> LIST
 </select>

 <textarea>
 1)rows Multiline
 2)cols textbox
 3)name
 </textarea>
PROGRAM BASED ON FORM
CHAPTER NO – 1

Advanced Web Designing


ADDITIONAL FORM CONTROLS FOR
VALIDATION
Input type Description

<input type="color"> Defines a color picker

<input Defines a field for entering a number


type="number">
<input type="url"> Defines a field for entering a URL.

<input type="image"> Defines an image as a submit button.

<input type="date"> Defines a date picker with the year,


month and day
<input type="email"> Defines a field for an e-mail address
FOR VALIDATION
Input type Description

<input type="month"> Defines a month and year control in


format is"YYYY-MM"

<input type="range"> Define a range control. Default


range is
0 to 100.
<input Defines a date picker that includes
type="datetime- the
local"> year, month,day and time.

<input type="time"> Defines a control for entering a


time.
ADDITIONAL FORM CONTROLS
FOR VALIDATION
<input type="week"> Defines a week and year control.

<input type="search"> Defines


search
a text field for entering a

string like a site search or Google


search.
<input type="file"> Defines a file-select field and a
"Browse"
button for file uploads.

<input type="tel"> Used to define input fields that


should
contain a telephone number.
Input Restrictions
Attribute Description

Disabled Specifies that an input field should be disabled.


Max Specifies the maximum value for an input field.

Min Specifies the minimum value for an input field.

Pattern Specifies a regular expression to check the input


values.
read only Specifies that an input field is read only.

placeholde This acts as a temporary label showing the


purpose
r
of a text field without requiring a label tag.
Input Restrictions
Required Specifies that an input field is required

autocomplet Specifies
have
whether a form or input field should
e
autocomplete On or Off.
autofocus Specifies that the input field should
automatically
get focus when the page loads.
height and Specifies the height and width of an
width <input type="image">
Specifies that the user is allowed to enter more
multiple than one value in the<input> element. This
works
with input types like email and file.
PROGRAM FOR LEARNING INPUT
RESTRICTIONS.
<META> TAG
 It goes inside <head> section.
 This tag provides metadata about html document.
 It is used to specify
 Character set
 Page description
 Keywords
 Author of document
 Viewport setting
 Metadata is not displayed on the webpage but it is
used by browser, search engines and other web
services.
Attributes of <meta>
1) Name -The value of the name attribute can be related to
any
of the following-
i) Author
ii) Description
iii) Keywords
iv) copyright
e.g. <meta name = "author" >
2) Content –It gives value associated with name attribute.
of the following-
e.g. i)<meta name = "author" content= "Balbharti">
ii) <meta name = "description"content = "Advance web
designing">
iii)<meta name = "keywords"content = "html5, learn html5,
Attributes of <meta>
3)Charset –
 Specifies the character encoding used by the document.
 This is called a character encoding declaration.
1)UTF-8 For Indian characters
2)Big5 - for Chinese characters
e.g. 1) <meta charset="UTF-8">
2)<meta charset="Big5">
4) http-equiv
 It is used for
➢ 1)refresh
➢ 2) set cookie
➢ 3) content type
➢ 4) expires
Attributes
 E.g
of <meta>
 i) <meta http-equiv="refresh"content="5“
url=“http://www.google.com”>
 ii) <meta http-equiv="set-cookies">
 iii)<meta http-equiv="content-type“
content="text/html"charset="Big5">
 iv) <meta http-equiv="expires“
content="userid=pqr;expires=Wednesday, 8-feb-2018
23:59:59 GMT;">
Program based on <meta>
CSS (CASCADING STYLE SHEET)
 Describes how HTML elements are
to be displayed on screen, paper, or in
other media.
 Saves a lot of work.
 It can control the layout of multiple
web pages all at once.
 CSS allows you to control the look
and feel of several pages by changing
a single
source.
CSS Syntax
 A CSS rule set contains
✓a selector
✓a declaration block.
DECLARATIO
N BLOCK
 Syntax:
selector { property : value}

e.g H1 { Color : yellow}


EXAMPLE OF CSS
 DECLARATION

selector{property : value ; property : value;}

e.g H1{Color : yellow ; font-size : 11px;}


e.g H1{
Color : yellow;
font-size : 11px;
}
EXAMPLE OF CSS
 DECLARATION

1) body {
background-color : linen;
}
2)h1 {
color : maroon;
margin-left : 40px;
}
TYPES OF CSS
There are three methods of implementing
styling information to an HTML document.

1. Inline CSS

2. Embedded stylesheet or Internal CSS

3. External CSS
Inline Stylesheet
 Used to apply CSS on a single line
or element.
It uses the style attribute in the
HTML start tag.
E.g 1) <h1 style="color:blue;">This
is a Blue Heading</h1>
2) <p style="color:blue">Hello
CSS</p>
PROGRAM BASED ON INLINE
STYLESHEET
Embedded/Internal Stylesheet
Used to apply CSS on a single
document or page.
It can affect all the elements of
the page.
It is written inside the style tag
within head section of html.
PROGRAM BASED ON INLINE
STYLESHEET
External Stylesheet
 This style sheet is generally used
when we want to make changes on
multiple pages.
It facilitates to change the look of
the entire web site by changing just
one file.
 It uses the <link> tag on every page
and the <link> tag should be put
inside the head section.
External Stylesheet
 An external style sheet can be written in any text
editor, and must be saved with a .css extension.
 The external css file should not contain any HTML
tags.
E.G Style.css
 h1{color:navy;margin-left:20px}
CSS PROPERTIES
Propert Use Value Example
y
Color Changes the color Color h1{color:maroon}
name
of the text
To set the body{backgroun
Backgroun Color d-
d- background color name color:yellow}
Color in your webpage
bold or p{font-
Font- Used to bold text weight:300}
100,
weight 200…900
p{font-
Used to italicize Italic, style:italic}
Font- text oblique
style or
Normal
CSS PROPERTIES
Property Use Value Example
This property is 1. line- 1)p{text-
used to add Through decoration:
Text- 1. strike-through 2. underline}
decoration marks underline
2. underline 3. overline 2)a{text-
3. overstrike
4. None decoration:
4. to remove
none}
underlines from
Links
CSS PROPERTIES
Property Use Value Example

This property is left, right,


h1{text-
use to control the center align:center}
Text-align or justify
horizontal
alignment of any
block-level text
that are
paragraphs,tables
and other
Elements
This is used to p{font-
Font- Font name family:arial}
family control the Fonts
CSS PROPERTIES
Property Use Value Example
This property px,
p{font-
Font-size allows you to in,
control the size size:10px}
mm,
of the font cm,
Pt
This helps in
Letter- px, h1{letter-
controlling the
spacing Horizontal in, spacing:
Spacing mm, 5pt}
between cm,
characters of Pt
Text
CSS PROPERTIES
Property Use Value Example
This property is
used when you h1{padding
Padding Pixel
want to add
:30px}
padding
(blank spaces)
around the
content of an
element.
This property solid, double, h1{border:
adds a border groove, ridge, green}
Border
to a webpage inset, outset,
Element dotted or
dashed
CSS PROPERTIES
Property Use Value Example

To set an url(''X'') body{backg


r
Backgrou image as the where X
nd background of is the ound-
image:
-image your webpage path of url('backgro
image und.jpg')}
File

Sets margin px,


H1{margin-
Margin-
Left area on the left pt, left;10px}
side of the cm etc.
element.
CSS Id Selector

The Id selector selects the id


attribute of an HTML element
to select a specific element.
 An id is always unique within
the page.
 It is written with the hash
character(#), followed by the id
name.
CSS ID selector example:
 <style>
#city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h2 id="city">PUNE</h2>
<p>Smart city with IT industries.</p>

<h2 id="city">MUMBAI</h2>
<p>Mumbai is capital of maharashtra.</p>

<h2 id="city">NAGPUR</h2>
<p> It is also known as Orange city.</p>
PROGRAM BASED ON ID
SELECTOR
CSS Class Selector
It selects HTML elements with
a specific class attribute.
It is used with a period
character '.'(full stop symbol)
followed by the class name.
The Class selector is used when
you want to change a group of
elements within your HTML
page.
CSS Class selector example:
 <style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h2 class="city">PUNE</h2>
<p>Smart city with IT industries.</p>

<h2 class="city">MUMBAI</h2>
<p>Mumbai is capital of maharashtra.</p>

<h2 class="city">NAGPUR</h2>
<p> It is also known as Orange city.</p>
PROGRAM BASED ON CLASS
SELECTOR
Class Selector for specific element

To specify only one specific HTML


element should be affected then
you
should use the element name with
class selector.
PROGRAM
<!DOCTYPE html>
<html><head><style>
p.intro {text-align: center;color: blue}
</style></head>
<body>
<h1 class="intro">This heading is not
affected</h1>
<p class="intro">This paragraph is
blue and center-aligned.</p>
</body></html>
Universal Selector

It is used as a wildcard


character.
It selects all the elements on the
Webpages.
E.g
* { color: green; font-size: 20px;}
PROGRAM BASED ON UNIVERSAL
SELECTOR
Group Selector
 The grouping selector is used to select all
the elements with the same style
definitions.
 It is used to minimize the code.
 Commas are used to separate each selector
in grouping.
 e.g:

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


PROGRAM BASED ON GROUP
SELECTOR
Positioning in CSS
CSS helps to position the HTML
elements.
The position property is used to
set position for an element.
The element can be positioned
using the top, bottom, left and
right properties.
Syntax Of Positioning CSS
Selector • Values of positions:
{
➢ static
position:value;
➢ fixed,
top:value;
left:value; ➢Absolute
bottom:value; ➢ relative
right:value • Values of
} – Top
– Bottom PIXELS
– Left
– right
Static Positioning
This is a by-default position
for HTML elements.
It is not affected by the top,
bottom, left and right
properties.
Fixed Positioning
This property helps to put the text
fixed on the browser.
The FIXED property forces an
element into a fixed position
relative to the browser window.
The fixed element will not move,
even when the page is scrolled.
Relative Positioning
The relative
positioning property is
used to set the element
relative to its normal
position.
Absolute Positioning
 This property sets an element in a
specific location.

 It is not affected by the flow of


the page.

 This property positions the element


at the specified coordinates relative
to your screen top-left corner.
PROGRAM BASED OF RELATIVE
AND ABSOLUTE POSITIONING
Float Property
 The float property defines the flow of content.
 It is written in CSS file or directly in the style of an element.
 Following are the types of floating properties :
1. float : left : This keeps the element float on
left side of the container
2. float : right : This keeps the element
float on right side of container
3. float : none : This is default property
This shows the element as it is.
Display property

This property defines how the


components (elements) are
going to be placed on the web
page.
 It specifies how the element is
displayed.
This property is used to define
the display of different parts of a
Syntax

Display : value
1. Inline : It is used to display an element as an inline
element.
2. Block : It is used to display an element as an block
element. It starts on a new line, and takes up the
whole width of the browser window.
3. Block-inline : This value is very similar
to inline element but the difference is that
you are able to set the width and height.
4. None : The element is completely removed.
PROGRAM FOR BLOCK LEVEL AND
INLINE ELEMENTS
PROGRAM WITH DISPLAY
PROPERTY
HOMEWORK
Write Html5 code with CSS as
follows-
1. To create form to accept
name,age, email address from the
user.
2. Create a submit button to send
the data.
3. The heading of the form should
have a background colour and a
IMAGE MAP
An image with multiple hyperlinks is
called an image map.

HOTSPOT
1 HOTSPOT
3

HOTSPOT 2
IMAGE MAP
Image map is used to connect
links to different regions on the
webpage.

An Image map is created by


marking certain regions on an
image clickable.
Types Of Image Map
Image Maps are of two types:

➢ Client Side Image Maps

➢Server Side Image Maps


CLIENT SIDE IMAGE MAP
1. <Img>
2. <map>
3. <area>
<IMG> TAG:
It is used to insert an image on a
web page.
To create a client side image map
usemap attribute of <img> is used
with value which is preceded with a
# symbol.
The usemap attribute acts as a
pointer which indicates that the
image is a client side image map.
E.g <img src=“flower.jpg” usemap =
“#abc”>
<map>:
 It has only one attribute
1) name:=>

➢ It specifies name of the image used for


client side image map.
➢ The value of the name attribute is the
value specified in usemap attribute of
<img>.

E.g <img src=“flower.jpg” usemap =


“#abc”>
E.g <map name= “abc”>
<area>
 It defines specific clickable
regions.
A given <map> element can
contain multiple <area>
element within it.
<area> is singular tag and
<map> is paired.
Attributes of <area>:
1) Href - Defines the URL to which the clickable region
within the image-map navigates.

E.g <area
2) Shape –
href=“http://www.google.com”>
➢ RECT
➢ CIRCLE
➢ POLY
➢ default

E.g <area shape = “poly”


href=“http://www.google.com”>
Attributes of <area>:
3) COORDS – Specifies co-ordinates of the clickable regions
.
A)Rect- (34,44)
➢ Specifies rectangular area.
➢ It takes four co-ordinates.

E.g <area shape =


“rect” coords =
“34,44,270,350”)
href=“http://www.goog
le.com”>
(270,350)
B)Circle-
➢ Specifies a circular region.
➢ It takes three co-ordinates.

E.g <area shape =


“circle” coords =
“337,300,44”)
href=“http://www.ugc.in
”>
(337,300,44)
C) Poly-
 Defines a polygon region with co-ordinates specifying
each point on the polygon.
(117,320)
 It requires four co-ordinates.

E.g <area shape =


“POLY” coords =
“117,320,35,120,327,340”)
href=“http://www.ymail.
in”>

(35,120) (327,340)
D) Default-
 Default-Region covers the entire image
 No co-ordinates are required

E.g <area shape =


“default”
href=“http://www.googl
e.com”>
<!DOCTYPE html><html><body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of
coffee to go to a new page and read more about the
topic:</p>

<img src="workplace.jpg" alt="Workplace"


usemap="#workmap" width="400" height="379">

<map name="workmap">

<area shape="rect" coords="34,44,270,350"


alt="Computer"
href="http://www.laptophouse.com">

<area shape="rect" coords="290,172,333,250"


alt="Phone" href="http://www.realme.com">
<area shape="circle" coords="337,300,44" alt="Cup
of coffee" href="http://www.coffeehouse.com">
<area shape = "default" href =
"http://www.google.com">
</map>

</body>
</html>
INLINE FRAME
 The <iframe>
element creates an
inline frame.

 Inline frames are


often used in online
advertising, where
the contents
of the <iframe> is
an advertisement
from an external
party.
<IFRAME>TAG
It is used to create inline frame.
ATTRIBUTES OF <IFRAME>:
1)Src –URL
➢Specifies the address of the Src document
to embed in the <iframe>.
2)Height-Pixel
➢Specifies the height of an<iframe>
ATTRIBUTES OF <IFRAME>:
3)width-Pixel
➢Specifies the width of an<iframe>
4) Name-Text
➢Specifies name of an <iframe>
5) Srcdoc-HTMLcode
➢Specifies the HTML content of the page
to show in the <iframe>.
PROGRAM
<!DOCTYPE html> <html>
<body>
<h2>HTML Iframes</h2>
<p>This is the example of
iframes.</p>
<iframe src="xyz.html"
height="200"
width="300"></iframe>
Website Hosting
Web hosting is the service of
providing storage space.

The website is made available on


the Internet with the help of web
hosting
WEB HOSTS
 The companies that provides web
hosting services are called web
hosts.
 Web hosts own and manage web
servers.
 These web hosts provides
uninterrupted Internet
Connectivity.
Types of Web hosting :
1. Shared hosting :
➢ It is cost effective.
➢ It gives domain name to your website.
2. Free hosting :
➢ These websites provides free hosting of
website for limited period of time

3. Dedicated hosting :
➢ These are paid hosting servers for large
websites.
FILL IN THE BLANKS
1. The <ol> tag defines
an………………

2. An unordered list created


using the…………….. tag
3. The…………………element creates an
inline frame.
4. …………….tag is used to specify
video on an HTML document.
5. If a web developer wants to add
the description to an image he
must use ……… attribute of <img>
tag.
6. The……………… property is used
to set position for an element.
7. The
float property defines the
………………..of content.

8. ………………is used with elements that


overlap with each other.
State whether the following
statement is True or False

 1.HTML is an Object Oriented Programming


Language.
 2. Charset is used for character encoding
declaration.
 3. An unordered list can be numerical or
alphabetical.
 4. Multilevel list can be created in HTML 5.
State whether the following
statement is True or False

 5. Srccode specifies the HTML content of the page


to show in the <iframe>.

 6. The ‘controls’ attribute is not used to add play,


pause, and volume.

 7. .cs is the extension of CSS file


THANK YOU
INSERTING AUDIO IN HTML
Common Audio Formats :
 mp3 : An audio format from
MPEG(Moving / Motion Pictures Experts
Group).

 aac : Advanced Audio Coding, standard


format on Iphone, youtube etc.

 ogg : An Open container and free audio


muted format.
<AUDIO> TAG
 It enables you to add audio files on
WebPages.

 Syntax :
<audio controls>
<SOURCE SRC>
</SOURCE>
<SOURCE SRC>
</SOURCE>
</audio>
<SOURCE> TAG
 It specifies multiple media resources for
media elements.
 Multiple sources of audios are specified
so that if the browser is unable to play the
first source then it will automatically
jump to the second source.
 Syntax :
<audio controls>
<SOURCE SRC>
</SOURCE>
<SOURCE SRC>
</SOURCE>
</audio>
Attributes of <audio> tag
 Autoplay – the audio will start playing as
soon as it is ready.
 Controls - The audio controls should be
displayed
 Loop- The audio will start over again every
time it is finished.
 muted - This Specifies that the audio
output should be muted.
 src - Specifies the URL of the audio file.
PROGRAM BASED ON <AUDIO>
TAG
INSERTING VIDEO IN HTML
Common Video Formats :

 mp4 : A video format from MPEG(Moving /


Motion Pictures Experts Group).

 ogg : An Open container and free audio muted


format.

 WebM : An open, royality free web file format.


<video>Tag

 It is used to embed video into your


web page.
 It has several video sources.

 Syntax :
<video src="URL" controls>
<source> </source>
<source> </source>
</video>
Attributes of <video> tag
Autoplay – the video will start playing
as soon as it is ready.
Controls - The video controls should
be displayed
Loop- The video will start over again
every time it is finished.
muted - This Specifies that the audio
output of the video should be muted.
src - Specifies the URL of the video
file.
Attributes of <video> tag
 height – Sets the height of the video player

 Width – Sets the width of the video player

 poster - Specifies an image to be shown while the


video is downloading, or until the user hits the play
button

 Preload - Specifies if and how the author thinks the


video should be loaded when the webpage loads
➢ Auto
➢ Metadata
➢ none
Attributes of <video> tag
 height – Sets the height of the video player

 Width – Sets the width of the video player

 poster - Specifies an image to beshown while the


video is downloading, or until the user hits the play
button

 Preload - Specifies if and how the author thinks the


video should be loaded when the webpage loads
➢ Auto
➢ Metadata
➢ none
Ordered list or numbered list
The <ol> tag defines an ordered
list.
An ordered list can be numerical or
alphabetical.
E.G
1. WEB PUBLISHING
2. CYBER LAWS
3. JAVASCRIPT
4. PHP
ATTRIBUTES OF <OL> TAG:
1. Type -
➢"1"/"a"/"I"/"i“
➢1 is default value
➢other values specify the numbering type for the
used items.
2. Reversed
➢ Reversed
➢specifies that the items of the list are specified in
the reverse order.
3. Start
➢ Number
➢Specifies the starting number of the first item in
an ordered list.

PROGRAM BASED ON ORDERED
LIST
Unordered list or bulleted list
It is created using the <ul> tag.
Each list item starts with the
<li> tag.
The list items in unordered lists
are marked with bullets (small
black circles), by default.
ATTRIBUTES OF <UL> TAG
Attribut Values Description
e
1. Type = style="list-style- Sets the list item
type:disc"
➢ Disc marker to a
e.g
<ul style="list-style -type:disc;"> bullet (default)

➢ circle style="list-style- Sets the list item


type:circle" marker to a
e.g circle.
<ul style="list-style-type:circle">

style="list-style- Sets the list item


type:square" marker to a
➢ square
square e.g
<ul style="list-style-
type:square">
The list items
PROGRAM BASED ON
UNORDERED LIST
Definition list
To define a definition list <dl> tag is
used.
You can create items in definition
list with the <dt> and <dd> tags.
The <dt> tag is used to define the
term.
The <dd>tag is used to define the
term’s definition.
THANK YOU

You might also like