Scribd
Upload
24 views20 pages

Sop1 To 7 Content

The document outlines various practical exercises focused on web development using HTML5 and CSS, including creating websites, forms, and implementing audio and video features. It also covers the use of SEO tools to optimize a website, specifically analyzing the website https://www.ajio.com/ for title tags, header tags, image attributes, and usability. Each practical includes code examples and specific aims to enhance understanding of web design and optimization techniques.

Uploaded by

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

Sop1 To 7 Content

The document outlines various practical exercises focused on web development using HTML5 and CSS, including creating websites, forms, and implementing audio and video features. It also covers the use of SEO tools to optimize a website, specifically analyzing the website https://www.ajio.com/ for title tags, header tags, image attributes, and usability. Each practical includes code examples and specific aims to enhance understanding of web design and optimization techniques.

Uploaded by

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

Practical 1

Title: Creation of website using Html and CSS.

Aim:Create a website using HTML5 and CSS using any 4 CSS properties.
Write a code for two separate pages having different file names such as
first page Index.html and second page as page2.htm. Every page must
contain proper Meta data information and design as follows-

The Index page must contain a heading that is highest among other text on
pages and must be at the center of the page. There must be a paragraph
that introduces general information about the theme and atleast 3 style tags
and one image with alternate text. Page must be connected with proper
navigational links.

The second page must contain a feedback or enrollment form related with
theme chosen features of HTML5. The form must contain text element and
and email address of the company or person. Include the Submit Button.

Solution:
SOP 1 Code File
(index.html):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{text-decoration : underline;font-style: bold;color:green; font-size:
24px;margin-left: 130px; max-width: 1100px;}
h1{text-align: center;}
</style>
<title>XYZ College of Commerce Science & Arts</title>
<meta name="keywords" content="Faculty, students">
<meta name="description" content="A college Website dealing with
students and teachers/Faculty's data">
</head>
<body>
<h1>XYZ College of Commerce Science & Arts </h1>

<a href="page2.html">Feedback Form</a>


<br> <br>
<p> Education is the most powerful weapon which you can use to change
the world. Everyone is looking to change the world, and why not take part
in these movements<sup>?</sup>
People are paying a ridiculous amount of money for education, as this
industry is valued around million dollars. Most of this amount is now spent
on online education. Of course, our organization would like to give you an
opportunity to take a fraction of this platform. The best way to gain quality
education is to join with us where you can find majority of academic fields
to enhance your career with.Many streams of subjects are available at our
place. </p> <br>

<img src="sample.jpg" width="250px" height="250px" alt="XYZ


College" align="right">
</body>
</html>

Page2.html

<!DOCTYPE html> <html> <head>


<style type="text/css">
h1{ text-align: center;}
</style>
<title> Subject Streams according to admission</title>
<meta name="keywords" content="political Science,Information
technology">
<meta name="description" content="Subject Streams according to
admission process">
</head>
<body>
<h1 > Feedback Form </h1>
Name of person<input type="text" name="name" ><br><br>
email<input type="email" name="email"> <br> <br>
<input type="submit" value="submit">
</body>
</html>

PRACTICAL NO. 2
Title : Creation of a Webpage in html 5 with the help of CSS and its
other features.
Aim : Create a webpage using HTML and CSS code to design a webpage
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 display
tourist places in any one of the city.

Use Inline style sheet in the top section to display background colour
for the text ‘Tourist Places’. Use internal stylesheet for the left and
right section with background colour and font styles.
Solution:
<html>
<head>
<title>Practical No. 2</title>
<style>
header{background-color:skyblue; width:99.5%;height:30%;
float:top;border:4px solid}
section{background-color:LemonChiffon;width:50%;height:65%;
float:Left;border-style:solid;margin:3}
.cc{font-size:50px;font-style:Calibri;position:fixed;left:50px}
aside{background-color:Pink;width:48%;height:65%;
float:Right;border-style:solid;margin:3}
h3{font-size:45px;position:fixed;Left:730px}
</style>
</head>
<body>
<header>
<h1 style="Color:deepPink;font-size:70px;text-align:center">Tourist
Places</h1>
</header>
<section>
<h3 class=cc>
CITY
<ol>
<li>Pune</li>
<li>Bangalore</li>
<li>Hyderabad </li>
<li>Delhi</li>
</ol></h3>
</section>
<aside>
<h3>
Tourist Places in Pune
<ul>
<li>Shaniwarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul>
</h3>
</aside>
</body>
</html>

Output:

