Internal Links

Links to sections

Bookmarks

First make each h2 tag have a bookmark.

1.     Go inside the opening tag and add a space.

 

2.     Then add id=”…” (bookmark names should be lowercase, no spaces. They should be easy to remember, matching what’s in your top list.

Links

Make each list item in the ordered list at the top link to each section.

Add the opening and closing a tags with href inside the opening one to start.

Then add the link going to each bookmark, starting with # (so it knows it’s looking for an internal link.

Your list at the top should be underlined and blue (if your background color is similar to this default blue, it might be really hard to read the links).

LInk Styles


There are 4 stages for every text link. Start by going inside the <style> at the top and add the following styles to start, so they’re in this order:

  • a:link 
    the default color, when you haven’t clicked on the link yet
  • a:visited 
    after you’ve clicked on the link
  • a:hover 
    when you’re holding the mouse over the link but not clicking
  • a:active 
    the color when you’re clicking your mouse on it

Inside each style, add color. You can use color names or #s.

  • Make sure that link is the brightest, stands out the most.
  • They can’t be the same color as your default text!

Back to the top

Bookmark

Start by adding a bookmark inside the h1 tag at the top of your page: id=”top”

Link

  1. Go to the end of your first section and add the text “back to the top”
  2. On the lines before and after the text, add p tags, align to the right
  3. Then on new lines, add the a tags to link the text, back to the top anchor

If it works, copy all this code to the bottom of the other sections

  • AFTER the closing center tag for the bottom photo, but
  • BEFORE the closing div tag for the section

Icon/arrows

Go here to get the code for the icon you want to use.

https://www.w3schools.com/icons/icons_reference.asp

Choose one of the following:

Click on the Try It button to the right of the one you want to use…

Copy the <script> line 

Paste it inside your <head>, just after the opening tag (or after <title> tags).

It’s actually the same for all 3 arrows so if you want to try all 3 out, you can.

Then copy the code for the 2nd or 3rd biggest version of the icon

It’s the <i class=…> line of code in the middle section.

Go to the bottom of your sections and paste it over (CTRL+V) the text “back to the top” with this code…