Sybsc cs sem 3 Web Programming unit 1

SYBSC-CS (SEM 3 WEB TECHNOLOGY NOTES)
FOR PROGRAMS REFER CLASSROOM NOTES
WE-IT TUTORIALS CLASSES FOR BSC-IT AND BSC-CS
ADDRESS: 302 PARANJPE UDYOG BHVAN, ABOVE KHANDELWAL SWEETS, THANE STATION ROAD(W)
PHONE : 8097071144/8097071155
UNIT 1
HTML5:-
Fundamentals Elements of HTML:-
● Fundamental elements are not case sensitive.
● Every element must have a start tag and ending tag
● Following are the fundamental elements of html
○ <HTML>
○ <HEAD>
○ <TITLE>
○ <BODY>
1. <HTML>:-
Also known as HTML. This tag tells browser that the included text is in HTML format.It
includes elements like Head, Body, and other elements.
2. <HEAD>:-
Also known as Header of the document. This tag Includes 'header', non-displaying
information about the document, like the TITLE and other descriptive tags.
3. <TITLE>:-
Also known as Document Title. This tag sets a Title that appears in Browser header and
on bookmark lists.
4. <BODY>:-
Also known as Document Body. It defines the content of the document.
Example:
<html>
<head>
<title></title>
</head>
<body>
Body of the document
</body>
</html>

PHONE : 8097071144/8097071155
Formatting text in html
HTML Formatting is a process of formatting text for better look and feel. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or underlined.
Bold Text
If you write anything within <b>............</b> element, is shown in bold letters.
<p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.
Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.
Example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
Example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
HTML Marked formatting
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
Example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
Example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript
; means it is displayed half a character's height below the other characters.
Example:

PHONE : 8097071144/8097071155
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
Superscript Text
If you put the content within <sup>..............</sup> element, is shown in
superscript ; means it is displayed half a character's height above the other
characters.
Example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello
Write Your First Paragraph in superscript.
Larger Text
If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
Smaller Text
If you want to put your font size smaller than the rest of the text then put the
content within <small>.........</small>tag. It reduces one font size than the
previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in larger font.
TagDescriptionHTMLOUTPUT
<b>Defines bold text<b>Bold Text</b>Bold Text
<i>Defines italic text<i>Italic Text</>Italic Text
<u>Defines underline
text
<u>Underline Text</u>Underline
Text
<mark>Defines
marked/highlighted
text
<mark>Highlighted Text</mark>Highlighted
Text
<strike>Defines<strike>It is Strike Through Text</strike>It is Strike

PHONE : 8097071144/8097071155
strikethroughed
text
Through
Text
<sub>Defines subscripted
text
H<sub>2</sub>OH2O
<super>Defines
superscripted text
a<super>2</super>+b<super>2</super>a2
+b2
<big>Defines larger textIt is<big>larger</big> textIt is
larger
text
<small>Defines smaller
text
It is <small>smaller text</small>It is
smaller
text
Organizing Text in HTML
In a Web page, the content is organized into the different formats, such as layers, paragraphs,
lines, tables, and divisions that we have already learned. Organizing text refers to the proper
placement of all the HTML tags and their content in a Web page.
By default, a Web browser wraps text in a Web page and displays the enclosed text in a single
block by avoiding the line and paragraph breaks Now, if the content of a page is not separated
by any line or paragraph breaks, it becomes very tedious for the readers to understand the
given information.
If text in the Web page is not arranged then the readers will find difficulty in reading the
desired information.
To overcome this problem, you can arrange the text in different ways, such as paragraphs, lines,
and tables. HTML provides a number of tags to arrange text into paragraphs and tables. For
instance, you can display the text on the Web page as paragraphs by using the P tag, or display
a horizontal line in a Web page representing a break in the text. HTML also allows you to
change to format of a specific text using the SPAN tag.
Links and Url’s in HTML
 HTML links are hyperlinks.
 Defines a link to an external resource or document.
 Hyperlinks is one of the very core features of HTML, they enable you to jump from one
