aprenda-html-css

Aprenda HTML e CSS

Leia em uma página separada se achar melhor em https://estevanmaito.github.io/aprenda-html-css

⚠️⚠️⚠️ ATENÇÃO ⚠️⚠️⚠️

Os exercícios ainda estão sendo recriados. Para receber atualizações desse repo, clique em Watch ao lado do Star (pode clicar nesse tb 😏).

Sumário

Público alvo

Este livro é para você se:

Este livro não é para você se:

Introdução

Este livro se baseia na premissa de que uma das melhores formas de aprender é fazendo.

As pessoas retém, em média:

Fonte: Learning pyramid

A cada capítulo vou te levar de 10% a 75%.

Isso será alcançado através de capítulos curtos, direto ao ponto, seguidos de exemplos que você mesmo deve executar e exercícios baseados no que foi lido há pouco.

Li ótimos livros quando comecei a estudar estas tecnologias há alguns anos, mas nenhum foi além da leitura. Você termina de ler e não sabe como aplicar o conteúdo ou como estruturar uma página.

O melhor conceito que vi foi o aplicado por Mark Myers, autor americano, num livro de introdução ao Javascript. Capítulos curtos e muitos exercícios para praticar ao final de cada leitura. Ainda assim, ao final do livro eu não sabia onde usar ou o que construir com o que recém tinha acabado de aprender.

Decidi, portanto, criar o material de estudo que eu gostaria de ter lido e praticado em 2013. HTML e CSS não são a mesma coisa e não devem ser ensinados ao mesmo tempo. Imagine só, você querendo aprender a criar um parágrafo e eu te ensino a criar um parágrafo, alterar a cor e tamanho das fontes além de aumentar as margens.

Tenho certeza de que, ao final desta leitura, você será capaz de criar produtos incríveis além de estar direcionado para onde continuar a partir daqui.

Exercícios

Cada capítulo acompanha alguns exercícios para afixar o conteúdo recém lido. Sugiro fortemente que você realize todos. Do contrário, estará desperdiçando tempo e não reterá a maioria das informações.

Os desafios, em alguns momentos, podem parecer simples demais, e a minha intenção é que você sinta exatamente isso. O objetivo aqui é construir cada capítulo e seus exercícios sobre o que foi visto anteriormente, de modo que tudo se encaixe e pareça trivial.

Você também pode, a qualquer momento, voltar e refazer os exercícios para algum capítulo específico, caso queira relembrar os conceitos.

Não esqueça, a prática leva à perfeição.

BOA LEITURA!

1 - Escrevendo HTML

HTML (Hypertext Markup Language) é uma linguagem que instrui o navegador (Firefox, Chrome, Edge, Safari, Opera, etc.) como montar uma página. Essas instruções basicamente dizem ao navegador onde cada parte da página deve ficar, seja um parágrafo, uma imagem ou um cabeçalho.

Apesar de as páginas que costumamos ver pela internet geralmente serem compostas por várias cores, fontes e formatos, o HTML em si é responsável apenas pela estrutura e conteúdo delas (textos, imagens, vídeo, links), enquanto que o CSS (mais detalhes na parte 2) é o responsável pela apresentação (instruções sobre como apresentar cada conteúdo, como cores, tamanhos e disposição).

Para que o navegador possa interpretar corretamente o que queremos que seja apresentado para quem for visualizar nossas páginas, precisamos escrever instruções específicas em HTML. Essas instruções são textos e podem ser escritas em qualquer editor de texto como o Notepad (bloco de notas) disponível no Windows ou TextEdit no Mac, que já vêm instalados com o sistema operacional ou um editor próprio para código, como Brackets, Sublime, Atom, Dreamweaver e mais uma infinidade que você pode conferir fazendo uma busca no Google por “editores de código”.

Cada documento HTML cria uma página para o navegador. Ou seja, se tivermos vinte documentos, teremos vinte páginas no site.

Documentos HTML são identificados através de uma extensão própria. O nome do arquivo termina com .html, como em sobre.html ou contato.html.

Durante o curso deste livro, nos restringiremos aos seguintes caracteres quando nomearmos um documento HTML (porém, saiba que existem mais possibilidades):

Faça os exercícios propostos para este capítulo em:

2 - Apresentando HTML

Geralmente, quando olhamos para a barra de endereços do navegador podemos ver o nome do arquivo HTML ao qual aquela página se refere:

ch02

Ou seja, quando este endereço é solicitado ao navegador, o arquivo index.html é carregado e apresentado na tela do usuário.

Para que um arquivo HTML seja apresentado ao usuário, ele deve estar presente no servidor onde o site está hospedado. Assim, por exemplo, o navegador solicita o arquivo x.html ao servidor que fará uma busca por este nome. Existindo um documento HTML que tenha o nome de x, o servidor envia ao navegador o documento correspondente, caso contrário, uma mensagem de erro será apresentada ao usuário dizendo que o arquivo solicitado não foi encontrado.

Faça os exercícios propostos para este capítulo em:

3 - Olá mundo!

A partir deste capítulo você já poderá se considerar um desenvolvedor web! É o que diz a Wikipedia:

Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de sites

Vamos criar nosso primeiro site:

  1. Na área de trabalho do seu computador, crie uma pasta chamada “meu-site” (note que estamos utilizando as mesmas regras de nomes para arquivos HTML aqui);

  2. Abra seu editor de texto e crie um novo arquivo;

  3. Copie o seguinte código dentro deste arquivo:

<!DOCTYPE html>
<html>
<head>
    <title>Site do Estevan Maito</title>
</head>
<body>
    Eu sou um desenvolvedor web!
</body>
</html>

  1. Altere o título para o seu nome;

  2. Salve o arquivo como index.html;

  3. Abra a pasta “meu-site” se já não estiver aberta e abra o arquivo index.html (com dois cliques ou selecione um navegador para abrir com).

Aí está! Sua primeira página para o mundo!

Mas o que está acontecendo aqui? Por que preciso escrever tantos “<”, “/” e “>”?

Tags, leitor. Leitor, tags.

Tags são usadas em HTML para criar elementos e, assim, estruturar uma página. Geralmente, as tags aparecem em pares, uma tag de abertura e outra de fechamento. A tag de abertura consiste no nome do elemento (title, por exemplo) cercado por < e >, resultando em <title>, enquanto que a tag de fechamento é praticamente igual, com a exceção de que o nome do elemento (no nosso caso ainda é o title) é precedido por /, resultando em </title>.

Tudo o que estiver entre o < da tag de abertura e o > da tag de fechamento é considerado um elemento. No exemplo acima, <title>Site do Estevan Maito</title> é o nosso elemento title.

Faça os exercícios propostos para este capítulo em:

4 - Estrutura básica

No capítulo anterior vimos a seguinte estrutura, que é o mínimo para termos um documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Site do Estevan Maito</title>
</head>
<body>
    Eu sou um desenvolvedor web!
</body>
</html>

Você já conhece as tags e sabe que uma de suas funções é prover estrutura para a página web, então vamos analisar linha a linha qual o papel de cada tag no documento HTML.

  1. <!DOCTYPE html>: é sempre a primeira linha e diz ao navegador qual o tipo de documento que ele deve apresentar na tela para o usuário. Nesse caso, nossa tag significa que este é um documento HTML5, a versão mais recente e compatível com todos navegadores modernos;

  2. <html> e </html>: todo o conteúdo de uma página deve ficar entre a tag de abertura e fechamento html;

  3. <head> e </head>: o conteúdo desse elemento, com exceção do elemento title (que fica visível na janela do navegador, como na imagem do capítulo 2), não aparece para o usuário e geralmente é usado para inserir estilo e códigos relativos ao funcionamento do site, que se comunicam diretamente com o navegador;

  4. <title> e </title>: título da página, visível no nome da aba/janela do navegador;

  5. <body> e </body>: habitat de todos os elementos que são visíveis na tela do usuário. Menus, imagens, links, enfim, tudo que você vê na tela fica aqui dentro.

Nenhum desses elementos pode ser repetido.

Faça os exercícios propostos para este capítulo em:

5 - Parágrafos

Abra o arquivo index.html que você criou no capítulo anterior e adicione uma linha abaixo de “Eu sou um desenvolvedor web!” dizendo “E eu sou incrível!”. Você deverá ter isso dentro do elemento body:

Eu sou um desenvolvedor web!
E eu sou incrível!

Agora execute novamente o arquivo index.html, da mesma forma que foi realizado no passo 6 do capítulo anterior.

Você escreveu exatamente como eu mostrei, não foi? E por que o navegador está mostrando:

Eu sou um desenvolvedor web!E eu sou incrível!

O problema é que o navegador não reconhece uma nova linha da mesma forma com a qual estamos acostumados em editores de texto (como o Word, por exemplo). Ele simplesmente elimina todos os espaços entre os elementos e apresenta o resultado na tela.

Se você quiser mostrar dois parágrafos, terá que criar dois elementos que digam isso ao navegador. Faremos isso colocando nossas frases dentro das tags <p> e </p>, que compõem o elemento parágrafo.

Altere as duas frases dentro do elemento body, no arquivo index.html, para que se pareçam com isso:

<p>Eu sou um desenvolvedor web!</p>
<p>E eu sou incrível!</p>

Execute o arquivo index.html para ver o resultado.

Talvez você já tenha percebido:

Faça os exercícios propostos para este capítulo em:

6 - Cabeçalhos

Já sabemos escrever parágrafos, mas imagine se um jornal, um trabalho escolar ou um site tivessem todo o seu conteúdo escrito em um mesmo tamanho de fonte. Seria praticamente impossível de localizar diferentes seções no texto. É por isso que utilizamos cabeçalhos.

Cabeçalhos estão disponíveis em HTML em seis níveis, sendo h1 o mais importante (e maior) e h6 o menos (e menor).

É aconselhável ter um h1 por página. Nenhum ou mais que um poderia deixar confuso um visitante sobre qual o tema ou título principal da página. Além disso, buscadores como Google e Bing utilizam os cabeçalhos para criar uma estrutura da página e isso é importante no ranking dos resultados. Com exceção dessa regra, você pode ter quantos cabeçalhos de outros níveis precisar.

Vamos alterar o código do nosso site, no arquivo index.html, para mostrar alguns cabeçalhos. Antes da primeira frase, insira um elemento h1 e, antes da segunda frase, insira um elemento h2 com o conteúdo que você quiser. O resultado dever ser parecido com isso:

<h1>Seja bem-vindo ao meu site!</h1>
<p>Eu sou um desenvolvedor web!</p>
<h2>Sobre mim</h2>
<p>E eu sou incrível!</p>

Veja o resultado no navegador.

Faça os exercícios propostos para este capítulo em:

7 - Imagens

Ao inserir um elemento de imagem no documento HTML, não estamos adicionando a imagem em si, e sim um caminho para ela. É como se disséssemos ao navegador: “por favor, coloque neste espaço a seguinte imagem que está disponível neste caminho”.

O caminho pode ser a URL para uma imagem em outro site ou a localização dela dentro do nosso servidor. Nesse último caso, digamos que dentro da pasta “meu-site” haja outra pasta chamada “imagens”, e dentro dela tenhamos todas as imagens de nosso site. Poderíamos adicionar uma dessas fotos ao documento HTML da seguinte forma:

<img src="imagens/minha-foto.jpg">

Onde quer que adicionemos esta imagem, é lá que ela irá aparecer quando apresentada ao usuário, ou seja, será respeitada a ordem em que ela se encontra dentro do documento.

Note que o elemento img não possui tag de fechamento! Além disso, este elemento possui um componente que não havia aparecido até agora, o atributo src. Veremos muitos outros atributos ao longo deste livro, mas saiba por ora que atributos estendem a funcionalidade de um elemento. Nesse caso, além de indicarmos que queremos uma imagem naquele local, estamos dizendo que “queremos esta imagem especificamente”.

Crie uma pasta chamada “imagens” dentro da pasta “meu-site”, salve a seguinte imagem nela e insira-a no documento HTML com um elemento img. Depois, veja o resultado no navegador.

http://i.imgur.com/ixsAXVk.jpg

Também é possível adicionar a imagem inserindo a URL acima diretamente no atributo src.

Faça os exercícios propostos para este capítulo em:

8 - Tamanho e acessibilidade em imagens

Agora que temos uma imagem em nosso site, vamos acrescentar alguns detalhes. Começaremos pelo indispensável atributo alt. Este atributo é responsável por fornecer ao navegador um texto alternativo à imagem, dessa forma, caso o navegador falhe em apresentar a imagem ou alguém visite seu site através de um leitor de tela (muito comum entre portadores de deficiências visuais), este texto será apresentado no lugar da imagem. Forneça sempre uma breve descrição da imagem, o suficiente para saber do que se trata sem vê-la.

A imagem anterior ficará assim em nosso site:

<img src="imagens/minha-foto.jpg" alt="Foto do autor do site">

Os dois atributos que compõem nossa imagem atualmente (src e alt) estarão presentes sempre em nossas imagens, mas além deles, podemos ter outros atributos opcionais, como altura (height) e largura (width), que dizem ao navegador qual o tamanho adequado para mostrar a imagem (implicitamente a medida utilizada é o pixel).

