{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-21-link-to-external-pages-with-anchor-elements/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"d9a73614-b029-52c4-9cc5-e8da3bc261d5","excerpt":"In Free Code Camp Challenge 21 we’re linking to external pages with anchor elements: a elements, also known as anchor elements, are used to link to content…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/link-to-external-pages-with-anchor-elements\">Free Code Camp Challenge 21</a> we’re linking to external pages with anchor elements:</p>\n<blockquote>\n<p>a elements, also known as anchor elements, are used to link to content outside of the current page.</p>\n<p>Here’s a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.</p>\n<p>Here’s an example:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<p>Here&#8217;s a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n</blockquote>\n<blockquote>\n<p>Create an a element that links to <a href=\"http://freecatphotoapp.com\">http://freecatphotoapp.com</a> and has “cat photos” as its anchor text. </p>\n</blockquote>\n<p>The original source code is:</p>\n<p>[html]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">\n<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>\n  \n<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>\n  \n[/html]\n<p>The modified code should look like:</p>\n<p>[html]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">\n  \n<p><a href=\"http://freecatphotoapp.com\">cat photos</a></p>\n  \n<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>\n  \n<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>\n  \n[/html]","frontmatter":{"title":"FCC Challenge 21: Link to External Pages with Anchor Elements","date":"March 08, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-21-link-to-external-pages-with-anchor-elements/","previous":{"fields":{"slug":"/blog/selenium/setting-up-a-eclipse-project-with-selenium/"},"frontmatter":{"title":"Setting Up a Eclipse Project With Selenium"}},"next":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-22-nest-an-anchor-element-within-a-paragraph/"},"frontmatter":{"title":"FCC Challenge 22: Nest an Anchor Element within a Paragraph"}}}}}