HSC Sop 1 (Advance Web Designing)

DHOLE PATIL JUNIOR COLLEGE
OF ARTS, COMMERCE AND

SCIENCE
INFORMATION TECHNOLOGY
LAB MANUAL
SCIENCE DEPARTMENT
INDEX
Sr. No Name of Experiment Page No Date Remarks Signature
CERTIFICATE
This is to certify that Mr./Miss… ...................................... Of
class ……… Div……… Roll_No……………… Exam. No ................. has
completed ………………….experiments and activities satisfactorily in the
subject Information Technology as prescribed by Maharashtra State
Secondary and Higher Secondary Certificate Board Pune, during the
academic year 20 - 20
Place:
Date: / /
Subject Incharge External Examiner Principal

Experiment No.1
Creation of website using HTML5 and CSS
Create a website using HTML5 and CSS using any 4 CSS properties. Write a
code for 2 separate pages having different file names such as first page as
Index.html and second page as page2.html. Use any theme such as college
profile or company profile etc. Every page must contain proper Meta
information and design web page as follows-
1) The index page must contain a heading which is highest among other
text on pages and must be at centre of the page. There must be a paragraph
which introduces general information about the theme chosen & must have
at least 3 physical style tags and one image with alternate text. This page
must be connected to other page with proper navigational links.
2) The 2nd page must contain the feedback or enrolment form related with
theme chosen with features of HTML5. The form must contain text element
and email address of the company or person. Include the submit button.
Theory
Hyper Text Markup Language
HTML is an acronym which stands for Hyper Text Markup Language which
is used for creating web pages and web applications.
Hyper Text: HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to a
new webpage, you have clicked on a hypertext. HyperText is a way to link
two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used

to apply layout and formatting conventions to a text document. Markup
language makes text more interactive and dynamic. It can turn text into
images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML

and translated by a web browser. A web page can be identified by entering
an URL. A Web page can be of the static or dynamic type. With the help of
HTML only, we can create static web pages.
Structure of HTML
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about

the version of HTML.
<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all other
elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be closed
before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.
<h1> : Text between <h1> tag describes the first level heading of the
webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Cascading Style Sheets
CSS stands for Cascading Style Sheets. It is a style sheet language which is
used to describe the look and formatting of a document written in markup
language. It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces. It can also be
used with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile
applications.
CSS Syntax:
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be
any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more

declarations separated by a semicolon. For the above example, there are
two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be

color, border etc.
Value: Values are assigned to CSS properties. In the above example, value
"yellow" is assigned to color property.
E.g :
Selector{Property1: value1; Property2: value2; ...............;}
SOP 1 PRACTICAL PART1
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<style>
h1{
text-align:center;
font-size:60px;
color:yellow;
}
p{
color:black;
text-align:left;
font-size:20px;
}
h2{
text-align:center;
}
</style>
</head>
<body bgcolor=green>
<img src="dpes.jpg" alt="dpes logo" width="120" height="90"
style="vertical-align:top-center">
<h1>Dhole Patil College Of Arts Commerce and Science</h1>
<p>
<center> Near Eon IT Park,Wagholi,Pune-412207<br> </center>
U-DISE NO. 27250508654 | Index No. J-1105055 | Approved by
Government of Maharashtra Affiliated to Maharashtra State Board of
Secondary and Higher Secondary Education (SSC & HSC Board)
</p>
<center><img src="clg.jpg" height=300 width=500></center>

<p>A visionary entrepreneur and sportsman founded the Dhole Patil
Education Society (DPES) and thereafter the Dhole Patil College of
Engineering (DPCOE) in 2008. This was followed by the setting up of the
Dhole Patil Primary School in 2018.</br>
The College of Engineering was founded with the objective of providing

quality technical education of international standards and to help create
students that match contemporary global requirements.</br>
DPES is backed by rich history and social development activities of the Dhole
Patil family. Today, the institutions under the trust are at the forefront of
education including academics, sports and social activity, among the Pune
colleges. We offer infrastructure, technical support and facilities comparable
to the best in the country.</br>
</p>
<h2><a href=page1.html>Click Here For Registration</a></h2>

</body>
</html>
SOP 1 PRACTICAL PART2
<html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<h1> Admission Form</h1>
<form>
<label> Firstname </label>

