gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use the correct element name in <code> blocks, gloss it seperately (#35616)

Browse Source 
* Update link-to-external-pages-with-anchor-elements.english.md

If you write "`anchor` element" instead of "`a` element", you should also write "`hyperreference` attribute", instead of "`href` attribute".
Suggestion: write "`a` (_anchor_) element", or "anchor (`a`) element", to communicate the element name explicitly and gloss it at the same time.
The `<code>` sections should be valid code as far as possible.

* Change md to html

* Don't mark up 'anchor' as code

The tag is `a`, the name is _anchor_.

* Revert "Don't mark up 'anchor' as code"

This reverts commit 50c6a3a7c9697f889489bd586ceccd617cc4af1c.

* Don't mark up 'anchor' as code

The tag is `a`, the name is _anchor_.
This commit is contained in:
Jean Jordaan 2019-03-25 22:50:33 +07:00 committed by Tom
parent 4854c73eee
commit 33edc072b9
4 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.english.md
View File

@ -7,8 +7,8 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
## Description
<section id='description'>
You can use <code>anchor</code> elements to link to content outside of your web page.
<code>anchor</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:
You can use <code>a</code> (<i>anchor</i>) elements to link to content outside of your web page.
<code>a</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:
<code>&#60;a href="https://freecodecamp.org">this links to freecodecamp.org&#60;/a&#62;</code>
Then your browser will display the text <strong>"this links to freecodecamp.org"</strong> as a link you can click. And that link will take you to the web address <strong>https://www.freecodecamp.org</strong>.
</section>

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.english.md
View File

@ -7,7 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
## Description
<section id='description'>
<code>anchor</code> elements can also be used to create internal links to jump to different sections within a webpage.
<code>a</code> (<i>anchor</i>) elements can also be used to create internal links to jump to different sections within a webpage.
To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.
Below is an example of an internal anchor link and its target element:
<blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote>

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md
View File

@ -11,10 +11,10 @@ You can nest links within other text elements.
<blockquote>&#60;p&#62;<br> Here's a &#60;a target="_blank" href="http://freecodecamp.org"&#62; link to freecodecamp.org&#60;/a&#62; for you to follow.<br>&#60;/p&#62;</blockquote>
Let's break down the example:
Normal text is wrapped in the <code>p</code> element:<br> <code>&#60;p&#62; Here's a ... for you to follow. &#60;/p&#62;</code>
Next is the <code>anchor</code> element <code>&#60;a&#62;</code> (which requires a closing tag <code>&#60;/a&#62;</code>):<br> <code>&#60;a&#62; ... &#60;/a&#62;</code>
Next is the <i>anchor</i> element <code>&#60;a&#62;</code> (which requires a closing tag <code>&#60;/a&#62;</code>):<br> <code>&#60;a&#62; ... &#60;/a&#62;</code>
<code>target</code> is an anchor tag attribute that specifies where to open the link and the value <code>"_blank"</code> specifies to open the link in a new tab
<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code>&#60;a href="http://freecodecamp.org"> ... &#60;/a&#62;</code>
The text, <strong>"link to freecodecamp.org"</strong>, within the <code>anchor</code> element called <code>anchor text</code>, will display a link to click:<br> <code>&#60;a href=" ... "&#62;link to freecodecamp.org&#60;/a&#62;</code>
The text, <strong>"link to freecodecamp.org"</strong>, within the <code>a</code> element called <code>anchor text</code>, will display a link to click:<br> <code>&#60;a href=" ... "&#62;link to freecodecamp.org&#60;/a&#62;</code>
The final output of the example will look like this:<br><p>Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.</p>
</section>

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.english.md
View File

@ -15,7 +15,7 @@ Remember to use <code>#</code> as your <code>a</code> element's <code>href</code
## Instructions
<section id='instructions'>
Place the existing image element within an <code>anchor</code> element.
Place the existing image element within an <code>a</code> (<i>anchor</i>) element.
Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.
</section>