html5css3 dozeroedojeitocerto 130520201244 phpapp02

Prévia do material em texto

+
ALCIDES QUEIROZ
Do zero e do jeito certo
 
@alcidesqueiroz
 
@alcidesqueiroz
alcidesqueiroz@gmail.com
 
@alcidesqueiroz
alcidesqueiroz@gmail.com
github.com/alcidesqueiroz
 
@alcidesqueiroz
alcidesqueiroz@gmail.com
github.com/alcidesqueiroz
alcidesqueiroz.com
 
@alcidesqueiroz
alcidesqueiroz@gmail.com
github.com/alcidesqueiroz
alcidesqueiroz.com (???)
 
Do zero?
 
Do jeito certo?
 
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1957 - ARPA surge 
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1957 - ARPA surge 
1969 - O primeiro e-mail é 
transmitido em rede
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1957 - ARPA surge 
1969 - O primeiro e-mail é 
transmitido em rede
1969 - A ARPANET entra em 
funcionamento
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
197* - ARPANET em Universidades
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo 
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo 
Internet
1973 – Primeira conexão entre 
continentes
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo 
Internet
1973 – Primeira conexão entre 
continentes
1977 - Criação do TCP/IP
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo 
Internet
1973 – Primeira conexão entre 
continentes
1977 - Criação do TCP/IP
1979 - Criada a USENET
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1981 - Lançado o IBM PC
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1981 - Lançado o IBM PC
1983 - É criada a MILNET 
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
1981 - Lançado o IBM PC
1983 - É criada a MILNET 
1983 - TCP/IP é adotado
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
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)
 
DNS, BBS, IRC, USENET, e-mail,
TCP/IP ...
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
URI
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1980 - TBL cria o ENQUIRE
 
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
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
 
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
1993 - Primeira página da Web
 
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
 
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Criada por Tim Berners-Lee e 
Robert Cailliau em 1989 
 
Criada por Tim Berners-Lee e 
Robert Cailliau em 1989 
O piloto foi realizado no CERN
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
 
Linguagem de marcação de
hipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
 
Linguagem de Marcação??
 
É 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??
 
Ex:
Olá, meu nome é João, sou filho 
de Marta e moro em Fortaleza.
Linguagem de Marcação??
 
Ex:
Olá, meu nome é 
<nome>João</nome>, sou filho 
de <nome>Marta</nome> e 
moro em <cidade>Fortaleza 
</cidade>.
Linguagem de Marcação??
 
Linguagem de Programação 
 !=
Linguagem de Marcação 
Linguagem de Marcação??
 
if (idade == 18) { 
 for (var i = 0; i < 10; i++){
 alert(“Essa é uma mensagem \ 
 sem sentido”);
 }
}
Linguagem de Marcação??
 
Linguagem de marcação de
hipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
 
Hipertexto??
 
Termo cunhado por Ted Nelson 
em 1965
Hipertexto??
 
Termo cunhado por Ted Nelson 
em 1965
Texto não necessariamente
linear
Hipertexto??
 
 
Hipermídia??
 
Termo de autoria também 
atribuída a Ted Nelson
Hipermídia??
 
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??
 
Continuando...
 
Linguagem de marcação de
hipertexto
Derivada da SGML e HyTime
APRESENTAÇÃO
BREVE HISTÓRICO
 
APRESENTAÇÃO
TAGS
Instruções que marcam e 
adicionam semântica ao 
hipertexto.
 
APRESENTAÇÃO
ATRIBUTOS
Propriedades de um elemento
HTML
 
APRESENTAÇÃO
SEMÂNTICA NA WEB
As tags do HTML carregam um 
significado.
 
APRESENTAÇÃO
WEB STANDARDS
Normas criadas pelo W3C, a 
serem ser implementadas pelos 
browsers do mercado e seguidas 
pela comunidade de 
desenvolvimento.
 
 
MÃOS NO SUBLIME TEXT!
 
 
MÃOS NO SUBLIME TEXT!
OU NÃO...
 
 
AS TAGS DO HTML (ATÉ 4.01)
 
AS TAGS DO HTML (ATÉ 4.01)
<html>
Representa um documento 
HTML
 
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.
 
AS TAGS DO HTML (ATÉ 4.01)
<head>
Contém meta-dados a respeito 
do documento
 