webpage to another.
 The very idea of World Wide Web is built around Hyperlinks.All day to day activities like
Browsing, Surfing, Downloads depends upon links.
 Any text can be transformed into a hyperlink by encapsulating it within anchor tag <a>
 The attribute href contains the URL of the webdocument,to which the clickable text links.

PHONE : 8097071144/8097071155
Types of Links
 Header Links:using <link> element within the <head> element.
 Anchor Links:using anchor element<a> , within <body> element
Syntax:-
<a href="url">link text</a>
<a href="https://www.weit.in/">Visit our facebook page</a>
Attributes of a Link.
 href: Defines the URL or the location to which the link is created.
 title: Title contains a short descriptive text related to the link,such as authors,
description etc.Hover the tool tip over the link to see the title.
 id : To assign an unique identifier to the link.Two elements on same page cannot
have the same id.
 class: To assign an identifier to an element,but multiple elements can have the same
class name unlike attribute id.
HTML Link Target
 Link element attribute "target" denotes the target of the browsing context(i.e Tab, new
Window, iframe) in which the link should open.
 Target attribute Values:
 _blank:To open the webpage in a new Tab or Window.
 _self:To open the clicked document in the frame as the current one.
 _parent:To open the Web document in the parent frameset of the current frame. If no
parent available then it behaves as _self.
 _top:To open the web document in the full window removing all other frames.
 <frame>:To open the web document in the specified or named frame
Tables in HTML
● Sometimes your web page includes data best presented in a table.
● You can use table tag in html.
● 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.

PHONE : 8097071144/8097071155
Basic Table Elements
ElementDescription
<table>This element defines the table.
<tr>This element defines the table rows.
<th>This element defines the table header.
<td>This element defines the table cells.
Example:-
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Lokesh</th>
<td>80%</td>
</tr>
<tr>
<td>Srilatha</td>
<td>85%</td>
</tr>
</table>
Output:-
NameMarks
Lokesh80%
Srilatha85%

PHONE : 8097071144/8097071155
Images
Images on a webpage
 Images on a webpage are shown using image tag <img>
 Images are not technically inserted into an HTML page, images are linked to HTML
pages.
 The <img> tag creates a holding space for the referenced image
Syntax:-
<img src="home.png" alt="Smiley face" height="42" width="42">
Attributes of image tag :-
AttributeValueDescription
srcurlSpecifies the URL of an image
alttextSpecifies an alternate text for an image
heightpixelsSpecifies the height of an image
widthpixelsSpecifies the width of an image
Image Formats.
Bitmaps (.bmp):-
1. Bitmaps( .bmp ) format was created by Microsoft Windows, popular on the web due to
dominance of Internet Explorer.
2. Supports 16.7 million colors and mostly Uncompressed, hence quite large in size.
JPEG:-
1. JPEG(Joint Photographers Expert Group) is compression format with an extension .jpg
or .jpeg .jpg supports 16.7 million colors with relatively small size, used extensively for
high color photography,and when compressed some details are lost(lossy compression).

PHONE : 8097071144/8097071155
2. So , if your image contains a lot of different colors go for .jpg format, though not
recommended for text, schemantic drawings or line arts.
PNG:-
1. PNG(Portable Network Graphics) is an open source image format and suitable for all
image types on the Web.Though, file sizes are larger than .jpg(since compression is
lossless)
2. .png supports 16.7 million colors and 256 transparent colors. Suitable for images that
require a small number of colors.
3. Can be compressed to very small size files with low color depth.Eg:PNG-8 format has
only 8 bit(i.e 256 colors).
GIF:-
1. GIF( Graphic Interchange format ) is an very popular image format, and when
compressed no detail is lost(i.e lossless compression).
2. Downside of .gif is that it supports only 8 bit color palette, i.e only 256 colors per image,
hence not suitable for images with many colors.
3. Importantly,.gif supports animation, a single .gif file can contain several frames which
can then be played sequentially to create an animation effect.
4. Can be used to display graphs, charts , frames.But, not recommended for graphics
representing critical information
SVG:-
1. SVG( Scaleable Vector Graphics ) is a Vector graphics format(all the above are Raster) ,
can be created with markup similar to HTML.
2. Raster or Bitmap images comprises of dots(pixels) while Vector format comprises of
shapes, so when scaled raster images loses clarity which Vector images can be scaled by
any amount without any loss in Quality.
3. SVG image format can support animations, video, text, because it consists of XML
markups, not recommended for detailed photographs.
Image Map
 An image map is a graphic image defined so that a user can click on different areas of
