Charset Meta Tag - Caracteres Especiais Em HTML - Como Escrever ...

Maybe your like

Sumário do Curso

Índice
Introdução
Conceitos Básicos
Textos
Imagens
Tabelas
Frames
CSS
Formulários
HTML 5
JavaScript
PHP
SEO
Monetização
Vídeo Aulas
# IMPORTANTE #
Contato
Sobre

Gostou do nosso conteúdo? Te ajudou? Nos ajude também! Faça um PIX, de qualquer valor: [email protected]

charset meta tag - Caracteres especiais em HTML - Como escrever com acento agudo, til, circunflexo, outros símbolos e acentuação Curso de HTML online grátis

Tente escrever um site simples em HTML, que mostra os seguintes textos na tela: "HTML Progressivo é uma apostila online." "Os cursos da rede Progressivo são muito bons." "Estou estudando com eficiência." Verá algumas coisas estranhas, uns símbolos estranhos e sem sentido. Neste artigo de nossa apostila online e gratuita de HTML iremos explicar o motivo de isso ocorrer e como escrever certo em HTML, além de aprendermos a usar outra meta tag, a charset.

Baixar PDF: Apostila HTML + CSS Progressivo

Acentuação errada em HTML

Que entrar no Mercado de Trabalho como Webmaster? Clique aqui e obtenha seu certificado! Teste o que pedimos no início desta aula de nosso curso de HTML, crie um simples código HTML que exiba aquelas frases. É importante que você sempre faça os exemplos de nosso curso, nunca e em hipótese alguma fique copiando e colando nossos códigos, do contrário nunca aprenderá. Certamente o ideal é tentar sempre escrever todo o código HTML, na mão, para se tornar um excelente profissional de HTML e webmaster. Mas vamos ao código: <!DOCTYPE html> <html> <head> <title> Acentos ortográficos em HTML </title> <metaname="description"content="Resultado de caracteres com acentos ortográfico em um site HTML"> </head> <body> "HTML Progressivo é uma apostila online." "Os cursos da rede Progressivo são muito bons." "Estou estudando com eficiência." </body> </html> Você verá que o resultado é bem inesperado, e aparentemente deu errado, como se tivéssemos cometido algum erro em nossa codificação, veja o que sai: "HTML Progressivo Ã© uma apostila online." "Os cursos da rede Progressivo sÃ£o muito bons." "Estou estudando com eficiÃªncia." Em vez de 'é' aparece Ã© Em vez e 'são' aparece sÃ£o Em vez de 'eficiência' apareceu eficiÃªncia Bizarro não? Mas calma, pois em HTML (e no mundo da computação e programação, de um modo geral), tudo tem um sentido e motivo. E geralmente são razões bem sensatas. Antes de finalizar estação sobre como escrever textos em sites HTML, iremos explicar o motivo de tudo isso, bem como escrever acentos e outros símbolos de maneira correta quando for criar seu site.

Caracteres e Símbolos especiais em HTML