AS TAGS DO HTML (ATÉ 4.01)
<title>
Representa o título da página, 
que constará na barra de 
título do navegador.
 
AS TAGS DO HTML (ATÉ 4.01)
<title>
<title>Don't panic!</title>
 
AS TAGS DO HTML (ATÉ 4.01)
<body>
Representa o corpo da página.
 
AS TAGS DO HTML (ATÉ 4.01)
<body>
<body>
Godfather é o melhor filme da 
história.
</body>
 
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
Representam cabeçalhos de 
diferentes níveis de 
importância no documento
 
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
<h1>A Linguagem Ruby</h1>
<h2>Introdução</h2>
<h3>História</h3>
 
AS TAGS DO HTML (ATÉ 4.01)
<a>
Representa um link para outro 
recurso na web, ou para um 
trecho específico desse 
recurso.
 
AS TAGS DO HTML (ATÉ 4.01)
<a>
<a href=”sobre.html”>
Sobre a empresa</a>
<a href=”mailto:eu@joao.com”>
e-mail</a>
<a href=”http://google.com”> 
Google</a>
 
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo href
<a href=”localizacao”>
Especifica a localização do 
recurso
 
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>
 
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo name
Dica:
atributo name se tornou obsoleto 
no HTML5
 
AS TAGS DO HTML (ATÉ 4.01)
<img>
Representa uma imagem
 
AS TAGS DO HTML (ATÉ 4.01)
<img> - atributo src
<img src =”logo.png”/>
Representa o caminho (absoluto 
ou relativo) para a imagem
 
AS TAGS DO HTML (ATÉ 4.01)
<p>
Representa um parágrafoAS TAGS DO HTML (ATÉ 4.01)
<p>
<p>
Exemplo de um parágrafo 
qualquer, este texto não deve 
fazer sentido algum.
</p>
 
Let's Code!
 
gist.github.com/alcidesqueiroz
 
AS TAGS DO HTML (ATÉ 4.01)
<table>
Tag usada para apresentar 
dados em formato tabular.
 
AS TAGS DO HTML (ATÉ 4.01)
<tr>
Representa uma linha de uma 
tabela.
 
AS TAGS DO HTML (ATÉ 4.01)
<td>
Representa uma célula de uma 
tabela.
 
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo colspan
Número de colunas pelo qual a 
célula irá se expandir
 
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo rowspan
Número de linhas pelo qual a 
célula irá se expandir
 
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>
 
Let's Code!
 
AS TAGS DO HTML (ATÉ 4.01)
<form>
Representa um formulário.
 
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
 
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
 
Método GET
Para submeter o formulário, os 
valores de seus campos são 
concatenados à URL.
 
Método GET
Ex:
http://teste.com/processa?
nome=joao&idade=32&sexo=m
 
Método POST (default)
Os dados do formulário são 
enviados nos headers das 
solitações HTTP
 
AS TAGS DO HTML (ATÉ 4.01)
<input>
Representa um campo de um 
formulário.
 
AS TAGS DO HTML (ATÉ 4.01)
<input> - atributos
type 
button, checkbox, file, hidden, 
image, password, radio, reset, 
submit, text
 
AS TAGS DO HTML (ATÉ 4.01)
<select>
Representa uma caixa de 
seleção.
 
AS TAGS DO HTML (ATÉ 4.01)
<option>
Representa uma opção de um 
select.
 
AS TAGS DO HTML (ATÉ 4.01)
<option> - atributo value
O valor da opção. É o que será 
submetido ao servidor.
 
AS TAGS DO HTML (ATÉ 4.01)
<textarea>
Representa uma caixa de texto 
multilinha.
 
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo rows
Número de linhas
 
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo cols
Número de colunas
 
AS TAGS DO HTML (ATÉ 4.01)
<button>
Representa um botão.
 
AS TAGS DO HTML (ATÉ 4.01)
<label>
Representa um rótulo.
 
AS TAGS DO HTML (ATÉ 4.01)
<label> - atributo for
Especifica o ID do campo ao 
qual a label está associada.
 
Let's Code!
 
AS TAGS DO HTML (ATÉ 4.01)
<div> e <span>
Representam uma divisão em 
um site.
 