Não é aconselhável redimensionar imagens no navegador pois isso afeta a performance do carregamento do site como um todo. Por exemplo, se o arquivo “minha-foto.jpg” tem 100 pixels de altura e 50 pixels de largura e eu gostaria de apresentá-lo com a metade do tamanho, poderia inserí-la no documento HTML da seguinte forma:

<img src="imagens/minha-foto.jpg" alt="Foto do autor do site" width="50" height="25">

Note alguns detalhes nesse exemplo:

Faça os exercícios propostos para este capítulo em:

9 - Listas

Em HTML há duas opções de listas:

Cada item da lista (list item), tanto para listas ordenadas quanto desordenadas, é identificado pela tag <li>.

Sendo assim, adicionaremos uma receita ao nosso site! Listaremos os ingredientes, que não precisam de ordem e os passos que devem ser seguidos em uma ordem específica (não levaremos o bolo ao forno antes de misturar os ingredientes, eu acho).

Adicione este trecho de código depois da imagem, no arquivo index.html:

<h2>Bolo Delícia</h2>
<h3>Ingredientes</h3>
<ul>
    <li>2 xícaras de farinha de trigo</li>
    <li>2 ovos</li>
    <li>1/2 xícara de leite</li>
</ul>
<h3>Modo de preparo</h3>
<ol>
    <li>Misture os ingredientes</li>
    <li>Despeje no lixo</li>
    <li>Não repita isso em casa</li>
</ol>

O exemplo completo (com o código desde o início) está aqui.

Execute o arquivo index.html e veja o resultado no navegador.

Faça os exercícios propostos para este capítulo em:

10 - Links

A primeira linha, do primeiro capítulo deste livro, diz que HTML significa Hypertext Markup Language. Hypertext é o nome complicado para Hyperlink, que é o nome complicado para link! Os links são parte fundamental da internet. Através deles podemos ir de um site para outro em apenas um clique ou executar alguma outra funcionalidade dentro do próprio site.

Por padrão, links têm um estilo diferente do texto comum. Eles são azuis e sublinhados.

O elemento a seguir cria um link para o site da Mozilla:

<a href="https://www.mozilla.org">Conheça a Mozilla!</a>

Que resultará no seguinte elemento em nossa página:

Conheça a Mozilla!

Vamos analisar o que compõe um link, em partes:

  1. O elemento <a> </a> representa uma âncora, que será o texto que estiver entre as tags (não dentro da tag de abertura). Ele é responsável por transformar um mero texto (“Conheça a Mozilla!”) em um caminho para onde você definir no…

  2. atributo href, que representa uma referência a um hypertexto (hypertext reference), ou simplesmente diz ao navegador: “me leve para:”.

  3. O conteúdo do atributo href pode ser um outro site ou uma página em nosso próprio site (também pode nos conduzir a outro ponto dentro da mesma página, como ainda veremos).

Para criar um link para uma outra página dentro de nosso site, basta indicar o nome do arquivo .html que desejamos visitar (similar ao estudado no elemento img). Se a página de nosso site encontra-se na mesma pasta do arquivo que está solicitando (digamos que o arquivo contato.html esteja junto com o arquivo index.html), criamos um link da seguinte forma:

<a href="contato.html">Fale conosco!</a>

Caso o arquivo esteja em outro diretório, simplesmente adicionamos o caminho para o arquivo no destino:

<a href="produtos/smartphone.html">Smartphones</a>

Aqui vimos apenas texto como conteúdo do link (a âncora), porém, saiba que é possível inserir praticamente qualquer elemento dentro de um link, inclusive imagens, e tornar este elemento interativo. Um breve exemplo que nos levaria à página do Google ao clicar sobre seu logo:

<a href="https://www.google.com">
    <img src="logo-google.png" alt="Logotipo Google">
</a>

Faça os exercícios propostos para este capítulo em:

11 - Tabelas

Até a criação do CSS (lá por 1996), usava-se tabelas para criar layouts (rodapés, cabeçalhos, etc.). Se você não está em 1995, sugiro que nunca use tabelas para organizar conteúdo em uma página.

Tabelas são criadas com o elemento table e precisamos definir a estrutura das tabelas célula a célula, linha a linha.

Cada linha é criada utilizando o elemento tr (table row) e cada coluna é criada a partir de células contidas na linha, representadas pelo elemento td (table cell/data).

Uma tabela com duas linhas e duas colunas é criada da seguinte forma:

<table>
    <tr>
        <td>Linha 1, azul</td>
        <td>Linha 1, vermelho</td>
    </tr>
    <tr>
        <td>Linha 2, azul</td>
        <td>Linha 2, vermelho</td>
    </tr>
</table>

Insira esta tabela após o link criado no capítulo anterior, no arquivo index.html e abra-o no navegador.

O resultado pode parecer um pouco confuso. Apesar de nossas células conterem cores, elas não estão pintadas. Isso só será possível com CSS, na segunda parte do livro. É possível ver também que as células “azuis” formaram a primeira coluna, enquanto que as “vermelhas” a segunda.

Faça os exercícios propostos para este capítulo em:

12 - Tabelas avançadas

Por padrão, o texto dos elementos td têm o mesmo estilo de parágrafos, ou seja, em fonte e tamanhos normais. Porém, assim como textos, tabelas também têm cabeçalhos, que neste contexto será o elemento th (table header).

Um cabeçalho é criado simplesmente substituindo um elemento td por um th:

<table>
    <tr>
        <th>Cabeçalho coluna 1</th>
        <th>Cabeçalho coluna 2</th>
    </tr>
    <tr>
        <td>Linha 2, azul</td>
        <td>Linha 2, vermelho</td>
    </tr>
</table>

Um tabela pode ter uma célula que se estende por mais de uma linha. Isso é alcançado com o atributo rowspan e a quantidade de células a ocupar. No exemplo abaixo, “Química” ocupará toda a coluna “Segunda-feira”.

<table>
    <tr>
        <th>Segunda-feira</th>
        <th>Terça-feira</th>
    </tr>
    <tr>
        <td rowspan="2">Química</td>
        <td>Matemática</td>
    </tr>
    <tr>
        <td>Matemática</td>
    </tr>
</table>

Pode-se expandir uma célula por mais de uma coluna também, através do atributo colspan e a quantidade de células a ocupar. No exemplo abaixo, “Química” ocupará a primeira linha tanto de “Segunda-feira” quanto de “Terça-feira”.

<table>
    <tr>
        <th>Segunda-feira</th>
        <th>Terça-feira</th>
    </tr>
    <tr>
        <td colspan="2">Química</td>
    </tr>
    <tr>
        <td>Matemática</td>
        <td>Matemática</td>
    </tr>
</table>

Temos este código até aqui.

Faça os exercícios propostos para este capítulo em:

13 - Formulários

Uma das principais formas de interação entre um site e seus usuários, é através de formulários. Eles permitem que o usuário faça contato com o site, forneça dados de cartão de crédito para uma compra, cadastre-se em um rede social, entre diversas outras opções.

O elemento essencial para criar um formulário é o form. Grande parte dos formulários começa da seguinte forma:

<form action="/obrigado-contato" method="post">

</form>

Aqui temos dois atributos analisados em detalhes:

Ainda sobre o atributo method e os valores que ele aceita, usamos post quando queremos enviar mais que algumas palavras e de forma mais privada (a solicitação para o servidor é enviada longe dos olhos do usuário comum), enquanto que o método get é usado para envio de pequenos formulários, como campos de busca e cadastro de e-mails, quando a solicitação para o servidor é enviada na URL do navegador, como no exemplo abaixo de uma busca no Google sobre “métodos http”:

https://www.google.com.br/search?q=métodos+http

Faça os exercícios propostos para este capítulo em:

14 - Formulários: entrada de texto curta

Criaremos um formulário simples de contato e, para isso, o usuário precisa de um local para inserir seu nome. Esse local é o elemento input.

<form action="/obrigado-contato" method="post">
    <label>
        Nome:
        <input type="text" name="nome">
    </label>
</form>

Insira este trecho de código no arquivo index.html e veja o resultado no navegador. Experimente clicar sobre o título do campo “Nome”. Observe como ao clicar sobre o título, o cursor vai automaticamente para dentro da caixa de texto.

Temos dois elementos novos aqui: input e label.

Label significa rótulo e é exatamente para isso que este elemento serve. Ele rotula outros elementos e é usado principalmente em formulários para facilitar a usabilidade dos usuários e auxiliar quem depende da acessibilidade de seu site. O texto dentro dele é o texto que antecederá a caixa de texto.

O elemento input define uma caixa de texto simples, de apenas uma linha e é ideal para dados curtos como nome, e-mail, telefones, etc. Nosso elemento possui dois atributos:

Uma forma alternativa de escrever o código anterior e que tem o mesmo resultado é atribuindo um identificador (id) ao input e conectando este identificador ao atributo for, do label.

<form action="/obrigado-contato" method="post">
    <label for="campoNome">Nome:</label>
    <input type="text" name="nome" id="campoNome">
</form>

O id pode ter qualquer valor, desde que não contenha espaços, seja único no documento inteiro e seja o único ID do elemento em questão. Portanto, no exemplo anterior onde utilizamos “campoNome”, poderíamos, para simplificar, utilizar apenas “nome”.

Você escolhe qual dos dois modos utilizar.

Faça os exercícios propostos para este capítulo em:

15 - Formulários: entrada de texto longa

Para campos de texto com mais de uma linha (onde um input seria insuficiente), usamos o elemento textarea.

<form action="/obrigado-contato" method="post">
    <label>
        Nome:
        <input type="text" name="nome">
    </label>
    <br>
    <label>
        Mensagem:
        <textarea name="mensagem" rows="4" cols="20"></textarea>
    </label>
</form>

Primeiro, adicionamos um rótulo (label) que está conectado ao textarea através do atributo for. Em seguida, adicionamos o elemento textarea. Vamos aos detalhes:

  1. Não temos um atributo type, já que está explícito no nome do elemento que teremos apenas texto (textarea);
  2. O atributo name tem a mesma função já vista;
  3. rows e cols definem quantas linhas e colunas o campo terá. Se omitidos, o elemento assume um tamanho padrão de acordo com cada navegador;
  4. Por fim, mas não menos importante, temos uma tag de fechamento </textarea>, coisa que não temos no elemento input. Isso porque podemos inserir texto que será carregado por padrão no campo, entre as tags de abertura e fechamento.

A bruxaria aqui fica por conta do elemento br, que cria uma quebra de linha (line break) e deixa nosso formulário mais legível (eu disse legível, não bonito). Apesar de apresentá-lo este elemento somente agora, ele pode ser usado em qualquer lugar, desde dentro de um parágrafo ou cabeçalho até entre elementos, como no exemplo acima.

Faça os exercícios propostos para este capítulo em:

16 - Formulários: radio buttons

Radio buttons permitem que o usuário selecione apenas uma opção entre várias. Abaixo do label do nosso textarea, insira o seguinte trecho de código e veja o resultado no navegador.

<br><br>
O que você está achando deste livro até agora?
<br>
<label>
    <input type="radio" name="qualidade" value="otimo" checked>
    Ótimo
</label>
<label>
    <input type="radio" name="qualidade" value="bom">
    Bom
</label>
<label>
    <input type="radio" name="qualidade" value="razoável">
    Razoável
</label>

Poucas novidades por aqui.

  1. type, que era text, passou a ser radio;

  2. O que dá a funcionalidade que queremos de selecionar apenas uma opção entre várias é que todos radios compartilham do mesmo name;

  3. O atributo value é o valor que será enviado ao servidor no momento da submissão do formulário, de acordo com a opção selecionada;

  4. O atributo checked, no caso de botões radio, só pode ser usado em um elemento e selecionará por padrão este elemento, podendo ser alterado pelo usuário.

Faça os exercícios propostos para este capítulo em:

17 - Formulários: checkboxes

Enquanto que os radio buttons permitem a seleção de apenas uma opção, as checkboxes (caixas de seleção) não têm limites.

Abaixo do nosso último exemplo, insira o seguinte código e visualize o resultado no navegador:

<br><br>
Quem além de você poderia aprender HTML e CSS?
<br>
<label>
    <input type="checkbox" name="indicado" value="mãe" checked>
    Mãe
</label>
<label>
    <input type="checkbox" name="indicado" value="pai">
    Pai
</label>
<label>
    <input type="checkbox" name="indicado" value="amigos">
    Amigos
</label>

Esta frase está ficando frequente. Isso significa que você já tem um conhecimento significativo.

Sem novidades por aqui.

Faça os exercícios propostos para este capítulo em:

18 - Formulários: select

O elemento de seleção, ou select é o elemento ideal para quando o usuário precisa selecionar apenas uma opção entre várias, similar ao radio button, mas existem muitas opções ou você quer deixar as opções mais organizadas.

Insira o seguinte trecho de código após as checkboxes do exemplo anterior e execute o arquivo:

<br><br>
Como você prefere ser chamado(a)?
<br>
<select name="tratamento">
    <option value="senhor">Senhor</option>
    <option value="mestre">Mestre</option>
    <option value="senhora">Senhora</option>
    <option value="deusa" selected>Deusa</option>
</select>

Aqui temos algumas diferenças em relação aos últimos elementos do formulário:

  1. O elemento select é o único que contém o atributo name e contém todas as opções dentro dele;

  2. Cada opção (option) tem um valor (value) que corresponde ao apresentado ao usuário entre as tags <option></option>;

  3. Assim como em outros tipos de input, podemos apresentar ao usuário uma resposta pré-selecionada, neste caso, usando o atributo selected (não confunda com checked do checkbox e radio).

Faça os exercícios propostos para este capítulo em:

19 - Formulários: envio

O envio do formulário é feito através do botão de submissão, ou submit. Através dele, quando o usuário envia o formulário, os dados deste são enviados ao servidor (geralmente) para que sejam processados.

Antes da tag </form>, adicione um botão para enviar o formulário, execute o arquivo index.html no navegador e veja o resultado.

<br>
<input type="submit" value="Enviar formulário sem noção">

Talvez este seja o elemento mais simples do formulário. O atributo type="submit" indica que este elemento submeterá os dados para o valor que estiver no atributo action da tag <form>, enquanto que o atributo value representa o texto que será visível no botão, ao usuário.

Faça os exercícios propostos para este capítulo em:

20 - Formulários: grupos

Apesar de nosso formulário atual ser bem pequeno, os olhos de alguns usuários podem sangrar com tanta desorganização e falta de estrutura. Sem alterar o estilo dele ainda (veremos em breve como melhorar isso com CSS), usaremos dois elementos muito simples para melhorar a usabilidade deste formulário: fieldset e legend. Nosso formulário completo, com a adição destes dois elementos ficará da seguinte forma. Faça as alterações necessárias em seu documento HTML e execute-o para visualizar os resultados.

<form action="/obrigado-contato" method="post">
    <fieldset>
        <legend>Contato</legend>
        <label>
            Nome:
            <input type="text" name="nome">
        </label>
        <br>
        <label>
            Mensagem:
            <textarea name="mensagem" rows="4" cols="20"></textarea>
        </label>
    </fieldset>
    <fieldset>
        <legend>Perguntas</legend>
        O que você está achando deste livro até agora?
        <br>
        <label>
            <input type="radio" name="qualidade" value="Ótimo" checked>
            Ótimo
        </label>
        <label>
            <input type="radio" name="qualidade" value="Bom">
            Bom
        </label>
        <label>
            <input type="radio" name="qualidade" value="Razoável">
            Razoável
        </label>
        <br><br>
        Quem além de você poderia aprender HTML e CSS?
        <br>
        <label>
            <input type="checkbox" name="indicado" value="Mãe" checked>
            Mãe
        </label>
        <label>
            <input type="checkbox" name="indicado" value="Pai">
            Pai
        </label>
        <label>
            <input type="checkbox" name="indicado" value="Amigos">
            Amigos
        </label>
        <br><br>
        Como você prefere ser chamado(a)?
        <br>
        <select name="tratamento">
            <option value="senhor">Senhor</option>
            <option value="mestre">Mestre</option>
            <option value="senhora">Senhora</option>
            <option value="deusa" selected>Deusa</option>
        </select>
    </fieldset>
    <br>
    <input type="submit" value="Enviar formulário sem noção">
</form>

O que foi feito aqui:

  1. Separamos o formulário em duas seções: “contato” e “perguntas”;

  2. Cada seção é criada a partir de um fieldset que circunda os elementos daquele grupo;

  3. O nome de cada grupo é atribuído através do elemento legend, que está posicionado imediatamente após a tag de abertura do fieldset;

  4. Com inclusão da “moldura” proporcionada pelo fieldset, pudemos eliminar algumas quebras de linha (br).

Faça os exercícios propostos para este capítulo em:

21 - Indentação

Ou “da arte de tornar o código legível”. Uma das principais virtudes de um bom código não está no que você escreveu e sim no espaço em branco. Note que até aqui, todo nosso código foi inserido com um padrão de espaço em branco entre os elementos. O navegador não se importa com este espaço deixado fora dos elementos. Portanto, podemos abusar dessa virtude para deixar nosso código melhor organizado.

Veja dois exemplos de organização:

<!DOCTYPE html>
<html>
<head>
<title>Meu documento desorganizado</title>
</head>
<body>
<h1>Seja bem-vindo</h1>
<p>Este é o pior site do mundo</p>
<form action="/ilegível" method="post">
<label>
Mensagem
<textarea name="mensagem" rows="3" cols="30"></textarea>
</label>
<input type="submit" value="Enviar">
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Meu documento organizado</title>
</head>
<body>
    <h1>Seja bem-vindo</h1>
    <p>Este é o melhor site do mundo (ou pelo menos o mais organizado)</p>
    <form action="/sucesso-garantido" method="post">
        <label>
            Mensagem
            <textarea name="mensagem" rows="3" cols="30"></textarea>
        </label>
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Os dois códigos apresentarão o mesmo resultado ao navegador. Em qual dos dois padrões você acredita que será mais fácil fazer alterações, encontrar determinado elemento e encontrar uma tag que você esqueceu de fechar?

A esta organização chamamos de indentação, que nada mais é que organizar de forma hierárquica os elementos. Se um elemento (que chamaremos de pai) tem outro elemento (filho) contido nele, o filho deverá estar localizado alguns espaços à frente. Quantos? Você define o que é melhor. Os espaçamentos mais utilizados variam de dois a quatro espaços ou um “tab”. Neste livro, estou utilizando quatro espaços a cada “tab”.

Faça os exercícios propostos para este capítulo em:

22 - Comentários

Nem sempre apenas o espaçamento tornará o código mais compreensível. Às vezes você precisa deixar mensagens no código para um colega ou para você mesmo no futuro, sobre o porque de um determinado elemento estar naquela posição ou para descrever melhor para qual seção do código está olhando ou até mesmo para excluir da visualização do navegador um trecho de código sem removê-lo definitivamente do documento HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Site do Estevan Maito</title>
</head>
<body>
    <!-- Um comentário de uma linha pode ser escrito assim -->
    <!--
        Um comentário
        com mais de uma
        linha pode ser
        escrito assim.
    -->
    <h1>Seja bem-vindo ao meu site!</h1>
    <p>Eu sou um desenvolvedor web!</p>
    <h2>Sobre mim</h2>
    <!-- O trecho de código abaixo foi substituído até você ser incrível -->
    <!-- O código abaixo não aparecerá no navegador -->
    <!-- <p>E eu sou incrível!</p> -->
    <!-- Mas este irá! -->
    <p>E eu sou legal!</p>
</body>
</html>

De agora em diante, deixaremos comentários em nosso código, iniciando com <!-- e terminando com -->.

Faça os exercícios propostos para este capítulo em:

23 - Seções

A partir deste capítulo veremos como estruturar nossas páginas de forma semântica e organizada, ou seja, cada elemento é tão descritivo por si só que não há necessidade de apelar para comentários, classes e ids (veremos estes dois em breve) para entender o que ele significa. Estes elementos têm função apenas de identificar uma determinanda seção com base em sua funcionalidade.

Uma página muito simples se parece com essa imagem:

HTML semântico

Além das facilidades que estas estruturas proporcionam a nós desenvolvedores, elas também auxiliam na acessibilidade, identificando cada seção para programas leitores de tela, por exemplo.

Faça os exercícios propostos para este capítulo em:

24 - Seções: cabeçalho e navegação

O elemento header define um cabeçalho. Não confunda este cabeçalho com aqueles que identificam textos, como h1 e h2. O header tem o papel de agrupar elementos introdutórios, como logos, alguns menus e títulos, mas sem limitar-se ao topo da página, já que também podemos ter cabeçalhos em artigos e diversos outros lugares da página.

Já o elemento nav é responsável por identificar uma seção de navegação. Aqui podem ser agrupados links que levam a outras páginas do site, pequenos formulários de busca, menus e etc.

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de seções</title>
</head>
<body>
    <header>
        <img src="imagens/logo.jpg" alt="Logo da empresa">
        <p>Site oficial da Estevan Corp.</p>
    </header>
    <nav>
        <p>
            <a href="/contato.html">Contato</a>
        </p>
        <p>
            <a href="/sobre-nos.html">Sobre nós</a>
        </p>
    </nav>
</body>
</html>

Faça os exercícios propostos para este capítulo em:

25 - Seções: principal e secundária

O elemento main corresponde ao principal conteúdo da página e deve ser usado apenas uma vez, dentro do body. Dentro dele teremos formulários, artigos e tudo mais que considerarmos como conteúdo principal da página.

Conteúdo à parte do principal, que não tem relação direta com este, como glossário, biografia do autor, links relacionados, etc., serão englobados pelo elemento aside.

<!-- O código anterior ao body, inclusive, foi omitido para simplificar o exemplo -->
<!-- cabeçalho principal -->
<header>
    <img src="imagens/logo.jpg" alt="Logo da empresa">
    <p>Site oficial da Estevan Corp.</p>
</header>
<!-- navegação do site -->
<nav>
    <p>
        <a href="/contato.html">Contato</a>
    </p>
    <p>
        <a href="/sobre-nos.html">Sobre nós</a>
    </p>
</nav>
<!-- conteúdo principal, formulários de contato, imagens, vídeos -->
<main>
    <h1>Seja bem-vindo</h1>
    <p>Somos uma empresa com mais de 150 anos no mercado [...]</p>
</main>
<!-- conteúdo que faz parte do site mas que não é necessariamente principal -->
<aside>
    <a href="estevan.html">Saiba mais sobre o autor</a>
    <a href="faq.html">Perguntas frequentes</a>
</aside>
<!-- o restante do código também foi omitido -->

Faça os exercícios propostos para este capítulo em:

26 - Seções: artigos e seções genéricas

O conteúdo de uma página é geralmente dividido em diversos blocos de conteúdo relacionado, mas que não tem um nome específico como navegação, cabeçalho e rodapé por exemplo. Estes blocos podem ser agrupados em seções chamadas de section. Uma section pode agrupar outros elementos como também pode estar agrupada dentro de outros elementos, como um article, que define um artigo.

<!-- seção de artigos -->
<section>
    <h2>Artigos</h2>
    <article>
        <h3>HTML é incrível</h3>
        <section>
            <p>Postado em: 20/06/2017</p>
        </section>
        <p>Desenvolva sites e mostre seu poder!</p>
    </article>
    <article>
        <h3>Aprenda a criar sites</h3>
        <p>Criar um site é mais simples do que parece.</p>
    </article>
</section>

Faça os exercícios propostos para este capítulo em:

27 - Seções: rodapé e divs

Direitos autorais, informações de contato e links úteis também têm um elemento específico para repousar no HTML, é o footer (rodapé). Assim como o header, a utlização do rodapé não se limita ao final da página, já que podemos ter notas ao final de um artigo, um botão de curtir depois de uma foto, etc.

<!-- Exemplo de utilização de um footer -->
<footer>
    Todos os direitos reservados a Estevan Maito.
</footer>

Por fim, temos o controverso elemento div (de divisão). É muito comum encontrar sites em que nenhum dos elementos vistos anteriormente são usados e temos apenas divs para separar o conteúdo. Até a introdução da última especificação do HTML, a 5 (o famoso HTML5), não havia outro meio de dividir e organizar o conteúdo senão com div. Hoje, já podemos escrever código muito mais claro com o auxílio das seções vistas anteriormente, mas podem existir momentos em que nenhum daqueles elementos se encaixa, como um bloco de botões para redes sociais ou um bloco de elementos que deve ser agrupado unicamente para alterar seu estilo, por exemplo. Nestes casos, pode-se usar div.

<div>
    <p>Um parágrafo que precisa de um estilo único. O diferentão.</p>
</div>

Faça os exercícios propostos para este capítulo em:

28 - ID

Vimos brevemente o uso de id no capítulo 14, para conectar um label a inputs. O id define um identificador único no elemento que deve ser único também no documento HTML inteiro. Os valores válidos para um id são: letras, números, “_”, “-“ e “.”.

Os principais usos do id são para identificação de estilos (usando CSS), em algum script e links internos (visto no próximo capítulo).

<!-- Um bom exemplo de uso de id -->
<p id="erro">Tente novamente mais tarde</p>

<!-- Péssimo uso do id -->
<p id="meu paragrafo">Não espere que funcione como deveria...</p>

Faça os exercícios propostos para este capítulo em:

29 - Links internos

Já vimos como criar links para outras páginas, tanto dentro de nosso site quanto para outros sites, mas existe mais uma possibilidade que o link nos dá, que é a de criar links dentro da própria página.

Esse tipo de link é muito comum e auxilia os usuários da nossa página a se localizar e navegar mais rápido por ela.

