freeCodeCamp/add-images-to-your-website.english.md at b2a942c6f4669485680fac40f21dfcd97b378f30

Files

Anas Salam 29863028ae image added to website (#34247 )

image added to website using 'img' tag, 'src' tag and 'alt' tag

2018-11-08 10:39:13 +05:30

3.2 KiB

Raw Blame History

id, title, challengeType, guideUrl, videoUrl

id	title	challengeType	guideUrl	videoUrl
bad87fee1348bd9aedf08812	Add Images to Your Website	0	https://www.freecodecamp.org/guide/certificates/add-images-to-your-website	https://scrimba.com/p/pVMPUv/c8EbJf2

Description

You can add images to your website by using the img element, and point to a specific image's URL using the src attribute. An example of this would be: <img src="https://www.your-image-source.com/your-image.jpg"> Note that img elements are self-closing. All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load. Note: If the image is purely decorative, using an empty alt attribute is a best practice. Ideally the alt attribute should not contain special characters unless needed. Let's add an alt attribute to our img example above: <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">

Instructions

Let's try to add an image to our website: Insert an img tag, after the main element. Now set the src attribute so that it points to this url: https://bit.ly/fcc-relaxing-cat Finally don't forget to give your image an alt text.

Tests

tests:
  - text: Your page should have an image element.
    testString: assert($("img").length > 0, 'Your page should have an image element.');
  - text: Your image should have a <code>src</code> attribute that points to the kitten image.
    testString: assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), 'Your image should have a <code>src</code> attribute that points to the kitten image.');
  - text: Your image element <strong>must</strong> have an <code>alt</code> attribute.
    testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.');

Challenge Seed

<h2>CatPhotoApp</h2>
<main>


  <p>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>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Solution

<h2>CatPhotoApp</h2>
<main>
  <img src="https://bit.ly/fcc-relaxing-cat" alt="cat_img"></img>

  <p>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>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

</div>

3.2 KiB Raw Blame History