|
856 | 856 | "title": "Nest an Anchor Element within a Paragraph",
|
857 | 857 | "description": [
|
858 | 858 | "Again, here's a diagram of an <code>a</code> element for your reference:",
|
859 |
| - "<a href=\"//i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>", |
| 859 | + "<a href=\"//i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\">Click to enlarge </a>", |
860 | 860 | "Here's an example:",
|
861 |
| - "<code><p>Here's a <a href=\"https://freecodecamp.org\"> link to freeCodeCamp</a> for you to follow.</p></code>", |
862 |
| - "<code>Nesting</code> just means putting one element inside of another element.", |
| 861 | + "<blockquote><p><br> Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>", |
| 862 | + "Let's break down the example:", |
| 863 | + "Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>", |
| 864 | + "Next is the <code>anchor</code> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>", |
| 865 | + "<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code><a href=\"http://freecodecamp.org\"> ... </a></code>", |
| 866 | + "The text, <strong>\"link to freecodecamp.org\"</strong>, within the anchor element called <code>anchor text</code>, will display a link to click:<br> <code><a href=\" ... \">link to freecodecamp.org</a></code>", |
| 867 | + "The final output of the example will look like this:<br><p>Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.</p>", |
863 | 868 | "<hr>",
|
864 | 869 | "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
|
865 | 870 | ],
|
|
0 commit comments