WEBSITE Project AIDS
Some information to help you make a website
Embedded Files
Home > Class Projects> Website Project Aids
W3schools.com class examples
W3schools.com class examples
Display an Image as the Submit button
How to align images side by side
Float images to the right or left ==> Pages 388-389
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>
Examples of a Two Column Layout using Floats and Flexbox - 10 February 2025
Examples of a Two Column Layout using Floats and Flexbox - 10 February 2025
Floats Example
Floats Example
<style>
.container {
display: flex;
/* or display: inline-flex; if you want the container to shrink-wrap its content */
}
.column {
width: 49%;
padding: 20px; /* Add some padding for spacing */
margin: 0px;
height: 100px;
border: 4px solid #ccc; /* Optional border for visualization */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
font-size: 30px;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix::after { /* Clearfix to prevent collapsing container */
content: "";
display: table;
clear: both;
</style>
<div class="container">
<div class="column left">Column 1 content</div>
<div class="column right">Column 2 content</div>
<div class="clearfix"></div>
</div>
Flexbox Example
Flexbox Example
<style>
.container {
display: flex;
/* or display: inline-flex; if you want the container to shrink-wrap its content */
}
.column {
flex: 1; /* This makes the columns take equal width */
padding: 20px; /* Add some padding for spacing */
margin: 5px;
height: 100px;
border: 4px solid #ccc; /* Optional border for visualization */
font-size: 30px;
}
/* Optional: if you want one column to be wider, use flex-basis or a specific width: */
.column.wider {
flex-basis: 60%; /* Or width: 60%; */
</style>
<body>
<div class="container">
<div class="column">Column 1 content</div>
<div class="column">Column 2 content</div>
</div>
</body>
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 Website</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 Website</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>
Report abuse