2

Estou com problemas no meu html, a página não reconhece os caracteres especiais.

  <!DOCTYPE html>
    <html >
    <head>
    <title>Verde</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/app.css" rel="stylesheet" type="text/css"/>

    <script src="js/jquery/jquery-1.12.3.min.js"></script>
    <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
    <script src="js/funcoes/mrsJsonUtil.js" type="text/javascript"></script>
    <script src="js/funcoes/dbtable.js" type="text/javascript"></script>
    <script src="js/funcoes/funcoes.js" type="text/javascript"></script>
    <script src="js/custom_dialogs/bootbox.min.js" type="text/javascript"></script>
    <script src="js/jsonservlet.js" type="text/javascript"></script>
    <script src="js/bd_web.js" type="text/javascript"></script>
    <script src="js/funcoes/monta_selects.js" type="text/javascript"></script>
    <script src="js/funcoes/mrsJsonUtil.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>

    <script src="images/webcam/jquery.webcam.js" type="text/javascript"></script>
    <!--Especifico de cada cadastro-->
    <script src="js/cadastro.js" type="text/javascript"></script>



</head>
<body> 
    <div id="divMenu"></div>
    <div class="container">        
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading">Cadastro de Agente

                        </div>
                    </div> 
                    <div class="panel-body">
                        <form id="formCadastro" role="form"> 
                            <div class="row">
                                <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
                                    <div id="divFoto"></div>
                                    <img id="imgFoto" style="width: 100%" class="img-responsive " src="images/semfoto.png" alt="semfoto"/>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="id">ID:</label>
                                    <input disabled="" type="number" class="form-control" id="inpId">
                                </div> 
                                <div class="form-group col-md-6">
                                    <label for="nome">Nome:</label>
                                    <input required="" maxlength="60" type="text" class="form-control" id="inpNome">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="status">Status de bateria:</label>
                                    <input required   type="text"  class="form-control" id="inpStatusBateria">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="inpTelefone">Telefone</label>
                                    <input required="" type="tel"  onkeypress="funcoes.mascara(this, '## ####-####')" maxlength="12" class="form-control" id="inpTelefone">
                                </div> 

                                <div class="form-group col-md-4">
                                    <label for="hInicio">Horario de inicio:</label>
                                    <input required="" type="datetime" class="form-control" id="inpHinicio">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="hFim">Horario do fim:</label>
                                    <input required="" type="datetime" class="form-control" id="inpHfim">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="inpIdGInformacao">ID Grupo Informação:</label>
                                    <select required="" class="form-control" id="inpIdGInformacao">
                                        <option value="1">info1</option>
                                        <option value="1">info2</option>
                                    </select>
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="latitude">Latitude:</label>
                                    <input disabled="" value="0"  type="text"   class="form-control" id="inpLatitude">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="longitude">Longitude:</label>
                                    <input disabled="" value="0" type="text"  class="form-control" id="inpLongitude">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="corMarker">Cor marker:</label>
                                    <input  type="color" class="form-control" id="inpCorMarker">
                                </div> 
                                <div class="form-group col-md-4">
                                    <label for="idExterno">ID Externo:</label>
                                    <input required type="text" class="form-control" id="inpIdExterno">
                                </div>  
                                <div class="form-group col-md-4">
                                    <label for="inpInicioRota">Início Rota</label>
                                    <input required="" type="text"  class="form-control" id="inpInicioRota">
                                </div> 

                                <div class="form-group col-md-8">
                                    <label class="checkbox-inline"><input id="inpSabado" type="checkbox" value="">Sabado</label>
                                    <label class="checkbox-inline"><input id="inpDomingo" type="checkbox" value="">Domingo</label>
                                    <label class="checkbox-inline"><input id="inpStatus" type="checkbox" value="">Status</label>
                                    <label class="checkbox-inline"><input id="inpConcentrador" type="checkbox" value="">Concentrador</label>
                                </div> 

                            </div> 

                            <div  class="pull-right">
                                <button type="submit" id="btnGravar" class="btn btn-success">Salvar</button>
                                <button type="reset" id="btnLimpar" class="btn btn-primary">Limpar</button>
                                <button type="button" id="btnExcluir" class="btn btn-danger">Excluir</button>
                            </div> 
                        </form>
                    </div>
                </div>
            </div>
            <div id="divRelacionamentos" class="col-md-4"> 

            </div>

            <div id="divModals"></div>
        </div>
    </div>

