hernandezblasantonio/pw/documentacion/html

HTML

HTML (HyperText Markup Language o Lenguaje de Marcas de Hipertexto) es un lenguaje estandarizado para definir la estructura de una página web. Su estándar se encuentra en manos de la World Wide Web Consortium.

En la actualidad se cuenta con dos versiones del estándar HTML en uso, la 4 (con mayor uso en la web) y la 5 ( con una aceptación creciente cada vez mayor). La página web del estándar HTML4 se encuentra en http://www.w3.org/TR/html401/ mientras que la de HTML5 en http://www.w3.org/TR/html5/.

Como principal diferencia entre HTML4 y HTML5 se puede mencionar su uso a partir de su año de publicación. HTML4 se da a conocer en 1999 (hace más de 15 años) por lo que se orienta más a la publicación de contenido o información en un sitio web mientras que HTML5 siendo más reciente, 2014, cuenta con un enfoque hacia las "aplicaciones web modernas".

Sobre la creación de un documento HTML estático

Para la creación de un documento HTML estático se hace uso de dos cosas:

  1. Editor de texto: nos permite escribir la estructura del documento en un archivo de texto plano con extensión html.

    Podemos encontrar diversos editores de texto para distintos sistemas operativos, algunos gratuitos, otros de pago, algunos funcionan en un solo sistema operativo mientras otros en varios: bloc de notas, Notepad++, nano, Vim, GNU Emacs, Sublime Text, Brackets, Atom, Visual Studio Code, entre muchos otros.

  2. Navegador Web: nos permite visualizar el archivo de texto plano en formato HTML usando un estilo predefinido por él.

    Al igual que los editores de texto, podemos encontrar los siguientes navegadores web: Mozilla Firefox, Internet Explorer, Chromium, Google Chrome, Safari, Opera, entre muchos otros.

    También es posible encontrar navegadores web en la línea de comandos (o en modo texto): lynxs, links, elinks, w3m.

    En la terminal puedes, por ejemplo, ejecutar: links http://hernandezblasantonio.bitbucket.io

    Puedes leer más sobre estos navegadores web en: Conoce los navegadores web para terminales Linux y Navegadores web en consola.

Nota: cabe mencionar que en situaciones donde se trata de programar la generación de documentos HTML (haciendo uso de algún lenguaje de programación) un editor de texto nos puede ser insuficiente y se opta por hacer uso de un editor de texto para programación (con plugins/complementos) o inclusive un entorno de desarrollo integrado: Eclipse, Netbeans, Microsoft Visual Studio, IntelliJ IDEA entre muchos otros.

Creación de un documento HTML estático

Toma en cuenta lo siguiente:

  • Se hará uso de /home/alumno/www/servidorweb como directorio de alojamiento (o documento raíz) de nuestros archivos HTML.
  • Se cuenta con el servidor de HTTP thttpd en ejecución para poner a disposición de la red el contenido del directorio de alojamiento mediante el puerto TCP 8080.
  • El URL de acceso es http://servidorweb:8080. Previamente se ha asociado la dirección IP 127.0.0.1 con el nombre de host servidorweb en el archivo /etc/hosts.
  • El usuario alumno cuenta con los permisos para modificar el contenido del directorio de alojamiento.
  • El editor de texto a usar puede ser Atom (con interfaz gráfica de usuario) o bien nano (en la línea de comandos)
  • Cuando creas un documento de HTML usas el editor de texto para modificar su estructura y un navegador web para visualizarlo, por lo tanto ante cada modificación que haces al documento debes de recargarlo en el navegador web (apretar el juego de teclas Ctrl+F5).

Estructura de un documento HTML

La estructura de un documento HTML está dado por un árbol, donde sus nodos o elementos están conformados por etiquetas. Las etiquetas pueden estar conformadas por etiqueta de inicio o comienzo y etiqueta de fin o bien por una sola etiqueta de inicio-fin. Partiendo del siguiente documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <!-- Cabecera del documento -->
    <title>Inicio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- Cuerpo del documento -->
    <h1>Título Principal</h1>
    <p><em>Primer párrafo</em> del documento.</p>
    <p>Segundo párrafo, del documento.</p>
    <p>Último párrafo.</p>
  </body>
</html>

Sus elementos serían:

  • DOCTYPE: es la declaración de tipo de documento. En este caso se indica que se trata de un documento de HTML5.
  • html: marca el inicio y fin de un documento.
  • head: marca el inicio y fin de la cabecera del documento.
  • body: marca el inicio y fin del cuerpo del documento.
  • <!--: marca el inicio de un comentario. El fin del comentario es es -->.
  • h1: marca el inicio y fin del título principal.
  • p: marca el inicio y fin de un párrafo.
  • em: marca el inicio y fin de un énfasis.

A su vez, las etiquetas tienen un significado semántico el cual permite darle a un documento HTML una interpretación sobre su contenido. Por ejemplo la etiqueta h1 nos permitiría saber cual es el título principal del documento.

