Share
Explore

Project Interstellar Travel Adventures - Website Structure


Lab Exercise:

Write a set of html pages which demonstrates the major HTML structural elements.
Learning outcomes for this Lab:
HTML NODES (tags) call be of two types:
Content tags (semantic tags) ( h(1 to 6), note, p, img, table )
Structural tags : organize the content on the page like shelves in a book shelf: - section - div - article - aside
To connect CSS and JavaScript to a DOM node, 3 types of selectors:
html tag name
ID
class

Let's make a cluster of pages to demonstrate
‘a href’ hyper linking between various pages, and
using structural elements like nav, header, and footer to maintain site consistent look, feel, and navigation:
header, footer, and nav elements.
We are writing this website for our client, a Company is called Interstellar Travel Adventures.

They have just taken a client who wants to run galactic cruises to the western spiral arm of the Milky Way Galaxy.

Our website will be a set of pages which presents 1 page for each Planet in the Sol System including Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune and of course the Asteroid Belt where tourists can enjoy asteroid surfing.

Let's include content in our pages to cover the major attractions of each planet, its weather and seasons, eco-tourism, local commerce and culture, dining, leisure activities, arts and entertainment.
Let's put a funny warning that inexperienced travelers may wish to avoid Earth as people there act very strangely to off-worlders or what they call 'space aliens'

Project: Interstellar Travel Adventures - Website Structure

This project will involve the creation of a website for "Interstellar Travel Adventures," a company offering galactic cruises to the western spiral arm of the Milky Way Galaxy.
Each page will detail a specific celestial body within the Sol System, including Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, and the Asteroid Belt.
Each page will consistently use HTML5 structural elements to ensure semantic clarity and navigational ease.

Common Elements Across All Pages

Each page will have:
A <header> section containing the site's logo and main navigation.
A <nav> section embedded within the header for site-wide navigation links.
A <footer> section containing copyright and contact information.
Use of <article>, <section>, <aside>, <figure>, <figcaption>, and <main> elements where appropriate to structure the content semantically.

CSS for All Planet Pages (styles.css)

Usage Instructions

Link the CSS File: Make sure the styles.css file is linked in the <head> of each HTML document for consistent styling.
Customization: Feel free to adjust the CSS for specific needs or preferences across different planet pages
/* Basic reset */
body, h1, h2, h3, p, ul {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #F4F4F9;
color: #333;
}