<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<option value="Standard">Standard</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
</select>
<select>
<option value="Course">Course</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Science">Science</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
Experiment No 2
Create a webpage using HTML and CSS code to design a web page as the layout
displayed below.
The top section will display the heading , ‘Tourist places’ in header. The section on the left
has list of cities. The right hand side displays tourist places of any one of the city .
Use Inline style sheet in the top section to display background color for the text ‘Tourist
places’. Use internal stylesheet for the left and right section with background color and font
styles.
Theory:
HTML lists allow web developers to group a set of related items in lists.
HTML List Tags are as follows:
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
There are Two Types of List

1. Unordered List
2. Ordered List
Unordered HTML List:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can
have one of the following values:
Value Description
disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
Unordered List with Disc Bullets
 Coffee
 Tea
 Milk
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
Ordered List with Letters
A. Coffee
B. Tea
C. Milk
SOP2 Code:
<!Doctype html>
<html>
<head>
<title> Tourist Place </title>
<style>
section{background-color:yellow;width:50%;height:50%;
float:left;color:black;font-size:30px;outline-style:solid;} aside
{background-color:pink;width:50%;height:50%;
float:right;color:black;font-size:30px;outline-style:solid;}
</style>
</head>
<body>
<header style="background-color:lightblue;color:deeppink;text-
align:center; height:30%;width:100%;font-size:50px;outline-
style:solid">Tourist places
</header>
<header>
<section>
<b> City </b>
<ol>
<li> Pune </li>
<li> Delhi </li>
<li> Banglore </li>
<li> Hyderabad </li>
</ol>
</section>
<aside>
<p> Tourist places in Pune </p>
<ul>
<li> Shaniwarwada </li>
<li> Sinhgad </li>

<li> Kelkar Museum </li>
</ul>
</aside>
</header>
</body>
</html>
Output:
v
Experiment no.3
Use of Audio on web pages using HTML5
Create a webpage named audio.html to set an audio file in web page with
controls such that it uses HTML5 elements. The audio file must play as soon
as the webpage loads in browser and it will start over again, every time
when it is completed.
Create another webpage named audio1.html which provides multiple source

file formats for the same audio file that plays a sound automatically with
controls. The browser should display the message with appropriate attribute,
when audio file is not supported by browser. The code must incorporate the
list of sound files formats (like wav, MP3 or ogg etc).
Theory
Multimedia comes in many different formats. It can be almost anything you

can hear or see, like images, music, sound, videos, records, films,
animations, and more.
Web pages often contain multimedia elements of different types and

formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions like: .wav, .mp3,
.mp4, .mpg, .wmv, and .avi.
Common Audio Formats
MP3 is the best format for compressed recorded music. The term MP3 has
become synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format

.midi for all electronic music devices like synthesizers and PC
sound cards. MIDI files do not contain sound, but digital
notes that can be played by electronics. Plays well on all
computers and music hardware, but not in web
browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow streaming

.ram of audio with low bandwidths. Does not play in web
browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft.

Plays well on Windows computers, but not in web
browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as

the default format for iTunes. Plays well on Apple
computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on

Windows, Macintosh, and Linux operating systems.
Supported by HTML.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported

by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3
is the most popular format for music players. Combines
good compression (small files) with high quality.
Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio.
Supported by all browsers.
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
E.g:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
SOP2 PRACTICAL PART1
<!Doctype html>
<html>
<title> Audio Controls </title>
<body>
<audio controls autoplay>
<source src="test.mp3" type="audio/mp3">
<audio controls>
</body>
</html>
OUTPUT
<!Doctype html>
<html>
<title> Audio Controls </title>
<body>
<audio controls autoplay>
<source src="test.mp3" type="audio/mp3">
<source src="test1.ogg" type="audio/ogg">
<audio controls>
</body>
</html>
OUTPUT
Experiment No.4
Use of Video on web pages using HTML5
Create a webpage named video.HTML to display a video file on web page

and plays automatically with controls. The dimension of video area should be
150 * 150 pixels .
Create another webpage which provide multiple source file formats for the
same video file that plays a sound automatically with controls. The
dimension of video area should be 100*100 pixels. The browser should
display the message with appropriate attribute when video file is not
supported by browser. The code must incorporate the list of video files
formats (like webM, MP4 or ogg etc).
Theory:
Common Video Formats

There are many video formats out there.
The MP4, WebM, and Ogg formats are supported by HTML.
The MP4 format is recommended by YouTube.
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert

.mpeg Group. The first popular video format on the web.
Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by

Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but
not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by

Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but
not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in
video cameras and TV hardware. Plays well on
Apple computers, but not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video

.ram streaming with low bandwidths. Does not play in
web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an

.flv extra component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org

Foundation. Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and

Google. Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert

