HTML5 + CSS3 - Do Zero e do Jeito Certo

16,260 views
16,314 views

Published on

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.

Published in: Technology
3 Comments
55 Likes
Statistics
Notes
No Downloads
Views
Total views
16,260
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
1,602
Comments
3
Likes
55
Embeds 0
No embeds

No notes for slide

HTML5 + CSS3 - Do Zero e do Jeito Certo

  1. 1. +ALCIDES QUEIROZDo zero e do jeito certo
  2. 2. @alcidesqueiroz
  3. 3. @alcidesqueirozalcidesqueiroz@gmail.com
  4. 4. @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueiroz
  5. 5. @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com
  6. 6. @alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com (???)
  7. 7. Do zero?
  8. 8. Do jeito certo?
  9. 9. APRESENTAÇÃOBREVE HISTÓRICO (Internet)
  10. 10. 1957 - ARPA surgeAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  11. 11. 1957 - ARPA surge1969 - O primeiro e-mail étransmitido em redeAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  12. 12. 1957 - ARPA surge1969 - O primeiro e-mail étransmitido em rede1969 - A ARPANET entra emfuncionamentoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  13. 13. 197* - ARPANET em UniversidadesAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  14. 14. 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  15. 15. 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoInternet1973 – Primeira conexão entrecontinentesAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  16. 16. 197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termoInternet1973 – Primeira conexão entrecontinentes1977 - Criação do TCP/IPAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  17. 17. 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)
  18. 18. 1981 - Lançado o IBM PCAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  19. 19. 1981 - Lançado o IBM PC1983 - É criada a MILNETAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  20. 20. 1981 - Lançado o IBM PC1983 - É criada a MILNET1983 - TCP/IP é adotadoAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  21. 21. 1981 - Lançado o IBM PC1983 - É criada a MILNET1983 - TCP/IP é adotado1984 - ARPANET possui 1000servidoresAPRESENTAÇÃOBREVE HISTÓRICO (Internet)
  22. 22. DNS, BBS, IRC, USENET, e-mail,TCP/IP ...APRESENTAÇÃOBREVE HISTÓRICO (Internet)
  23. 23. APRESENTAÇÃOBREVE HISTÓRICO (Web)
  24. 24. APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivação
  25. 25. APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTML
  26. 26. APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTMLO protocolo HTTP
  27. 27. APRESENTAÇÃOBREVE HISTÓRICO (Web)A motivaçãoA linguagem HTMLO protocolo HTTPURI
  28. 28. APRESENTAÇÃOBREVE HISTÓRICO (Web)1980 - TBL cria o ENQUIRE
  29. 29. 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
  30. 30. APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML
  31. 31. APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML1993 - Primeiro servidor HTTP
  32. 32. APRESENTAÇÃOBREVE HISTÓRICO (Web)1990 - Surge o HTML1993 - Primeiro servidor HTTP1993 - Primeira página da Web
  33. 33. APRESENTAÇÃOBREVE HISTÓRICO (HTML)
  34. 34. APRESENTAÇÃOBREVE HISTÓRICO (HTML)Criada por Tim Berners-Lee eRobert Cailliau em 1989
  35. 35. Criada por Tim Berners-Lee eRobert Cailliau em 1989O piloto foi realizado no CERNAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  36. 36. Linguagem de marcação dehipertextoAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  37. 37. Linguagem de Marcação??
  38. 38. É 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??
  39. 39. Ex:Olá, meu nome é João, sou filhode Marta e moro em Fortaleza.Linguagem de Marcação??
  40. 40. Ex:Olá, meu nome é<nome>João</nome>, sou filhode <nome>Marta</nome> emoro em <cidade>Fortaleza</cidade>.Linguagem de Marcação??
  41. 41. Linguagem de Programação!=Linguagem de MarcaçãoLinguagem 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 dehipertextoAPRESENTAÇÃOBREVE HISTÓRICO (HTML)
  44. 44. Hipertexto??
  45. 45. Termo cunhado por Ted Nelsonem 1965Hipertexto??
  46. 46. Termo cunhado por Ted Nelsonem 1965Texto não necessariamentelinearHipertexto??
  47. 47. Hipermídia??
  48. 48. Termo de autoria tambématribuída a Ted NelsonHipermídia??
  49. 49. 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??
  50. 50. Continuando...
  51. 51. Linguagem de marcação dehipertextoDerivada da SGML e HyTimeAPRESENTAÇÃOBREVE HISTÓRICO
  52. 52. APRESENTAÇÃOTAGSInstruções que marcam eadicionam semântica aohipertexto.
  53. 53. APRESENTAÇÃOATRIBUTOSPropriedades de um elementoHTML
  54. 54. APRESENTAÇÃOSEMÂNTICA NA WEBAs tags do HTML carregam umsignificado.
  55. 55. APRESENTAÇÃOWEB STANDARDSNormas criadas pelo W3C, aserem ser implementadas pelosbrowsers do mercado e seguidaspela comunidade dedesenvolvimento.
  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 documentoHTML
  60. 60. 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.
  61. 61. AS TAGS DO HTML (ATÉ 4.01)<head>Contém meta-dados a respeitodo documento
  62. 62. AS TAGS DO HTML (ATÉ 4.01)<title>Representa o título da página,que constará na barra detítulo do navegador.
  63. 63. AS TAGS DO HTML (ATÉ 4.01)<title><title>Dont 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 dahistória.</body>
  66. 66. AS TAGS DO HTML (ATÉ 4.01)<h1> a <h6> (Headings)Representam cabeçalhos dediferentes níveis deimportâ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 outrorecurso na web, ou para umtrecho específico desserecurso.
  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 dorecurso
  71. 71. 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>
  72. 72. AS TAGS DO HTML (ATÉ 4.01)<a> - atributo nameDica:atributo name se tornou obsoletono 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 (absolutoou 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ágrafoqualquer, este texto não devefazer sentido algum.</p>
  77. 77. Lets Code!
  78. 78. gist.github.com/alcidesqueiroz
  79. 79. AS TAGS DO HTML (ATÉ 4.01)<table>Tag usada para apresentardados em formato tabular.
  80. 80. AS TAGS DO HTML (ATÉ 4.01)<tr>Representa uma linha de umatabela.
  81. 81. AS TAGS DO HTML (ATÉ 4.01)<td>Representa uma célula de umatabela.
  82. 82. AS TAGS DO HTML (ATÉ 4.01)<td> - atributo colspanNúmero de colunas pelo qual acélula irá se expandir
  83. 83. AS TAGS DO HTML (ATÉ 4.01)<td> - atributo rowspanNúmero de linhas pelo qual acé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. Lets 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> - atributosaction<form action=”enviar.aspx”>Representa a URL do recurso queirá receber os dados doformulário e que realizará oprocessamento desejado
  88. 88. 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
  89. 89. Método GETPara submeter o formulário, osvalores de seus campos sãoconcatenados à URL.
  90. 90. Método GETEx:http://teste.com/processa?nome=joao&idade=32&sexo=m
  91. 91. Método POST (default)Os dados do formulário sãoenviados nos headers dassolitações HTTP
  92. 92. AS TAGS DO HTML (ATÉ 4.01)<input>Representa um campo de umformulário.
  93. 93. AS TAGS DO HTML (ATÉ 4.01)<input> - atributostypebutton, checkbox, file, hidden,image, password, radio, reset,submit, text
  94. 94. AS TAGS DO HTML (ATÉ 4.01)<select>Representa uma caixa deseleção.
  95. 95. AS TAGS DO HTML (ATÉ 4.01)<option>Representa uma opção de umselect.
  96. 96. AS TAGS DO HTML (ATÉ 4.01)<option> - atributo valueO valor da opção. É o que serásubmetido ao servidor.
  97. 97. AS TAGS DO HTML (ATÉ 4.01)<textarea>Representa uma caixa de textomultilinha.
  98. 98. AS TAGS DO HTML (ATÉ 4.01)<textarea> - atributo rowsNúmero de linhas
  99. 99. AS TAGS DO HTML (ATÉ 4.01)<textarea> - atributo colsNú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 forEspecifica o ID do campo aoqual a label está associada.
  103. 103. Lets Code!
  104. 104. AS TAGS DO HTML (ATÉ 4.01)<div> e <span>Representam uma divisão emum site.
  105. 105. AS TAGS DO HTML (ATÉ 4.01)<hr>Representa uma linhahorizontal.
  106. 106. AS TAGS DO HTML (ATÉ 4.01)<ol>Representa uma listaordenada.
  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ãoordenada.
  109. 109. Lets 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. [InlineFrame]
  112. 112. AS TAGS DO HTML (ATÉ 4.01)<iframe> - atributo srcLocalização da página
  113. 113. AS TAGS DO HTML (ATÉ 4.01)<link>Define um relacionamentoentre um documento e umrecurso externo.
  114. 114. AS TAGS DO HTML (ATÉ 4.01)<link>Suporte real apenas parafolhas de estilo e favicons.
  115. 115. AS TAGS DO HTML (ATÉ 4.01)<link> - atributo hrefEspecifica a localização dorecurso externo
  116. 116. AS TAGS DO HTML (ATÉ 4.01)<link> - atributo relEspecifica o tipo derelacionamento
  117. 117. AS TAGS DO HTML (ATÉ 4.01)<script>Código em um linguagem descript (por padrão JavaScript),ou URI para arquivo de scriptexterno.
  118. 118. AS TAGS DO HTML (ATÉ 4.01)<script> - atributo srcEspecifica a localização doscript
  119. 119. AS TAGS DO HTML (ATÉ 4.01)<meta>Representa um meta-dadosobre o documento.
  120. 120. AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo nameNome do meta-dado
  121. 121. AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo nameValores possíveis:author, description, keywords,reply-to
  122. 122. AS TAGS DO HTML (ATÉ 4.01)<meta> - atributo contentValor do meta-dado
  123. 123. AS TAGS DO HTML (ATÉ 4.01)<pre>Texto pré-formatado.Preserva espaços e quebrasde linha e é exibido em fontemono-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. Porpadrã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ódigomultilinha</code></pre>
  132. 132. SENDO MAIS SEMÂNTICO<del>Texto que foi deletado de umdocumento
  133. 133. SENDO MAIS SEMÂNTICO<ins>Texto que foi inserido em umdocumento.Geralmente sublinhado.
  134. 134. SENDO MAIS SEMÂNTICO<fieldset>Agrupa campos relacionadosde um formulário
  135. 135. SENDO MAIS SEMÂNTICO<legend>Adiciona uma legenda a umfieldset
  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. Lets Code!
  144. 144. COMENTÁRIOS EM HTML<!-- Um comentário -->
  145. 145. DOCTYPE<!DOCTYPE html>Define a versão do html na qualo documento foi escrito,fazendo com que o navegadorrenderize uma páginacorretamente
  146. 146. CSS
  147. 147. BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie
  148. 148. BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie1996 - W3C lança recomendaçãooficial do CSS1
  149. 149. BREVE HISTÓRICO1994 - Proposto por Håkon WiumLie1996 - W3C lança recomendaçãooficial do CSS11996 - IE3 lança suporte parcial
  150. 150. 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
  151. 151. A LINGUAGEMSEPARAÇÃO DERESPONSABILIDADES
  152. 152. A LINGUAGEMSEPARAÇÃO DERESPONSABILIDADES
  153. 153. A LINGUAGEMFOLHA DE ESTILO
  154. 154. A LINGUAGEMFOLHA DE ESTILO EM CASCATA
  155. 155. A LINGUAGEMCOMPATIBILIDADECROSSBROWSER
  156. 156. A LINGUAGEMPROPRIEDADES
  157. 157. A LINGUAGEMREGRAS
  158. 158. A LINGUAGEMSELETORES
  159. 159. A LINGUAGEMPSEUDO-ELEMENTOS
  160. 160. A LINGUAGEMPSEUDO-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-classefirst-child]
  164. 164. SELETORES DO CSS(ATÉ O 2)E:linkE:visited[pseudo-classes delink]
  165. 165. SELETORES DO CSS(ATÉ O 2)E:active E:hoverE:focus[pseudo-classesdinâ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"] [possuiatributo igual a]
  169. 169. SELETORES DO CSS(ATÉ O 2)E[foo~="warning"] [possui atributoque contém (independente depossuir 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-typesquare, 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)displaynone, inline, block, inline-block
  193. 193. PROPRIEDADES DO CSS(ATÉ O 2)overflowvisible, 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-decorationunderline, overline, line-through,none
  205. 205. PROPRIEDADES DO CSS(ATÉ O 2)text-indent
  206. 206. PROPRIEDADES DO CSS(ATÉ O 2)text-transformuppercase, 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. HTML5UM NOVO FOCO
  211. 211. HTML5MAIS SEMÂNTICA
  212. 212. HTML5NOVIDADES
  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 daespecificação em abril/13),content tables, logos, searchform
  217. 217. AS TAGS DO HTML5<section>Agrupa items que possuamrelação entre si, e cujoagrupamento não sejameramente para fins deposicionamento
  218. 218. AS TAGS DO HTML5<footer>Rodapé, geralmente últimoelemento do documento
  219. 219. AS TAGS DO HTML5<article>Conteúdo agrupado, importantee passível de utilização emfeeds
  220. 220. AS TAGS DO HTML5<figure>Uma figura, que possivelmentepossuirá 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> - 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>
  224. 224. AS TAGS DO HTML5<mark>Efetua highlight de um texto edenota que o mesmo possuimaior 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 agrupalinks de navegação
  230. 230. AS TAGS DO HTML5<aside>Citação, sidebars, anúnciospublicitários, grupos denavegação
  231. 231. AS TAGS DO HTML5<output>Representa o resultado de umcá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, geralmenteusada para representar oprogresso de uma determinadatarefa
  234. 234. AS TAGS DO HTML5<time>Representa uma data, hora ouambos
  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 - Seletoreselement1~element2[sequenciais]
  248. 248. CSS3 - Seletores[attribute^=value]Inicia exatamente com astring value
  249. 249. CSS3 - Seletores[attribute$=value]Termina exatamente com astring 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 aomenos 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, textCSS3 - Propriedadesbackground-clip
  268. 268. CSS3 - Propriedadesbackground-positionleft top, left center, leftbottom, 50% 50%, 10px200px
  269. 269. CSS3 - Propriedadesbackground-originpadding-box, content-box,border-box
  270. 270. CSS3 - Propriedadesbackground-sizewidth heightEx:200px200px auto50% 50%contain e cover
  271. 271. CSS3 - Propriedadesborder-radiusborder-radius: 12px;border-top-left-radius: 25px;
  272. 272. CSS3 - Propriedadesbox-decoration-breaksliceclone
  273. 273. CSS3 - Propriedadesbox-shadowbox-shadow: hr vr blur color;
  274. 274. CSS3 - Propriedadesoverflow-xvisible, hidden, scroll, auto
  275. 275. CSS3 - Propriedadesoverflow-yvisible, hidden, scroll, auto
  276. 276. CSS3 - PropriedadesRotate (CSS Transformations)transform: rotate(90deg)
  277. 277. CSS3 - Propriedadesopacityopacity: 0.5;
  278. 278. CSS3 - Propriedadestext-shadowtext-shadow: hr vr blur color;
  279. 279. CSS3 - Propriedadestransitiontransition: background-color800ms ease;linear, ease, ease-in, ease-out
  280. 280. Pré-processadores CSSSass, LESS, Stylus

×