Convertir una página web de HTML4 a HTML5

Transforma tu sitio web de HTML a HTML5

Muy buenas mis amigos de cómo crear mi web, vamos hablar un poco de html5 y de cómo optimizar más tu pagina para los dispositivos móviles.

¿Se puede transformar una página con HTML antiguo a HTML5?

La repuesta es si, se puede hacer esto no implica que vas a ingresar a una herramienta y vas a poner tu código HTML4 y que él te generará dicho código HTML5, ¡Error!.. eso no pasará.

Dependiendo de cómo este estructurado tu sitio web puedes migrar tu pagina web de html a html5, si eres de aquellos programadores que siempre se intereso por tener el código CSS separado del código HTMl entonces tu trabajo será muy menor siempre y cuando quieras una web 100% optimizada para móvil.

Web antiguas con HTML vs Web modernas con HTML5

La gran problemática de los website que están programados con html4 es que en su mayoría están estructurados en tablas y casi en la mayoría de los cacos con el código css embebido en el mismo código html de la página web.  Este tipo de sitios web son mucho más complejos para migrar a la nueva modalidad de web 2.0 con html5.

Convertir el sitio web en HTML5

Bueno como te comentaba no es nada fácil migrar un sitio web que tenga todo el código embebido en html ya que el nuevo lenguaje HTML5 su principal funcionalidad de ser responsive es que dispone de todos los códigos por separados y se basa mayor mente en CSS3 y JavaScript. Pero no te desanimes a continuación te explico cómo se adaptara tu sitio web a cualquier pantalla móvil sin tener que cambiar mucho código de tu plantilla web.

Pasos para pasar el código de HTML a HTML5

  • El primer paso es cambiar el doctype y indicarle al documento html que ya no queremos usar HTML4 si no que queremos integrar el nuevo lenguaje de HTML5 para ellos vamos a colocar las etiquetas necesarias que requiere HTML5 para que el contenido se adapte a los dispositivos móviles. aqui te presentamos el código HTML4 y mas abajo el codigo Recomendable para el nuevo lenguaje.
Ccodigo HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>


Codigo HTML5
<!DOCTYPE html>
        <html lang="ES">
         <head>
                   <title>Nueva estructura HTML5</title>
         <head>
<body>
  • El segundo paso es integrar las etiquetas que reconocerá el tipo de dispositivo que llegara a nuestro sitio web y en ella debemos indicarle que a qué resolución de pantalla tiene que adaptarse a continuación se presenta la etiqueta que debes colocar en tu web para que la misma se adapte a cualquier pantalla o dispositivo. Ahora nuestro código quedaría de la siguiente forma.
<!DOCTYPE html>
        <html lang="ES">
         <head>
                   <title>Nueva estructura HTML5</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

         <head>
<body>

Si te fijas la etiqueta meta viewport se le puede indicar el tamaño al cual tiene que adaptarse el sitio dependiendo el contenido en nuestro caso lo dejamos que tome un nivel de pantalla automático dependiendo el dispositivo pero tu puedes especificarle el tamaño de pantalla que quieres que tu web se adapta para ese dispositivo.

Bueno eso es todo por hoy espero que les sirva de ayuda este pequeño dato.

Comments

  1. By A

Deja un comentario

Tu dirección de correo electrónico no será publicada.