Page Body
Now you can start to make changes to the <body> of the page but before you do lets learn a little bit about it.
The body is the part of a webpage that people will see displayed and is split into 3 main areas:
<header>
This is usually where you will find the website title, company name, logo and main page navigation
<main>
Where the majority of the pages content will be placed, you can see we have filled it with a selection of commonly used html elements <h2> & <h3> headings (headings must follow in numerical order), <p> paragraphs, <ul> unordered lists with <li> list items, <blockquote> I have added styling to the
blockquote in the CSS, <em> emphasised text, <img> images and <details> with <summary> which provides you a summary of text with an expanding/closing box with further text.
In addition to these are <div> these are empty tags that we have then added class names to e.g <div class="panel_full"> class names are then selected in the CSS file where we add CSS properties to them that then control how that div and its contents act and look.
<div class="panel_full"> makes the div full width of the screen and centers its contents e.g the text_panel giving us a one column flowing webpage.
<div class="text_panel"> controls the width and direction of it's content and where you need to add all your paragraphs, headings etc...
<h3 class="second_font"> this allows you to add a second font style this class can be added to any heading or paragraph if you wish to.
<div class="img_panel_full"> this is a mini image gallery CSS flex properties control the direction, spacing and the wrapping of the images.
<footer>
Typically where you find the copyright, contact details, social links and additional page navigation.
Changing Contents
Now that you have a little understanding of the elements that make up the <body> of our template webpage we can begin changing the contents, starting with the <header> section on the next page.
Page Last Edited: