prishportfolio.weebly.comprishportfolio.weebly.com/.../8/0/8/7/80871828/assign1.docx · Web viewThe...

Name: Prishtee Seewoochurn

Student ID: 0324451

Programme: Bachelor of Computer Science

Assignment 1: Website about Mauritius

Date: 19.05.16

Purpose of the site with screenshots of the pages

The topic that I have chosen for my website is Mauritius. This is because I would like to share

knowledge about my country on various aspects such as history, culture, cuisine, tourist

attractions, music and dance. Mauritius has remained a popular tourist destination since many

years. Through this website, I would like people to “explore” the island to make them feel the

beauty of the paradise island.

The first page of the website is the home page whereby a brief description of the location is

provided. A general introduction of the country is provided.

A world map has also been provided and a map of Mauritius can also be viewed when we click

on the red dot.

The second page is about culture. It describes the different ethnic groups in Mauritius and the

way they celebrate different festivals.

Pictures have been provided to better describe the rainbow-colored multi-ethnicity in Mauritius.

The pictures can be viewed more closely by clicking on them.

The next page is about the history of Mauritius-the different periods of colonization. It provides

information about how the Dutch, French and British contributed to what Mauritius is today. It

also gives a brief description about our independence.

Next we have a page about Mauritian cuisine. Surely, we want people to know about the various

delicacies available in Mauritius.

Music and dance do form part of the Mauritian culture, with the sega being our local music. The

next page is mostly about sega.

Last, but certainly not the least, we provide information about the different tourist attractions. In

Mauritius, we have a myriad of places for tourists, ranging from beaches, hotels and nature parks

to shopping malls and restaurants.

In the last page, we also encourage people to give feedback about the website.

Codes

Home<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 15%;

background-color: #ffdab9;

height: 100%;

overflow: auto;

position: fixed;

}

li a {

display: block;

color: #000;

padding: 8px 0 8px 16px;

text-decoration: none;

}

li a.active {

background-color: #ffcc5c;

color: white;

}

li a:hover:not(.active) {

background-color: #a52a2a;

color: white;

}

</style>

<link type="text/css" rel="stylesheet" href="home.css"/>

<title>All About Mauritius</title>

<meta charset="UTF-8">

</head>

<body style="background-color:#d5f4e6;">

<h1 style="color:#4040a1; font-family:comic sans ms; text-align:center; font-

size:40px"><em>Mauritius, A Paradise Island</em></h1>

<ul>

<li><a class="active"

href="file:///C:/Users/wisteetee/Desktop/Assignment1/home.html">Home</a></li>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/culture.html">Culture</a></li>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/history.html">History</a></li>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/cuisine.html">Cuisine</a></li>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/music%20&

%20dance.html">Music & Dance</a></li>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/tourist

%20attractions.html">Tourist Attractions</a></li>

</ul>

<img src="mauritius-image1.jpg" style="width:1150px;margin-left:15%;height:500px">

<div style="margin-left:15%;padding:1px 16px;">

<h3>Home</h3>

<p>Hello & Welcome!</p>

<p>Mauritius is a small island located in the Indian Ocean. It was formed by volcanic eruption.

It is 65 km long and 45 km wide, with an area of 1864.8 km<sup>2</sup>.</p>

<p>Though Mauritius is not physically located in the continent of Africa, it is considered as an

African country. It is actually located some 2000 km off the southeast coast of the African

continent, near the tropic of Capricorn.</p>

<p>Mauritius has a tropical climate, From November to April, we have summer, whereby the

temperature is around 30<sup>o</sup>C. From June to September, we have winter whereby the

temperature is around 20<sup>o</sup>C. Mauritius is surrounded by beautiful sandy beaches

and has a wide biodiversity.</p>

<p>There are nine districts in Mauritius and the capital is Port Louis.</p>

<p>The main languages spoken in Mauritius are English, French, Creole and Bhojpuri. English

is the official language while Creole is the mother-tongue.</p>

