Gallery
Share
Explore

Project Interstellar Travel Adventures - Website Structure

Interstellar Travel Adventures - Space tourism economy class.

⁠
image.png
⁠
⁠

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>
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.