Travel BROCHURE WEBSITE Project
Submitted on this date: Thursday, 23 February 2023
This assignment is due: Thursday, 6 April 2023
Embedded Files
Home > Class Projects> Travel Brochure Project
Travel Brochure Rubric
Travel Brochure Rubric
Travel Brochure 2024.pdfWhere to store the Travel Brochure website
Where to store the Travel Brochure website
Place your HTML and CSS files here: Dropbox\Class\Travel Brochure.
In-Class Presentations
In-Class Presentations
The w3schools.com original source of this example
My Travel Brochure website Resrvations page - in HTML and CSS markup
Need Help? Don't know where to start? Need a refresher on how to make a website?
Need Help? Don't know where to start? Need a refresher on how to make a website?
Check out this 30 minute video: HTML Tutorial - How to Make a Super Simple Website
Check out this walk-through that accompanies the video: Learn HTML by making this super simple website
Start with Basic HTML Markup
Start with Basic HTML Markup
Use this basic HTML markup to begin your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style>
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Header, Main, Aside, and Footer sections.
Header, Main, Aside, and Footer sections.
<!DOCTYPE html>
<html>
<head>
<!** https://www.w3schools.com/html/html5_semantic_elements.asp **>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>Visit Beautiful Washington DC</h1>
<p>Travel Website example</p>
</header>
<main>
<h1>Most Popular Locations</h1>
<p>More text</p>
</main>
<aside>
<h4>Destinations</h4>
<p>More text</p>
</aside>
<footer>
<p>Author: </p>
<p><a href="index.html">Back to the home page</a></p>
</footer>
</body>
</html>
Some useful links to get you started
Some useful links to get you started
Travel Brochure Ideas
Google Images - Travel Websites
Google Images - Travel Brochures
Useful tools
Common errors found by the markup validation service
Basic Website Construction
How TO - Make a Website from Scratch
The article "Some Advice to Help You Prepare Your Websites" You may find that useful for this project.
Navigation Menus - Chapter 5 (page 84)
Making Tables
Chapter 8 - Using Table generators
Chapter 8 - Using CSS to format several tables on one page
Positioning
Chapter 15 Positioning Information
Working with Height and Width
CSS Layout - Horizontal & Vertical Align
Working with Images
Responsive Web Design - Images
How TO - Responsive Image Grid
How TO - Image Grid using Javascript
Working with Background Images
CSS background-position Property
CSS background-repeat Property
Other tools
Example : Using a table for a website
Example : Using a table for a website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Travel Brochure</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
#red {
color: red;
}
</style>
</head>
<body>
<table>
<thead>
<tr style="background-color: green;">
<th colspan="3" style="vertical-align: top;"><p style="font-size: 60px;">My Travel Brochure</p><br>
<p>February 2023</p>
</th>
</tr>
</thead>
<tbody>
<tr style="background-color: pink;">
<td style="vertical-align: top; width: 25%;"><h1>The Cran-Raspberry Guy</h1>
<p>This video of a guy drinking <span id="red">cran-raspberry</span> went viral. He got a new truck compliments of Ocean Spray.</p>
</td>
<td colspan="2" style="width: 75%;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XKTY0nK6I4A" style="border:none;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</td>
</tr>
<tr style="background-color: blue;">
<td colspan="2" style="width: 75%;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/V1LhC1zGouc" style="border:none;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</td>
<td style="vertical-align: top;">
<h1>This is a Collection of Tic-Tok Copycat Videos of the Cran-Raspberry guy</h1>
<p>These videos are all viral.</p>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
HTML 5 Travel Brochure Project Part 1
HTML 5 Travel Brochure Project Part 2
HTML 5 Travel Brochure Project Part 3
HTML 5 Travel Brochure Project Part 4
HTML 5 and CSS Travel Brochure NavBar Part 1
HTML 5 and CSS Travel Brochure NavBar Part 2
Older Versions of these videos
Older Versions of these videos
Travel Brochure Project - Introduction
Travel Brochure Project - Part 1
Travel Brochure Project - Part 2
Report abuse