Crear una página en blanco con HTML5
Después del magnífico tip de Alberto sobre cómo saltarse un firewall usando SSH aquí os traigo un sencillísimo tutorial sobre cómo crear una página web HTML5 en blanco. Y es que una buena manera para comenzar a trabajar y conocer las novedades de este nuevo lenguaje es que aprendas a realizar una página web HTML5 en blanco, es decir, una página que contenga las etiquetas mínimas y necesarias y que sea validada como tal.
Para empezar necesitas un editor de textos para escribir código HTML. Puedes utilizar los editores de texto que vienen por defecto en cada sistema operativo, siendo Notepad para Microsoft Windows, TextEdit para Mac OS X y para Ubuntu Linux está Gedit. También en internet existe una gran cantidad de ellos para todos los sistemas operativos. Una vez escojas tu editor de textos preferido, ábrelo y escribe lo siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Plantilla en blanco</title>
</head>
<body>
</body>
</html>
Con el elemento <!doctype html> defines el tipo de documento. Dicho elemento le indica al navegador la versión y tipo de HTML empleado en el documento, en este caso sería HTML5. Con esto, el navegador usará el modelo de renderización adecuado al tipo de documento. Si no lo especificas el navegador interpretará el código HTML escrito tal y como le parezca mejor. Se obtendrán resultados muy distintos de esta forma, incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es que siempre definas el tipo de documento.
Con el elemento html delimitas el documento HTML e indicas al navegador el comienzo y fin de la página HTML. Sus etiquetas son: <html>, ponlo siempre después de la especificación del tipo de documento, y </html>, ponlo siempre al terminar el documento.
Para este y todos los demás, es necesario delimitar obligatoriamente el comienzo y el fin de un elemento mediante etiquetas. La sintaxis es <nombre_elemento> para una etiqueta de comienzo y </nombre_elemento> para una etiqueta de fin. La única etiqueta que no hace falta cerrar es <!doctype html>. Si entre dichas etiquetas no vas a introducir texto puedes escribirlo también de la siguiente manera: <nombre_elemento />.
El elemento head tiene la función de delimitar la cabecera del documento. La cabecera es la sección apropiada para que incluyas información sobre el documento, la mayoría de la cual no será mostrada a tus visitantes. Para incluir esta información tienes diversos elementos, de momento sólo comentaremos los dos más importantes: meta y title.
Con el elemento title indicas el título del documento. Lo que incluyas entre dichas etiquetas es el nombre que aparecerá en la cabecera del navegador.
El elemento meta se utiliza para especificar información sobre el propio documento. Los elementos meta generalmente forman parte del elemento head del documento. Con http-equiv="Content-Type" content="text/html; especificas que el tipo de contenido es de texto en HTML. El atributo charset=”UTF-8″ especifica que el documento seguirá la codificación UTF-8 que es un formato de codificación de caracteres Unicode.
Por último el elemento body delimita el cuerpo del documento. Aquí van todos los contenidos de la página que quieres mostrar a tus visitantes: texto, imágenes, vídeos, etc.
Conocido los elementos y cómo se forma una página web HTML5, guarda dicho documento con una extensión html, un ejemplo sería plantilla.html. Ejecuta el archivo y verás tu navegador con una pantalla en blanco.
Por último, para validar tu documento HTML5, entra desde tu navegador favorito a http://validator.w3.org/. Verás una serie de pestañas, pulsa en Validate by File Upload. A continuación pulsa en el botón Seleccionar archivo y elige el archivo donde hayas guardado el documento creado anteriormente. Y por último pulsa en el botón Check. Si quieres una validación más completa, que verifique más estándares, visita: http://validator.w3.org/unicorn/.
Gracias a Siot, Neiker y Bline por los comentarios.
Suscríbete
Síguenos
Contacta
