Html

El lenguaje HTML (hypertext markup language) describe el contenido de una página web, incluyendo el texto, las imágenes, los vídeos, etc

Las especificaciones sobre el funcionamiento de la web las hace el W3C (World Wide Web Consortium). En su página web podemos encontrar toda la documentación sobre HTML y otros estándares de la red

Para la edición de páginas web podemos usar cualquier editor de texto

En windows el Bloc de notas o el Wordpad, en linux vi, joe, mcedit, etc

En ellos aprovecharemos las capacidades de cada uno de copiar y pegar. Existen multitud de editores web que nos facilitan la inserción de código HTML

Unos freeware, otros shareware y otros comerciales como Adobe Dreamweaver con el que se obtienen unas páginas más profesionales ya que cuentan con plantillas predefinidas que agilizan nuestra labor

Para desarrolladores avanzados tenemos Sublime Text, aunque puede ser poco amigable para el resto de desarrolladores

Entre los más amigables tenemos Brackets, que permite visualizar el código HTML automáticamente

Y Atom, como otra alternativa más, que ahora se está poniendo de moda

Hay que tener muy en cuenta el tipo de codificación que usemos con este lenguaje, ya que si al escribir nuestra página web usamos una codificación distinta a la del navegador web, podemos obtener una página con caracteres extraños o ilegibles

La opción más usada es la codificación UTF-8, que es el estándar para Internet y para sistemas Linux

Los sistemas Windows y MacOS utilizan otros tipos de codificación por lo que deberemos hacer coincidir la codificación en la cabecera del documento, con la que será mostrada en el navegador web

Estándares

HTML 1.0

Tim Berners-Lee en 1991 describe 18 elementos que incluyen el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.4

Berners-Lee consideraba el HTML una ampliación de SGML, pero no fue formalmente reconocida como tal hasta la publicación a mediados de 1993, por el IETF (Internet Engineering Task Force), de una primera proposición para una especificación del HTML: el borrador del Hypertext Markup Language de Berners-Lee y Dan Connolly, que incluía una Definición de Tipo de Documento SGML para definir la gramática

El borrador expiró a los seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imágenes sin cambio de línea, que reflejaba la filosofía del IETF de basar estándares en prototipos con éxito. De la misma manera, el borrador competidor de Dave Raggett HTML+ (Hypertext Markup Format), de finales de 1993, sugería estandarizar características ya implementadas, como las tablas

HTML 2.0

La versión oficial para HTML fue hasta hace pocos años la HTML 2.0, denominado HTML+, comenzó a desarrollarse a finales de 1993. Se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior

A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2.0 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales

Cumplía su función perfectamente, pero muchos usuarios del HTML querían tener un control mayor sobre sus documentos, tanto en el formateo del texto como en la apariencia de la página

HTML 3.0

Mientras tanto, Netscape, que era en esa época el líder indiscutible de los navegadores, introducía con cada nueva versión etiquetas y atributos no contemplados en el estándar oficial, creando descontento entre algunos desarrolladores

Debido a su amplia difusión y aceptación, otros navegadores intentaban copiar esas innovaciones, pero debido a que Netscape no especificaba completamente sus nuevas etiquetas, los resultados no eran distintos de los deseados. Lo que provocaba una gran confusión y numerosos problemas, cuando los desarrolladores utilizaban estos elementos y comprobaban que no funcionaba como querían en otros navegadores

El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995. Con él se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época, y cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web

HTML 3.2

El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar integrada en un estándar distinto llamado MathML

Cada vez era más evidente la necesidad de un nuevo estándar que fuera aceptado por todos. Se formó otro comité, el W3C, apoyado por los principales vendedores de software (entre ellos, IBM, Microsoft, Novell, Netscape, Sun, etc). El nuevo estándar fue desarrollado durante todo el año 1996 por el W3C con el sobrenombre de Wilbur, y finalmente, en Enero de 1997 fue aprobado como el HTML 3.2

El HTML 3.2 era totalmente compatible con el estándar anterior, pero incorpora muchas de las innovaciones de los navegadores comerciales (Netscape e Internet Explorer principalmente), tales como tablas, applets, texto que bordea las imágenes, entre otras, aunque no todas, como por ejemplo los frames

HTML 4.0

En Julio de 1997 se presentó el primer borrador público del estándar oficial HTML 4.0 (que tiene el nombre clave de Cougar). En él se incorporan las especificaciones sobre tablas, frames, scripts, hojas de estilo, accesibilidad por distintos medios, e internacionalización (incluyendo el uso de Unicode, en lugar del Latin-1)

En 1997, HTML 4.0 (que tiene el nombre clave de Cougar) se publicó como una recomendación del W3C. HTML 4.0 adoptó muchos elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como deprecated (desaprobados)

HTML 4.0 implementa características como XForms 1.0 que no necesitan implementar motores de navegación que eran incompatibles con algunas páginas web HTML. En él se incorporan las especificaciones sobre tablas, frames, scripts, hojas de estilo, accesibilidad por distintos medios, e internacionalización (incluyendo el uso de Unicode, en lugar del Latin-1)

HTML 5.0

HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo

En 2004 la W3C reabrió el debate de la evolución del HTML, y se dieron a conocer las bases para la versión HTML5. No obstante, este trabajo fue rechazado por los miembros del W3C y se daría preferencia al desarrollo del XML

Apple, Mozilla y Opera anunciaron su interés en seguir trabajando en el proyecto bajo el nombre de WHATWG, que se basa en la compatibilidad con tecnologías anteriores

En 2006, el W3C se interesó en el desarrollo de HTML5, y en 2007 se unió al grupo de trabajo del WHATWG para unificar el proyecto

La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5

Formato de una página HTML

Su principio esencial es el uso de etiquetas (tags). Las etiquetas son palabras reservadas del lenguaje encerradas entre < >

Tipos de etiquetas

Hay tres tipos de etiquetas:

• Pareadas
  cuando aparece una etiqueta de inicio y otra de final, los bloques contenidos entre el inicio y el cierre son elementos, que su vez pueden contener otros elementos

  <p>Un texto</p>

• Sin parear
  cuando la etiqueta representa la inserción de un elemento, estas etiquetas terminan con una barra inclinada

  <hr/>

• Con final opcional
  son etiquetas pareadas en la cuales no es obligatorio emplear la etiqueta final

<p>Parrafo que no tiene cierre

Las etiquetas pueden incluir atributos que modifican su comportamiento, especificando alguna característica singular del elemento o incluyendo información adicional

Los atributos se especifican como pares atributo=’valor’, separados por espacios dentro de la etiqueta de inicio

No es obligatorio que los valores estén encerrados entre comillas, pero sí es recomendable

Pueden utilizarse comillas simples o dobles indistintamente, siempre que coincidan su apertura y cierre

<div id='box'>texto</div>

En el ejemplo se ha utilizado el atributo id, el cuál es genérico para cualquier etiqueta y que nos será de utilidad cuando usemos CSS y Javascript, ya que nos permite distinguir de forma única el elemento al que pertenece esa etiqueta concreta

Existen más atributos genéricos, como por ejemplo class, title o style, todos ellos muy útiles cuando queramos dar formato o mejorar la accesibilidad a nuestros elementos

Cuando introducimos una etiqueta que no existe, esta será ignorada, debemos prestar atención a este asunto porque dificulta la detección de errores

Las etiquetas pueden escribirse en mayúsculas o en minúsculas

No se consideran los saltos de línea ni los espacios en blanco extras. Esto último permite indentar el código para hacerlo más legible

Comentarios dentro del HTML

A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, nos pueden servir para recordar posteriormente lo que fue hecho, y que no queremos que se vea en pantalla

Esto se consigue encerrando dichos comentarios entre estos dos símbolos:

<!-- Esto es un comentario al código que no se verá en pantalla -->

Los comentarios se pueden utilizar en cualquier parte del documento HTML, pero no se verá en pantalla

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página web de ejemplo</title>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <h1><center>Listado de aficiones</center></h1>
        <!-- Ejemplo de los tres tipos de listas -->
        <h3><b>aficiones</b> (sin un orden particular)</h3>
        <ul>
            <li>Cine</li>
            <li>Deporte</li>
            <li>Natación</li>
            <li>Música</li>
        </ul>
        <br/><br/>
        <h3><b>Prioridades</b> en cuanto a música <i>(con orden)</i></h3>
        <ol>
            <li>Rock</li>
            <li>Jazz</li>
            <li>Clásica</li>
        </ol>
        <dl>
            <dt><tt>Rock</tt>
                <dd>Baile de pareja que se ejecuta con esta música</dd>
            </dt>
            <dt><tt>Jazz</tt>
                <dd>Música derivada de melodías afronorteamericanas</dd>
            </dt>
            <dt><tt>Clásica</tt>
                <dd>Música instrumental para conjunto</dd>
            </dt>
        </dl>
        <br/><br/>
        <!-- Ejemplo de cita -->
        <blockquote>No por mucho madrugar amanece mas temprano</blockquote>
        <br/><br/>
        <!-- Ejemplo de fórmula matemática, el teorema de Thales -->
        a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup>
        <br/><br/>
        <!-- Ejemplo de fórmula matemática, símbolo del agua -->
        H<sub>2</sub>O
    </body>
</html>

Caracteres especiales

Hay ciertos caracteres que un navegador no es capaz de reconocer a pesar de utilizar la codificación correcta

Imaginemos que queremos escribir el texto x > y dentro de nuestro HTML, sin embargo, el carácter > no será reconocido por el navegador o nos mostrará uno erróneo

Esto ocurre con un conjunto de caracteres que son especiales y que el navegador reconocerá utilizando la etiqueta específica de ese carácter con el siguiente formato &etiqueta;

En el ejemplo anterior, la etiqueta para el carácter > es gt, empezando por & y terminando por ;

En la siguiente web podremos consultar la lista completa de los 256 caracteres universales HTML

Cabecera de una página Html

La cabecera está delimitada por el elemento head (que a su vez está contenido dentro del elemento html), en ella se describe información del documento (titulo, configuración, scripts y estilos)

Se coloca información del documento, que no se verá en la pantalla principal y puede ser:

• Título del documento
• Metadatos
• Enlaces a otros archivos
• Scripts
• Estilos

Título del documento

El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su agenda de direcciones (bookmark)

Esta etiqueta es obligatoria y que debe aparecer sólo una vez en nuestro documento

El navegador la visualizará en la barra de título de su ventana

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
    </head>
</html>

En el ejemplo se ha introducido la palabra página acentuada y como todavía no se ha introducido el código de caracteres podría mostrar caracteres extraños, asegúrese introducir la etiqueta de caracteres especiales para evitarlo

Metadatos

Los metadatos son elementos introducidos con la etiqueta meta, el tipo de metadato se define mediante sus atributos, algunos de los más habituales son:

• charset

  indica la codificación en la cual está escrito el documento

  Es importante que introduzcamos la codificación correcta para que el navegador visualice el documento correctamente

  <html>
      <head>
  <!-- Inserted by miarroba -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
  <script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
  <!-- Inserted by miarroba -->
          <meta charset='utf-8'>
      </head>
  </html>

  En este ejemplo se ha usado la codificación UTF-8 que es la estándar para internet

• author

  indica quien es el autor de la página, se especifica con los atributos name y content

  <html>
      <head>
  <!-- Inserted by miarroba -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
  <script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
  <!-- Inserted by miarroba -->
          <meta name='author' content='Sergio Cárcamo García' />
      </head>
  </html>

• keywords y description

  Ambas hacen referencia al contenido de la página y suelen ser usadas por los motores de búsqueda para indexar las páginas web

  Gracias a estos campos, que se especifican con los atributos name y content, los buscadores saben que términos de búsqueda describen mejor nuestra página web para mostrarsela al resto de usuarios

  <html>
      <head>
  <!-- Inserted by miarroba -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
  <script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
  <!-- Inserted by miarroba -->
          <meta name='keywords' content='Desarrollo web, html, css, javascript' />
          <meta name='description' content='Informática, conjunto de conocimientos científicos y de técnicas que hacen posible el tratamiento automático de la información por medio de ordenadores' />
      </head>
  </html>

Enlaces a otros archivos

En la cabecera podemos indicar enlaces a otros archivos que queremos cargar junto con nuestra página web, para ello utilizamos la etiqueta link

Generalmente serán hojas de estilo CSS, archivos JavaScript, librerias adicionales en otros lenguajes o nuestros propios archivos

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel='stylesheet' id='twentyfourteen-style-css' type='text/css' href='/wp-content/themes/twentyfourteen/style.css'  />
        <link rel='alternate' hreflang='es' href='/?lang=es' />
        <link rel='alternate' hreflang='en' href='/?lang=en' />
        <link rel='alternate' hreflang='x-default' href='/?lang=es' />
    </head>
</html>

En el ejemplo se ha incluido la hoja de estilo CSS del tema twentyfourteen de wordpress, para ello se han usado los atributos:

• rel

  para indicar que tipo de documento es, en este caso una hoja de estilo

• id

  para asignarle un identificador único

• type

  para indicar el tipo de texto que el navegador recibirá, en este caso una hoja de estilo CSS

