fix: a href to an href (#54205)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Lalithkumarponnambalam
2024-03-26 15:32:35 +05:30
committed by GitHub
parent 8775e9d7a1
commit ccd80da510
8 changed files with 23 additions and 14 deletions

View File

@@ -19,7 +19,7 @@ Create an additional CSS class called `blue-text` that gives an element the colo
Apply the `blue-text` class to your `h1` element in addition to your `pink-text` class, and let's see which one wins.
Applying multiple class attributes to a HTML element is done with a space between them like this:
Applying multiple class attributes to an HTML element is done with a space between them like this:
```html
class="class1 class2"

View File

@@ -33,7 +33,7 @@ The existing `img` element should be nested within an `a` element.
assert($('a').children('img').length > 0);
```
Your `a` element should be a dead link with a `href` attribute set to `#`.
Your `a` element should be a dead link with an `href` attribute set to `#`.
```js
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));

View File

@@ -19,7 +19,7 @@ You should add an `a` element.
assert.exists(document.querySelector('address > a'));
```
You should give the `a` element a `href` attribute of `https://freecodecamp.org`.
You should give the `a` element an `href` attribute of `https://freecodecamp.org`.
```js
assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');

View File

@@ -19,7 +19,7 @@ Your opening anchor tag should have a `target` attribute set to `_blank`.
assert.match(code, /<a\s+(?:[^>]*\s+)?target\s*=\s*('|")_blank\1(?:\s+[^>]*)?>.*<\/a>/s);
```
Your opening anchor tag should have a `href` attribute set to `${forumTopicUrl}${slug}/${id}`.
Your opening anchor tag should have an `href` attribute set to `${forumTopicUrl}${slug}/${id}`.
```js
assert.match(code, /<a\s+(?:[^>]*\s+)?href\s*=\s*('|")\${forumTopicUrl}\${slug}\/\${id}\1(?:\s+[^>]*)?>.*<\/a>/s);

View File

@@ -24,7 +24,7 @@ The website will consist of a main index page which will have links to a few rec
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`.
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`.
1. These anchor elements should have an `href` attribute with the value set to `#`.
# --hints--
@@ -34,7 +34,7 @@ You should have a `DOCTYPE` tag.
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
You should have an `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
@@ -107,7 +107,7 @@ const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the steps as the list items `<li>`.
You should have an `<ol>` with the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
@@ -139,7 +139,7 @@ const containsAnchors = [...listItems].every(function(listItem) {
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
Your anchor tags linking to the recipes should have an `href` attribute with the value set to `#`.
```js
const anchorTags = document.querySelectorAll("a");

View File

@@ -19,6 +19,7 @@ To get some practice using links and images throughout this lesson you need an H
## Anchor Elements
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
Add the following to the `body` of the `index.html` page you created and open it in the browser:
```html
@@ -27,7 +28,7 @@ Add the following to the `body` of the `index.html` page you created and open it
You may have noticed that clicking this link doesnt do anything. This is because an anchor tag on its own wont know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
Add the following `href` attribute to the anchor element you created previously and try clicking it again, dont forget to refresh the browser so the new changes can be applied.
@@ -35,7 +36,7 @@ Add the following `href` attribute to the anchor element you created previously
<a href="https://www.theodinproject.com/about">click me</a>
```
By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
Its worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.

View File

@@ -18,6 +18,7 @@ To get some practice using links and images throughout this lesson you need an H
## Anchor Elements
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
Add the following to the `body` of the `index.html` page you created and open it in the browser:
```html
@@ -25,14 +26,17 @@ Add the following to the `body` of the `index.html` page you created and open it
```
You may have noticed that clicking this link doesnt do anything. This is because an anchor tag on its own wont know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
Add the following `href` attribute to the anchor element you created previously and try clicking it again, dont forget to refresh the browser so the new changes can be applied.
```html
<a href="https://www.theodinproject.com/about">click me</a>
```
By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
Its worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
# --question--

View File

@@ -18,6 +18,7 @@ To get some practice using links and images throughout this lesson you need an H
## Anchor Elements
To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
Add the following to the `body` of the `index.html` page you created and open it in the browser:
```html
@@ -25,14 +26,17 @@ Add the following to the `body` of the `index.html` page you created and open it
```
You may have noticed that clicking this link doesnt do anything. This is because an anchor tag on its own wont know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
An HTML attribute gives additional information to an HTML element and always goes in the elements opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
Add the following `href` attribute to the anchor element you created previously and try clicking it again, dont forget to refresh the browser so the new changes can be applied.
```html
<a href="https://www.theodinproject.com/about">click me</a>
```
By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
Its worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
# --question--