Problems with special characters Html5 bootstrap

Asked

Viewed 11,617 times

2

I’m having problems with my html, the page does not recognize the special characters. 

  <!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>

`

html character-encoding
  • 1

    what special characters you are trying to put on?

  • @ Leonardoasunción On this page only the word Information and those that contain accent, but on the other pages all present the same problem.

  • Documents must be saved as ANSI but this using UTF8, which causes characters like �, read this response and see the part about sublimetext and Notepad++: http://answall.com/a/43205/3635

  • I am using netbeans and other projects does not have the same problem. I even checked and were similar to the one that had problems.

  • @Eduardokrakhecke save text as UTF-8 and try again.

  • 1

    @Eduardokrakhecke added the example of how to set up the Netbeans IDE in the answer, but need to save all html documents again

  • I was using notepad and I read here about saving ANSI and really was in ANSI, then I replaced it with Utf-8, at the time that saves there is this option in the notepad Field encoding next to save. And it worked, the accents are displayed normally. Vlwww

  • Do not add "thank you" as an answer. When reputation points sufficient, you will be able vote in favour of questions and answers which it considers useful. - Of Revision

Show 3 more comments

3 answers

6


The problem will not be solved by removing the metatags or exchanging accents for entities like &ccedil;, in the latter case it is only a way to bypass, but not to solve.

The problem is how the files were saved, probably they were saved as ANSI (or iso-8859-1/windows-1252), to solve the problem use programs like Sublimetext or Notepad++.

Common problems of codification

It is very common when we are working with accents to come across strange characters such as:

  • Something similar to é representing the é, this is because the character is Unicode, but the page is in iso-8859-1 (or other compatible).
  • And the sign � an example of a situation is when you use an iso-8859-1 compliant accents on a page that is trying to process UTF-8 due to the Content-Type: ...; charset=utf8.

How to correct

You must save all documents as utf-8 without "GOOD", you can use software such as Sublimetext or Notepad++ to convert the files:

  • Using Notepad++:

    utf8 sem bom notepad++

  • Using Sublime Text:

    utf8 sublime text

  • Netbeans go Window > Preferences > General > Workspace > Text File Encoding:

    utf8 netbeans

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

  • Intellij IDEA go to File > Settings... (Ctrl+Alt+Shift+S in Windows) and in the selected project make the following selections pro enconding desired (in case the .prorperties I put as utf8 too, but it is optional):

    inteli

  • I’m using Jetbrain’s Intellij... to fix this?

  • @Thiagocunha updated response

0

Buddy, take the two lines:

meta charset="utf-8"

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

and test again

  • the problem persists even by removing the lines

  • There is an incorrect spacing in your first html tag, remove it

  • <!DOCTYPE html> <html > <meta name="viewport" content="width=device-width, initial-Scale=1"> <head> <title>Verdeé</title> </head> <body> <p>éAAAAE</p> </body>

  • The idea is good, but instead of taking it would be good to change the utf-8 to iso-8859-1 as a test.

0

Try entities.

Example:

To write Song, you would write Can&ccedil;&atilde;o where

  • &ccedil; = ç
  • &atilde; = ã (point and comma are part of the code)

Follows a link of an example table

  • although it works there are many words to be modified.

Browser other questions tagged html character-encoding

You are not signed in. Login or sign up in order to post.