Manual HTML Estrutura do HTML (DOM) Exemplo de Estrutura
Estrutura do HTML (DOM) Document Object Model é uma plataforma independente utilizada para representar documentos HTML ou ...
Exemplo de Estrutura <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><!DOCTYPE html P...
Exemplos de código HTML Texto Listas Tabelas Formulários Outros
Texto <ul><li><b>Negrito</b> Negrito   </li></ul><ul><li><i>Itálico</i> Itálico </li></ul><ul><li><u>Sublinhado</u> Sublin...
Listas <ul><li>Listas numérica: </li></ul><ul><li><ol> </li></ul><ul><li><li>Eu</li> </li></ul><ul><li><li>Tu</li> </li></...
Tabelas <ul><li><table> </li></ul><ul><li><thead> </li></ul><ul><li><tr> <th>Código</th> </li></ul><ul><li><th>Nome</th> <...
Formulários <ul><li><form action=“destino.jsp” method=“POST”> </li></ul><ul><li><ul> </li></ul><ul><li><li> </li></ul><ul>...
Outros <ul><li>Links </li></ul><ul><ul><li><a href=“destino.jsp”>Destino</a> </li></ul></ul><ul><li>Imagem </li></ul><ul><...
CSS Sintaxe Uso Geral Caixas de Texto Fontes Modelo de Caixa Bordas Posições Background Listas Seletores
Sintaxe <ul><li>Sintaxe </li></ul><ul><ul><li>seletor {propriedade: valor;} </li></ul></ul><ul><li>CSS Externo </li></ul><...
Uso Geral class Termo procedido por um ponto ‘.’. ID Termo procedido por um ‘#’. div Elemento para dividir o layout. span ...
Caixas de Texto letter-spacing Espaçamento entre as letras. line-height Altura da entrelinha. text-align Alinhamento horiz...
Fontes font-style (italic, normal) font-variant (normal, small-caps) font-weight (bold, normal, lighter, bolder, integer[1...
Modelos de Caixa <ul><li>margin: 2px 1px 3px 4px; // sentido horário. Também se aplica a margin e border. </li></ul><ul><l...
Bordas .estaDiv { border:2px solid blue; } border-width Largura da borda. border-style ( dashed, dotted, double, groove, i...
Posições .EsteRetângulo { position:fixed; top:10px; right:0; } clear O elemento ignora o float de outros elementos. (both,...
Background background-color Muda a cor de fundo. background-image Define uma imagem de fundo. background-repeat Repetição ...
Listas <ul><ul><li>Item 1 </li></ul></ul><ul><ul><li>Item 2 </li></ul></ul><ul><li>.listaInside { </li></ul><ul><li>list-s...
Seletores * Define propriedade para TODOS os elementos. <tag> Define para todas as tags especificadas. tag * TUDO dentro d...
Referências Duvidas? www.w3schools.com http://en.wikipedia.org/wiki/HTML_DOM http://www.w3schools.com/Css/css_reference.as...
Upcoming SlideShare
Loading in...5
×

Aprenda HTML e CSS

2,300

Published on

Manual HTML e CSS.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,300
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Aprenda HTML e CSS

  1. 1. Manual HTML Estrutura do HTML (DOM) Exemplo de Estrutura
  2. 2. Estrutura do HTML (DOM) Document Object Model é uma plataforma independente utilizada para representar documentos HTML ou XML, bem como uma API para consultar e manipular esses documentos.
  3. 3. Exemplo de Estrutura <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;pt-br&quot; lang=&quot;pt-br“> </li></ul><ul><li><head> </li></ul><ul><li><title>Título</title> </li></ul><ul><li><meta http-equiv=&quot;Content-Language&quot; content=&quot;pt-br&quot;/> </li></ul><ul><li><meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot; /> </li></ul><ul><li><script type=“text/javascript”> </li></ul><ul><li>// Código Javascript Aqui </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>// Código HTML Aqui </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  4. 4. Exemplos de código HTML Texto Listas Tabelas Formulários Outros
  5. 5. Texto <ul><li><b>Negrito</b> Negrito </li></ul><ul><li><i>Itálico</i> Itálico </li></ul><ul><li><u>Sublinhado</u> Sublinhado </li></ul><ul><li><cite>Citação</cite> Citação </li></ul><ul><li><q>Citação</q> “Citação” </li></ul><ul><li><small>Pequeno</small> Pequeno </li></ul><ul><li><big>Grande</big> Grande </li></ul><ul><li>x<sub>Sub</sub> x sub </li></ul><ul><li>x<sup>Sup</sup> x sup </li></ul>
  6. 6. Listas <ul><li>Listas numérica: </li></ul><ul><li><ol> </li></ul><ul><li><li>Eu</li> </li></ul><ul><li><li>Tu</li> </li></ul><ul><li><li>Ele</li> </li></ul><ul><li></ol> </li></ul><ul><li>Listas simples: </li></ul><ul><li><ul> </li></ul><ul><li><li>Eu</li> </li></ul><ul><li><li>Tu</li> </li></ul><ul><li><li>Ele</li> </li></ul><ul><li></ul> </li></ul><ul><li>Eu </li></ul><ul><li>Tu </li></ul><ul><li>Ele </li></ul><ul><li>Eu </li></ul><ul><li>Tu </li></ul><ul><li>Ele </li></ul>
  7. 7. Tabelas <ul><li><table> </li></ul><ul><li><thead> </li></ul><ul><li><tr> <th>Código</th> </li></ul><ul><li><th>Nome</th> </li></ul><ul><li></tr> </li></ul><ul><li></thead> </li></ul><ul><li><tbody> </li></ul><ul><li><tr> <td>2</td> </li></ul><ul><li><td>Fulano</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> <td>3</td> </li></ul><ul><li><td>Ciclano</td> </li></ul><ul><li></tr> </li></ul><ul><li></tbody> </li></ul><ul><li><tfooter> </li></ul><ul><li><tr> <td colspan=“2”>Total de 2 registros</td> </li></ul><ul><li></tr> </li></ul><ul><li></tfooter> </li></ul><ul><li></table> </li></ul>Código Nome 2 Fulano 3 Ciclano Total de 2 registros
  8. 8. Formulários <ul><li><form action=“destino.jsp” method=“POST”> </li></ul><ul><li><ul> </li></ul><ul><li><li> </li></ul><ul><li><label for=“nome”>Nome</label> </li></ul><ul><li><input type=“text” id=“nome” /> </li></ul><ul><li></li> </li></ul><ul><li><li> </li></ul><ul><li><label for=“senha”>Senha</label> </li></ul><ul><li><input type=“password” id=“senha” /> </li></ul><ul><li></li> </li></ul><ul><li><li> </li></ul><ul><li><button>Enviar</button> </li></ul><ul><li></li> </li></ul><ul><li></ul> </li></ul><ul><li></form> </li></ul>
  9. 9. Outros <ul><li>Links </li></ul><ul><ul><li><a href=“destino.jsp”>Destino</a> </li></ul></ul><ul><li>Imagem </li></ul><ul><ul><li><img src=“origem.jpg” title=“Título” alt=“Título” /> </li></ul></ul><ul><li>Botão </li></ul><ul><ul><li><button type=“submit”>Clique Aqui</button> </li></ul></ul><ul><li>Comentários (HTML) </li></ul><ul><ul><li><!– aqui --> </li></ul></ul>
  10. 10. CSS Sintaxe Uso Geral Caixas de Texto Fontes Modelo de Caixa Bordas Posições Background Listas Seletores
  11. 11. Sintaxe <ul><li>Sintaxe </li></ul><ul><ul><li>seletor {propriedade: valor;} </li></ul></ul><ul><li>CSS Externo </li></ul><ul><ul><li><link rel=”stylesheet” type=”text/css” href=”arquivo.css” /> </li></ul></ul><ul><li>CSS Interno </li></ul><ul><ul><li><style type=”text/css”> </li></ul></ul><ul><ul><li>seletor {propriedade: valor;} </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><li>CSS em linha </li></ul><ul><ul><li><tag style=”propriedade: valor;”> </li></ul></ul>
  12. 12. Uso Geral class Termo procedido por um ponto ‘.’. ID Termo procedido por um ‘#’. div Elemento para dividir o layout. span Formatação em linha. color Cor do texto. cursor Muda o cursor do mouse. ( url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help) display (block;inline;list-item;none) overflow Quando o conteúdo transborda do elemento. (visible,hidden,scroll,auto) visibility Visibilidade. (visible, hidden)
  13. 13. Caixas de Texto letter-spacing Espaçamento entre as letras. line-height Altura da entrelinha. text-align Alinhamento horizontal do texto. (left, right, center, justify) text-decoration blink - Piscar line-through - Tracejado none - Normal overline – Linha acima underline – Linha abaixo text-indent Identação do texto. (Parágrafo em %, px, cm, ...). text-transform (capitalise, lowecase, uppercase). vertical-align Alinhamento vertical. word-spacing Espaço entre as palavras.
  14. 14. Fontes font-style (italic, normal) font-variant (normal, small-caps) font-weight (bold, normal, lighter, bolder, integer[100-900]) font-size Tamanho da fonte. font-family Especifica a família da fonte. (Arial,Verdana,...) font Style, variant, weight, size, family. Ex: font: italic small-caps bold 12px arial;
  15. 15. Modelos de Caixa <ul><li>margin: 2px 1px 3px 4px; // sentido horário. Também se aplica a margin e border. </li></ul><ul><li>padding-right; </li></ul><ul><li>padding-bottom; </li></ul><ul><li>padding-left; </li></ul><ul><li>border-bottom; </li></ul><ul><li>border-left; </li></ul><ul><li>border-right; </li></ul><ul><li>border-top; </li></ul><ul><li>height; </li></ul><ul><li>width; </li></ul><ul><li>margin-top; </li></ul><ul><li>margin-right; </li></ul><ul><li>margin-bottom; </li></ul><ul><li>margin-left; </li></ul><ul><li>padding-top; </li></ul>
  16. 16. Bordas .estaDiv { border:2px solid blue; } border-width Largura da borda. border-style ( dashed, dotted, double, groove, inset, outset, ridge, solid, none). border-color Cor da borda. border-collapse Somente para tabelas. Utilizado para definir o espaço da borda entre colunas e linhas. (collapse, separate). border Contém width, style e color. Ex: border:2px solid #f4f4f4;
  17. 17. Posições .EsteRetângulo { position:fixed; top:10px; right:0; } clear O elemento ignora o float de outros elementos. (both, left, right, none) float O elemento flutua para esquerda ou direita. (left, right, none) left Desloca o elemento pela esquerda. (auto, length values [pt, in, cm, px]) top Desloca o elemento pelo topo. (auto, length values [pt, in, cm, px]) position Posição. absolute – Posição relativa a tela. relative – Posição relativa ao seu local no html. static – Posição fixa na tela (independente do scroll do mouse). z-index Muda os elementos de camada. (auto, integer [higher numbers on top])
  18. 18. Background background-color Muda a cor de fundo. background-image Define uma imagem de fundo. background-repeat Repetição da imagem de fundo. (repeat, no-repeat, repeat-x, repeat-y) background-attachment Define se o background rola c/ a página. (scroll, fixed) background-position Posição da imagem. (x y), top, center, bottom, left, right) Background Cor, imagem, repetição e posição. Ex: background: #fff url(imagem.jpg) no-repeat bottom right); .EstaDiv { background:blue url(peixe.jpg) no-repeat bottom right; }
  19. 19. Listas <ul><ul><li>Item 1 </li></ul></ul><ul><ul><li>Item 2 </li></ul></ul><ul><li>.listaInside { </li></ul><ul><li>list-style: square; </li></ul><ul><li>} </li></ul><ul><li>Item 1 </li></ul><ul><li>Item 2 </li></ul><ul><li>.listaOutside { </li></ul><ul><li>list-style: circle outside; </li></ul><ul><li>} </li></ul>list-style-type Muda o tipo de bullet dos itens de lista (li). (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none) list-style-position Muda a posição do bullet. (inside, outside) list-style-style Define uma imagem como bullet. list-style Type, position e style. Ex: list-style: square inside url(‘setinha.jpg')
  20. 20. Seletores * Define propriedade para TODOS os elementos. <tag> Define para todas as tags especificadas. tag * TUDO dentro da tag receberá as características. tag > tag Seleciona elemento que é filho direto de outro. .nome Todos elementos com a classe determinada. #nome Todos elementos com a identificação determinada. tag#nome , tag.nome Especifica elemento com classe ou identificação determinada.
  21. 21. Referências Duvidas? www.w3schools.com http://en.wikipedia.org/wiki/HTML_DOM http://www.w3schools.com/Css/css_reference.asp Tableless.com.br – Referência rápida de CSS (Em anexo) Helton Marinho Site www.ninsas.com Blog xhelton.wordpress.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×