282
+ ALCIDES QUEIROZ Do zero e do jeito certo

HTML5 + CSS3 - Do Zero e do Jeito Certo

Embed Size (px)

DESCRIPTION

Slides do meu Workshop sobre HTML5 e CSS3. Nele abordo HTML do zero, com todos os recursos pré-HTML5 e as exploro as novas e fascinantes características da última versão desta linguagem. Também exponho o CSS e seus mais poderosos recursos até a sua última versão, o CSS3.

Citation preview

Page 1: HTML5 + CSS3 - Do Zero e do Jeito Certo

+

ALCIDES QUEIROZ

Do zero e do jeito certo

Page 2: HTML5 + CSS3 - Do Zero e do Jeito Certo

@alcidesqueiroz

Page 5: HTML5 + CSS3 - Do Zero e do Jeito Certo

@[email protected]/alcidesqueirozalcidesqueiroz.com

Page 6: HTML5 + CSS3 - Do Zero e do Jeito Certo

@[email protected]/alcidesqueirozalcidesqueiroz.com (???)

Page 7: HTML5 + CSS3 - Do Zero e do Jeito Certo

Do zero?

Page 8: HTML5 + CSS3 - Do Zero e do Jeito Certo

Do jeito certo?

Page 9: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 10: HTML5 + CSS3 - Do Zero e do Jeito Certo

1957 - ARPA surge

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 11: HTML5 + CSS3 - Do Zero e do Jeito Certo

1957 - ARPA surge

1969 - O primeiro e-mail é transmitido em rede

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 12: HTML5 + CSS3 - Do Zero e do Jeito Certo

1957 - ARPA surge

1969 - O primeiro e-mail é transmitido em rede

1969 - A ARPANET entra em funcionamento

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 13: HTML5 + CSS3 - Do Zero e do Jeito Certo

197* - ARPANET em Universidades

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 14: HTML5 + CSS3 - Do Zero e do Jeito Certo

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 15: HTML5 + CSS3 - Do Zero e do Jeito Certo

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 16: HTML5 + CSS3 - Do Zero e do Jeito Certo

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 17: HTML5 + CSS3 - Do Zero e do Jeito Certo

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP1979 - Criada a USENET

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 18: HTML5 + CSS3 - Do Zero e do Jeito Certo

1981 - Lançado o IBM PC

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 19: HTML5 + CSS3 - Do Zero e do Jeito Certo

1981 - Lançado o IBM PC

1983 - É criada a MILNET

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 20: HTML5 + CSS3 - Do Zero e do Jeito Certo

1981 - Lançado o IBM PC

1983 - É criada a MILNET

1983 - TCP/IP é adotado

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 21: HTML5 + CSS3 - Do Zero e do Jeito Certo

1981 - Lançado o IBM PC

1983 - É criada a MILNET

1983 - TCP/IP é adotado

1984 - ARPANET possui 1000 servidores

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 22: HTML5 + CSS3 - Do Zero e do Jeito Certo

DNS, BBS, IRC, USENET, e-mail,TCP/IP ...

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

Page 23: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

Page 24: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

A motivação

Page 25: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

A motivação

A linguagem HTML

Page 26: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

A motivação

A linguagem HTML

O protocolo HTTP

Page 27: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

A motivação

A linguagem HTML

O protocolo HTTP

URI

Page 28: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

1980 - TBL cria o ENQUIRE

Page 29: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

1980 - TBL cria o ENQUIRE

1989 - TBL e Robert Cailliau realizam a primeira comunicação bem sucedida entre um cliente HTTP e um servidor na Internet

Page 30: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

1990 - Surge o HTML

Page 31: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

1990 - Surge o HTML

1993 - Primeiro servidor HTTP

Page 32: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

1990 - Surge o HTML

1993 - Primeiro servidor HTTP

1993 - Primeira página da Web

Page 33: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

Page 34: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

Criada por Tim Berners-Lee e Robert Cailliau em 1989

Page 35: HTML5 + CSS3 - Do Zero e do Jeito Certo