Adicione o seguinte código ao arquivo index.html. A primeira linha deve ser inserida imediatamente abaixo da tag <body> enquanto que a última, imediatamente antes da tag </body>. Feito isso, visualize o resultado no navegador e experimente clicar no link criado no começo da página.

<!-- linha a ser inserida após a tag <body> -->
<a href="#fim">Ir para o fim da página</a>

<!-- linha a ser inserida antes da tag </body> -->
<p id="fim">Você chegou ao fim!</p>

O valor do atributo href do link acima é igual ao valor do id que queremos como destino (nesse caso o destino será o elemento <p> com id="fim"), acrescido de # no começo.

Faça os exercícios propostos para este capítulo em:

30 - Áudio e vídeo

Adicionar áudio e vídeo a uma página vem junto com alguns problemas de compatibilidade entre os navegadores. Isso quer dizer que se o seu objetivo for atingir o máximo de pessoas possíveis para um vídeo ou áudio, talvez você acabe com diversos arquivos apenas para tocar um “bip”. Neste livro, manteremos nosso foco em atingir o melhor resultado usando o mínimo de código possível e isso implica em usar apenas um formato para cada mídia: .mp3 para áudio e .mp4 para vídeo.

Como criar estes arquivos foge do escopo do livro.

<audio src="exemplo.mp3" controls></audio>
<video src="exemplo.mp4" width="360" height="240" controls></video>

Com exceção das próprias tags, quase tudo aqui é conhecido, com exceção do atributo controls que, quando presente, adiciona controles (play, pause, barra de tempo, etc.) ao áudio ou vídeo em que for adicionado.

A forma mais segura (e menos custosa) de inserir mídia a uma página é utilizar serviços específicos que disponibilizam seu conteúdo de forma muito fácil, como a opção de incorporar vídeos do YouTube, por exemplo.

Faça os exercícios propostos para este capítulo em:

31 - Iframes

Iframes são responsáveis por carregar páginas web dentro de outras páginas web. Tome cuidado com as páginas que são carregadas dentro de sua página, ou melhor, evite ao máximo fazer isso. Iframes trazem consequências sérias em performance, acessibilidade e segurança. Dados sensíveis podem ser capturados por hackers através de um iframe. Um exemplo muito comum para o uso de iframe é incorporar vídeos do YouTube à página.

<!-- o próprio YouTube fornece o código pronto -->
<iframe src="https://www.youtube.com/embed/boanuwUMNNQ" width="420" height="315" allowfullscreen></iframe>

Aqui temos atributos praticamente iguais aos de uma imagem, com exceção do allowfullscreen, que dá permissão para a execução do vídeo em tela cheia.

Caso seja imprescindível utilizar um iframe que insira uma página de outro site ao seu, use o atributo sandbox. Este atributo bloqueia a execução de scripts, formulários, popups, etc., a partir do iframe. Não torna o elemento 100% seguro, mas dificulta o caminho do atacante.

<iframe src="https://developer.mozilla.org" width="100%" height="400" sandbox></iframe>

Faça os exercícios propostos para este capítulo em:

32 - Blocos e linhas

Cada elemento, por padrão, pode ser apresentado em uma de duas formas ao usuário: em bloco (block) ou em linha (inline).

Elementos de bloco criam uma nova linha e lá se estabelecem. Sem alterar suas propriedades com CSS, eles não terão nada ao seu lado. Exemplos desses elementos são: div, p, h1 e todos os demais cabeçalhos, footer e todos os outros elementos dos capítulos de seções, form, ul, entre outros.

Elementos em linha não criam uma nova linha. Por padrão, mesmo que coloquemos seus códigos um abaixo do outro, eles serão apresentados lado a lado. Exemplos são: input, img, a, span, entre outros.

<h1>Cabeçalhos são blocos</h1>
<p>Parágrafos também</p>

<!-- inputs são elementos em linha -->
<input type="text">
<img src="bem-como-imagens.jpg" alt="Imagem em linha">
<a href="#">Link são elementos em linha e podem aparecer dentro de parágrafos!</a>

<!-- porém, um elemento só é em linha em relação ao contexto em que está inserido -->
<div>
    <a href="#">Sou em linha, mas estou dentro de um bloco!</a>
</div>
<div>
    <input type="text">
    <a href="#">Estou na mesma linha do input, mas separado do link acima.</a>
</div>

Aprenderemos formas de mudar esse comportante em seguida com CSS!

Faça os exercícios propostos para este capítulo em:

33 - Mais texto

Os seguintes elementos alteram o estilo do texto:

Adicione o seguinte trecho de código ao arquivo index.html e visualize os resultados no navegador.

<p>Este texto é <em>itálico</em>.</p>
<p>Este texto é <strong>negrito</strong>.</p>
<p>Este texto está <mark>marcado</mark>.</p>
<p>Este texto está <u>sublinhado</u>.</p>

Faça os exercícios propostos para este capítulo em:

34 - Meta tags

Meta tags são elementos invisíveis ao usuário, que se comunicam diretamente com o navegador, e que não podem ser representadas por outro elemento HTML.

Saiba que existem diversos formatos e utilidades para as meta tags. Exploraremos aqui seu uso mais básico.

Insira o seguinte código dentro do elemento head; É lá que ele ficará em todos os casos.

<meta charset="utf-8">
<meta name="description" content="A melhor página do mundo, para os melhores usuários do universo. Aqui você encontra tudo sobre ABC.">

A primeira tag informa ao navegador qual conjunto de caracteres estamos utilizando (charset). As chances são grandes de que você sempre utilizará o valor utf-8.

A última, dá uma breve introdução ao conteúdo que será encontrado na página e é utilizada principalmente pelos mecanismos de busca para complementar o resultado para seu site.

Ao final do livro criaremos uma página de exemplo com outras meta. Por enquanto, estas serão o suficiente.

Faça os exercícios propostos para este capítulo em:

35 - Validando HTML

É fundamental testar seu código HTML contra os padrões da linguagem. Este passo pode te mostrar problemas que você não tinha percebido enquanto escrevia seu código e ainda garante que este está em conformidade com o que os navegadores esperam receber, ou seja, seu código será apresentado ao usuário da forma que você espera.

A principal ferramenta para realizar esta validação é desenvolvida pelo próprio comitê responsável pelo desenvolvimento dos padrões da Web (World Wide Web Consortium, ou W3C), e está disponível gratuitamente no endereço abaixo:

https://validator.w3.org/

Chegamos ao fim da Parte 1. Seu código até o momento deve estar parecido com este.

Este capítulo não tem exercícios.

PARTE 2 - CSS

36 - Escrevendo CSS

CSS (Cascading Style Sheets), ou Folhas de Estilo em Cascata, é uma linguagem que instrui o navegador como apresentar uma página. Essas instruções basicamente dizem ao navegador como (lembra que o HTML dizia “onde”?) cada parte da página deve aparecer, seja um parágrafo azul, uma seção de dimensões específicas posicionanda lateralmente, imagens e etc.

Você pode escrever CSS no mesmo programa em que escreveu HTML até agora. Não é necessária nenhuma modificação, com exceção do nome do arquivo que será salvo. Documentos CSS são identificados através de uma extensão própria. O nome do arquivo termina com .css, como em estilos.css.

As regras para escrita dos nomes dos arquivos css são as mesmas do html.

Faça os exercícios propostos para este capítulo em:

37 - Escrevendo CSS: no HTML com style

Existem duas formas de escrever CSS dentro do HTML, a primeira delas é utilizando o elemento style.

Para não deixar nosso exemplo construído no arquivo index.html feio (está lindo até agora), vamos criar um arquivo HTML novo que servirá de laboratório para nossas experiências com CSS.

Crie na pasta “meu-site” um arquivo chamado laboratorio.html, com o seguinte conteúdo e execute no navegador.

<!DOCTYPE html>
<html>
<head>
    <title>Laboratório de CSS</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Meu primeiro teste com CSS</h1>
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</body>
</html>

Entraremos em detalhes sobre a forma de escrever CSS no capítulo 40. Por enquanto, nos ateremos à localização desse código.

Você deve ter visto que os três parágrafos agora estão em vermelho. Isso porque o elemento style cria um espaço para inserir as regras CSS dentro dele. Os prós e contras deste método são:

Prós

Contras

Utilize esta técnica apenas se os estilos para a página em questão forem poucos e exclusivos dela.

Faça os exercícios propostos para este capítulo em:

38 - Escrevendo CSS: no HTML em linha

A segunda forma de escrever CSS dentro do HTML é em linha, utilizando o atributo style (não o elemento) no elemento específico.

Apague o elemento style do exemplo anterior, altere o código para o seguinte e execute no navegador.

<!DOCTYPE html>
<html>
<head>
    <title>Laboratório de CSS</title>
</head>
<body>
    <h1>Meu primeiro teste com CSS</h1>
    <p style="color: red;">Primeiro parágrafo</p>
    <p style="color: red;">Segundo parágrafo</p>
    <p style="color: red;">Terceiro parágrafo</p>
</body>
</html>

Visualmente, não há diferença no resultado deste para o exemplo do capítulo anterior. A diferença está nos prós e contras:

Prós

Contras

Evite utilizar este método.

Faça os exercícios propostos para este capítulo em:

39 - Escrevendo CSS: em arquivo externo

Será a forma de escrever CSS adotada daqui em diante e aconselho que você utilize em seus projetos também (a menos que seus estilos tenham menos de 100 linhas, então pode-se cogitar o uso de estilos dentro do elemento style, direto no HTML).

Na pasta “meu-site”, crie um arquivo chamado estilos.css com o seguinte conteúdo:

p {
    color: red;
}

E altere o arquivo laboratorio.html:

<!DOCTYPE html>
<html>
<head>
    <title>Laboratório de CSS</title>
    <!-- Esta linha é responsável por carregar o arquivo externo de CSS -->
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h1>Meu primeiro teste com CSS</h1>
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</body>
</html>

Execute o arquivo laboratorio.html no navegador e veja os resultados.

Visualmente, mais uma vez, não há diferença no conteúdo apresentado, porém, temos algumas novidades no código.

Primeiro, temos um arquivo novo, estilos.css. Nele vamos escrever todo nosso CSS de agora em diante. Note que o conteúdo deste arquivo é o mesmo que preenchia o elemento style.

Segundo, para que o estilo escrito em estilos.css seja aplicado ao conteúdo de laboratorio.html, precisamos conectar os dois arquivos. Isso é alcançado através do elemento link.

O elemento link é composto por dois atributos:

Prós

Contras

Os prós superam os contras se o uso desta técnica for consciente. Evite criar muitos arquivos. Um documento bem comentado e organizado pode conter todas as regras de um site.

Faça os exercícios propostos para este capítulo em:

40 - Estrutura das regras

Analisaremos o CSS abaixo…

p {
    color: red;
}

…a partir da seguinte matriz:

seletor {
    propriedade: valor;
}

  1. seletor: seleciona o(s) elemento(s) a serem estilizados. Pode ser o nome de um elemento (exatamente como aparece no HTML, sem os sinais <>), uma classe ou um id (veremos em breve estes dois últimos). No exemplo acima, aplicamos a cor vermelha a todos os p (parágrafos);

  2. propriedade: identifica qual característica será alterada (ex: fonte, cor de fundo, largura). No exemplo, é a propriedade color (cor). É seguida imediatamente por : (dois pontos) e um espaço;

  3. valor: especifica qual valor será aplicado à propriedade em questão (ex: que fonte será aplicada, qual a cor do fundo, qual a largura). No exemplo, alteramos a cor (color) para vermelho (red);

  4. pares de propriedade e valor são chamados de declarações. Cada declaração é finalizada com ; (ponto e vírgula);

  5. as declarações são colocadas dentro de um bloco de declarações, identificado por chaves ({});

  6. o conjunto (do seletor à chave final }) corresponde a uma regra.

Faça os exercícios propostos para este capítulo em:

41 - Classes

No capítulo 28, vimos como o atributo id cria um identificador único. Neste capítulo, as classes (que não têm nada a ver com classes da programação orientada a objetos) nos possibilitarão identificar mais de um elemento com um mesmo identificador. Este comportamento será essencial para estilizarmos diferentes elementos com uma mesma regra (ex: um cabeçalho e um parágrafo, entre centenas de outros, devem ser azuis).

No documento laboratorio.html, abaixo do último parágrafo, insira os seguintes elementos:

<p class="primeiro feito">Comprar pão</p>
<p class="segundo feito">Tirar o lixo</p>
<p class="terceiro">Consertar janela</p>

Adicionamos classes a um elemento através do atributo class, de forma que cada classe esteja separada das demais por um espaço (isso nos impede de criar classes com espaços no nome, o que criaria outra classe).

Faça os exercícios propostos para este capítulo em:

42 - Seletores de tipo

O capítulo 40 nos introduziu ao conceito de seletores. Eles são usados para selecionar os elementos do documento HTML que queremos estilizar.

Existe uma grande variedade de seletores disponível, que nos permite selecionar elementos com grande precisão. Neste e nos seguintes capítulos nos dedicaremos aos seletores simples, representados por tipos (ou elementos), classes e ids.

