HTML5 + CSS3 - Do Zero e do Jeito Certo
Upcoming SlideShare
Loading in...5
×
 

HTML5 + CSS3 - Do Zero e do Jeito Certo

on

  • 4,703 views

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 ...

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.

Statistics

Views

Total Views
4,703
Views on SlideShare
4,703
Embed Views
0

Actions

Likes
6
Downloads
126
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 + CSS3 - Do Zero e do Jeito Certo HTML5 + CSS3 - Do Zero e do Jeito Certo Presentation Transcript

  • +ALCIDES QUEIROZDo zero e do jeito certo
  • @alcidesqueiroz
  • @alcidesqueirozalcidesqueiroz@gmail.com
  • @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueiroz
  • @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com
  • @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com (???)
  • Do zero?
  • Do jeito certo?
  • APRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1957 - ARPA surgeAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1957 - ARPA surge1969 - O primeiro e-mail étransmitido em redeAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1957 - ARPA surge1969 - O primeiro e-mail étransmitido em rede1969 - A ARPANET entra emfuncionamentoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 197* - ARPANET em UniversidadesAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoInternet1973 – Primeira conexão entrecontinentesAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoInternet1973 – Primeira conexão entrecontinentes1977 - Criação do TCP/IPAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoInternet1973 – Primeira conexão entrecontinentes1977 - Criação do TCP/IP1979 - Criada a USENETAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1981 - Lançado o IBM PCAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1981 - Lançado o IBM PC1983 - É criada a MILNETAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1981 - Lançado o IBM PC1983 - É criada a MILNET1983 - TCP/IP é adotadoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • 1981 - Lançado o IBM PC1983 - É criada a MILNET1983 - TCP/IP é adotado1984 - ARPANET possui 1000servidoresAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • DNS, BBS, IRC, USENET, e-mail,TCP/IP ...APRESENTAÇÃOBREVE HISTÓRICO (Internet)
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivação
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTML
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTMLO protocolo HTTP
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTMLO protocolo HTTPURI
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)1980 - TBL cria o ENQUIRE
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)1980 - TBL cria o ENQUIRE1989 - TBL e Robert Cailliaurealizam a primeira comunicaçãobem sucedida entre um clienteHTTP e um servidor na Internet
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML1993 - Primeiro servidor HTTP
  • APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML1993 - Primeiro servidor HTTP1993 - Primeira página da Web
  • APRESENTAÇÃOBREVE HISTÓRICO (HTML)
  • APRESENTAÇÃOBREVE HISTÓRICO (HTML)Criada por Tim Berners-Lee eRobert Cailliau em 1989
  • Criada por Tim Berners-Lee eRobert Cailliau em 1989O piloto foi realizado no CERNAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  • Linguagem de marcação dehipertextoAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  • Linguagem de Marcação??
  • É um conjunto de códigosaplicados a um texto ou a dados,com o fim de adicionarinformações particulares sobreesse texto ou dado, ou sobretrechos específicos.Linguagem de Marcação??
  • Ex:Olá, meu nome é João, sou filhode Marta e moro em Fortaleza.Linguagem de Marcação??
  • Ex:Olá, meu nome é<nome>João</nome>, sou filhode <nome>Marta</nome> emoro em <cidade>Fortaleza</cidade>.Linguagem de Marcação??
  • Linguagem de Programação!=Linguagem de MarcaçãoLinguagem 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 dehipertextoAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  • Hipertexto??
  • Termo cunhado por Ted Nelsonem 1965Hipertexto??
  • Termo cunhado por Ted Nelsonem 1965Texto não necessariamentelinearHipertexto??
  • Hipermídia??
  • Termo de autoria tambématribuída a Ted NelsonHipermídia??
  • Termo de autoria tambématribuí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 dehipertextoDerivada da SGML e HyTimeAPRESENTAÇÃOBREVE HISTÓRICO
  • APRESENTAÇÃOTAGSInstruções que marcam eadicionam semântica aohipertexto.
  • APRESENTAÇÃOATRIBUTOSPropriedades de um elementoHTML
  • APRESENTAÇÃOSEMÂNTICA NA WEBAs tags do HTML carregam umsignificado.
  • APRESENTAÇÃOWEB STANDARDSNormas criadas pelo W3C, aserem ser implementadas pelosbrowsers do mercado e seguidaspela comunidade dedesenvolvimento.
  • 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 documentoHTML
  • AS TAGS DO HTML (ATÉ 4.01)<html> - atributo lang<html lang=”pt-br”>Usado para que os user-agentssaibam qual é a linguagemprincipal do documento.
  • AS TAGS DO HTML (ATÉ 4.01)<head>Contém meta-dados a respeitodo documento
  • AS TAGS DO HTML (ATÉ 4.01)<title>Representa o título da página,que constará na barra detítulo do navegador.
  • AS TAGS DO HTML (ATÉ 4.01)<title><title>Dont 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 dahistória.</body>
  • AS TAGS DO HTML (ATÉ 4.01)<h1> a <h6> (Headings)Representam cabeçalhos dediferentes níveis deimportâ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 outrorecurso na web, ou para umtrecho específico desserecurso.
  • 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 dorecurso
  • AS TAGS DO HTML (ATÉ 4.01)<a> - atributo name<a name=”rodape”></a>Nomeia um ponto específico deum documento para que possaser referenciado por outros links.<a href=”#rodape”>Rodapé</a>
  • AS TAGS DO HTML (ATÉ 4.01)<a> - atributo nameDica:atributo name se tornou obsoletono 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 (absolutoou relativo) para a imagem
  • 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ágrafoqualquer, este texto não devefazer sentido algum.</p>
  • Lets Code!
  • gist.github.com/alcidesqueiroz
  • AS TAGS DO HTML (ATÉ 4.01)<table>Tag usada para apresentardados em formato tabular.
  • AS TAGS DO HTML (ATÉ 4.01)<tr>Representa uma linha de umatabela.
  • AS TAGS DO HTML (ATÉ 4.01)<td>Representa uma célula de umatabela.
  • AS TAGS DO HTML (ATÉ 4.01)<td> - atributo colspanNúmero de colunas pelo qual acélula irá se expandir
  • AS TAGS DO HTML (ATÉ 4.01)<td> - atributo rowspanNúmero de linhas pelo qual acé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>
  • Lets Code!
  • AS TAGS DO HTML (ATÉ 4.01)<form>Representa um formulário.
  • AS TAGS DO HTML (ATÉ 4.01)<form> - atributosaction<form action=”enviar.aspx”>Representa a URL do recurso queirá receber os dados doformulário e que realizará oprocessamento desejado
  • AS TAGS DO HTML (ATÉ 4.01)<form> - atributosmethod<form action=”enviar.aspx”method=”get”>Representa o método HTTP queserá usado para envio doformulário
  • Método GETPara submeter o formulário, osvalores de seus campos sãoconcatenados à URL.
  • Método GETEx:http://teste.com/processa?nome=joao&idade=32&sexo=m
  • Método POST (default)Os dados do formulário sãoenviados nos headers dassolitações HTTP
  • AS TAGS DO HTML (ATÉ 4.01)<input>Representa um campo de umformulário.
  • AS TAGS DO HTML (ATÉ 4.01)<input> - atributostypebutton, checkbox, file, hidden,image, password, radio, reset,submit, text
  • AS TAGS DO HTML (ATÉ 4.01)<select>Representa uma caixa deseleção.
  • AS TAGS DO HTML (ATÉ 4.01)<option>Representa uma opção de umselect.
  • AS TAGS DO HTML (ATÉ 4.01)<option> - atributo valueO valor da opção. É o que serásubmetido ao servidor.
  • AS TAGS DO HTML (ATÉ 4.01)<textarea>Representa uma caixa de textomultilinha.
  • AS TAGS DO HTML (ATÉ 4.01)<textarea> - atributo rowsNúmero de linhas
  • AS TAGS DO HTML (ATÉ 4.01)<textarea> - atributo colsNú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 forEspecifica o ID do campo aoqual a label está associada.
  • Lets Code!
  • AS TAGS DO HTML (ATÉ 4.01)<div> e <span>Representam uma divisão emum site.
  • AS TAGS DO HTML (ATÉ 4.01)<hr>Representa uma linhahorizontal.
  • AS TAGS DO HTML (ATÉ 4.01)<ol>Representa uma listaordenada.
  • 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ãoordenada.
  • Lets 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. [InlineFrame]
  • AS TAGS DO HTML (ATÉ 4.01)<iframe> - atributo srcLocalização da página
  • AS TAGS DO HTML (ATÉ 4.01)<link>Define um relacionamentoentre um documento e umrecurso externo.
  • AS TAGS DO HTML (ATÉ 4.01)<link>Suporte real apenas parafolhas de estilo e favicons.
  • AS TAGS DO HTML (ATÉ 4.01)<link> - atributo hrefEspecifica a localização dorecurso externo
  • AS TAGS DO HTML (ATÉ 4.01)<link> - atributo relEspecifica o tipo derelacionamento
  • AS TAGS DO HTML (ATÉ 4.01)<script>Código em um linguagem descript (por padrão JavaScript),ou URI para arquivo de scriptexterno.
  • AS TAGS DO HTML (ATÉ 4.01)<script> - atributo srcEspecifica a localização doscript
  • AS TAGS DO HTML (ATÉ 4.01)<meta>Representa um meta-dadosobre o documento.
  • AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo nameNome do meta-dado
  • AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo nameValores possíveis:author, description, keywords,reply-to
  • AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo contentValor do meta-dado
  • AS TAGS DO HTML (ATÉ 4.01)<pre>Texto pré-formatado.Preserva espaços e quebrasde linha e é exibido em fontemono-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. Porpadrão centralizada.
  • SENDO MAIS SEMÂNTICO<code>Trecho de código
  • SENDO MAIS SEMÂNTICO<code><code>Código Inline</code><pre><code>Códigomultilinha</code></pre>
  • SENDO MAIS SEMÂNTICO<del>Texto que foi deletado de umdocumento
  • SENDO MAIS SEMÂNTICO<ins>Texto que foi inserido em umdocumento.Geralmente sublinhado.
  • SENDO MAIS SEMÂNTICO<fieldset>Agrupa campos relacionadosde um formulário
  • SENDO MAIS SEMÂNTICO<legend>Adiciona uma legenda a umfieldset
  • 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>
  • Lets Code!
  • COMENTÁRIOS EM HTML<!-- Um comentário -->
  • DOCTYPE<!DOCTYPE html>Define a versão do html na qualo documento foi escrito,fazendo com que o navegadorrenderize uma páginacorretamente
  • CSS
  • BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie
  • BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie1996 - W3C lança recomendaçãooficial do CSS1
  • BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie1996 - W3C lança recomendaçãooficial do CSS11996 - IE3 lança suporte parcial
  • BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie1996 - W3C lança recomendaçãooficial do CSS11996 - IE3 lança suporte parcial1998 - W3C lança recomendaçãodo CSS2
  • A LINGUAGEMSEPARAÇÃO DERESPONSABILIDADES
  • A LINGUAGEMSEPARAÇÃO DERESPONSABILIDADES
  • A LINGUAGEMFOLHA DE ESTILO
  • A LINGUAGEMFOLHA DE ESTILO EM CASCATA
  • A LINGUAGEMCOMPATIBILIDADECROSSBROWSER
  • A LINGUAGEMPROPRIEDADES
  • A LINGUAGEMREGRAS
  • A LINGUAGEMSELETORES
  • A LINGUAGEMPSEUDO-ELEMENTOS
  • A LINGUAGEMPSEUDO-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-classefirst-child]
  • SELETORES DO CSS(ATÉ O 2)E:linkE:visited[pseudo-classes delink]
  • SELETORES DO CSS(ATÉ O 2)E:active E:hoverE:focus[pseudo-classesdinâ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"] [possuiatributo igual a]
  • SELETORES DO CSS(ATÉ O 2)E[foo~="warning"] [possui atributoque contém (independente depossuir 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-typesquare, 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)displaynone, inline, block, inline-block
  • PROPRIEDADES DO CSS(ATÉ O 2)overflowvisible, 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-decorationunderline, overline, line-through,none
  • PROPRIEDADES DO CSS(ATÉ O 2)text-indent
  • PROPRIEDADES DO CSS(ATÉ O 2)text-transformuppercase, 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
  • HTML5UM NOVO FOCO
  • HTML5MAIS SEMÂNTICA
  • HTML5NOVIDADES
  • 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 daespecificação em abril/13),content tables, logos, searchform
  • AS TAGS DO HTML5<section>Agrupa items que possuamrelação entre si, e cujoagrupamento não sejameramente para fins deposicionamento
  • AS TAGS DO HTML5<footer>Rodapé, geralmente últimoelemento do documento
  • AS TAGS DO HTML5<article>Conteúdo agrupado, importantee passível de utilização emfeeds
  • AS TAGS DO HTML5<figure>Uma figura, que possivelmentepossuirá 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> - 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>
  • AS TAGS DO HTML5<mark>Efetua highlight de um texto edenota que o mesmo possuimaior 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 agrupalinks de navegação
  • AS TAGS DO HTML5<aside>Citação, sidebars, anúnciospublicitários, grupos denavegação
  • AS TAGS DO HTML5<output>Representa o resultado de umcá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, geralmenteusada para representar oprogresso de uma determinadatarefa
  • AS TAGS DO HTML5<time>Representa uma data, hora ouambos
  • 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 - Seletoreselement1~element2[sequenciais]
  • CSS3 - Seletores[attribute^=value]Inicia exatamente com astring value
  • CSS3 - Seletores[attribute$=value]Termina exatamente com astring 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 aomenos text-nodes)
  • CSS3 - Seletores:enabled
  • CSS3 - Seletores:disabled
  • CSS3 - Seletores:checked
  • CSS3 - Seletores:not(selector)
  • CSS3 - Seletores::selection
  • padding-box, content-box,border-box, textCSS3 - Propriedadesbackground-clip
  • CSS3 - Propriedadesbackground-positionleft top, left center, leftbottom, 50% 50%, 10px200px
  • CSS3 - Propriedadesbackground-originpadding-box, content-box,border-box
  • CSS3 - Propriedadesbackground-sizewidth heightEx:200px200px auto50% 50%contain e cover
  • CSS3 - Propriedadesborder-radiusborder-radius: 12px;border-top-left-radius: 25px;
  • CSS3 - Propriedadesbox-decoration-breaksliceclone
  • CSS3 - Propriedadesbox-shadowbox-shadow: hr vr blur color;
  • CSS3 - Propriedadesoverflow-xvisible, hidden, scroll, auto
  • CSS3 - Propriedadesoverflow-yvisible, hidden, scroll, auto
  • CSS3 - PropriedadesRotate (CSS Transformations)transform: rotate(90deg)
  • CSS3 - Propriedadesopacityopacity: 0.5;
  • CSS3 - Propriedadestext-shadowtext-shadow: hr vr blur color;
  • CSS3 - Propriedadestransitiontransition: background-color800ms ease;linear, ease, ease-in, ease-out
  • Pré-processadores CSSSass, LESS, Stylus