Guidelines for building your own website
Today we are going to set up a multi-page website using HTML and CSS. The website will have a navigation menu for switching between the different pages. Here is an example website to refer to:
Click here to open the example website
Use the example website as a guideline for laying out your website but do not copy it directly – instead build your own website about whatever topic you have picked to make a website about. You can use Trinket or Notepad or another text/code editor to write the code for your website.
Website file structure
You will see that the example website has 3 separate pages. The file names of these pages are index.html, about.html and contact.html. There is a stylesheet, style.css and an image folder containing all the images that appear on the pages. There is also a special icon image file, faveicon16.png, that is used as an icon for the website.
We will introduce some new HTML tags called semantic tags. In the past div tags were used to apply styling to different areas of the document but HTML5 introduced some new semantic tags that give the document structure more meaning. The semantic tags you will see in this example are:
<header>– this is used for the header of a web page or can be used for the header of a section within the web page<nav>– this is used for marking up a navigation menu<main>– this is used to mark up the main part of the web page<footer>– this is used to mark up the web page footer or footer of a section within the web page
Web page layout
The example website uses a typical basic page layout:
You can use a similar layout for your website or you can adapt it to suit the needs of your website.
index.html – the website start page (home page)
Inside the <head>, you should have at least a <title> tag with the title of your website and a link tag that specifies the stylesheet document. In this example we also have a <link> tag that defines a website icon (you can see the website icon on the tab in the browser).
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML5 Layout</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon16.png" sizes="16x16">
</head>
Inside the <body> tag we will use a <header> tag for the website header which in this case, contains the website logo and navigation menu. The navigation menu is contained inside <nav> tags and also uses an unordered list with each list item containing links to the pages of the website. Note that we have added a class called “current” to one of the links in the menu so that we can attach a special style to the menu item that is currently open.
<body>
<header>
<div class="contents">
<img id="logo" src="images/logo.png" width="200" height="200" alt="CoderDojo" title="CoderDojo">
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
Next we have a <main> tag that is used to contain the main content of the page. Note the src (source) attribute for the img (image) tags starts with “images/…” – this is because our images are in a folder called ‘images’. Also note the target="_blank" attributes in the links that go to external websites – this causes those links to open up in new tabs.
<main>
<div class="contents">
<img src="images/coderdojo-home.png" alt="CoderDojo - The global network of code clubs for kids">
<h1>Welcome to CoderDojo Nelson</h1>
<p><a href="http://www.coderdojo.com" target="_blank">CoderDojo</a> is a worldwide network of independent, volunteer led programming clubs for young people.
CoderDojo Nelson meets at NMIT, Nelson on Wednesday evenings from 6:30 to 8pm. CoderDojo Nelson is also affiliated with <a href="http://www.codeclub.nz" target="_blank">Code Club Aotearoa</a>.</p>
<p><img class="aligncenter" src="images/photo1.jpg" alt="CoderDojo" width="640" height="480"></a></p>
<hr>
<h2>Some of the Technologies & Learning Resources we use</h2>
<p>
<a href="http://code.org" target="_blank"><img src="images/code-logo.png" alt="Code.org" width="200" height="100"></a>
<a href="https://scratch.mit.edu/" target="_blank"><img src="images/Scratch_Logo.png" alt="Scratch" width="200" height="100"></a>
<a href="https://www.cs-first.com/"><img src="images/google-cs-first.png" alt="Google CS First" width="200" height="100"></a>
<a href="https://www.codecademy.com/" target="_blank"><img src="images/logo_codecademp.png" alt="Codecademy" width="200" height="100"></a>
<a href="https://www.raspberrypi.org/" target="_blank"><img src="images/raspberry-logo.png" alt="Raspberry Pi" width="200" height="100"></a>
<a href="https://www.arduino.cc/" target="_blank"><img src="images/logo-arduino.png" alt="Arduino" width="200" height="100"></a>
<a href="https://www.khanacademy.org/" target="_blank"><img src="images/Khan_Academy_logo.png" alt="Khan Aacademy" width="200" height="100"></a>
</p>
</div>
</main>
Finally we have a <footer> tag that is used to contain the website footer – just some copyright information in this example. Notice the code © inside the footer. This is called a HTML entity and is a special code used to generate special characters, in this case a copyright symbol – ©. Some other examples of HTML entities are:
&– ampersand (&)<– less than (<)™– trademark (™)¼– 1 quarter fraction (¼)
<footer>
Copyright © 2017. All rights reserved.
</footer>
</body>
</html>
style.css – Our website stylesheet
Now let’s review the CSS for this example website.
It is good practice to start our stylesheet with some comments:
/*
Example basic website for CoderDojo
By Aidan Curran, CoderDojo Nelson
*/
The main font we are using is applied to the body tag. We add some styling such as a background colour to our website header:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
header {
padding: 10px;
background-color: #7C10C2;
border-bottom: 10px solid #FCA500;
}
Now we add styling for the navigation menu. Since the menu links are contained in an unordered list we have to make the list display in-line (instead of each item on a new line). We add some text colour, background colour and padding to make the menu links look like buttons. We use the .current class selector to make the current page item a different background colour and use the :hover selector to give the buttons a different colour when you hover over them with the mouse cursor.
nav {
text-align: center;
}
nav ul li {
display: inline; /* this puts the list items side by side instead of each on a new line */
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
}
nav ul li a {
color: white;
text-decoration: none; /* this removes the underline that usually appears under linked text */
padding: 5px 20px;
}
nav ul li a.current { /* .current is a class selector that selects the a tags in the navigation menu with class="current" */
background-color: #3FB842;
}
nav ul li a:hover { /* The :hover selector is used to select elements when you mouse over them */
background-color: #0092D4;
}
Add some white space at the bottom of the page:
main {
padding-bottom: 50px;
}
We are using a div tag with the class “contents” to control the width of the content. Setting the margin to auto on the right and left sides cause the div element to be centred.
div.contents {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
This will prevent large images from extending outside the boundary of the page contents:
img {
max-width: 100%;
}
Add some colour and spacing to our headings:
h1 {
color: #7D10C2;
margin-top: 40px;
}
h2 {
color: #0092D4;
}
Some styling for our hr tags – horizontal rule (horizontal divider lines):
hr {
border-bottom: 1px solid #0091D5;
margin: 50px 0;
height: 0;
color: transparent;
}
A few style rules for the website footer:
footer {
border-top: 1px solid #FCA500;
padding:20px;
text-align:center;
}
Adding other pages to our website
You can copy the index.html file to use as a starting point to make your other pages. Just change the contents of the page and move the class=”current” to the menu link that matches the page.
Upload the website files to your hosting space
Once you have the website ready, upload the files to the hosting space that you set up last week. To do this, log in to your hosting control panel and go to the file manager.