PRACTICAL NO. 3
Title: Use of Audio on web pages using HTML5.
Aim: Create a webpage named audio.html to set an audio file in webpage
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.).
Solution:
Two HTML Files are created.
First File Name : Audio.html
Second File Name : Audio_1.html
Make sure you must have one .mp3 file, .ogg file and .wav file. Save these
files in one folder and also save those two html files in the same folder.

File Name: Audio.html


<html>
<head>
<title>Practical No. 4 </title>
</head>
<body bgcolor="Orange">

<h1 align=center>Insertion of Audio File Multiple Source File</h1>

<h3>This will play the Song from multiple source files.</h3><br>

<audio controls>

<Source src="file_example_MP3_700KB.mp3" type="audio/mp3">

</audio>
</body>
</html>
Second File: Audio_1.html

<html>
<head>
<title>Practical No. 4 </title>
</head>
<body bgcolor="yellow">

<h1 align=center>Insertion of Audio File Multiple Source File</h1>

<h3>This will play the Song from multiple source files.</h3><br>

<audio controls>

<Source src="file_example_MP3_700KB.mp3" type="audio/mp3">


<Source src="file_example_WAV_1MG.wav" type="audio/wav">
<Source src="file_example_OOG_1MG.ogg" type="audio/ogg">

</audio>
</body>
</html>
PRACTICAL NO. 4
Title: Use of video on webpages using HTML5.
Aim: Create a webpage named video.HTML to display a video file on
webpage 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 video 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.).

Solution:
Copy any video file (.mp4, .ogg and .webm extensions) into your
folder. Total 2 HTML files are created.
Name of First File : Video.html (This file has only one source file) Name
of Second File : Video1.html (This file has multiple source files)

Video.html
<html>
<head>
<title>Video One File</title>
</head>
<body bgcolor="Orange">
<h1>Insertion of Video File With control having multiple source files</h1>
This is Video Player
<video controls height="200" width="200">

<Source src="file_example_MP4_480_1_5MG.mp4" type="video/mp4">

Your browser does not support Video Tag


</video>
</body>
</html>

Video1.html

<html>
<head>
<title>Video One File</title>
</head>
<body bgcolor="Orange">
<h1>Insertion of Video File With control having multiple source files</h1>
This is Video Player
<video controls height="200" width="200">
<Source src="file_example_MOV_480_700kB.mov" type="video/mov">
<Source src="file_example_MP4_480_1_5MG.mp4" type="video/mp4">
<Source src="file_example_WEBM_480_900KB.webm"
type="video/webm">
Your browser does not support Video Tag
</video>
</body>
</html>

PRACTICAL NO. 5
Title: Navigation on an image using Client side image
mapping in web page using HTML5.

Aim: Create a webpage named imagemap.html with an


inserted image having jpeg, png or gif extension. Create 3
different shapes (like rectangle, circle and polygon) which do
not overlap. Note the co-ordinates making use of
Ms Paint/GIMP/Irfan View/Pinta. Each shape should be
mapped or navigate with different URL that should navigate
to a local webpage.

Solution:
Total Five files are there. Out of five, One file is an image file,
four html files are created such as one file is main file and the
other three files are local files for linking with the main file.

First File Name : imagemap.html


Second File Name : One.html
Third File Name : Two.html
Fourth file Name : Three.html

Imagemap.html

<html>

<head>

<title>Client Side Image Mapping</title>

</head>

<body bgcolor="Skyblue">

<h1 align=center>Client Side Image


Mapping</h1>

<img src="flower.jpg" height="530"


width="1350" border=3
usemap="#mymap">

<map name="mymap">

<area Shape="Circle"
coords="154,186,80" href="One.html"
Alt="This is Local File One">

<area Shape="Rect"
coords="496,117,564,35"
href="Two.html" Alt="This is Local File
Two">

<area Shape="Poly"
coords="522,354,452,53,382,351"
href="Three.html"

Alt="This is Local FileThree">

</map>

</body>

</html>
One.html

<html>

<head>

<title>Hyperlink One</title>

</head>

<body bgcolor="Yellow">

<h1>this is a page one </h1>

</body>

</html>

Two.html

<html>

<head>

<title>Hyperlink two</title>

</head>

<body bgcolor="pink">

<h1>this is a page two </h1>

</body>

</html>

Three.html

<html>

<head>

<title>Hyperlink three</title>

</head>

<body bgcolor="skyblue">
<h1>this is a page three </h1>

</body>

</html>

Method: Download any jpeg file into your folder. Open that
file with Microsoft Paint. Adjust the image which is opened in
Paint, such that the entire screen is occupied with the image.
The Paint screen should not have any scroll bar. If scroll bar
is there, then resize the image to fit it into that screen.

Once adjustment is done, then draw three shapes on that


image such as Circle, Rectangle and Polygon so that the
shapes are not overlapped and it should be visible properly.

Now, note down the coordinates and write the same


coordinates into specific location in the html file. Write the
coords into coords attribute of area tag.

Now, execute the imagemap file. You will see the following
output. If you click on Circle, one.html file will get opened.
And So on.
Output:

PRACTICAL NO. 6
Title: Use of free online S.E.O. Tool to optimize a given website and write
the findings.

Aim: With the help of freely online available S.E.O. tool optimize the
given website and write down the following findings about the website:
Website:
Findings:
1. Name of the website which you are optimizing.
2. Whether the site has title tag.
3. Whether the site has header tags? If yes, which tags are
there? 4. Whether the images used, do they have alt
attribute?
5. What is the comment about usability?
Solution:
Steps 1: Collecting the website which is to be optimized: ∙ In the given
practical, as website is not given which is to be optimized.
∙ Website will be given by th examiner, so as here the website
given is: https://www.ajio.com/

Step 2: Getting free online SEO Optimizer Tool and putting the website
name which is to be optimized:
∙ Open any web browser.
∙ Type in the URL https://www.woorank.com.
∙ This is free SEO online optimizer tool.
∙ In the Search box, type in the website name which to be
optimized i.e. https://www.ajio.com/ and click on try it for
free.

Step 3: To check the result of Whether the Site has title tag: ∙ After
getting the result, it is observed that the website has title
tag.
∙ The title is: Online Shopping for Women, Men, Kids –
Clothing, Footwear, and Fashion | AJIO.
Step 4: To check whether the site has header tags and if yes then which
header tags:
∙ After getting the result, It is observed that the site has header
tag. ∙ The site has 6 Number of Times Heading level 2 i.e. <h2>
tag is there.
Step 5: To check whether the site has used images or not and also alt
attribute is used or not:
∙ It is observed that the site has used 5 images on that
webpage. ∙ But none of the images have alt attributes used
in it.
Step 6: Comment about user usability:
∙ Usability is about people's behaviour after they arrive on your
site, with the main goal being to increase the conversion
rate.
∙ The website is frequently visited by the users.
∙ The conversion rate is about 60%.
Outputs:

Title Tag Check:

Header tag Checked:

Whether the image used and whether alt attribute is used:


Comment about usability: It is about people's behaviour after they
arrive on your site, with the main goal being to increase the conversion
rate.
PRACTICAL NO. 7
Title: Use of free online S.E.O. Tool i.e. https://varvy.com/ to optimize a
given website and write the findings.

Aim: With the help of freely online available S.E.O. tool


https://varvy.com/ optimize the given website and write down the
following findings about the website:
Website: https://www.ajio.com/
Findings:
1. What is the name of the website?
2. Whether all CSS and JavaScript files seem visible to
Googlebot? 3. Whether the page seems to display well on
mobile devices? 4. Check whether the webpage is secured
with HTTPS?
5. Check whether website has robot.txt file or not?

Solution:
Steps 1: Collecting the website which is to be optimized: ∙ In the given
practical, as website is not given which is to be optimized.
∙ Website will be given by th examiner, so as here the website
given is: https://www.ajio.com/

Step 2: Getting free online SEO Optimizer Tool given in the practical i.e.
https://varvy.com/ and putting the website name which is to be optimized:
∙ Open any web browser.
∙ Type in the URL https://varvy.com/ and press enter key.
∙ We find that the site is currently under construction. So open
the other free S.E.O. audit tool.
∙ Type in the URL https://www.woorank.com.
∙ This is free SEO online optimizer tool.
∙ In the Search box, type in the website name which to be
optimized i.e. https://www.ajio.com/ and click on try it for
free.

Step 3: To check whether all CSS and JavaScript files seem visible to
Googlebot?
∙ After getting the result, it is observed that the website has
many JavaScript and CSS file.
∙ These are visible on Googlebot.
Step 4: To check whether the page seems to display well on mobile
devices?
∙ After getting the result, it is observed that the site is
properly visible on all mobile devices as the result is
given by S.E.O. Tool.
Step 5: To check whether the webpage is secured with HTTPS:
∙ It is observed that the website is SSL Secured i.e.
HTTPS. ∙ The website’s URL redirect to HTTPS
pages.
∙ The website is configured with HSTS.
∙
Step 6: To check whether the website has robot.txt file or not:
∙ It is observed that the website has Robot.txt file.

Outputs:
Whether the page seems to display well on mobile devices?

Whether the webpage is secured with HTTPS:


Whether website has robot.txt file or not?

You might also like