Primero tenemos que definir qué es HTML, un término que muchas veces escuchamos. Las siglas significan Hypertext Markup Language, o Lenguaje de Marcas Hipertextual. En otras palabras, es un código de marcas o etiquetas que definen elementos de una página Web.
Un sitio web está compuesto por una o más páginas web (documentos HTML). Pero no todo es HTML, sino estaríamos viendo páginas estáticas y de poco atractivo visual. Para ello tenemos otros lenguajes como CSS (Cascading Style Sheets) para dar estilo (colores, tipografías, tamaños, maquetación, etc.) y Javascript para otorgar dinamismo en la parte que vemos de una página.
Podríamos seguir teorizando mucho sobre HTML, pero para no aburrirnos es mejor comenzar con un enfoque práctico. Tomemos cualquier editor de texto que tengamos a mano (gedit en Ubuntu, Notepad o mejor Notepad++ en Windows), y escribamos las siguientes líneas de código en un archivo llamado index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mi primer Página HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Este es mi primer archivo HTML</p>
</body>
</html>
Si queremos copiar el código, sencillamente hacemos doble clic en el mismo y se mostrará como texto plano. Sin embargo sería mejor si podemos escribirlo a mano y realizar así nuestras primeras prácticas, a fin de empezar a acostumbrarnos al lenguaje. Es ley: cuanto más código escribimos, más aprendemos. Por más que hayamos leído miles de libros, si no escribimos código en la misma proporción, no servirá de mucho.
Imagen 1 - Primer archivo HTML con el clásico ¡Hola, Mundo!
Luego de guardar el archivo, lo abrimos con el navegador que más nos guste. Notamos ahora la salida del mismo, solamente un título y un poco de texto, como vemos en la Imagen 1.
¿Tantas líneas de código para escribir este texto? No, lo que hicimos fue definir la estructura básica de un documento HTML y luego añadir dos elementos, que son h1 (heading o encabezado) y p (párrafo).
Miremos un poco el código. La primera línea corresponde al Doctype, el cual siempre debemos escribir a fin de que el navegador sepa con qué versión de HTML estamos trabajando. En este caso se corresponde a la versión HTML5. Antes era necesario escribir Doctypes largos, sin embargo ahora se ha simplificado.
En la segunda línea tenemos la primer etiqueta, <html>. ¿Qué es una etiqueta? Es una palabra clave rodeada de los signos < y >, y generalmente tiene su par que la cierra, formado por la palabra clave entre </ y >. La primera es la etiqueta de apertura (opening tag), y la segunda es la de cierre (closing tag). Las etiquetas describen elementos en una página web. En este caso, el elemento raíz es html. Dentro tenemos head, y body, que están dentro del elemento html. A esta forma de incluir elementos dentro de otros se le llama anidación.
Volviendo a nuestro código, dentro del elemento head tenemos los elementos <meta> y <title>. El primero sirve para definir información sobre el documento, y el segundo para especificar el título de la página, que aparecerá en la ventana del navegador o por ejemplo en los resultados de Google (de ahí la importancia de nunca olvidarnos definirlo).
Más adelante conoceremos el elemento meta y sus utilidades. Dentro de la etiqueta de apertura notamos que se le agregó charset=”UTF-8″. Esto es un atributo. Los atributos brindan información adicional a un elemento. Están compuestos de un nombre, el signo igual y el valor del atributo entre comillas. En este caso, el atributo charset permite definir el set de caracteres con el cual fue codificado el documento. Más adelante veremos en detalle este tema en particular.
En síntesis, la sintaxis básica de un elemento HTML es la siguiente:
Imagen 2 - Sintaxis básica de un elemento HTML
Esta sintaxis aplica a los elementos que tienen etiqueta de apertura y cierre. En el caso de los que deben cerrarse en la misma declaración (que no son muchos), como meta, sencillamente terminamos la etiqueta inicial con />.
Como vimos en el código, lo que definimos en head no se corresponde a nada de lo que aparece en la página en sí. Esto se debe a que head sirve para describir información que no se ve, definir scripts, enlaces a hojas de estilo CSS, etcétera. En cambio, el elemento body está dedicado a incluir los elementos visibles de una página.
Dentro de body tenemos dos elementos: h1 y p. El primero define un encabezado o heading, por lo cual el texto se muestra en un tamaño y grosor considerable, mientras que el elemento p define un párrafo. Acá es fácil ver cómo un elemento afecta a su contenido, porque con solo cambiar el nombre de las etiquetas, el texto que está en el contenido del elemento se muestra de forma distinta.
Los navegadores web interpretan la información que le damos en código HTML y renderizan o muestran la página de acuerdo a estándares (que no siempre se cumplen, en especial con Internet Explorer) preestablecidos por la W3C. Como cada navegador tiene un motor distinto, es muy común que un sitio se muestre de una manera distinta en cada navegador, aunque con al llegada de HTML5 se busca que este problema tienda a desaparecer en el futuro.
Como vamos a ver en los artículos de Historia de Internet, desde el principio se buscó que la información a transmitir sea liviana, por lo cual los sitios no son tan fáciles de componer como una imagen visual, sino que es necesario traducirlos a código HTML.
Todo el código HTML (también CSS y Javascript) de un sitio web puede verse desde el mismo navegador. Por ejemplo, en Google Chrome (navegador que recomendamos en GuíaHTML5 por su soporte a HTML5 y herramientas de desarrollador) sencillamente hacemos clic derecho en cualquier lugar de la página web y hacemos clic en Inspeccionar Elemento.
Imagen 3 - Google Chrome dispone de un modo inteligente para ver el código HTML de una página web
Como tarea para esta primera parte podríamos tomar el código que escribimos y modificarlo para que tenga otro título, encabezados y párrafos cuantas veces queramos. Podemos probar con h2 y h3 además de h1.
Si bien tiene sus complicaciones, HTML es sencillo. Tenemos que aclarar también que no cumple los requisitos para ser un lenguaje de programación. Sencillamente es un código que describe elementos. En la próxima parte veremos los elementos HTML básicos y su uso, y hablaremos un poco sobre un tema importante: validación de documentos.
]]>
HTML5 está entre nosotros. ¿Ya empezamos a utilizarlo?
Llegando ya a la mitad del 2011, hacen tan solo aproximadamente 20 años desde que la primera página hecha en HTML vio la luz, en el laboratorio del CERN gracias a Tim-Berners Lee. A quienes les guste la historia y la “arqueología” digital, podrán deleitarse en el siguiente link:
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Ahí encontrarán una copia (data de 1992) del primer documento HTML realizado a fines de 1990. Posteriormente ahondaremos en la apasionante historia de Internet, un fenómeno joven pero que creció exponencialmente.
El tiempo pasó y varias versiones de HTML vieron la luz, hasta la 4.01 que es la última completa publicada por la W3C (1999) que trajo a CSS. Actualmente nos encontramos en una época de transición. Mientras que muchos adoptaron XHTML para desarrollar (una versión más estricta de HTML basada en XML), gracias a mentes como la de Ian Hickson y a los navegadores Web, estamos volviendo a HTML pero en su nueva versión: 5.
Desde ahora aclaramos que a menos que se especifique lo contrario, en este sitio nos referimos con el término HTML5 tanto al lenguaje HTML en su versión 5 como a las demás tecnologías que lo acompañan (CSS3, Javascript, etcétera). Ahora bien, cuando utilicemos el término lenguaje HTML5 nos referimos con precisión sólo al lenguaje HTML en su versión 5.
HTML5 pretende una revolución en el desarrollo web. Por ejemplo, se perfila para destronar a Adobe Flash (plataforma cerrada y privativa, utilizada para sitios animados, banners y juegos online, etcétera) de la Web. La inclusión de nuevos elementos como Video y Audio nos permiten incorporar objetos multimedia en una página sin tener que recurrir a decenas de líneas de código confusas. HTML5 está preparado para la Internet de hoy, para el uso que actualmente se le da.
Si queremos ver un ejemplo de lo que se puede realizar con HTML5, tenemos que visitar este sitio: www.ro.me. ROME – “3 Dreams of black” es un video musical interactivo realizado integramente con HTML5 y WebGL (estándar en desarrollo para el despliegue de gráficos 3D en navegadores Web), que fue presentado en el Google I/O de este año. Se recomienda visualizarlo con Google Chrome (Google es el principal impulsor de HTML5 y su navegador Chrome da cuenta de ello).
ROME: "3 Dreams of Black" es un video músical interactivo realizado en HTML5 y WebGL que nos introduce en un sueño 3D.
Para quienes les gusten los detalles, aquí pueden encontrar la especificación en desarrollo del lenguaje HTML5 : http://dev.w3.org/html5/spec/
Otros sitios de visita obligatoria (aunque en inglés) y que serán muy apreciados por los seguidores de HTML5 son los siguientes:
- HTML5ROCKS: sitio de Google que nos introduce a todos los aspectos de HTML5. A través de sencillas diapositivas podemos ver claramente las novedades y ventajas, y encontramos ejemplos, demostraciones, tutoriales, y un “Playground” donde podemos “jugar” con código HTML5. Probablemente sea el mejor sitio para aprender HTML5 de forma interactiva.
- Apple HTML5: Apple también apuesta fuerte por HTML5, ya que sus dispositivos (IPhone, IPad, etc) no soportan Flash. En este sitio encontramos espectaculares ejemplos interactivos de las características de HTML5.
- Logo HTML5: sitio para fanáticos, entusiastas y desarrolladores/diseñadores que provee el logo oficial de HTML5 en todas sus variantes. Podemos personalizarlo y descargarlo en distintos formatos de imagen.
- W3Schools HTML5: recomendado por GuíaHTML5, W3Schools el mejor sitio donde podemos aprender todas las tecnologías web, y es totalmente gratuito. A través de sencillas explicaciones paso por paso podemos comprender todos los aspectos de los lenguajes utilizados en la Web, incluido el lenguaje HTML5 y CSS3. Podemos encontrar referencias completas de cada lenguaje, las cuales son muy útiles para tener a mano a la hora de escribir código.
Teniendo tanta aceptación y compatibilidad con los navegadores actuales, surge la pregunta: ¿Por qué seguir escribiendo en HTML 4.01 o XHTML 1.0? Si HTML5 es compatible hacia atrás, no hay más excusas. Empecemos desde hoy a utilizar HTML5. En las próximas entradas veremos cómo adoptar el nuevo estándar en nuestros desarrollos.
]]>
¿Estamos listos para adentrarnos en este apasionante viaje?
Si tu deseo es aprender a diseñar y desarrollar sitios web desde cero, este es tu lugar. No sólo vas a encontrar guías desde cero sobre HTML5, sino también sobre CSS3, Javascript, PHP… en fin, todo lo que hace al desarrollo de un sitio web. No nos gusta utilizar prácticas anticuadas, por lo cual haremos lo posible por mostrar siempre las mejores y más actualizadas prácticas que hoy se utilizan a nivel internacional.
Algunos temas que abarcaremos serán:
- Desarrollo Web DESDE CERO
- Temas sobre el Diseño Web
- Cursos de HTML5, CSS3, Javascript
- Sitios Dinámicos con PHP y MySQL
- Uso de Software Libre para nuestros proyectos
- Noticias y tendencias en el diseño y desarrollo web
¿Qué es GuíaHTML5? Es un proyecto que acabo de comenzar, con la idea de concentrar material educativo y de consulta de calidad que esté al nivel de los mejores sitios y blogs en inglés. Como a veces es difícil encontrar información a ese nivel en español, mi idea es “competir” sanamente con estos sitios para que el hispanohablante tenga un recurso adicional. Si bien soy un amante de la lengua anglosajona y siempre recomiendo leer y aprender en inglés, es bueno tener un recurso a mano en la lengua materna.
Este sitio está hecho y se mantendrá con WordPress. Si bien soy desarrollador Web y podría montar mi propia plataforma con CMS (Content Management System, o Sistema de Gestión de Contenido), no tengo mucho tiempo para ello y prefiero concentrarme en el material que se brindará. Desde ya hago saber de que por ahora soy una sola persona (que tiene una vida, ocupaciones, trabajo, etcétera) y teniendo en cuenta eso, al principio van a encontrar poco material, pero este irá creciendo con constancia pero tomará tiempo. “Piano piano, se va lontano“… (lento lento, se llega lejos… viejo refrán italiano).
Me gusta comparar el aprendizaje en el universo Web a un viaje espacial. La Internet conforma en sí un universo virtual, donde se concentran toneladas de información y conocimiento. Y para que todo esto funcione es necesaria una estructura física y una estructura lógica. La idea es ir y cada uno por su cuenta experimentar el viaje, comprender qué hay detrás de esa pantalla que ahora estás leyendo desde tu PC, Notebook, Smartphone o TabletPC.
Abróchense los cinturones para saltar al hiperespacio, porque este viaje es largo y muchos no querrán volver, ya que es gratuito y apasionante, un universo casi infinito y en expansión donde siempre podemos conocer nuevas galaxias y planetas, donde el límite, está en la imaginación.
]]>