Intro to HTML: Navigation and <a> Elements

Quick Copy Boxes



<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.

Syntax: <a> link



<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


Example <a>: Redirects to Webpage



<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


Example Link: Redirects to File Location



<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


Navigation Element Example


<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



Intro to LAMP:

What is LAMP Stack?


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE





How to be a Great Programmer:

Commander Candy Vlog



Watch the Coding Commanders LAMP Animation:

Coding Commanders: Episode 1



Intro PHP Playlist:

Intro to PHP

Lesson's Code

Applied Assignment


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

Example Code:


<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..