Files
freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
camperbot b3af21d50f chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations

* chore: Italian to italian

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
2021-06-14 11:34:20 -07:00

2.8 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
bad87fee1348bd9aedf08812 Adicionar imagens ao seu site 0 https://scrimba.com/p/pVMPUv/c8EbJf2 16640 add-images-to-your-website

--description--

Você pode adicionar imagens ao seu site usando o elemento img e apontar o caminho (URL) da imagem usando o atributo src.

Exemplo:

<img src="https://www.freecatphotoapp.com/your-image.jpg">

Observe que os elementos img fecham em si mesmos.

Todos os elementos img precisam ter um atributo alt. O texto de um atributo alt é usado por leitores de tela para melhorar a acessibilidade. Ele é exibido se a imagem não puder ser carregada.

Observação: usar um atributo alt vazio é uma prática recomendada se a imagem for meramente ilustrativa.

Preferencialmente, o atributo alt não deve conter caracteres especiais, a menos que isso seja necessário.

Vamos adicionar um atributo alt ao nosso exemplo img acima:

<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">

--instructions--

Tente adicionar uma imagem ao seu site:

Dentro do elemento main existente, insira um elemento img antes dos elementos p existentes.

Agora defina o atributo src para que ele aponte para o URL https://www.bit.ly/fcc-relaxing-cat

Por fim, não se esqueça de dar ao elemento img um atributo alt com um texto adequado.

--hints--

A página deve ter um elemento de imagem.

assert($('img').length);

A imagem deve ter um atributo src que aponte para o caminho da imagem do gatinho.

assert(/^https:\/\/(www\.)?bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));

O atributo alt do elemento de imagem não deve estar vazio.

assert(
  $('img').attr('alt') &&
    $('img').attr('alt').length &&
    /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
      __helpers.removeWhiteSpace(code)
    )
);

--seed--

--seed-contents--

<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>

--solutions--

<h2>CatPhotoApp</h2>
<main>
  <a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  <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>