O seletor de tipo é a forma mais simples de atingir todos os elementos de um determinado tipo. Atualmente, já temos um exemplo em funcionamento em nosso arquivo estilos.css, em que selecionamos todos os parágrafos do documento HTML. Edite este documento para que o cabeçalho fique azul (insira abaixo da regra do elemento p):

h1 {
    color: blue;
}

Execute o arquivo laboratorio.html e veja o resultado no navegador.

Faça os exercícios propostos para este capítulo em:

43 - Seletores de classe

No capítulo 41 adicionamos três parágrafos com classes ao arquivo laboratorio.html. Neste exemplo selecionaremos elementos específicos através destas classes.

Ao final de estilos.css adicione o seguinte código e visualize o resultado no navegador:

.primeiro {
    color: green;
}

.feito {
    font-weight: bold;
}

O seletor de classe consiste em um ponto (.), seguido pelo nome da classe. No exemplo acima, dois parágrafos com a classe feito terão o peso da fonte (font-weight) alterado para negrito (bold), enquanto que o parágrafo com a classe primeiro ficará verde.

Faça os exercícios propostos para este capítulo em:

44 - Seletores de id

Na sequência dos últimos três parágrafos com classes no arquivo laboratorio.html, adicione o seguinte código:

<h2 id="erro">Ooops!</h2>

Adicione ao arquivo estilos.css o seguinte trecho também e visualize o resultado no navegador (executando o arquivo laboratorio.html):

#erro {
    background-color: red;
}

O seletor de id é a forma mais fácil de selecionar apenas um elemento e consiste em um sustenido (#), seguido pelo nome do id. Lembre-se que um elemento pode ter apenas um id e este id deve ser único no documento inteiro.

No exemplo acima, alteramos a cor de fundo (background-color) para vermelho.

Evite usar ids para alterar o estilo de um elemento. Ainda que no momento haja a necessidade de estilizar apenas um elemento, estilos aplicados a um id ficam restritos àquele elemento, enquanto que uma classe torna aquele mesmo estilo aplicável a quaisquer outros elementos.

Faça os exercícios propostos para este capítulo em:

45 - Cascata

Na introdução ao CSS vimos que a letra C, de CSS, significa cascata. No nível mais básico, isso significa que a ordem das regras importa. Ou seja, uma regra especificada posteriormente tem maior importância que uma regra no começo do documento. Se isso pareceu complicado, saiba que você já tem um exemplo pronto, desde o capítulo 43.

Ao executar o exemplo daquele capítulo você deve ter percebido que um dos parágrafos, entre tantos vermelhos, ficou verde. Isso porque a regra que atinge todos os parágrafos e os pinta de vermelho aparece antes da regra .primeiro, que está vinculada a um parágrafo e o pinta de verde.

A ordem em que os estilos são aplicados é:

  1. Importância

  2. Especificidade

  3. Ordem no código

Acabamos de aprender como a ordem das regras no código afeta o resultado exibido no navegador. As demais regras serão vistas ao longo do livro e têm algumas peculiaridades. Talvez este seja o conceito mais complexo e poderoso do CSS. Por sua compreensão ser fundamental, introduzirei os demais conceitos (mais complexos) futuramente para não confundir você.

Faça os exercícios propostos para este capítulo em:

46 - Cores

Até agora, usamos cores indicando seu nome em inglês. A lista de cores possíveis utilizando seu nome é limitada a aproximadamente 150 nomes. Porém, existem outras formas de indicar cores, como RGB, RGBa (usada para transparências), hexadecimal, entre outras.

Neste capítulo, detalharei o funcionamento de cores em RGB e em hexadecimal e passaremos a utilizar o hexadecimal para o restante do livro. Os demais padrões, apesar de simples, tomariam um espaço considerável da nossa capacidade de memorizar neste momento. Você pode pesquisá-los na internet a qualquer momento.

A notação de uma cor em hexadecimal respeita o padrão RGB (red green blue): #RRGGBB ou #RGB (# seguido por caracteres hexadecimais). Assim, a cor blue (experimente alterar a cor de todos os parágrafos para ela) pode ser reescrita da seguinte forma, nos formatos RGB e hexadecimal, com o mesmo resultado:

/* 00 - Red, 00 - Green, FF - Blue */
/* maiúsculas e minúsculas são aceitas */
#0000ff
#0000FF
/* caso um par seja composto por números iguais, pode-se escrever apenas um deles */
#00f
#00F
/* 0 - Red, 0 - Green, 255 - Blue */
/* as notações com e sem espaços têm o mesmo efeito */
rgb(0, 0, 255)
rgb(0,0,255)
/* também é possível indicar a porcentagem de cada cor */
/* 0% - Red, 0% - Green, 100% - Blue */
rgb(0%,0%,100%)

Veja alguns exemplos de cores comuns, escritas em hexadecimal:

Faça os exercícios propostos para este capítulo em:

47 - Herança

Em CSS, herança se comporta como na vida real, passando propriedades de (elemento) pai para (elemento) filho.

Por exemplo, um um pai tem quatro itens:

Algumas propriedades suas serão passadas ao seus filhos (mil reais e uma casa), enquanto que outras são únicas do pai (peso e altura). Em CSS não existe uma regra fixa que diga qual propriedade passará de pai para filho, mas o bom senso impera. Se eu aplicar uma propriedade de cor de fonte (color) a um bloco (um header, por exemplo), os parágrafos, cabeçalhos e todo o texto que estiver lá dentro receberá as mesmas propriedades de cor (a menos que eu altere cada um individualmente), enquanto que as imagens não, afinal, não é possível alterar o texto de um imagem a não ser em um editor de imagens.

Margens, bordas, altura, largura, imagem de fundo, entre outros, NÃO são herdados. Seria bizarro se eu aplicasse uma margem ao elemento pai mais externo (html) e TODOS os demais elementos internos herdassem este espaçamento. Em uma reação em cadeia, logo eu teria conteúdos com vinte vezes mais margem que o elemento alvo inicialmente. A regra aqui é usar o bom senso e testar. Não tenha medo de aplicar estilos a um determinado elemento e executar dezenas de vezes o documento no navegador para visualizar os resultados.

Ao arquivo estilos.css, adicione o seguinte código ao final das demais regras (queremos que esta sobreponha as demais, no efeito cascata):

body {
    color: orange;
    text-decoration: underline;
}

Execute no navegador e visualize o resultado. Apenas o último cabeçalho (h2) foi pintado, mas todos os demais elementos receberam o sublinhado (text-decoration: underline). Mesmo nossa regra estando posicionada por último, os demais elementos continuam com as mesmas cores de antes. Isso se deve à especificidade (vista no decorrer do livro).

Herança é muito importante, pois evita que tenhamos que repetir o mesmo código para diversos elementos. Dessa forma, um estilo aplicado ao elemento pai pode ser herdado pelos filhos.

Faça os exercícios propostos para este capítulo em:

48 - Medidas

Em CSS existem diversas formas de declarar medidas de comprimento, separadas em dois grandes grupos:

Crie duas div em laboratorio.html, uma com a classe absoluto e outra com a classe relativo:

<div class="absoluto"></div>
<div class="relativo"></div>

O CSS destas duas classes será o seguinte (no arquivo estilos.css). Além disso, adicione ao body a altura de 800px:

/* ao body acrescente a altura */

body {
    /* demais propriedades acima */
    height: 800px;
}

.absoluto {
    width: 100px;
    height: 100px;
    background-color: red;
}

.relativo {
    width: 30%;
    height: 30%;
    background-color: blue;
}

Execute o exemplo no navegador e experimente alterar a largura do navegador arrastando as bordas da janela. Observe como o exemplo com medidas absolutas não é afetado por nada, enquanto que a caixa com medidas relativas varia a largura (mudando a altura do body, a caixa se adaptará ao novo valor).

Usaremos a medida que melhor couber em cada momento daqui em diante.

Faça os exercícios propostos para este capítulo em:

49 - Caixas (box-model)

Tudo em CSS é uma caixa. Experimente adicionar ao seletor universal (*; atinge todos os elementos) uma borda:

* {
    /* veremos bordas em detalhes em um capítulo a parte, a seguir */
    border: 1px solid black;
}

Veja o resultado no navegador e exclua esta regra.

Este conceito é a base de qualquer layout na web. Cada elemento é representado como uma caixa retangular composta pelo conteúdo, padding (espaço interno ao redor do conteúdo), border (borda; delimita interno e externo) e margin (margem; camada mais externa, ao redor da borda).

A imagem abaixo ilustra isso:

Box model

  1. A área do conteúdo (content) é a área que contém o conteúdo do elemento, incluindo outros elementos que forem filhos deste elemento;

  2. A área do padding representa a margem interna, localizada entre a borda e o conteúdo;

  3. A área da borda (border) fica entre o padding e a margem;

  4. A área da margem (margin) representa a margem externa da caixa.

Cada um destes elementos será detalhado nos próximos capítulos, antes, vejamos um exemplo. Adicione o CSS e HTML abaixo aos seus respectivos documentos:

<div class="caixa">Eu sou uma caixa!</div>

A cada linha adicionada à classe .caixa, execute o arquivo laboratorio.html e veja o resultado.

.caixa {
    background-color: red;
    padding: 10px;
    border: 5px solid black;
    margin: 10px;
}

Por padrão, o padding é contabilizado no tamanho do elemento, ou seja, o seguinte exemplo não resulta em uma largura de 100px e sim 140px (20px de cada lado):

width: 100px;
padding: 20px;

A solução para isso é adicionar uma declaração que diz ao navegador para contabilizar a largura como tudo até a borda do elemento, assim, o resultado anterior teria 100px de largura total, 20px de padding em cada lado e 60px de espaço para o conteúdo (100 de largura - 20 de padding em cada lado = 60). Adicione esta linha à regra do elemento:

box-sizing: border-box;

Faça os exercícios propostos para este capítulo em:

50 - Padding

Já vimos que o padding é responsável pelo espaço interno da caixa, entre o conteúdo e a borda. Quando o conteúdo tem uma cor ou imagem de fundo, este irá se estender ao padding, como no exemplo do capítulo anterior.

Existem duas formas de aplicar valores ao padding:

  1. Indicando o valor de cada lado:
/* cima */
padding-top: 10px;
/* direita */
padding-right: 10px;
/* baixo */
padding-bottom: 10px;
/* esquerda */
padding-left: 10px;
  1. Abreviando em uma única expressão:
padding: 10px;

O valor acima aplica o mesmo valor de 10px para todos os lados.

Podemos ainda usar a forma abreviada para indicar valores diferentes para cada lado, da seguinte forma:

padding: 10px 15px 10px 15px;

No exemplo anterior, os valores são declarados no sentido horário, começando pelo topo (top), ou seja, top, right, bottom, left.

No último caso, poderíamos abreviar ainda mais, já que temos os mesmos valores para top e bottom, right e left. O resultado seria:

padding: 10px 15px;

O primeiro valor representa top e bottom, enquanto que o segundo right e left.

Por fim, estas formas têm o mesmo resultado:

/* cima */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

padding: 10px 10px;

padding: 10px;

Faça os exercícios propostos para este capítulo em:

51 - Bordas

Ao final do padding começa a borda do elemento, ou border, que se estende até o início da margem.

Usaremos apenas o formato abreviado da declaração de borda, que determina a espessura, estilo e cor da borda.

O elemento caixa tem, até o momento a seguinte declaração de borda:

border: 5px solid black;

Onde 5px define a espessura, solid o estilo (experimente alterar para dotted (pontilhado) ou dashed (tracejado)) e black a cor, que pode ter qualquer nome válido de cor ou valor em RGB, hexadecimal, etc.

Também é possível arredondar os cantos da borda usando a propriedade border-radius com o valor de alguma medida de comprimento. Experimente adicionar à .caixa:

border-radius: 3px;

Faça os exercícios propostos para este capítulo em:

52 - Margem

A margem (margin) representa a área ao redor do elemento (caixa) e afasta este de outros elementos. As formas de aplicar valor às margens seguem as mesmas regras que se aplicam ao padding.

Estas formas têm o mesmo resultado:

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

margin: 10px 10px;

margin: 10px;

Apesar disso, as margens se comportam de forma particular, principalmente quando a margem de um elemento toca a de outro. Esse comportamento é chamado de margin collapsing ou “colapso de margem”. Quando dois elementos se tocam, a distância entre eles é o valor da maior margem entre os dois, e não sua soma.

Este comportamento pode ser visto adicionando-se outra caixa abaixo da que já temos em laboratorio.html.

<div class="caixa">Eu sou uma caixa 2!</div>

Alterando-se o valor de margin na classe .caixa é possível ver que a distância entre as duas é a mesma que a aplicada ao topo ou laterais, e não a soma das duas.

Faça os exercícios propostos para este capítulo em:

53 - Texto

Texto é o coração da web. Conteúdo atualmente é um dos maiores indicadores de sucesso de uma página. De que adianta o melhor layout, ser a melhor empresa em determinado ramo, ter os melhores produtos se não formos capazes de capturar a atenção do usuário através de conteúdo que importe para ele? Pelo menos é o que eu e a Google (mais especificamento o Google Search) achamos. Há algum tempo o mecanismo de ranking de páginas do Google já não utiliza palavras-chave com tanto peso como há algum tempo. Hoje seus algorítmos já são capazes de determinar do que uma página se trata através de seu conteúdo.

Mas só bom conteúdo não adianta. É preciso apresentar o conteúdo de forma que encante o usuário. E é isso o que faremos em breve (antes vamos continuar o esforço de deixar a página mais feia).

Adicione os seguintes trechos de código aos arquivos laboratorio.html e estilos.css, respectivamente:

<p class="texto-padrao">
    Texto é o coração da web. Conteúdo atualmente é um dos maiores
    indicadores de sucesso de uma página.
</p>

.texto-padrao {
    color: #333;
    letter-spacing: 2px;
    line-height: 2;
    text-decoration: underline;
    text-align: center;
}

Visualize os resultados no navegador.

O papel de cada regra:

  1. color: define a cor do texto;

  2. letter-spacing: altera o espaçamento entre cada letra;

  3. line-height: altera a altura de cada linha. 1 é o padrão;

  4. text-decoration: responsável pela decoração do texto. Adiciona uma linha sob (underline), sobre (overline) ou através (line-through) do texto;

  5. text-align: altera o alinhamento do texto. Os valores mais comuns são: left, right e center.

Faça os exercícios propostos para este capítulo em:

54 - Fontes

Aos estilos atuais de body e h1, faça as modificações necessárias para que as regras fiquem iguais às seguintes e visualize os resultados no navegador:

h1 {
    color: blue;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
}

body {
    height: 500px;
    font-family: sans-serif;
}

No cabeçalho h1, alteramos as seguintes propriedades:

  1. font-family: especifica uma lista de fontes em que o texto deve ser exibido. Cada valor é separado por vírgula e diz ao navegador: “Carregue esta fonte, mas se não tiver, carregue esta outra” e assim por diante, até chegar à última opção que geralmente é um padrão em que o navegador carregará uma determinada fonte padrão naquela categoria (serif para fontes com serifa, sans-serif para fontes sem serifa e monospace para fontes monoespaçadas). O conceito de serifa foge ao escopo deste livro;

  2. font-size: determina o tamanho da fonte;

  3. font-style: altera o estilo da fonte e pode ser normal, italic e oblique;

  4. font-weight: corresponde à espessura dos caracteres, pode ser bold (negrito), normal ou um valor numérico especificado pela própria fonte.

No body apenas dissemos ao navegador para aplicar qualquer fonte que não tenha serifa (sans-serif).

Faça os exercícios propostos para este capítulo em:

55 - Listas

A propriedade mais importante para um lista é list-style, que especifica o estilo da lista (o tipo do marcador, a posição e até uma imagem para ele, se for o caso).

Crie uma lista em laboratorio.html e visualize o resultado no navegador. Em seguida, mude o estilo da lista e veja o que mudou.

<ul class="menu">
    <li>Início</li>
    <li>Sobre</li>
    <li>Produtos</li>
    <li>Contato</li>
</ul>

li {
    list-style: square;
}

No exemplo anterior a propriedade list-style foi alterada para square (quadrado). Outros valores possíveis são: disc, decimal, none (nenhum), entre outros.

Podemos criar um menu a partir do exemplo anterior alterando o comportamento de cada li, de bloco para em linha (se precisar, volte ao capítulo 32 para rever o conceito de blocos e linhas).

Altere a regra que atinge os li para o seguinte:

li {
    list-style: none;
    display: inline-block;
    padding: 5px;
}

Neste exemplo, removemos o estilo da lista (list-style: none) e alteramos o comportamento de cada li para que ficassem como blocos, porém em linha! Fique à vontade para adicionar links (a) ao redor do texto de cada li para transformar o exemplo em um menu real.

Faça os exercícios propostos para este capítulo em:

56 - Tabelas

Vamos trazer para o laboratorio.html um exemplo do arquivo index.html.

<table>
    <tr>
        <th>Segunda-feira</th>
        <th>Terça-feira</th>
    </tr>
    <tr>
        <td rowspan="2">Química</td>
        <td>Matemática</td>
    </tr>
    <tr>
        <td>Matemática</td>
    </tr>
</table>

A ele adicionaremos o seguinte estilo:

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid white;
    padding: 5px;
    background-color: tomato;
}