Por otro lado, se puede fácilmente notar que es posible tener etiquetas dentro de otras etiquetas (anidación) y que algunas etiquetas solo tienen sentido dentro de alguna otra, tal es el caso de la etiqueta title la cual solo es usada dentro de la etiqueta head. Al respecto hay que tomar en cuenta la siguiente situación:

<p>Párrafo <em>muy</p> importante</em>

Como se puede notar existe un problema, tanto semántico y de estructura: las etiquetas no inician y terminan inmediatamente, si no que se intercalan.

Finalmente, las etiquetas de inicio pueden tener atributos o información adicional sobre ellas, algunos de dichos atributos pueden ser obligatorios mientras que otros son opcionales, todo depende de la etiqueta. Por ejemplo, la etiqueta a (o anchor) se usa para agregar un enlace o vínculo (link):

<a>Un vínculo a otro documento</a>

Pero para que funcione requiere del atributo href:

<a href="otro-documento.html">Un vínculo a otro documento HTML</a>

Para más información sobre las etiquetas y sus atributos:

Consideraciones

Debemos de tener en cuenta lo siguiente:

  • HTML solo define la estructura y mediante sus etiquetas la semántica del documento.

    La representación visual, presentación o estilo queda fuera del trabajo de HTML.

    El estilo de un documento HTML está dado por otra tecnología estandarizada: CSS (Cascading Style Sheets u Hojas de estilo en cascada). CSS nos permite indicarle a un navegador web cuestiones como la posición, el color o tamaño de un elemento dentro de un documento HTML.

  • HTML es interpretado por el navegador web por lo que queda en el navegador web dar un estilo por default al documento HTML.

    Lo anterior conlleva a que cada navegador web de un estilo por default diferente a un mismo documento, de esta forma podemos ver a CSS como la tecnología que nos permite sobrescribir el estilo que por default le da un navegador web a nuestro documento HTML.

  • Los navegadores web no son estrictos con respecto a la forma de interpretar un documento HTML por lo que es posible tener lo siguiente:

     <h1>Un título principal con <p>un párrafo</p> en él</h1>

    El navegador web permitirá la existencia de estos problemas en la semántica y estructura de dicho documento, "haciendo lo mejor que pueda".

    Para identificar estos problemas podemos hacer uso de un servicio como http://validator.w3.org.

  • Históricamente se solía indicar en el mismo documento HTML el estilo de sus elementos.

    En la actualidad queda desaconsejado el establecer el estilo de los elementos de un documento HTML dentro del mismo. Se aconseja mantener el estilo de un documento HTML externo a él mediante la inclusión de un archivo de estilos (con extensión css) e indicarle al navegador web su uso con la etiqueta link:

     <head>
   <link rel="stylesheet" href="estilo.css">
 <head>

    Al igual que HTML se cuenta con el servicio de http://jigsaw.w3.org/css-validator para validar hojas de estilo en cascada (CSS).

  • Se cuenta con otra tecnología relacionada con los documentos HTML: Javascript.

    Javascript es un lenguaje de programación interpretado por el navegador web y nos permite darle comportamiento a los elementos de un documento HTML.

    Al igual que CSS, en la actualidad se aconseja mantener el comportamiento de un documento HTML fuera de él mediante un archivo con código fuente de Javascript (extensión js) e indicarle al navegador web su uso con la etiqueta script.

  • Existen tres elementos o etiquetas de HTML que nos son de gran importancia dentro del desarrollo de aplicaciones web ya que nos permiten el envío y representación de información generada de forma dinámica desde el servidor web:

  • HTML5 agrega nuevas etiquetas y atributos para el mejoramiento de la semántica de un documento HTML pero a su vez para el desarrollo de aplicaciones web en comparación con HTML4. Puedes encontrar una lista de dichas etiquetas y atributos en la Wikipedia.

Recomendación

Mantén presente la diferencia entre estructura (HTML), estilo (CSS) y comportamiento (Javascript) ya que nos permite concentrarnos en distintos aspectos para el desarrollo de aplicaciones web.

Finalmente

Como puedes notar existen tres tecnologías asociadas a la programación web: HTML, CSS y JavaScript. Lamentablemente, aunque sean estándares, el correcto uso queda en manos del programador o diseñador web y la correcta implementación/interpretación queda en los navegadores web.

Con respecto a lo último, se ha dado la incompatibilidad entre navegadores web para con estas tres tecnologías. Esto quiere decir que un mismo documento HTML puede tener estructura, estilo y comportamiento distinto entre navegadores web e inclusive entre distintas versiones de un mismo navegador web. A lo anterior debemos contemplar la actual existencia de dispositivos móviles que aún contando con un navegador web actual no cuentan con las mismas características que una computadora de escritorio o laptop: resolución de pantalla, falta de teclado/ratón y recursos (memoria RAM y CPU) limitados por ejemplo. Sin embargo existen soluciones que nos permiten solventar esto en menor o mayor grado.

Fuentes de información

Los siguientes sitios son fuente de información muy actual con respecto a tecnologías y estándares de la Web, en especifico HTML, CSS y JavaScript:

Recursos

Lecturas