• href

  es la ruta relativa del documento o su ruta absoluta

En el ejemplo también se ha incluido una especificación para definir varios idiomas, los cuales utilizará el buscador para indexar usando correctamente el idioma en el que está escrita la página, para ello se han usado los atributos:

• rel

  para indicar que tipo de documento es, en este caso una referencia para multisitio en varios idiomas

• hreflang

  para asignarle un idioma, en este caso es para español en para ingles y x-default para el idioma por defecto para la página de inicio

• href

  es la ruta relativa del documento o su ruta absoluta, en este caso se le añade el parámetro lang, empezando por ? para indicar las siglas del idioma

Scripts

El elemento script permite incluir código ejecutable en nuestra página web

Por defecto, el navegador tomará JavaScript como el lenguaje por defecto a ejecutar, si no especificamos otro

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script type='text/javascript'>
            //Código Javascript
        </script>
        <noscript>
            <p>Esta página requiere el uso de Javascript</p>
            <p>Por favor, compruebe la configuración de su navegador</p>
        </noscript>
    </head>
</html>

En el ejemplo se ha tenido en cuenta el caso de que el navegador no pueda usar scripts, ya sea por ser antiguo o que el usuario lo haya bloqueado en su configuración

Para ello hemos usado el elemento noscript, que en este caso mostrará el texto en el navegador en vez de ejecutar el script

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js'></script>
    </head>
</html>

En el ejemplo se ha utilizado un fichero externo para incluir el código ejecutable, utilizando la ruta absoluta o relativa en el atributo src

En muchas páginas web no se realiza la inclusión de los scripts en el head, sino en el body

La razón para acelerar la carga del HTML, ya que al encontrar un fichero externo tiene que leerlo y ejecutarlo, deteniendo el proceso de carga del resto del HTML

Imaginemos que tenemos el servidor saturado por la carga de los scripts, el usuario no recibiría nada del HTML y por tanto no vería la página, sólo una página en blanco

Por esta razón, algunos desarrolladores incluyen los scripts al final del documento, al final del elemento body

Como normalmente los scripts se encargan de la interacción con el usario, no es demasiado grave que haya una pequeña demora para empezar a ver las animaciones, enviar formularios, etc

Es más fácil para los usuarios si pueden ver el contenido y luego pueden interactuar con él

Estilos

El elemento style permite definir propiedades de estilos que se aplicarán a lo largo del documento

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type='text/css'>
            p {
                  font-family: Arial;
                  font-size: 10pt;
                  color: rgb{0, 0, 128};
                  text-indet: 15px;
                  text-aling: justify;
                  margin-left: 10px;
            }
        </style>
    </head>
</html>

Como se puede ver en el ejemplo, con este elemento generalmente se indica lo que se espera aplicar, aunque también podremos incrustarlos dentro del propio HTML

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type='text/css' href='/wp-content/themes/twentyfourteen/style.css'></style>
    </head>
</html>

También es posible utilizar una hoja de estilo externa, en este caso hemos utilizado la CSS del tema twentyfourteen de wordpress, especificando la ruta relativa o absoluta del archivo, en el atributo href

Cuerpo de una página Html

El cuerpo de una página HTML incluye los contenidos de la propia página web y se define con el elemento body

Existen gran cantidad de etiquetas que podemos usar en el body, a modo de consulta podemos usar este listado completo

Vamos a agrupar algunas de su etiquetas por:

• Estructura del documento

  cabecera, sección, navegación

• Estructura del texto

  títulos, parrafos, …

• Caracterización del texto

  texto enfatizado, fragmentos de código, …

Estructura del documento

Normalmente toda página web tiene una cabecera de título, algún tipo de barra lateral de navegación, un contenido principal y quizás un pie de página

Para conseguir esta estructuración se puede utilizar el elemento div mediante divisiones

Una división no puede insertarse dentro de una etiqueta de nivel inferior, como las de estructuración y caracterización de texto, pero sí que puede insertarse dentro de otro elemento div

Gracias a las hojas de estilo y a los atributos genéricos id y class daremos formato a esas agrupaciones

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            #cabecera  {
                  height: 10%;
                  background-color: lightblue;
            }

            #nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            #contenido  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            #aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            #pie  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <div id='cabecera'>Esta es la cabecera</div>
         <div id='nav'>Barra de navegación</div>
         <div id='principal'>
             <div id='contenido'>Contenido</div>
             <div id='aside'>Barra lateral</div>
         </div>
         <div id='pie'>Este es el pie de la página</div>
</html>

La estructura de la web de ejemplo es bastante estándar y las divisiones que acabamos de ver se repiten constantemente

Por eso a partir de HTML5 se añadieron una serie de divisiones con significado para poder indicar más fácilmente como estructuramos la web

Elementos de estructura semántica

Estos elementos son análogos a las divisiones, pero además llevan asociado un significado relacionado con la estructura

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            header  {
                  height: 10%;
                  background-color: lightblue;
            }

            nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            article  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            footer  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <header>Esta es la cabecera</header>
         <nav>Barra de navegación</nav>
         <div id='principal'>
             <article>Contenido</article>
             <aside>Barra lateral</aside>
         </div>
         <footer>Este es el pie de la página</footer>
</html>

En el ejemplo podemos ver que hemos podido sustituir algunas divisiones por una etiqueta equivalente

Algunas de las etiquetas de estructuración semántica más importantes son:

• header

  representa la cabecera de un documento o sección

  Debe usarse para contener información introductoria

  Puede haber más de uno en el documento

• footer

  representa el cierre de un documento o sección

  Suele contener información sobre el autor, copyright, términos de uso, información de contacto, etc

• nav

  representa la sección que contiene los enlaces de navegación por el sitio web

• section

  define una sección del documento

• article

  representa un contenido independiente y autocontenido

  Por ejemplo los post de un blog, noticias, comentarios, etc

• aside

  define contenido que se encuentra fuera de lugar en el que está contenido

  Como por ejemplo una barra lateral

  Suele estar relacionado con el elemento que contiene

• figure

  define un elemento independiente como una imagen, un fragmento de código, un diagrama, etc

  Suele estar relacionado con el elemento que contiene, pero su posición es independiente del mismo

• figcaption

  es el título o leyendo de un elemento figure

  Se suele poner como primer o último elemento del mismo

• details

  representa una serie de detalles adicionales que el usuario puede ocultar

Elementos de estructuración del texto

Las etiquetas de estructuración del texto sirven para definir los encabezados de las secciones y los parrafos

Entre las etiquetas de bloque destacamos las siguientes:

• p

  contiene el texto de un párrafo

  El navegador no muestra los espacios en blanco ni los saltos de línea adicionales que escribamos dentro del párrafo

  <p>Información a mostrar</p>

