Este articulo va especialmente dirigido a Victor y Petrus, dos usuarios que están siguiendo el curso de HTML que tengo en este blog, aunque los demás también podéis leerlo ;D. La razón es que han empezado a seguir el curso de HTML que hice y los dos se han encontrado con un problema, yo también lo tuve al principio y es que al escribir texto para mostrar en el navegador los acentos y las «ñ» no aparecen correctamente, en su lugar aparecen caracteres extraños, esto tiene muy fácil solución.
Este problema viene ya que no hemos definido el juego de caracteres que va a manejar la web, normalmente en un servidor esta definido por defecto uno que nos permitirá que la web se vea correctamente, pero tampoco esta de mas incluir la linea de código, por si acaso. Os voy a poner un código de ejemplo de una web muy sencilla que tiene los caracteres «conflictivos»:
<html> <head></head> <body> Esto es una prueba con la ñ y los acentos ò </body> </html>
Si ejecutamos este código HTML en el navegador veremos algo como lo siguiente:
Como podéis ver las «ñ» y los acentos no se muestran, en su lugar aparecen unos caracteres extraños. Esto lo podemos solucionar de dos formas principales, una es poner los códigos mediante unas tablas, pero eso en una web grande puede ser muy tedioso, en su lugar vamos a definir el juegos de caracteres que vamos a usar y así todo se mostrara correctamente.
La anterior pagina que os he puesto mas arriba quedaría de la siguiente forma:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> Esto es una prueba con la ñ y los acentos ò </body> </html>
Hemos añadido una «meta» en la sección «head» para definir el juego de caracteres que queremos usar, si ahora ejecutamos esa pagina web veremos lo siguiente:
Como podéis ver el problema se soluciona ingresando la linea que os he comentado. Esta linea habría que incluirla siempre en nuestras webs, de esa forma no tendremos problemas, hay mas juegos de caracteres, pero esa nos servirá.
Un saludo.
Perfectamente explicado.
Muchas gracias Liher. Un gran detalle por tu parte.
Gracias a ti Petrus amigo por visitar mi blog, es un placer 😀
Ahora si!
Mejor usar:
<meta charset=”utf8″ />
También recordar que hay que tener cuidado que el juego de caracteres del archivo sea también utf-8.
(normalmente se configura en el editor).
Por otra parte se pueden usar los caracteres especiales: ñ á é í ó ú
Saludos!
Hola Morfeo, gracias por el apunte, he borrado los comentarios anteriores duplicados, un saludo amigo
Me gusto más la solución de MORFEO porque se la puede memorizar fácilmente.
Gracias, funcionó con solo colocar
Muchas gracias ha sido de de mucha ayuda
Saludos!
gracias muy acertado el comentario lo hice y no me daba hasta que lei esto gracias
Gracias, muy interesante como siempre Liher, solo tengo una duda; por que utilizas para el ejemplo el acento grave » ` » que no se utiliza en español moderno en vez del acento agudo » ‘ » que si se utiliza… ?
Hola amigo, me alegro de que te gustase el articulo, en cuanto a lo del acento, simplemente teclee un acento sin pararme a pensar cual, tampoco te quiero engañar ya que nunca tecleo ningun acento cuando escribo los articulos, eso se lo dejo al corrector ortografico ;D Un saludo amigo
Genial!! probado y funciona perfecto.
Gracias
Estupendo :D, un saludo amigo
Tengo una web que estoy tratando de mostrar Ñ mayusculas pero no me permite y tambien necesito mostrar el simbolo de grados para colocar ºC ya coloque si coloco me muestra bien las Ñ y el º pero no me muestra las tildes (acentos)
Hola Stiven, me podrias mandar el codigo de la web por email a liher@mail.com? Lo podria mirar y decirte donde esta el problema, un saludo
Hola, en primer lugar felicitarte por tú trabajo..
Tengo una html muy sencilla, en la que mediante un <li .. muestro unos datos informativos por ejemplo. "Reunión martes 8am"
Pero no quiero tener estos datos dentro del html, sino en un txt que se pueda actualizar manualmente.
¿como podria hacer esto? Leer y mostrar un txt. Puede tener más de una linea, ¿respetaría los saltos enter entre lineas?
Un abrazo, y gracias de antemano.
Hola Emilio, para hacer lo que comentas, aun siendo algo relativamente sencillo, es algo complejo, requeriria PHP y creo que seria mejor que hicieses la consulta a alguien con mas experiencia y conocimientos que yo, siento no poder ayudarte, muchas gracias por tu visita, un saludo amigo
Hola Liher, me sigue sin aparecer los acentos y las ñs pero solo en un estilo de letra en el otro sí, agradezco tu ayuda, saludos.
Hola Enrique, otra opcion seria cambiar el «UTF-8» por «ISO-8859-1», pruebalo y me cuentas, un saludo amigo
Muchas gracias,ese cambio me ayudo, NOTA:estoy utilizando boostrap. quiza en algun componente de estos templates no aplica el UTF-8.
Hola Mauricio, me alegro de que te ayudase, muchas gracias por tu visita, un saludo amigo
hola, gracias por la info, lo he utilizado todo, jejeje, y .
No había forma de que saliera bien.
ahora estoy intentando de que el footer se pegue a la web, pero no hay forma, seguro que tendré algo mal. Espero conseguirlo con tu ayuda y mi cabezoneria.
——-
Hola Maritxu, espero que entre los dos podamos hacerlo, mandame un email a liher@mail.com y hablamos, ok? Un saludo guapa
no funciona
Hola Hunter prueba a cambiar el “UTF-8” por “ISO-8859-1”, pruebalo y me cuentas, un saludo amigo
Funciono a la perfección con eso ultimo, gracias 😀 un saludo:D
Hola Victor, me alegro de que te funcionase, muchas gracias por tu visita, un saludo amigo
Muchas gracias me funcionó con ISO-8859-1 7u7
Hola Gaga, muchas gracias a ti por compartir un saludo amigo
Gracias por la info, mi profesor me desaprobó en mi trabajo pasado por que los textos salían mal, ahora podré hacer un buen trabajo 😀 gracias.
Hola Keima-san, me alegro de que este articulo te sirva y espero que el proximo examen lo apruebes, gracias por tu visita, un saludo amigo
Buenas, tengo una duda, me han mandado un «tutorial» de html en clase con las etiquetas que vamos dando poco a poco y me enseñaron el meta para las tildes a mitad del tutorial, mi pregunta es ¿Si ya tienes medio tutorial con los códigos, se podría poner la etiqueta meta para la otra mitad y dejar los códigos de la primera mitad puestos, es decir, ¿Puede ir meta junto a los códigos o se verían los códigos? o habría que cambiar el texto de la página entera?
Hola Mario, la verdad es que nunca he probado eso, o hacia una cosa u otra. Lo mejor es que lo pruebes y veas el resultado. Muchas gracias por tu visita, un saludo amigo
Gracias me sirvió muchisimo
Hola Maria, muchas gracias por tu visita, un saludo amiga
Muchas gracias funcionó
Hola Bugjam, me alegro de que te funcionase, muchas gracias por tu visita, un saludo amigo
Hola, muchas gracias por tu ayuda. Excelente tarde. 🙂
Hola Adriana, me alegro de que te sirviese, muchas gracias por tu visita, un saludo amiga
Es perfecto!! Muy bien explicado, gracias me ha ayudado bastante 😀
Hola Diana, me alegro de que te sirviese, muchas gracias por tu visita, un saludo amiga
gracias por tu aporte ….saludfos
Hola Kolwosp, muchas gracias a ti por tu visita, un saludo amigo
Hola amigo tendras un correo para hacerte una pregunta. Gracias
Hola Carlos, puedes contactar conmigo en liher@mail.com
Hola LIher:
muchas gracias por tu artículo, mi mujer me ha hecho una página web, pero no podíamos poner acentos ni exclamaciones.
http://www.13meses.com
No es profesional la página, pero gratis, que en esta época ya es mucho.
Tu artículo nos ayudó a reparar y poder agregar los acentos.
Muchas gracias por tu aportación.
Un Abrazo
Antonio
Hola Antonio, me alegro de que este articulo te sirviese, muchas gracias por tu visita, un saludo amigo
hola tengo una duda,, tengo la etiqueta meta charset=”utf8″ /> y en el navegador de escritorio todo esta bien, pero a la hora de entrar desde el móvil ya no me muestra los asentos y ñ de forma correcta
Hola Edwin, como se ve?
Eres un Dios habia probado otras etiquetas y nignuna funciono
Hola Jhon, JAJAJAJA, solo era cuestion de ncontrar la adecuada. Muchas gracias por tu visita, un saludo amigo
Excelente amigo. Eres un genio. Casi me salen canas verdes. Ya lo solucioné. Muy breve, precisa y efectiva tu explicación. Saludos.
Hola Alfredo, JAJAJAJA, me legro de que te sirviese el articulo, muchas gracias por tu visita, un saludo amigo
Estoy trabajando con sublme text y ya probé cpm utf-8 y ISO-8859 pero ninguna funciona al subirlos al servidro
Hola Dey, s mi siempre me funciono con eso y no busque otra forma. Espero esto te sirva de ayuda:
https://www.w3.org/International/questions/qa-html-language-declarations.es
Muchas gracias por tu visita, un saludo amigo
Muchisimas gracias!!!!, funciona de maravilla.
Hola Ruth, me alegro de que te sirviese, muchas gracias por tu visita, un saludo amiga
Hola, tengo este problema..al poner las tildes lo que hace es agrandar las letras como se puede ver en la imagen.. https://drive.google.com/file/d/0BxFZR_ciH5TIMHM5TFBpOXdRd1E/view?usp=sharing ..he probado las soluciones que plantean y no resultan..me pueden ayudar ..gracias
Hola Daniel, has probado a cambiar la fuente a ver si pasa lo mismo?
Funcionó al cambiar la fuente…muchas gracias
Hola Daniel, muchas gracias a ti por tu visita, un saludo amigo
Me ha funcionado a la perfección la solución del «ISO-8859-1» para los acentos, ya había intentado de muchas formas y nada.
Un saludo y gracias por el tiempo y el apoyo
Saludos
Hola Daniel, me alegro de que te funcionase, muchas gracias por tu visita, un saludo amigo.
No me funciono me marca un un caracter con signo de interrogación 🙁 use una fuente de bob esponja para x trabajo ojala me soluciones xFAVOR!
Hola Ana, me puedes mandar por email la wbe para verla y decirte?
quiza en este ultimo año haya cambiado, porque no sirve.
he probado ambos utf, con el modelo header php, con un .hacess y nada
Hola Javier, revisa los comentarios de esta entrada, ahi tienes otras soluciones aportadas por usuarios. Muchas gracias por tu visita, un saludo amigo
Los acentos de mi web http://www.comproyvendooro.com se ven bien en pc pero en móviles no funciona.
ya probé de esas formas pero ninguna funciona al parecer las tildes solo aparecen como carácter de interrogación así : «�»
no se por que puede ser si me ayudas por favor antes no me pasaba ponía la linea de código la primera que puse y normal ahora ni idea…
Hola Criss, mandame la web y te ayudo, ok?
Muy buen aporte, gracias y saludos… una cerveza para este programador
Hola Marco, muchas gracias a ti por tu visita, un saludo amigo
como estas. me estoy volviendo loco modificando un formulario que descargué de internet y ya he probado todo pero no logró recibir los emails con acentos y ñ. nose más que hacer
Hola Gonzalo, siento decirte que ya estoy muy desconectado del HTML, apenas lo uso, quizas puedas preguntar en alguna web especializado. Muchas gracias por tu visita, un saludo amigo
este es el html
Club San Fernando / Solicitud para el ingreso al club acompañando a un menor
Club San Fernando
Solicitud para el ingreso al club acompañando a un menor
NOMBRE, APELLIDO Y DNI DEL MENOR:
NUMERO DE SOCIO:
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (1):
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (2):
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (3):
EMAIL DE CONTACTO:
OBSERVACIONES:
ADJUNTE UNA FOTO DE LOS D.N.I. DE LOS ACOMPAÑANTES
Enviar →
Su solicitud fué enviada exitosamente!
Error Lo sentimos hubo un problema al enviar su solicitud. Intente con una imagen en blanco y negro (más liviana).
este es un php
getValidator();
$validator->fields([‘email’])->areRequired()->maxLength(50);
$validator->field(‘email’)->isEmail();
$validator->field(‘message’)->maxLength(6000);
$pp->attachFiles([‘image’]);
$pp->sendEmailTo(‘gm@clubsanfernando.org.ar’); // ↠Your email here
echo $pp->process($_POST);
este es otro php
validate(function($validator)
* {
* $validator->fields([‘email’])
* ->areRequired()->maxLength(50);
* $validator->field(‘email’)->isEmail();
*
* })->useMailTemplate(__DIR__.’/templ/email.php’)
* ->sendEmailTo(‘you@website.com’);
*
* $fh->process($_POST);
*/
class FormHandler
{
private $emails;
public $validator;
private $mailer;
private $mail_template;
private $captcha;
private $attachments;
private $recaptcha;
public function __construct()
{
$this->emails = array();
$this->validator = FormValidator::create();
$this->mailer = new PHPMailer;
$this->mail_template=»;
$this->mailer->Subject = «Responder rápidamente»;
$host = isset($_SERVER[‘SERVER_NAME’])?$_SERVER[‘SERVER_NAME’]:’localhost’;
$from_email =’forms@’.$host;
$this->mailer->setFrom($from_email,’Solicitud para acompañar a menores’,false);
$this->captcha = false;
$this->attachments = [];
$this->recaptcha =null;
}
/**
* sendEmailTo: add a recipient email address
* @param string/array $email_s one or more emails. If more than one emails, pass the emails as array
* @return The form handler object itself so that the methods can be chained
*/
public function sendEmailTo($email_s)
{
if(is_array($email_s))
{
$this->emails =array_merge($this->emails, $email_s);
}
else
{
$this->emails[] = $email_s;
}
return $this;
}
public function useMailTemplate($templ_path)
{
$this->mail_template = $templ_path;
return $this;
}
/**
* [attachFiles find the file uplods and attach to the email]
* @param array $fields The array of field names
*/
public function attachFiles($fields)
{
$this->attachments = array_merge($this->attachments, $fields);
return $this;
}
public function getRecipients()
{
return $this->emails;
}
/**
* [validate add Validations. This function takes a call back function which receives the PHPFormValidator object]
* @param function $validator_fn The funtion gets a validator parameter using which, you can add validations
*/
public function validate($validator_fn)
{
$validator_fn($this->validator);
return $this;
}
public function requireReCaptcha($config_fn=null)
{
$this->recaptcha = new ReCaptchaValidator();
$this->recaptcha->enable(true);
if($config_fn)
{
$config_fn($this->recaptcha);
}
return $this;
}
public function getReCaptcha()
{
return $this->recaptcha;
}
public function requireCaptcha($enable=true)
{
$this->captcha = $enable;
return $this;
}
public function getValidator()
{
return $this->validator;
}
public function configMailer($mailconfig_fn)
{
$mailconfig_fn($this->mailer);
return $this;
}
public function getMailer()
{
return $this->mailer;
}
public static function create()
{
return new FormHandler();
}
public function process($post_data)
{
if($this->captcha === true)
{
$res = $this->validate_captcha($post_data);
if($res !== true)
{
return $res;
}
}
if($this->recaptcha !== null &&
$this->recaptcha->isEnabled())
{
if($this->recaptcha->validate() !== true)
{
return json_encode([
‘result’=>’recaptcha_validation_failed’,
‘errors’=>[‘captcha’=>’ReCaptcha Validation Failed.’]
]);
}
}
$this->validator->test($post_data);
//if(false == $this->validator->test($post_data))
if($this->validator->hasErrors())
{
return json_encode([
‘result’=>’validation_failed’,
‘errors’=>$this->validator->getErrors(/*associative*/ true)
]);
}
if(!empty($this->emails))
{
foreach($this->emails as $email)
{
$this->mailer->addAddress($email);
}
$this->compose_mail($post_data);
if(!empty($this->attachments))
{
$this->attach_files();
}
if(!$this->mailer->send())
{
return json_encode([
‘result’=>’error_sending_email’,
‘errors’=> [‘mail’=> $this->mailer->ErrorInfo]
]);
}
}
return json_encode([‘result’=>’success’]);
}
private function validate_captcha($post)
{
@session_start();
if(empty($post[‘captcha’]))
{
return json_encode([
‘result’=>’captcha_error’,
‘errors’=>[‘captcha’=>’Captcha code not entered’]
]);
}
else
{
$usercaptcha = trim($post[‘captcha’]);
if($_SESSION[‘user_phrase’] !== $usercaptcha)
{
return json_encode([
‘result’=>’captcha_error’,
‘errors’=>[‘captcha’=>’Captcha code does not match’]
]);
}
}
return true;
}
private function attach_files()
{
foreach($this->attachments as $file_field)
{
if (!array_key_exists($file_field, $_FILES))
{
continue;
}
$filename = $_FILES[$file_field][‘name’];
$uploadfile = tempnam(sys_get_temp_dir(), sha1($filename));
if (!move_uploaded_file($_FILES[$file_field][‘tmp_name’],
$uploadfile))
{
continue;
}
$this->mailer->addAttachment($uploadfile, $filename);
}
}
private function compose_mail($post)
{
$content = «Solicitud Online Para el Ingreso de Acompañantes: \n\n»;
foreach($post as $name=>$value)
{
$content .= ucwords($name).»:\n»;
$content .= «$value\n\n»;
}
$this->mailer->Body = $content;
}
}
te reenvio el html, que lo que copié inicialmente era lo que se ve del formulario
Club San Fernando / Solicitud para el ingreso al club acompañando a un menor
Club San Fernando
Solicitud para el ingreso al club acompañando a un menor
NOMBRE, APELLIDO Y DNI DEL MENOR:
NUMERO DE SOCIO:
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (1):
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (2):
NOMBRE, APELLIDO Y DNI DEL ACOMPAÑANTE (3):
EMAIL DE CONTACTO:
OBSERVACIONES:
ADJUNTE UNA FOTO DE LOS D.N.I. DE LOS ACOMPAÑANTES
Enviar →
Su solicitud fué enviada exitosamente!
Error Lo sentimos hubo un problema al enviar su solicitud. Intente con una imagen en blanco y negro (más liviana).
no entiendo que pasa … por q no se copia el codigo html
esta es la direccion http://www.clubsanfernando.org.ar/formpage.html
recién estoy comenzando con la programación y este problema me estaba molestando, muchas gracias por tu ayuda.