the image and be linked to different destinations.
 You make an image map by defining each of the sensitive areas in terms of their x and y
coordinates
 With each set of coordinates, you specify a Uniform Resource Locator or Web address
that will be linked to when the user clicks on that area.

PHONE : 8097071144/8097071155
 The X and Y coordinates are expressed in pixel’s either in a separate file called a map file
or in the same HTML file that contains the link to the image map.
 Image Maps are of two types Client Side and Server Side.
 Client-side image map can be created using two elements <map> and <area>.
 Here, <map> acts as container for image map, and <area> defines specific clickable
regions.
 A given <map> element can contain multiple <area> element within it.
Syntax:-
<img alt="Your Image Map" src="maps.png" usemap="#map_demo" />
<map name="map_demo">
.......
</map>
Defining Map element <map>:-
1. Specify an Image map with element <map> and then link it <img> tag using attribute
usemap
<img alt="Your Image Map" src="maps.png" usemap="#map_demo" />
.......
</map>
Regions of an Image Map :<area>
1. The Individual clickable regions wiithin an image map are defined by element <area>.
2. The <area> element comprises of two parts.
3. First part defines the URL to which the clickable region within the image-map navigates
to.
4. Second part defines the shape and the coords(co-ordinates) of the clickable regions on
the image-map
<area href="Chichen_Itza.html" shape="rect" coords="0,0,93,65"
alt="chichen Itza"/>
<area href="Christ_on_Corcovado_mountain.html" shape="rect" coords="93,1,186,65"
alt="Christ on Corcovado Mountain"/>
</map>

PHONE : 8097071144/8097071155
Example
<img src="seven_wonders.jpg" usemap="#imagemap"
alt="Seven Wonders of the World"/>
<map name="imagemap">
<area href="Chichen_Itza.html" shape="rect" coords="0,0,93,65" alt="chichen Itza"/>
<area href="Christ_on_Corcovado_mountain.html" shape="rect"
coords="93,1,186,65" alt="Christ on Corcovado Mountain"/>
<area href="great_wall_china.html" shape="rect" coords="0,66,94,132" alt="great
wall of china"/>
<area href="Machu_Picchu.html" shape="rect" coords="92,64,186,132" alt="machu
picchu"/>
</map>
Consider this example
Refer the below diagram, When a user clicks on a region, it redirects to the page that contains
the information of that region. This is done by image maps. Firstly different areas are created by
setting coordinates. Whenever the user clicks on any area, the browser gets the coordinates of
the mouse then it searches in which area is this coordinates exist. Based on the area it fetches
information from a map file which is linked to the image. And based on that information it
redirects the user to the specific region webpage.

PHONE : 8097071144/8097071155
Colors
Colors are very important to give a good look and feel to your website. You can specify colors
on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors:
 bgcolor - sets a color for the background of the page.
 text - sets a color for the body text.
 alink - sets a color for active links or selected links.
 link - sets a color for linked text.
 vlink - sets a color for visited links - that is, for linked text that you have already clicked
on.
HTML Color Coding Methods
There are following three different methods to set colors in your web page:
 Color names - You can specify color names directly like green, blue or red.
 Hex codes - A six-digit code representing the amount of red, green, and blue that
makes up the color.
 Color decimal or percentage values - This value is specified using the rgb( )
property.
HTML Colors - Color Names
You can sepecify direct a color name to set text or background color. W3C has listed 16 basic
color names that will validate with an HTML validator but there are over 200 different color
names supported by major browsers.

