O documento apresenta uma introdução sobre a estrutura HTML (DOM) e exemplos de como estruturar elementos em HTML, incluindo textos, listas, tabelas, formulários e outros. Também fornece uma introdução sobre a sintaxe e uso de CSS para formatação de páginas web, incluindo caixas de texto, fontes, modelos de caixa, bordas, posicionamento e backgrounds.

1. Manual HTML Estrutura do HTML (DOM) Exemplo de Estrutura

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.

4. Exemplos de código HTML Texto Listas Tabelas Formulários Outros

10. CSS Sintaxe Uso Geral Caixas de Texto Fontes Modelo de Caixa Bordas Posições Background Listas Seletores

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

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

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