header {
background: #003366;
color: #FFF;
padding: 10px 20px;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav a.active, nav a:hover {
text-decoration: underline;
}

main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

section {
margin-bottom: 20px;
}

footer {
text-align: center;
margin-top: 20px;
color: #666;
}


Website Layout and Pages

Home Page (index.html):
Introduction to Interstellar Travel Adventures.
Brief overview of destinations with links to detailed pages.
Navigation links to each planetary page.
Destination Pages:
One page for each destination: mercury.html, venus.html, earth.html, mars.html, jupiter.html, saturn.html, uranus.html, neptune.html, and asteroid-belt.html.
Each page will feature:
An <article> describing major attractions, local commerce, and culture.
<section> tags to divide the content into weather and seasons, eco-tourism, and local culture.
<aside> for quick facts or trivia.
<figure> and <figcaption> for images of the destination.
Humorous warnings or interesting facts using <mark> for emphasis.
CSS and JavaScript:
Consistent styling across all pages for headers, footers, and navigation elements.
JavaScript for interactive elements like image sliders or warning pop-ups.

Example Structure for earth.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Earth - Interstellar Travel Adventures</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interstellar Travel Adventures</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mercury.html">Mercury</a>
</li>
<li><a href="venus.html">Venus</a></li>
<li><a href="earth.html">Earth</a></li>
<li><a href="mars.html">Mars</a></li>
<li><a href="jupiter.html">Jupiter</a></li>
<li><a href="saturn.html">Saturn</a></li>
<li><a href="uranus.html">Uranus</a></li>
<li><a href="neptune.html">Neptune</a></li>
<li><a href="asteroid-belt.html">Asteroid Belt</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2>Welcome to Earth</h2>
<p><mark>Warning:</mark> Inexperienced travelers may wish to avoid Earth as locals display peculiar behaviors towards 'space aliens'.</p>
<section>
<h3>Major Attractions</h3>
<p>Explore the diverse ecosystems and cultural heritage spanning continents.</p>
</section>
<section>
<h3>Weather and Seasons</h3>
<p>Experience a range from subzero arctic climates to tropical paradises.</p>
</section>
<figure>
<img src="earth.jpg" alt="View of Earth from space">
<figcaption>Earth as seen from orbit</figcaption>
</figure>
</article>
</main>

<footer>
<p>&copy; 2024 Interstellar Travel Adventures. All rights reserved.</p>
</footer>
</body>
</html>

Notes:

Each page should follow a similar structure, adjusted for the specific content of each celestial body.
Images, video content, and other media can greatly enhance the appeal and informational value of each page.
Humorous elements should be balanced with informative content to maintain professionalism while keeping the site engaging.
This structure will create a comprehensive, engaging, and informative website that not only educates potential travelers about each destination but also provides a consistent and easy-to-navigate experience.

megaphone

Write the web page for Mercury featuring information about its climate, culture, local customs, cultural attractions and dining, unique attractions, and eco tourism.


Here's a complete web page dedicated to Mercury, designed as part of the "Interstellar Travel Adventures" website.
This page includes information about Mercury's climate, culture, local customs, cultural attractions, dining options, unique attractions, and eco-tourism opportunities.
The HTML is structured with semantic tags to enhance accessibility and search engine optimization.

HTML for Mercury Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mercury - Interstellar Travel Adventures</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interstellar Travel Adventures</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="venus.html">Venus</a></li>
<li><a href="earth.html">Earth</a></li>
<li><a href="mars.html">Mars</a></li>
<li><a href="jupiter.html">Jupiter</a></li>
<li><a href="saturn.html">Saturn</a></li>
<li><a href="uranus.html">Uranus</a></li>
<li><a href="neptune.html">Neptune</a></li>
<li><a href="asteroid-belt.html">Asteroid Belt</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2>Welcome to Mercury</h2>
<p><strong>Discover the Swiftness of Mercury: The Solar System’s Speedster!</strong></p>
<section>
<h3>Climate</h3>
<p>Mercury’s extreme temperatures are a fascination for many. With no atmosphere to retain heat, temperatures can drop to -180°C at night and soar to 430°C during the day. Perfect for those who love experiencing the extremes of space weather!</p>
</section>
<section>
<h3>Culture and Local Customs</h3>
<p>While Mercury doesn’t host an indigenous population, the various research stations populated by scientists from across the galaxy have developed a unique subculture of their own. Expect a blend of scientific rigor with a passion for solar phenomena.</p>
</section>
<section>
<h3>Cultural Attractions and Dining</h3>
<p>Enjoy a visit to the Mercury Lounge, a dining hall that offers panoramic views of the Caloris Basin. The lounge serves a variety of dishes prepared by our robotic chefs, featuring ingredients sourced from across the solar system.</p>
</section>
<section>
<h3>Unique Attractions</h3>
<p>Mercury is home to the Great Valley, one of the largest fault systems in the Solar System. Stretching over 1,000 kilometers, it’s a sight not to be missed. Take a rover tour to explore this and other geological wonders.</p>
</section>
<section>
<h3>Eco-Tourism</h3>
<p>While traditional eco-tourism isn’t applicable, Mercury offers 'geo-tourism' which focuses on the preservation of its unique geological features. Programs include guided tours to lesser-known yet significant craters and terrain formations.</p>
</section>
<figure>
<img src="mercury.jpg" alt="The surface of Mercury">
<figcaption>The rugged landscape of Mercury, viewed from a high altitude.</figcaption>
</figure>
</article>
</main>

<footer>
<p>&copy; 2024 Interstellar Travel Adventures. All rights reserved.</p>
</footer>
</body>
</html>

Key Features of the Mercury Page:

Header and Navigation: Consistent with the rest of the site for seamless user experience.
Main Article: Detailed sections about different aspects of visiting Mercury, using semantic HTML5 tags for clarity and structure.
Styling: While the CSS link is referenced, the actual styles would be defined in the external styles.css file to maintain consistency across the site.
Images and Captions: Includes a descriptive image of Mercury’s surface to enhance the visual appeal and engagement of the page.
This webpage provides an immersive, informative, and visually appealing introduction to Mercury, catering to both adventure seekers and scientific minds interested in the unique conditions and features of the closest planet to the Sun.

error

Write the web page for Venus featuring information about its climate, culture, local customs, cultural attractions and dining, unique attractions, and eco tourism.

Use CSS and put the CSS into a separate styles.css file. We will reuse this same file for the rest of the planets.


For the Venus page of the "Interstellar Travel Adventures" website, here's how you can organize the HTML and a suggested external CSS file (styles.css) that can be reused for the other planetary pages. The CSS will ensure a consistent look and feel across all pages, enhancing the user experience while visiting each page dedicated to the different planets.

HTML for Venus Page (venus.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Venus - Interstellar Travel Adventures</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interstellar Travel Adventures</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mercury.html">Mercury</a></li>
<li><a href="venus.html" class="active">Venus</a></li>
<li><a href="earth.html">Earth</a></li>
<!-- Add other planets similarly -->
</ul>
</nav>
</header>

<main>
<h2>Welcome to Venus</h2>
<section>
<h3>Climate</h3>
<p>Venus experiences severe greenhouse effects, making it one of the hottest planets in our solar system with surface temperatures stable at around 462 degrees Celsius (864 degrees Fahrenheit). Its dense CO2 atmosphere creates intense heat and pressure that are challenging for typical space gear.</p>
</section>
<section>
<h3>Culture and Customs</h3>
<p>While Venus itself does not support life as we know it, our human-made habitats floating above its clouds are a hub for astrobiologists, chemists, and storm chasers. The culture here is heavily centered around research and discovery.</p>
</section>
<section>
<h3>Dining and Cultural Attractions</h3>
<p>Try the 'High Cloud' cafe, which offers a zero-gravity dining experience while you observe the turbulent atmosphere below through reinforced viewports. Enjoy a variety of galaxy-famous dishes prepared under extreme pressures.</p>
</section>
<section>
<h3>Unique Attractions</h3>
<p>Experience a hover ride through the upper clouds of Venus, where you can witness electric blue waves of light caused by the planet's intense lightning storms—a phenomenon nowhere else to be seen in the Solar System.</p>
</section>
<section>
<h3>Eco-Tourism</h3>
<p>Join our efforts to study and preserve the delicate upper atmosphere of Venus. Participate in guided tours to collect samples and learn about our ongoing research to potentially terraform and reduce the planet's surface temperatures.</p>
</section>
</main>

<footer>
<p>© 2024 Interstellar Travel Adventures. All rights reserved.</p>
</footer>
</body>
</html>



minus

Below is the HTML content for a web page dedicated to Mars, utilizing the shared CSS styles outlined previously.

This page provides detailed information about Mars' climate, culture, local customs, cultural attractions, dining options, unique attractions, and eco-tourism opportunities.

HTML for Mars Page (mars.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mars - Interstellar Travel Adventures</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interstellar Travel Adventures</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mercury.html">Mercury</a></li>
<li><a href="venus.html">Venus</a></li>
<li><a href="mars.html" class="active">Mars</a></li>
<li><a href="jupiter.html">Jupiter</a></li>
<li><a href="saturn.html">Saturn</a></li>
<li><a href="uranus.html">Uranus</a></li>
<li><a href="neptune.html">Neptune</a></li>
<li><a href="asteroid-belt.html">Asteroid Belt</a></li>
</ul>
</nav>
</header>

<main>
<h2>Welcome to Mars</h2>
<section>
<h3>Climate</h3>
<p>Mars is known for its thin atmosphere and desert-like climate where temperatures can vary wildly from -125 degrees Fahrenheit at night to 70 degrees Fahrenheit during the day. Dust storms are common and can encompass the entire planet for weeks.</p>
</section>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.