PHONE : 8097071144/8097071155
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.
 Forms allows the user to fill in data that can be used to send data or to receive responses
to queries.
 In Real world we see forms everywhere. The Search Engines(Google,Bing..),Social
Networks (facebook, twitter, Google+.) all make extensive usage of Forms in one form or
another.
 Forms contain special elements called controls like inputbox, checkboxes, radio-buttons,
submit buttons, etc.
 Users generally complete a form by modifying its controls e.g. entering text, selecting
items, etc. and submitting this form to a web server for processing.
 The <form> tag is used to create an HTML form.
Basic form Structure
<form action="..." method="...">

</form>
Attributes of Form tag :-
AttributeDescription
actionSpecifies where to send the form-data when a form is submitted
methodSpecifies the HTTP method to use when sending form-data.Possible
values are get and post.
autocompleteSpecifies whether a form should have autocomplete on or off
nameSpecifies the name of a form
targetA name or keyword indicating the target page where the result of the
script will be displayed. The reserved keywords are _blank, _self,
_parent and _top.

PHONE : 8097071144/8097071155
Interactive Form Controls:-
Following are different types of controls that you can use in your form.:-
Text Input Controls
There are three types of text input used on forms:
Single-line text input controls - This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag
and specifying the type as text.
Synatx
<input type=”text”>
Password input controls - This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTMl <input> tag and specifying
the type as password.
Syntax:-
<input type=”password”>
Multi-line text input controls - This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.
Syntax:-
<textarea><textarea>
Attributes of Text Input Controls:
typeIndicates the type of input control and for text input control it will
be set to text.
nameUsed to give a name to the control which is sent to the server to be
recognized and get the value.
valueThis can be used to provide an initial value inside the control.
sizeAllows to specify the width of the text-input control in terms of
characters.

PHONE : 8097071144/8097071155
maxlengthAllows to specify the maximum number of characters a user can
enter into the text box.
rowsIndicates the number of rows of text area box.
colsIndicates the number of columns of text area box
Checkbox Control
Checkboxes allows the user to select one or more option from a pre-defined set of
options. It is created using an <input> element whose type attribute has a value of
checkbox.
Syntax:-
<input type="checkbox" name="syit" value="on"> Sy Cs
<input type="checkbox" name="sycs" value="on"> Sy It
Attributes of Checkbox
typeIndicates the type of input control and for checkbox input control it
will be set to checkbox.
valueThe value that will be used if the checkbox is selected.
checkedSet to checked if you want to select it by default.
Radio Button Control
Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set to radio.
Syntax:-
<input type="radio" name="class" value="CC">Sy CS
<input type="radio" name="class" value="IT">Sy It

PHONE : 8097071144/8097071155
Attributes of Radio Button
typeIndicates the type of input control and for checkbox input control it will be
set to radio.
valueThe value that will be used if the radio box is selected.
checkedSet to checked if you want to select it by default.
Select Box Control
A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.
Syntax:-
<select name="dropdown">
<option value="Class" selected>Sy IT</option>
<option value="Class">Ty IT</option>
</select>
Attribute of select box controls
Following is the list of attributes of <select> tag:
nameUsed to give a name to the control which is sent to the server to
be recognized and get the value.
sizeThis can be used to present a scrolling list box.
multipleIf set to "multiple" then allows a user to select multiple items
from the menu.

PHONE : 8097071144/8097071155
Following is the list of important attributes of <option> tag:
valueThe value that will be used if an option in the select box box is
selected.
selectedSpecifies that this option should be the initially selected value
when the page loads.
labelAn alternative way of labeling options.
File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.
Syntax:-
<input type="file" name="fileupload" accept="image/*" />
Attributes of File Upload:-
acceptSpecifies the types of files that the server accepts.
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button.You can also
used button tag <button> for displaying a button.
There are three types of button.
 Submit Button:-A submit button is used to send the form data to a web server.
When submit button is clicked the form data is sent to the file specified in the
form's action attribute to process the submitted data

