Lesson 5 | HTML Essential Training

Okay, I have some major catching up to do, so while my blog posts today may not match up dates I’ve labeled them to help me keep track of what day I should have uploaded these.

In Lesson 5 I worked with adding links to my site by using the anchor tags – – or “a” tags. While there are link tags – – in HTML they are used to request an external resource for the page like a CSS file.

The a tags are a little more extensive because they use a hypertext reference, or href, attribute that tells the browser where you’d like to go when the link is clicked.

Lesson 5 - href1.PNG

Now, the a tags can use other attributes along with href such as target and rel (or relationship attribute).

Another, more common, attribute that is used in a tags is the title attribute. This helps make links more accessible by giving the link a title, which can be read and interpreted by assistive devices, search engines or other content readers.

lesson-5-href4

Linking to other pages within your site is probably the most common function of the anchor element. In the HTML code below, we’ll be using the anchor element to link to other pages in these documents.

lesson-5-linking1

Starting with line 10, I’ll be wrapping the text “same.htm” in an anchor element to help give me a grasp of how to write a tag code while also using titles.

lesson-5-linking2

It’s pretty simple, but at times I will also need to link to a page that is located in a different folder. To link to that page, I’ll need to know the directory it’s located. For example, I want to link to the reference.htm, I’ll need to know that it’s located in the “extras” folder, which is located in the “info” folder.

lesson-5-linking3

However, I also have to be aware of where my linked page is located in relation to the current page I’m on. For instance, in the images below, I want to link from the “about.htm” to the “links.htm”, which is located one directory above. To link to this I would use “../” to signal I want to jump to the directory above my current position.

If I have to link to a page two directories above my current page, I would use “../” twice.

Another common function is to redirect users to pages and sites that are external to the site they’re currently on. In this exercise, I’m going to link this page to lynda.com, but in order for it to work I have to be sure and use the entire protocol like “http://…” or “https://…”. I CANNOT just use http://www.lynda.com in my href.

To do this I can simply click in the browser, copy the URL by using command+C (or control+C on Windows) then pasting the URL using command+V (or control+V).

Voila! I was able to easily link to lynda.com after clicking the link on my browser. However, when I clicked that link it completely redirected my to lynda.com on that same page I was on. Instead I want to be redirected to lynda.com in a separate tab or window. To do this I have to create a target attribute.

Above, you can see that “target=’_blank'” created a new tab for lynda.com.

On occasion, you may want your users to be able to download a file or some type of resource from your site. In this exercise I’ll use both a zip file and pdf file to download. It works much the same way that the rest of the links do by using an anchor tag and giving the directory to the file.

Next I used the pdf file in place of the zip, but instead of downloading the file it shows a view of the pdf.

In order for the pdf to give me an option to download, I add the “download” attribute to the anchor tag.

lesson-5-download-links-pdf_download1lesson-5-download-links-pdf_download2

Finally, I worked with linking to regions on a page. This is common in websites like Wikipedia that will use links in the table of contents to click on and reach certain regions on the page. Here, I link to sections on this page.

lesson-5-linking-page-regions3

To do this, I first needed to add an “ID” attribute to each section’s headings. For example, on Section 3’s heading I added “id=’three'”. Then in the anchor tag there is a key difference in the href attribute between linking to a different page and linking to a region. When linking to a region I use a “#” symbol.

lesson-5-linking-page-regions1lesson-5-linking-page-regions2lesson-5-linking-page-regions4

And for the final touch, I added a link that will take me back to the top of the page once I’ve scrolled to the bottom.

lesson-5-linking-page-regions5lesson-5-linking-page-regions6