Criada por Tim Berners-Lee e Robert Cailliau em 1989

O piloto foi realizado no CERN

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

Page 36: HTML5 + CSS3 - Do Zero e do Jeito Certo

Linguagem de marcação dehipertexto

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

Page 37: HTML5 + CSS3 - Do Zero e do Jeito Certo

Linguagem de Marcação??

Page 38: HTML5 + CSS3 - Do Zero e do Jeito Certo

É um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos.

Linguagem de Marcação??

Page 39: HTML5 + CSS3 - Do Zero e do Jeito Certo

Ex:

Olá, meu nome é João, sou filho de Marta e moro em Fortaleza.

Linguagem de Marcação??

Page 40: HTML5 + CSS3 - Do Zero e do Jeito Certo

Ex:

Olá, meu nome é <nome>João</nome>, sou filho de <nome>Marta</nome> e moro em <cidade>Fortaleza </cidade>.

Linguagem de Marcação??

Page 41: HTML5 + CSS3 - Do Zero e do Jeito Certo

Linguagem de Programação !=

Linguagem de Marcação

Linguagem de Marcação??

Page 42: HTML5 + CSS3 - Do Zero e do Jeito Certo

if (idade == 18) { for (var i = 0; i < 10; i++){ alert(“Essa é uma mensagem \ sem sentido”);

}}

Linguagem de Marcação??

Page 43: HTML5 + CSS3 - Do Zero e do Jeito Certo

Linguagem de marcação dehipertexto

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

Page 44: HTML5 + CSS3 - Do Zero e do Jeito Certo

Hipertexto??

Page 45: HTML5 + CSS3 - Do Zero e do Jeito Certo

Termo cunhado por Ted Nelson em 1965

Hipertexto??

Page 46: HTML5 + CSS3 - Do Zero e do Jeito Certo

Termo cunhado por Ted Nelson em 1965

Texto não necessariamente

linear

Hipertexto??

Page 47: HTML5 + CSS3 - Do Zero e do Jeito Certo

Hipermídia??

Page 48: HTML5 + CSS3 - Do Zero e do Jeito Certo

Termo de autoria também atribuída a Ted Nelson

Hipermídia??

Page 49: HTML5 + CSS3 - Do Zero e do Jeito Certo

Termo de autoria também atribuída a Ted Nelson

É o hipertexto que não está limitado a conter apenas texto, podendo possuir imagens, vídeos, sons, etc.

Hipermídia??

Page 50: HTML5 + CSS3 - Do Zero e do Jeito Certo

Continuando...

Page 51: HTML5 + CSS3 - Do Zero e do Jeito Certo

Linguagem de marcação dehipertexto

Derivada da SGML e HyTime

APRESENTAÇÃO

BREVE HISTÓRICO

Page 52: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

TAGS

Instruções que marcam e adicionam semântica ao hipertexto.

Page 53: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

ATRIBUTOS

Propriedades de um elemento

HTML

Page 54: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

SEMÂNTICA NA WEB

As tags do HTML carregam um significado.

Page 55: HTML5 + CSS3 - Do Zero e do Jeito Certo

APRESENTAÇÃO

WEB STANDARDS

Normas criadas pelo W3C, a serem ser implementadas pelos browsers do mercado e seguidas pela comunidade de desenvolvimento.

Page 56: HTML5 + CSS3 - Do Zero e do Jeito Certo

MÃOS NO SUBLIME TEXT!

Page 57: HTML5 + CSS3 - Do Zero e do Jeito Certo

MÃOS NO SUBLIME TEXT!

OU NÃO...

Page 58: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

Page 59: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<html>

Representa um documento HTML

Page 60: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<html> - atributo lang

<html lang=”pt-br”>

Usado para que os user-agents saibam qual é a linguagem principal do documento.

Page 61: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<head>

Contém meta-dados a respeito do documento

Page 62: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<title>

Representa o título da página, que constará na barra de título do navegador.

Page 63: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<title>