PHONE : 8097071144/8097071155
 Reset Button:-A reset button resets all the forms control to default values.
 Button:-This creates a button that is used to trigger a client-side script when the
user clicks that button.
 Image Button:-This creates a clickable button but we can use an image as
background of the button. These buttons can be used using <input> tag. They are
not supported in <button> tag
Syntax:-

<input type=”submit” value="Submit">
<input type="reset" value="Reset">
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />

<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button >Normal Button</button>
Attributes:-
AttributesDescription
valueThis can be used to provide an initial value inside the control.
Hidden Fields
Hidden fields are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. This is
also created using the <input> element but type attribute is set to hidden
Syntax:-
<input type="hidden" value="1">

PHONE : 8097071144/8097071155
Working with Multimedia
Web developers have wanted to use video and audio on the Web for a long time, ever since the
early 2000s, when we started to have bandwidth fast enough to support any kind of video
(video files are much larger than text or even images.) In the early days, native web
technologies such as HTML didn't have the ability to embed video and audio on the Web, so
proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for
handling such content. This kind of technology worked ok, but it had a number of problems,
including not working well with HTML/CSS features, security issues, and accessibility issues.
A native solution would solve much of this if done right. Fortunately, a few years later the
HTML5 specification had such features added, with the <video> and <audio> elements, and
some shiny new JavaScript APIs for controlling them.
With the audio element, you can add audio directly to a web page. The audio element can be
controlled with HTML or Javascript and styled with CSS. Note that while the HTML5
specification covers audio, it doesn't cover which codecs are supported, meaning that codecs
and support for them varies with browsers and platforms.
HTML5 allows you to embed the video element directly onto a web page. Like the audio
element, the video element can be controlled with HTML or Javascript and styled with CSS.
While the video element has been standardized, the codecs vary, so support will vary, as well.
In this section, we'll look at an issue with Firefox.
Features of Audio and Video element in HTML5
 If you embed audio or video in your website, you should use HTML5.
 HTML5 is the next major version of HTML, the primary standard that determines how
web content interacts with browsers.
 HTML5 supports audio and video playback natively in the browser, without requiring a
plug-in. With HTML5, you can add media to a webpage with just a line or two of code.
 The HTML5 media elements provide simple fallback for browsers that still need to use
plug-ins, so you can update your website to HTML5 today and still be compatible with
older browsers.
 When you use HTML5, you can create your own customized media controllers for rich
interactivity using web-standard CSS and JavaScript.
 The HTML5 <audio> and <video> tags make it simple to add media to your website. Just
include the <audio> or <video> element, use the src attribute to identify the media
source, and include the controls attribute.
 <video src="mymovie.mp4" controls></video>
There are no plug-ins to install or configure. The audio or video downloads and plays in
your webpage with built-in controls.

PHONE : 8097071144/8097071155
HTML5 Supported Audio and Video File Format:-
Audio Format:-
FormatExtensionDescription
Ogg
Vorbis
.ogg
.oga
1)Developed by Xiph.Org Foundation. It is completely free and
Open Container format.
2) Better than any other lossy audio formats.
3)Best Known for high fidelity, low compression size and zero
restrictions.
WAV.wav
.wave
1)Waveform Audio File Format was developed Jointly by
Microsoft and IBM. It stores data in form of "chunks"(an
application of Resource Interchange File Format(RIFF))
2)When compared to other format WAV files are quite large in
size.Hence not suitable for Internet.
AAC.m4a
.m4b
.m4p
.m4v
.m4r
.3gp
.mp4
.aac
1)Advanced Audio Coding(ACC) is as popular as .MP3 file
format.
2) But produces better sound quality at same bit rates as
compared to .MP3.
3)Its Licence free and is a standard format for iPhone, iPad,
Youtube, PlayStation3 etc.
4)Hence, a future replacement for .MP3 format.
MP3.mp31)Moving Pictures Expert Group(MPEG) developed the format
MP3(standard MPEG-1 or MPEG-2)
2)It is the Most Popular format for audio files on the Internet, and
a defacto standard when it comes to audio compression(lossy).
3)It a patented format and hence Licencing is required for
encoding.
WebM
Vorbis
.webm1)WebM Vorbis is an Audio format designed for HTML5 audio.
2)It Developed by Google Inc and is an extension from Matroska
format.
3)Its an Opensource, free, patent and royalty free format.
4)Supported on Mozilla Firefox, Google Chrome and Opera
browsers.
Ogg.opus1)Opus Audio Codec Format was developed by Internet