AS TAGS DO HTML (ATÉ 4.01)
<hr>
Representa uma linha 
horizontal.
 
AS TAGS DO HTML (ATÉ 4.01)
<ol>
Representa uma lista 
ordenada.
 
AS TAGS DO HTML (ATÉ 4.01)
<li>
Representa um item de lista.
 
AS TAGS DO HTML (ATÉ 4.01)
<ul>
Representa uma lista não 
ordenada.
 
Let's Code!
 
AS TAGS DO HTML (ATÉ 4.01)
<strong>
Dá ênfase a algo
 
AS TAGS DO HTML (ATÉ 4.01)
<iframe>
Representa uma página 
“embutida” em outra. [Inline 
Frame]
 
AS TAGS DO HTML (ATÉ 4.01)
<iframe> - atributo src
Localização da página
 
AS TAGS DO HTML (ATÉ 4.01)
<link>
Define um relacionamento 
entre um documento e um 
recurso externo.
 
AS TAGS DO HTML (ATÉ 4.01)
<link>
Suporte real apenas para 
folhas de estilo e favicons.
 
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo href
Especifica a localização do 
recurso externo
 
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo rel
Especifica o tipo de 
relacionamento
 
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.
 
AS TAGS DO HTML (ATÉ 4.01)
<script> - atributo src
Especifica a localização do 
script
 
AS TAGS DO HTML (ATÉ 4.01)
<meta>
Representa um meta-dado 
sobre o documento.
 
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Nome do meta-dado
 
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Valores possíveis:
author, description, keywords, 
reply-to
 
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo content
Valor do meta-dado
 
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.
 
AS TAGS DO HTML (ATÉ 4.01)
<style>
Trecho de código CSS.
 
SENDO MAIS SEMÂNTICO
 
 
 
SENDO MAIS SEMÂNTICO
<abbr>
Define siglas e abreviações.
 
SENDO MAIS SEMÂNTICO
<address>
Define um endereço
 
SENDO MAIS SEMÂNTICO
<blockquote>
Define uma citação
 
SENDO MAIS SEMÂNTICO
<caption>
Legenda para tabelas. Por 
padrão centralizada.
 
SENDO MAIS SEMÂNTICO
<code>
Trecho de código
 
SENDO MAIS SEMÂNTICO
<code>
<code>Código Inline</code>
<pre>
 <code>
 Código 
 multilinha
 </code>
</pre>
 
SENDO MAIS SEMÂNTICO
<del>
Texto que foi deletado de um 
documento
 
SENDO MAIS SEMÂNTICO
<ins>
Texto que foi inserido em um 
documento. 
Geralmente sublinhado.
 
SENDO MAIS SEMÂNTICO
<fieldset>
Agrupa campos relacionados 
de um formulário
 
SENDO MAIS SEMÂNTICO
<legend>
Adiciona uma legenda a um 
fieldset
 
SENDO MAIS SEMÂNTICO
<samp>
Exemplo de saída de código
 
SENDO MAIS SEMÂNTICO
<tfoot>
Rodapé de uma tabela
 
SENDO MAIS SEMÂNTICO
<thead>
Cabeçalho de uma tabela
 
SENDO MAIS SEMÂNTICO
<th>
Célula-título de uma tabela
 
USAR COM BOM-SENSO
<br>
Na dúvida, não use.
 
USAR COM BOM-SENSO
<b>
Prefira usar a tag <strong>
 
USAR COM BOM-SENSO
<i>
Prefira usar a tag <em>
 
Let's Code!
 
COMENTÁRIOS EM HTML
<!-- Um comentário -->
 
 
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
 
CSS
 
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium 
Lie 
 
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium 
Lie
1996 - W3C lança recomendação 
oficial do CSS1
 
 
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium 
Lie
1996 - W3C lança recomendação 
oficial do CSS1
1996 - IE3 lança suporte parcial
 
 
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium 
Lie
1996 - W3C lança recomendação 
oficial do CSS1
1996 - IE3 lança suporte parcial
1998 - W3C lança recomendação 
do CSS2
 
 
A LINGUAGEM
SEPARAÇÃO DE 
RESPONSABILIDADES 
 
A LINGUAGEM
SEPARAÇÃO DE 
RESPONSABILIDADES 
 
