Explore

Project Interstellar Travel Adventures - Website Structure

Interstellar Travel Adventures - Space tourism economy class.

⁠

Project Interstellar Travel Adventures - Website Structure Lab Exercise

Introduction

Welcome to this engaging lab exercise in web development! In this project, you'll step into the role of a web designer for "Interstellar Travel Adventures," a fictional space tourism company offering economy-class galactic cruises to the western spiral arm of the Milky Way.

The website you'll build promotes tours to key destinations in our Sol System, including Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, the Asteroid Belt, and even a nod to Pluto.

Each planetary page will highlight attractions, weather, seasons, eco-tourism opportunities, local commerce, culture, dining, leisure activities, and arts/entertainment— all with a fun, futuristic twist.

A word of caution from the client: Inexperienced travelers should steer clear of Earth, as locals there have a strange aversion to off-worlders (or as they call them, "space aliens")! This project is designed to be both educational and entertaining, helping you master the fundamentals of HTML structure while tying in CSS for styling and preparing the ground for JavaScript interactions.

For assignments, you cannot use AI to create code but you CAN use AI to generate images and narrative text such as descriptions of planets.

Learning Objectives

By the end of this lab, you will be able to:

Identify and implement two types of HTML nodes: content tags (e.g., h1-h6, p, img, table) and structural tags (e.g., section, div, article, aside) to organize web content semantically.

Connect CSS styles and (future) JavaScript to DOM nodes using selectors like HTML tag names, IDs, and classes.

Create hyperlinks between pages using the <a href> element for seamless navigation.

Use common structural elements like <header>, <nav>, and <footer> to ensure consistent site-wide appearance and functionality.

Lab Tasks

Create the Website Structure: Build a set of interconnected HTML pages starting with the home page (index.html) and individual destination pages (e.g., mercury.html, venus.html, etc.). Ensure each page uses semantic HTML elements to structure content logically.

Incorporate Common Elements: Every page must include:

A <header> with the site logo and main navigation.

A <nav> section (inside the header) with links to all planetary pages.

A <footer> with copyright and contact info.

Additional elements like <article>, <section>, <aside>, <figure>, <figcaption>, and <main> for organizing content.

Apply Styling with CSS: Link an external styles.css file to all pages (include it in the <head> of each HTML file). Use the provided CSS code as a starting point, which includes resets, body styling, header backgrounds (e.g., #003366 for a space-themed blue), navigation lists, and responsive main content. Customize as needed to enhance the interstellar theme.

Home Page Details (index.html):

Title: "Out of This World Tours: Solar System Edition."

Include a sponsor section for "Quantum Fizz Cola" (the official energy drink for galactic explorers) with a blue background and border. They are paying for this campaign!

Feature sections for each planet with humorous descriptions (e.g., Mercury's "hot spots" or Venus's "steamy nightlife") and hyperlinks to their respective pages. Mention the sponsor in each section for branding fun.

Destination Pages: For each planet (and the Asteroid Belt/Pluto), create dedicated pages with sections on attractions, weather, eco-tourism, etc. Use classes like .planet or .sponsor for styling, and ensure navigation links highlight the active page (e.g., via .active class).

Testing and Reflection: Test all hyperlinks and styling across pages. Submit a short reflection (1-2 paragraphs) on what you learned about HTML semantics and CSS selectors, plus any challenges faced.

Resources

Provided CSS Sample: (Included in the PDF for copy-pasting—basic reset and styling for body, header, nav, main, section, and footer.)

Image: Use the retro spaceship illustration from the PDF as a header or background element (download and insert via <img>).

Tools: Edit in any code editor (e.g., VS Code). For AI assistance, upload to Google Drive and use Gemini to generate ideas, debug code, or suggest improvements.

Reference: Review the full Coda document for exact HTML skeletons and examples.

This project combines creativity with technical skills—think of it as your ticket to the stars! If you have questions, post in the discussion forum or email me. Can't wait to see your cosmic websites! 🚀

Lab Exercise:

Write a set of html pages which demonstrates the major HTML structural elements.

Learning outcomes for this Lab:

HTML NODES (tags) can 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

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:

⁠

<!DOCTYPE html>

<head>

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

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

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

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

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

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

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

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

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

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

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.