<p>Our Mauritian flag consists of four colours: <span style="color:red">red</span>, <span

style="color:blue">blue</span>, <span style="color:#e6e600">yellow</span> and <span

style="color:green">green</span>.</p>

</div>

<img src="Location-map-of-Mauritius-in-the-Indian-ocean.jpg" usemap="#worldmap"

style="margin-left:15%">

<map name="worldmap">

<area shape="circle" coords="256,257,6" href="mauritius-map-flag.gif">

</map>

<p style="margin-left:15%">Feel free to click on the red dot to view a map of Mauritius.</p>

</body>

</html>

Culture<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {


margin: 0;

padding: 0;

width: 15%;


position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;



}

li a.active {


color: white;

}



color: white;

}

div.img {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.img:hover {

border: 1px solid #777;

}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

</style>




</head>




<ul>

<li><a href="file:///C:/Users/wisteetee/Desktop/Assignment1/home.html">Home</a></li>


href="file:///C:/Users/wisteetee/Desktop/Assignment1/culture.html">Culture</a></li>







</ul>

<div style="margin-left:15%;padding:1px 16px;height:1000px;">

<h3>Culture</h3>

<p>

Mauritius has a wide cultural diversity. This is because, very long time ago, people came to

Mauritius from different countries for different purposes.

The Majority of people were brought as Indentured laborers from India. This is why Hindus,

Tamils, Telugus, Muslims and Marathi people form a large part

of the Mauritian population. Then, we also have Chinese and Christian.

One of the most beautiful aspects of the Mauritian society is the way all these people live

together in peace and harmony although they come from different

cultural backgrounds.

So if you believe that people should mix around just as different colors are needed to make a

rainbow, then visiting Mauritius is a must!

Now let us learn more about the festivals in Mauritius.

Since Mauritius is a multi-racial country, all the festivals are celebrated with great fervor and

enthusiasm.

The main festivals celebrated by the different ethnic groups are as follows:

</p>

<table>

<tr>

<th>Ethnic Group</th>

<th>Main Festivals</th>

</tr>

<tr>

<td>Hindu</td>

<td>Makar Sankranti, Maha Shivratree, Holi, Deepavali</td>

</tr>

<tr>

<td>Tamil</td>

<td>Thaipoosam Cavadee, Varusha Pirappu</td>

</tr>

<tr>

<td>Telegu</td>

<td>Ougadi, Venkateshwara</td>

</tr>

<tr>

<td>Muslim</td>

<td>Eid-ul-Fitr, Eid-Al-Adha</td>

</tr>

<tr>

<td>Marathi</td>

<td>Gudi Pawda, Ganesh Chaturthi</td>

</tr>

<tr>

<td>Chinese</td>

<td>Chinese New Year</td>

</tr>

<tr>

<td>Christian</td>

<td>Easter, Assumption of the Blessed Virgin Mary, All Saints Day</td>

</tr>

</table>

<p>

However, all ethnic groups celebrate all festivals altogether, for example Chinese will share

sweets with non-Chinese as well on the occasion of Chinese New Year.

Hindus, Tamils, Telugus and Marathi people celebrate Divali and will share Indian sweets

among one another and also with Chinese, Muslims and Christian. For Easter,

Christian usually give chocolate to friends and family, irrespective of their cultural background.

Furthermore, Christmas is celebrated by everyone in Mauritius.

</p>

<div class="img">

<a target="_blank" href="mahashivratri.jpg">

<img src="mahashivratri.jpg" width="300" height="200">

</a>

<div class="desc">Pilgrims carrying kanwar to the sacred lake</div>

</div>

<div class="img">

<a target="_blank" href="gangatalao.jpg">

<img src="gangatalao.jpg" width="600" height="400">

</a>

<div class="desc">Ganga Talao-The sacred lake</div>

</div>

<div class="img">

<a target="_blank" href="holi.png">

<img src="holi.png" width="600" height="400">

</a>

<div class="desc">Holi-The festival of colours</div>

</div>

<div class="img">

<a target="_blank" href="diwali.png">

<img src="diwali.png" width="600" height="400">

</a>

<div class="desc">Diwali</div>

</div>

<div class="img">

<a target="_blank" href="indian sweets.jpg">

<img src="indian sweets.jpg" width="600" height="400">

</a>

<div class="desc">Sweets shared on the occasion of Diwali</div>

</div>

<div class="img">

<a target="_blank" href="cavadee.jpg">

<img src="cavadee.jpg" width="600" height="400">

</a>

<div class="desc">Thaipoosam Cavadee</div>

</div>

<div class="img">

<a target="_blank" href="ougadi.jpg">

<img src="ougadi.jpg" width="600" height="400">

</a>

<div class="desc">Ougadi Celebrations</div>

</div>

<div class="img">

<a target="_blank" href="eid.png">

<img src="eid.png" width="600" height="400">

</a>

<div class="desc">Eid-Ul-Fitr</div>

</div>

<div class="img">

<a target="_blank" href="henna.jpg">

<img src="henna.jpg" width="600" height="400">

</a>

<div class="desc">Applying henna on the occasion of Eid-Ul-Fitr</div>

</div>

<div class="img">

<a target="_blank" href="biryani.jpg">

<img src="biryani.jpg" width="600" height="400">

</a>

<div class="desc">Having biryani on the occasion of Eid-Ul-Fitr</div>

</div>

<div class="img">

<a target="_blank" href="mauritius-ganesh-chaturthi.jpg">

<img src="mauritius-ganesh-chaturthi.jpg" width="600" height="400">

</a>

<div class="desc">Immersion of the statue on the occasion of Ganesh Chaturthi</div>

</div>

<div class="img">

<a target="_blank" href="chinese-new-year.jpg">

<img src="chinese-new-year.jpg" width="600" height="400">

</a>

<div class="desc">Chinese New Year Celebrations</div>

</div>

<div class="img">

<a target="_blank" href="Easter chocolate.jpg">

<img src="Easter chocolate.jpg" width="600" height="400">

</a>

<div class="desc">Easter chocolate</div>

</div>

</div>

</body>

</html>

History<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {


margin: 0;

padding: 0;

width: 15%;


position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;



}

li a.active {


color: white;

}



color: white;

}