• hN

  define los encabezados de las secciones (hay 6 niveles, dónde N es de 1 a 6)

  Pueden configurarse cómo se visualizan los encabezados a través de CSS

  Normalmente se utiliza una fuente mayor cuanto más alto sea el nivel, siendo h1 el de mayor nivel

  Cambiando el número se pueden conseguir distintos efectos visuales al cambiar el tamaño de la letra

  Estos elementos se usan para estructurar el documento en secciones, subsecciones, etc

  <h1>Sección 1</h1>
  
  <h2>Sección 2</h2>
  
  <h3>Sección 3</h3>
  
  <h4>Sección 4</h4>
  
  <h5>Sección 5</h5>
  
  <h6>Sección 6</h6>

• pre

  contiene un párrafo con texto preformateado, es decir, que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (Courier)

  Tiene en cuenta los espacios en blanco y los saltos de línea adicionales

  Puede ser útil para escribir párrafos con ejemplos de código fuente

  <pre>
  Texto
       Texto con tabulación
  
  Simulación de tabla
  
  columna1    columna2    columna3   columna4
  fila11       fila12     fila13     fila14
  fila21       fila22     fila23     fila24
  </pre>

  En el ejemplo hemos simulado una tabla, aunque para esa tarea es aconsejable usar mejor la etiqueta para tablas

  Se pueden simular otros tipos de elementos, ya que el texto se tomará de forma literal, pero es recomendable usar sus etiquetas específicas, siempre que estas existan

  Con lo que obtendremos:

  Texto
       Texto con tabulación
  
  Simulación de tabla
  
  columna1    columna2    columna3   columna4
  fila11       fila12     fila13     fila14
  fila21       fila22     fila23     fila24
  

• blockquote

  se usa para incluir citas, que pueden contener varios párrafos u otros elementos

  Genera márgenes a izquierda y derecha, aunque se recomienda definir el formato deseado mediante una hoja de estilo

  <blockquote cite='Don Quijote de la Mancha'>
  <p>En un lugar de la mancha de cuyo nombre no quiero acordarme...</p>
  </blockquote>

  En el ejemplo se ha utilizado el atributo cite para indicar el origen de la cita, en este caso la novela de Don Quijote de la Mancha, ya que hemos citado un párrafo del principio de la novela

  Con lo que obtendremos:

  En un lugar de la mancha de cuyo nombre no quiero acordarme…

• tt

  conseguimos que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter)

  No preformatea el texto, sino que únicamente cambia su apariencia

  <tt>A veces... veo muertos</tt>

  En el ejemplo se ha escrito un párrafo y le hemos dado el aspecto de los caracteres de una máquina de escribir

  Con lo que obtendremos:
  A veces... veo muertos

Elementos de caracterización del texto

Se utilizan generalmente dentro de los párrafos

Sirven para definir el formato del texto, aunque gracias a las hojas de estilo, cada vez se utilizan menos

Se mantienen por compatibilidad con versiones antiguas de HTML, entre las más importantes destacamos:

• br

  añade un salto de línea sin cambiar de párrafo

  No tiene etiqueta de cierre

  <p>A veces...<br/>veo muertos</p>

  En el ejemplo se ha escrito un párrafo y dentro del mismo hemos usado el salto de línea

  Con lo que obtendremos:

  A veces…
  veo muertos

• nbsp

  no es una etiqueta, sino más bien una forma de añadir espacios en blanco adicionales para que el navegador los reconozca

  Si queremos forzarle a que lo haga, debemos poner el código nbsp (non-breaking space)

  <p>A veces... &nbsp;veo muertos</p>

  En el ejemplo se ha escrito un párrafo y dentro del mismo hemos añadido un espacio en blanco, pero hemos forzado la aparición de otro adicional

  Con lo que obtendremos:

  A veces…  veo muertos

• center

  permite centrar un elemento, ya sea un párrafo, un texto, una imagen, etc

  Algunos navegadores más antiguos no lo soportaban, aunque actualmente se usa poco ya que muchos elementos incluyen un atributo similar que lo sustituye

  Otra causa de su desuso es porque es posible simularlo mediante hojas de estilo

  <p><center>A veces... veo muertos</center></p>

  En el ejemplo se ha escrito un párrafo y hemos forzado su centrado

  Con lo que obtendremos:

  A veces… veo muertos

• hr

  se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo

  No tiene etiqueta de cierre

  <p>A veces... veo muertos<hr/>
  En un lugar de la mancha de cuyo nombre no quiero acordarme...</p>

  En el ejemplo se ha escrito un párrafo y hemos añadido una raya horizontal para separarlo para simular que hay dos párrafos

  Con lo que obtendremos:

  A veces… veo muertos

  ---

  En un lugar de la mancha de cuyo nombre no quiero acordarme…

• sup

  sirve para obtener una fórmula matemática que incluya un índice

  m<sup>2</sup>

  En el ejemplo se ha escrito un texto con una fórmula matemática en la cual le hemos asignado el índice 2

  Con lo que obtendremos:
  m²

• sub

  sirve para obtener una fórmula matemática que incluya un subíndice

  m<sub>2</sub>

  En el ejemplo se ha escrito un texto con una fórmula matemática en la cual le hemos asignado el subíndice 2

  Con lo que obtendremos:
  m₂

• italic

  pone el texto en cursiva

  Se puede usar su forma corta i, ya que es equivalente

  <i>A veces... veo muertos</i>

  En el ejemplo se ha escrito un texto en cursiva

  Con lo que obtendremos:
  A veces… veo muertos

• em

  indica que se va a enfacitar el texto, normalmente se pone el texto en cursiva, aunque si usamos una hoja de estilo podemos elegir de qué forma será enfacitado

  <em>A veces... veo muertos</em>

  En el ejemplo se ha escrito un texto enfacitado

  Con lo que obtendremos:
  A veces… veo muertos

• bold

  pone el texto en negrita

  Se puede usar su forma corta b, ya que es equivalente

  <b>A veces... veo muertos</b>

  En el ejemplo se ha escrito un texto en negrita

  Con lo que obtendremos:
  A veces… veo muertos

• strong

  indica que se va a enfacitar más el texto, normalmente se pone el texto en negrita, aunque si usamos una hoja de estilo podemos elegir de qué forma será enfacitado

  <strong>A veces... veo muertos</strong>

  En el ejemplo se ha escrito un texto con mayor énfasis

  Con lo que obtendremos:
  A veces… veo muertos

