Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - layout

O HTML5 oferece elementos semânticos que definem diferentes partes de uma página Web.
Elementos semânticos são usados para "dizer" o que é cabeçalho, o que é barra de navegação, o que é conteúdo da página, o que é uma barra lateral, etc.

Esquema de layout em HTML5
Fonte: http://www.w3schools.com/html/html_layout.asp

  • <header> - Define um cabeçalho para um documento ou seção
  • <nav> - Define um container para links de navegação
  • <section> - Define uma seção em um documento
  • <article> - Define uma seção independente
  • <aside> - Define uma área lateral para inserir conteúdo
  • <footer> - Define um cabeçalho para um documento ou seção
  • <div> - Este é um elemento não-semântico também usado para dividir a página e/ou seções.

Sem CSS não dá...

Usando os elementos acima, conseguiremos separar as seções de uma página Web. No entanto, para conseguirmos posicionar os elementos no formato em que pensamos em um layout, necessitaremos conhecer a linguagem CSS
Portanto, a partir de agora, usaremos as tags HTML5 em conjunto com as propriedades da linguagem CSS, à medida de nossa necessidade.

Dica importante: usar o atributo "id"

Sempre que criar uma nova seção na página, identifique-a por meio de um nome único, usando o atributo id.
Isso ajudará a identificar cada "pedaço" da página na hora de formatar com a linguagem CSS. Veja o exemplo a seguir.

<section id="conteudo"> Aqui vai o conteúdo da seção chamada "conteudo" </section>

Como formatar um elemento usando CSS?

Primeiro passo: Dentro da tag <head> da página, insira a tag <style>, como exemplo abaixo:


<!DOCTYPE HTML>
<html>
        <head>
                <title>Título da página</title>
                <style type="text/css">
                <!--Aqui serão escritas as propriedades CSS
                para formatação dos elementos da página
                -->
                </style>
        </head>
        <body>
                <section id="conteudo"> Aqui vai o conteúdo da seção chamada "conteudo" </section>
        </body>
</html>

Segundo passo: identificar o elemento que você deseja formatar e escrever as propriedades CSS.


<!DOCTYPE HTML>
<html>
        <head>
                <title>Título da página</title>
                <style type="text/css">
                #conteudo{
                        background-color: #cccccc; /*cor de fundo*/
                        border: 1px solid #000000; /*borda de 1 pixel sólida*/
                        width: 50%; /*largura*/
                        height: auto; /*altura*/
                        clear:both; /*não permite nenhum elemento
                                    flutuar ao lado da section "conteudo" */
                }
                </style>
        </head>
        <body>
                <section id="conteudo"> Aqui vai o conteúdo da seção chamada "conteudo" </section>
        </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Identificando elementos HTML para formatar em CSS

Em CSS, há 3 formas básicas de identificar um elemento HTML.

1) Usando o atributo "id"

Se um elemento HTML possui o atributo id, ele pode ser identificado na linguagem CSS por meio do caracter #, como no código-exemplo acima.
IMPORTANTE: o valor do atributo id de um elemento HTML deve ser único na página. Ou seja, se você criar uma seção com id="conteudo", nenhum outro elemento da página poderá ter o id="conteudo".

2) Usando o nome da tag

Um elemento HTML pode ser formatado em CSS a partir do nome de sua tag. No entanto, quando essa opção é usada, todos os elementos da tag especificada receberão a mesma formatação.
No exemplo abaixo, todos os parágrafos (tag <p>) da página receberão a mesma formatação.


<!DOCTYPE HTML>
<html>
        <head>
                <title>Título da página</title>
                <style type="text/css">
                p{
                        margin-top: 10px; /*margem acima do parágrafo*/
                        margin-bottom: 10px; /*margem abaixo do parágrafo*/
                        font-family: Arial, sans-serif; /*tipologia da fonte*/
                        font-size: 14px; /*tamanho da fonte*/
                }
                </style>
        </head>
        <body>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
                <p>Texto do parágrafo</p>
        </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

3) Usando o atributo class

Quando se deseja formatar grupos de elementos HTML, separando elementos com a mesma tag, por exemplo, a melhor opção é usar o atributo class.
Seguindo o exemplo anterior, como faríamos para formatar os parágrafos de forma diferente?
Uma alternativa é colocar o atributo id em cada parágrafo, mas isso é inviável.
Portanto, podemos agrupar os parágrafos com o atributo class. Observe o exemplo abaixo.

