Lab 6 - Hyperlinks & Lists

Overview

This week's lab will cover the following:

Lecture Slides

Creating your Github Repo for your Labs

Use the following link to set up your labs 6-10 repository. You will be using this for labs the rest of the labs in the course (including this one), and for Assignment 1.

Copy your index.html and style.css into the labs 6-10 repository. You will need those files for the remaining labs.

Ordered & Unordered lists

The only difference between ordered and unordered lists is how you open and close them, and the way they appear (and a very slight difference in code). Ordered lists appear as numbered by default. Unordered lists appear as bulleted by default. Ordered lists open with the <ol> tag. Unordered lists open with the <ul> tag.

Creating an unordered list

Open your index.html, and add an unordered list to very top of the body section (below the opening body tag).

	<ul>
	</ul>

Adding items to your list

The inner html portions of ordered and unordered lists work exactly the same. Each item in the list is encapsulated by <li> tags. Add an item to your unordered list with the text "Home" using the following code sample:

	<li>Home</li>

Feel free to refresh your page in the browser to see how it appears.

To do:

Using what you have just learned, add additional list items for About, Media & Form. You will create hyperlinks with these in the next step.

Hyperlinks

Hyperlinks (commonly referred to as links) are an important building block of the Internet. They're one of those key technologies that without which, the Internet wouldn't work. Hyperlinks allow us to link pages to other pages on the Internet. They can take a couple different formats: absolute or relative.

Absolute hyperlinks
Provide a full path to the resource, starting with http:// or https://.
Relative hyperlinks
Are relative to where your page exists on the server. These do not begin with http:// or https://.

Relative hyperlinks are preferable when linking to other pages on your own site. This way if the directory structure changes or your pages are migrated to another server they'll still work. If you used absolute hyperlinks, you would have have to manually change every single link on your site to get it to work. Here are examples of absolute and relative hyperlinks.

Absolute link to Lab 4 - https://cnet204.jmcarman.tech/index.html
Relative link to Lab 4 - index.html

Notice both of the above links take you to the instructions for Lab 4. If you view the page source, you'll notice they're different links. If I were to move this page and the Lab 4 instructions to a new location, as long as they stay in the same folder, the relative link would still work; the absolute one would not.

Hyperlinks can also be either internal or external links.

Internal
Linking to another page within your website.
External
Linking to another website.

Hyper links can also (for the purposes of creating a naviation menu) link to null or nothing. This is always done in a navigation bar for the entry pertaining to the current page. There are a couple ways of doing this, the simplest of which is to create the link referencing an empty ID ("#" only without the quotes). Add the following code inside the list item home you created earlier, surrounding the text so it appears as follows.

		<a href="#">Home</a>

To do:

Add relative hyperlinks for the following pages. They won't exist yet. You will create them in the remaining labs.

The main tag

The main tag is new to HTML5. It is a structural tag used within the body to separate the main content from the navigation bar (which we'll be creating next).

To do:

Meta Tag - Viewport

Adding the viewport attribute to the meta tag provides the browser instructions on how to scale the page based on the size of the device it's being viewed on. For more information, see w3schools.

Adding the viewport attribute

Add the following code to the head section of your index.html. You will need to add this to all future pages you create as well.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Navigation

Most of what makes a navigation bar appear as such is done through the use of CSS. There are several different approaches to how to create and style a navigation bar, this method is one way. The first thing you need to do is use the nav tag to specify what elements of our page will be part of the navigation bar. This tag is going to surround the list of hyperlinks you created at the top of the page earlier.

To do:

Notice if you save and refresh your page the list of hyperlinks we created doesn't appear any different than it did before you added the nav tag. That is because the nav tag is simply used to tell the browser that the block of text within belongs together. It also allows you to uniquely identify that block and it's internal elements, so you can apply css to change it's appearance.

Classes & IDs

Now is a good time to introduce the concept of classes and IDs. Both are used to uniquely identify tags, so you can apply CSS to that specific tag. For example, if you wanted to change the background colour of one paragraph on the page, but not the others you'd assign an ID to it. Both classes and IDs are used to do the same thing, the main difference being if you intend to use that style only once, use an ID. ID's should be unique. If you're going to apply that style to multiple elements, on multiple pages, it's best to use a class.

To assign a class, you add the paramater class to the opening tag that you wish to assign it to. For an ID, simply change the parameter to id. Then assign it a name accordingly.

An example

Remember how you added a hyperlink to the current page that was self referential using the # symbol? Now you are going to add a class to it, so you can stylize that particular hyperlink slightly differently than the rest (in the next lab). Find the link in your navigation that you set the hyperlink reference to #, and add the appropriate code demonstrated below.

		<li><a class="active" href="#">Home</a></li>

Installing your AWS pem key via GitHub Secret

Repeat the steps outlined in Lab 4 to add your AWS ssh key (.pem file) to your Labs-10-assignment-1 repo.

Cloning your repository in your Apache server

Start your www instance in the AWS Learner Lab, and connect to it using SSH. Once you have logged in, issue the following command to clone your github repository into your home directory.

Important: Be sure to replace username in the following command with YOUR GitHub username. 
git clone git@github.com:CNET204/labs-6-10-and-assignment-1-username

Issue a command to confirm the repository has been cloned on your Ubuntu server.

Notice the content from our GitHub repository is all there, but it's not in the right place. It is in your user's home directory. It needs to be in document root (/var/www/html), and only root can put it there.

Issue the following command to recursively copy the contents of your labs-6-10-assignment-1-username directory into /var/www/html

sudo cp -R labs-6-10-and-assignment-1-username/* /var/www/html

Confirm the contents have been written to document root.

Completing the Lab

Your page should look similar to the following output. If it does not, go back and complete whatever you've missed.

Lab 6 sample

Your page should validate using the w3schools html validator & css validator. To submit your lab you need to submit the code to your GitHub repo (which you did in already in the lab). Additionally, you need to submit a screenshot of it running your server to the assignment folder in eCentennial.

Exploration Questions

  1. What tag was used to designate a navigation bar?
  2. What is a hyperlink used for?
  3. What is the main tag used for?
  4. What is a class? ID? When do you use them?