1
resposta

[Projeto] Estrutura Básica do Html

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

por Estanislau Antonio da Silva Junior
| 73.3k xp | 256 posts
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Portfólio</title>
    </head>
    <body>
        <h1> Eleve seu negócio a um front de qualidade!</h1>
        <p> Aqui Tabalhamos com todas as linguagens de marcação: Html, Css,React,Java Script</p>
        <img src="=img1.png" alt="Html Css">
        <ul> Lista das Linguagens de Marcação</ul>
        <li>Html</li>
        <li>Css</li>
        <li>React</li>
        <li>Java Script</li>  
    </body>
    </html>
1 resposta
por Luis Dias
| 3377.4k xp | 3752 posts

Oi Estanislau,

Seu projeto está muito bom 👍!

A estrutura básica do HTML está bem definida, com o <!DOCTYPE html>, a tag <html> com o atributo lang, o <head> com as meta tags e o <title>, e o <body> com o conteúdo.

Algumas sugestões para aprimorar seu código:

  1. Imagens: Verifique o caminho da imagem na tag <img>. O atributo src deve apontar para o local correto do arquivo de imagem. Por exemplo, se a imagem estiver na mesma pasta do seu arquivo HTML, você pode usar src="img1.png". Se estiver em uma subpasta, use src="imagens/img1.png".
  2. Listas: A tag <ul> deve conter itens de lista <li>. Você já fez isso, mas a tag <ul> não deve ter texto dentro dela, apenas as tags <li>. Remova o texto "Lista das Linguagens de Marcação" de dentro da tag <ul>.
  3. Semântica: Considere usar tags semânticas como <header>, <main>, <nav> e <footer> para organizar melhor o conteúdo da sua página. Isso ajuda na acessibilidade e no SEO. 💪
  4. Atributos: Verifique se todos os atributos estão escritos corretamente, como o alt na tag <img>, que é essencial para acessibilidade. 👌

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
</head>
<body>
    <header>
        <h1> Eleve seu negócio a um front de qualidade!</h1>
        <p> Aqui Trabalhamos com todas as linguagens de marcação: Html, Css, React, Java Script</p>
    </header>
    <main>
        <img src="img1.png" alt="Logo Html Css">
        <ul>
            <li>Html</li>
            <li>Css</li>
            <li>React</li>
            <li>Java Script</li>
        </ul>
    </main>
</body>
</html>

Para saber mais: Documentação oficial sobre a tag img.

Continue praticando e explorando as possibilidades do HTML! 💫