</style>




</head>




<ul>




href="file:///C:/Users/wisteetee/Desktop/Assignment1/history.html">History</a></li>






</ul>


<h3>History</h3>

<h4>The Dutch</h4>

<p>The history of Mauritius dates back to the early 16th century. Mauritius was first discovered

by the Arabs, followed by the Portuguese. In the Alberto Cantino’s map

of 1502 the Arab name of Mauritius Island appeared as Dina Arobi - Abandoned Island.

Later the Dutch came to Mauritius and named it Maurice. Dutch colonization was from 1638 to

1710. The Fort Frederik Hendrik was built at Vieux Grand Port by the Dutch.

At that time, ebony and wild animals such as dodo, pigs, goats and tortoises were the resources

available on the island. These were greatly exploited by the Dutch.

Large areas of forest were cleared to obtain ebony for export. The animals were killed for food.

The dodo eventually became extinct.

The Dutch people introduced sugarcane in Mauritius. Other crops were also cultivated and

slaves were brought to the island. They had to work on plantations.

However, later in 1710, the Dutch had to abandon the island due to:</p>

<ol>

<li id="one"><p>Bad harvests</p></li>

<li id="two"><p>Rats which were destroying plantations</p></li>

<li id="three"><p>Bad weather conditions such as cyclones</p></li>

<li id="four"><p>Maroon slaves who were attacking them</p></li>

</ol>

<h4>The French</h4>

<p>The French ruled Mauritius from 1715 to 1810. At that time, they named the island Isle de

France. The two main Governors were Mahe de Labourdonnais and Pierre Poivre.

Mahe de Labourdonnais made developments such as the Government House, Chateau de Mon