A LINGUAGEM
FOLHA DE ESTILO 
 
 
A LINGUAGEM
FOLHA DE ESTILO EM CASCATA
 
 
A LINGUAGEM
COMPATIBILIDADE 
CROSSBROWSER 
 
A LINGUAGEM
PROPRIEDADES
 
 
A LINGUAGEM
REGRAS
 
 
A LINGUAGEM
SELETORES
 
 
A LINGUAGEM
PSEUDO-ELEMENTOS
 
 
A LINGUAGEM
PSEUDO-CLASSES
 
 
SELETORES DO CSS(ATÉ O 2)
* [Universal]
 
 
SELETORES DO CSS(ATÉ O 2)
E > F[filhos]
 
 
SELETORES DO CSS(ATÉ O 2)
E:first-child [pseudo-classe 
first-child] 
 
SELETORES DO CSS(ATÉ O 2)
E:link 
E:visited[pseudo-classesde 
link]
 
 
SELETORES DO CSS(ATÉ O 2)
E:active E:hover 
E:focus[pseudo-classes 
dinâmicas]
 
 
SELETORES DO CSS(ATÉ O 2)
E + F [adjacentes]
 
 
SELETORES DO CSS(ATÉ O 2)
E[foo] [possui atributo]
 
 
SELETORES DO CSS(ATÉ O 2)
E[foo="warning"] [possui 
atributo igual a] 
 
SELETORES DO CSS(ATÉ O 2)
E[foo~="warning"] [possui atributo 
que contém (independente de 
possuir espaços)] 
 
SELETORES DO CSS(ATÉ O 2)
DIV.classe 
 
 
SELETORES DO CSS(ATÉ O 2)
E#id [id]
 
 
COMENTÁRIOS EM CSS(ATÉ O 2)
/*Este é um comentário*/
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
background
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
background-color
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
background-image
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
background-repeat
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
border
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
height
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
width
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
max-height
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
max-width
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
min-height
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
min-width
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
font-family
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
font-size
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
font-style
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
font-weight
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
list-style-type
 square, circle, bullet, none
 
PROPRIEDADES DO CSS(ATÉ O 2)
margin
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
padding
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
cursor
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
display
 none, inline, block, inline-block
 
PROPRIEDADES DO CSS(ATÉ O 2)
overflow
 visible, hidden, scroll, auto
 
PROPRIEDADES DO CSS(ATÉ O 2)
position
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
bottom
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
right
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
left
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
top
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
z-index
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
color
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
letter-spacing
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
line-height
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
text-align
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
text-decoration
 underline, overline, line-through, 
 none
 
PROPRIEDADES DO CSS(ATÉ O 2)
text-indent
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
text-transform
 uppercase, capitalize, lowercase
 
PROPRIEDADES DO CSS(ATÉ O 2)
vertical-align
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
word-spacing
 
 
PROPRIEDADES DO CSS(ATÉ O 2)
float
 
 
 
HTML5
UM NOVO FOCO
 
 
HTML5
MAIS SEMÂNTICA
 
 
HTML5
NOVIDADES
 
 
AS TAGS DO HTML5
<canvas>
 
 
AS TAGS DO HTML5
<details>
 
 
AS TAGS DO HTML5
<summary>
 Título de uma seção details
 
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
 
AS TAGS DO HTML5
<section>
 Agrupa items que possuam 
 relação entre si, e cujo 
 agrupamento não seja 
 meramente para fins de 
 posicionamento
 
AS TAGS DO HTML5
<footer>
 Rodapé, geralmente último 
 elemento do documento
 
AS TAGS DO HTML5
<article>
 Conteúdo agrupado, importante 
 e passível de utilização em 
 feeds
 
AS TAGS DO HTML5
<figure>
 Uma figura, que possivelmente 
 possuirá legenda
 
AS TAGS DO HTML5
<figcaption>
 Legenda de uma figura
 
AS TAGS DO HTML5
<datalist>
<input list="times">
<datalist id="times">
 <option value="Ceará">
 <option value="Fortaleza">
 <option value="Uniclinic">
</datalist>
 
AS TAGS DO HTML5
<datalist> - fallback
Digite 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>
 