<title>Don't panic!</title>

Page 64: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<body>

Representa o corpo da página.

Page 65: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<body>

<body>

Godfather é o melhor filme da história.

</body>

Page 66: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<h1> a <h6> (Headings)

Representam cabeçalhos de diferentes níveis de importância no documento

Page 67: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<h1> a <h6> (Headings)

<h1>A Linguagem Ruby</h1><h2>Introdução</h2><h3>História</h3>

Page 68: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<a>

Representa um link para outro recurso na web, ou para um trecho específico desse recurso.

Page 69: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<a>

<a href=”sobre.html”>Sobre a empresa</a><a href=”mailto:[email protected]”>e-mail</a><a href=”http://google.com”> Google</a>

Page 70: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<a> - atributo href

<a href=”localizacao”>Especifica a localização do recurso

Page 71: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<a> - atributo name

<a name=”rodape”></a>Nomeia um ponto específico de um documento para que possa ser referenciado por outros links.

<a href=”#rodape”>Rodapé</a>

Page 72: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<a> - atributo name

Dica:

atributo name se tornou obsoleto no HTML5

Page 73: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<img>

Representa uma imagem

Page 74: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<img> - atributo src

<img src =”logo.png”/>

Representa o caminho (absoluto ou relativo) para a imagem

Page 75: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<p>

Representa um parágrafo

Page 76: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<p>

<p>Exemplo de um parágrafo qualquer, este texto não deve fazer sentido algum.

</p>

Page 77: HTML5 + CSS3 - Do Zero e do Jeito Certo

Let's Code!

Page 78: HTML5 + CSS3 - Do Zero e do Jeito Certo

gist.github.com/alcidesqueiroz

Page 79: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<table>

Tag usada para apresentar dados em formato tabular.

Page 80: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<tr>

Representa uma linha de uma tabela.

Page 81: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<td>

Representa uma célula de uma tabela.

Page 82: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<td> - atributo colspan

Número de colunas pelo qual a célula irá se expandir

Page 83: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<td> - atributo rowspan

Número de linhas pelo qual a célula irá se expandir

Page 84: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<table>, <tr> e <td><table> <tr> <td>Código</td> <td>Descrição Produto</td> </tr> <tr> <td>0001</td> <td>Camisa Polo</td> </td></table>

Page 85: HTML5 + CSS3 - Do Zero e do Jeito Certo

Let's Code!

Page 86: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<form>

Representa um formulário.

Page 87: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<form> - atributos

action<form action=”enviar.aspx”>

Representa a URL do recurso que irá receber os dados do formulário e que realizará o processamento desejado

Page 88: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<form> - atributos

method<form action=”enviar.aspx” method=”get”>

Representa o método HTTP que será usado para envio do formulário

Page 89: HTML5 + CSS3 - Do Zero e do Jeito Certo

Método GET

Para submeter o formulário, os valores de seus campos são concatenados à URL.

Page 90: HTML5 + CSS3 - Do Zero e do Jeito Certo

Método GET

Ex:

http://teste.com/processa?nome=joao&idade=32&sexo=m

Page 91: HTML5 + CSS3 - Do Zero e do Jeito Certo

Método POST (default)

Os dados do formulário são enviados nos headers das solitações HTTP

Page 92: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<input>

Representa um campo de um formulário.

Page 93: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<input> - atributos

type button, checkbox, file, hidden, image, password, radio, reset, submit, text

Page 94: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<select>

Representa uma caixa de seleção.

Page 95: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<option>

Representa uma opção de um select.

Page 96: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<option> - atributo value

O valor da opção. É o que será submetido ao servidor.

Page 97: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<textarea>

Representa uma caixa de texto multilinha.

Page 98: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<textarea> - atributo rows

Número de linhas

Page 99: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<textarea> - atributo cols

Número de colunas

Page 100: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<button>

Representa um botão.

Page 101: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<label>

Representa um rótulo.

Page 102: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<label> - atributo for

Especifica o ID do campo ao qual a label está associada.