or MP4 Group. Commonly used in video cameras and TV
hardware. Supported by all browsers and
recommended by YouTube.
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
E.g:
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
</video>
<!DOCTYPE html>
<html>
<body>
<video width="150" height="150"controls>

<source src="mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<video width="150" height="150"controls>

<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</body>
</html>
OUTPUT
Experiment No 5
Use of SEO methodology to improvise the website.

Select a website.
Use an appropriate SEO software and list out the page optimization requirements.
Write down at least 4 suggestions to optimise the web pages.
Write importance of SEO.
Theory:
Search engine optimization (SEO) is the practice of getting targeted traffic to a website from
a search engine’s organic rankings. Since organic search is one of the ways through which
people discover content online, higher rankings can translate to higher organic traffic to a
website. SEO includes both technical and content practices aimed to align with the best
search engine algorithm needs. Common tasks associated with SEO include creating high-
quality content, optimizing content around specific keywords, and building backlinks.
How does SEO work?
While there is a way to maximize results, it is almost impossible to fully manipulate search
algorithms. Businesses often look to the shortest path toward ideal results with the least
amount of effort, but SEO requires a lot of action and time. There is no SEO strategy where
something can be changed today with the expectation of clear results tomorrow. SEO is a
long-term project, with daily action and constant activity.
Search engines use bots to crawl all website pages, downloading and storing that
information into a collection known as an index. This index is like a library and when
someone searches for something in it, the search engine acts as the librarian. The search
engine pulls and displays relevant information from the search query and shows users
content related to what they were looking for. Search engine algorithms analyze webpages
in the index to determine the order those pages should be displayed on the SERP.
Steps:
1. The website is https://www.seoptimer.com/
2. The software used is SEOoptimer
3. The four suggestions to improve website
For ONPAGE SEO

 Use meta data descriptions wherever needed
 Use alt tag in images
 Kevwords are not distributed well across the important HTML tagsie improve keyword
consistency
 Page speed is good
For OFFPAGESEO
 Make friendly urls
 Not connected to any social media
 Guest blogging is not done
 2 broken links found
Importance of SEO
 It is the technique for designing and developing a website to be rank high in search
 engine results.
 It is a subset of SEM(Search Engine Marketing).
 SEO is useful in increasing number of visitors in a website.

HSC Sop 1 (Advance Web Designing)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HSC Sop 1 (Advance Web Designing)

Uploaded by

Copyright:

Available Formats

DHOLE PATIL JUNIOR COLLEGE

OF ARTS, COMMERCE AND

This is to certify that Mr./Miss… ...................................... Of

class ……… Div……… Roll_No……………… Exam. No ................. has

completed ………………….experiments and activities satisfactorily in the

subject Information Technology as prescribed by Maharashtra State

Secondary and Higher Secondary Certificate Board Pune, during the

Subject Incharge External Examiner Principal

Creation of website using HTML5 and CSS

Markup language: A markup language is a computer language that is used

Web Page: A web page is a document which is commonly written in HTML

Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about

A CSS rule set contains a selector and a declaration block.

Declaration Block: The declaration block can contain one or more

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be

<center><img src="clg.jpg" height=300 width=500></center>

The College of Engineering was founded with the objective of providing

<h2><a href=page1.html>Click Here For Registration</a></h2>

<label> Firstname </label>

There are Two Types of List

disc Sets the list item marker to a bullet (default)

Ordered HTML List

<li> Sinhgad </li>

Use of Audio on web pages using HTML5

Create another webpage named audio1.html which provides multiple source

Multimedia comes in many different formats. It can be almost anything you

Web pages often contain multimedia elements of different types and

Multimedia elements (like audio or video) are stored in media files.

Common Audio Formats

If your website is about recorded music, MP3 is the choice.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format

RealAudio .rm RealAudio. Developed by Real Media to allow streaming

WMA .wma WMA (Windows Media Audio). Developed by Microsoft.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported

SOP2 PRACTICAL PART2

Use of Video on web pages using HTML5

Create a webpage named video.HTML to display a video file on web page

Common Video Formats

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert

AVI .avi AVI (Audio Video Interleave). Developed by

WMV .wmv WMV (Windows Media Video). Developed by

RealVideo .rm RealVideo. Developed by Real Media to allow video

Flash .swf Flash. Developed by Macromedia. Often requires an

Ogg .ogg Theora Ogg. Developed by the Xiph.Org

WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert

<video width="320" height="240" controls>

<video width="150" height="150"controls>

SOP3 PRACTICAL PART2

<video width="150" height="150"controls>

Use of SEO methodology to improvise the website.

How does SEO work?

For ONPAGE SEO

You might also like