PHONE : 8097071144/8097071155
OpusEngineering Task Force(IETF)
to effectively support Interactive Real-Time audio over the
Internet.
2)It supports lossy audio compression and is licence and royalty
free.
Video Formats:-
FormatExtensionDescription
Ogg Theora.ogg
.ogv
1)Developed by Xiph.Org Foundation. It is completely free and
Open Container format. 2)Performance wise Comparable to
H.264/MPEG-4 .
3)Best Known for high fidelity, low compression size and zero
restrictions.
H.264/MPEG-
4
.mp41)H.264/MPEG-4 is the most popular and de-facto standard for
video compression.
2)Used mostly to encode High Definition(HD) and Blu-ray Disks.
3)It available in a set of 21 profiles (capabilities) for different kind
of demands.
4)Popular on the internet with Youtube Vimeo iTunes
WebM.webm1)WebM audio format is designed for HTML5 audio and video.
1)Its a project funded by Google Inc.
3)It Consists of VP-8 and VP-9 video and Vorbis and Opus audio
streams and an extension of Matroska container.
4)Its an Opensource, free, patent and royalty free format.
Inserting audio and video:-
Audio:-
 HTML5 new specifications enables users to have a far more control over
audio on web pages.
 A feature which earlier required support from Adobe Flash.
 It allows users and developers to control features like start, stop , Volume
control etc.
 The < audio > element enables you to embed(or add) audio files on
Webpages.

PHONE : 8097071144/8097071155
Syntax:-
<audio src="Audio_Source.mp3" autoplay="autoplay">
</audio>
Audio Attributes:-
srcSpecifies the Source URL of audio.
autoplayAutomatically plays the file as soon as it loads.
controlsThe attribute controls sets the browser's default audio controls.
loopTells browser to play the audio in loop
mutedIf present, the audio is muted initially.
preloadSpecifies the browser whether to load video in advance or not.
It takes three(3) values.
1. none: Nothing loads until user starts playback
2. metadata :Loads audio's metadata(e.g. length) before playback.
3. auto:Downloads the audio completely as soon as possible. the browser
is free to decline the request.This is default behavior.
Video
 Before HTML5, a video could only be played in a browser with a plug-in (like flash).
 The HTML5 <video> element specifies a standard way to embed a video in a web page.
 The < video > element enables you to embed(or add) video files on Webpages.
Syntax:-
<video src=”video.mp4” controls>
</video>

PHONE : 8097071144/8097071155
Video Attributes:-
width and
height
It define the dimensions of the playback-window, if not set the
browser tries to use the dimensions from the video.
loopsets the video to play in a loop.
autoplaystarts the video immediately.
controlstells the browser to display a set of controls for playback, seeking
and volume. Which controls these are and how they look depends
on the browser.
autobufferAutomatically start buffering (loading) the video, so it’s first loaded
if you start playing. Currently Chrome and Safari ignore this
attribute, so the video is being buffered on page load.
posterHere you can supply an image which will be displayed while the
movie is not loaded yet.
CSS
Introduction:-
 CSS Cascading Style Sheets enables you to define rules on how an element should
appear
 Cascading Style Sheets(CSS) is used to define and control the presentation of your
Webpages.
 CSS describes the way HTML elements are presented to the user, its color, border,
dimensions etc
 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
 CSS styles are extremely expressive and detailed and allows you to have a very high
degree of control over the styling of HTML elements with very little code.
 And just like HTML even CSS has evolved over the years, the latest version being CSS3,
the latest version has added a lot of new capabilities to existing ones.

PHONE : 8097071144/8097071155
 CSS3 together with HTML5 has been at the forefront of advanced WebDesign and
