Hello, there! Quando inserimos uma imagem em um código HTML, podemos usar atributos para estilizá-la de várias formas. E como as tags que definem esses atributos são escritas em inglês, saber seu significado pode te ajudar a entender e até memorizar melhor como fazer isso.
Venha conferir o significado de alguns dos atributos mais usados e codifique imagens cada vez melhores! C'mon! Let's check it out!
A primeira tag que devemos conhecer é <img>, que significa "image". Ela é usada sempre que quisermos inserir uma imagem no nosso código HTML, e será a partir dela que usaremos outras tags para estilizar a imagem inserida.
A tag <src> significa source, ou seja, fonte ou origem. Ela é usada para definir onde está localizada a imagem que será usada. For example:
<img src="/images/alura.jpg">Ou seja, nesse caso, a imagem "alura.jpg" está dentro da pasta "images".
A tag <alt> significa "alternate text", isto é, "texto alternativo". Ela é importante porque em algumas situações a imagem pode não carregar no navegador da pessoa que estiver visitando o seu site, e, nesse caso, será exibido um texto alternativo no lugar da imagem.
<img src="/images/alura.jpg" alt="Alura Língua">Nesse exemplo, se a imagem "alura.jpg" não carregar por algum motivo, em seu lugar será exibido o texto "Alura Língua".
Você se lembra o que significam width e height? As duas tags são usadas para definir o tamanho que uma imagem terá em uma página, sendo que <width> define a largura e <height> define a altura, ambas medidas em pixels. Like this:
<img src="/images/alura.jpg" alt="Alura Língua" width="600" height="500">Dessa forma, estamos definindo que a imagem "alura.jpg" deve aparecer com 600 pixels de largura por 500 de altura.
Mas se você não quiser usar as tags <width> e <height> separadamente, você pode agrupá-las dentro da tag <style>, que vai definir o estilo da imagem. Desse jeito:
<img src="/images/alura.jpg" alt="Alura Língua" style="width:600px;height:500px;">Por último, dentro da tag <style>, você também pode usar o atributo float, que significa flutuar. Nesse caso, você vai definir se a imagem deve "flutuar" para a direita (right) ou esquerda (left) do texto. For example:
<img src="/images/alura.jpg" alt="Alura Língua" style="width:600px;height:500px;float:right;">Nesse exemplo, a imagem vai ser posicionada à direita do texto.
Now you understand exactly what these tags stand for! (Agora você entende exatamente o que essas tags significam!)
Continue estudando com a gente no nosso artigo "Vocabulário em inglês essencial para PRODUCT OWNERS". See you!
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.