Page layout
At Higher level, you must understand the layout of a webpage.
Elements in the Higher course are:
<nav><header><footer><section><main>
A page layout could look like this:
A <header> element will show the website banner. This will often include a title and logo. That logo is usually a hyperlink to the home page.
A <nav> element will contain navigation links.
The<main>element will contain page content. E.g. text, graphics, sound and video.
The <footer> element will contain information about the webpage/website. Usually contact details, social media links and legal documentation.
This example site shows these sections of HTML.
The code for the webpage above:
<html><head><style>body {width:700px};nav ul {list-style-type:none;}nav ul li {float:left; width:100px; text-align:center}nav ul li a {display:block}nav ul li a:hover {background-color:blue;color:white}main {background-color:lightblue}footer {background-color:green;color:white}/<style>/<head><body><h1>Higher HTML Example/<h1><head>...</head><nav><ul><li><a href="home.html">±«Óătv</a></li><li><a href="news.html">News</a></li><li><a href="weather.html">Weather</a></li><li><a href="bitesize.html">Bitesize</a></li><li><a href="sport.html">Sport</a></li><ul><nav><br><main><p>This is the content in the <main> tags, we will divide this content with <div> or <section> tags in the next page.
Above this <main> element there is the <nav> element. Please see the code block below to illustrate that.
The different sections of the webpage have been given different colours in CSS to make the sections of the webpage more clear. </p></main></footer>This section of the webpage is the <footer>, general information and legal documents should go here.</footer></body></html>