Gallery
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)

CSS works by:
Selectors
Rules

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.

index.html


Challenge: get this image into your Web page:
⁠
image.png
⁠
⁠
megaphone

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Out of This World Tours: Solar System Edition</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #0066cc;
text-align: center;
}
.planet {
background-color: white;
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.planet h2 {
color: #0099ff;
}
a {
color: #ff6600;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.sponsor {
background-color: #e6f7ff;
border: 2px solid #0099ff;
border-radius: 10px;
padding: 10px;
margin: 20px 0;
text-align: center;
font-style: italic;
}
.quantum-fizz {
color: #0099ff;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Out of This World Tours: Solar System Edition</h1>
<div class="sponsor">
<p>These interplanetary adventures are powered by <span class="quantum-fizz">Quantum Fizz Cola</span> - the preferred energy drink of galactic explorers across the cosmos. <span class="quantum-fizz">Quantum Fizz Cola</span>: Getting you going faster than the speed of light!</p>
</div>

<div class="planet">
<h2>Mercury</h2>
<p>Tired of your face melting off? Visit Mercury, where it happens in style! <a href="mercury.html">Book your trip to the sun's closest buddy</a>. Don't forget to pack your <span class="quantum-fizz">Quantum Fizz Cola</span> - it's the only thing that stays cool on this hot planet!</p>
</div>

<div class="planet">
<h2>Venus</h2>
<p>Looking for a hot date? Venus is single and ready to mingle! <a href="venus.html">Swipe right on the goddess of love</a>. Pro tip: A cold <span class="quantum-fizz">Quantum Fizz</span> is the perfect icebreaker in Venus's sizzling atmosphere.</p>
</div>

<div class="planet">
<h2>Earth</h2>
<p>The ol' reliable. When you're done with your cosmic tour, <a href="earth.html">come back to where the Wi-Fi is strong and the oxygen is free</a>. And where <span class="quantum-fizz">Quantum Fizz Cola</span> is always in stock!</p>
</div>

<div class="planet">
<h2>Mars</h2>
<p>Red plains, epic dust storms, and a chance to say "I was here before Elon!" <a href="mars.html">Reserve your spot on the Red Planet</a>. Fun fact: The first words spoken on Mars were "One small step for man, one giant sip of <span class="quantum-fizz">Quantum Fizz</span>."</p>
</div>

<div class="planet">
<h2>Jupiter</h2>
<p>Gas giant? More like gas PARTY! Join the biggest bash in the solar system. <a href="jupiter.html">RSVP to Jupiter's never-ending storm soiree</a>. Mix your <span class="quantum-fizz">Quantum Fizz</span> with Jupiter's swirling gases for an out-of-this-world cocktail!</p>
</div>

<div class="planet">
<h2>Saturn</h2>
<p>If you like it, then you should've put a ring on it. Saturn did! <a href="saturn.html">Cruise the most stylish rings this side of the asteroid belt</a>. Watch the sunset through the rings while sipping on a <span class="quantum-fizz">Quantum Fizz Cosmic Cooler</span>.</p>
</div>

<div class="planet">
<h2>Uranus</h2>
<p>The butt of all cosmic jokes. Come see what the fuss is about! <a href="uranus.html">Explore the tilted world of Uranus</a> (no giggling, please). Bring <span class="quantum-fizz">Quantum Fizz</span> - it's the only thing that can straighten out this tilted planet!</p>
</div>

<div class="planet">
<h2>Neptune</h2>
<p>Blue is the new black. Experience the windiest, wildest, and bluest planet in the hood. <a href="neptune.html">Dive into Neptune's azure mysteries</a>. Our travel tip: <span class="quantum-fizz">Quantum Fizz</span> cans double as excellent wind chimes in Neptune's supersonic winds!</p>
</div>

<div class="planet">
<h2>Pluto</h2>
<p>Not a planet? Says who? Show some love to the ultimate underdog. <a href="pluto.html">Visit Pluto and its entire entourage of moons</a>. Bonus: In Pluto's low gravity, you can shot-put a <span class="quantum-fizz">Quantum Fizz</span> can into orbit!</p>
</div>

<div class="sponsor">
<p>Remember, no matter where you go in the solar system, <span class="quantum-fizz">Quantum Fizz Cola</span> is your trusty co-pilot. It's not just an energy drink, it's rocket fuel for your adventures!</p>
</div>

</body>
</html>
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.
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.