web-studies/adding-images.html at main · ArthurCaixet0/web-studies · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria de Imagens</title>
    <style>
        img {
            width: 356px;
            height: auto;
            margin: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h1>Animes que eu gostei e recomendaria assistir:</h1>

    <img src="https://wallpapercave.com/wp/wp5037699.png" alt="Solo Leveling">

    <img src="https://wegotthiscovered.com/wp-content/uploads/2022/01/shigeo-kageyama-mob-psycho-100-25-scaled.jpg?resize=564" alt="Mob Psycho 100">

    <img src="https://images5.alphacoders.com/133/thumb-1920-1332386.png" alt="Castlevania Nocture">

    <img src="https://wallpaperaccess.com/full/4511526.jpg" alt="Demons Slayer">

    <hr>
    <p><strong>Explicação:</strong></p>
    <ul>
        <li><strong>&lt;img&gt;</strong>: A tag usada para exibir imagens em uma página da web.</li>
        <li><strong>&lt;src&gt;</strong>: Define o cominho da imagem que será carregada. Pode ser um arquivo local ou um link da internet.</li>
        <li><strong>&lt;alt&gt;</strong>: Fornece um texto alternativo caso a imagem não carregue, além de ajudar na acessibilidade.</li>
        <li>O CSS usado ajusta o tamanho das imagens, adiciona espaçamento e bordas arredondadas para melhor estética.</li>
    </ul>
</body>
</html>