Você sabia na língua inglesa, usada nos Estados Unidos, por exemplo, não se usa acento agudo, til (~), circunflexo (^), crase(`), cedilha (ç) e outros caracteres bem comuns na língua portuguesa? E aquelas lestras japonesas ? Os símbolos usados na língua chinesa? Árabe? Enfim, existem muitas e muitas linguagens, e consequentemente muitos tipos de caracteres diferentes, e isso cria um certo tipo de 'problemas' no mundo da computação. Por exemplo, quando as linguagens de programação começaram a ser desenvolvidas em inglês, obviamente eles se preocuparam somente com a língua inglesa. Mas e quando foi necessário escrever em português? E os japoneses, precisariam aprender sempre inglês para poder escrever e programar ? Essas coisas foram resolvidas aos poucos, e hoje em dia temos os navegadores tem suporte a um vasto número de caracteres, das mais diferentes línguas, e essa foi uma característica bem marcante do HTML: ir se adaptando ao que o mundo pedia. E o que acontece com os exemplos que citamos é bem simples de entender: o HTML não vai, por padrão, entender todo e qualquer caractere, dos milhões possíveis, que o usuário vai digitar. E não é só com o HTML, as linguagens de programação, de uma maneira geral, também não vão entender os vários símbolos existentes nos infinitos cantos do mundo. Mas, obviamente, isso tem uma solução. Senão você não estaria lendo este tutorial de nossa apostila, repleto de acentos ortográficos. No outro site de nosso rede de cursos, o Eletrônica Progressiva, usamos bastante símbolos matemáticos, como de integral, por exemplo. Ou seja, é possível exibir esses vários tipos de acentuação e símbolos em nossos sites HTML e é o que vamos ensinar agora. Há, basicamente, duas maneiras: usando códigos especiais para cada tipo de símbolo ou usando a meta tag charset.

Códigos especiais de acentos e símbolos

A primeira maneira na qual é possível usar esses símbolos e acentos na criação de nossos sites em HTML é através de códigos especiais. Como você já está criando e codificando em HTML, certamente não teme mais os códigos. E se teme, trate-se de se acostumar, afinal você já é um webmaster :) Mas vamos aos códigos. Mas antes, vamos ter algumas aulas de inglês, mas relaxe, são coisas bem simples e você vai ver como saber inglês nos ajuda a entender mais facilmente as coisas em HTML, aliás, não só em HTML, mas saber inglês é muito importante para se estudar programação e computação. http://www.programacaoprogressiva.net/2012/07/melhor-e-mais-importante-linguagem-de.html A palavra agudo, de acento agudo, em inglês é 'acute'. Já o til (~), em inglês é 'tilde'. O trema, esses dois pontinhos em cima da letra (ü), é 'umlaut'. E circunflexo (^) é 'circumflex'. Pronto, isso vai nos ajudar com os códigos. Para colocar o acento agudo na letra 'e', fazemos: é Para colocar o acento til na letra 'a', fazemos: ã E para colocar o acento circunflexo no'e' fazemos: ê Ou seja, no lugar do caractere que queremos colocar a acentuação, substituímos pelo código. Por exemplo, a palavra "são" se torna "são" Já a palavra "eficiência" se torna "eficiência" Veja agora como seria nosso código de maneira correta, mostrando os caracteres de acentuação de maneira perfeita e correta: <!DOCTYPE html> <html> <head> <title> Acentos ortográficos em HTML </title> <metaname="description"content="Símbolos de acentos em HTML"> </head> <body> "HTML Progressivo é uma apostila online." "Os cursos da rede Progressivo são muito bons." "Estou estudando com eficiência." </body> </html> Ao final deste tutorial de nosso curso de HTML iremos mostrar uma tabela com dezenas de códigos para os mais diversos tipos de símbolos e acentuação. Ok, assumimos, não é nada legal sair decorando códigos por aí, ainda mais existindo tanto. Mas usando o inglês, já aprendemos automaticamente vários. Mas não precisa se preocupar, se você usar um editor de HTML, basta escrever normalmente e ele automaticamente vai inserindo os códigos nos locais corretos. Para escrever neste blog, por exemplo, eu escrevo sem preocupações, pois na hora que publico o artigo o Blogger automaticamente substituir os símbolos pelos seus respectivos códigos especiais. Mas esta aula foi mais para seu conhecimento, para você saber como as coisas funcionam e se tornar um webmaster muito competente. Na próxima seção iremos mostrar como não se preocupar com esses códigos, usando a meta tag charset, que vai dizer ao seu navegador como ela deve interpretar esses símbolos diferentes.

charset <meta> tag: O que é, para que serve e como usar

Através do uso da meta tag charset, vamos poder dizer ao navegador do usuário que tipo de codificação de caracteres que deve ser usado. Assim, você escreve normalmente em seu site HTML, e se o navegador vai exibir os símbolos e acentuação correta, vai depender do navegador do usuário. É como se seu site conversasse com o navegador do usuário: "Hey HTML, como devo interpretar esses caracteres especiais? Ah ok, vi sua meta tag charset, meu usuário é do Brasil e está lendo em português, então agora sei que devo exibir os acentos agudos, til, circunflexo etc". O tipo de codificação que vamos usar é Unicode, o utf-8, que é um padrão muito usado, muito bom e funcional. Para saber mais sobre o utf e codificação Unicode, veja o excelente artigo da Wikipedia: http://pt.wikipedia.org/wiki/UTF-8 E para usar ela, faremos uso do atributo http-equiv, que já usamos aqui em nosso curso de HTML quando ensinamos como recarregar e redirecionar páginas em HTML. A sintaxe para definir o utf-8, usando a <meta> tag é: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> É esse modelo que iremos usar durante nossa apostila de HTML, porém não é a única maneira de se fazer isso. Você pode usar diretamente da seguinte maneira, sintaxe do HTML 5: <meta charset="utf-8"> Como estamos focando no HTML padrão, antes de partir e ensinar coisas sobre o HTML 5, iremos usar a primeira opção durante boa parte de nossos tutoriais. E como estamos careca de saber, por ser uma meta tag, esse código vai no <header> de nosso site HTML. Colocando isso, não precisamos mais nos preocupar com os códigos especiais dos símbolos. Veja como fica nosso código de HTML para o que propomos no início: <!DOCTYPE html> <html> <head> <title> Usando charset utf-8 em HTML </title> <metaname="description"content="Como usar charset na <meta> tag"> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> </head> <body> "HTML Progressivo é uma apostila online." "Os cursos da rede Progressivo são muito bons." "Estou estudando com eficiência." </body> </html> Teste e veja como o resultado é perfeito e exatamente do jeito que esperávamos que fosse. Teste e use a maneira HTML 5. A partir de agora, usaremos sempre a meta tag com charset utf-8 nos códigos de nosso curso.

Tabela de códigos especiais e mais fontes de estudo

A seguir, vamos deixar uma série de links onde você poderá consultar tabelas de códigos especiais, de símbolos e acentos ortográficos: http://www.itmnetworks.com.br/suporte/acentuacao_e_caracteres_especiais.php http://wiki.locaweb.com.br/pt-br/C%C3%B3digos_HTML_para_caracteres_acentuados http://www.dm.ufscar.br/~waldeck/curso/html/apend/tabcod.html http://www.ime.usp.br/~glauber/html/acentos.htm Para estudar e se informar sobre o que vimos nessa aula, indicamos os seguintes links: http://en.wikipedia.org/wiki/Character_encodings_in_HTML http://www.w3schools.com/tags/att_meta_charset.asp http://pt.wikipedia.org/wiki/UTF-8 Tutorial sobre: Acentuação ortográfica, charset, Formatação de Texto, Meta tags, Símbolos, Textos

7 comentários:

Orion disse...

Meu texto aparecia normalmente na tela, mas quando adicionei a meta tag para definir o padrão utf-8 todas as letras acentuadas foram substituídas por pontos de interrogação.Uso o Google Chrome.Acho que não é mais necessário inserir esta configuração para os navegadores atuais.

22 de dezembro de 2013 às 13:26

Anônimo disse...

No meu aconteceu o mesmo, Orion.

20 de janeiro de 2014 às 13:37

Unknown disse...

Sempre esqueço esse código, obrigado!

14 de fevereiro de 2014 às 17:15

Anônimo disse...

O meu ficou normal

30 de setembro de 2015 às 07:43

Adriano Santos disse...

Depende do tipo do navegador, pois existe empresas e pessoas que usam navegadores antigos, que não aceita charset=utf-8. Aí tenho que usar o código "meta http-equiv="Content-Type" content="text/html; charset=utf-8". Eu acredito que seja a versão antiga do navegadores.

17 de fevereiro de 2016 às 06:31

Adriano Santos disse...

Geralmente quando se usa navegadores antigos, tem que usar a tag meta http-equiv="Content-Type" content="text/html; charset=utf-8". Lá na empresa onde eu trabalho, os navegadores não aceita a tag meta charset="utf-8".

17 de fevereiro de 2016 às 06:37

kadu disse...

Fiz um mailer no php e estou tendo problema de acentuação usei no mailer sitaxe do html antigo e o charset 8 não esta corrigindo o erro e/ou não é o que vai fazer funcionar.

22 de junho de 2018 às 10:10

Postar um comentário

Tutoriais de HTML e CSS

Mandar um café

Pode me ajudar a transformar cafeína em código?

Apostila em PDF

Livro impresso

Obter livro impresso

Obter Certificado

Como se tornar Webmaster

Melhores Tutoriais

A tag e seus atributos - Como alterar a fonte, tamanho e cor de textos em um site HTML Neste tutorial de nosso Curso de HTML , vamos aprender a usar a tag , que serve para definir várias características das fontes q...
Como alinhar imagens e textos com o atributo align Nas últimas aulas de nosso curso de HTML , aprendemos sobre como inserir imagens em um site com a tag img e como definir altura e largura ...
Como criar um Formulário completo em HTML Ok, se leu e estudou todos os tutoriais sobre formulários em HTML de nosso curso, já deve estar mestre nas artes de criar forms para seus ...
e - Quebra de linha e Parágrafos em HTML Bom, agora que você já passou pela seção básica de HTML , já tem conhecimentos suficientes para entender como funciona a grande maioria dos ...
Como criar tabelas < table >, linhas < tr > e colunas < td > em HTML Agora que já sabemos o que são tabelas e suas utilidades em HTML , vamos, de fato, colocar a mão na massa e começar a criar sites com tabela...
< img > tag - Inserindo uma imagem em um site - O atributo src Agora que aprendemos o que é uma imagem e conhecemos seus tipos mais usados, vamos de fato aprender como colocar imagens em um site, usando ...
Como mudar a altura e largura de uma imagem - Os atributos height e width da tag < img > No tutorial passado de nosso curso de HTML , mostramos como colocar fotos e imagens em um site através da tag img e começamos a ver como no...
, e - Como escrever em itálico, negrito e sublinhado em HTML Agora que já aprendemos como colocar trechos de texto dentro de um mesmo parágrafo, bem como produzir quebras de linha à qualquer momento em...
Negrito em CSS - A propriedade font-weight (bold, bolder, lighter, normal e 100-900) Neste Tutorial de CSS de nossa apostila, vamos falar sobre mais um assunto que se refere as fontes e formatação de textos, que é aparenteme...
Como criar botões em HTML, de Reset (limpar) e Submit (enviar) em Formulários Neste artigo vamos aprender como criar e usar um dos elementos mais importantes em formulários de HTML, os botões. Veremos como criar botõ...

Política de Privacidade