CCC-Web Worksheet

Addressing

We've discussed URLs and hyperlinks; how to form a URL and how to use the anchor tag to place links in HTML. Here we will build a simple HTML5 page and add some links to it.

Task 0: Preparation

Create a folder for this week’s work: call it links. Place any files you create in it.
Create a file called index.html that contains the following content: <!DOCTYPE html> <meta charset=UTF-8> <title>Hello Links World</title> <article> <section> <h1>My Favourite Websites:</h1> <ul id=extlinks> <li></li> </ul> </section> <section> <h1>Other pages on my site</h1> </section> </article>
Load the file to check the default rendering.
If any of this was new, record it in your discovery log.

Task 1: A list of your favourite links

In this task you will add links to your favourite websites to the list in the first section of the page.

In index.html notice the extlinks element. The ul tags indicate an unordered list, which is rendered as bullets by the browser. Each item in the list is surrounded by li list item tags thus: <li>Example list item.</li>.

Find four websites that you like and make a note of their URLs in your discovery log.
Add three more pairs of li tags to the ul in index.html, each on a new line. You should now have four empty list items.
Between each pair of li tags, add an a tag to link to your chosen websites. Each link should use the syntax: <a href="URL">Link Text</a> where URL is the address of the website you want to link to, and Link Text is the text that will appear as the link in the browser.
Check that the links work.

Task 2: Relative links

Create three new html files inside your links folder. They should be called about.html, studies.html and music.html. Keep your filenames lower case (this is good practice for all web resources).
Give each page some relevant content in HTML. If you need a basic page template, use the one at the beginning of this practical, or use one from a previous week.
Save all of your pages and make sure they are in the links folder.
Open your index.html file. In the second section, make a new ul element with three li items inside it.
For each item, create a new relative link using an tag to link to each of your new pages. Remember, as the pages are all located in the folder, you can just use the filename as the href, for example <a href="about.html">.

Load index.html in your browser and check that your links work.

Add a link on each of your new pages to your homepage.

NB: When using a server, you can link to index.html with <a href="/"> but this link won't work if you're opening files from a local filesystem.

Task 3: Targets and fragments

For each external link from Task 1, add a target attribute so the site opens in a new window (look up the exact syntax if needed).
At the bottom of index.html, add a fragment link back to your list of external websites, e.g. <a href="#extlinks">Back to favourite websites</a>, then test by scrolling away from the list and clicking the link.

Task 4: Read, Discover, Experiment, Learn

You now have a basic understanding of links. Try the following for an extra challenge.

Move about.html, studies.html, and music.html into a subfolder called pages, then update the relative links in index.html.
On studies.html, link to work from previous weeks.
Create a site-wide <nav> containing a <ul>; use CSS to display the list horizontally.
Ensure all filenames (and matching links) use lowercase.
Record everything new in your discovery log.