Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
14
respostas

Problema com acentuação. Por que não funcionou meta charset?

Bom dia galera, beleza?

Então, fiz todo o capítulo 2 e deixei pra resolver isso no final, passei 1h tentando resolver o problema de acentuação no meu codigo mas não consegui resolver. Fui verificar tambem em "Ferramentas do desenvolverdor" e percebi que em "ELEMENTS" a minha tag meta charset, link rel do icon e do stylesheet aparecem dentro tag tag body e nao head, porem meu codigo esta assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <<meta charset="UTF-8">
                <link rel="icon" href="favicon.png">
                <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <h1>Sobre mim</h1>

        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

        <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

        <h2>Como trabalho</h2>

        <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

        <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

        <h2>Experiência</h2>

        <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

        <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

        <h2>Comunidade</h2>

        <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
    </body>
</html>
14 respostas

Oi Ivan, identifiquei um erro no seu código. Olha só na linha do <meta ...>, você colocou duas vezes o símbolo de "<" para abrir a tag. Tente remover e volte me dizendo o resultado ;)

Nossa que besteira!!! Obrigado, fiquei muito tempo procurando algo mas nao encontrei erro!!

Porem.... Ainda esta com problema na acentuação!!! Onde deve ter ~, ´, e outros acentos, esta o "?" no lugar!!!

Você tem certeza de que seu browser está configurado para UTF-8? Em geral é o padrão, mas alguns vêm configurados para o encoding ISO-8859-15, o que pode estar te causando problemas.

Outra opção é, apesar de estar com a tag meta configurada, você está salvando seu arquivo com algum outro encoding. Experimente forçar o arquivo a salvar em UTF-8 e se nada mudar, re-rescrever os caracteres acentuados (já tive dificuldades que só consegui resolver assim).

Voce diz criar o mesmo arquivo só que com extensao UTF-8? Se for isso eu experimentei aqui e ainda nao deu certo! Reescrevi uns 3 acentos pra experimentar mas ainda não resolveu!!! Voce perguntou sobre estar configurado, acredito que sim! pois os outros arquivos que eu abro funciona normalmente =/

Eu retirei a tag meta e joguei em baixo da tag html pra testar, joguei acima do DOCTYPE, nada deu certo, continuou com problema, aí eu deletei a tag e a acentuação funcionou normalmente. Como pode ser possível?

Segue novo código que funcionou a acentuação:

<!DOCTYPE html>

<html>
    <head>
        <title>Biografia - João da Silva</title>
        <!-- com a tag <meta charset="UTF-8"> os caracteres estavam com problema de acentuação. Eu retirei o codigo meta e os caracteres voltaram a ter acentos -->
                <link rel="icon" href="favicon.png">
                <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <h1>Sobre mim</h1>

        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

        <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

        <h2>Como trabalho</h2>

        <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

        <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

        <h2>Experiência</h2>

        <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

        <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

        <h2>Comunidade</h2>

        <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
    </body>
</html>
solução!

@Ivan, são essas interrogações que surgem para você ao abrir a página?

Interrogações por problema de encoding

Que editor você está usando para escrever o código?

Não é a extensão que mais importa aqui e sim o modo como o arquivo é salvo. Se me disser que editor usa, posso te ajudar a descobrir como garantir que o arquivo está sendo salvo no modo UTF-8. Fiz um teste aqui alterando o arquivo e me parece que a chance de este ser o seu problema é bem alta.

Para modificar a configuração de encoding no Google Chrome, você pode clicar no ícone de menu e clicar em more tools ou clicar no menu view. Depois, selecione a opção encoding e escolha o que quer usar. O meu está com "Auto-detectar" e "Unicode" ambos marcados.

Exemplo de configuração de encoding

Espero mais informações e talvez sua satisfação em resolver o problema =)

PS.: O teste foi modificar o arquivo para ISO-8895-1 e alterar os acentos para se adequarem ao novo encoding. O meu browser abriu no encoding certo, e os acentos apareciam ok. Ao mudar o encoding do browser para UTF-8, com o arquivo em ISO, apareceram as interrogações.

Resolvido o problema, era isso mesmo! Não sabia dessa opção e nem entendo tão bem ainda. Não entendi por que resolveu mas resolveu! Pois até hoje nunca tive esse problema pois ja coloquei vários códigos e sempre respondeu conforme esperado...

OBRIGADO!!!

Me diga que editor de texto ou IDE usa que te ajudo a entender. ;)

Comecei usando o que foi sugerido no curso mas no caso aí que deu problema eu fiz no bloco de notas mesmo!

Bom eu sei que o tópico já está resolvido.... mas.... apenas pra acrescentar informações.... como você disse que fez no bloco de notas, o problema provavelmente foi esse: Por padrão o bloco de notas salva seu arquivo como "ANSI" e se o seu arquivo está salvo "ANSI" mas a metatag está "UTF-8" acontece isso mesmo.... O certo seria alterar a opção "codificação" para "UTF-8" antes de clicar em Salvar. Se você curte o bloco de notas, recomendo o "Notepad ++" super leve também, e mais prático de usar do que o Notepad simples.

Muito obrigado pela informação Tullio

Nao curto o bloco de notas nao kkk. Gostei de usar o Brackets ou o Sublime mas to no bloco de notas pq uma parte do dia eu estudo no trampo, ai nao quero instalar programas no pc de la, mas vou acabar instalando pq é beeeem melhor usar um deles :p

No próprio site do Sublime Text tem a versão portable, que roda de um pendrive e não precisa de instalação ;)

Ahh legal. Isso eu nao sabia! Vou testar!

Masss, instalei o Notepad++ aqui e to usando haha.

Muito obrigado pela atenção e pela explicação.