Page 103: HTML5 + CSS3 - Do Zero e do Jeito Certo

Let's Code!

Page 104: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<div> e <span>

Representam uma divisão em um site.

Page 105: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<hr>

Representa uma linha horizontal.

Page 106: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<ol>

Representa uma lista ordenada.

Page 107: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<li>

Representa um item de lista.

Page 108: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<ul>

Representa uma lista não ordenada.

Page 109: HTML5 + CSS3 - Do Zero e do Jeito Certo

Let's Code!

Page 110: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<strong>

Dá ênfase a algo

Page 111: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<iframe>

Representa uma página “embutida” em outra. [Inline Frame]

Page 112: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<iframe> - atributo src

Localização da página

Page 113: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<link>

Define um relacionamento entre um documento e um recurso externo.

Page 114: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<link>

Suporte real apenas para folhas de estilo e favicons.

Page 115: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<link> - atributo href

Especifica a localização do recurso externo

Page 116: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<link> - atributo rel

Especifica o tipo de relacionamento

Page 117: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<script>

Código em um linguagem de script (por padrão JavaScript), ou URI para arquivo de script externo.

Page 118: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<script> - atributo src

Especifica a localização do script

Page 119: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<meta>

Representa um meta-dado sobre o documento.

Page 120: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<meta> - atributo name

Nome do meta-dado

Page 121: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<meta> - atributo name

Valores possíveis:

author, description, keywords, reply-to

Page 122: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<meta> - atributo content

Valor do meta-dado

Page 123: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<pre>

Texto pré-formatado. Preserva espaços e quebras de linha e é exibido em fonte mono-espaçada.

Page 124: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML (ATÉ 4.01)

<style>

Trecho de código CSS.

Page 125: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

Page 126: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<abbr>

Define siglas e abreviações.

Page 127: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<address>

Define um endereço

Page 128: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<blockquote>

Define uma citação

Page 129: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<caption>

Legenda para tabelas. Por padrão centralizada.

Page 130: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<code>

Trecho de código

Page 131: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<code>

<code>Código Inline</code><pre> <code> Código multilinha </code></pre>

Page 132: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<del>

Texto que foi deletado de um documento

Page 133: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<ins>

Texto que foi inserido em um documento.

Geralmente sublinhado.

Page 134: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<fieldset>

Agrupa campos relacionados de um formulário

Page 135: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<legend>

Adiciona uma legenda a um fieldset

Page 136: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<samp>

Exemplo de saída de código

Page 137: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<tfoot>

Rodapé de uma tabela

Page 138: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<thead>

Cabeçalho de uma tabela

Page 139: HTML5 + CSS3 - Do Zero e do Jeito Certo

SENDO MAIS SEMÂNTICO

<th>

Célula-título de uma tabela

Page 140: HTML5 + CSS3 - Do Zero e do Jeito Certo

USAR COM BOM-SENSO

<br>

Na dúvida, não use.

Page 141: HTML5 + CSS3 - Do Zero e do Jeito Certo

USAR COM BOM-SENSO

<b>

Prefira usar a tag <strong>

Page 142: HTML5 + CSS3 - Do Zero e do Jeito Certo

USAR COM BOM-SENSO

<i>

Prefira usar a tag <em>

Page 143: HTML5 + CSS3 - Do Zero e do Jeito Certo

Let's Code!

Page 144: HTML5 + CSS3 - Do Zero e do Jeito Certo

COMENTÁRIOS EM HTML

<!-- Um comentário -->

Page 145: HTML5 + CSS3 - Do Zero e do Jeito Certo

DOCTYPE

<!DOCTYPE html>

Define a versão do html na qual o documento foi escrito, fazendo com que o navegador renderize uma página corretamente

Page 146: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS

Page 147: HTML5 + CSS3 - Do Zero e do Jeito Certo

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie

Page 148: HTML5 + CSS3 - Do Zero e do Jeito Certo

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS1

