Como Criar uma Página Web Simples com HTML e CSS

Na era digital em que vivemos, a presença online se tornou uma peça fundamental para indivíduos e negócios. A capacidade de criar e moldar páginas web é não apenas uma habilidade valiosa, mas também uma necessidade crescente. É aqui que entram o HTML (Hypertext Markup Language) e o CSS (Cascading Style Sheets), os alicerces sobre os quais se ergue a estrutura da web moderna.

Passo a passo, abordaremos a arte de criar uma página web simples, delineando não apenas a importância, mas também os detalhes práticos de utilizar o HTML para dar forma e estrutura ao conteúdo e o CSS para adicionar estilo e vitalidade à página.

Exploraremos não apenas a teoria por trás dessas linguagens, mas também ofereceremos exemplos tangíveis e práticos para que você possa, de forma acessível, começar sua jornada na criação de páginas web dinâmicas e atraentes.

Há, ja ia me esquecendo. Caso você precise entender melhor sobre CSS ou HTML esses são os links para eles:

Criando a estrutura da pagina com HTML

O HTML é a espinha dorsal de qualquer página web. Ele define a estrutura e organização do conteúdo. Vamos começar com o esqueleto básico da pagina que iremos criar:

Este e o código HTML que será usado para criar nossa pagina:

<!DOCTYPE html>
<html>
  <head>
      <title>Minha Página Web</title>
  </head>
<body>
    <header>
        <h1>Título da Página</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Seção 1</h2>
            <p>Este é um parágrafo dentro da primeira seção.</p>
        </section>
        <section>
            <h2>Seção 2</h2>
            <p>Este é um parágrafo dentro da segunda seção.</p>
        </section>
    </main>
    <footer>
        <p>Rodapé da página</p>
    </footer>
</body>
</html>

Bash

Uma breve explicação:

Muito bem, vamos destrinchar parte por parte deste codigo.
Seguindo a postagem anterior sobre HTML voce aprendeu sobre o basico de HTML, sobre tags, elementos e sobre os atributos dos elementos.

Neste artigo eu irei ir um pouco mais fundo para que voce entenda melhor sobre essa linguagem de marcação e também o CSS.

Você sabe que, para que as postagens que você cria apareça na tela, todas as tags e elementos tem que estar dentro da tag <body>AQUI</body> ou elas não apareceram na tela.

Alem do mais, se você der uma olhada irá perceber que na hierarquia dos elementos a tag body e a principal?

Muito bem, eu deixei um exemplo abaixo para voce dar uma olhada melhor e perceber que isso segue um padrao.

Embora a tag body seja a principal, outras tags e elementos se aninham uma dentro da outra da mesma forma (e da maneira que você quizer, seguindo o padrão que você quer dar para o design da pagina).

Na imagem acima eu adicionei um quadrado/caixa para cada abertura e fechamento de tags do codigo HTML para voce entender melhor como eu as aninhei.

E se ter um jeito melhor de estilização com o CSS. Se você estava tendo problema sobre o estilo de caixa, agora deve fazer mais sentido 😉

Estilizando com CSS: Adicionando Visual

Agora que voce entendeu como que as tags e elementos se aninham para se ter uma organização dentro da pagina que estamos criando, iremos usar o CSS para editar-las da maneira que necessitarmos.

O exemplo que coloquei acima, seria como se fosse uma caixa dentro de outra caixa. O CSS agora será usado apra pintar, alargar ou diminuir cada caixa para deixar da maneira que necessitarmos.👀

Estilizando o corpo da pagina

Seguindo a hierarquia, iremos iniciar a aplicação de estilo para a tag <body>. Ela e a caixa principal e o estilo que for colocado a ela sera passado para todos as outras caixas (tags/elementos) que estao dentro dela. Até que nos mudemos o estilo de cada uma:

body {
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

Bash

Muito bem, no codigo acima adicionamos o estilo da font de todo o corpo, tiramos a margem e tambem tiramos o preenchimento (padding) padrão do corpo. Para que não fique nenhum espaço em branco ao redor do corpo. Mais ainda, foi adicionado uma cor “creme” com codigo hexadecimal #f4f4f4.

Se você colocou tudo corretamente voce deve ter percebido a mudança do estilo da font e da cor da tela.

Estilizando o cabeçalho da pagina e a pagina de navegação

De uma olhada no elemento <header>, percebe-se que exitem mais dois aninhamento: <ul> e varias <li>s.
Com isso, para que podermos deixar com um estilo legal precisamos edita-los de maneira que esses tres aninhamentos respeitem o espaço de cada um. Lembrando que o <li> e filho de <ul> e <ul> e o filho de <header>. Sendo assim iremos iniciar pelo maior da hierarquia e adicionar o estilo em cada uma ate chegar na menor, lembre-se o css traz estilo em cascata:

header {
    background-color: #7CB9E8;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

Bash

Muito bem, no exemplo acima voce consegue perceber que foi seguido a hierarquia para cada camada dentro da tag <header>. Foi adicionado o estilo para header, logo em seguida para o <nav> como o <ul>, <li> e <a>.

Se você leu o artigo sobre CSS que eu escrevi aqui voce deve estar entendendo sobre seletores, propriedades e valor. Caso não da uma olhada rapida lá para voce acompanhar esta postagem melhor.

Estilizando o restante da pagina (main & footer)

Muito bem, nessa parte iremos adicionar o restante do estilo para as duas ultima seções da pagina <main> e <footer>.

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #7CB9E8;
    color: #fff;
}

Bash

Neste codigo CSS acima está todo o estilo adicionado para as tags. Mais ainda, você tambem pode perceber que na seção footer algumas propriedades são iguais as da header (cabeçalho) como a cor do background e a cor do texto (color).

Sendo assim, se tudo que você fez foi correto você deve ter uma pagina parecida com essa:

No exemplo acima você tera a habilidade de editar o codigo, tanto o HTML quanto o CSS. Aproveite para mudar as cores, adicionar sessões e ate mudar o design da pagina adicionando novas caixas ou elementos. 😉

Conclusão

Criar uma página web simples com HTML e CSS pode parecer assustador no início, mas com a prática, se torna mais fácil e gratificante. O HTML fornece a estrutura, enquanto o CSS adiciona estilo e apelo visual à página. Explore, experimente e crie suas próprias páginas web para aprimorar suas habilidades de desenvolvimento web.

Com estes fundamentos, você está pronto para dar os primeiros passos na criação de páginas web simples, e à medida que avança, pode expandir suas habilidades e criar páginas mais complexas e impressionantes.