Primeiro, no elemento table, alteramos a propriedade border-collapse para que as bordas colapsem (se unam, através do valor collapse. O padrão é separate). Em seguida, para não repetir a mesma regra para dois elementos diferentes, listamos os elementos que devem receber determinado estilo, separados por vírgula, e damos uma borda às células e cabeçalhos da tabela. As demais regras já são conhecidas.

Faça os exercícios propostos para este capítulo em:

57 - Imagens de fundo

Usaremos a seguinte imagem para simular o cabeçalho de uma página com uma imagem de fundo:

http://i.imgur.com/UIp1qfs.jpg

Adicione ao laboratorio.html o seguinte código:

<header class="imagem-fundo">
    <h1>Bovinos</h1>
    <p>Essa carne, é Bovinos</p>
</header>

E ao estilos.css o seguinte código. Visualize o resultado no navegador.

.imagem-fundo {
    background-image: url("http://i.imgur.com/UIp1qfs.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    width: 100%;
    padding-top: 200px;
    text-align: center;
}

As quatro primeiras declarações são nosso foco aqui.

  1. background-image: especifica a localização de uma imagem, que pode estar em nosso servidor (na pasta “imagens”) ou em algum outro lugar na internet, como no exemplo. O caminho para a imagem é precedido pela palavra url e fica entre parênteses e aspas ("");

  2. background-repeat: determina se a imagem deve ser repetida caso haja espaço para tal. Os valores aceitáveis são repeat, no-repeat, repeat-x (repete no eixo x), repeat-y (repete no eixo y), entre outros;

  3. background-size: altera o tamanho da imagem ao fundo. Pode receber um valor numérico em alguma medida do CSS (px, em, %, etc.) ou uma palavra chave como cover (que cobre automaticamente o espaço do elemento, podendo esticar a imagem proporcionalmente para que isso ocorra) e contain (a imagem será apresentada inteiramente no elemento, mesmo que sobre espaço ao redor dela);

  4. background-position: especifica a posição da imagem ao fundo. Os valores possíveis são medidas numéricas e valores como top, left, center, bottom e right.

Os demais valores já são familiares.

Faça os exercícios propostos para este capítulo em:

58 - Posicionamento

Até agora, todos nossos elementos estão posicionados em suas posições padrão. Podemos alterar este comportamento utilizando a propriedade position.

Insira o seguinte código em seus respectivos arquivos e visualize o resultado no navegador:

<div class="posicao absoluta">Absoluta</div>
<div class="posicao fixa">Fixa</div>
<div class="posicao relativa">Relativa</div>
<div class="posicao estatica">Estática</div>

.posicao {
    height: 100px;
    width: 100px;
}

.absoluta {
    background-color: red;
    position: absolute;
    top: 20px;
    right: 40px;
}

.fixa {
    background-color: green;
    position: fixed;
    top: 0;
    left: 40px;
}

.relativa {
    background-color: blue;
    position: relative;
    top: 40px;
    left: 120px;
}

.estatica {
    background-color: black;
    position: static;
}

O código com apenas este exemplo pode ser visualizado aqui.

Cada posição acima comporta-se de maneira diferente, posicionada através das propriedades top, right, bottom e left, que indicam a distância do elemento a partir de cada lado da página. vamos analisar cada uma:

Faça os exercícios propostos para este capítulo em:

59 - Ordem (z-index)

Aproveitando o exemplo do capítulo anterior, podemos ver que alguns elementos se sobrepoem. Talvez a ordem em que em eles foram empilhados pelo navegador não seja a melhor para nosso layout, então alteraremos a ordem em que os elementos são apresentados com a propriedade z-index. Note que o navegador ordena os elementos de acordo com a ordem em que foram escritos no HTML.

Adicione a linha abaixo a sua respectiva classe:

.fixa {
    /* o código acima permance inalterado */
    z-index: 1;
}

Veja aqui um exemplo “limpo”.

Veja que a caixa “fixa” agora sobrepõe a caixa “relativa”, isso porque, por padrão, todos os elementos herdam a propriedade z-index do elemento pai, que inicialmente é igual a auto.

Com exceção dos elementos estáticos (position: static), os demais podem ter a ordem de apresentação alterada.

Faça os exercícios propostos para este capítulo em:

60 - Seletores de atributos

Outra forma de selecionar elementos (mais avançada), é com base em seus elementos.

Adicione o código HTML e CSS aos seus resectivos documentos e visualize o resultado no navegador:

Nome: <input type="text" name="nome">
Email: <input type="email" name="email">

[type="email"] {
    border: 1px solid red;
}

[name="nome"] {
    border: 2px solid magenta;
}

[type] {
    background-color: yellow;
}

Aqui selecionamos dois elementos distintos com base em seus atributos. Qualquer elemento que tenha um atributo pode ser atingido por este formato de seletor, contato que respeite o seguinte formato:

  1. O conteúdo do seletor deve estar entre colchetes [];

  2. Caso seja necessário atingir um elemento com atributo de valor específico, o restante do atributo é escrito da mesma forma em que está inserido no HTML, respeitando sinais e aspas.

Faça os exercícios propostos para este capítulo em:

61 - Combinando seletores

Usar um seletor por vez pode ser útil em alguns casos (selecionar todos elementos de um determinado tipo ou classe), mas pode ser ineficiente em algumas situações. Podemos selecionar elementos com precisão muito maior se combinarmos seletores. Existem cinco formas de combinações:

  1. AB: seleciona qualquer elemento que se enquadre em A e B ao mesmo tempo;

  2. A B: seleciona todos B dentro de A;

  3. A > B: seleciona todos B que sejam filhos diretos de A;

  4. A + B: seleciona todos B que tenham A como irmão imediato;

  5. A ~ B: seleciona todos B que tenham A como irmão (em qualquer posição).

Abaixo temos um exemplo de cada seletor, comentado individualmente. Caso queira executar este exemplo localmente, sugiro que você crie um arquivo .html e .css separados para evitar conflitos com as regras já existentes. Um exemplo pronto pode ser encontrado aqui:

<main>
    <h1 class="titulo">Minha página</h1>
    <h1 class="cumprimento">Seja bem-vindo(a)</h1>
    <p class="titulo">Não será selecionado por h1.titulo, que atinge apenas capeçalhos com estas classes.</p>
    <p>Não será selecionado por h1 + p, pois não tem como irmão imediato um h1</p>
    <section>
        <h1>main é meu avô e eu herdo a regra main h1</h1>
        <h2>Section é meu pai, não meu irmão.</h2>
        <p>Não será selecionado pelo seletor main > p, pois não é filho direto do main</p>
    </section>
    <h2>Quem somos</h2>
</main>

/* AB */
/* todos h1 com a classe título */
h1.titulo {
    font-family: sans-serif;
    color: blue;
}

/* A B */
/* todos h1 que estejam em qualquer nível dentro de main */
main h1 {
    text-decoration: underline;
}

/* A > B */
/* todos p que sejam filhos diretos de main */
main > p {
    color: red;
}

/* A + B */
/* todos p que tenham como irmão imediato um h1 */
h1 + p {
    font-size: 22px;
}

/* A ~ B */
/* todos h2 que tenham section como irmão */
section ~ h2 {
    color: green;
}

Faça alterações no código acima, experimente selecionar elementos diferentes e em seguida faça os exercícios propostos para este capítulo em:

62 - Especificidade

Especificidade é uma forma de os navegadores decidirem qual propriedade CSS é mais relevante para determinado elemento. Quando mais de uma propriedade tiver a mesma especificidade, a que aparecer por último será aplicada.

Por ordem de importância (quanto mais próxima ao fim, mais específica é):

  1. Seletores de tipo (ex: h1, p);

  2. Seletores de classe (ex: .caixa) e seletores de atributo (ex: [type="text"]);

  3. Seletores de id (ex: #erro);

  4. Estilos em linha (ex: <p style="color: red;">Olá</p>);

  5. Valor !important.

Adicione o seguinte HTML ao final do arquivo laboratorio.html e visualize o resultado:

<h3>Seletor de tipo, peso 1</h3>
<h3 class="peso-2">Seletor de classe, peso 2</h3>
<h3 id="peso-3">Seletor de id, peso 3</h3>
<h3 style="color: red;">Estilo em linha. Péssima prática. Peso 4</h3>
<h3>Valor !important aplicado à regra. Maior peso.</h3>

Agora adicione uma regra do CSS abaixo por vez ao arquivo estilos.css e visualize o resultado de cada uma no navegador:

h3 {
    color: green;
}

.peso-2 {
    color: blue;
}

#peso-3 {
    color: magenta;
}

h3 {
    color: black !important;
}

Perceba que na última regra utilizamos o seletor mais fraco (de tipo), porém, com o valor de !important ao final da declaração, o que sobrepõe qualquer outro estilo. Você pode, inclusive, tentar diminuir a importância dele mudando sua posição de último na ordem para primeiro. Nada será alterado.

Apesar disso, não é considerado uma boa prática utilizar o valor !important. Prefira ser mais específico nas regras, utilizando os seletores que vimos anteriormente e talvez você nunca precise utilizar este valor.

Faça os exercícios propostos para este capítulo em:

63 - Pseudo classes

Uma pseudo classe é uma palavra chave, precedida por dois pontos (:), que é adicionada ao final de um seletor para especificar um estilo apenas quando o elemento estiver em um determinado estado.

Existem aproximadamente quarenta pseudo classes, das quais cinco muito utilizadas estão abaixo. Adicione os códigos abaixo aos seus respectivos arquivos e veja o resultado no navegador (passe o mouse sobre a lista):

<ul>
    <li>Lista número 1</li>
    <li>Lista número 2</li>
    <li>Lista número 3</li>
    <li>Lista número 4</li>
</ul>

Os detalhes de cada seletor estão abaixo.

li:first-child {
    color: blue;
}

li:last-child {
    color: red;
}

li:nth-child(2) {
    color: green;
}

li:hover {
    font-weight: bold;
    background-color: #aaa;
}

Faça os exercícios propostos para este capítulo em:

64 - Acessibilidade

Tão importante quanto prover a sintaxe mais semântica possível e adicionar o atributo alt às imagens, por exemplo, é tornar o conteúdo visível acessível ao usuário.

Nem todas as pessoas com alguma deficiência visual, por exemplo, que visitarem nossas páginas, são completamente cegas. Você deve conhecer alguém que precise de lentes corretoras (ex: óculos). Talvez um amigo, um familiar ou você mesmo está lendo este livro graças a algum artifício para corrigir a visão.

Deixo alguns conselhos (não são de forma alguma regras) para que suas páginas sejam mais acessíveis:

Acessibilidade é um termo capaz de preencher um livro exclusivo. A intenção deste capítulo não é de esgotar as possibilidades de tornar suas páginas acessíveis, e sim mostrar a importância do tema e despertar o interesse.

65 - Media queries

Media queries permitem, através de uma expressão, definir estilos baseados no tamanho da tela do dispositivo. Isso é fundamental para que possamos adaptar nosso site a dispositivos móveis (celulares, tablets) e até TVs!

A sintaxe é muito simples e tem uma linha. Adicione cada código ao seu respectivo arquivo:

<div class="caixa-responsiva"></div>

.caixa-responsiva {
    width: 600px;
    height: 300px;
    border: 1px solid black;    
}

@media screen and (max-width: 700px) {
    .caixa-responsiva {
        width: 90%;
        margin: 0 auto;
        background-color: goldenrod;
    }
}

Salve os arquivos, execute no navegador e experimente diminuir e aumentar a largura do navegador.

  1. @media: cria uma media query;

  2. screen: atinge monitores e dispositivos com telas coloridas. Diversos outros valores são aceitos, como print, para impressão, tv, etc.;

  3. and (max-width: 700px): e que tenha largura máxima (max-width) de 700px (para resoluções maiores que 700px usaríamos min-width);

  4. as regras que estiverem entre {} serão alteradas dentro da resolução determinada. No exemplo anterior, .caixa-responsiva mantém a propriedade height e border e ganha margin e background-color.

Dizemos que cada media query com tamanho diferente representa um breakpoint (veja o capítulo a seguir).

Observação: margin: 0 auto é o mesmo que dizer que a margem do topo e de baixo será 0 enquanto que as laterais serão caluladas automaticamente para terem o mesmo valor.

Faça os exercícios propostos para este capítulo em:

66 - Breakpoints

Breakpoints, traduzindo literalmente, são pontos de quebra, que ocorrem quando a largura ou altura da página atingem determinado tamanho. Algumas ferramentas de layout (ex: Bootstrap e Foundation) utilizam breakpoints pré-definidos, enquanto que algumas pessoas preferem definir um breakpoint de acordo com o tamanho da tela de terminados dispositivos, como tablets e smartphones.

Exemplo de dois breakpoints, sem conteúdo:

/* dispositivos com tela menor que 700px */
@media screen and (max-width: 700px) {}
/* dispositivos com tela menor que 1200px */
@media screen and (max-width: 1200px) {}

Os problemas dessas abordagens são:

Uma alternativa que eu uso e recomendo, é criar pontos de quebra de acordo com o layout. Você aumenta e diminui a janela do navegador, por exemplo, e quando algo sai do lugar, fica ilegível ou feio, é nesse ponto que você vai criar uma quebra e alterar o estilo daqueles elementos.

Faça os exercícios propostos para este capítulo em:

67 - Viewport

Podemos criar o site mais adaptável do mundo para dispositivos móveis, porém, quando este site for acessado de um dispositivo móvel real, ele terá a aparência de um site visto na tela de um computador, mesmo que em nosso navegador com a tela reduzida tudo apareça do jeito mais lindo do mundo. Isso acontecerá realmente caso não adicionemos ao head a meta responsável por dizer ao navegador as seguinte informações:

<meta name="viewport" content="width=device-width, initial-scale=1">

O valor de content significa:

Não se esqueça de adicionar esta tag ao head do documento em todos os sites que você planejar para dispositivos móveis (tenho esperança que todos).

Faça os exercícios propostos para este capítulo em:

68 - Validando CSS

Assim como HTML, é fundamental testar seu código CSS com os padrões da linguagem. Problemas que não haviam sido detectados no desenvolvimento podem aparecer neste passo. Ainda assim, em se tratando de CSS e a implementação variada entre os navegadores, não deixe de testar seu site no máximo de navegadores possível, e em diferentes versões destes. Existem plataformas que cobram para realizar automaticamente este serviço ou você pode fazer o download de diversas versões e testar por conta.

A principal ferramenta para realizar esta validação é desenvolvida pelo próprio comitê responsável pelo desenvolvimento dos padrões da Web (World Wide Web Consortium, ou W3C), e está disponível gratuitamente no endereço abaixo:

https://jigsaw.w3.org/css-validator/

69 - Flexbox

Desenvolvimento Web é feito de escolhas. Escolher entre usar Bootstrap e Foundation, entre o estilo de design Material ou Flat, ou nenhum. Cada decisão terá um impacto. Neste livro, a maior decisão foi ensinar o uso de Flexbox para o layout.

De acordo com o site Can I Use, que mede a adoção das especificações de CSS e HTML pelos navegadores, no Brasil, aproximadamente 97% dos usuários de internet estão utilizando navegadores compatíveis com Flexbox. É quase 100%, mas os quase 3% que faltam correspondem a 3.000.000 de pessoas (levando em conta estatísticas recentes que apontam que mais de 50% dos brasileiros acessa a internet e arredondando o número de habitantes para baixo). É um número alto, mas que tende a cair logo.

Com o anúncio por parte da Microsoft de terminar o suporte para versões anteriores ao Internet Explorer 11 em 16 de janeiro de 2016, em breve teremos uma internet mais alinhada com as novas tecnologias.

Flexbox é uma especificação CSS que permite que os elementos alterem sua altura, largura e ordem para melhor preencher o espaço disponível. Isso tudo com muito pouco esforço de quem cria o código.

Por ser uma especificação recente, a implementação de alguns navegadores antigos (um ou dois anos atrás) contém alguns termos obsoletos, isso significa que para criarmos um container flex (visto no próximo capítulo) que funcione em todos os navegadores possíveis, precisamos marcar as propriedades com uma palavra chave que fará com que a propriedade seja interpretada somente por determinado navegador, por exemplo:

.container-flex {
    /* atinge implementações antigas do Safari e Chrome */
    display: -webkit-box;
    display: -webkit-flex;
    /* atinge implementações antigas do Firefox */
    display: -moz-flex;
    /* atinge implementações antigas do Internet Explorer */
    display: -ms-flexbox;
    /* atinge todas as implementações que utilizem a especifação atual */
    display: flex;   
}

Não é fácil memorizar o termo implementado por cada navegador para cada propriedade (para todas as outras propriedades do flexbox a briga é a mesma), portanto, escreveremos a forma mais simples e ao final do livro apresentarei uma ferramenta chamada Autoprefixer que automatiza este trabalho.

Veremos as nove propriedades principais de flexbox a seguir.

Saiba, porém, que estas inconcistências não se limitam ao flexbox. Muitas outras propriedades incorrem neste problema e você precisa ficar atento ao comportamento do seu layout em diversos navegadores.

Faça os exercícios propostos para este capítulo em:

70 - Flexbox: linhas e colunas

O layout com flexbox é baseado na direção em que o elemento pai (que chamaremos a partir de agora de container flex ou simplesmente container) definiu.

O container flex mais básico é criado da seguinte forma e tem como padrão a direção em linha (row):

<div class="container-flex"></div>

.container-flex {
    display: flex;

    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

Para melhor visualizar a direção que o conteúdo adota, vamos adicionar alguns filhos (que chamaremos daqui em diante de itens flex ou itens):

<!--
não seria necessário o uso de nenhuma classe,
mas como a intenção do livro é clareza ao leitor
decidi tornar o exemplo o mais verboso possível
-->
<div class="container-flex">
    <div class="item box-1">1</div>
    <div class="item box-2">2</div>
    <div class="item box-3">3</div>
    <div class="item box-4">4</div>
    <div class="item box-5">5</div>
</div>

.container-flex {
    display: flex;
    flex-direction: row;

    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

.item {
    /* espaçamento e cor adicionados para visualização apenas */
    padding: 10px;
    background-color: #999;
}

O fato de os itens estarem ocupando todo o espaço vertical do container será abordado em seguida. Nos ateremos à direção por ora.

flex-direction: row significa que nossos itens serão dispostos em linha, como num caderno. Da mesma forma que num caderno, numa página web temos um eixo vertical e um eixo horizontal:

Flex-direction row

Podemos alterar a direção de linha para coluna com flex-direction: column. O efeito é o mesmo que virar nosso caderno. Os eixos vão junto:

Flex-direction column

Faça os exercícios propostos para este capítulo em:

71 - Flexbox: quebras

Além da direção, que é determinada por padrão (row) ao definir um container como flex, a quebra padrão (neste caso, de linha) é configurada para ser contínua, ou seja, sem quebra.

.container-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

Para alterar o comportamento padrão, utilizamos a propriedade flex-wrap e os valores wrap (quebrar/multi linha) e nowrap (sem quebra).

É possível, e aconselhável, utilizar uma única declaração para definir o sentido e a quebra de linhas com a propriedade flex-flow. O primeiro valor é equivalente a flex-direction enquanto que o segundo equivale a flex-wrap.

.container-flex {
    display: flex;
    flex-flow: row nowrap;
    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

Faça os exercícios propostos para este capítulo em:

72 - Flexbox: justificar conteúdo

A propriedade justify-content define o alinhamento dos itens no eixo principal (horizontalmente se o itens estiverem em linha e verticalmente se estiverem em colunas) e só tem efeito se houver espaço livre entre os itens.

Pode ter os seguintes valores:

Justify content

.container-flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

Experimente alterar os valores de justify-content e visualize os resultados no navegador.

Faça os exercícios propostos para este capítulo em:

73 - Flexbox: alinhar itens

A propriedade align-itemsé reponsável pelo alinhamento dos itens de um container flex no eixo cruzado (verticalmente, se os itens estiverem em linha).

Os seguintes valores são aceitos:

Align items

.container-flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: baseline;
    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

.box-4 {
    font-size: 40px;
}

As regras acima alinharão todos os itens do container pela linha base do texto. Veja como todos os elementos acompanham a linha do .box-4.

É possível alterar itens individuais (ao invés de o container inteiro), usando a propriedade align-self (auto alinhar) no elemento desejado, usando os mesmos valores de align-items.

Faça os exercícios propostos para este capítulo em:

74 - Flexbox: alinhar conteúdo

align-content é responsável por alinhar as linhas (não os itens, como align-itens; precisa ter mais de uma linha) quando há espaço entre elas no eixo cruzado, similar ao que o justify-content faz em itens individuais.

Seus valores podem ser:

Align content

.container-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-between;
    /* adicionadas medidas e cor para visualização apenas */
    background-color: #ddd;
    width: 300px;
    height: 100px;
}

.item {
    /* adicione uma largura para todos os itens */
    /* as demais declarações permancem intactas */
    width: 70px;
}

.box-4 {
    /* apague o conteúdo desta regra */
}

Visualize o resultado no navegador.

Faça os exercícios propostos para este capítulo em:

75 - Flexbox: tamanho dos itens

Está até no nome: flexível. Este comportamento se reflete nas medidas de tamanho. Não é aconselhável utilizar as mesmas medidas que usamos para os demais elementos, como campos de texto e imagens, por exemplo. Para itens flexíveis usaremos medidas relativas próprias. As seguintes declarações são aplicadas aos itens.

Podemos declarar estas três regras individualmente, ou, como é recomendado na especificação do flexbox, utilizar a versão curta flex:

.item {
    background-color: #999;
    padding: 10px;
    flex: 0 0 60px;
}

.box-5 {
    flex: 1;
    background-color: red;
}

Os valores de flex aparecem nesta ordem: flex-grow flex-shrink flex-basis

No exemplo acima, definimos que todos os itens terão tamanho inicial de 60px, enquanto que a .box-5 terá o valor de 1 para flex-grow (quando apenas um valor é fornecido à propriedade flex, ele equivale a flex-grow). Veja o resultado no navegador.

Experimente alterar o valor de flex da .box-5 para 8, por exemplo. Note como este item agora é proporcionalmente maior que os demais da mesma linha (o item 4 nesse caso).

Todo o código para a parte 2 do livro está disponível aqui.

Vamos aos últimos exercícios do livro e a partir do próximo capítulo aplicaremos tudo o que aprendemos até agora em um site completo.

PARTE 3 - BÔNUS

Com o conteúdo atual você já é capaz de criar qualquer layout estático da internet. Digo estático pois é necessário, no mínimo, Javascript para dar interatividade à página.

Caso você queira ficar para os festejos finais, vamos criar um portfólio para você começar a divulgar seus trabalhos, com base no conteúdo do livro.

Aperte os cintos, pois a brincadeira começa agora!

76 - Ferramentas

Algumas ferramentas que podem nos auxiliar no desenvolvimento em geral:

Brackets

Se você ainda não está utilizando nenhum editor de código, sugiro que comece usando o Brackets. Ele é desenvolvido em HTML, CSS e Javascript pela Adobe e tem algumas funcionalidades incríveis que já vêm por padrão, como a função Live preview, em que você escreve o código e o editor atualiza o navegador automaticamente a cada alteração. Isso pode economizar tempo significativo entre mudanças de janela e F5s. Além disso, é gratuito.

Acesse o site

Autoprefixer

Como citei durante o livro, nem todos os navegadores têm as mesmas propriedades implementadas da mesma forma, por isso, esta ferramenta é tão útil. Com ela, você pode copiar o seu CSS no site e ter como resultado o mesmo código, porém, com os prefixos para cada navegador para as propriedades que precisam.

Acesse o site

Visual Hunt

O Google das imagens de qualidade e gratuitas. São mais de 354 milhões de imagens para usar em qualquer projeto.

Acesse o site

Google Fonts

Nem sempre uma fonte disponível em nosso computador estará presente no computador dos usuários do nosso site. Para isso contornar esta situação, existem duas opções: disponibilizar para download o arquivo da fonte que temos em nosso computador ou utilizar um serviço que faça exatamente isso com diversas fontes.

Usaremos no projeto a seguir o Google Fonts. Com ele é possível escolher diversos tipos de fontes (708 nesse momento) de qualidade e gratuitas, ou seja, não precisamos nos preocupar com direitos autorais.

Acesse o site

Ferramentas de desenvolvedor dos navegadores

Dedique algum tempo para conhecer melhor seu navegador, em específico as ferramentas de desenvolvedor. No Firefox ou Chrome, é possível ter acesso a elas pelo atalho ctrl + shift + i. Com estas ferramentas você será capaz de visualizar o código de qualquer site na internet, inclusive o HTML e CSS, fazer alterações no documento e visualizar em tempo real, entre muitas outras funcionalidades.

Para Firefox, você encontra mais informações aqui.

Enquanto que para o Chrome, aqui.

Normalize CSS

Cada navegador tem um padrão próprio para apresentar os elementos ao usuário. O projeto Normalize CSS é um “resetador” de estilos. Com ele na página, podemos adicionar nossos estilos sem nos preocupar com a aparência padrão de determinado elemento em cada navegador, já que o Normalize, que é apenas um arquivo .css, padroniza os elementos por nós.

O download pode ser feito acessando o site e clicando com o botão direito do mouse em Download e Salvar como (ou algo similar). Salve este arquivo na pasta css do projeto e adicione um link no head de cada página.

Favicon

Favicons são pequenos ícones, geralmente com tamanho de 16x16px, que são mostrados próximos ao título da página, no navegador. Servem para, além de diferenciar as abas/janelas do navegador, facilitar a identificação de seu site caso o usuário tenha sua página em seus favoritos junto de outras páginas.

Você pode criar sua própria imagem ou utilizar algum gerador gratuito online.

Para adicionar o favicon ao site, basta colocá-lo na pasta raiz do site e adicionar a seguinte linha ao head do documento:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

77 - Planejamento do projeto

Antes de sair escrevendo código para todos os lados, é importante definir um escopo, limites para que não desperdicemos tempo, esforço e código.

Você geralmente criará um site a partir de um layout desenvolvido, geralmente, por um designer. Mas nem todo layout precisa de um designer. Com um pouco de pesquisa, analisando o que outros desenvolvedores e empresas estão utilizando em suas páginas, podemos ter ideias e apresentar um layout compatível.

Com um pouco de pesquisa, um lápis e um caderno, temos o seguinte wireframe (esboço).

Wireframe

Usaremos uma técnica conhecida como mobile-first, que consiste em desenvolver desde o começo a página como uma versão para dispositivos móveis, e, a partir daí, alterar os estilos para adaptarem-se a telas maiores.

Você pode simular o tamanho das telas destes dispositivos diminuindo e aumentando o tamanho da janela do navegador.

78 - Estrutura dos arquivos

Como teremos mais arquivos que de costume (até agora usávamos apenas um .html e um .css), o ideal é separar cada arquivo com seus pares. Veja um exemplo de organização do diretório do projeto:

Começamos com um diretório que será o destino de todos nossos projetos daqui em diante. Em seguida, na pasta portfolio ficarão todos os arquivos referentes ao projeto.

79 - HTML padrão

É comum criar diversos arquivos .html para cada projeto e muito do código destes arquivos é sempre o mesmo. Para evitar ter de escrever do início toda a estrutura básica cada vez que precisarmos de um arquivo ou projeto novo, criaremos um código que você poderá usar para seus próprios projetos.

Este tipo de arquivo é conhecido por boilerplate e é possível encontrar diversos modelos prontos na internet.

<!DOCTYPE html>
<!-- atributo lang define a linguagem predominante no site -->
<html lang="pt-br">
<head>
    <!-- declaração da codificação dos caracteres -->
    <meta charset="utf-8">
    <!-- título da página -->
    <title></title>
    <!-- descrição da página. visível para os buscadores -->
    <meta name="description" content="">
    <!-- força o navegador a exibir o site de acordo com o tamanho do dispositivo -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- reseta os estilos do navegador -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- estilo próprio -->
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <!-- conteúdo da página -->

</body>
</html>

80 - Desenvolvimento HTML

A partir deste capítulo começaremos a desenvolver o HTML de nossa página.

Caso você queira utilizar as mesmas imagens, você as encontra no link abaixo:

http://imgur.com/a/Muui9

Começaremos o desenvolvimento deste portfólio pelo head.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Pacifico' rel='stylesheet' type='text/css'>

Já dentro do body, começaremos a criar o conteúdo visível ao usuário.

Cabeçalho

Sobre

Serviços

A estrutura final será:

Portfólio

Contato

O formulário

O atributo placeholder pode ser novo para você. Ele é responsável pelo conteúdo interno de um input ou textarea e some assim que o usuário começa a digitar no campo.

Componentes de contato

Assim como em serviços tínhamos quatro componentes repetidos para cada serviço, aqui teremos um componente repetido duas vezes, uma para cada forma de contato.

É possível criar um link que, ao ser acionado, inicie uma ligação. Para isso, basta adicionar ao atributo href o número do telefone, sem espaços, precedido por tel:. Por exemplo: <a href="tel:0xx99999990">(0XX) 9999 9990</a>

É possível criar um link que, ao ser acionado, crie um e-mail a partir do gerenciador padrão de emails do sistema. Para isso, basta adicionar ao atributo href o email desejado, precedido por mailto:. Por exemplo: <a href="mailto:email@contato.com">email@contato.com</a>

Rodapé

Crie um footer e adicione a ele um parágrafo com algum texto. Geralmente o conteúdo do texto do rodapé fala sobre os direitos sobre o site, algo como: todos os direitos reservados a João Ninguém, ou, desenvolvido por João Ninguém.

81 - Desenvolvimento CSS

Todos os estilos daqui visam atingir dispositivos móveis, portanto, sugiro que você simule o tamanho de um diminuindo a largura do navegador.

Geral

Estruturaremos nosso arquivo CSS de acordo com a ordem dos elementos no HTML. Porém, alguns estilos são comuns a elementos que aparecem em diversos locais da página. Para não repetir os estilos, vamos inserí-los no início do arquivo.

Separar cada seção com um comentário dizendo do que ela se trata pode ajudar você a encontrar estilos mais rapidamente dentro do documento.

Selecione a classe button e adicione os seguintes estilos:

Selecione o body e adicione os seguintes estilos:

Selecione os cabeçalhos h1, h2 e h3 e aplique os seguintes estilos:

Usando o seletor universal *, aplique o seguinte estilo a todos os elementos:

Selecione todas as section com o atributo id ([id]) e aplique 58px ao padding-top.

Selecione todos os nav e aplique o seguinte estilo:

Selecione todos os a filhos diretos (>) de nav e aplique o seguinte estilo:

Selecione todos os ul dentro de nav e aplique os seguintes estilos:

Selecione todos li, dentro de ul, dentro de nav e aplique os seguintes estilos:

Selecione todos os a, dentro de li, dentro de ul, dentro de nav e aplique os seguintes estilos:

Cabeçalho

Selecione todos os header e aplique os seguintes estilos:

Selecione todos os p dentro de header e aplique o seguinte estilo:

Sobre

Selecione a classe sobre e aplique os seguintes estilos:

Selecione todos os p dentro da classe sobre e aplique os seguintes estilos:

Selecione todos os elementos da classe button dentro da classe sobre e aplique os seguintes estilos:

Serviços

Selecione a classe servicos e aplique os seguintes estilos:

Selecione todos os elementos da classe servico dentro da classe servicos e aplique os seguintes estilos:

Selecione todos os h3, dentro da classe servico, dentro da classe servicos e aplique o seguinte estilo:

Selecione todas as img, dentro da classe servico, dentro da classe servicos e aplique os seguintes estilos:

Portfólio

Selecione a classe portfolio e aplique os seguintes estilos:

Selecione todos os h2 dentro da classe portfolio e aplique o seguinte estilo:

Selecione todas as img dentro da classe portfolio e aplique o seguinte estilo:

Contato

Selecione a classe contato e aplique os seguintes estilos:

Selecione todos os a dentro da classe contato e aplique os seguintes estilos:

Selecione todos os form e aplique os seguintes estilos:

Selecione todos os input, select e textarea e aplique os seguintes estilos:

Selecione o último elemento filho com a classe icone-contato (usando :last-child) e aplique o seguinte estilo:

Rodapé

Selecione todos os footer e aplique os seguintes estilos:

Media Queries

A partir daqui, nossos estilos terão por objetivo atingir determinadas resoluções de tela. No caso deste exemplo especificamente, maiores que 768px.

Completa, a media query deve se parecer com isso, e os estilos a seguir serão inseridos entre as chaves {}:

@media screen and (min-width: 768px) {

}

Apenas alguns estilos serão alterados ou adicionados, uma vez que estas regras já foram, em sua maioria, escritas anteriormente e seu estilo é herdado.

Selecione todos os nav e aplique os seguintes estilos:

Selecione todos os ul dentro de nav e aplique os seguintes estilos:

Cabeçalho

Selecione todos os header e aplique os seguintes estilos:

Sobre

Selecione a classe sobre e aplique o seguinte estilo:

Serviços

Selecione a classe servicos e aplique os seguintes estilos:

Selecione todos os h2 da classe servicos e aplique os seguintes estilos:

Selecione todos os elementos da classe servico dentro da classe servicos e aplique os seguintes estilos:

Portfólio

Selecione a classe portfolio e aplique o seguinte estilo:

Selecione todos os h2 dentro da classe portfolio e aplique os seguintes estilos:

Selecione todas as img dentro da classe portfolio e aplique o seguinte estilo:

Contato

Selecione a classe contato e aplique os seguintes estilos:

Selecione todos os h2 dentro da classe contato e aplique os seguintes estilos:

Selecione o último elemento filho com a classe icone-contato (usando :last-child) e aplique o seguinte estilo:

82 - Fim

Se tudo correu conforme planejado, você tem um site pronto.

Você pode conferir o resultado aqui.

Mas, ainda há o que fazer. Alguns estilos são repetidos ao longo do CSS e poderiam ser agrupados em uma classe específica e aplicada aos elementos desejados. Outros detalhes, como o espaçamento interno dos containeres, para que o texto não toque nas laterais, não foram adicionados. Os botões estão estáticos ao passar do mouse. Você pode, a partir de agora, fazer modificações e, inclusive, melhorar este layout.

Não se esqueça de prefixar as propriedades necessárias. O Autoprefixer pode te ajudar nessa tarefa.