Cómo solucionar el problema de los caracteres especiales que el HTML de la página o sitio (front-end) web, como estándar desde html está preparado para colocar todos los símbolos y tildes que necesitemos, en base a las siguientes codificaciones:
Códificación HTML para las tildes y eñes:
- á -> á
- é -> é
- í -> í
- ó -> ó
- ú -> ú
- ñ -> ñ
- à -> à
- è -> è
- ò -> ò
Con la lista de codificación se logra visualizar todos los caracteres especiales correctamente, sin embargo, HTML 5 nos facilita la etiqueta <meta charset="UTF-8"> que es impriscindible para definir la codificación que tendrá la página o sitio web, es decir, si definimos el valor de utf-8 se mostrarán símbolos como la "ñ", "ç" o los acentos correctamente.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html lang="es"> <head> <title>UTF 8</title> <meta charset="UTF-8"> <meta name="title" content="Utf Tips"> <meta name="description" content="Admitir caracteres especiales en PHP"> </head> <body> <header> <h1>Admitir caracteres especiales en PHP</h1> </header> <nav> <a href="http://blog.hadsonpar.com">Tutoriales HadsonPar</a> </nav> <section> <div class="container"> <div class="title-home"> <div class="text-center p-5"> <h2>Learning Bootstrap</h2> <p>Lo que aprenderas en el curso</p> </div> </div> <div class="col-12"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> <h3>Elaboramos la primera versión de la base de datos del CMS</h3> <p>Desarrollo de una base de datos para la configuración y administración de un sistema de gestión de contenidos o también conocido por las siglas en inglés como CMS (content management system).</p> <span>6 Horas</span> <span>1 Certificado de finalización</span> <div class="text-button"> <a href="#">Suscríbete al curso</a> </div> </div> </div> </div> </div> </section> <aside> <h3>Testimonios</h3> <p>Me gusta mucho esta página.</p> </aside> <footer> <h4>Redes sociales</h4> <a href="https://www.facebook.com/hadsonpar">Facebook</a> <a href="https://github.com/Hadsonpar">GitHub</a> <a href="https://twitter.com/hadson_paredes">Tiwtter</a> </footer> </body> </html> |
 |
| HTML con <meta charset="UTF-8"> |
Admitir caracteres especiales en PHP
Ahora bien, que pasa si las información a mostrar en el frontend (desde HTML) son datos que se obtienen desde la base de datos como MariaDB o MySQL, es normal aplicar ciertas configuración en la base de datos para soportar caractaeres especiales al momento de realizar las consultas y devolver los datos a las etiquetas del HTML, sin embargo, que pasa en el caso que no se exista las configuraciones necesarias, una de las maneras más sencillas es declarar header('Content-Type: text/html; charset=ISO-8859-1') en la página a mostrar.
 |
| Texto capturado desde la base de datos sin header('Content-Type: text/html; charset=ISO-8859-1') |
Adicionar el código charset=ISO-8859-1' en la página HTML para capturar los caracteres especiales desde la base de datos:
<?php header('Content-Type: text/html; charset=ISO-8859-1'); ?>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!-- Adicionar la pagina php que contiene la conexión a la base de datos --> <?php require 'dbconfig.php'; ?> <?php header('Content-Type: text/html; charset=ISO-8859-1'); ?> <!DOCTYPE html> <html lang="es"> <head> <title>ISO-8859-1</title> <meta charset="UTF-8"> <meta name="title" content="Utf Tips"> <meta name="description" content="Admitir caracteres especiales en PHP"> </head> <body> <header> <h1>Admitir caracteres especiales en PHP</h1> </header> <nav> <a href="http://blog.hadsonpar.com">Tutoriales HadsonPar</a> </nav> <section> <div class="container"> <div class="title-home"> <div class="text-center p-5"> <h2>Learning Bootstrap</h2> <p>Lo que aprenderas en el curso</p> </div> </div> <div class="col-12"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> <?php $sql = mysqli_query($con, "SELECT websection_title, websection_subtitle, websection_text_one, websection_text_two, websection_button_url, websection_button_text FROM websection WHERE websection_id = 16"); if(mysqli_num_rows($sql) != 0){ $row = mysqli_fetch_assoc($sql); echo ' <h3>'.$row['websection_title'].'</h3> <p>'.$row['websection_subtitle'].'</p> <span>'.$row['websection_text_one'].'</span> <span>'.$row['websection_text_two'].'</span> <div class="text-button"> <a href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a> </div> '; } ?> </div> </div> </div> </div> </section> <aside> <h3>Testimonios</h3> <p>Me gusta mucho esta página.</p> </aside> <footer> <h4>Redes sociales</h4> <a href="https://www.facebook.com/hadsonpar">Facebook</a> <a href="https://github.com/Hadsonpar">GitHub</a> <a href="https://twitter.com/hadson_paredes">Tiwtter</a> </footer> </body> </html> |
ISO 8859-1 es la codificación de un solo byte que puede representar los primeros 256 caracteres Unicode y utf-8 es una codificación multibyte que puede representar cualquier Unicode; ambos codifican a nivel ASCII de la misma manera.
0 Comentarios