Html Links

Cloning Down Your Repository

If you already have a personal repository:

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty
git fetch --all
git checkout main-pages

If you want to use the demo repository to follow along:

git clone https://github.com/learn-co-curriculum/exceptional-realty-demo
cd exceptional-realty-demo
git fetch --all
git checkout html-tables

Remember to use httpserver to live test your webpage

Alternate video link.

<a href=''>

The last thing we want to do for our basic site is to link all of our pages together. We create links using the anchor link element, written as <a>. The <a> tag requires an href attribute to tell the browser where we want the link to go to. We want to provide some navigation between pages, so just below our <h1> and <h2> tags, let's add an opening and closing <a> tag with the href attribute set to index.html. We then want to include the visible text that will become the clickable on our page, so let's add in 'About' in between the opening and closing <a> tags. Go ahead and add additional <a> tags pointed to our 'New Properties,' 'Listings,' 'Market Report,' and 'Contact' HTML pages.

All of these links are internal, pointed to other parts of our site. If we wanted to add an external link to another website, we would provide a full URL path. Since we're building a real estate website, we probably want to provide a link to useful homebuyers' resources. So, for a final <a> tag, let's add a link to the Housing and Urban Development government website, at http://hud.gov, and include 'H.U.D.' as the link text.

Now, for this last link, we want to add one additional attribute, target. Setting this attribute to be target='_blank' will cause the browser to open a new tab when the link is clicked, whereas the previous links will change the location of the current tab. We've now got 6 links:

<a href="index.html">About</a>
<a href="new-properties.html">New Properties</a>
<a href="real-estate-listings.html">Listings</a>
<a href="market-report.html">Market Report</a>
<a href="contact.html">Contact</a>
<a href="http://hud.gov" target='_blank'>H.U.D.</a>

These links will act as our navigation, so go ahead and copy these, and paste them into each of your other HTML pages, just below your main headings. Some of our pages don't have any content yet, so you may need to add some HTML and content to contact.html and new-properties.html.

Once we've got links on every page, test out the page in a browser tab. We should see now that we've got links going to each page of our site, and since they're on every HTML file we've created, we can navigate back and forth between our pages. If we click on the 'H.U.D.' link, we'll see that it opens a new tab instead.

Congratulations, you've just built a website! In later lessons, we will return to Exceptional Realty to introduce additional HTML5 concepts. If you're working from your own repository, make sure to push to your remote repo so you can have your code accessible later.

git add .
git commit -m 'added links to all pages'
git push

View HTML Links on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us