A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Design para Web 8 DIV A tag DIV.

Apresentações semelhantes


Apresentação em tema: "Design para Web 8 DIV A tag DIV."— Transcrição da apresentação:

1 Design para Web Http://tertuliano.wetpaint.com

2 8 DIV A tag DIV

3 DIV - Elemento

4 DIV Elementos de Bloco Básicos de XHTML Nome do Elemento Marcadores de Abertura e Fechamento Comentário e Semântica Embutida Divisão Elemento projetado para ser utilizado com folhas de estilo. Normalmente só existe uma quebra de linha antes e depois do elemento, sem nenhum outro espaçamento vertical. O elemento define uma seção ou uma divisão no documento

5 Elementos de Bloco Básicos de XHTML Nome do Elemento Marcadores de Abertura e Fechamento Comentário e Semântica Embutida Parágrafo Este deve ser o elemento mais utilizado em um documento XHTML. A maior parte do texto de um documento está contida em parágrafos. A apresentação do parágrafo depende do navegador, mas normalmente existe o equivalente ao espaço de uma linha antes e depois do parágrafo. Divisão Elemento projetado para ser utilizado com folhas de estilo. Normalmente só existe uma quebra de linha antes e depois do elemento, sem nenhum outro espaçamento vertical. Títulos Elementos que introduzem os títulos do documento, existindo em seis níveis. O tamanho das fontes varia de 24 a 10 pontos, da mesma maneira que o espaçamento vertical antes e depois do elemento. Blockquote É um elemento projetado para apresentar citações dentro de um documento. Apresenta um espaçamento vertical de uma linha antes e depois do elemento assim como uma indentação à esquerda e à direita do texto. Preserve Normalmente os navegadores eliminam todo o espaçamento extra introduzido em um texto, deixando somente um espaço em branco entre palavras. Com este elemento pode-se preservar todo o espaçamento introduzido em um texto.

6 Código Fonte Output Isto é algum texto Aqui temos um cabeçalho de secção dentro de um elemento div Aqui temos um parágrafo dentro de um elemento div Isto é algum texto Aqui temos um cabeçalho de secção dentro de um elemento div Aqui temos um parágrafo dentro de um elemento div DIV - Exemplos

7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml" Common XHTML block elements I: p and div and blockquote This is a paragraph This is a div This is also a div. Note how there is no vertical whitespace between divs. This is a paragraph "This is a blockquote which has both built in style semantics as well descriptive semantics. It is designed for quotations, so we have put quotes around the text."

8 DIV - Exemplos Dicas e Notas Nota: O elemento é um elemento de bloco ("block level element",) por isso os browsers inserem uma quebra de linha antes e depois deste elemento. Dica: Use o elemento para agrupar outros elementos de bloco e formatá-los com estilos CSS.

9 DIV - Exemplos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml" Common XHTML block elements I: p and div and blockquote This is a paragraph This is a div This is also a div. Note how there is no vertical whitespace between divs. This is a paragraph "This is a blockquote which has both built in style semantics as well descriptive semantics. It is designed for quotations, so we have put quotes around the text."

10

11 Classes em CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml" First XHTML document This is an acronym in a division. This is a citation in a division. This is some code in a division. This is emphasized text in a division. This is a quotation in a division. This is a sample in a division. This is a span in a division. This is strong text in a division. This is a variable name in a division.

12


Carregar ppt "Design para Web 8 DIV A tag DIV."

Apresentações semelhantes


Anúncios Google