Learning Goals
At the end of this Tutorial, you will be able to:
- Understand the differences between a wireframe and a prototype, as those terms are used in front-end design.
- List and describe the main semantic ‘container’ tags used in modern web design (HTML5 and CSS3).
Wireframes and prototypes
In web design, creating wireframes and prototypes are commonly the first steps in developing a user interface for a project. Their purpose is to establish the basic structure of a page before coding begins.
About wireframes
Wireframes are referred to as low-fidelity, as they are just rough sketches often drawn by hand.
A number of software products exist to support the creation and sharing of wireframes. One such as BalsamicIQ.
About prototypes
In contrast, a prototype is a high-fidelity mockup of a web page. Typically, it contains various assets such as images and videos, final text, and 'clickable' interactive elements such as buttons and forms.
A popular software product for prototyping user interfaces is Figma.
Semantic web page layout
In a previous Tutorial you learnt that the simplest possible HTML file has two main parts – the <head> and <body> – and looks as shown below.
Modern web design (HTML5 and CSS3) uses a number of so-called semantic tags for the content within the <body> of a web page.
- Unlike tags such as <h1, <h2 and <p, semantic tags have no default style values. For example, they do not change the size, appearance of space around text.
- The purpose of semantic tags is not to style web page content but to structure or organise it into what are sometimes called containers.
The four major semantic tags are listed below.
- <nav>
- <header>
- <main>
- <footer>
All four tags are placed within the <body> ... </body> of a web page.
The <nav> tag
This is intended to hold navigation elements. It is most commonly used to contain the menu of hyperlinks at the top of a web page.
Visual designers refer to this list of menu options as the navbar.
The <header> tag
This is generally positioned under the <nav> element at the top of a web page, and usually contains the <h1> heading and some introductory text.
Visual designers refer to this part of a web page as the hero block.
The <main> tag
This is intended to hold the primary content of a web page. In simple terms, this means any content is that should not be in the <nav>, <header> or <footer> elements.
The <footer> tag
Typically located at the bottom of a web page, this contains such content as the organisation’s details, legal information, and links to related web pages.
About <section> tags and the <main> tag
In web pages with a simple structure, all the content is placed directly inside the <main> block.
Most modern pages, however use a number of different layouts for the content within the <main> block. These different blocks of content are divided by using another semantic or ‘container’ tag called <section>
See the example below that has four <main> blocks within its <main> tag.
Creating your second web page
You will now create a second web page. This will have one <main> tag and six <section> tags.
- In VS Code, choose the File | New Text File command.
- Choose the File | Save As... command, and save your file in the 📁 exercises sub-folder of your 📁 websites folder with this name: page-2.html
- Your folder and file structure should look as shown below.
- In VS Code, click anywhere in your empty web page and type the exclamation mark ! (Shift key and number 1 key).
After one or a few seconds, the Emmet Abbreviation menu appears. Click on the first option from the menu. Or press the Enter key.
VS Code now fills your new file with the basic HTML structure.
- To make your web page easier to read and edit, add some blank lines after the closing </head> tag and before the opening <body> tag.
Click just before the <body> tag and press the Enter key one, two or three times.
When you look at the HTML of your web page on the VS Code screen, you can now see visually ‘at a glance‘ where the <head> ends and the <body> begins.
- Update the <head> of your new web page with the following details.
<title>Sample web page with sections</title> <meta name="description" content="A sample web page with multiple sections.">
- Open the style-1.css stylesheet file, and save it with the new name of style-2.css.
- In the <head> of the page-2.html file, just before the closing </head> tag, press the Enter key to open a new, blank line, and then copy-and-paste the following stylesheet link on this new line.
<link rel="stylesheet" href="assets/css/style-2.css">
- When finished, save your HTML file.
Adding <main> and <section> tags
Your next task is to add semantic tags, formatting tags and text content to your page-2.html web page.
- In the page-2.html file, after the opening <body> tag add the following semantic tags:
<main> <section> <h2>Nice section heading</h2> <p></p> <p></p> </section> </main> - Click inside the first pair of empty <p> ... </p> tags.
- Type the word “lorem" (without quotes).
- When the Emmet Abbreviation menu appears after one or two seconds, click on it or press the Enter key.
VS Code now creates 30 words of Lorem Ipsum placeholder text.
Note that you can change the number of words of Lorem Ipsum that are generated by typing a number after the word “lorem". For example:
lorem40 or lorem12 - Repeat this step for the second empty paragraph.
- Select the <section> block, and copy it five times down the page.
- At the end of the file, just before the closing </body> tag, enter the following line.
<p><a href="../index.html">Back to Home page</a></p>
- When finished,save your page-2.html web page file.
- Open your home index.html web page, and add the following hyperlink. and save the file:
<p><a href="exercises/page-2.html">Web page with sections</a></p>
✅ You have now finished working with your second sample web page.
Uploading your files to GitHub
After completing your web pages and stylesheets, your next step is to upload them to your account on GitHub.
- Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
- On your GitHub home page, click the name of the repository (‘repo’) that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.
username.github.io
- On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
- From the dropdown list displayed, choose the option Upload files.
- In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 assets and 📁 exercises sub-folders to upload them to your repository on GitHub.
- Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
- Finally, click the green Commit changes button to upload your entire exercises sub-folder and all the files it contains.
Your web pages are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:
https://username.github.io/index.html
https://username.github.io/exercises/page-1.html
https://username.github.io/exercises/page-2.html
It may take a few minutes for your uploaded files to appear on GitHub.