[go: up one dir, main page]
Scribd
Upload
168 views14 pages

Mba Lab File

The document provides instructions for 10 experiments on designing HTML pages with different features. The first experiment instructs the reader to design an HTML page introducing themselves with their photo, links, and headings. The second asks them to design a page about their academic career using tables. The third demonstrates internal hyperlinks by linking different sections of a page.

Uploaded by

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

Mba Lab File

The document provides instructions for 10 experiments on designing HTML pages with different features. The first experiment instructs the reader to design an HTML page introducing themselves with their photo, links, and headings. The second asks them to design a page about their academic career using tables. The third demonstrates internal hyperlinks by linking different sections of a page.

Uploaded by

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

INDEX

Sr. No. Experiment List Page. No.


1 Design a HTML page describing your profile in one paragraph. Design in such a way that 2-3
it has a heading, a horizontal rule, three links and your photo also write three HTML
documents for the links.
2 Design HTML page describing your academic career. The page will tell about the 3-4
degrees, Institutions and your hobbies. Add some lists too.
3 Design HTML page demonstrating Concept Of Internal Hyper-link. 5–6
4 Design HTML page which gives the list of grocery Items by using Ordered List , List 7
consist of Roman no, A,B…. and so on
5 Design HTML page which gives the list of grocery Items by using Unordered List bullets 8
are of form disc, square and circle.
6 Design a HTML page for partitioning browser window in frames display the different 9
pages in partitioned windows.
7 Design HTML page to partition window, Design in such a way that link clicked in on 10
page can display the corresponding pages in other window
8 Design a HTML page on your native place. 10 – 11
9 Design a HTML page on your friends. List your friends; each friends name is a link. 12
Prepare separate HTML document on each friend and call them in appropriate link.
10 Design HTML page listing popular car companies. For each company prepare a sub list 13 – 14
showing various brands of cars it offers.

~1~
EXPERIMENT: 1. Design a HTML page describing your profile in one paragraph. Design in such a way that it
has a heading, a horizontal rule, three links and your photo also write three HTML documents for the links.

Answer:
<!DOCTYPE html>
<html>
<head><title>Intro Page</title>
</head>
<body bgcolor="#c2d6d6">
<center><i><u><b><h1>Profile</h1></b></u></i> </center>
<hr color="orange">
<h3><font color="black">
Personal Details:
</h3><img src="10.jpg" align="right" width="150" height="200" border="4">
Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Amit Singh<br>
Address: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Shubhakansha App., Sector 27,
Naya Raipur, C.G.<br>
Mobile No: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp +919303125546<br>
Date of Birth: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 28 March 1995<br>
Language Known: &nbsp &nbsp &nbsp &nbsp English, Hindi<br>
<h3><font color="black">
Technical Skills:
</h3>
Area of Interest: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Computer Field, New Gadgets.<br>
Technical Language: &nbsp &nbsp &nbsp &nbsp C, HTML<br>
Interest: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Socializing/Interacting with people and playing soccer as a Stress Buster<br>
</font>
<p>
<font align="right"><h3><b>Hobbies</b></h3></font>
<ol>
<li>Playing Football</li>
<li>Playing PS-2</li>
<li>Bike Stunting</li>
</ol>
</p>
</h3>
<h3><font color="black">
Education:
</h3>
<a href="Assignment2.html">10th Marksheet</a><br>
<a href="Assignment2.html">12th Marksheet</a><br>
<a href="Assignment2.html">Academic Records</a><br>
<hr color="Green">
</html>

~2~
Output:

EXPERIMENT: 2. Design HTML page describing your academic career. The page will tell about the degrees,
Institutions and your hobbies. Add some lists too.

Answer:

<!DOCTYPE html>
<html>
<head><title>My Academic Career</title><u><h1>My Academic Career</h1></head></u>
<hr>
<body bgcolor="#c2d6d6">
<h3><u>Amit Singh</u></h3><br>
<table border="2" cellpadding="2" cellspacing="5">
<tr>
<th>S.No</th>
<th>Course/Class</th>
<th>Branch/Subject</th>
<th>Semester</th>
<th>Institution</th>
<th>Division</th>
<th>Percentage</th>
</tr>
<tr>
<td>1.</td>
<td>10th</td>
<td>All Subject</td>
<td><center>-</center></td>
<td>St. Michael Sen. Sec. School, Raipur</td>
<td>First </td>
<td>75.4%</td>
~3~
</tr>
<tr>
<td>2.</td>
<td>12th</td>
<td>PCM</td>
<td><center>-</center></td>
<td>St. Michael Sen. Sec. School, Raipur</td>
<td>First</td>
<td>71.83%</td>
</tr>
<tr>
<td>3.</td>
<td>B.Tech</td>
<td>Computer Science</td>
<td><center>1st</center></td>
<td>Kalinga University</td>
<td>First</td>
<td>83%</td>
</tr>
<tr>
<td>4.</td>
<td>B.Tech</td>
<td>Computer Science</td>
<td><center>2nd</center></td>
<td>Kalinga University</td>
<td>First</td>
<td>81.64%</td>
</tr>
</table>
<font align="right"><h2><b><u>Hobbies</u></b></h2></font>
<ol>
<li>Playing Football</li>
<li>Playing PS-2</li>
<li>Bike Stunting</li>
</ol>
<hr>
</body>
</html>
Output:

~4~
EXPERIMENT: 3. Design HTML page demonstrating Concept of Internal Hyper-link.
Answer:

<!DOCTYPE html>
<html>
<head><title>Concept of Internal Hyper-link</title>
<h1><b><u><center>Concept of Internal Hyper-link<center></u></b></h1>
</head><title>3-html</title><hr><hr>
<body bgcolor="#c2d6d6"><h2 id= "Hyp"><u>Hyperlink</u></h2>
<h3>In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by
clicking, tapping, or hovering. A hyperlink points to a whole document or to a specific element within a document.
Hypertext is text with hyperlinks. The text that is linked is called anchor text. A software system that is used for
viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink (or simply to link). A
user following hyperlinks is said to navigate or browse the hypertext.
The document containing a hyperlink is known as its source document. For example, in an online reference work
such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are
often used to implement reference mechanisms such as tables of contents, footnotes, bibliographies, indexes,
letters and glossaries.
In some hypertext hyperlinks can be bidirectional: they can be followed in two directions, so both ends act as
anchors and as targets. More complex arrangements exist, such as many-to-many links.
The effect of following a hyperlink may vary with the hypertext system and may sometimes depend on the link
itself; for instance, on the World Wide Web most hyperlinks cause the target document to replace the document
being displayed, but some are marked to cause the target document to open in a new window. Another possibility
is transclusion, for which the link target is a document fragment that replaces the link anchor within the source
document. Not only persons browsing the document follow hyperlinks; they may also be followed automatically by
programs. A program that traverses the hypertext, following each hyperlink and gathering all the retrieved
documents is known as a Web spider or crawler.</h3><br><br><hr><br>
<h2 id="Type"><u>Types Of Hyperlink</u></h2>
<ol>
<h3><li><a href = "#In">Internal Link</a></li>
<li><a href = "#Ex">External Link</a></li></h3></ol>
<br><br><hr><br><h2 id="In"><u>Internal Link</u></h2><p>
<h3>Part of what makes a website functional is the use of links. This can be both to help navigate through your
website and to link to other websites. One reason why people have often referred to the Internet as the “World
Wide Web” is the fact that many websites link to each other in an intricate and complex web. Without linking, your
website will probably be just a boring static one-page HTML website. How many websites outside of Zombocom
depends almost exclusively on a single page?</p><p>
So, the first thing we need to do is look at the folder where we created our first webpage. Create a new webpage in
that folder by, much like how we described in the first par of the tutorial. The only difference is that we can name
this page anything so long as the file extension is “.html”. For practicality reasons, I recommend making the name
small and a single word. In my case, I named my second webpage “test.html”:</p><p>
Next, we will open up our test file in Notepad and insert the following code:</p><p>
We won’t worry about document declaration for this particular webpage since this is just to test out how linking
works. Still, it’s good practice to put doctype code at the top of every page as well as metadata for real pages. All
this code does is tell us if we were successful in our test. Once that code is written out and saved, you can close that
page.
Next, open up your “index.html” in notepad. When you do, add the line just above the body closing tag:</p><p>
You’ll notice that the code uses “a”. The “a” basically tells the browser that what it’s seeing is a link that can be
clicked on. So, since it’s an “a” tag, we close with merely the “a” link. Of course, in this case, it’s more than a link, this
~5~
link is referring us to a different page. So, in the opening tag, we add a space and add in “href”. I link to think of
“href” as “hyper referral” meaning it’s referring to something. Since links are probably one of the most common
kinds of code you’ll be using in any web developing scenario, this kind of HTML code will eventually be burned into
your brain and you won’t need anything special to remember this. So, after the “href” part of the code, I added in an
eExperiment: uals sign, then in Experiment: uotation marks, add in the name of the file we are referring to. Then,
it’s the other angle bracket to close out the opening tag. This is what is referred to as an internal link. It’s an
internal link because it’s on the same website as the page you would be looking at.
One important note on internal pages is the fact that links are case sensitive. That means if there are any characters
in upper case, this must be in the link itself. Otherwise, the link will be broken. This is why it’s best to leave
filenames in lower case.</h3></p><br><br><hr><br>
<h2 id="Ex"><u>External Link</u></h2><h3><p>
External links are links that point outside of the website. In this case, we need the full URL (Uniform Resource
Locator) which can be retrieved by simply copying the address you need from the address bar in your browser and
pasting it into your code. Let’s demonstrate how we can get a URL and paste it into our code. Let’s presume we
want to link to Google. So, we, in a different tab or window, type in Google in the address bar:</p>
<p>When we hit Enter, we will be taken to Google. The address (or URL) will change to the following:</p>
<p>(Of course, the “.ca” you see at the end in this screenshot is simply directing me to the Canadian version of
Google. What is at the end of the URL really doesn’t matter as much as what’s in the beginning.
Now, right click on the text of the address (make sure all of it is highlighted) and copy the text:</p>
<p>Now, we need to paste it into our HTML document in a way that links to it. Below, I’ve added a line of code
towards the bottom above the closing body tag:</p>
<p>Note that on the previous line, I added two break tags. This is to push the text down two lines when a browser
sees it.Little is different from the internal links other than the use of the full URL. You can easily point to your own
website with an external link, but ideally, you’ll use internal links instead.</p>
<p>These specific kinds of links will open up in the same window. If, however, you want users to view those
websites, but have them open up in a new tab/window instead, there’s a simple solution to this. After the URL in
the “a” tag, we insert target=_blank".</p><br><br><hr><br><ol>
<li><p><a href = "#Hyp">Hyperlink</a></p></li>
<li><p><a href = "#Type">Types of Links</a></p></li>
<li><p><a href = "#In">Internal Link</a></p></li>
<li><p><a href = "#Ex">External Link</a></p></li></body></html>
Output:

~6~
EXPERIMENT: 4. Design HTML page which gives the list of grocery Items by using Ordered List , List consist
of Roman no, A,B…. and so on.
Answer:

<!DOCTYPE html>
<html>
<head><title>Grocery Items in Ordered List</title>
<h1><u><center>Grocery Items in Ordered List<center></u></h1></head>
<body bgcolor="#c2d6d6"><hr><hr>
<h3>Represented in "Roman No." SeExperiment: uence</h3>
<ol type="I">
<li>Rice - 5 K.G</li>
<li>Flour - 5 K.G</li>
<li>Dal - 3 K.G</li>
<li>Sugar - 1 K.G</li>
<li>Poha - 1 K.G</li></ol><hr>
<h3>Represented in "Alphabetic" SeExperiment: uence</h3>
<ol type="A">
<li>Wild Stone Soap - 3 Combo Pack</li>
<li>Tooth brush - 1 Pack</li>
<li>Colgate Paste - 1 Pack</li>
<li>Fog Deo - 1 Pack</li>
<li>Garnier Facewash - 1 Pack</li></ol><hr><hr>
</body></html>
Output:

~7~
EXPERIMENT: 5. Design HTML page which gives the list of grocery Items by using Unordered List bullets
are of form disc, square and circle.
Answer:

<!DOCTYPE html>
<html>
<head><title>Grocery Items in Unordered List</title>
<h1><u><center>Grocery Items in Unordered List<center></u></h1>
</head><body bgcolor="#c2d6d6"><hr><hr><h3>Represented in "Disc List"</h3>
<ul type="disc">
<li>Rice - 5 kg</li>
<li>Flour - 5 kg</li>
<li>Dal - 3 kg</li>
<li>Sugar - 1 kg</li>
<li>Poha - 1 kg</li></ul><hr>
<h3>Represented in "SExperiment: uare List"</h3>
<ul type="sExperiment: uare">
<li>Wild Stone Soap - 3 Combo Pack</li>
<li>Tooth brush - 1 Pack</li>
<li>Colgate Paste - 1 Pack</li>
<li>Fog Deo - 1 Pack</li>
<li>Garnier Facewash - 1 Pack</li></ul><hr>
<h3>Represented in "Circle List"</h3>
<ul type="circle">
<li>Potato - 3 kg</li>
<li>Onion - 2 kg</li>
<li>Tomato - 1 kg</li>
<li>Garlic - 100 gm</li>
<li>Capcicum - 1 kg</li></ul><hr><hr>
</body></html>
Output:

~8~
EXPERIMENT: 6. Design a HTML page for partitioning browser window in frames display the different
pages in partitioned windows.
Answer:

<!DOCTYPE html>
<html><head><title>HTML Frames</title></head>
<frameset cols="15%,85%">
<frame name="left" src="Link2.html" />
<frame name="main" src="Link1.html" /><noframes>
<body bgcolor="#c2d6d6">Your browser does not support frames. </body>
</noframes>
</frameset></html>

Output:

~9~
EXPERIMENT: 7. Design HTML page to partition window, Design in such a way that link clicked in on page
can display the corresponding pages in other window.
Answer:

<!DOCTYPE html>
<html><head><title>HTML Frames</title></head>
<frameset cols="15%,85%">
<frame name="left" src="Link3.html" />
<frame name="main" src="Link1.html" /><noframes>
<body bgcolor="#c2d6d6">Your browser does not support frames. </body>
</noframes></frameset></html>
Output:

EXPERIMENT: 8. Design a HTML page on your native place.


Answer:

<!DOCTYPE html>
<html><head><title>My Native Place</title></head>
<body bgcolor="#c2d6d6"><center><h1>My Native Place - "Satna, (M.P)"</h1></center><hr><h3>
Satna is a city in the Satna District of the Indian state of Madhya Pradesh, which shares a border with neighboring
Uttar Pradesh. The city is a municipal corporation within the district, and the home of its administrative
headExperiment: uarters.</h3>
<img align="right" src="2.png" height="180" width="300"><h2><u>History</u></h2>
<h3>The Satna District is part of the region of Bagelkhand, a large parts of which was ruled by the state of Rewa. A
small part of Satna was ruled by feudatory chiefs, holding their states under the British Raj. Satna's name comes
from the Satna River (or Sutna) which originates at Sarang Ashram (Sutikshna Ashram), situated near Sarangpur
village of the Panna district. Previously, Sutna was the name of the railway station, the town being Raghurajnagar,
but gradually the name of the station became associated with the city that is now Satna. During the Ramayana Era,
Lord Rama stayed in the region of Chitrakoot, half of which is in the outskirts of Satna, the other in Uttar Pradesh.
Once a British headExperiment: uarters, the Baghelkhand Agency was established in Satna in 1872 (and abolished

~ 10 ~
in 1931). Col. D.W.K. Barr prepared plans to develop Satna during the years 1882–88 and Sir Donald Robertson
supervised construction of roads and other amenities according to those plans in 1888–94.</h3>
<h2><u>Geography</u></h2>
<h3>Satna is located at 24.34°N 80.55°E with an average elevation of 317 meters (1033 feet). The location is
renowned for dolomite mines and limestone.</h3><h2><u>Transport</u></h2>
<h3><b><i>1. <u>Air</u></b></i><p>
Satna has an airstrip called Satna Airstrip,[7] built in 1970. The nearest major airport to Satna is Jabalpur Airport
which is approximately 200 kilometers from the city. Another airport, which is 124 kilometers from Satna is Civil
Aerodrome Khajuraho, which is in Chhatarpur District (Khajuraho Town).</p>
<b><i>2. <u>Railways</u></i></b><p>
SatnaJunction[10] railway station (IRCTC code STA) is a station in Western-Central railway division on the route
between Jabalpur Junction and Allahabad. It is a junction and the branch goes to Rewa from here. The railway
station has three platforms with all up going trains normally using platform number 1 and all down going (trains
heading towards Allahabad-Manikpur) using platforms 2 and 3. Satna is well connected by train to few major cities
of the countries. It lies on the Howrah–Allahabad–Mumbai line, a train route connecting Mumbai and Howrah.
There is also a diesel depot for the Western Central Railway. Satna junction is the one of the junctions of the
Jabalpur Railway division providing maximum income due to its high degree of loading and unloading of cement,
petroleum etc. All trains passing from Satna Junction stop here which ultimately shows its importance. 3 of them
have technical stoppage while the rest have commercial stoppage.</p>
<b><i>3. <u>Roadways</u></b></i><p>
Bus services connect Satna with various cities of Madhya Pradesh and some cities of uttarpradesh. The city is well-
connected by state highways and a national highway. Satna is connected to the longest National Highway: NH-7.
State highway NH-75 passes from the heart of Satna and connects it to cities of Panna and Rewa, which are other
important cities of northern Madhya Pradesh.</p><h3>
<h2><u>Education</u></h2>
<p><h3>Satna has a literacy rate of 63.8% according to the 2011 Census; however, this does not mean that Satna
has Experiment: uality educational institutes. There is no central university there, a little known India's first rural
university in Chitrakoot Mahatma Gandhi ChitrakootGramodayVishwavidyalaya was established in 1991. It is one
of 16 state government universities in Madhya Pradesh. There are several degree colleges with large campuses in
Satna. AwdheshPratap Singh University(APSU,Rewa) located in Rewa provides affiliations to the colleges in the
city. The city is an educational hub of the Vindhya region and several courses such as Engineering, Biotechnology,
Computer, Management, and Journalism are offered by institutes here.</p><p>
Polytechnic College is a technical college. It has a special branch of Cement Technology.</p>
<p>JawaharNavodayaVidyalaya, run by HRD Ministry of India, is a center of education in Satna for those who come
from an underprivileged or low-income background. Located at Rahikwara, this school has produced many
talented engineers, journalists, and lawyers.<h3></p><h2><u>Gallery</u></h2>
<imgsrc="3.jpg" height="350" width="650">
<imgsrc="4.jpg" height="200" width="330">
<imgsrc="5.jpg" height="200" width="330"><hr></body></html>
Output:

~ 11 ~
EXPERIMENT: 9. Design a HTML page on your friends. List your friends; each friends name is a link.
Prepare separate HTML document on each friend and call them in appropriate link .

Answer:

<html><head><title>My Friend's List</title></head>


<body bgcolor="#c2d6d6"><center><h1>"My Friend's List"</h1></center><hr><h2><u>Friendship-</u></h2>
<h3>Friendship is a relationship of mutual affection between people. Friendship is a stronger form of
interpersonal bond than an association. Friendship has been studied in academic fields such as sociology, social
psychology, anthropology, and philosophy. Various academic theories of friendship have been proposed, including
social exchange theory, eExperiment: uity theory, relational dialectics, and attachment styles. A World Happiness
Database study found that people with close friendships are happier.
</h3><hr><h2><u>My Best Friend List-</u></h2><ul>
<a href="Link6.html"><li>Ratandeep Singh</li></a>
<a href="Link4.html"><li>Kevin Paul</li></a>
<a href="Link5.html"><li>Medlin Davidson</li></a>
<a href="Link7.html"><li>Alok Gaur</li></a>
<a href="Link8.html"><li>AkhilShinde</li></a>
<a href="Link9.html"><li>Asifa Ali</li></a></body></html>
Output:

~ 12 ~
EXPERIMENT: 10. Design HTML page listing popular car companies. For each company prepare a sub list
showing various brands of cars it offers.

Answer:

<!DOCTYPE html>
<html><head><title>Popular Car Companies And Their Models</title><head>
<body bgcolor="#c2d6d6">
<center><h1>Popular Car Companies And Their Brands<h1></center><hr>
<ol type="1">
<h2><li>Audi</li></h2><br>
<ul type="disc">
<li> Audi S8</li>
<li> Audi A8</li>
<li> Audi A6</li>
<li> Audi S6</li>
<li> Audi EXPERIMENT: 3</li>
<li> Audi EXPERIMENT: 5 Hybrid</li>
<li> Audi SEXPERIMENT: 5</li></ul><br>
<h2><li>BMW</li></h2><br>
<ul type="disc">
<li> BMW I8</li>
<li> BMW M6 Gran Coupe</li>
<li> BMW X3</li>
<li> BMW X6</li>
<li> BMW Z4 Roadster</li>
<li> BMW ActiveHybrid 3</li>
<li> BMW 6 Series Coupe</li></ul><br>
<h2><li>Jaguar</li></h2><br>
<ul type="disc">
<li> Jaguar XFR-S</li>
<li> Jaguar XF</li>
<li> Jaguar F – Pace</li>
<li> Jaguar XK Convertible</li>
<li> Jaguar S-Type</li>
<li> Jaguar F-Type Convertible</li>
<li> Jaguar XJR LWB</li></ul><br>
<h2><li>Lamborghini</li></h2><br>
<ul type="disc">
<li> Lamborghini Murcielago</li>
<li> Lamborghini Veneno Roadster</li>
<li> Lamborghini Aventador LP 700-4</li>
<li> Lamborghini Huracan LP 610-4</li>
<li> Lamborghini Aventador LP 700-4 Superveloce</li>
<li> Lamborghini Aventador LP 700-4 Pirelli Edition</li>
<li> Lamborghini Gallardo LP 620-2 Super Trofeo</li></ul><br>
<h2><li>Porsche</li></h2><br>
<ul type="disc">
<li> Porsche 911 Targa 4 GTS</li>
<li> Porsche Panamera S E-Hybrid</li>
<li> Porsche 918 SpyderWeissach Package</li>
<li> Porsche 911 Carrera GTS Cabriolet</li>
<li> Porsche Panamera Turbo</li>

~ 13 ~
<li> Porsche 911 Carrera 4 GTS</li>
<li> Porsche Macan S</li></ul><br></ol><hr><hr></body><html>

Output:

~ 14 ~

You might also like