Web Technology-I Unit 6 … 433.
We can make frames all of different sizes. The total percentages of all the frames size should add up to 100,
or the browser will come up with its own interpretation.
If we divide the page into ROWS instead of COLS we get a different layout. For example;
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET ROWS="10%, 20%,30%,15%,25%">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
<FRAME SRC="Three.htm">
<FRAME SRC="Four.htm">
<FRAME SRC="Five.htm">
</FRAMESET>
</HTML>
Let us now take another example with only 2 frames. We can specify 50 to indicate that number of pixels
instead of 50%. We can also use * instead of a number. The * means whatever is left over.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="50,*">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
</FRAMESET>
</HTML>
While using frames we should be very careful to code properly to ensure that all viewers are able to look
at reasonably consistent views. Let us suppose that we make a frame 100 pixels wide on the left and 100
pixels wide on the right. If some users are running an 800 × 600 screen they see the middle area as 600
pixels wide. Other users may have a screen set at 640 × 480. The middle area for them is only 440 pixels
wide. So if we use any absolute dimensions in the <FRAMESET> tags, we should have at least one * that
will produce an elastic frame. That way everything will look at least reasonably good. If we do not do that,
the page might need to scroll on one resolution and not on another. As far as possible, we should avoid
absolute values in frames and work on relative numbers so that things get taken care of automatically by
the browser. We can have more than one leftover frame and specify a size relationship between them. Try
the following yourself and see the result.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
Approved by Curriculum Development Centre (CDC), Nepal
.434 … Computer Science–I
<FRAMESET COLS="50,*,2*">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
<FRAME SRC="Three.htm">
</FRAMESET>
</HTML>
The above code means: Make 3 frames. Make the first 50 pixels wide. Divide the rest
between frames 2 and 3. But make frame 3 twice as big as frame 2. Put One.html in the first frame,
Two.html in the second and Three.html in the third. It is important to note that everything is done in
order. The first <FRAME> is displayed according to the first size attribute in the <FRAMESET> tag
(50/One), the second frame with the second (*/Two) and the third frame with the third attribute set
(2*/Three).
Frames inside other frames:
Here we will discuss how to divide frames into different frames i.e. how to put horizontal frames in a
vertical one and vice-versa. Here we are going to divide a frame in half horizontally.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="Three.htm">
<FRAME SRC="Four.htm">
</FRAMESET>
</FRAMESET>
Figure: 6.12 Frames within Frame
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 435.
A Web Page with Four Frames
Here the frame three is at the top and four at the bottom. This has been done just to illustrate how to
achieve the effect. Too many frames on a page do not look good. A good rule of thumb is not to have more
than 3 frames on any page.
Noframes Tag
The <NOFRAMES> tag can be used for those browsers that are not able to interpret <FRAME> tags.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
<FRAME SRC="One.htm">
<FRAME SRC="Five.htm">
<FRAME SRC="Six.htm">
</FRAMESET>
<FRAME SRC="Two.htm">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="Three.htm">
<FRAME SRC="Four.htm">
</FRAMESET>
</FRAMESET>
<BODY><NOFRAMES> your browser does not handle frames! </NOFRAMES>
</BODY>
</HTML>
Figure: 6.13 Putting in a NOFRAMES Version
Approved by Curriculum Development Centre (CDC), Nepal
.436 … Computer Science–I
Put your non-frames page down between the <NOFRAMES> tags. If someone is using an old browser, it
will skip everything above and come straight down here. Frames-capable browsers will ignore what is
between the <NOFRAMES> tags. We can also put images in the frames. Let us see how to put in
“world.gif” as an example.
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars -
whether they are needed or not. NO means there will be no scrollbars. AUTO is the default. If scrollbars
are needed, they appear while if they are not needed they stay conveniently out of the way. So let us see
how to get rid of our scrollbars.
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
You would notice a problem with this code. The image is not in the right frame. The next two attributes
deal with margins. The browser automatically gives each frame some empty space around its contents.
We can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They
control the left and right and top and bottom margins respectively. We will set them both to 1. (1 is the
minimum)
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="One.htm">
</FRAMESET>
<FRAME SRC="Two.htm">
</FRAMESET>
Forms
Now let us get a grip on how to add interactivity to your web documents by way of the <FORM> tag.
Users can talk back to web site owner through the forms that they fill up and submit to the web site. With
this <FORM> tag we can add to the web pages a guestbook, order forms, surveys, get feedback, college
admission, driving license, leave application or put in any other form that we wish.
Forms can have form field, text in all paragraph styles, tables, images, and most other objects that can be
inserted on a web page. The user fills in a form by typing into text fields, clicking radio buttons and check
boxes, and selecting options from drop down menus. The user then can submit the form by clicking a
button, usually labeled "Submit".
A form typically has a form handler, which is a method of collecting information from the form. Once the
user submits the form, the form handler swings into action. The form handler is a script that handles the
data on the form. A form handler can be used to
• Store data submitted by the user into a text file.
• Update a database with the data submitted by the user.
• Post the data on a web page.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 437.
Forms can be classified into three sections namely;
• Form Header
• Input Fields
• Action Buttons
Form And Input Tag
To add a form, the tags <FORM>….</FORM> has to be used. These tags inform the browser that
everything specified between them belongs to the form.
<HTML>
<BODY>
<FORM>
Form elements
</FORM>
</BODY>
</HTML>
Form Header:
Form header can be added to the form by using the <P> tag or <DIV> tag (already discussed). The tag for
making the form header as a caption is;
<CENTER>
<CAPTION ALIGN="TOP"><H2>APPLICATION FORM</H2></CAPTION>
<CENTER>
Attributes to Form Tag
FORM tag can have two attributes;
METHOD: It specifies how the browser communicates with the server. Possible values are "GET" and
"POST". GET method is used in case data from a pre-established index needs to be queried. If the
information in the form is to be collected for later purpose then the POST method is used.
ACTION: This specifies what the CGI script is used to process the data. The values could either be a URL
to the script or an email which will send the form directly to the specified address. For example;
<FORM
ACTION="MAILTO:emailID"
METHOD="POST" NAME="NAME OF THE FORM">
…………
</FORM>
The line containing the MAILTO keyword is very important. The words FORM, METHOD, POST and
ACTION do not have to be capitalized, but there must be a space between every two attributes, between
FORM and METHOD, between POST and ACTION.
The following example shows a general form that includes some of the commonly used controls.
<HTML>
<HEAD>
<TITLE> Welcome to NEB </TITLE>
</HEAD>
<BODY>
Approved by Curriculum Development Centre (CDC), Nepal
.438 … Computer Science–I
<FORM METHOD=POST>
Text box with name, value and size attributes
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>
<BR>Text box with password and max length
<INPUT TYPE=PASSWORD MAXLENGTH=10>
<BR>Radio button with default checked<BR>
Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ajay" CHECKED>
Ajay <BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rohan"> Rohan
<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tarun"> Tarun<P>
<BR>Checkbox<BR>
<INPUT TYPE=CHECKBOX NAME="AJAY" VALUE="YES"> Ajay <BR>
<INPUT TYPE=CHECKBOX NAME="Rohan" VALUE="YES"> Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="BU" VALUE="YES"> Bunty<P>
<BR>Drop down list<BR>
<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ajay">Ajay
<OPTION VALUE="Rohan">Rohan
<OPTION VALUE="Tarun">Tarun
<OPTION VALUE="Gagan">Gagan
<OPTION VALUE="Harish">Harish
<OPTION VALUE="Manjit">Manjit
</SELECT>
</FORM>
</HTML>
Figure: 6.14 A Web Page with a Form
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 439.
Input Elements
Input elements are form elements that can accept input from the user. Some of the input elements that can
be added to a form are TEXT box, BUTTON, CHECKBOX, IMAGE, PASSWORD, RADIO button, RESET,
SUBMIT etc.
<INPUT> is the HTML tag that is used to create any of the form elements and the TYPE attribute
determines the specific sort of form element to be created.
The syntax is;
<INPUT TYPE="…"
NAME="…"
VALUE="…"
ALIGN="…"
SIZE="…"
MAXLENGTH+"…">
Here,
• TYPE attribute specifies the type of the form element, eg. TEXT Box or BUTTON.
• NAME appears as the label in the form and should be unique. Every control in the form has
name to identify it.
• VALUE is used to specify the default value to the control.
• ALIGN is used for aligning controls with respect to form margin. The values can be LEFT,
CENTER or RIGHT.
• SIZE specifies the horizontal size of the text box.
• MAXLENGTH specifies maximum number of characters that the user can enter.
Adding a Text Box
A text box allows a user to enter data such as characters and numbers. In order to add a text box, we need
to enter the following code,
<INPUT TYPE="TEXT" NAME="FNAME" SIZE="30" MAXLENGTH="30", VALUE=" "
TYPE attribute of <INPUT> tag is used to specify the kind of input that is to be provided. The most
common value of this attribute is TEXT. Every INPUT needs a NAME. When the user types in his address
(for example 1234 ABC), it will become the input's value and be paired with NAME so the end result after
running it through the MAILTO Formatter will be ADDRESS=1234 ABC.
We can, if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ">
This will automatically pair the value 44 XYZ with the name ADDRESS, unless the user changes it. Take
care to use quotes as specified in the example. We can specify the size of the text input box. The default
value is 20.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>
The MAXLENGTH attribute is used to restrict the number of characters to be entered in the textbox.
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=20 MAXLENGTH=10>
Approved by Curriculum Development Centre (CDC), Nepal
.440 … Computer Science–I
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except that for security it
displays *** instead of the actual input. The text entered as password would not be echoed on the page. So
you can use this whenever you want to accept a password or some other sensitive information from the
user.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME that gives the name of the field.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
The SIZE, VALUE, and MAXLENGTH attribute work here also just as they do with TEXT
Adding Radio Button
Radio buttons are used when only one out of the group of options or multiple choices is to be chosen. It is
always used in groups. For example; to accept gender of a user, we need to specify two radio buttons
MALE and FEMALE, which belong to same group gender. The syntax for this is;
<INPUT TYPE="RADIO" NAME="Gender" VALUE="MALE" CHECKED> MALE
<INPUT TYPE="RADIO" NAME="Gender" VALUE="FEMALE"> FEMALE
Each of the Radio Buttons must be assigned a VALUE and each button must be labeled. We can tidy things
up by adding a statement above the buttons, and if required, choose a default selection (optional).
To choose a default selection just add “CHECKED” with the appropriate radio button. The user of course
can only choose one option. The choice will be returned to you as the name/value pair.
Adding Checkbox
A checkbox is like a toggle switch where users can select the item. if the checkbox is selected then a value
TRUE is returned with the checkbox name else FALSE is returned. Generally, checkboxes are used when
one or more out of the group of options is to be chosen. Building Check boxes is very similar to radio
buttons. The syntax is;
<INPUT TYPE="CHECKBOX" NAME="Management" VALUE="11" CHECKED>
The user can choose any number such as 1, 2, none or all of the options. The choices will be returned as the
name/value pairs as shown in the example figure.
Ajay=YES
Tarun=YES (or whatever the user chooses. If nothing, nothing will be returned to you)
The following is code for making a table containing different options for 3 different
questions. Try it yourself and see the result.
<HTML>
<HEAD> <TITLE> FrmCheckBox </TITLE> </HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ajay" VALUE="YES"> Ajay
<BR>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 441.
<INPUT TYPE=CHECKBOX NAME="Friend?..Rohan" VALUE="YES"> Rohan
<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BU" VALUE="YES"> Bunty<P>
</TD>
<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ajay" VALUE="YES">
Ajay <BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rohan" VALUE="YES">
Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BU" VALUE="YES">
Bunty<P>
</TD>
<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ajay" VALUE="YES"> Ajay
<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rohan" VALUE="YES">
Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BU" VALUE="YES"> Bunty<P>
</TD>
</TR></TABLE>
</CENTER>
</BODY>
</HTML>
Approved by Curriculum Development Centre (CDC), Nepal
.442 … Computer Science–I
Figure: 6.15 A Form on a Web page with Checkboxes
Select tag and pull down lists
The next type of input is a Pull down List. With this type we can use <SELECT> instead of <INPUT> and
it also has a closing tag. This control is used when we have a long list of items to be displayed. The user
can also choose any item.
All we have to do to turn it into a Scrolling List is to add a SIZE attribute to the <SELECT> tag. The SIZE is
simply how many options show in the window.
Syntax is;
<SELECT NAME="ListName">
<OPTION>Option1
<OPTION>Option2
</SELECT>
The user can select one of the options and the value will be assigned to the list name on selecting it.
Normally the first option will be selected by default, but it can also have another option as default. The
SELECTED attribute of the <OPTION> tag is used for specifying the default selection.
The syntax is;
<SELECT NAME="ListName">
<OPTION>Option1
<OPTION SELECTED>Option2
</SELECT>
Submit and Reset
SUBMIT and RESET are special types of input buttons. SUBMIT is used to send the data to the server once
all the details in the form are entered. Similarly, the form should be clear/reset to enter another set of data
in the form. So, RESET button is used to reset the form.
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 443.
We can easily change what the buttons say.
<INPUT TYPE=SUBMIT VALUE="Send it off!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form!"><P>
If necessary, the SUBMIT button can also have a NAME. We would need this if, for whatever reason, you
had more than one SUBMIT button.
Adding PASSWORD Field
This is same as text box, except that whatever the user enters init is masked with an asterisk or some
similar character so that no one can see what the user has a value typed.
The syntax is;
<INPUT TYPE="PASSWORD" NAME="Account Number" SIZE=10>
Even though the display on the screen is masked with special characters such as asterisk, the contents are
transmitted in plain form.
INTRODUCTION TO HTML5
HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming
language, but rather a markup language.
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.
It is the cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears
etc.
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5
features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
New Features
HTML5 introduces a number of new elements and attributes that can help you in building modern
websites. Here is a set of some of the most prominent features introduced in HTML5.
• New Semantic Elements: These are like <header>, <footer>, and <section>.
• Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for
<input> tag.
• Persistent Local Storage: To achieve without resorting to third-party plug ins.
• WebSocket: A next-generation bidirectional communication technology for web applications.
• Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and
they are called Server-Sent Events (SSE).
• Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
• Audio & Video: You can embed audio or video on your web pages without resorting to third-party
plug ins.
• Geolocation: Now visitors can choose to share their physical location with your web application.
Approved by Curriculum Development Centre (CDC), Nepal
.444 … Computer Science–I
• Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages
with custom semantics.
• Drag and drop: Drag and drop the items from one location to another location on the same
webpage.
HTML5 comes with a lot of flexibility and it supports the following features:
• Uppercase tag names.
• Quotes are optional for attributes.
• Attribute values are optional.
• Closing empty elements are optional.
HTML5 Elements
HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets
with the tag name in between.
The difference between start tags and end tags is that the latter includes a slash before the tag name.
HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the
most common convention is to stick with lowercase.
There are numerous HTML5 elements out of few of them are discuss in this grade 11 syllabus book, they
are audio, embed, source, track, and video attributes.
<Audio> and <Video>Tags
The HTML5 <audio> and <video> tags make it simple to add media to a website. We need to
set SRC attribute to identify the media source and include a controls attribute so the user can play and
pause the media.
Embedding Video
Here is the simplest form of embedding a video file in the webpage.
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should support in
the video tag. But most commonly used video formats are:
• Ogg: Ogg files with Thedora video codec and Vorbis audio codec.
• mpeg4: MPEG4 files with H.264 video codec and AAC audio codec.
We can use <source> tag to specify media along with media type and many other attributes. A video
element allows multiple source elements and browser will use the first recognized format.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Video play </TITLE>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 445.
</HEAD>
<BODY>
<video width = “300” height = “200” controls autoplay>
<source src = “/html5/movie.ogg” type = “video/ogg” />
<source src = “/html5/ movie.mp4” type = “video/mp4” />
The browser is not supported the <video> element.
</video>
</BODY>
</HTML>
Video Attribute Specification
The HTML5 video tag can have a number of attributes to control the look and feel and various
functionalities of the control.
Serial No. Attribute & Description
1.
2. autoplay
3. This Boolean attribute if specified, the video will automatically begin to play back as
4. soon as it can do so without stopping to finish loading the data.
5.
6. autobuffer
7. This Boolean attribute if specified, the video will automatically begin buffering even if
8. it's not set to automatically play.
9.
controls
If this attribute is present, it will allow the user to control video playback, including
volume, seeking, and pause/resume playback.
height
This attribute specifies the height of the video's display area, in CSS pixels.
loop
This Boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.
preload
This attribute specifies that the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.
poster
This is a URL of an image to show until the user plays or seeks.
Src
The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
width
This attribute specifies the width of the video's display area, in CSS pixels.
Approved by Curriculum Development Centre (CDC), Nepal
.446 … Computer Science–I
Embedding Audio
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document
by this procedure, here it follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should support in
the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and many other attributes. An
audio element allows multiple source elements and browser will use the first recognized format.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Audio play </TITLE>
</HEAD>
<BODY>
<audio controls autoplay>
<source src = “/html5/audio.ogg” type = “audio/ogg” />
<source src = “/html5/ audio.wav” type = “audio/wav” />
The browser is not supported the <audio> element.
</audio>
</BODY>
</HTML>
Audio Attribute Specification
The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control.
Serial No. Attribute and Description
1
2 autoplay
This Boolean attribute if specified, the audio will automatically begin to play back as
soon as it can do so without stopping to finish loading the data.
Autobuffer
This Boolean attribute if specified, the audio will automatically begin buffering even if
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 447.
it's not set to automatically play.
controls
3 If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.
Loop
4 This Boolean attribute if specified, will allow audio automatically seek back to the start
after reaching at the end.
Preload
5 This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.
Src
6 The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
Handling Media Events
The HTML5 audio and video tag can have a number of attributes to control various functionalities of the
control using JavaScript.
Serial No. Event & Description
1 Abort
2 This event is generated when playback is aborted.
3
4 Canplay
5 This event is generated when enough data is available that the media can be played.
6
7 Ended
8 This event is generated when playback completes.
9 Error
This event is generated when an error occurs.
10
Loadeddata
This event is generated when the first frame of the media has finished loading.
Loadstart
This event is generated when loading of the media begins.
Pause
This event is generated when playback is paused.
Play
This event is generated when playback starts or resumes.
Progress
This event is generated periodically to inform the progress of the downloading the
media.
Ratechange
This event is generated when the playback speed changes.
Approved by Curriculum Development Centre (CDC), Nepal
.448 … Computer Science–I
11 Seeked
This event is generated when a seek operation completes.
12 Seeking
This event is generated when a seek operation begins.
13 Suspend
This event is generated when loading of the media is suspended.
14 Volumechange
This event is generated when the audio volume changes.
Waiting
15 This event is generated when the requested operation (such as playback) is delayed
pending the completion of another operation (such as a seek).
Following is the example which allows playing the given video.
<!DOCTYPE HTML>
<html>
<head>
<title> PlayVideo </title>
<script type = “text/javascript”>
Function PlayVideo()
{
Var v = document.getElementsByTagName(“video”) [0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = “200” height = “200” src = “/html5/movie.mp4”>
The browser is not supported the video element.
</video>
<br/>
<input type = “button” onclick = “PlayVideo();” value = “Play”/>
</form>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 449.
Configuring Servers for Media Type
Most servers don't by default serve Ogg or Mp4 media with the correct MIME types, so you will likely
need to add the appropriate configuration. We have to include different media type in the written code
by the following ways:
AddType audio/ogg .ogg
AddType audio/wav .wav
AddType video/ogg .ogg
AddType video/mp4 .mp4
The <embed> Tag
The <embed> element can be used to embed external application, typically multimedia content like audio
or video into an HTML document.
The following table summarizes the usages context and the version history of this tag.
Placement Block
Content None
Start/End Tag Start tag required, end tag forbidden
Version New in HTML5
Example 5
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Example of HTML embed Tag</title>
</head>
<body>
<embed src="/examples/video/blur.swf" width="400px" height="200px">
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
.450 … Computer Science–I
Note : The <embed> tag is very well supported in most of the web browsers from a long time. However, the
<embed> tag has not been a part of the HTML4 specification. It is included in HTML5 as a standard.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <embed> tag.
Attribute Value Description
Width Pixels Sets the width of the embedded content.
Height Pixels Sets the height of the embedded content.
Src URL Specifies the URL of the resource being embedded.
Type Content-type Specifies the type of the resource.
The <source> Tag
The <source> element is used to specify multiple alternative media resources for the media elements
like <audio> and <video>.
The following table summarizes the usages context and the version history of this tag.
Permitted Parent A media element, like <audio> or <video>
Content: None. It is an empty element.
Start/End Tag: Start tag: required, End tag: forbidden
Version: New in HTML5
Example 6
<!DOCTYPE html>
<html lang ="en">
<head>
<title>Example of HTML source Tag</title>
</head>
<body>
<video controls="controls">
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 451.
<source src="/examples/video/shuttle.mp4" type="video/mp4">
<source src="/examples/video/shuttle.ogv" type="video/ogg">
The browser is not supported the HTML5 Video element.
</video>
</body>
</html>
Note: The <source> element is commonly used to provide the same media resource is multiple formats
supported by different browsers.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <source> tag.
Attribute Value Description
Required : The following attribute must be specified on this tag for the markup to be valid.
src URL Specifies the URL of the media file.
Optional : The following attributes are optional.
media media-query Specifies the type of the media resource i.e. what media or device the file
is intended for. See CSS media types for more details.
type media-type Specifies the media type of the media resource.
The <track>Tag
The <track> element is used to specify supplementary text tracks such as subtitle tracks and caption tracks
for <audio> and <video> elements.
The following table summarizes the usages context and the version history of this tag.
Permitted Parent A media element, like <audio> or <video>
Content: None. It is an empty element.
Start/End Tag: Start tag: required, End tag: forbidden
Version: New in HTML5
Approved by Curriculum Development Centre (CDC), Nepal
.452 … Computer Science–I
Example 7
<!DOCTYPE html>
<html lang ="en">
<head>
<title>Example of HTML track Tag</title>
</head>
<body>
<video controls="controls">
<source src="/examples/video/shuttle.mp4" type="video/mp4">
<source src="/examples/video/shuttle.ogv" type="video/ogg">
<track src="/examples/video/subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
The browser is not supported the HTML5 Video element.
</video>
</body>
</html>
Tag Specific Attributes
The following table shows the attributes that are specific to the <track> tag.
Attribute Value Description
Required — The following attribute must be specified on this tag for the markup to be valid.
src URL Specifies the URL of the track file.
Optional — The following attributes are optional.
default Default Specifies that the track should be enabled unless the user's
preferences indicate that another track is more appropriate.
kind captions chapters descriptions Specifies the kind of text track.
metadata subtitles
label Text Specifies the title of the text track.
srclang language-code Specifies the language of the track text data. The srclang must
be defined, if the kind attribute is set to subtitles.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 453.
HTML5 Graphics
The web has always been a visual medium, but a restricted because of limited features that having in
previous version of HTML to CSS and JavaScript in order to produce animations or visual effects for their
websites and documents, or they would have to rely on a plug ins like Flash.
The <canvas> Tag
The HTML5 canvas element can be used to draw graphics on the web page via JavaScript. The canvas was
originally introduced by Apple for the Mac OS dashboard widgets and to power graphics in the Safari
web browser. Later it was adopted by the Firefox, Google Chrome and Opera. Now the canvas is a part of
the new HTML5 specification for next generation web technologies.
By default the <canvas> element has 300px of width and 150px of height without any border and content.
However, custom width and height can be defined using the CSS height and width property whereas the
border can be applied using the CSS border property.
The canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are
(0, 0) which is known as origin, and the coordinates of the bottom-right corner are (canvas width, canvas
height).
Canvas element has several methods for drawing paths, boxes, circles, text, and adding images on a web
page.
Drawing Path and Shapes on Canvas
Here is the example for drawing paths and shapes onto the 2D HTML5 canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Embedding Canvas Into HTML Pages</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
.454 … Computer Science–I
All the lines except those from script to script are pretty straight forward. The anonymous function
attached to the window.onload event will execute when the page load. Once the page is loaded, we can
access the canvas element with document.getElementById () method. Later we have defined a 2D canvas
context by passing 2d into the getContext () method of the canvas object.
Drawing a Line
The most basic path you can draw on canvas is a straight line. The most essential methods used for this
purpose are moveTo(), lineTo(), and the stroke().
The moveTo() method defines the position of drawing cursor onto the canvas, whereas the
lineTo() method used to define the coordinates of the line's end point, and finally the stroke() method is
used to make the line visible.
Example 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Drawing a Line on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 455.
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Drawing a Arc
You can create arcs using the arc() method. The syntax is:
context.arc(centerX, centerY, radius, starttingAngle, endingAngle, counterclockwise);
The JavaScript code in the following example will draw an arc on the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Drawing an Arc on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
.456 … Computer Science–I
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Drawing a Rectangle
You can create rectangle and square shapes using the rect() method. This method requires four parameters
x, y position of the rectangle and its width and height.
The basic syntax of the rect() method can be given with:
context.rect(x,y,width,height);
The following JavaScript code will draw a rectangle shape centered on the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Drawing a Rectangle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 457.
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Drawing a Circle
There is no specific method for creating circle like rectangle's rect() method. However, you can create a
fully enclosed arc such as circle using the arc() method.
The syntax for drawing a complete circle using the arc() method can be given with:
context.arc(centerX, centerY, 0, 2 * Math.PI, false);
The following example will draw a complete circle centered on the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Drawing a Circle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
.458 … Computer Science–I
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Applying Styles and Colors on Stroke
The default color of the stroke is black and its thickness is one pixel. But, you can set the color and width
of the stoke using the strokeStyle and lineWidth property respectively.
The following example will draw an orange color line having 5 pixels width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Setting Stroke Color and Width on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 459.
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
We can also set the cap style for the lines using the lineCap property. There are three styles available for
the line caps — butt, round, and square. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Setting Stroke Cap Style on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "orange";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
.460 … Computer Science–I
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Filling Colors inside Canvas Shapes
We can also fill color inside the canvas shapes using the fillStyle() method.
The following example will show you how to fill a solid color inside a rectangle shape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Filling Color inside a Rectangle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 461.
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Tip: While styling the shapes on canvas, it is recommended to use the fill () method before the stroke ()
method in order to render the stroke correctly.
Similarly, you can use the fillStyle () method to fill solid color inside a circle too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Filling Color inside a Circle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
Approved by Curriculum Development Centre (CDC), Nepal
.462 … Computer Science–I
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Drawing Text on Canvas
We can also draw text onto canvas. These texts can contain any Unicode characters. The following
example will draw a simple greeting message "Hello World!" onto a canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Drawing Text on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 463.
We can additionally set the color and alignment of the text on the canvas, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Setting Canvas Text Color and Alignment</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "orange";
context.fillText("Hello World!", 150, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
.464 … Computer Science–I
We can also apply stroke on text using the strokeText () method. This method will color the perimeter of
the text instead of filling it. However if you want to set both the fill and stroke on canvas text you can use
both the fillText () and the strokeText () methods together.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Adding Stroke to Canvas Text</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 465.
Tip: While styling the text on canvas, it is recommended to use the fillText () method before the strokeText
() method in order to render the stroke correctly.
The <svg> Tag
The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional
vector based graphics for the web. Unlike raster image (e.g. .jpg, .gif, .png, etc.), a vector image can be
scaled up or down to any extent without losing the image quality.
An SVG image is drawn out using a series of statements that follow the XML schema, that means SVG
images can be created and edited with any text editor, such as Notepad. There are several other
advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.
• SVG images can be searched, indexed, scripted, and compressed.
• SVG images can be created and modified using JavaScript in real time.
• SVG images can be printed with high quality at any resolution.
• SVG content can be animated using the built-in animation elements.
• SVG images can contain hyperlinks to other documents.
Tip: The vector images are composed of a fixed set of shapes defined by math, while the bitmap or raster
images are composed of a fixed set of dots called pixels.
Embedding SVG into HTML Pages
You can embed SVG graphics directly into your document using the HTML5 <svg> element.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Embedding SVG Into HTML Pages</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
Approved by Curriculum Development Centre (CDC), Nepal
.466 … Computer Science–I
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Note: All the major modern web browsers like Chrome, Firefox, Safari, and Opera, as well as Internet
Explorer 9 and above support inline SVG rendering.
Drawing Path and Shapes with SVG
The following section will explain how to draw basic vector-based paths and shapes on the web pages
using the newly introduced HTML5 <svg> element.
Drawing a Line
The most basic path you can draw with SVG is a straight line. The following example will show how to
create a straight line using the SVG <line> element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Create a Line with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
</body>
</html>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 467.
Drawing a Rectangle
We can create simple rectangle and square shapes using the SVG <rect> element. The following example
will show how to create and style a rectangular shape with SVG.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Create a Rectangle with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>
The attributes x and y of <rect> element defines the co-ordinates of the top-left corner of the rectangle. The
attributes width and height specifies the width and height of the shape.
Approved by Curriculum Development Centre (CDC), Nepal
.468 … Computer Science–I
Drawing a Circle
We can also create the circle shapes using the SVG <circle> element. The following example will show
how to create and style a circular shape with SVG.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Create a Circle with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>
The attributes cx and cy of the <circle> element defines the co-ordinates of the center of the circle and the
attribute r specifies the radius of the circle. However, if the attributes cx and cy are omitted or not
specified, the center of the circle is set to (0,0).
Drawing Text with SVG
We can also draw text on the web pages with SVG. The text in SVG is rendered as a graphic so it can apply
all the graphic transformation to it but it is still acts like text that means it can be selected and copied as
text by the user. Let's try an example to see how this works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Render Text with HTML5 SVG</title>
<style>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 469.
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>
</body>
</html>
The attributes x and y of the <text> element defines the location of the top-left corner in absolute terms
whereas the attributes dx and dy specifies the relative location.
We can even use the <tspan> element to reformat or reposition the span of text contained within a
<text> element. Text contained in separate tspans, but inside the same text element can all be selected at
once when we click and drag to select the text. However, the text in separate text elements cannot be
selected at the same time. Let's check out an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Times New Roman">
<title>Rotate and Render Text with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
Approved by Curriculum Development Centre (CDC), Nepal
.470 … Computer Science–I
</head>
<body>
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>
</body>
</html>
Differences between SVG and Canvas
The HTML5 introduced the two new graphical elements <canvas> and <svg> for creating rich graphics on
the web, but they are fundamentally different.
The following table summarizes some of the basic differences between these two elements, which will help
to understand how to use these elements effectively and appropriately.
SVG Canvas
Vector based (composed of shapes) Raster based (composed of pixel)
Multiple graphical elements, which become the Single element similar to <img> in behavior.
part of the page's DOM tree Canvas diagram can be saved to PNG or JPG
format
Modified through script and CSS Modified through script only
Good text rendering capabilities Poor text rendering capabilities
Give better performance with smaller number of Give better performance with larger number of
objects or larger surface, or both objects or smaller surface, or both
Better scalability. Can be printed with high Poor scalability. Not suitable for printing on higher
quality at any resolution. Pixelation does not resolution. Pixelation may occur
occur
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 471.
DOMAIN NAME SYSTEM (DNS)
Domain name is a name given to a network for ease of reference. Domain refers to a group of computers
that are known by a single common name. These domain names have to be transferred into IP addresses.
It is decided on the physical location of the web server as well as where the domain name is registered.
Domain Name System (DNS) is a database system that translates a computer's fully qualified domain
name into an IP address. Networked computers use IP addresses to locate and connect to each other, but
IP addresses can be difficult for people to remember. For example, on the web, it's much easier to
remember the domain name www.amazon.com than it is to remember its corresponding IP address
(207.171.166.48). DNS allows you to connect to another networked computer or remote service by using its
user-friendly domain name rather than its numerical IP address. Conversely, Reverse DNS (rDNS)
translates an IP address into a domain name. Some generic domain names are:
Domain name Description
Com Commercial organization
Edu Educational organization
Gov Government organization
Mil Military group
Org Non-profit organization
Thus, humans use domain names when referring to computers on the Internet, whereas computers work
only with IP addresses, which are numeric. DNS was developed as a distributed database. The database
contains the mappings between the domain names and IP addresses scattered across different computers.
This DNS was consulted whenever any message is to be sent to any computer on the Internet. DNS is
based on the creation of the hierarchical domain based naming architecture, which is implemented as a
distributed database. It is used for mapping host names and email addresses to IP addresses. Each
organization operates a domain name server that contains the list of all computers in that organization
along with their IP addresses. When an application program needs to translate a computer’s name into the
computer’s IP address, the application becomes a client of the DNS. It contacts a domain name server and
sends the server an alphabetic computer name, then the server returns the correct IP address. The domain
name system works like a directory. A given server does not store the names and addresses of all possible
computers in the Internet. Each server stores the name of the computers at only one company or
enterprise.
CONCEPT OF CASCADED STYLE SHEET (CSS) AND SCRIPT LANGUAGE
Introduction
There are very little options while working or creating attractive document. HTML is simple markup
language and if you want to do something complicated, you need to use something different. Style sheet is
a tool which offer more control over the layout. Honestly, style sheet are the best approach for creating
attractive pages.
Style Sheet
Style sheet is a collection of formatting styles, which can be applied to a web page. The style sheet consists
of the following components:
1. Style Rule: A style rule is a set of HTML tags specifying the formatting elements. Style rules can be
applied to selected contents of a web page. A style rule basically having two parts:
Approved by Curriculum Development Centre (CDC), Nepal
.472 … Computer Science–I
a. Selector: A selector is a string that identifies what elements the corresponding rule applies to and
is the first part of the rule.
b. Declaration: This part of the rule is enclosed within curly brackets. A declaration has two sections
separated by a colon. The section before the colon is the value of that property.
2. Inline Styles: Inline style declaration is the most basic style rule, which can be applied to individual
elements in the web page. Inline styles are implemented by using style attribute with the HTML tags.
3. Embedding Style Sheet: We can group more than one style rule using the <STYLE>……..</STYLE>
tag pair unlike of applying it individually in inline style. Each of these tags when used in he BODY of
the HTML code will apply the style rules.
4. Grouping Style Rules: The same style properties were applied individually to both heading H1 and
H2 tags instead of specifying them individually, we can group them. A comma is used to separate
each of these selectors.
5. Selectors: So far we have seen how selectors are specified and implemented either by making them
inline style or by embedding them. These selectors basically are categorized into:
Simple Selector
HTML Selector
Class Selector
ID Selector
Contextual Selector
6. Cascading Style Sheet
So far we have learnt to modify the style of elements individually or in groups but within the same
page. There may be instances when we want to apply similar setting for all the pages in the websites.
This can be done by putting all the style rules in a style sheet file and then importing or linking it
with HTML document. This method of linking or importing is called cascading style sheets (CSS).
For making a complete CSS, we needs
a. Linking to an External Style Sheet b. Importing Style Sheet
c. Style Sheet Properties d. Font Properties
e. Text Properties f. Color and background Properties
g. Box Properties h. Padding Properties
Example with HTML <font> Tag
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>
We can re-write above example with the help of Style Sheet as follows:
<!DOCTYPE html>
<html>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 473.
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = “color : green; font-size : 24px;">Hello, World! </p>
</body>
</html>
We can use CSS in three ways in your HTML document:
• Inline Style Sheet: Define style sheet rules directly along-with the HTML elements
using style attribute.
• Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style>
tag. It is also known as Embedded Style Sheet.
• External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your
HTML document using HTML <link> tag.
Let's see all the three cases one by one with the help of suitable examples.
Inline Style Sheet
We can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This
should be done only when we are interested to make a particular change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS file as well as the
rules defined in <style> element.
Example 9
Let's re-write above example once again, but here we will write style sheet rules along with the HTML
elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color: red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color: green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Internal Style Sheet
If we want to apply Style Sheet rules to a single document only, then you can include those rules in
header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Approved by Curriculum Development Centre (CDC), Nepal
.474 … Computer Science–I
Example 10
Let's re-write above example once again, but here we will write style sheet rules in the same HTML
document using <style> tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
External Style Sheet
If we need to use your style sheet to various pages, then it’s always recommended to define a common
style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included
in HTML files using <link> tag.
Example 11
Consider we define a style sheet file style.css which has following rules:
.red {
color : red;
}
.thick {
Font-size: 20px;
}
.green {
color : green;
}
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 475.
Here we defined three CSS rules which will be applicable to three different classes defined for the HTML
tags. We should not bother about how these rules are being defined because you will learn them while
studying CSS. Now let's make use of the above external CSS file in our following HTML document.
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
WEBPAGE DESIGN AND EDITING TOOLS
Web design is the creation of Web pages and sites using HTML, CSS, JavaScript and other Web languages.
Web design is just like design in general, it is the combination of lines, shapes, texture, and color to create
an attractively pleasing or striking look. Web design is the work of creating design for Web pages.
Software and tools Web developers need to create Web sites. Web authoring tools, HTML editors, text
editors, WYSIWYG editors, and more. Web authoring tools and HTML editors range from simple text
editors to high powered graphical authoring tools and content management systems.
With a Web browser, a user views WebPages that may contain text, images, videos, and other multimedia
and navigates between them using hyperlinks. A Webpage is a document written in HTML form. The
design and editing of pages can be done by using various web design software, they are:
a. Adobe Dream weaver (Formerly Macromedia)
b. Adobe GoLive
c. Microsoft FrontPage
d. Webpage Maker etc.
To design Webpage certain design and specification consideration has to follows:
i. Developing concepts
ii. Content planning
iii. Rough design
iv. Final design
v. Build prototype
vi. Prototype testing etc.
Approved by Curriculum Development Centre (CDC), Nepal
.476 … Computer Science–I
SUMMARY
HTML: Web Page Designing Language • The web pages can be linked using links. Therefore, controlled
navigation is possible. Therefore, long documents can also be
Today, we have access to a wide variety of information through easily read.
web sites on the Internet. We can access a web site, if we have a
connection to the Internet and a browser on our computer. A web • The pages can be easily updated and the appropriate links can
site contains information about the business for which it is be used without caring anything about whether the links will be
designed. The information can be in the form of text, graphics, affected or not.
photos and multimedia but is not always necessary. The basic
guideline to be followed while designing a site is the simplicity of • It can run in any platform and with any browser.
the presentation. The layout of the web site should be such that
information can be easily and quickly accessed. • HTML codes can be written in any text editor such as Notepad,
WordPad, etc.
Introduction to HTML
Web Publishing
HTML stands for Hyper Text Markup Language. It was invented in
1990 by a scientist called Tim Berners-Lee. The purpose was to Before published we need to first think about sequence of plan and
make it easier for scientists at different universities to gain access schedule:
to each other's research documents. HTML is one language in a 1. Plan a web site.
class of markup languages, the most general form of which is 2. Analyze and design a web site.
Standard Generalized Markup Language (SGML). SGML was 3. Create a web site.
developed to create documents that could be displayed 4. Deploy a web site.
consistently on computers of different hardware and operating 5. Maintain a web site.
system. Since SGML was complex, HTML was invented as a In order to publish content on the web, you need three things:
simple way of creating web pages that could be easily accessed 1. Web development software
by any browsers. HTML is a special case of SGML. HTML consists 2. An Internet connection, and
of tags and data. The tags serve to define what kind of data follows 3. A web server.
them, thereby enabling the browser to provide the data in the Types of Web Hosting
appropriate form for the user to see.
Hosting is categorized on the basis of space and facility available.
Advantages of HTML Here are some of the types of hosting are:
1. Shared hosting
The advantages of HTML are; 2. Virtual private server (VPS) hosting
3. Dedicated server hosting
• HTML is a simple, easy to learn and use but powerful 4. Cloud hosting
formatting language. The simplicity of HTML allows anyone 5. Managed hosting
with basic knowledge of computer to create web pages. 6. Collocation
EXERCISE
Short Answer Questions
1. Define web development.
2. Define client side language
3. Define server side language.
4. Define internet.
5. Define HTML.
6. Define web publishing.
7. Define web hosting.
8. Define frame and form.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 477
9. Define audio video tags.
10. Define HTML5 graphics.
11. Define inline CSS.
12. Define Embedded CSS.
13. Define External CSS.
14. Define TCP/IP protocols.
15. Define FTP.
16. Define order list.
17. Define un-order list.
18. Define definition list.
Long Answer Questions
1. Define and explain the Web Browser and Search engines.
2. Explain uses of internet.
3. Define and explain protocols.
4. What is CMS? Explain it.
5. Explain the different tags of HTML.
6. Explain types of web hosting.
7. Define and explain character formatting.
8. Define and explain listing tags.
9. Define and explain creating of hyperlink.
10. Define and explain table tag.
11. What is HTML5? Explain its features.
12. Explain elements of HTML5.
13. Explains attributes of Video in HTML5.
14. Explains attributes of Audio in HTML5.
15. What is media event? Explain it.
16. Define and explain <canvas> tag.
17. Define and explain <svg> tag.
18. Differentiated between <canvas> and <svg> tag.
19. Explain DNS.
20. Explain CSS.
21. Explain Web design editing tools.
22. Explain structure of HTML.
Approved by Curriculum Development Centre (CDC), Nepal
478… Computer Science–I
Activities
1. Write multi paragraphs page applying formatting concepts such as <p>, <b>, <i>, <font>, <br>,
<u> tags etc wherever needed for making attractive page.
2. Include vender lists in your page both using <ul> and <ol> tags.
3. Insert the image and link in your page using tags such as <a> and <img>.
4. Put the student records in tabular form applying appropriate tags such as <table>,<th>, <tr>,
<td> ,with properties such as colspan, rowspan, cellspacing, cellpadding etc.
5. Design frame using <frame> and <frameset> tags accordingly
Frame 1 Frame 2
Frame 3
6. Design form shown below using <form> tag HTML coding.
7. Make different drawings using <canvas> and <svg> tags using HTML5.
8. Include audio and video in your documents using <audio> and <video> tags through HTML5.
■■■
Approved by Curriculum Development Centre (CDC), Nepal
Multimedia
LEARNING OBJECTIVES
After studying this chapter, the students will be able to understand to:
The information can be contained text, graphics, videos, animation and sound which are
........ collectively called multimedia, means more than one form of contents in the information. The ..........
number of different software can be used for making multimedia information. The information
..
can be linear or non-linear, has own features, importance, applications etc. At least, they will
know the concepts of multimedia at the end of this unit.
.480 … Computer Science–I
INTRODUCTION TO MULTIMEDIA
The combine use of computers to present text, graphics, video, animation, and sound in an integrated way
called in one word multimedia. Simply, it is used of more than one media using computer. Long touted as
the future revolution in computing, multimedia applications were, until the mid-90s, uncommon due to
the expensive hardware required. With increases in performance and decreases in price, however,
multimedia is now commonplace. Nearly all PCs are capable of displaying video, though the resolution
available depends on the power of the computer's video adapter and CPU.
Multimedia is media and content that uses a combination of different content forms. The term can be used
as a noun (a medium with multiple content forms) or as an adjective describing a medium as having
multiple content forms. The term is used in contrast to media which only use traditional forms of printed
or hand-produced material. Multimedia includes a combination of text, audio, still images, animation,
video, and interactivity content forms.
Multimedia is usually recorded and played, displayed or accessed by information content processing
devices, such as computerized and electronic devices, but can also be part of a live performance.
Multimedia (as an adjective) also describes electronic media devices used to store and experience
multimedia content. Multimedia is distinguished from mixed media in fine art; by including audio, for
example, it has a broader scope. T he term "rich media" is synonymous for interactive multimedia.
Hypermedia can be considered one particular multimedia application.
Therefore;
• Multimedia is a computer-based interactive communications process that incorporates text, graphics,
sound, animation, and video.
• Multimedia is Interactive and the user determines what content is delivered, when it is delivered and
how.
• Multimedia is Non-linear, and suits different learning styles of different users..
• Multimedia combines two or more media to provide Multi-sensory experience of real world, and
gives multi-sensory memory imprints. It has Hypertext links and uses hypermedia ware.
COMPONENTS OF MULTIMEDIA
The components of multimedia may be in terms of computer system or contents of production
(documents). Such as:
Computer System Components (Hardware)
Processor: Data processing and transfer needs high speed processor.
• Memory: RAM and Hard drive both needs high memory capacity and access speed.
• Monitor: With high resolution and screen size.
• Video Graphic Card: With better graphic quality and memory size.
• Audio Card: With high quality sound card is needed.
• Media Player: High graphic supporting mother board is needed.
Better to use branded computer for better performance of the system.
Approved by Curriculum Development Centre (CDC), Nepal
Multimedia Unit 7 … 481.
Multimedia Software Requirements
For the creation of multimedia on the PC there are hundreds of software packages that are available from
manufacturers all over the world.
These software packages can cost anything from being absolutely free (normally this software is called
freeware or shareware) to anything.
Here is a summary of just a few of these programs.
1. Adobe CS4: Adobe CS4 is a collection of graphic design, video editing, and web development
applications made by Adobe Systems many of which are the industry standard that includes.
2. Adobe Dreamweaver: Although a hybrid WYSIWYG and code-based web design and development
application, Dreamweaver’s WYSIWYG mode can hide the HTML code details of pages from the
user, making it possible for non-coders to create web pages and sites. WYSIWYG (What You See Is
What You Get) web development software that allows users to create websites without using Html,
everything can be done visually.
3. Adobe Fireworks: A graphics package that allows users to create bitmap and vector graphics editor
with features such as: slices, the ability to add hotspots etc.) for rapidly creating website prototypes
and application interfaces.
4. Gimp: It is an alternative to Photoshop and cheaper but not quite as good.
5. Google Sketchup: SketchUp is a 3D modeling program designed for architects, civil engineers,
filmmakers, game developers, and related professions.
6. Microsoft Frontpage: As a WYSIWYG editor, FrontPage is designed to hide the details of pages’
HTML code from the user, making it possible for novices to easily create web pages and sites.
7. Apple Quicktime: QuickTime is an extensible proprietary multimedia framework developed
by Apple, capable of handling various formats of digital video, 3D models, sound, text,
animation, music, panoramic images, and interactivity.
8. Photoshop Pro: Adobe Photoshop, or simply Photoshop, is a graphics editing program developed
and published by Adobe Systems. It is the current market leader for commercial bitmap and image
manipulation software, and is the flagship product of Adobe Systems. It has been described as “an
industry standard for graphics professionals”
9. Microsoft PowerPoint: Powerpoint Presentations are generally made up of slides may contain text,
graphics, movies, and other objects, which may be arranged freely on the slide.
10. Adobe Flash Player: Adobe Flash (formerly Macromedia Flash) is a multimedia platform that is
popular for adding animation and interactivity to web pages. Originally acquired by Macromedia,
Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems.
Flash is commonly used to create animation, advertisements, and various web page Flash components,
to integrate video into web pages, and more recently, to develop rich Internet applications.
11. Adobe Shockwave: Adobe Shockwave (formerly Macromedia Shockwave) is a multimedia
player program, first developed by Macromedia, acquired by Adobe Systems in 2005. It
allows Adobe Director applications to be published on the Internet and viewed in a web browser on
any computer which has the Shockwave plug-in installed.
12. Picasa: Picasa is excellent multimedia related software for the viewing, organizing, and editing of the
pictures in your laptop. While providing all these services, one other service given provided by this
software is that you can create an album of your own digital pictures and share them with your
Approved by Curriculum Development Centre (CDC), Nepal
.482 … Computer Science–I
loved ones as well. Originally created by the Lifescape Company, it was later on bought by Google
and hence was provided for free. The software of Picasa was originally devised for Windows XP,
Vista, 7 and Mac OS X only. But later on Google teamed up with Wine to make the software available
for Linux as well. However the Linux versions of the software of so out of date that it might not
include many of the special features of the multimedia software.
13. VLC Media Player: The VLC media player as the name suggests is the platform where you can play
your videos and audios for free. This was developed by a company named VideoLAN project. The
VLC is not only limited to your laptops and desktops and MacBook but can also be used in your
android phone, windows phone, iPad, iPhone, and iPod for free and can be downloaded easily from
the app store of your respective device. And that is not it about the much talked about media player,
the media player can support all kinds of formats of the audio and the video. So you don’t have to
worry if your video is not a particular format because you can, in any case, play it in the VLC media
player without much of a hassle.
14. Windows Movie Maker: Windows movie maker is the software for the people who love to edit their
videos. This was developed by the Microsoft Company under the name of Sundance. Being a part of
the windows essential multimedia software, this software not only helps in making and editing the
video but also allows you to publish those videos on OneDrive, Facebook, and YouTube etc. The
editing of the video in the software is fairly easy.
15. Google Meet: Google’s multimedia video conferencing app within G Suite has been specifically
designed with business needs in mind. It's an easy-to-use interface that can handle up to 250 people
in an online video conferencing meeting, depending on the G Suite subscription you're in. The easy-
to use interface that is fully integrated with other G Suite apps like Google Calendar allows people to
create and drop in and out of meetings quickly, just by clicking a link.
16. Zoom: Zoom is one of the most used online video conferencing tools right now. It's easy to use and
the video and audio quality is quite good. Zoom has also quite a lot of meeting functionalities.
17. Microsoft Teams: Microsoft Teams is a video conference solution with several service plans. Teams
are part of Microsoft Office 365, so to consider if you're already a Microsoft customer. There are both
free and paid plans. The free as well as the paid plans allow users to host meetings with up to 250
attendees.
Content Components of Multimedia
• Text: It is the primary component of multimedia. Most of the information can be presented with the
help of text. We can be emphasized the text by using different fonts colors, styles etc.
• Audio: Audio is one of the important components of multimedia. It is generally music, speech or any
other sound. It is normally combined with animation medium.
• Video: The effective medium for presenting information is video. It presents the moving images. It
displayed the sequence of slightly varied pictures at the speed of 15-30 frames per second.
• Picture/still images and graphics: A digital representation of non-text information such as drawing,
photographs etc are known as graphics. The graphic medium can be used with text medium.
• Animation: The animation medium presents the sequence of still images of artwork at a rapid speed
that looks like the image is moving.
Approved by Curriculum Development Centre (CDC), Nepal