• code

  incrusta código en medio de un párrafo de manera similar a pre, pero sin crear margenes a izquierda y derecha

  <p>A veces...<code>&nbsp;</code>veo muertos</p>

  En el ejemplo se ha escrito un párrafo con el carácter especial de espacio en blanco, pero al incrustarlo como código, en la página se visualizará de forma literal

  Con lo que obtendremos:

  A veces… veo muertos

Listas en Html

A menudo nos interesará presentar las cosas en forma de listas, ya que permiten hacer enumeraciones de elementos, usando una numeración o no, también crear definiciones de términos

Podemos escoger entre tres tipos distintos:

• Listas numeradas

  sirven para crear una lista con números

• Listas con viñetas

  sirven para crear una lista con símbolos o viñetas, no están numeradas

• Listas de definiciones

  sirven para crear definiciones de términos, no están numeradas y pueden usarse para simular diccionarios

Listas numeradas

Las listas numeradas (ordered lists) sirven para presentar cosas en un orden determinado

En la lista resultante aparecerá automáticamente un número correlativo para cada elemento:

<ol start='3'>
    <li type='a'>Mamíferos</li>
        <li type='a'>Peces
            <ol>
                <li type='a'>Sardina</li>
                <li type='a'>Bacalao</li>
            </ol>
        </li>
        <li type='a' value='8'>Aves</li>
</ol>

En el ejemplo se puede ver que la lista ordenada empieza con el elemento ol incluidos en su interior la lista de elementos li

Se ha usado el atributo type para especificar qué tipo de numeración queremos usar:

• 1

  utiliza valores numéricos

• a

  utiliza letras en minúscula

• A

  utiliza letras en mayúscula

• i

  utiliza números romanos en minúscula

• I

  utiliza números romanos en mayúscula

Si no se especifica, el valor por defecto es 1

Se ha usado el atributo start para especificar a partir de qué número empieza la numeración, en este caso empieza a partir del número 3

Se ha usado el atributo value para especificar un valor concreto para ese elemento, en este caso el número 8

En el ejemplo también podemos observar que listas con numeradas pueden anidarse

Quedando como resultado:

3. Mamíferos
4. Peces
   1. Sardina
   2. Bacalao
8. Aves

Listas con viñetas

Las listas con viñetas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número

En la lista resultante aparecerá automáticamente el símbolo o viñeta elegidos con el atributo:

<ul>
    <li>Mamíferos</li>
        <li>Peces
            <ul>
                <li type='square'>Sardina</li>
                <li type='square'>Bacalao</li>
            </ul>
        </li>
        <li>Aves</li>
</ul>

En el ejemplo se puede ver que la lista ordenada empieza con el elemento ul incluidos en su interior la lista de elementos li

Se ha usado el atributo type para especificar qué tipo de viñeta queremos usar:

• circle

  utiliza un círculo

• disc

  utiliza un círculo con el interior hueco

• square

  utiliza un cuadrado

Si no se especifica, el valor por defecto es circle

En el ejemplo también podemos observar que listas con viñetas pueden anidarse y además se han usado distintos tipos de viñetas para distinguir entre ellas

Quedando como resultado:

• Mamíferos
• Peces
  • Sardina
  • Bacalao
• Aves

Listas de definiciones

Las listas de definición son apropiadas para glosarios (o definiciones de términos)

Gracias a este tipo de lista, pueden construirse sencillos diccionarios

<dl>
   <dt>Sardina
      <dd><p>Pez osteíctio del orden clupeiformes (Sardina pilchardus) del Mediterráneo y del océano Atlántico</p>
<p>De unos 25 cm. de longitud, verde azulado en el dorso, plateado en los flancos y en el vientre</p>
<p>Se consume fresco o en conserva</p></dd>
   </dt>
   <dt>Bacalao
      <dd>Pez marino osteíctio del orden gadiformes (Gadius callarias) que alcanza más de un metro de longitud</dd>
   </dt>
</dl>

En el ejemplo se puede ver que la lista de definiciones que empieza con el elemento dl incluidos en su interior la lista de elementos dt que representan la cosa a definir y los elementos dd que representan la definición de la cosa a definir

En el ejemplo no se ha incluido, pero también podemos anidar listas de definiciones

Quedando como resultado:

Sardina

Pez osteíctio del orden clupeiformes (Sardina pilchardus) del Mediterráneo y del océano Atlántico

De unos 25 cm. de longitud, verde azulado en el dorso, plateado en los flancos y en el vientre

Se consume fresco o en conserva

Bacalao

Pez marino osteíctio del orden gadiformes (Gadius callarias) que alcanza más de un metro de longitud

Enlaces

Los enlaces, hipervínculos o hiperenlaces permiten al usuario explorar de manera no secuencial, otras páginas web externas repartidas por todo el mundo por medio de enlaces hipertexto o partes de la misma web

Para ello utilizamos el elemento a que es un ancla (anchor)

<a href='index.html'>Página de inicio</a>

En ejemplo se ha enlazado con la página inicial de esta web dónde el atributo href es el destino del enlace (es aconsejable usar las comillas (simples o dobles) para que el navegador entienda que es de tipo texto) y el texto dentro del elemento es el texto indicativo que aparecerá en la pantalla del enlace (con un color especial y generalmente subrayado)

Quedando como resultado:

Página de inicio

Se pueden distinguir tres tipos de enlaces:

• Con dirección absoluta
• Con dirección relativa
  • Dentro de la misma página
  • Dentro de nuestra web
  • Fuera de nuestra web
• Correo electrónico

Con dirección absoluta

Si queremos enlazar con nuestra página u una página que esté fuera de la nuestra (es decir, que esté en un servidor distinto del que la tenemos alojada)

Es necesario conocer su dirección completa, o URL (Uniform Resource Locator)

El URL podría ser, además de la dirección de una página de Internet, una dirección de ftp, gopher u otro servicio de internet

El destino del enlace será en estos casos la página inicial o por defecto de esa página web, que normalmente será por defecto index.html, index.htm, index.php o index.asp, dependerá del lenguaje utilizado al escribir la página web

Por esa razón podremos omitir esa página de inicio y depende cómo esté configurado el servidor obtendremos la respuesta deseada o un error de tipo 404 de dirección incorrecta

<a href='https://www.microsoft.com/' target='_blank' rel="noopener noreferrer">Página inicial de Microsoft</a>

En el ejemplo se ha enlazado con la página inicial de Microsoft mediante el URL de web segura HTTPS y se ha usado el atributo target con el valor _blank para indicarle al navegador que nos abra una nueva ventana con la página enlazada, así podremos ver ambas páginas sin perder el contenido que estábamos visualizando previamente

Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores son capaces de distinguirlas y pueden no reconocer la dirección que hemos escrito, devolviendonos el ya citado error 404 de dirección incorrecta)