AS TAGS DO HTML5
<mark>
 Efetua highlight de um texto e 
 denota que o mesmo possui 
 maior destaque 
 
AS TAGS DO HTML5
<meter>
 Medidor em formato de barra
 
AS TAGS DO HTML5
<meter> - atributo min
 
 
AS TAGS DO HTML5
<meter> - atributo max
 
 
AS TAGS DO HTML5
<meter> - atributo value
 
 
AS TAGS DO HTML5
<nav>
 Um tipo de section, que agrupa 
 links de navegação
 
AS TAGS DO HTML5
<aside>
 Citação, sidebars, anúncios 
 publicitários, grupos de 
 navegação
 
AS TAGS DO HTML5
<output>
Representa o resultado de um 
cálculo
 
AS TAGS DO HTML5
<output>
<form >
<input id="a" type="text"> +
<input id="b" type="text"> =
<output for="a b"></output>
</form>
 
AS TAGS DO HTML5
<progress>
 Barra de progresso, geralmente 
 usada para representar o 
 progresso de uma determinada 
 tarefa
 
AS TAGS DO HTML5
<time>
 Representa uma data, hora ou 
 ambos
 
AS TAGS DO HTML5
<time> - atributo datetime
 
 
 
TAGS DEPRECADAS
<acronym>
 
 
TAGS DEPRECADAS
<applet>
 
 
TAGS DEPRECADAS
<basefont>
 
 
TAGS DEPRECADAS
<big>
 
 
TAGS DEPRECADAS
<center>
 
 
TAGS DEPRECADAS
<font>
 
 
TAGS DEPRECADAS
<frame>
 
 
TAGS DEPRECADAS
<frameset>
 
 
TAGS DEPRECADAS
<noframes>
 
 
TAGS DEPRECADAS
<strike>
 
 
TAGS DEPRECADAS
<tt>
 
 
 
CSS3 - Seletores
element1~element2 
[sequenciais]
 
 
CSS3 - Seletores
[attribute^=value]
 Inicia exatamente com a 
 string value
 
 
CSS3 - Seletores
[attribute$=value]
 Termina exatamente com a 
 string value
 
 
CSS3 - Seletores
[attribute*=value]
 Contém a string value
 
 
CSS3 - Seletores
:first-of-type
 
 
CSS3 - Seletores
:last-of-type
 
 
CSS3 - Seletores
:only-of-type
 
 
CSS3 - Seletores
:only-child
 
 
CSS3 - Seletores
:nth-child(n)
 
 
CSS3 - Seletores
:nth-last-child(n)
 
 
CSS3 - Seletores
:nth-of-type(n)
 
 
CSS3 - Seletores
:nth-last-of-type(n)
 
 
CSS3 - Seletores
:last-child
 
 
CSS3 - Seletores
:root
 
 
CSS3 - Seletores
:empty (sem filhos, nem ao 
menos text-nodes)
 
 
CSS3 - Seletores
:enabled
 
 
CSS3 - Seletores
:disabled
 
 
CSS3 - Seletores
:checked
 
 
CSS3 - Seletores
:not(selector)
 
 
CSS3 - Seletores
::selection
 
padding-box, content-box, 
border-box, text
CSS3 - Propriedades
background-clip
 
 
CSS3 - Propriedades
background-position
left top, left center, left 
bottom, 50% 50%, 10px 
200px
 
 
CSS3 - Propriedades
background-origin
padding-box, content-box, 
border-box
 
 
CSS3 - Propriedades
background-size
width height
Ex:
200px
200px auto
50% 50%
contain e cover
 
 
CSS3 - Propriedades
border-radius
 border-radius: 12px;
 border-top-left-radius: 25px;CSS3 - Propriedades
box-decoration-break
 slice 
 clone
 
 
CSS3 - Propriedades
box-shadow
 box-shadow: hr vr blur color;
 
 
CSS3 - Propriedades
overflow-x
 visible, hidden, scroll, auto
 
 
CSS3 - Propriedades
overflow-y
 visible, hidden, scroll, auto
 
 
CSS3 - Propriedades
Rotate (CSS Transformations)
 transform: rotate(90deg)
 
 
CSS3 - Propriedades
opacity
 opacity: 0.5;
 
 
CSS3 - Propriedades
text-shadow
 text-shadow: hr vr blur color;
 
 