</body>

`

8
  • 1
    quais caracteres especiais você está tentando colocar? Commented 11/07/2016 às 20:18
  • @ LeonardoAssunção Nessa página apenas a palavra Informação e as que contém acento, porém nas outras páginas todas apresentam o mesmo problema. Commented 11/07/2016 às 20:21
  • Os documentos devem estar salvos como ANSI mas a esta usando UTF8, o que ocasiona caracteres como , leia esta resposta e veja a parte sobre sublimetext e notepad++: pt.stackoverflow.com/a/43205/3635
    – Syzoth
    Commented 11/07/2016 às 20:38
  • Estou usando o netBeans e outros projetos não tem o mesmo problema. inclusive verifiquei e estavam iguais a este que teve problemas. Commented 11/07/2016 às 20:47
  • 1
    @EduardoKrakhecke adicionei o exemplo de como configurar o Netbeans na resposta, mas precisar salvar novamente todos documentos html
    – Syzoth
    Commented 11/07/2016 às 21:01

3 Respostas 3

6

O problema não se resolverá tirando as meta-tags ou trocando acentos por entidades como &ccedil;, neste ultimo caso é apenas uma maneira de contornar, mas não de resolver.

O problema é como os arquivos foram salvos, provavelmente eles foram salvos como ANSI (ou iso-8859-1/windows-1252), pra resolver o problema use programas como SublimeText ou notepad++.

Os problemas comuns da codificação

É muito comum quando estamos trabalhando com acentos nos depararmos com caracteres estranhos como por exemplo:

  • Algo semelhante a é que representa o é, isto ocorre porque o caractere é unicode, mas a página está em iso-8859-1 (ou outro compatível).
  • E o sinal um exemplo de situação é quando você usa um acentos compatíveis com iso-8859-1 em uma página que esta tentando processar UTF-8 devido ao Content-Type: ...; charset=utf8.

Como corrigir

Você deve salvar todos documentos como utf-8 sem "BOM", você pode utilizar softwares como SublimeText ou notepad++ para converter os arquivos:

  • Usando notepad++:

    utf8 sem bom notepad++

  • Usando Sublime Text:

    utf8 sublime text

  • Netbeans vá Window > Preferences > General > Workspace > Text File Encoding:

    utf8 netbeans

    Fonte: https://stackoverflow.com/a/13452715/1518921

  • IntelliJ IDEA vá até File > Settings... (Ctrl+Alt+Shift+S em Windows) e no projeto selecionado faça as seguintes seleções pro enconding desejado (no caso o .prorperties eu coloco como utf8 também, mas é opcional):

    inteli

2
  • Estou usando o Intellij da Jetbrain... como corrigir isso? Commented 13/11/2017 às 15:08
  • @ThiagoCunha resposta atualizada
    – Syzoth
    Commented 13/11/2017 às 16:50
0

Amigo, tire as duas linhas:

meta charset="utf-8"

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

e teste novamente

4
  • o problema persiste mesmo removendo as linhas Commented 11/07/2016 às 20:28
  • Há um espaçamento incorreto na sua primeira tag html, retire-o
    – Castro JR
    Commented 11/07/2016 às 20:34
  • <!DOCTYPE html> <html > <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <title>Verdeé</title> </head> <body> <p>ééÀÁÁáéá</p> </body>
    – Castro JR
    Commented 11/07/2016 às 20:36
  • A idéia é boa, mas em vez de tirar seria bom trocar o utf-8 pra iso-8859-1 como teste.
    – Largato
    Commented 11/07/2016 às 20:52
0

Tente entities.

Exemplo:

Para escrever Canção, você escreveria Can&ccedil;&atilde;o onde

  • &ccedil; = ç
  • &atilde; = ã (o ponto e virgula faz parte do código)

Segue um link de uma tabela de exemplo

1
  • apesar de funcionar há muitas palavras a serem modificadas. Commented 11/07/2016 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .