Unb 2012.1 - dweb - d - comportamento dos elementos

1 Tuesday, 10 de April de 12

Curso Superior de Tecnologia em Design Gráfico

Apêndice D - Comportamento dos elementos

“E o Verbo se fez carne, e habitou entre nós, e vimos a sua glória, como a glória do unigênito do Pai, cheio de graça e de verdade.” João 1:14

D Comportamento dos elementos

DWEB - Design para Web

DWEB - Design para Web / Carlos José

2 Tuesday, 10 de April de 12 Apêndice D - Comportamento dos elementos

Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar os aspectos semânticos, das tag’s do HTML/XHTML em relação ao seu comportamento.



Agenda

n Elementos de bloco n Elementos de linha



Comportamento do Elementos HTML/XHTML

n  Elementos de bloco î  Os browsers tratam os elementos de bloco como se estivessem em

pequenas caixas retangulares, empilhadas na página. î  Cada elemento de bloco começa em uma nova linha, e

normalmente possuem algum espaço acima e abaixo de todo o elemento.

Descrição Tag’s Títulos h1, h2, h3, h4, h5, h6 Parágrafos p Citações longas blockquote Texto pré-‐formatado pre Diversos elementos de lista ol, ul, li, dl, dt, dd Endereço de contato address Linha horizontal hr Tabela table, tbody, thead, Moot, tr, td, th Divisão em um elemento de bloco genérico div




n  Elementos de linha î  São aqueles que ocupam somente sua largura necessária e não

possuem algum espaço acima e abaixo de todo o elemento.

Descrição Tag’s Abreviação abbr Sigla acronym Citação; uma referência a outro documento, como o Stulo de um livro

cite

Amostra de código de programa code Texto enfaUzado em Citação curta q Texto fortemente enfaUzado strong Elemento de linha genérico span




n  Observações î Primeiro:

n  Saber diferenciar elementos de bloco de linha é fundamental na marcação de documentos HTML/XHTML.

n  A importância se deve pelo fato da restrição de uso de um elemento de bloco dentro de um elemento de linha.

n  Exemplo: î  Nunca se deve colocar a tag <p> entre a tag <a></a>, ou seja,

pôr um parágrafo dentro de um link.

î Segundo: n  Elementos de bloco e de linha se comportam de forma

diferente quando recebem uma regra de formatação por meio da CSS.




n  Observações î Terceiro:

n  O elemento <div> é usado para identificar uma divisão de bloco dentro do documento HTML/XHTML.

n  Esta divisão será usada como um contêiner envolto de um agrupamento lógico de elementos no documento.

î  Sempre use a propriedade id para identificar de forma descritiva a <div> que contém os elementos relacionados gerando assim um contexto e uma estruturação.

î Quarto: n  O elemento <span> oferece as mesmas vantagens que o

elemento <div>, exceto que ele é usado normalmente para elementos de linha.

n  Como o elemento <span> é um elemento de linha, ele só pode conter texto e outros elementos de linha.



Perguntas

?



Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil, julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição; http://www.htmldog.com/; http://www.w3schools.com

Considerações Finais

Unb 2012.1 - dweb - d - comportamento dos elementos

Documents

Transcript of Unb 2012.1 - dweb - d - comportamento dos elementos