WebDevelopment.
Understanding the syntax of css:-
A CSS style sheet is a collection of a number of style definitions, each style definition has two
main components
 Selector: To select the element to which the CSS rule applies
 Declaration: Specifies how the selected element should be styled. Multiple declarations
are seperated by colon(;)
The Declaration further comprises of two components:
Property: Specifies the feature of the element to be affected. Eg: font-family,color etc.
Value: The value for the given property.
Selector { Property:Value;}
E.g. h1{ font-size:32px;}
 h1 -selector
 Font-size:32px -Declaration
 font-size: - property
 32px - value
Css Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more
Universal Selectors:-
1. A universal selector ( * ) is a wildcard selector for every HTML tag on the
document.
2. Universal selector applies properties to all HTML elements.
E.g
<style type=”text/css”>
*{

PHONE : 8097071144/8097071155
margin: 0;
padding: 0;}
font-size: 1em;
font-size: 2em;
}
</style>
Tag Selector:-
1. The CSS Type selector or element selector applies CSS properties to every
occurrence of
the HTML tag on the webpage.
2. This selector enables you make sweeping changes for a particular tag with very little
effort.
E.g.
<style type="text/css">
p{
font-family:Papyrus, Arial;
color:#fa4b2a;
background:#eee;
}
</style>
Class Selector:-
1. To assign same CSS style to more than one element, you can use the CSS class
selector.
2. Multiple HTML elements must have the same class attribute in order to have the
same
style.
3. It enables you to very specifically target an element on the web page, regardless of
its
Tag.
4. To create the selector you must prefix the class name with a period( . ).
Eg: .myClass .
E.g.
.myClass{
font-family: Verdana;

PHONE : 8097071144/8097071155
box-shadow:5px 5px 5px #ccc;
border:5px solid #eee;
}
</style>
Id Selector:-
1. Similar to class, an Id Selector applies the styles to the elements with same Id
attribute.
2. The id attribute is used to assign a unique identifier.It can be used only once per
page to
identify a single element.
3. To create the Selector you must prefix the ID name with a pound or hash(" # "),
Eg: #Caution.
E.g.
#uniqueId{
font-family: Verdana;
}
</style>
Grouping Selector:-
Selectors are used to "select" the elements on an HTML page that are affected by rules.
When several selectors share the same declarations, they may be grouped together to
save writing the same rule more than once.
Each selector must be separated by a comma.
They can also include a wide range of selectors
E.g.
h1, h2, h3, h4 { padding: 1em; }
.highlight p, .highlight ul { margin-left: .5em; }
#main p, #main ul { padding-top: 1em; }
</style>

PHONE : 8097071144/8097071155
Inserting CSS:-
There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style
External CSS:-
 The most efficient way is to put all style definitions on a single plain text file, and then
link the file to all webpages.
 The external file is called external CSS.
 The external stylesheet files have an extension as .css.Eg: mystyle.css
 In case of any style change, the changes done affect all the linked webpages.Thus, its
highly efficient and maintainable.
 In order to link the external stylesheet to you webpage just put the <link> element inside
the document's <head>element with the URL of the stylesheet.
Example:
External css file (mystyle.css)
p{
font-family:Verdana, Arial;
color:#009900;
}
Index.html
<html>
<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>CSS3 along with HTML5 is at the cutting edge of the Webdesign and
Webdevelopment.</p>
</body>

PHONE : 8097071144/8097071155
</html>
Internal CSS:-
 Next approach to apply CSS to your Webpages is Inline CSS, this is done using the
HTML element <style> .
 All style declarations are done within the opening and closing of <style> tags only.
 Ideally , the <style> tags must be within the <head> element, Also, the styles are
applicable to the elements on the current page only.
 If you want to apply the styles to the entire website than you will have to repeat the style
on all the webpages. Hence very inefficient for large websites.
Example:
<html>
<head>