CSS3 - Propriedades
transition
 transition: background-color 
 800ms ease;
 linear, ease, ease-in, ease-out
 
 
Pré-processadores CSS
Sass, LESS, Stylus
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55
	Slide 56
	Slide 57
	Slide 58
	Slide 59
	Slide 60
	Slide 61
	Slide 62
	Slide 63
	Slide 64
	Slide 65
	Slide 66
	Slide 67
	Slide 68
	Slide 69
	Slide 70
	Slide 71
	Slide 72
	Slide 73
	Slide 74
	Slide 75
	Slide 76
	Slide 77
	Slide 78
	Slide 79
	Slide 80
	Slide 81
	Slide 82
	Slide 83
	Slide 84
	Slide 85
	Slide 86
	Slide 87
	Slide 88
	Slide 89
	Slide 90
	Slide 91
	Slide 92
	Slide 93
	Slide 94
	Slide 95
	Slide 96
	Slide 97
	Slide 98
	Slide 99
	Slide 100
	Slide 101
	Slide 102
	Slide 103
	Slide 104
	Slide 105
	Slide 106
	Slide 107
	Slide 108
	Slide 109
	Slide 110
	Slide 111
	Slide 112
	Slide 113
	Slide 114
	Slide 115
	Slide 116
	Slide 117
	Slide 118
	Slide 119
	Slide 120
	Slide 121
	Slide 122
	Slide 123
	Slide 124
	Slide 125
	Slide 126
	Slide 127
	Slide 128
	Slide 129
	Slide 130
	Slide 131
	Slide 132
	Slide 133
	Slide 134
	Slide 135
	Slide 136
	Slide 137
	Slide 138
	Slide 139
	Slide 140
	Slide 141
	Slide 142
	Slide 143
	Slide 144
	Slide 145
	Slide 146
	Slide 147
	Slide 148
	Slide 149
	Slide 150
	Slide 151
	Slide 152
	Slide 153
	Slide 154
	Slide 155
	Slide 156
	Slide 157
	Slide 158
	Slide 159
	Slide 160
	Slide 161
	Slide 162
	Slide 163
	Slide 164
	Slide 165
	Slide 166
	Slide 167
	Slide 168
	Slide 169
	Slide 170
	Slide 171
	Slide 172
	Slide 173
	Slide 174
	Slide 175
	Slide 176
	Slide 177
	Slide 178
	Slide 179
	Slide 180
	Slide 181
	Slide 182
	Slide 183
	Slide 184
	Slide 185
	Slide 186
	Slide 187
	Slide 188
	Slide 189
	Slide 190
	Slide 191
	Slide 192
	Slide 193
	Slide 194
	Slide 195
	Slide 196
	Slide 197
	Slide 198
	Slide 199
	Slide 200
	Slide 201
	Slide 202
	Slide 203
	Slide 204
	Slide 205
	Slide 206
	Slide 207
	Slide 208
	Slide 209
	Slide 210
	Slide 211
	Slide 212
	Slide 213
	Slide 214
	Slide 215
	Slide 216
	Slide 217
	Slide 218
	Slide 219
	Slide 220
	Slide 221
	Slide 222
	Slide 223
	Slide 224
	Slide 225
	Slide 226
	Slide 227
	Slide 228
	Slide 229
	Slide 230
	Slide 231
	Slide 232
	Slide 233
	Slide 234
	Slide 235
	Slide 236
	Slide 237
	Slide 238
	Slide 239
	Slide 240
	Slide 241
	Slide 242
	Slide 243
	Slide 244
	Slide 245
	Slide 246
	Slide 247
	Slide 248
	Slide 249
	Slide 250
	Slide 251
	Slide 252
	Slide 253
	Slide 254
	Slide 255
	Slide 256
	Slide 257
	Slide 258
	Slide 259
	Slide 260
	Slide 261
	Slide 262
	Slide 263
	Slide 264
	Slide 265
	Slide 266
	Slide 267
	Slide 268
	Slide 269
	Slide 270
	Slide 271
	Slide 272
	Slide 273
	Slide 274
	Slide 275
	Slide 276
	Slide 277
	Slide 278
	Slide 279
	Slide 280
	Slide 281
	Slide 282