También se ha utilizado el atributo rel con los valores noopener y noreferrer para que no sea guardada en la caché del navegador

Quedando como resultado:

Página inicial de Microsoft

Con dirección relativa

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, entre ellas mismas o con otras externas que a su vez están conectadas consigo mismas y con otras externas

Dentro de la misma página

A veces, en el caso de páginas muy extensas, nos puede interesar dar un salto desde una posición a otra determinada

El destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por una marca (la palabra marca puede ser cualquier palabra que queramos, pero precedida del símbolo #)

Esta palabra (o palabras, ya que podemos utilizar más de una separadas con _) aparecerán en pantalla coloreada (en forma de hipertexto y si usamos una hoja de estilo CSS puede ser modificada según nuestras necesidades)

<a href="#final">Pulsa para ir al final</a>

En el ejemplo se ha creado un enlace al final de esta misma página, al cuál podremos saltar hasta la etiqueta que hemos llamado final si pulsamos en el enlace

Para que funcione correctamente, también debe existir el enlace final, sino el navegador ignorará el enlace porque no sabrá a donde saltar

<a name="final">Al final</a>

En el ejemplo tenemos el enlace que deberemos incluir, en la posición que queremos que se salte, para ello se ha utilizado el atributo name, con el valor elegido pero sin usar el símbolo #

Quedando como resultado:

Pulsa para ir al final

Dentro de nuestra web

También podemos ir a otra página de nuestra web alojada a nuestro servidor

<a href="/?p=2398&lang=es">Listas</a>

En el ejemplo se ha enlazado con la página dentro de esta web que habla de la listas, hemos incluido en el atributo href la dirección relativa y unos parámetros, que van precedidos del símbolo ? y tienen el formato de variable=’valor’ y si tenemos más de uno, se separan con el símbolo &

Quedando como resultado:

Listas

<a href="/?p=2398&lang=es#Listas_con_viñetas">Listas con viñetas</a>

En el ejemplo se ha enlazado con un lugar concreto de la página de listas, en concreto la que habla del listado con viñetas

Para ello, se ha utilizado el sistema de marcas explicado anteriormente

Quedando como resultado:

Listas con viñetas

En los ejemplos anteriores estábamos suponiendo que la página en la que escribimos la etiqueta y la página a la que queremos saltar estaban en el mismo directorio

Ya que pudiera ocurrir que hemos organizado el sitio Web con un directorio principal y subdirectorios auxiliares que cuelgan del mismo

Si la página a la que quiero saltar está en el subdirectorio subdir, entonces en el atributo href deberíamos haber escrito /subdir/pagina.html, indicando la ruta completa desde el directorio raíz hasta la página pagina.html

Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en el atributo href deberíamos haber escrito ../pagina.html

En este caso, los dos puntos indican al navegador que se dirija al directorio anterior

Se debe utilizar el símbolo / para indicar los subdirectorios si se está trabajando con un servidor Unix, y el símbolo \, si se está trabajando con un servidor Windows, ya que el sistema de directorios se trata de distinta forma

Si queremos evitarnos las complicaciones derivadas de tener tanto subdirectorio, podemos guardarlo todo en el directorio raíz o en un único directorio

Sin embargo, esta práctica tiene el inconveniente de que todo esté más desordenado y si en un futuro queremos realizar modificaciones sea más complicado de encontrar los contenidos, que si lo hubiéramos ordenado por subdirectorios específicos con un nombre que sea descriptivo sobre su contenido

Fuera de nuestra web

Se aplica lo explicado anteriormente para las direcciones absolutas y dentro de nuestra web, pero esta vez los enlaces no estarán alojados en nuestro servidor, sino en uno externo

Correo electrónico

Si queremos que nuestros usuarios se pongan en contacto con nosotros podemos incluir nuestra dirección de correo electrónico en un enlace

<a href="mailto:edrunner1@hotmail.com">edrunner1@hotmail.com</a>

En el ejemplo se ha incluido dentro del atributo href la palabra reservada mailto seguida de dos punto junto con la dirección de correo electrónico del administrador de esta web

También se ha repetido la misma dentro de la etiqueta para que el usuario sepa que el enlace pertenece a un correo electrónico, de este modo reconocerlo fácilmente, aunque podría haberse usado un mensaje descriptivo o la imagen de un buzón (una metáfora que el usuario podría relacionar con el correo), por ejemplo

Quedando como resultado:

edrunner1@hotmail.com

Al pinchar el enlace veremos que el navegador intentará abrir el programa que tenga asociado para la gestión del correo, con la dirección del destinatario ya rellenada, que es la que aparecía en el enlace

También podemos añadir otros valores que serán usados por el gestor de correo utilizando palabras reservadas que van precedidas del símbolo ? y tienen el formato de variable=’valor’ y si tenemos más de uno, se separan con el símbolo &

Entre las más destacadas tenemos:

• subject

  es el usuario destinatario del correo, por defecto será Feedback

• cc

  simula una copia en carboncillo (Carbon Copy) se utiliza en caso de haber más de un destinatario, deberíamos indicarlos aquí separándolos con el símbolo ;

  Los destinatarios serán capaces de ver quienes son el resto de destinatarios

• bcc es similar a la copia en carboncillo (Carbon Copy)

  En este caso la copia está oculta y los destinatarios no serán capaces de ver quienes son el resto de destinatarios

• body

  es el texto del correo en sí, el gestor de correo podría ignorarlo o añadirle algo, como un mensaje de despedida o una firma, así que no siempre será igual al que nosotros hayamos escrito en el enlace

Final

Esta es la marca de final (no contiene un enlace real ya que es una referencia de enlace, pero como tiene texto, aparecerá subrayado como si lo fuera) para el ejemplo anterior del sistema de marcas explicado anteriormente

Imágenes en Html

Las imágenes de una página web son conocidas como mapas de bits y pueden representar iconos, botones, imágenes con zonas transparentes o fotografías

Dependiendo del nivel de compresión utilizado perderemos calidad, por eso debemos saber elegir el formato más adecuado a nuestras necesidades:

• png

  es un formato de compresión sin pérdida que además soporta transparencias

  Podemos representar iconos o imágenes con zonas transparentes por lo que es una buena alternativa para cualquier tipo de imagen que no sea una fotografía

• jpg o jpeg

  es un formato de compresión con pérdida que no soporta transparencias

  Se usa normalmente para fotografías

• gif

  es un formato de compresión sin pérdida, pero está limitado a 256 colores

  Ocupa muy poco espacio y es idóneo para imágenes con poca calidad, como por ejemplo los iconos o botones

  Soporta transparencias y animaciones

Al igual que ocurre con la edición del HTML, necesitamos de un editor de imágenes para su manipulación

Existen editores comerciales y muy potentes como Photoshop, pero tambien podemos utilizar editores con una calidad similiar y de código libre como GIMP

Tambien tenemos la posibilidad de usar alguna herramienta que permita convertir entre los distintos formatos, como ImageMagick

El elemento para incluir imágenes en nuestra página web es img al cuál deberemos incluirle al menos el atributo src al que le indicaremos al navegador, mediante la ruta relativa o absoluta, el nombre de la imagen y mediante su extensión, el formato de la misma

<img src='/wp-content/uploads/2016/04/palmeras.jpg' width='1260' height='240' alt="Web sobre Informática de Secarcam" />

En el ejemplo podemos ver que además del atributo src hemos utilizado width que nos permite especificar el ancho de la imagen

El atributo height que permite especificar la altura de la imagen

Y el atributo alt que introduce una descripción (una palabra o una frase breve) sobre la imagen

En principio se puede omitir, pero es beneficioso para aquellos que accedan a la página con un navegador en forma de sólo texto, ya que no serán capaces de ver la imagen, pero al menos podrán hacerse una idea sobre ella gracias a esa descripción

Quedando como resultado:

Se pueden capturar las imágenes que nos muestra el navegador, con objeto de guardarlas permanentemente en nuestro disco duro

Desde el navegador, pulsamos sobre la imagen con la tecla derecha del ratón, nos aparecerá un menú en el que está la posibilidad de guardar la imagen en el directorio del disco duro que le indiquemos

En caso de que no nos interese que los usuarios puedan guardar las imágenes de nuestra web deberemos utilizar alguna técnica para evitar la pulsación de la tecla derecha del ratón mediante Javascript

Imagen usada como enlace

En algunos casos, también se utiliza una imagen como enlace a otra página

Con respecto a la localización del fichero de la imagen, se usa igual que como un enlace. Si no se indica nada especial, quiere decir que el fichero está en el mismo directorio que el documento HTML que estamos escribiendo

Se puede cargar una imagen que no esté en nuestro sistema siguiendo el mismo método que con los enlaces, se indica en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede ocasionar un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello

<a href='/wp-content/uploads/2016/04/palmeras.jpg'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' /></a>

En el ejemplo se ha usado un thumbnail (reproducción en miniatura de la imagen), que hace de enlace a la imagen en su verdadero tamaño

De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar

Otra manera de conseguirlo es reducirla con un editor de imágenes a 150×75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande

Esta sería una solución si utilizamos una versión muy antigua de Netscape, ya que no reconocía los atributos width y height

Quedando como resultado:

<a href='index.html'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' border='0' /></a>

En el ejemplo se ha usado la imagen para redirigirnos a la página de inicio, así podemos enlazar la imagen con la página deseada

También podemos usar iconos, botones o animaciones para realizar esta tarea

En el ejemplo también hemos usado el atributo border con el valor 0 porque sinó la imagen estará rodeada de un rectángulo del color normal de los enlaces, de esta manera, evitamos que aparezca ese rectángulo

Quedando como resultado:

Posicionando el cursor sobre esta imagen, comprobamos que actúa también como enlace aunque carezca del rectángulo de color. Esto puede resultar más estético, aunque se corre el riesgo de que el usuario no se dé cuenta de que la imagen sirve de enlace

Posición del texto con respecto a la imagen

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades

La más sencilla es colocarla entre dos párrafos, con el texto a un lado

Utilizando hojas de estilo CSS se pueden conseguir efectos más elaborados, como animaciones, movimiento, rotaciones, etc

Para escoger la posición del texto con respecto a la imagen se utilizaba el atributo align y permitía las siguientes posibilidades:

• top

  el texto aparece alineado arriba

• middle

  el texto aparece alineado en medio

• bottom

  el texto aparece alineado abajo

Este atributo ya no es soportado en HTML5 y se ha incluido el ejemplo por compatibilidad con versiones anteriores, es recomendable utilizar una hoja de estilo para obtener este efecto o utilizando el elemento div

<div align='top'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado arriba</img></div>
<div align='middle'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado en medio</img></div>
<div align='bottom'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado abajo</img></div>

En el ejemplo se ha optado por usar el elemento div

Quedando como resultado:

Texto alineado arriba

Texto alineado en medio

Texto alineado abajo

Elementos multimedia en HTML

Los elementos multimedia que ofrece HTML5 permiten añadir audio y vídeo a una web, e incluso acceder a la cámara del PC o de dispositivos móviles para grabar vídeos o hacer fotografías

Durante muchos años estos elementos fueron demandados por los desarrolladores, ya que únicamente era posible reproducir elementos multimedia mediante plugins o addons que debían estar previamente instalados en el navegador

A partir del estándar HTML5 fueron incluidos los elementos:

• video

  incrusta un vídeo en la página web

• audio

  incrusta un clip de audio en la página web

La única restricción es que sólo podemos referenciar un archivo (para lo que usaremos su atributo src)

Pero permite incluir más de un formato de codificación (para lo que usaremos elementos source)

La inclusión de los elementos source es debido a las incompatibilidades entre los formatos de codificación de audio o vídeo admitidos por cada navegador, ya que debido a las distintas licencias, todavía no hay un estándar claro para internet

Actualmente, los formatos de audio más compatibles con los navegadores son:

• WAV

  también conocido como WAVE es un formato de audio digital sin compresión de datos

  Fue desarrollado por Microsoft e IBM

• OGG

  es el contenedor utilizado por los codecs digitales con pérdida:

  • Opus

    es un formato de código abierto

    Está estandarizado por el Internet Engineering Task Force (IETF)

  • Vorbis

    es un formato de código abierto

    Fue desarrollado por Xiph.org

• MP3

  formato de compresión de audio digital

  Fue desarrollado por Moving Picture Experts Group (MPEG)

• AAC

  también conocido como Advanced Audio Coding es un codec digital con perdida

  Sigue el estándar internacional ISO/IEC 13818-7 como una extensión del MPEG-2

  Es muy utilizado en dispositivos Apple

Mientras que para vídeo:

• MP4

  archivos con el formato MPEG 4 con el codec de vídeo H264 y el codec de audio AAC

• WebM

  archivos con el formato WebM con el codec de vídeo VP8 y el codec de audio Vorbis

• Ogg

  archivos con el formato Ogg con el codec de vídeo Theora y el codec de audio Vorbis

Audio

<audio controls>
    <source src='Amaral - Hacia lo salvaje.wav' type='audio/wav'>
    <source src='Amaral - Hacia lo salvaje.ogg' type='audio/ogg'>
    <source src='Amaral - Hacia lo salvaje.mp3' type='audio/mp3'>
    <source src='Amaral - Hacia lo salvaje.aac' type='audio/aac'>
    Tu navegador no soporta el formato de audio utilizado por esta canción
</audio>

En el ejemplo se ha referenciado la canción del grupo Amaral, Hacia lo salvaje, para ello se han utilizado cuatro elementos source

Se le ha indicado al navegador mediante el atributo src dónde puede localizar el archivo y su extensión y con el atributo type se le ha indicado qué tipo de archivo debe reproducir

En el ejemplo sólo se ha referenciado los tipos WAV, OGG, MP3 y AAC, pero podrían referenciarse varios archivos del mismo tipo pero con distintas calidades de audio

Dentro del elemento audio se ha incluido también un texto que será usado por defecto en el caso de que nuestro navegador no soporte ninguno de los tipos de audio indicados en los elementos source

En el ejemplo se ha utilizado el atributo controls, que es un atributo genérico que comparte con video

Entre los atributos más destacados para los elementos audio y vídeo tenemos:

• autoplay

  la reproducción comienza en el mismo momento de la carga de la página

• controls

  se añaden los controles de reproducción para que el usuario pueda controlarla

• loop

  el archivo se reproduce de forma continua, es decir, cuando acaba la reproducción, se inicia de nuevo desde el principio

Vídeo

<video controls autoplay>
    <source src='Joker.ogg' type='video/ogg'>
    <source src='Joker.mp4' type='video/mp4'>
    <source src="Joker.webm" type="video/webm">
    <object data="Joker.swf" type="application/x-shockwave-flash">
        <param value="Joker.swf" name="movie"/>
    </object>
    Tu navegador no soporta el formato de vídeo utilizado por esta película
</video>

El ejemplo para el elemento video es muy similar al visto anteriormente para el elemento audio con la excepción de que se ha incluido un elemento object

Este elemento permite que navegadores que no soportan HTML5 puedan reproducir un archivo mediante el plugin de flash

Esta opción puede ser útil con navegadores antiguos que aún usen versiones anteriores de HTML

Aunque Google ha decidido eliminar el soporte para flash en su navegador Chrome, para fomentar el uso las nuevas capacidades para vídeo de HTML5

En Chrome sólo se puede usar flash bajo demanda, indicándolo explícitamente en su configuración y para las páginas web que el usuario de permiso

Tablas en HTML

Las tablas permiten representar información tabular, en filas y columnas, con cabeceras. Cada elemento de la tabla puede ser simple, o una agrupación de filas, columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos

Como las tablas permiten un control muy detallado, a veces se usan para organizar la estructura general de una página web

Esta práctica no es recomendable, aunque era muy usada en el diseño hace algunos unos años

Es más recomendable utilizar elementos div para la estructura general de la página web

Una tabla se define mediante el elemento table

Las filas se definen con el elemento tr (table row)

Por cada fila se define una celda de elementos td (table data) para contener otros elementos, incluidas otras tablas (aunque no se recomienda, ya que puede obtenerse un resultado visualmente confuso)

<table>
    <tr>
        <td>Número</td>
        <td>Ordinal</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Primero</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Segundo</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Tercero</td>
    </tr>
    <tr>
       <td>4</td>
       <td>Cuarto</td>
     </tr>
     <tr>
        <td>5</td>
        <td>Quinto</td>
     </tr>
     <tr>
         <td>6</td>
         <td>Sexto</td>
     </tr>
     <tr>
         <td>7</td>
         <td>Séptimo</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Octavo</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Noveno</td>
    </tr>
</table>

En el ejemplo se han listado los números naturales del 1 al 9, rellenado con la primera fila una descripción y las siguientes con los datos

Quedando como resultado:

Spanning

En ocasiones necesitaremos combinar celdas, a esta práctica se la denomina spanning

Para agrupar o combinar celdas de una fila concreta (se aplican a elementos td), usaremos el atributo colspan asignandole como valor el número de celdas que serán usadas

<table>
    <tr>
        <td colspan='3'>Lenguajes</td>
    </tr>
    <tr>
        <td>HTML5</td>
        <td>CSS</td>
        <td>JavaScript</td>
    </tr>
</table>

En el ejemplo se han listado tres lenguajes y para resaltar la descripción se ha aplicado spanning sobre la primera fila

Quedando como resultado:

Para agrupar o combinar filas de una columna concreta (se aplican a elementos tr), usaremos el atributo rowspan asignandole como valor el número de filas que serán usadas

<table>
    <tr>
        <td rowspan='3'>Lenguajes</td>
        <td>HTML5</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
    </tr>
</table>

En el ejemplo se han listado tres lenguajes y para resaltar la descripción se ha aplicado spanning sobre la primera columna, obteniendo una tabla similar a la del ejemplo anterior pero con los valores colocados en la segunda columna

Quedando como resultado:

Elementos de una tabla

Para añadir complejidad a la tabla podemos añadir más elementos a la misma:

• caption

  es el título o leyenda de la tabla

  Se muestra fuera de la tabla, por defecto arriba de la misma

  Se suele poner normalmente después del elemento table

• thead

  sirve como cabecera de la tabla

• th

  son unas celdas especiales que se usan sólo dentro de la cabecera de la tabla

• tbody

  se suele usar después del elemento thead para distinguir la cabecera del cuerpo de la tabla

• tfoot

  sirve como pie de la tabla

  Curiosamente, debe definirse antes de definir un elemento tbody

<table>
    <caption>Números naturales del 1 al 9</caption>
    <thead>
        <tr>
            <th>Número</th>
            <th>Ordinal</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>10</td>
            <td>Décimo</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Primero</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Segundo</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Tercero</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Cuarto</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Quinto</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Sexto</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Séptimo</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Octavo</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Noveno</td>
        </tr>
    </tbody>
</table>

En el ejemplo se han aplicado todos los elementos que acabamos de definir, como puede apreciarse no hay mucha diferencia con la primera tabla que hemos puesto de ejemplo

Sin embargo, ahora todas sus partes están mejor localizadas y usando hojas de estilo CSS podemos darle un aspecto más atractivo para el usuario

En el ejemplo sólo se ha un valor más a la tabla que originalmente no existía

Gracias al elemento tfoot ahora tenemos la posibilidad de usando JavaScript, añadirle el resultado de cálculos o totales de los valores del resto de celdas

También podemos observar que las celdas dentro del elemento thead aparecen con un tamaño de fuente mayor y en negrita, porque son parte de la cabecera

Al igual que al inicio, gracias al elemento caption, tenemos una breve descripción de nuestra tabla

Quedando como resultado: