This assignment introduces the following elements & concepts. You should use every one of these elements in order to complete the assignment.
<nav>
- internal linking
- placeholder images
index.html
Create the following webpages in the colors
project. For each of these 3 pages, use the Templates extension to create a simple HTML5 page. That is the only content you need to have on these 3 pages at this time.
primary.html
(<title>
isPrimary :: Colors
)secondary.html
(<title>
isSecondary :: Colors
)tertiary-01.html
(<title>
isTertiary :: Colors
)
OK, now for the main part of the assignment.
Create a new file in your colors
project: index-01.html
Reproduce this webpage index-01.html
: Index No. 1.
The <title>
is Colors
.
The numbered list at the top is actually going to be the main navigation on the website, so indicate that accordingly.
In that navigation, the word “Chartreuse” always links to the latest version of your Chartreuse page.
Use the Placeholder Images extension for VSCode to add the images. To use it, invoke the Command Palette (⌘⇧P on Mac & Ctrl-Shift-P on Windows) & type Placeholder Images: Insert New Image
. I recommend using Unsplash, but it’s up to you.
All of the following share a link, to primary.html
:
- The placeholder image above Primary Colors
- The header text: Primary Colors
- The text: Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
All of the following share a link, to secondary.html
:
- The placeholder image above Secondary Colors
- The header text: Secondary Colors
- The text: Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
All of the following share a link, to tertiary-01.html
:
- The placeholder image above Tertiary Colors
- The header text: Tertiary Colors
- The text: Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
chartreuse.html
Now go back to your Chartreuse webpage, which is chartreuse-03.html
at this point. Duplicate it & name the new one chartreuse-04.html
.
The numbered list at the top is actually going to be the main navigation on the website, so indicate that accordingly.
In that navigation, the word “Home” always links to the latest version of your new Home page (index-01.html
in this case).
This page should now look like this: Chartreuse No. 4
Of course, this means you’re going to need to go back to index-01.html
& change the link to Chartreuse in the navigation (to chartreuse-04.html
in this case)!