SlideShare uma empresa Scribd logo
1 de 10
Caracteres especiais & 
Encoding 
(X)HTML 
Professor Jolvani 
Aulas 27
Caracteres Especiais & Encoding - (X)HTML 
 Olá estamos quase terminando nossas aulas xHtml. 
 Hoje veremos caracteres especiais 
 Abrimos a aula 19. Aula19.html 
 Verifica que usamos acentos, “^”, “~”, “ç”... 
 No nosso editor usamos um tipo de codificação... 
 Em conjunto de caracteres temos vários deles... 
 Na internet usa-se o padrão UTF-8, vc pode usar 
outro... 
 Se trocarmos em nosso editor, veja o que acontece.
Caracteres Especiais & Encoding - (X)HTML 
 Altere a codificação em seu editor para Ansi (figura anterior) e 
arrume a palavra com a codificação ilegível, salve e execute no 
browser... 
 Se usarmos um editor de texto como o dreamweaver por exemplo 
observamos que ele gera algumas tags automaticamente inclusive 
o padrão utf-8
Caracteres Especiais & Encoding - (X)HTML 
 Dreamweaver - Padrão UTF-8 
 Vou usar o topStyle para isso... 
 Criamos nossa Aula20.html 
 No top style não é adicionado a meta tag charset=utf-8, mas quando vc 
salva o arquivo ele é automaticamente selecionado... E é necessário 
adicioná-la... 
 Porém nos temos a opção de mudar a codificação, 
 No topStyle fica em ....
Caracteres Especiais & Encoding - (X)HTML 
 TopStyle – Options – Options f8 – editor - Encoding 
 De qualquer maneira use a tag 
 <meta charset=“UTF-8”. 
 Dependendo do encoding que utilizamos 
vamos ter um tipo de visualização.... 
 No dreamwaver por exemplo se trocarmos o padrão de encoding 
podemos receber um resultado totalmente diferente.
Caracteres Especiais & Encoding - (X)HTML 
 No dreamwaver por exemplo se trocarmos o padrão de encoding 
podemos receber um resultado totalmente diferente. (à). 
 á = &aacute; modificou o caractere com acento no editor para 
que ele fique acessível na web.
Caracteres Especiais & Encoding - (X)HTML 
 Sem usar a teg meta podemos colocar em caracteres no editor.... 
 Vc não vai usar essa codificação então coloque a tag....
Caracteres Especiais & Encoding - (X)HTML 
 Toda essa codificação serve para colocarmos caracteres especiais 
e podemos encontra-los no site da W3C.... 
 Xhtml 
 Lista de símbolos 
 Veremos duas formas de representar 
os símbolos (pelo numero ou nome) 
 Represente o símbolo de soma e 
 Marca registrada....
Caracteres Especiais & Encoding - (X)HTML 
 Resultado final
Próxima Aula: W3C, Versões, HTML5

Mais conteúdo relacionado

Semelhante a Caracteres Especiais & Encoding em HTML

Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfElsioDeMelo
 
Live Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android StudioLive Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android StudioVinícius Thiengo
 
Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Gustavo Teodoro
 
Aula 01 introdução (x)html
Aula 01 introdução (x)htmlAula 01 introdução (x)html
Aula 01 introdução (x)htmlJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e cssmario_venancio
 
Programacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshareProgramacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshareMarcio Junior Vieira
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicMarcio Junior Vieira
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicAmbiente Livre
 
Portifolio net
Portifolio netPortifolio net
Portifolio netlaerciopds
 
Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#Leonardo Melo Santos
 

Semelhante a Caracteres Especiais & Encoding em HTML (19)

Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 06
Aula 06Aula 06
Aula 06
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdf
 
Html capitulo 07
Html   capitulo 07Html   capitulo 07
Html capitulo 07
 
Live Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android StudioLive Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android Studio
 
Aula 04
Aula 04Aula 04
Aula 04
 
Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)
 
Aula 01 introdução (x)html
Aula 01 introdução (x)htmlAula 01 introdução (x)html
Aula 01 introdução (x)html
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Xhtml
XhtmlXhtml
Xhtml
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Programacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshareProgramacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshare
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
 
HTML5: Primeiros Contatos (visão geral)
HTML5: Primeiros Contatos (visão geral)HTML5: Primeiros Contatos (visão geral)
HTML5: Primeiros Contatos (visão geral)
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#
 

Mais de 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 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani 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 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 

Mais de 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 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
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 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 

Caracteres Especiais & Encoding em HTML

  • 1. Caracteres especiais & Encoding (X)HTML Professor Jolvani Aulas 27
  • 2. Caracteres Especiais & Encoding - (X)HTML  Olá estamos quase terminando nossas aulas xHtml.  Hoje veremos caracteres especiais  Abrimos a aula 19. Aula19.html  Verifica que usamos acentos, “^”, “~”, “ç”...  No nosso editor usamos um tipo de codificação...  Em conjunto de caracteres temos vários deles...  Na internet usa-se o padrão UTF-8, vc pode usar outro...  Se trocarmos em nosso editor, veja o que acontece.
  • 3. Caracteres Especiais & Encoding - (X)HTML  Altere a codificação em seu editor para Ansi (figura anterior) e arrume a palavra com a codificação ilegível, salve e execute no browser...  Se usarmos um editor de texto como o dreamweaver por exemplo observamos que ele gera algumas tags automaticamente inclusive o padrão utf-8
  • 4. Caracteres Especiais & Encoding - (X)HTML  Dreamweaver - Padrão UTF-8  Vou usar o topStyle para isso...  Criamos nossa Aula20.html  No top style não é adicionado a meta tag charset=utf-8, mas quando vc salva o arquivo ele é automaticamente selecionado... E é necessário adicioná-la...  Porém nos temos a opção de mudar a codificação,  No topStyle fica em ....
  • 5. Caracteres Especiais & Encoding - (X)HTML  TopStyle – Options – Options f8 – editor - Encoding  De qualquer maneira use a tag  <meta charset=“UTF-8”.  Dependendo do encoding que utilizamos vamos ter um tipo de visualização....  No dreamwaver por exemplo se trocarmos o padrão de encoding podemos receber um resultado totalmente diferente.
  • 6. Caracteres Especiais & Encoding - (X)HTML  No dreamwaver por exemplo se trocarmos o padrão de encoding podemos receber um resultado totalmente diferente. (à).  á = &aacute; modificou o caractere com acento no editor para que ele fique acessível na web.
  • 7. Caracteres Especiais & Encoding - (X)HTML  Sem usar a teg meta podemos colocar em caracteres no editor....  Vc não vai usar essa codificação então coloque a tag....
  • 8. Caracteres Especiais & Encoding - (X)HTML  Toda essa codificação serve para colocarmos caracteres especiais e podemos encontra-los no site da W3C....  Xhtml  Lista de símbolos  Veremos duas formas de representar os símbolos (pelo numero ou nome)  Represente o símbolo de soma e  Marca registrada....
  • 9. Caracteres Especiais & Encoding - (X)HTML  Resultado final
  • 10. Próxima Aula: W3C, Versões, HTML5