Luego de tomarme unos meses de pausa para reestructurar este tutorial, pues había comenzado sin una previa planificación, estoy de vuelta con la siguiente idea para aprender lo esencial para el desarrollo web. Nos encaminamos en el proyecto de la creación de un pequeño sistema de manejo de contenidos para la implementación de un blog personal, pasando de una web estática con HTML, CSS y javascript, a una web dinámica con php y ajax de javascript. En este contexto, iremos viendo desde que es HTML hasta esas famosas cargas de contenidos si refrescar la página… Dicho esto, manos a la obra.
Introducción a HTML
Como vimos en el capítulo anterior, la www (World Wide Web) es un sistema de que contiene una información casi infinita, mas esta información debe organizarse de algún modo para garantizar que los usuarios de la internet consigan lo que buscan. La unidad básica en la que se encuentra organizada dicha información es las páginas web y estas se caracterizan por contener texto, imágenes, video y otros tipos de contenido multimedia.
Una de las características más importantes de las páginas web es que contienen hipertexto. Esto quiere decir que las páginas no son documentos aislados, sino que están unidas a otras mediante links o enlaces de hipertexto. Gracias a esto, el usuario puede navegar, presionando sobre las zonas activas para saltar a otras páginas.
Hay quienes discuten el hecho de que la www sea un sistema hipertexto y prefieren calificarla como un sistema hipermedia, debido a que, aunque en un principio las zonas activas eran texto, hoy día las zonas activas pueden ser imágenes, videos y en definitiva, cualquier elemento de la página. Aún así, el término original no ha sido reemplazado.
Cuando los diseñadores de la www se hicieron la pregunta: ¿Cómo hacer una página web? Decidieron que se debían cumplir, entre otras, las siguientes características:
- La web tenía que ser distribuida: la información repartida en páginas no muy grandes y enlazadas entre sí
- La web debía ser hipertexto y debía ser fácil navegar en ella.
- Tenía que ser compatible con todo tipo de ordenadores y con todo tipo de sistemas operativos.
- Debía ser dinámica: El proceso de cambio de información debía ser rápido y ágil.
Estas características fueron las que marcaron todo el paradigma de diseño de todos los elementos de la www, incluida la programación de sitios web. Como respuesta a todos estos requisitos, se creó el lenguaje HTML (HyperText Markup Language), lenguaje hipertexto de marcas. Así que HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces que conducen a otros documentos o fuentes de información relacionadas, y permitiendo inserciones multimedia.
Básicamente HTML se encarga de especificar en el texto la estructura lógica del contenido (título, párrafos, texto normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren mostrar (especificar los lugares del documento en los que se quiere mostrar letra cursiva, en negrita o una imagen determinada) y dejar luego que la presentación final del hipertexto se realice por programas conocidos como Browsers o navegadores web (ie, firefox, chrome, opera, safari, etc.).
HTML5
Esta es la quinta versión de HTML y pretende reemplazar a XHTML, corrigiendo los problemas con los que nos encontramos los desarrolladores web, así como rediseñando el código para que se adapte a las nuevas necesidades que demanda la web hoy día. A diferencia de otras versiones de HTML, la quinta versión del lenguaje, comienza añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando ambigüedad, teniendo en cuenta el dinamismo de la web 2.0, en la que los sitios parecen más aplicaciones web que simples documentos.
Sintaxis
Una de las características más relevantes de HTML es que es un lenguaje que no necesita de ningún programa especial para poder ser escrito. A pesar de que en la actualidad hay infinidad de software que facilita esta tarea, con el más simple de los editores de texto, nos sirve para este fin.
Los documentos HTML se presentan como documentos de texto plano (sin ningún tipo de formato especial), en el que todo el formato se identifica mediante marcas de texto (llamadas etiquetas o tags), que delimitan los contenidos que conforman dichas marcas de texto.
Las etiquetas o tags comienzan por el carácter <, seguido del nombre de la etiqueta, los atributos y acaban con el carácter >, para la etiqueta de apertura:
<etiqueta>
Luego con los caracteres </,seguido del nombre de la etiqueta y el carácter >, para el cierre de la etiqueta:
</etiqueta>
Las etiquetas no son sensibles a mayúsculas y minúsculas (case-insensitive).
Los atributos de las etiquetas sirven para especificar parámetros adicionales y se incluyen en la etiqueta de inicio de la siguiente forma:
<etiqueta atributo1=”valor” atributo2=”valor”>
Cabe destacar que HTML permite, en algunos casos, omitir la etiqueta del final si la etiqueta no envuelve a ningún otro elemento al que afecte, quedando:
<etiqueta />
Estructura básica de un documento
Todos los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas y la estructura en la que los programadores solemos estructurar nuestras páginas web, suele ser más o menos la misma en la mayoría de los casos.
<!Doctype html>
<html lang=”es-ES”>
<head>
<!—Este es un comentario-->
<title>Mi primera página</title>
</head>
<body>
Contenido de la página.
</body>
</html>
Antes de continuar, nótese la indentación en el código. En HTML no es necesario indentar, pero como cualquier otro programador que inició sus primeras andanzas con Python me acostumbré a hacerlo y es algo que agradezco, pues a modo de anécdota, en algún momento tuve la oportunidad de trabajar con un programador que no indentaba, que de seguro leerá ésto, y me resultaba engorroso leer su código. Para mí, escribir un código sin indentar es como escribir un texto sin utilizar signos de puntuación, algo que resulta bastante difícil de entender. Ahora sí, analicemos por partes el código.
<!DOCTYPE>
En primer lugar, debemos especificar el tipo de documento que estamos creando y esto en HTML5 es extremadamente sencillo con:
<!Doctype html>
Con esta etiqueta le indicamos al navegador que estamos trabajando con la versión más reciente de HTML.
<html>
Toda la estructura de nuestra página web se encuentra dentro de esta etiqueta y a partir de HTML5, en ella podemos especificar, por medio de un atributo, el idioma en el que se encuentra nuestra página.
<!Doctype html>
<html lang=”es-ES”>
</html>
Un dato interesante es que HTML 5 es bastante flexible en cuanto a la estructura se refiere, de manera que el elemento <html> puede ser colocado sin atributo e incluso ser ignorado completamente, pero por razones de compatibilidad, SEO y otras que no vale la pena mencionar aquí, recomiendo el uso de esta etiqueta en todos los casos.
<head>y <body>
El código HTML insertado entre las etiquetas del elemento <html> debe ser dividido en dos secciones principales: la cabeza del documento y el cuerpo del mismo, <head> y <body> respectivamente.
Evidentemente la primera sección que usaremos será <head> y como el resto de los elementos estructurales posee una etiqueta de apertura y una de cierre.
<!Doctype html>
<html lang=”es-ES”>
<head>
</head>
</html>
Este elemento no ha cambiado respecto a versiones anteriores y su función sigue siendo definir el título de nuestra página (el texto que aparece en la pestaña del navegador), el set de caracteres correspondientes, información general sobre el documento, código css o javascript embebido o enlaces a documentos externos, entre otras cosas. Exceptuando el título y el icono, el resto de la información que se encuentra en esta sección, es invisible para el usuario.
La siguiente sección, que es la parte principal para la organización del documento es el cuerpo, pues representa toda la parte visible para el usuario y va entre la etiqueta <body>. Al igual que <head> tiene etiquetas de apertura y de cierre y no ha cambiado en nada respecto a versiones anteriores.
<!Doctype html>
<html lang=”es-ES”>
<head>
</head>
<body>
</body>
</html>
<!—Comentarios→
En HTML5, al igual que en las versiones anteriores, podemos introducir comentarios en nuestro código, los cuales no serán visibles para el usuario y se encierran entre las marcas <!—y -->.
Un dato a tener en cuenta es que, a pesar de que muchos programadores fallamos en la práctica de la utilización de comentarios, es importante su utilización, especialmente cuando se trata de documentos grandes, pues así se facilita la búsqueda de elementos dentro del mismo.
<meta>
Algunos de los cambios e innovaciones que fueron incorporados dentro de <head> en HTML5 fue la etiqueta meta que define el set de caracteres a utilizar para mostrar el documento. Suena interesante ¿no? Pero para aquellos que se preguntan: ¿Qué demonios es una etiqueta meta? La respuesta es muy sencilla: Una etiqueta meta es la mínima aportación semántica que HTML, desde su creación, proporciona a los buscadores web. Describe el documento con una serie de datos básicos.
<!Doctype html>
<html lang=”es-ES”>
<head>
<!—Este es un comentario-->
<meta charset=”utf-8” />
</head>
<body>
</body>
</html>
La innovación en este caso, como en la mayoría, es la simplificación. La nueva etiqueta meta es más sencilla respecto a versiones anteriores:
HTML4:
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8” />
HTML5:
<meta charset=”utf8” />
Además de esto, hay otra serie de etiquetas meta que podemos utilizar en HTML5 que nos ayudarán en cosas como el mejoramiento del posicionamiento SEO pero ese es tema para otro tutorial, por ahora sólo necesitamos esta etiqueta meta.
<title>
Respecto a esta etiqueta no hay mucho que decir, sirve para colocar el título de la página web, el cual es mostrado en la barra superior de la pestaña del navegador.
<!Doctype html>
<html lang=”es-ES”>
<head>
<!—Este es un comentario-->
<meta charset=”utf-8” />
<title>Mi primera página</title>
</head>
<body>
Contenido de la página.
</body>
</html>
En el siguiente capítulo veremos cómo se estructura el cuerpo del sitio, tanto utilizando bloques para definir las secciones, como las nuevas etiquetas que nos brinda HTML5 para el mismo fin.
Hasta la próxima.
No hay comentarios:
Publicar un comentario