<a> elements direct the user to a different page or file location. Navigation tags are sometimes used to store a group of links, such as a menu bar. Most web pages include a top and/or side menu. This allows the user to easily navigate to different content. Sometimes, you may also want to navigate the user to an outside source.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.
<a href = 'location.php' > Link Name </a>
➼ <a Start <a> Link Element
➼ href = 'location.php' Inside <a> is the href attribute. It specifies the location of the file or webpage.
➼ > Close Tag
➼ Link NameThis is the text seen by the user, which they can click to be redirected.
➼ </a>End Element
<a href = 'https://www.facebook.com/codingcommanders/' > My Facebook </a>
➼ <a Start Element
➼ href = 'https://www.facebook.com/codingcommanders/' On mouse click, redirects to Coding Commanders Facebook page.
➼ > close tag
➼ My Facebook User will click on this text to be redirected to my Facebook page.
➼ </a> End Link Element
<a href = 'linksH.php' > File Location Info </a>
➼ <a Start Element
➼ href = 'linksH.php' On mouse click, redirects to linksH.php.
➼ > close tag
➼ File Location Info User will click on this text to be redirected to linksH.php.
➼ </a> End Link Element
For information on file paths, visit: Links
<nav>
<h2>Social Media</h2>
<a href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ'> YouTube </a>
<a href = 'https://www.facebook.com/codingcommanders/'> Facebook</a>
<a href = 'https://www.instagram.com/codingcommanders'> Instagram</a>
<a href = 'https://github.com/codingCommanders/'> Github</a>
</nav>
➼ <nav> : Start Nav element
➼ <h2>Social Media</h2> : Nav Heading
➼ <a href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ'> YouTube </a> : 1st Link
➼ <a href = 'https://www.facebook.com/codingcommanders/'> Facebook</a> : 2nd Link
➼ <a href = 'https://www.instagram.com/codingcommanders'> Instagram</a> : 3rd Link
➼ <a href = 'https://github.com/codingCommanders/'> Github</a> : 4th Link
➼ </nav> : End Nav Element
Background: You are a front-end web developer building an application to warn humans of any upcoming alien-bug attacks. You are located in Miami, Florida.
Assignment: For each description below, create an <a> element that links to appropriate content. Use
google to find webpages with the relevant information. This assignment is about making navigation links as well as
using Google. Google is an important resource for ALL developers.
Once you complete all the links, put them all inside a navigation element. Be sure to include a heading or label for
your navigation element.
Example Description: How to avoid allegator attacks
<a href = 'https://tinyurl.com/y9pj68hb' >Avoiding Allegator Attacks</a>Description:
1) Best Weapons Against Bugs
2) Hiding from Predators
3) Map of Miami
4) Miami's Posionous Vegattion
Next, for the same application (described in the applied assignment), write a short page on general safety guidelines. Add your page to the
navigation element (the one you created with the links from applied assignment). Include the full navigation element on the top of your page. Also include
a Head Element with Meta Tags.
***If you do not have your own programming environment set up, you can use the code editor box below. You will have to create
your own repl.it account, to obtain a link for the navigation element.
Repl.it Directions (only for those without their own programming environment):
1) Visit: repl.it.
2) Follow the directions to set up an account. You can also log in with social media.
3) Make sure to choose HTML as your language
4) On the top center of the editor, click on 'Share'
5) Copy the share link. That will be your href location.
(see screenshot below)
You can use the code below as a guide. It is a sample page with nav and meta tags. Run the code below. To follow the links press 'ctrl' while you click the link..