Entrar Ainda não tem acesso?
3
respostas

Exercício

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Documentação e HTML e atividade Lista de exercícios

por Luana Barbosa da Silva Monte Ribeiro
| 1.4k xp | 5 posts
<!DOCTYPE>
<html lang="pt-br">
        <head>
                <meta charset="UTF-8">
                <img src="Cabeçalho.png" width="1400" alt="Cabeçalho da Página">
                <title>AME Especial!</title>
        </head>
        <body>
                <h1 style="color: rgb(0, 0, 114); font-family: cursive;">O melhor cuidado para o seu filho!</h1>
                        <p style="color: rgb(0, 0, 114); font-family: cursive;">É um serviço do Hospital Especial Domiciliar voltado para crianças com doenças neuromusculares. Dispomos de equipe multidisciplinar especializada para uma assistência humanizada, focada na QUALIDADE de vida dos pacientes.</p>     
                <h2 style="color: rgb(153, 0, 0); font-family: cursive;">1.Nossa Missão</h2>
                        <p style="color: rgb(0, 0, 114); font-family: cursive;">Proporcionar AUTONOMIA aos pequenos pacientes e SUPORTE às famílias nos desafios diários para este cuidado.</p>
                <h2 style="color: rgb(153, 0, 0); font-family: cursive;">2.A qualquer hora, em todo lugar!</h2>
                        <img src="Protocolo.png" width="1300" alt="Protocolo de atendimento">
                <h2 style="color: rgb(153, 0, 0); font-family: cursive;">3. Depoimentos</h2>
                        <img src="Depoimentos.png" width="1300" alt="Depoimentos das famílias">
                <h2 style="color: rgb(153, 0, 0); font-family: cursive;">Ofertamos:</h2>
                <ol>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Maior autonomia</li>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Qualidade de Vida</li>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Prescrição de órteses e talas extensoras no conforto do lar.</li>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Consultoria sobre os cuidados diários.</li>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Protocolo especializado.</li>
                        <li style="color: rgb(0, 0, 114); font-family: cursive;">Farmácia e atendimento a intercorrências 24hs.</li>
                </ol>
        </body>
</html>


`Tentei dar um estilo nas fontes. Fiz através do chat GPT. Não sei se está certo ou se existe uma forma mais fácil do que ir estilizando as tags individualmente.
3 respostas
por Karina Ivanova Varlamova
| 198.6k xp | 413 posts

Olá Luana! Sim, existe uma forma bem mais prática e organizada de aplicar estilos às fontes (e outros elementos) sem precisar repetir style em cada tag. A maneira mais comum e recomendada é usar CSS (Cascading Style Sheets), que pode ser colocado dentro da mesma página ou em um arquivo separado. Um exemplo de como refatorar seu código usando um bloco de style dentro html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>AME Especial!</title>
    <style>
        body {
            font-family: cursive;
            color: rgb(0, 0, 114);
        }

        h1 {
            color: rgb(0, 0, 114);
        }

        h2 {
            color: rgb(153, 0, 0);
        }

        li {
            color: rgb(0, 0, 114);
        }

        p {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
    <img src="Cabeçalho.png" width="1400" alt="Cabeçalho da Página">
    
    <h1>O melhor cuidado para o seu filho!</h1>
    <p>É um serviço do Hospital Especial Domiciliar voltado para crianças com doenças neuromusculares. Dispomos de equipe multidisciplinar especializada para uma assistência humanizada, focada na QUALIDADE de vida dos pacientes.</p>

    <h2>1. Nossa Missão</h2>
    <p>Proporcionar AUTONOMIA aos pequenos pacientes e SUPORTE às famílias nos desafios diários para este cuidado.</p>

    <h2>2. A qualquer hora, em todo lugar!</h2>
    <img src="Protocolo.png" width="1300" alt="Protocolo de atendimento">

    <h2>3. Depoimentos</h2>
    <img src="Depoimentos.png" width="1300" alt="Depoimentos das famílias">

    <h2>Ofertamos:</h2>
    <ol>
        <li>Maior autonomia</li>
        <li>Qualidade de Vida</li>
        <li>Prescrição de órteses e talas extensoras no conforto do lar.</li>
        <li>Consultoria sobre os cuidados diários.</li>
        <li>Protocolo especializado.</li>
        <li>Farmácia e atendimento a intercorrências 24hs.</li>
    </ol>
</body>
</html>
por Karina Ivanova Varlamova
| 198.6k xp | 413 posts

Usar um arquivo CSS externo é ideal quando você quer separar o conteúdo (html) da aparência (css), tornando o projeto mais organizado, principalmente em sites com várias páginas. 1 - Crie um novo arquivo com o nome estilos.css (pode ser qualquer nome, mas .css é obrigatório). 2 - Coloque os estilos dentro do arquivo estilos.css

/* estilos.css */

body {
    font-family: cursive;
    color: rgb(0, 0, 114);
}

h1 {
    color: rgb(0, 0, 114);
}

h2 {
    color: rgb(153, 0, 0);
}

li {
    color: rgb(0, 0, 114);
}

p {
    margin-bottom: 1em;
}

No head do seu html, adicione esta linha para importar o css externo:

<link rel="stylesheet" href="estilos.css">

Salve o arquivo estilos.css na mesma pasta do seu HTML (ou ajuste o caminho no href se estiver em outra pasta). Você pode continuar adicionando ou mudando estilos apenas no CSS externo, e o HTML continuará limpo.

por Karina Ivanova Varlamova
| 198.6k xp | 413 posts

HTML atualizado com link para o CSS externo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>AME Especial!</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <img src="Cabeçalho.png" width="1400" alt="Cabeçalho da Página">
    
    <h1>O melhor cuidado para o seu filho!</h1>
    <p>É um serviço do Hospital Especial Domiciliar voltado para crianças com doenças neuromusculares. Dispomos de equipe multidisciplinar especializada para uma assistência humanizada, focada na QUALIDADE de vida dos pacientes.</p>

    <h2>1. Nossa Missão</h2>
    <p>Proporcionar AUTONOMIA aos pequenos pacientes e SUPORTE às famílias nos desafios diários para este cuidado.</p>

    <h2>2. A qualquer hora, em todo lugar!</h2>
    <img src="Protocolo.png" width="1300" alt="Protocolo de atendimento">

    <h2>3. Depoimentos</h2>
    <img src="Depoimentos.png" width="1300" alt="Depoimentos das famílias">

    <h2>Ofertamos:</h2>
    <ol>
        <li>Maior autonomia</li>
        <li>Qualidade de Vida</li>
        <li>Prescrição de órteses e talas extensoras no conforto do lar.</li>
        <li>Consultoria sobre os cuidados diários.</li>
        <li>Protocolo especializado.</li>
        <li>Farmácia e atendimento a intercorrências 24hs.</li>
    </ol>
</body>
</html>