<style type="text/css">
p{
font-family:Papyrus, Arial;
color:#fa4b2a;
background:#eee;
}
</style>
</head>
<body>
<p>CSS3 along with HTML5 is at the cutting edge of the Webdesign and
Webdevelopment.</p>
</body>
</html>
Inline CSS:-
 The Most simple way to add CSS styles to webpages is Inline CSS Method. But, it’s also
the most inefficient of all.
 The Inline style is applied by simply defining the CSS styles within the HTML element
via its style attribute.
 Inline CSS has no selector at all, since the settings are applied to the specific elements
only.
 The biggest disadvantage is that it cannot be reused again, style settings have to be
defined for each element separately.

PHONE : 8097071144/8097071155
Example

<p style="font-family:Verdana; color:#fa4b2a; background:#eee;">
CSS3 is Awesome.</p>
CSS Properties Working with background
PropertyValueDescription
background-colorcolor(hex, RGBa, HSL)
transparent(default)
To Define the background color of an element.
background-imageurl(image)
none(default)
To set the background image(s) of an element
background-repeatrepeat-x
repeat-y
repeat
space
round(default)
no-repeat
To set the repeat style of the background
pattern
background-sizecontain
cover
auto(default)
To define the size of the background image
background-
position
top
left
right
bottom
center
To set the position of the background image
background-
attachment
fixed
local
scroll(default)
To define the attachment style of background
image. i.e fixed or scrolling.
background-clipborder-box(default)
padding-box
content-box
To define the clipping style for background
images

PHONE : 8097071144/8097071155
background-originborder-box
padding-box(default)
content-box
To define the point from which the
background position is measured.
backgroundA shorthand to define all background setting
in a single declaration
Working with font styles
font-family"Times New Roman", “Times”,
“serif”
Set the font-family
font-sizexx-small |,x-small , small,|
medium , large , x-large,| xx-
large, larger, smaller
To set the font size.It can also be set in
pixels, em, percent(%).
font-weightNormal, boldTo set the level of boldness of the text
font-styleItalic, normal, obliqueTo render the text in italic
font-variantNormal, small-capsIt enables you to display the text in
uppercase or lowercase fonts..
Working with text styles
text-alignLeft, right, center, justify,
inherit, auto
To set the horizontal alignment of a text.
text-decorationunderline, overline, line-
through, inherit, none
The entire text blocks can be decorated
using CSS text property of text-decoration
with effects such as underline, overline, ,
line-through etc..
text-transformCapitalise, uppercase,
lowercase, none
To convert text to initial Caps, uppercase
or lowercase.
text-indentTo specify the indentation of the first line
of a text.

PHONE : 8097071144/8097071155
It is specfied in terms of percentage(%),
pixel(px) or em .
letter-spacingTo control the spacing between the
individual letters
line-heightTo specify the space between lines.
directionltr(left to right), rtl(right to
left)
To control the direction of the block of text
word-spacingTo add or remove spaces in-between
words.
text-shadow{x-offset, y-offset, blur-
radius, color}
To add dimensional effect to text
Working with positioning of an element
CSS: position property
The CSS position property defines the position of an element where generally the top,
right, bottom, and left properties will determine the position of the element.
Syntax
position: value;
The rule to be used to position the element. It can be one of the following:
Value Description
static Normal position for the element (where top, right, bottom, and left have no effect)
div { position: static; }
relative Position the element relative to where its normal position would have been
div { position: relative; top: 10px; left: 15px; }
absolute Position the element absolutely relative to its container
div { position: absolute; top: 10px; left: 15px; }
fixed Position the element relative to the screen's viewport and stay fixed on screen when
scrolling
div { position: fixed; top: 10px; left: 15px; }
inherit Indicates that the element will inherit the position from its parent element
div { position: inherit; }

Sybsc cs sem 3 Web Programming unit 1

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to Sybsc cs sem 3 Web Programming unit 1

Similar to Sybsc cs sem 3 Web Programming unit 1 (20)

More from WE-IT TUTORIALS

More from WE-IT TUTORIALS (20)

Recently uploaded

Recently uploaded (20)

Sybsc cs sem 3 Web Programming unit 1