ATENÇÃO: Em CSS, uma classe é identificada com o ponto seguido do nome.
No exemplo abaixo, são criadas duas classes: letraMaior e letraMenor, e ambas foram aplicadas nos parágrafos por meio do atributo class.


<!DOCTYPE HTML>
<html>
        <head>
                <title>Título da página</title>
                <style type="text/css">
                .letraMaior{
                        font-family: Arial, sans-serif; /*tipologia da fonte*/
                        font-size: 20px; /*tamanho da fonte*/
                }
                .letraMenor{
                        font-family: Arial, sans-serif; /*tipologia da fonte*/
                        font-size: 12px; /*tamanho da fonte*/
                }
                </style>
        </head>
        <body>
                <p class="letraMaior">Texto com letra maior</p>
                <p class="letraMenor">Texto com letra menor</p>
                <p class="letraMaior">Texto com letra maior</p>
                <p class="letraMenor">Texto com letra menor</p>
                <p class="letraMaior">Texto com letra maior</p>
                <p class="letraMenor">Texto com letra menor</p>
                <p class="letraMaior">Texto com letra maior</p>
        </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Exemplo de layout em HTML5 e CSS

Agora que aprendemos a formatar elementos HTML, vamos a um exemplo completo de layout em HTML5 e CSS.
Para conseguirmos posicionar elementos HTML na página, precisamos saber que existem 3 tipos importantes de posicionamento em CSS: relative, absolute e fixed.
Por padrão, todo elemento HTML tem posicionamento relativo, ou seja, "encaixa-se" de acordo com os outros elementos da página.
Os exemplos abaixo usam posicionamento relativo. Para aprender o posicionamento absoluto e o fixo, veja esta aula.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Página de exemplo</title>
        <style type="text/css">
            *{ /*Formata todos os elementos da página*/
                padding:0px; /*espaço entre a borda e o conteúdo do elemento*/
                margin:0px; /*espaço entre a borda e os elementos externos*/
            }
            #topo{
                width: 100%; /*largura*/
                height: 120px; /*altura*/
                text-align: center; /*alinhamento do texto*/
                clear: both; /*não permite elementos flutuantes ao lado*/
                background-color: #cccccc; /*cor de fundo*/
            }
            #menu{
                height: 50px; /*altura*/
                text-align: center; /*alinhamento do texto*/
                padding: 10px; /*espaço entre a borda e o conteúdo do elemento*/
                background-color: #ffcc00; /*cor de fundo*/
            }
            #meio{
                width: 100%; /*largura*/
                background-color: #f90; /*cor de fundo*/
                height: 80%;; /*altura*/
            }
            #lateral{
                float:right; /*define que o elemento deve flutuar à direita*/
                background-color: #ff6600; /*cor de fundo*/
                padding: 10px; /*espaço entre a borda e o conteúdo do elemento*/
                width: 15% /*largura*/
            }
            #conteudo{
                padding: 10px; /*espaço entre a borda e o conteúdo do elemento*/
                width: 80%; /*largura*/
                float:left; /*define que o elemento deve flutuar à esquerda*/
                background-color: #999999; /*cor de fundo*/
            }
            #rodape{
                clear: both; /*não permite elementos flutuantes ao lado*/
                text-align: center; /*alinhamento do texto*/
                padding: 10px; /*espaço entre a borda e o conteúdo do elemento*/
                background-color: #cccccc; /*cor de fundo*/
            }
        </style>
    </head>
    <body>

    <header id="topo">
        <h1>Topo da página</h1>
    </header>

    <nav id="menu">
        <a href="#">Menu 1</a>
        <a href="#">Menu 2</a>
        <a href="#">Menu 3</a>
        <a href="#">Menu 4</a>
        <a href="#">Menu 5</a>
    </nav>

    <section id="meio">

        <article id="conteudo">
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
            Aqui vai o conteúdo <br />
        </article>

        <aside id="lateral">
            <p>Barra lateral</p>
        </aside>

    </section>

    <footer id="rodape">
        <h2>Rodapé da página</h2>
    </footer>

    </body>
</html>   

No exemplo acima, o elemento topo será posicionado no topo da página, ocupando toda a largura. Logo abaixo, será exibido o menu, que também ocupará toda a largura da página.
Em seguida, será posicionado o elemento meio, que contém dois elementos: conteudo e lateral, que serão posicionados um ao lado do outro.
Por fim, o elemento rodape será posicionado abaixo, ocupando toda a largura da página.

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Voltar ao Índice