Plaisir, and the Line Barracks, the headquarters of the police force.

Pierre Poivre introduced spices such as cloves and nutmeg in Isle de France. He also helped in

the development of Port Louis and established Pamplemousses Garden (now

known as Sir Seewoosagur Ramgoolam Botanical Gardens).

In August 1810, the British tried to attack the French at Vieux Grand Port because they wanted

to conquer Isle de France, but they lost the battle. However, in

December1810, the British invaded the island from Cap Malheureux, and eventually, the French

had to surrender.

The British allowed settlers to keep their land. They also allowed the use of the French language

and the law of France in criminal and civil matters. The British

renamed the island Mauritius.</p>

<h4>The British</h4>

<p>Sir Robert Farquhar was the first British Governor of Mauritius. In 1835, there was the

abolition of slavery which greatly affected the country’s economy. In order to

work on the sugar cane plantations, in factories, in transport and on construction sites, Indian

immigrants were brought from Bombay (Mumbai), Calcutta (Kolkata),

and Madras (Chennai). There were Chinese Immigrants as well.

The Aapravasi Ghat, which is found at Port Louis harbor is the place where Indian Immigrants

stayed.

In November 1901, while travelling from South Africa to India, Mahatma Gandhi stopped for

two weeks in Mauritius, promoting education and politics.

In 1903, motorcars were introduced in Mauritius and in 1910, the operation of taxis started. In

1909, the electrification of Port Louis took place, and later, the

Mauritius Hydro Electric Company provided electricity to upper Plaines Wilhems.

In 1911, cinema shows were played in Curepipe. Royal College was also built. In 1912,

telephone network was improved and used on a larger scale.

The first general elections were held on 9 August 1948 and were won by the Labour Party. This

party was led by Guy Rozemont. Constitutional conferences were held in

London in 1955 and 1957, and the ministerial system was introduced. Voting took place for the

first time on 9 March 1959. The Labour Party won again, but this time

Sir Seewoosagur Ramgoolam was the leader.</p>

<h4>Independence</h4>

<p>At the Lancaster Conference of 1965, it became clear that Britain wanted to relieve itself of

the colony of Mauritius. A general election took place on 7 August 1967,

and the Labour Party and its two allies obtained the majority of seats. Mauritius adopted a new

constitution and independence was proclaimed on 12 March 1968.

Sir Seewoosagur Ramgoolam became the first prime minister of an independent Mauritius.

Sir Seewoosagur Ramgoolam is considered as the ‘Father of our Nation’ as he had negotiated

with the British for our independence.

On 12 March 1992, twenty-four years after independence, Mauritius became a republic within

the Commonwealth of Nations.

</p>

</div>

</body>

</html>

Cuisine<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {


margin: 0;

padding: 0;

width: 15%;


position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;



}

li a.active {


color: white;

}



color: white;

}

div.img {

margin: 5px;


float: left;

width: 180px;

}

div.img:hover {


}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

</style>




</head>




<ul>





href="file:///C:/Users/wisteetee/Desktop/Assignment1/cuisine.html">Cuisine</a></li>





</ul>


<h3>Cuisine</h3>

<p>

Tomatoes, garlics, onions and chilies are the key ingredients in any Mauritian recipe. The most

common food which is also very popular among Mauritians is ‘rougaille’.

Vegetables, meats and seafood can be cooked in the ‘rougaille’ and eaten with ‘achards’

(pickles) and dhal or rice. Other commonly used spices are turmeric, cinnamon,

cardamom, and cloves.

</p>

<p>

Another common dish is’ vindaye’, a dish of fried fish or octopus that is preserved in using

mustard seeds, chilli, garlic, oil and vinegar. This also can be accompanied

with dishes such as rice, vegetable curry and any kind of pulses (lentils, beans).

</p>

<p>

Everyone loves the readily available delicious street food of Mauritius which includes fried split

pea cakes called gateaux piment, gateaux brinjel and many other fritters.

The other big favourites are dholl puris, a flatbread spread with a thin layer of yellow split peas,

