+
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
BREV...
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
APRESE...
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo
Internet
1973 – Primeira conexão entre
continentes
1977 -...
197* - ARPANET em Universidades
1971 - Vinton Cerf cunha o termo
Internet
1973 – Primeira conexão entre
continentes
1977 -...
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ÇÃ...
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
...
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...
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...
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...
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 co...
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 lingua...
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=...
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 p...
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 ...
AS TAGS DO HTML (ATÉ 4.01)
<p>
Representa um parágrafo
AS 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>000...
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á receb...
AS TAGS DO HTML (ATÉ 4.01)
<form> - atributos
method
<form action=”enviar.aspx”
method=”get”>
Representa o método HTTP que...
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,...
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 scrip...
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ça...
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...
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 ...
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium
Lie
1996 - W3C lança recomendação
oficial do CSS1
1996 - IE3 lança suporte ...
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-classes de
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),
co...
AS TAGS DO HTML5
<section>
Agrupa items que possuam
relação entre si, e cujo
agrupamento não seja
meramente para fins de
p...
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">
<...
AS TAGS DO HTML5
<datalist> - fallback
Digite seu time: <input list="times">
<datalist id="times">
<label>Ou escolha na li...
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>
</...
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
Html5css3 dozeroedojeitocerto-130520201244-phpapp02
Html5css3 dozeroedojeitocerto-130520201244-phpapp02
Próximos SlideShares
Carregando em…5
×

Html5css3 dozeroedojeitocerto-130520201244-phpapp02

206 visualizações

Publicada em

Html5css3 dozeroedojeitocerto

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
206
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html5css3 dozeroedojeitocerto-130520201244-phpapp02

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

×