SlideShare ist ein Scribd-Unternehmen logo
1 von 5
Elementos em Bloco 
(X)HTML 
Professor Jolvani 
Aula 14
Elementos em Bloco (X)HTML 
 Olá estudantes do xhtml, nesta aula vamos aprender sobre elementos em 
Bloco. 
 No início nos vimos uma aula de elementos inline... Primeiro criamos uma nova 
aula.... Aula08.html 
 Vimos os elementos <h> e <p> esses são os elementos em bloco inbox e vimos 
os elementos inline, como <b> <u>(depreciado), <i>, <del> <sup>, <sub> 
 Qual a diferença? Os elementos em bloco possuem quebra de linha, são sempre 
exibidos como se tivesse uma linha em branco antes e depois dele... O titulo 
<h> também faz isso, 
 Enquanto que os elementos em linha continua o texto sem quebras... 
 O <br> é um elemento em Bloco?
Elementos em Bloco (X)HTML 
 Não, pois só tem uma quebra de linha.... Elemento vazio. 
 Elementos em linha marcam pequenos trechos de seu conteúdo 
 Elementos em bloco marcam grandes partes de sua página... 
 Essa diferença é importante para definir o layout das suas pgs e o uso de CSS 
 No exemplo a tag <q> representa uma citação pequena e se estivermos 
fazendo uma citação maior... Usamos o bloco <blockquote> citação longa...
Elementos em Bloco (X)HTML 
 Outros Elemento... <pre> Manteve a formatação... 
 Elemento <address> 
 Temos o elemento <hr /> que gera uma quebra de linha 
 Teste ....
Próxima Aula: Links Introdução

Weitere ähnliche Inhalte

Andere mochten auch

Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semânticasamuelfructuoso
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenowaltermancheno66
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationDiaspark
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisLogan Web
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectReinaldo Ferraz
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesWillian Watanabe
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTMLTales Augusto
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidadeRenan Alfarth
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de ProgramaçãoJorge Brandão
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaReinaldo Ferraz
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...Claudio Diniz - Designer Gráfico
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios GovBR
 
Acessibilidade na web: como adaptar sites para deficientes online
Acessibilidade na web: como adaptar sites para deficientes onlineAcessibilidade na web: como adaptar sites para deficientes online
Acessibilidade na web: como adaptar sites para deficientes onlineAvantare Inteligência Interativa
 
Acessibilidade na Web: Boas práticas
Acessibilidade na Web: Boas práticasAcessibilidade na Web: Boas práticas
Acessibilidade na Web: Boas práticasGovBR
 

Andere mochten auch (20)

Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter mancheno
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions application
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queries
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidade
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Web semantica
Web semanticaWeb semantica
Web semantica
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
 
Acessibilidade na web: como adaptar sites para deficientes online
Acessibilidade na web: como adaptar sites para deficientes onlineAcessibilidade na web: como adaptar sites para deficientes online
Acessibilidade na web: como adaptar sites para deficientes online
 
Acessibilidade na Web: Boas práticas
Acessibilidade na Web: Boas práticasAcessibilidade na Web: Boas práticas
Acessibilidade na Web: Boas práticas
 

Mehr von Jolvani Morgan

Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com cssJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listasJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Jolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box modelJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaJolvani Morgan
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificaçãoJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5Jolvani Morgan
 

Mehr von Jolvani Morgan (20)

Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listas
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box model
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herança
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 

Elementos em Bloco XHTML

  • 1. Elementos em Bloco (X)HTML Professor Jolvani Aula 14
  • 2. Elementos em Bloco (X)HTML  Olá estudantes do xhtml, nesta aula vamos aprender sobre elementos em Bloco.  No início nos vimos uma aula de elementos inline... Primeiro criamos uma nova aula.... Aula08.html  Vimos os elementos <h> e <p> esses são os elementos em bloco inbox e vimos os elementos inline, como <b> <u>(depreciado), <i>, <del> <sup>, <sub>  Qual a diferença? Os elementos em bloco possuem quebra de linha, são sempre exibidos como se tivesse uma linha em branco antes e depois dele... O titulo <h> também faz isso,  Enquanto que os elementos em linha continua o texto sem quebras...  O <br> é um elemento em Bloco?
  • 3. Elementos em Bloco (X)HTML  Não, pois só tem uma quebra de linha.... Elemento vazio.  Elementos em linha marcam pequenos trechos de seu conteúdo  Elementos em bloco marcam grandes partes de sua página...  Essa diferença é importante para definir o layout das suas pgs e o uso de CSS  No exemplo a tag <q> representa uma citação pequena e se estivermos fazendo uma citação maior... Usamos o bloco <blockquote> citação longa...
  • 4. Elementos em Bloco (X)HTML  Outros Elemento... <pre> Manteve a formatação...  Elemento <address>  Temos o elemento <hr /> que gera uma quebra de linha  Teste ....
  • 5. Próxima Aula: Links Introdução