which are then rolled up with a variety of pickles, cooked vegetables

and chutneys.

</p>

<p>

Desserts usually consist of tarts filled with banana, almonds or pastry creams to cute pink

raspberry shortbreads sandwiched with jam called ‘napolitaines’. Besides,

we also have abundant tropical fruit to finish a meal. Not to forget our local ice cream-vona

corona!

</p>

<div class="img">

<a target="_blank" href="gateaux piment.jpg">

<img src="gateaux piment.jpg" width="600" height="400">

</a>

<div class="desc">Gateaux Piment</div>

</div>

<div class="img">

<a target="_blank" href="napolitaine.jpg">

<img src="napolitaine.jpg" width="600" height="400">

</a>

<div class="desc">Napolitaines</div>

</div>

<div class="img">

<a target="_blank" href="dholl puri.gif">

<img src="dholl puri.gif" width="600" height="400">

</a>

<div class="desc">Dholl puri</div>

</div>

<div class="img">

<a target="_blank" href="rougaille.jpg">

<img src="rougaille.jpg" width="600" height="400">

</a>

<div class="desc">Rougaille</div>

</div>

<div class="img">

<a target="_blank" href="vona corona.jpg">

<img src="vona corona.jpg" width="600" height="400">

</a>

<div class="desc">Vona Corona</div>

</div>

</div>

</body>

</html>

Music & Dance<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {


margin: 0;

padding: 0;

width: 15%;


position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;



}

li a.active {


color: white;

}



color: white;

}

</style>




</head>




<ul>





<li><a class="active" href="file:///C:/Users/wisteetee/Desktop/Assignment1/music%20&




</ul>


<h3>Music & Dance</h3>

<p>Sega is the traditional music and dance of Mauritius. It is in the creole language. Well-

known traditional sega singers from Mauritius include Ti Frére,

Marlene Ravaton, Serge Lebrasse, Michel Legris and Fanfan.

Alain Ramanisum is currently one of the most popular sega singers in Mauritius.

The beauty of sega lies in the way traditional music instruments are used to make the most

vibrant sound while still preserving its uniqueness and cultural richness.

These instruments include “Ravanne”, “Triangle”, the “Maravanne” and the traditional guitar.

As far as the sega dance is concerned, men usually wear hats while women do not miss the

flowers in their hair.

Other forms of music in Mauritius include Indian classical music and Bhojpuri music.

</p>

<p>Below are a few pictures depicting sega.</p>

<img src="sega1.jpg" style="margin: 5px;border: 1px solid #ccc;float: left;width:

300px;height:225px">

<img src="sega2.png" style="margin: 5px;border: 1px solid #ccc;float: left;width:






<img src="sega5.png" style="margin: 5px;border: 1px solid #ccc;float: left;width:


</div>

</body>

</html>

Tourist Attractions<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

ul {


margin: 0;

padding: 0;

width: 15%;


position: fixed;

height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;



}

li a.active {


color: white;

}



color: white;

}

div.img {

margin: 5px;


float: left;

}

div.img:hover {


}

div.img img {

width: 100%;

height: auto;

}

</style>




</head>




<ul>







<li><a class="active" href="file:///C:/Users/wisteetee/Desktop/Assignment1/tourist


</ul>


<h3>Tourist Attractions</h3>

<p>

Let us now have a look at the different interesting places in Mauritius. What is it that makes

Mauritius one of the most popular tourist destinations? Here we go!

Firstly, Mauritius is well-known for its wonderful beaches. It is described by the 3 s- sun, sand,

sea. Beaches in Mauritius are the best way to relax. Even for the

local people, spending at least one day at the seaside during the holidays is a must. Not to forget,

we have the luxurious hotels and restaurants as well which cater

for the perfect services. Our hotels provide different types of rooms to make your stay a

relaxing, soothing and calming one. The restaurants provide different kinds

of food as chefs from different countries are all set to provide the best delicacies. Furthermore,

