htmlcssutf-8meta

special characters turned into question mark after duplication of the same page

since last friday, I've duplicated my first page ,and a lot of time (about 40 of the same one), after checking one of the duplicated pages , I found out that the special characters ( é,è,ç,...) were replaced by question marks.

and so I've searched about what could make a issue like this, that is where people talked about :

    <meta charset="utf-8" />

I've looked more into that line of code that i've left alone from the whole time, It was automatically written when i started a new page and so i didn't think i would change it anytime but now it is the right time to ask about how it works.

i would like to know if

 <meta charset="utf-8" />

only work as for one page, and thus, I would like to know how can i change it to make it avaiable to all of my html pages.(note aside, only my primary page show the special characters and i am using The French language for my page, so if you need traduction you can ask mee in the comment.) 

@charset "UTF-8";
header {
  font-size: 1px;
  border: 7px ridge #1173AF;
}

header img {
  height: 340px;
  width: 1570px;
  overflow: hidden;
}

.menu {
  overflow: hidden;
  background-color: #3CA9DF;
  font-family: Arial, Serif, Sans-Serif;
}

.menu a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.accueil {
  float: left;
  overflow: hidden;
}

.accueil .accueilbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.accueil:hover .accueilbtn {
  background-color: #7FB8D5;
}

.accueil-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.accueil-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.accueil-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.accueil:hover .accueil-content {
  display: block;
}

.lycee {
  float: left;
  overflow: hidden;
}

.lycee .lyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.lycee:hover .lyceebtn {
  background-color: #7FB8D5;
}

.lycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.lycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.lycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.lycee:hover .lycee-content {
  display: block;
}

.formations {
  float: left;
  overflow: hidden;
}

.formations .formationsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.formations:hover .formationsbtn {
  background-color: #7FB8D5;
}

.formations-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.formations-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.formations-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.formations:hover .formations-content {
  display: block;
}

.visite {
  float: left;
  overflow: hidden;
}

.visite .visitebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.visite:hover .visitebtn {
  background-color: #7FB8D5;
}

.visite-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.visite-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.visite-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.visite:hover .visite-content {
  display: block;
}

.vielycee {
  float: left;
  overflow: hidden;
}

.vielycee .vielyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.vielycee:hover .vielyceebtn {
  background-color: #7FB8D5;
}

.vielycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.vielycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.vielycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.vielycee:hover .vielycee-content {
  display: block;
}

.tempsforts {
  float: left;
  overflow: hidden;
}

.tempsforts .tempsfortsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.tempsforts:hover .tempsfortsbtn {
  background-color: #7FB8D5;
}

.tempsforts-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.tempsforts-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.tempsforts-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.tempsforts:hover .tempsforts-content {
  display: block;
}

.anciens {
  float: left;
  overflow: hidden;
}

.anciens .anciensbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.anciens:hover .anciensbtn {
  background-color: #7FB8D5;
}

.anciens-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.anciens-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.anciens-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.anciens:hover .anciens-content {
  display: block;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="lyceecss.css" />
  <title>Bienvenue dans le site du Lycée Sainte-Marie</title>
</head>

<body>
  <header>
    <img src="http://via.placeholder.com/500x150"></a>

  </header>
  <nav>
    <div class="menu">
      <div class="accueil">
        <button class="accueilbtn">accueil</button>
        <div class="accueil-content">
          <a href="../college/collegesaintemarie.html">le collège</a>
          <a href="#">le Centre de Formation</a>
        </div>
      </div>
      <div class="lycee">
        <button class="lyceebtn">Le Lycée</button>
        <div class="lycee-content">
          <a href="#">Le mot du chef d'établissement</a>
          <a href="#">Plan d'accès</a>
          <a href="#">Historique</a>
          <a href="#">Horaires secrétariat</a>
          <a href="#">Organigramme du personnel</a>
          <a href="#">Date des vancances scolaires</a>
          <a href="#">La taxe d'apprentissage</a>
        </div>
      </div>
      <div class="formations">
        <button class="formationsbtn">Formations</button>
        <div class="formations-content">
          <a href="#">3° PREPA PRO</a>
          <a href="#">CAP Employé(e) de commerce Multi-Spécialités</a>
          <a href="#">BAC Pro vente 3 ans</a>
          <a href="#">BAC Pro commerce 3 ans</a>
          <a href="#">BAC Pro Acceuil Relation Client Usager 3 ans</a>
          <a href="#">Bac Pro COMMUNICATION VISUELLE PLURI-MEDIA 3 ans</a>
          <a href="#">BAC Pro PHOTOGRAPHE 3 ans</a>
          <a href="#">Modalités d'inscription</a>
          <a href="#">Résultats</a>
          <a href="#">Stages</a>
        </div>
      </div>
      <div class="visite">
        <button class="visitebtn">La vie au Lycée</button>
        <div class="visite-content">
          <a href="#">Les lieux de rencontre</a>
          <a href="#">Les ateliers</a>
          <a href="#">Les laboratoires</a>
          <a href="#">Le CDI</a>
          <a href="#">Le gymnase</a>
          <a href="#">Le self</a>
          <a href="#">L'internat</a>
        </div>
      </div>
      <div class="vielycee">
        <button class="vielyceebtn">La vie au Lycée</button>
        <div class="vielycee-content">
          <a href="#">Les Journées Portes Ouvertes</a>
          <a href="#">Voyages</a>
          <a href="#">Les projets/Les expositions</a>
          <a href="#">Les Activités de classe</a>
        </div>
      </div>
      <div class="tempsforts">
        <button class="tempsfortsbtn">Les Temps Forts au Lycée</button>
        <div class="tempsforts-content">
          <a href="#">Le Forum de l'orientation</a>
          <a href="#">OFF 2017</a>
          <a href="#">Design Culinaire 2016</a>
          <a href="#">Les nuits du Design</a>
          <a href="#">La veillé de noël</a>
          <a href="#">Journée rencontre et connaissance</a>
          <a href="#">La Journée St Joseph</a>
          <a href="#">Formation des délégués</a>
          <a href="#">Les Workshops et les Projets</a>
          <a href="#">Soirée Partenaires Entreprises</a>
        </div>
      </div>
      <div class="anciens">
        <button class="anciensbtn">Les anciens élèvess</button>
        <div class="anciens-content">
          <a href="#">Que devenez-vous ?</a>
          <a href="#">Remise des diplômes</a>
          <a href="#">Les 20 ans du Bac Pro Vente</a>
        </div>
      </div>
      <a href="#">V.A.E.</a>
      <a href="#">On parle de nous...</a>
      <a href="#">Formulaire de contacts</a>
      <a href="../college/collegesaintemarie.html">Le collège</a>
      <a href="#">Centre & Formation</a>
    </div>
</body>

</html>

<!-- end snippet -

<!-- begin snippet: js hide: false console: true babel: false -->
here you can see a duplicated image, the special characters are question mark and my border is missing duplicated page

Solution

  • Its important to know if the characters are really converted to ?? even inside the HTML files, or just when you browse them by a browser.

    If inside the html page characters are saved correctly and you see them as question mark in browser In most cases by adding <meta charset="utf-8"> (best in <head> element) to the page will fix the issue.

    But in other hand sometimes when you copy and paste , or duplicate an HTML to another HTML file, due your environment situation, the encode of the new HTML file might not be Unicode or UTF-8 therefore it internally convert all special characters to question marks. Ofc when you browse this new HTML page you will see the question marks because they are actually converted to question marks at the time of file creation ( or save ). change encoding the HTML file

    In this case its better to first change the file encoding and then paste the content again and save it. Hope it helps