Page 149: HTML5 + CSS3 - Do Zero e do Jeito Certo

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial

Page 150: HTML5 + CSS3 - Do Zero e do Jeito Certo

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial

1998 - W3C lança recomendação do CSS2

Page 151: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

SEPARAÇÃO DE RESPONSABILIDADES

Page 152: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

SEPARAÇÃO DE RESPONSABILIDADES

Page 153: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

FOLHA DE ESTILO

Page 154: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

FOLHA DE ESTILO EM CASCATA

Page 155: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

COMPATIBILIDADE CROSSBROWSER

Page 156: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

PROPRIEDADES

Page 157: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

REGRAS

Page 158: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

SELETORES

Page 159: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

PSEUDO-ELEMENTOS

Page 160: HTML5 + CSS3 - Do Zero e do Jeito Certo

A LINGUAGEM

PSEUDO-CLASSES

Page 161: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

* [Universal]

Page 162: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E > F[filhos]

Page 163: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E:first-child [pseudo-classe first-child]

Page 164: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E:link E:visited[pseudo-classes de link]

Page 165: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E:active E:hover E:focus[pseudo-classes dinâmicas]

Page 166: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E + F [adjacentes]

Page 167: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E[foo] [possui atributo]

Page 168: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E[foo="warning"] [possui atributo igual a]

Page 169: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E[foo~="warning"] [possui atributo que contém (independente de possuir espaços)]

Page 170: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

DIV.classe

Page 171: HTML5 + CSS3 - Do Zero e do Jeito Certo

SELETORES DO CSS(ATÉ O 2)

E#id [id]

Page 172: HTML5 + CSS3 - Do Zero e do Jeito Certo

COMENTÁRIOS EM CSS(ATÉ O 2)

/*Este é um comentário*/

Page 173: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

background

Page 174: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

background-color

Page 175: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

background-image

Page 176: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

background-repeat

Page 177: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

border

Page 178: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

height

Page 179: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

width

Page 180: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

max-height

Page 181: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

max-width

Page 182: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

min-height

Page 183: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

min-width

Page 184: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

font-family

Page 185: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

font-size

Page 186: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

font-style

Page 187: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

font-weight

Page 188: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

list-style-type

square, circle, bullet, none

Page 189: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

margin

Page 190: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

padding

Page 191: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

cursor

Page 192: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

display

none, inline, block, inline-block

Page 193: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

overflow

visible, hidden, scroll, auto

Page 194: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

position

Page 195: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

bottom

Page 196: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

right

Page 197: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

left

Page 198: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

top

Page 199: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

z-index

Page 200: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

color

Page 201: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

letter-spacing

Page 202: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

line-height

Page 203: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

text-align

Page 204: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

text-decoration

underline, overline, line-through, none

Page 205: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

text-indent

Page 206: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

text-transform

uppercase, capitalize, lowercase

Page 207: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

vertical-align

Page 208: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

word-spacing

Page 209: HTML5 + CSS3 - Do Zero e do Jeito Certo

PROPRIEDADES DO CSS(ATÉ O 2)

float

Page 210: HTML5 + CSS3 - Do Zero e do Jeito Certo
Page 211: HTML5 + CSS3 - Do Zero e do Jeito Certo

HTML5

UM NOVO FOCO

Page 212: HTML5 + CSS3 - Do Zero e do Jeito Certo

HTML5

MAIS SEMÂNTICA

Page 213: HTML5 + CSS3 - Do Zero e do Jeito Certo

HTML5

NOVIDADES

Page 214: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<canvas>

Page 215: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<details>

Page 216: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<summary>

Título de uma seção details

Page 217: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<header>

Título de uma section. Pode conter headings, hgroups (removido da especificação em abril/13), content tables, logos, search form

Page 218: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<section>

Agrupa items que possuam relação entre si, e cujo agrupamento não seja meramente para fins de posicionamento

Page 219: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<footer>

Rodapé, geralmente último elemento do documento

Page 220: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<article>

Conteúdo agrupado, importante e passível de utilização em feeds

Page 221: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<figure>

Uma figura, que possivelmente possuirá legenda

Page 222: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<figcaption>

Legenda de uma figura

Page 223: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<datalist>

<input list="times"><datalist id="times"> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"></datalist>

Page 224: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<datalist> - fallbackDigite seu time: <input list="times"><datalist id="times"> <label>Ou escolha na lista a seguir</label> <select> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"> </select></datalist>

Page 225: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<mark>

Efetua highlight de um texto e denota que o mesmo possui maior destaque

Page 226: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<meter>

Medidor em formato de barra

Page 227: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<meter> - atributo min

Page 228: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<meter> - atributo max

Page 229: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<meter> - atributo value

Page 230: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<nav>

Um tipo de section, que agrupa links de navegação

Page 231: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<aside>

Citação, sidebars, anúncios publicitários, grupos de navegação

Page 232: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<output>

Representa o resultado de um cálculo

Page 233: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<output>

<form >

<input id="a" type="text"> +<input id="b" type="text"> =<output for="a b"></output>

</form>

Page 234: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<progress>

Barra de progresso, geralmente usada para representar o progresso de uma determinada tarefa

Page 235: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<time>

Representa uma data, hora ou ambos

Page 236: HTML5 + CSS3 - Do Zero e do Jeito Certo

AS TAGS DO HTML5

<time> - atributo datetime

Page 237: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<acronym>

Page 238: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<applet>

Page 239: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<basefont>

Page 240: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<big>

Page 241: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<center>

Page 242: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<font>

Page 243: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<frame>

Page 244: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<frameset>

Page 245: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<noframes>

Page 246: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<strike>

Page 247: HTML5 + CSS3 - Do Zero e do Jeito Certo

TAGS DEPRECADAS

<tt>

Page 248: HTML5 + CSS3 - Do Zero e do Jeito Certo
Page 249: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

element1~element2 [sequenciais]

Page 250: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

[attribute^=value]

Inicia exatamente com a string value

Page 251: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

[attribute$=value]

Termina exatamente com a string value

Page 252: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

[attribute*=value]

Contém a string value

Page 253: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:first-of-type

Page 254: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:last-of-type

Page 255: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:only-of-type

Page 256: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:only-child

Page 257: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:nth-child(n)

Page 258: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:nth-last-child(n)

Page 259: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:nth-of-type(n)

Page 260: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:nth-last-of-type(n)

Page 261: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:last-child

Page 262: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:root

Page 263: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:empty (sem filhos, nem ao menos text-nodes)

Page 264: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:enabled

Page 265: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:disabled

Page 266: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:checked

Page 267: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

:not(selector)

Page 268: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Seletores

::selection

Page 269: HTML5 + CSS3 - Do Zero e do Jeito Certo

padding-box, content-box, border-box, text

CSS3 - Propriedades

background-clip

Page 270: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

background-position

left top, left center, left bottom, 50% 50%, 10px 200px

Page 271: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

background-origin

padding-box, content-box, border-box

Page 272: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

background-size

width height

Ex:

200px200px auto

50% 50%contain e cover

Page 273: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

border-radius

border-radius: 12px;

border-top-left-radius: 25px;

Page 274: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

box-decoration-break

slice clone

Page 275: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

box-shadow

box-shadow: hr vr blur color;

Page 276: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

overflow-x

visible, hidden, scroll, auto

Page 277: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

overflow-y

visible, hidden, scroll, auto

Page 278: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

Rotate (CSS Transformations)

transform: rotate(90deg)

Page 279: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

opacity

opacity: 0.5;

Page 280: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

text-shadow

text-shadow: hr vr blur color;

Page 281: HTML5 + CSS3 - Do Zero e do Jeito Certo

CSS3 - Propriedades

transition

transition: background-color 800ms ease;

linear, ease, ease-in, ease-out

Page 282: HTML5 + CSS3 - Do Zero e do Jeito Certo

Pré-processadores CSS

Sass, LESS, Stylus