we have so many activities to make your holiday not only enjoyable,

but also a memorable one. These include scuba-diving, parasailing, glass-bottom, underwater-

walking and many other sports activities.

</p>

<p>Besides beaches, we have many other interesting places in Mauritius.</p>

<h4>Casela Bird Park</h4>

<p>

The Casela Bird Park is a nature and adventure park found in the south-west region of Mauritius.

There are many animals there and also we have a great natural view of

trees and waterfalls. Many activities can be carried out such as walking through the aviary, safari

tours, big cat viewing, giraffe viewing, camel viewing, petting farm,

and zip lines excursion.

</p>

<h4>Black River Gorges Natural Park</h4>

<p>

This is another nature park, also found in the south-west region of Mauritius. The aim of this

nature park is to protect our rainforest and endemic birds. People are

allowed to go for trekking there, enjoying the soothing, calming and relaxing atmosphere. Not to

forget, our beautiful mountain ranges which further add to the heavenly

nature of Mauritius.

</p>

<h4>Trou aux Cerfs</h4>

<p>

Trou aux Cerfs is a dormant volcano found in Mauritius. It is found in Curepipe. This well-

defined crater has been a tourist attraction since many years.

</p>

<h4>Port Louis</h4>

<p>

Then of course we have Port Louis, the capital of Mauritius. Le Caudan Waterfront is a

wonderful area to near the harbor surrounded by restaurants providing food of all

kinds. We also have many shopping areas which also promote the sale of unique souvenirs,

especially for tourists.

</p>

<h4>Bagatelle, Cascavelle and Grand Baie La Croisette</h4>

<p>

Bagatelle, Cascavelle and Grand Baie La Croisette are the three most popular shopping malls in

Mauritius, providing items of latest brands. These also cater for food

services by providing food courts where people can choose their choice of food and sit together

with their family and friends to have a good meal.

</p>

<p id="places"><strong>Well, let us now have a look at these interesting places in

pictures!</strong></p>

<div class="img"><img src="beach1.jpg" style="width: 300px;height:225px"></div>

<div class="img"><img src="beach3.png" style="width: 300px;height:225px"></div>

<div class="img"><img src="beach2.jpg" style="width: 300px;height:225px"></div>

<div class="img"><img src="casela1.jpg" style="width: 300px;height:225px"></div>






<div class="img"><img src="br4.png" style="width: 300px;height:225px"></div>

<div class="img"><img src="trou-aux-cerfs.png" style="width: 300px;height:225px"></div>

<div class="img"><img src="caudan1.png" style="width: 300px;height:225px"></div>



<div class="img"><img src="bagatelle.png" style="width: 300px;height:225px"></div>

<div class="img"><img src="bagatelle2.jpg" style="width: 300px;height:225px"></div>

<div class="img"><img src="cascavelle.jpg" style="width: 300px;height:225px"></div>

<div class="img"><img src="la croisette2.jpg" style="width: 300px;height:225px"></div>

<p>Thank you and feel free to share your views about our website.</p>

<form action="action_page.php">

<fieldset>

<legend>Personal information:</legend>

Name:<br>

<input type="text" name="firstname">

<br>

Comment:<br>

<input type="text" name="comment">

<br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</div>

</body>

</html>

External Style Sheet#places{

color: #00cc00;

}

p{

font-family:verdana;

color: #e60000;

}

h3{

color: #00cc00;

font-family:Tahoma;

font-size: 30px;

}

h4{

font-family:Tahoma;

font-size: 20px;

color:#ff6600;

}

table {

border: 1px solid black;

width: 100%;

}

th, td {


text-align: center;

padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

th {


background-color: #4CAF50;

color: white;

}

prishportfolio.weebly.comprishportfolio.weebly.com/.../8/0/8/7/80871828/assign1.docx · Web viewThe...

Documents

Transcript of prishportfolio.weebly.comprishportfolio.weebly.com/.../8/0/8/7/80871828/assign1.docx · Web viewThe...