Hyperlinks Worksheet

Question 1

Create a link to the default page of the web-programming folder of this site (it's the index.html file in the web-programming folder).

Click this to go to index.html
Question 2

Create a link to any website, but make it open in a new browser tab (set the target attribute to '_blank')

Click this to go to google.com
Question 3

Why would we want to open a link in a new browser tab?

To not lose where we are when we clicked the link originally.
Question 4

Research 'bread crumb navigation'. Explain what it is and what are some advantages that it offers to users of a web site?

A web-based trail that users can follow backward or foward to help them navigate through a website.
Coding Problem

Create a list that looks like this:

         
          1. Facebook
          2. Google
          3. Web Programming
          	⚬ HTML
          	⚬ CSS
          	⚬ JavaScript
         
      

The first item in the list should include a hyperlink that links to https://www.facebook.com. The link should open in a new browser tab.

The second item in the list should include a hyperlink that links to https://www.google.com. The link should open in a new browser tab.

Within the Web Programming list item, add a nested list, which displays the following items (as shown above): HTML, CSS, and JavaScript. For each item in the nested list, add a link to the appropriate H3 element below. Note that you'll have to add an ID attribute to each H3 element so that you can link to it.

  1. Facebook
  2. Google
  3. Web Programming

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue, lacus eget venenatis ultricies, felis mi consectetur nisl, scelerisque scelerisque tellus sapien ac sapien. Praesent a elit eget quam vestibulum pellentesque quis ut risus. Donec id magna dui. Maecenas a metus non justo bibendum feugiat at vitae odio. Integer tempor efficitur enim, quis dapibus ex dictum et. Maecenas rutrum mauris et nulla hendrerit, in eleifend nisl tincidunt. Suspendisse dictum varius nisl vel dictum. Morbi dictum accumsan nisi, malesuada suscipit lectus. Vestibulum rhoncus enim at congue scelerisque. Maecenas venenatis leo non mi tincidunt eleifend. Morbi gravida cursus tortor, in mollis ex mollis quis. Ut vitae dignissim quam. Mauris vel ligula vel diam lacinia rhoncus ut in nisi. Curabitur mattis felis eu lorem vulputate dictum.

CSS

Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat. Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat. Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat. Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat. Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat. Nullam quis varius quam. Quisque convallis est quis nisi consequat accumsan. Sed pretium sapien nec ex lobortis ullamcorper. Maecenas non massa maximus, ultricies sapien quis, porttitor tellus. Donec convallis eleifend enim, quis convallis neque ultricies sed. Nulla tristique tortor id ipsum rhoncus porta. Mauris eros orci, lobortis et sem quis, egestas consequat urna. Pellentesque eu scelerisque lacus. Nullam luctus convallis odio, eget mattis nibh imperdiet sed. Aenean eu sodales magna. Ut dictum maximus sem nec sagittis. Donec eget felis vitae lorem aliquam sagittis. Nunc congue orci vitae dapibus pharetra. Aenean vel hendrerit elit, sit amet condimentum erat.

JavaScript

Nunc pellentesque erat libero. Duis efficitur, orci euismod egestas laoreet, ex ex ullamcorper lectus, at condimentum quam sapien quis leo. Vestibulum non pulvinar ex. Sed ultrices auctor rutrum. Suspendisse id scelerisque odio. Sed at imperdiet risus. Suspendisse non posuere ipsum. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque. Integer in tristique nibh. Maecenas ac varius nisi. Integer commodo turpis eu gravida sollicitudin. Aliquam erat volutpat. Maecenas metus felis, rutrum et ipsum vel, pulvinar luctus libero. Nunc vehicula volutpat pellentesque. Praesent eleifend lacus odio, et malesuada felis accumsan quis. Duis posuere nisl id nibh efficitur, nec mollis diam faucibus. Sed in mauris turpis. Cras eu lorem et nisl ornare eleifend. Nulla commodo rutrum commodo. Nulla eget nibh suscipit, sodales urna fermentum, cursus urna. Integer ullamcorper, eros id interdum molestie, risus ante pharetra elit, nec tempus nisl eros at lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra urna eu malesuada commodo. Suspendisse sed bibendum ex, nec consequat neque.