diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md index 0c69cc1981b..0d922ecf6a1 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md @@ -9,25 +9,25 @@ dashedName: links-and-images-question-b To get some practice using links and images throughout this lesson you need an HTML project to work with. -- Create a new directory named odin-links-and-images. +- Create a new directory named `odin-links-and-images`. -- Within that directory, create a new file named index.html. +- Within that directory, create a new file named `index.html`. - Fill in the usual HTML boilerplate. -- finally, add the following h1 to the body: `

Homepage

` +- finally, add the following `h1` to the `body`: `

Homepage

` ## 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 `` tag. -Add the following to the body of the index.html page you created and open it in the browser: +Add the following to the `body` of the `index.html` page you created and open it in the browser: ```html click me ``` You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t 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 element’s 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. -Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +An HTML attribute gives additional information to an HTML element and always goes in the element’s 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. +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. ```html click me diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md index 8270794a1ea..d01498fa84e 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md @@ -9,25 +9,25 @@ dashedName: links-and-images-question-c To get some practice using links and images throughout this lesson you need an HTML project to work with. -- Create a new directory named odin-links-and-images. +- Create a new directory named `odin-links-and-images`. -- Within that directory, create a new file named index.html. +- Within that directory, create a new file named `index.html`. - Fill in the usual HTML boilerplate. -- finally, add the following h1 to the body: `

Homepage

` +- finally, add the following `h1` to the `body`: `

Homepage

` ## 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 `` tag. -Add the following to the body of the index.html page you created and open it in the browser: +Add the following to the `body` of the `index.html` page you created and open it in the browser: ```html click me ``` You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t 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 element’s 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. -Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +An HTML attribute gives additional information to an HTML element and always goes in the element’s 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. +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. ```html click me diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md index 358954ad698..9d159592a4f 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md @@ -43,7 +43,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab ``` -Back in the index page, add the following anchor element to create a link to the about page: +Back in the `index` page, add the following anchor element to create a link to the `about` page: ```html @@ -54,17 +54,17 @@ Back in the index page, add the following anchor element to create a link to the ``` -Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page you just created. +Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. -This works because the index and about page are in the same directory. That means you can simply use its name (`about.html`) as the link’s href value. +This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. -Refresh the index page in the browser and then click on the about link. It will now be broken. This is because the location of the about page file has changed. +Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. -To fix this, you just need to update the about link `href` value to include the `pages/` directory since that is the new location of the about file relative to the index file. +To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. ```html @@ -73,7 +73,7 @@ To fix this, you just need to update the about link `href` value to include the ``` -Refresh the index page in the browser and try clicking the about link again, it should now be back in working order. +Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md index e83d656458f..1e95ffa4b82 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md @@ -43,9 +43,9 @@ Save the `index.html` file and open it in a browser to view Charles in all his g ## Parent Directories -What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier: +To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: ```html diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md index 60b2ba8191f..95a587aaa2b 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md @@ -11,7 +11,7 @@ Websites would be fairly boring if they could only display text. Luckily HTML pr To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. For example, using an absolute path you can display an image located on The Odin Project site: @@ -43,9 +43,9 @@ Save the `index.html` file and open it in a browser to view Charles in all his g ## Parent Directories -What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier: +To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: ```html @@ -63,9 +63,9 @@ Using the metaphor we used earlier, using `../` in a filepath is kind of like st ## Alt attribute -Besides the src attribute, every image element should also have an alt (alternative text) attribute. +Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. -The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. This is how the The Odin Project logo example you used earlier looks with an alt attribute included: diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md index a64b4b80e38..60cbf43ee0d 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md @@ -11,7 +11,7 @@ Websites would be fairly boring if they could only display text. Luckily HTML pr To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. For example, using an absolute path you can display an image located on The Odin Project site: @@ -43,9 +43,9 @@ Save the `index.html` file and open it in a browser to view Charles in all his g ## Parent Directories -What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier: +To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: ```html @@ -63,9 +63,9 @@ Using the metaphor we used earlier, using `../` in a filepath is kind of like st ## Alt attribute -Besides the src attribute, every image element should also have an alt (alternative text) attribute. +Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. -The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. This is how the The Odin Project logo example you used earlier looks with an alt attribute included: diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md index 21c05af224b..45418d0d3a7 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md @@ -11,7 +11,7 @@ Websites would be fairly boring if they could only display text. Luckily HTML pr To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. For example, using an absolute path you can display an image located on The Odin Project site: @@ -43,9 +43,9 @@ Save the `index.html` file and open it in a browser to view Charles in all his g ## Parent Directories -What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier: +To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: ```html @@ -63,9 +63,9 @@ Using the metaphor we used earlier, using `../` in a filepath is kind of like st ## Alt attribute -Besides the src attribute, every image element should also have an alt (alternative text) attribute. +Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. -The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. This is how the The Odin Project logo example you used earlier looks with an alt attribute included: