HTML
El cimiento de la Web

HTML 1

La primera versión responde a la pregunta cómo resolver la organización de la información hipervinculando sus contenidos, o sea, marcar un texto o un párrafo para vincularlo a su fuente. Ya existía internet, ya los militares habían soltado ARPANET para que las universidades y los centros de investigación pudieran compartir información. Ya se mandaban memos electrónicos, los email, ya se movían archivos de texto de un computador a otro y se podía chatear entre dos extremos diferentes de país. Los académicos vieron la oportunidad de compartir sus "papers" o sus investigaciones, con sus pares, y como buena investigación, necesitaba siempre citar las fuentes. Y así nace también la WWW (World Wide Web) como la gran red para hipervincular estos documentos que hoy conocemos como la Web.

Tim Berners-Lee, en los 80, propone destacar (Markup) el contenido con un lenguaje sencillo (Lenguaje) y hacer hipervínculos (Hyper text) entre "Papers" científicos, nace el primer HTML y con él, el primer navegador (browser) capaz de interpretar este lenguaje para darle un formato visualmente jerárquico que facilitara su lectura.

Nota:
El primer documento HTML se publica en 1991 y se llamaba "HTML tags", que describía el uso de las etiquetas (https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html). HTML tags

HTML 2

Pasan varios años antes de que HTML sea una estándar y el 95 se publica la primera revisión 2.0, más sencilla y simplificada.

Todavía no existían las tablas, y los computadores seguían siendo terminales, sólo que ahora de color Ambar.

Es la época en que programadores de JAVA deciden crear pequeños programas encapsulados que se podían incrustar dentro del código para generar animaciones o interacciones más entretenidas que se llamaba applets, aunque sumamente pesadas para las velocidades disponibles en la red.

HTML 3

Son los inicios de las interfaces gráficas, aparece Netscape 2.0 como navegador y nace la W3C ( World Wide Web Consortium) o el consorcio de la triple W, gran personaje en la estandarización del HTML y la incorporación en otros navegadores. Ya se podía poner imágenes acompañando el texto, si es que se quería descargar archivos pesados y se tenía paciencia. (Sólo como referencia, en esa época la velocidad de internet se medía en bps, bits per second, no bytes que son 8 bits).

Netscape es el primer browser que incorpora un lenguaje de script para acciones sencillas con los formularios, haciendo que todo sea más liviano al no transmitir applets binarias si no ordenes en texto interpretadas por el mismo browser.

HTML 4

La gran revolución de esta versión es que introduce CSS (Cascading Style Sheets) para separar la estructura de la presentación. HTML abandona todos los atributos que afectaban el cómo se veía los elementos en el documento y se lo deja a las Hojas de Estilo en Cascada.

En el año 1996 aparece el estándar 4 de HTML, también aparece Internet Explorer, el browser de la empresa Microsoft que estaba instalado en Windows y se desata la "guerra de los navegadores", donde cada uno quiere forzar sus propios estándares para que las páginas sean mejores.

Es un período innovador y caótico. La empresa privada se da cuenta que puede hacer promoción de sus productos en esta nueva plataforma y pide mas recursos para complementar su discurso. Aparecen muchos editores gráficos de páginas web y el dominio del código ya no pertenece a programadores si no a comunicadores y diseñadores gráficos que se ven limitados por la capacidad de un lenguaje diseñado para distribuir "papers".

Toda esta etapa de gran desarrollo y acceso a Internet, hace que la W3C decida abandonar HTML como lenguaje y enfocarse en el desarrollo de la próxima versión xHTML, con mayor enfoque en el dato, más que en el discurso.

HTML transicional

Esta es la etapa de ponerse de acuerdo. Se arman diferentes grupos con diferentes visiones sobre el futuro de la web. Mientras la W3C empuja hacia un HTML semántico, los comunicadores exigían más herramientas para construir un discurso más dinámico y las necesidades comerciales necesitaban llevar registros y datos de los usuarios y mejorar la interacción con ellos.

Se solidifica xHTML, nace dHTML como alternativa dinámica, surge MathML para papers más científicos que requería de matemáticas mas Complejas.

Google toma fuerza como buscador y aparecen varias formas y lugares para indexar los sitios web. Esta última necesidad empujó a que la W3C retomará el camino original del HTML y se solidifica el concepto semántico del HTML.

Aparecen nuevos navegadores como Chrome y Safari de apple.

Otro personaje que vino a tambalear el control de la web en esta época fue Flash, aplicación multimedia encapsulada que comenzó a cumplir con los altos requerimientos de interactividad e integración. El mayor riesgo es que solo una empresa generaba los SWF, originalmente macromedia y después Adobe y amenazaba el concepto básico de open source que había liderado el desarrollo de la web

HTML 5

El 2014 se lanza el estándares HTML5, la web semántica, los elementos tienen connotación desde la estructura, facilita su indexación, aporta a la accesibilidad y se separa por completo la estructura de la presentación en las páginas web.

Es la versión actual y la versión que tendremos por mucho tiempo más, ya que ni siquiera hay conversaciones o grupos de trabajo proponiendo el próximo estándar.

Se enfoca en la estructura y en organizar la información. Rápidamente se entiende la jerarquía de la información, busca ser compatible en todos los dispositivos, internet en celulares y tablets es una realidad y ya no solo tiene que ser válido para computador de escritorio.

Por otro lado, esta nueva versión, incluye nuevas etiquetas y funciones para la multimedia. Nuevos formatos de vídeo y audio, de menor peso, ahora se pueden integrar en un sitio así como animaciones vectoriales.

Etiquetas

HTML es un lenguaje de etiquetas, eso quiere decir que encierro entre etiquetas diferenciadoras los elementos que quiero afectar para que el browser los presentes de diferente manera. En este caso, las etiquetas se pueden diferenciar rápidamente porque siempre están antecedidas por el signo "menor que" y termina con el signo "mayor que", de esta manera, el browser puede diferenciar lo que es un texto de lo que es una orden para aplicar un comportamiento que tienen sus librerías internas.

Como es un lenguaje de etiquetas y le estoy dando una orden de cómo afectar el elemento, también hay que decirle hasta donde llega esa orden, lo que llamamos cerrar las etiquetas. La mayor parte de las etiquetas HTML se cierran, y básicamente es la misma etiqueta sólo que antecedida con un slash o barra.

<h1>Este es el título </h1>

En el ejemplo anterior, vemos como el título (heading), es afectado por la etiqueta H1 desde que comienza hasta que termina. Si movemos el cierre de la etiqueta a la mitad de la línea, veremos como la primera parte la considera un título para la siguiente es un texto simple.

En resumen, utilizando etiquetas se puede afectar los caracteres, palabras y frases que están entremedio, y en la medida que vayamos agregando elementos estructurales, el código se irá anidando con un elemento viviendo dentro de otro, lo que se conoce tambien como nodos.

<figure>
    <img src="assets/img/imagen.jpg" alt="una imagen">
    <figcaption>El título de la imagen.</figcaption>
</figure>

Atributos

Por otro lado los atributos son todas las indicaciones que se le dan a la etiqueta que cambian o afectan su comportamiento. Algunas son ordenes booleanas y otras son indicaciones con valores, y algunas pueden ser ambas.

<h1 id="titulo">Este es el título</h1>

En este caso le estamos dando una identificación única a la etiqueta, y por lo tanto a todo su contenido, y que puede, después, ser indicador de un punto en la página o manipulado por Javascript. La mayor parte de los atributos van precedidas por =" ", que le dice al atributo cuál es el valor. Desde HTML 5, también hay atributos que no requieren un valor para afectar el elemento. Vemos un ejemplo.

 <a href="documento.html" download>Descargar PDF</a>

En este código, la etiqueta de vínculo <a> (anchor) se le da la ruta adonde tiene que buscar el archivo con el atributo href y el valor entre comillas después del signo igual. Sin embargo, el atributo download, le dice que tiene que ser descargado, en vez de interpretado.

<a href="documento.html" download="nombre_del_archivo.html">Descargar PDF</a>

El mismo atributo download, ahora tiene valor, y hace que el archivo descargado tenga el nombre "nombre_del_archivo.html" cuando se descargue.

Algunos atributos son compartidos y genéricos y otras son propias de cada una de las etiquetas y su rol en la estructura. A medida que vayamos viendo las etiquetas, también veremos los atributos que la afectan.

Cabecera del documento

head

Partamos por la cabecera del documento. Como ya mencionamos, esta sección no es visible para el usuario, y son ordenes o información para su comportamiento y su indexación en los motores de búsqueda.

A mi me gusta pensar que es como una cama bien tendida, dónde se ve el cubre cama estirado y que debajo de la almohada podemos esconder elementos funcionales como el pijama o el guatero. No se ven, pero se usan dentro de la cama.

title

La etiqueta <head> sólo requiere la etiqueta <title>, que es el título de nuestro documento y es el texto que se muestra en los buscadores cuando encuentran nuestro sito. Demás está decir la importancia de un título bien puesto para transmitir la idea y contexto de nuestro documento.

<title> no tiene atributos, pero cumple una función fundamental en el posicionamiento y registro en los buscadores. El contenido de esta etiqueta es lo que se muestra en la lengüeta del navegador.

meta

Si bien, <title> es la única etiqueta del <head> requerida, hay otras que ayudan en el proceso de indexación o de funcionamiento del documento, <meta> es una de ellas.

name y content

La etiqueta <meta> tiene dos atributos generalmente, name y content. Y si bien se puede poner cualquier valor en esta combinación, su objetivo es facilitar la indexación del documento, por lo que algunos nombres tienen significado y otros son para uso personal.

<meta name="description" content="aquí se puede poner la descripción del contenido de la página">

El meta "description" le entrega la descripción del documento a los buscadores y es el texto que acompaña al vínculo en los resultados de búsqueda.

<meta name="keywords" content="palabras claves para la indexación ">

Por otro lado, los meta "keywords" le gustaban mucho a los meta buscadores, ya que facilita su indexación y es sumamente importante para las publicaciones académicas en formato APA. Es una buena manera de categorizar la información de la página y del sitio.

<meta name="author" content="luis felipe <luisfel@luisfel.cl>">

"author" no es un valor de meta name totalmente aceptado, y hay buscadores que no lo registran, pero se puede agregar cualquier name en los <meta> para registro de los propósitos que mejor se le ajuste, y a mí me gusta firmar mis páginas :)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Desde la aparición de los dispositivos móviles, el name viewport es fundamental para poder hacer adaptable la visualización de la página en varios dispositivos.

Nota:
Si la página web en el celular se ve completa y chica es que no tiene este <meta>

Un par que se salen de la norma name/content son el charset y el http-equiv.

charset

<meta charset="UTF-8">

Este meta transformó la interpretación de la web y facilitó la escritura de una página incorporando letras con caracteres especiales, acentos, diéresis, etc, que normalmente no se manejan en ingles.

Antiguamente, se usaba un juego de caracteres ISO-8859-1 y obligaba a usar interrupciones en el texto para tener buena ortografía. Ej: á se escrbía á. El & interrumpía el proceso de escritura y le agregaba una acute (acento) a la a. La ñ era ponerle tilde a la n: ñ, etc.

Nota:
Se puede encontar una tabla completa en la fuente: https://www.w3.org/TR/WD-html40-970708/charset.html

http-equiv

<meta http-equiv="refresh" content="30">

El meta "http-equiv" permite recargan la página cada cierto periodo, muy útil para los sitios que necesitan actualizar información o seguridad, en este caso está cada 30 segundos y es más usado como redireccionador a otra URL, cuando no se pueda hacer por servidor.

<meta http-equiv="refresh" content="10;https://manuales.luisfel.cl">

property

Un atributo relativamente nuevo en los <meta> es el property y sus "Open Graph" tag (The Open Graph protocol). Diseñado por facebook para poder controlar la presentación de las direcciones web que se comparten en la red social y adoptado rápidamente por tweeter, linkedin y otras redes.

Este atributo le entrega información a la red que comparte un sitio web, de qué título ponerle, descripción e imagen. Aunque tambien se puede entregar otras informaciones que ayudan a su indexación y registro.

<meta property="og:title" content="HTML (HyperText Markup Language) - El cimiento de la Web.">
<meta property="og:description" content="Manual de HTML (HyperText Markup Language)">
<meta property="og:image" content="https://html.luisfel.com/assest/img/html.png">
<meta property="og:url" content="https://html.luisfel.com/">
<meta property="og:type" content="book">
<meta property="og:locale" content="es_ES">

Las etiquetas más comunes son

og:title

Título de la página.

og:description

Descripción breve del contenido de la página.

og:image

Dirección absoluta a la imagen.

og:url

Dirección absoluta a la página.

og:type

Tipo de contenidon de la página

• website
• article
• book
• profile
• video.movie
• video.episode
• video.tv_show
• video.other
• music.song
• music.album
• music.playlist
• music.radio_station
• product
• place

og:site_name

Nombre del sitio.

og:locale

Idioma del sitio.

Por otro lado, la cabecera del documento es el mejor lugar para incluir en la página estilos de CSS y scripts de programación en JS.

script

La etiqueta <script> define un espacio para programar JavaScript en la página o vincular a un archivo externo que tenga la programación.

<script>
    function showMessage() {
        alert('¡Hola! Este es un mensaje generado por JavaScript.');
    }
</script>

<button onclick="showMessage()">Haz clic en mí</button>

En este ejemplo vemos un botón <button> con el atributo onclick que gatilla la función showMessage() que se describe en las primeras líneas.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

En este ejemplo se está vinculando al repositorio CDN de la librería de javascript jQuery.

Nota:
Un tema interesante con la etiqueta <script> es que sólo puede usar una de las dos opciones, o vincula un archivo externo de JS o define las funciones entre medio de la etiqueta, pero no puede hacer ambas al mismo tiempo.

style

La etiqueta <style> permite estilos en cascada para toda la página, ya sea por id, clase o estructura. Siempre es buena idea definir los estilos antes de comenzar la construcción del cuerpo del documento. Ya lo veremos con mayor profundidad en el manual de CSS.

<style>
/* Estilos para el cuerpo de la página */
body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	margin: 0;
	padding: 20px;
	color: #333;
}
/* Estilos para el encabezado */
h1 {
	color: #4CAF50;
	text-align: center;
}
/* Estilos para el contenedor del contenido */
.container {
	max-width: 800px;
	margin: auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Estilos para los botones */
button {
	padding: 10px 20px;
	font-size: 16px;
	color: #fff;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
button:hover {
	background-color: #0056b3;
}
/* Estilos para los párrafos */
#titulo {
	line-height: 1.6;
	font-size: 140%;
}
</style>

link

La etiqueta <link> permite vincular hojas de estilo externas, de esta manera se concentra en un sólo archivo los estilos de un sitio.

<link rel="stylesheet" href="styles.css">

Cuerpo del documento

body

En el <body> va todo lo que queremos que se vea. Realmente no existe una única manera de poner el contenido, pero mi sugerencia es, al menos, definir una cabecera de documento <header>, una parte principal <main>, y un pie de página <footer> pero ya iremos viendo las estructuras básicas y semánticas de una construcción limpia, enfocada en la estructura para una interpretación estándar en HTML5.

<!doctype html>
<html lang="es">
    <head>
        <title>Título indexable del documento</title>
        <meta charset="UTF-8">
        <meta name="description" content="Esta es la descripción para los buscadores del documento">
        <meta name="keywords" content="palabras claves para su indexación">
        <meta name="author" content="luis felipe <luisfel@luisfel.cl>">
        <meta name="viewport"    content="width=device-width, initial-scale=1.0">
        <!--<meta http-equiv="refresh"    content="30">-->
    </head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
    </body>
</html>

header

Se entiende por header o cabecera de un documento la información de contexto, o introductorio, o sea el qué, quién, cuándo, dónde del contenido de la página. Información que facilita al usuario entender el contexto de la información que se presenta. Información que se diluye al salirse del contexto académico y entrar al mundo comercial del los sitios web, y aún así, la información de contexto es importante, pero sobre todo en la promoción.

EL <header> normalmente tiene el <h1> de nuestro documento o el título. Para muchos buscadores el <h1> es más importante que el <title> en la cabecera al momento de indexar.

main

La etiqueta <main> determina la parte principal de la página, aquí va el contenido único. En un sitio no deberían haber dos <main> con el mismo contenido y en una página, no puede haber más de un main.

footer

La etiqueta <footer> determina el pie de página, por lo general la firma, fecha de creación, derechos, formas de contacto, etc. Toda información que respalda el contenido del documento y que va al pie.

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

nav

La etiqueta <nav> viene de navegación, todo lo que sirve para vincular interna o externamente el documento. Lo que generalmente conocemos como menú.

Pueden haber varias navegaciones en la página. Ya sea la del sitio o la de la misma página, incluso referencias hípervinculadas de la fuente en otros dominios.

<header>
  <h1>Título del sitio</h1>
</header>
<nav> <a href="/">Inicio</a> | <a href="nosotros.html">Nosotros</a> | <a href="productos/">Productos</a> | <a href="contacto.html">Contacto</a> </nav>

Algunas escuelas sugieren que en el <header> debería haber una navegación y otras afirman que es un elemento aparte. La W3C no se ha pronunciado al respecto dejando ambos casos como válidos.

<header>
    <h1>Título del sitio</h1>
    <nav> <a href="/">Inicio</a> | <a href="nosotros.html">Nosotros</a> | <a href="productos/">Productos</a> | <a href="contacto.html">Contacto</a> </nav>
</header>

article y section

Con las etiquetas <article> y <section> también hay un poco de controversia. En si mismas son explicatorías, las <section> son secciones, y los <article> son artículos, pero no especifica su orden o anidación. O sea, las secciones pueden contener artículos, o los artículos pueden tener secciones y cualquiera de las dos aproximaciones son válidas y depende de cómo se quiere estructurar el contenido.

Lo que sí está claro es que tienen o tienen que tener un elemento "heading" (h2-h6) anidado, titulando su contenido.

<main>
    <section>
        <h2>sub título</h2>
        <p>Párrafo </p>
        <article>
            <h3>Sub sub título</h3>
            <p>&nbsp; </p>
        </article>
    </section>
</main>

O al revés

<main>
    <article>
        <h2>sub título</h2>
        <p>Párrafo </p>
        <section>
            <h3>Sub sub título</h3>
            <p>&nbsp; </p>
        </section>
    </article>
</main>

Nota:
En este ejemplo se usa el caracter especial   "no bracking space" o espacio forzado en HTML, de esta manera el párrafo no queda vacío y se reseta el alto de la fila.

figure

La etiqueta <figure> generalmente se asocia a una imagen, pero es la representación visual de un contenido, generalmente respaldo de la información. Común es encontrarlo en paginas académicas con gráficos, tablas, imágenes o código.

figcaption

Anidada dentro de una etiqueta <figure>, está la etiqueta <figcaption> con el título o resumen asociada a la información presentada en <figure>. Puede ser un título, un descriptor o un pie de imagen.

<figure> 
    <img src="foto.jpg" alt="foto de gatito"> 
    <figcaption>pie de foto</figcaption>
</figure>

aside

La etiqueta <aside> es para la información "al lado", un espacio para información complementaria, relacionada o destacada de lo desarrollado en el <main>. Algunos lo usan para promociones, publicidad, referencias similares y otros como menú de navegación interno o índice. No es la información principal (<main>) pero si está relacionada.

<main>
  <p>HTML nace para resolver la necesidad de hacer hipervínculos entre documentos digitalizados, ya sea dentro del mismo documento, páginas dentro del mismo sitio o dominio o vínculos a otros servidores en la red.</p>
</main>
<aside>
  <h4>Hipervínculos</h4>
  <p>Un hipervínculo o hiperenlace es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, a otro punto dentro del mismo o de otro documento. Los hipervínculos nos permiten leer de documentos de manera no secuencial e incluso, puede conducirnos a otros documentos.</p>
</aside>

div

La etiqueta <div> viene de "división", aunque su función es agrupar. Es para dividir contenido no semánticamente o sea para usarlo en diagramación. Está diseñado como un contenedor para aplicar CSS en su presentación o JavaScript en su funcionalidad. De manera predeterminada siempre hay un salto de línea, antes y después de un elemento <div>.

<div id="ejemploDiv">Este es un div con atributo "id" único.</div>

span

La etiqueta <span>, por otro lado se diseñó para tener control en línea de un elemento y poder afectarlo con CSS o JavaScript. Esta etiqueta no genera salto de línea natural.

Me gusta pensar que los <div> son cajas y los <span> son bolsas.

<p>En este párrafo, <span class="rojo"> esto está en un span</span> y se le aplica una clase que lo presenta rojo.</p>

Títulos

Lo primero que necesitamos es una etiqueta para los títulos, sub títulos, sub sub títulos, etc., que jerárquicamente se vean y entiendan como títulos, o sea, la descripción del contenido o sub partes de un documento.

En HTML 5 hay seis niveles de títulos o "headings", donde el primer nivel, y el más importante, es el <h1> y el último nivel el <h6>.

h1

La etiqueta <h1> es el único titulo requerido en una página. Al mismo tiempo que es requerido, también es único, ya que un documento no puede tener más de un <h1>.

Por lo general, se pone en el <header> del documento, pero no es obligatoria la posición.

Los buscadores Web ocupan el <h1> como parte de la indexación por lo que es importante la coherencia y relación entre el <h1> y el <title> de nuestro documento.

<h1>Este es el título </h1>

h2-h6

El resto de los headings si se pueden repetir en la página, y depende la profundidad de la información, son los niveles que se van a usar. Sí es importante resaltar que el orden de su uso no es estético, si no funcional, por lo que no es recomendable saltarse niveles en la construcción del contenido de la página. O sea, después de un <h2>, siempre va un <h3> anidado, y así sucesivamente.

<h2>Este es un sub título </h2>

Párrafos

El concepto de párrafo es importante en HTML. La etiqueta <p> es la más usada para textos y nace en una época de definiciones de la computación, donde el salto de línea o separación de contenido se manejaba de diferentes maneras, dependiendo del sistema operativo.

Nace de la necesidad de tener un separador de párrafos, al igual que el telégrafo, común en esa época. Linux entiende el salto de línea como LF (line feed), Macintosh como CR (carriage return), y windows como CRLF. Como no se ponían de acuerdo y para no casarse con ningún formato en específico, HTML decide tener su propio "CR" encerrando el contenido con la etiqueta <p> y generando el doble salto de línea entre dos párrafos.

<p>Este es un párrafo. </p>
<p>Y este es otro párrafo. </p>

br

Como existía la necesidad de poder tener saltos de línea simple, se agrega la etiqueta <br> para forzar un LF o un salto de línea dentro de un párrafo. Esta etiqueta es abierta o sea que no tiene una etiqueta que cierra, ya que es una orden directa de salto de línea y no afecta a un contenido.

Es ideal para poemas y direcciones, pero no exclusívamente.

<p>Este es un párrafo. <br> que tiene un salto de línea.</p>
<p>Y este es otro párrafo. </p>

Nota:
Si se llega a tener la necesidad de agregar dos <br> entonces debería considerarse el uso de un párrafo.

hr

La etiqueta <hr> (horizontal rule) o "paragraph-level thematic break" se diseñó como un separador visual de contenido a nivel de párrafo. Básicamente es un línea que atraviesa el espacio horizontal y que puede ser afectada con CSS para diferentes presentaciones, su única misión es separa visualmente dos contenidos y no tiene conotación semántica.

<p>Este es un párrafo. </p><hr>
<p>Y este es otro párrafo separado por una regla horizontal. </p>

Citas

Aquí volvemos a la parte APA del nacimiento de HTML, ya que parte importante del formato es el tratamiento de las citas o referencias en la documentación académica. Las investigaciones cimientan su camino con información que proviene de otros autores. Si lo quiere usar en el material tiene que "citar" la fuente, o en inglés "quote".

Dependiendo de la cantidad de texto que se está copiando o "quotiando" es que se puede usar 3 etiquetas de citas: <blockquote>, <q> o <cite>, veamosla por separado.

blockquote

La etiqueta <blockquote> se usa cuando la información citada es un bloque. Un párrafo, a lo más dos, según muchos autores, de un texto copiado literalmente de la fuente. Obviamente citando la fuente y vinculándola.

El contenido de los <blockquote> agrega de manera predeterminada margenes en su contorno para separarse visualmente de los párrafos.

<blockquote>La idea original de la web era que debería ser un espacio colaborativo donde poder comunicarse a través del intercambio de información.<br>Tim Berners-Lee</blockquote>

cite

La etiqueta <blockquote> se ocupa con el atributo cite. Este atributo permite vincular a la fuente o al menos registrarla en el caso de la bibliografía.

<blockquote cite="https://www.laboratoriolinux.es/index.php/-noticias-mundo-linux-/ultimas-noticias/14631-10-frases-celebres-sobre-la-historia-de-la-informatica.html">El ordenador nació para resolver problemas que antes no existían.<br>Bill Gates</blockquote>

q

La etiqueta <q> es para citas en línea, o sea, una frase, o una línea sobre la cual se desarrolla el contenido o se usa para reforzar una idea.(un poco como la diferencia entre los <div> y los <span>)

De manera predeterminada encierra el contenido entre comillas dobles gráficas.

<p><strong>Jakob Nielsen</strong> habla de la <q>Consistencia y estándares</q> en su libro <cite>Usabilidad</cite>.</p>

cite

La etiqueta <q> va, también, acompañada del atributo cite como con los <blockquotes> y cumple el miso objetivo, dejar claro el origen de lo citado en línea.

<p><q cite="https://diarioti.com/analisis-de-un-discurso-de-steve-jobs-que-hizo-historia/30493">Lo único que ha cambiado es todo</q> decía <strong>Steve Jobs</strong> en su discurso en Stanford.</p>

cite

Por otro lado, también existe la etiqueta <cite> directamente, no sólo como atributo de las etiquetas anteriores, y es para destacar que lo que encierra es una cita. Diseñado como un elemento en línea para diferenciar el título de una obra a la que se hacer referencia.

<p><cite>Star Wars Episodio I: La amenaza fantasma</cite>  (película, 1999) del director <strong>George Lucas</strong>.</p>

abbr

Hay todo un capítulo APA dedicado exclusivamente a las abreviaciones, HTML lo soluciona y extiende con etiqueta <abbr>. La abreviación está amarrada al atributo title que explica el significado abreviado para dejarlo más claro al pasar el mouse por encima.

El formato <abbr title="American Psychological Association">APA</abbr> se implementó en 1892.

El ejemplo anterior se muestra nativamente en el browser como un texto subrayado con puntos y el cursor se convierte en un signo de interrogacón al pasar por encima, mostrando el title asociado.

address

La etiqueta <address> se ocupa para la referencia del autor o dueño del documento o artículo. Generalmente se ponen datos de contacto como el email, teléfono, redes sociales, etc.

Su presentación de manera predeterminada es en cursiva, y siempre va a haber un salto de línea antes y después de ella.

<address>Luis Felipe Ramírez<br>luis@ramirez.cl<br>https://luisfel.cl</address>

Formato

Los formatos aparecieron en el HTML para suplir una necesidad visual de presentación y no deberían ser considerados en el HTML semántico ya que no tiene una connotación en si misma y se puede lograr mejores resultados usando CSS. Sin embargo, muchas textos o palabras necesitan ser destacadas y es importante saber que existen y que se pueden utilizar en el HTML.

strong

Partamos por la etiqueta <strong> que apareció con el HTML 5, y viene a sustituir la etiqueta <b> (bold). Sigue destacando el contenido encerrado en las etiquetas en negrita, pero ahora con connotación de "fuerte" y no sólo visual de "negrita". La diferencia es sutil, pero hace relación con el concepto semántico que propone esta versión de HTML 5.

<p>Este es un texto <strong>strong</strong></p>

Resultado:

Nota:
La etiqueta <b> de bold todavía se puede usar aunque está deprecada, esto quiere decir que va a desaparecer en próximas versiones del HTML.

em

Otro cambio en HTML 5 es el énfasis. La etiqueta <em>, antiguamente la etiqueta <i>, de italic o cursiva en español. Se ocupa para dar énfasis a palabras en un texto, y por la misma razón que se cambio la etiqueta <b> ya que eran estéticos y no tenia connotación que ahora se le da.

<p>Este es un texto <em>énfasis</em></p>

Nota:
La etiqueta <i> todavía se puede usar aunque está deprecada, esto quiere decir que va a desaparecer en próximas versiones del HTML.

mark

La etiqueta <mark> representa un texto "marcado" o destacado. El browser, de manera nativa, se encarga de resaltar el contenido con amarillo como si se hubiera utilizado un marcador o un destacado.

<p>Este es un texto <mark>destacado</mark></p>

small

La etiqueta <small> o pequeño se ocupa en la "letra chica" de una página, generalmente en el copyright del pie de página, y presenta el texto a un 50% del texto normal.

También lo he visto dentro de los "headings" como bajada de título o "caption".

<p>Este es un  texto  <small>pequeño</small> </p>

del

La etiqueta <del>, de "deleted" o eliminado, representa el texto que es tachado, típico de las correcciones de un texto. De manera predeterminada, el navegador lo presenta con una raya encima del texto (tachado).

<p>Este es un texto  <del>eliminado</del> </p>

ins

La <ins>, de texto "insertado", se ocupa por lo general con la etiqueta anterior <del> y es para mostrar un texto insertado o corregido. El navegador encierra el contenido con una línea por debajo. Su uso es complejo ya que se confunde rápidamente con los textos hipervinculádos del HTML que también son subrayados.

<p>Este es un texto  <ins>insertado</ins> </p>

sub

La etiqueta <sub>, del ingles "subscript text" se ocupa para poner texto en subíndice. Alínea el texto encerrado en la etiqueta por debajo de la media del texto. Ideal para las notas o referencias de una investigación.

<p>Este es un texto  <sub>sub</sub> </p>

sup

La etiqueta <sup> "superscript text" en ingles, aliena el contenido por encima de la media del texto. ideal para la raíz cuadrada.

<p>Este es un texto <sup>sup</sup></p>

Si aprecia más la variación si los vemos todos juntos.

<p>Este es un texto <strong>strong</strong><br>
Este es un texto <em>énfasis</em><br> 
Este es un texto <mark>destacado</mark><br>
Este es un texto <small>pequeño</small> <br>
Este es un texto <del>eliminado</del> <br>
Este es un texto <ins>insertado</ins> <br>
Este es un texto <sub>sub</sub> <br>
Este es un texto <sup>sup</sup></p>

Elementos del código informático

Como era lógico en la era digital, cuando nace el HTML se incorporan etiquetas para mostrar "Computer Code Elements" o los elementos de códigos de informática, para hacer visible cuando un texto es un "input" de teclado, código, variable o resultado.

Es difícil que se apliquen en una página web, pero como estamos en el medio, y este manual los usa, es buena idea conocerlos.

code

La etiqueta <code> traducido del ingles: "código", sirve para mostrar un pedazo de código de programación.

<p><code>&lt;h1&gt;</code> es la etiqueta para el heading principal de una página 
y puede llevar el atributo <code>id</code>.</p>

kbd

La etiqueta <kbd> o keyboard, que ingles significa "teclado", se ocupa para mostrar acciones de teclado.

<p>La combinación de teclas <kbd>control</kbd> + <kbd>C</kbd> permite copiar el texto seleccionado.</p>

samp

La etiqueta <samp> se ocupa para mostrar el resultado esperado de una programación. En el caso de este manual, por CSS, determina margenes y bordes para mostrar el resultado.

<samp>Este es el resultado esperado.</samp>

var

La etiqueta <var> se diseño para mostrar el contenido que es una variable en un texto de una página.

<p>La variable <var>cantidad</var> contiene la cuenta de elementos.</p>

pre

La etiqueta <pre> viene de "preformatted text" o sea texto pre formateado. Ya vimos que en HTML no se interpretan los saltos de línea si no la indicamos con etiquetas <p> o <br>, lo mismo pasa con las tabulaciones o los doble espacios en un texto. La etiqueta <pre> le dice al navegador que sí los interprete y muestre tal cuál fue escrito.

<pre>Este texto tiene un salto de línea
aqui.     Tambien una tabulación con     varios espacios

y dos saltos de línea.</pre>

Este texto tiene un salto de línea
aqui.     Tambien una tabulación con     varios espacios

y dos saltos de línea.

Lista ordenada

La listas ordenadas, tal como lo indica su nombre, son listas que tienen una jerarquización en su presentación, ya sea por números o letras que van incrementando su valor a medida que se listan sus partes.

ol

La etiqueta <ol>, de order list, encierra todos los elementos o líneas de la lista. Ésta etiqueta siempre anida lo etiqueta <li>, de line en ingles. Automáticamente el browser agrega por cada línea el incremento al descriptor definido en el tipo, que de manera predeterminada es numérico partiendo por 1, esto puede ser modificado en los atributos.

<ol>
  <li>Pablo Neruda (Chile)</li>
  <li>Octavio Paz (México)</li>
  <li>Gabriela Mistral (Chile)</li>
  <li>Jorge Luis Borges (Argentina)</li>
  <li>Rubén Darío (Nicaragua)</li>
  <li>César Vallejo (Perú)</li>
  <li>Julia de Burgos (Puerto Rico)</li>
</ol>

De manera predeterminada, todo elemento dentro de una lista tiene una tabulación a mano izquierda para que se pueda diferenciar de otros textos.

type

El principal atributo de los <ol> es el tipo de dígito descriptor o viñeta, para eso usamos el atributotype. Los tipos pueden ser:

<ol type="A">
    <li>Pablo Neruda (Chile)</li>
    <li>Octavio Paz (México)</li>
    <li>Gabriela Mistral (Chile)</li>
    <li>Jorge Luis Borges (Argentina)</li>
    <li>Rubén Darío (Nicaragua)</li>
    <li>César Vallejo (Perú)</li>
    <li>Julia de Burgos (Puerto Rico)</li>
</ol>

start

El atributo start permite definir el punto de partida de las listas ordenadas, muy útil si es la continuación de una lista anterior.

<ol start="8">
    <li>Mario Benedetti (Uruguay)</li>
    <li>Manuel Acuña (México)</li>
    <li>José Asunción Silva (Colombia)</li>
    <li>Vicente Huidobro (Chile)</li>
    <li>Omar Cabezas (Nicaragua)</li>
    <li>Claudia Rankine (Jamaica/Estados Unidos)</li>
</ol>

reversed

Este es un atributo único y sin valor, sólo se declara, y lo que hace es invertir el valor de los indicadores.

<ol reversed>
    <li>Pablo Neruda (Chile)</li>
    <li>Octavio Paz (México)</li>
    <li>Gabriela Mistral (Chile)</li>
    <li>Jorge Luis Borges (Argentina)</li>
    <li>Rubén Darío (Nicaragua)</li>
    <li>César Vallejo (Perú)</li>
    <li>Julia de Burgos (Puerto Rico)</li>
    <li>Alfonsina Storni (Argentina)</li>
    <li>Sor Juana Inés de la Cruz (México)</li>
    <li>Nicolás Guillén (Cuba)</li>
</ol>

Se puede hacer combinación de atributos, por ejemplo, números romanos, partiendo de 8 y de manera invertida (aunque no se me ocurre un ejemplo práctico en el cual aplicarlo).

<ol type="I"  reversed start="8">
    <li>Pablo Neruda (Chile)</li>
    <li>Octavio Paz (México)</li>
    <li>Gabriela Mistral (Chile)</li>
    <li>Jorge Luis Borges (Argentina)</li>
    <li>Rubén Darío (Nicaragua)</li>
    <li>César Vallejo (Perú)</li>
    <li>Julia de Burgos (Puerto Rico)</li>
    <li>Alfonsina Storni (Argentina)</li>
    <li>Sor Juana Inés de la Cruz (México)</li>
    <li>Nicolás Guillén (Cuba)</li>
</ol>

Nota:
Recordemos que no existen los números romanos negativos ni el cero.

Pasa con bastante frecuencia que una lista ordenada, a su vez necesita otra lista ordenada en una o varias de sus línea.

<ol>
    <li>Manzana
        <ol>
            <li>Variedades
                <ol>
                    <li>Roja</li>
                    <li>Verde</li>
                    <li>Amarilla</li>
                </ol>
            </li>
            <li>Usos
                <ol  type="a">
                    <li>Comer fresca</li>
                    <li>Hacer jugo</li>
                    <li>Hornear</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Banana
        <ol>
            <li>Variedades
                <ol>
                    <li>Chiquita</li>
                    <li>Plátano macho</li>
                </ol>
            </li>
            <li>Usos
                <ol  type="a">
                    <li>Comer fresca</li>
                    <li>Hacer batidos</li>
                    <li>Usar en repostería</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Naranja
        <ol>
            <li>Variedades
                <ol>
                    <li>Valencia</li>
                    <li>Navel</li>
                </ol>
            </li>
            <li>Usos
                <ol type="a">
                    <li>Hacer jugo</li>
                    <li>Comer fresca</li>
                    <li>Usar en ensaladas</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

En este caso el indicador de línea se recetea para representar su posición en los anidados y hasta se puede usar diferentes tipos de listas.

Lista descriptiva

Las listas descriptivas o "no ordenadas" son el listado que no tiene un indicador secuencial, si no un carácter que destaca el punto de inicio de la línea o elemento a listar al que se llama viñeta.

ul

La etiqueta <ul>, de unonder list, determina la construcción de una lista no ordenada y no una lista "desordenada" ya que es una lista, por eso es mejor llamarala listas descriptivas.

Al igual que la etiqueta <ol>, los elementos del listado se registran con la etiqueta <li> y tienen una tabulación a mano izquierda en su interpretación en el navegador.

<ul>
    <li>Manzana</li>
    <li>Banana</li>
    <li>Naranja</li>
    <li>Pera</li>
    <li>Uvas</li>
</ul>

type

Al igual que en la etiqueta <ol>, en los <ul> se puede definir el tipo de viñeta a utilizar. De manera predeterminada las listas parten con una viñeta que es un punto negro, pero se puede definir con el atributo type que sea disc, circle, square.

<ul type="circle">
    <li>Motor</li>
    <li>Transmisión</li>
    <li>Suspensión</li>
    <li>Frenos</li>
    <li>Ruedas</li>
    <li>Chasis</li>
</ul>

Nota:
La W3C está sugiriendo que ya no se ocupe el atributo type para afectar la viñeta, si no que se afecte con CSS: style="list-style-type:circle".

Es interesante ver como las multiples anidaciones van determinando el intercambio de estas viñatas de manera automática.

<ul>
    <li>Motor
        <ul>
            <li>Cilindrada
                <ul>
                    <li>125cc</li>
                    <li>250cc</li>
                    <li>500cc</li>
                </ul>
            </li>
            <li>Tipo
                <ul>
                    <li>Monocilíndrico</li>
                    <li>Multicilíndrico</li>
                    <li>En V</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Transmisión
        <ul>
            <li>Tipo
                <ul>
                    <li>Manual</li>
                    <li>Automática</li>
                </ul>
            </li>
            <li>Componentes
                <ul>
                    <li>Embrague</li>
                    <li>Cadena</li>
                    <li>Piñón</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Suspensión
        <ul>
            <li>Delantera
                <ul>
                    <li>Horquilla</li>
                    <li>Amortiguador</li>
                </ul>
            </li>
            <li>Trasera
                <ul>
                    <li>Amortiguador</li>
                    <li>Basculante</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Frenos
        <ul>
            <li>Delanteros
                <ul>
                    <li>Disco</li>
                    <li>Tambor</li>
                </ul>
            </li>
            <li>Traseros
                <ul>
                    <li>Disco</li>
                    <li>Tambor</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Lista de definición

Las listas de definiciones son un tipo de experimento funcional para enlistar temáticas que se pueden categorizar por un título y una descripción.

dl

La etiqueta <dl>, de description list, está compuesto de 2 etiquetas que se anidan, <dt>, de "define terms", y <dd>, de "describe data".

<dl> 
    <dt>Motor</dt>
    <dd>El motor es el componente de la moto que convierte el combustible en energía mecánica para propulsar el vehículo.</dd> 
    <dt>Transmisión</dt>
    <dd>La transmisión es el sistema que transfiere la potencia del motor a las ruedas, permitiendo el control de la velocidad y la dirección.</dd> 
    <dt>Suspensión</dt>
    <dd>La suspensión es el sistema que absorbe los impactos del terreno y mejora la estabilidad y el confort durante la conducción.</dd> 
    <dt>Frenos</dt>
    <dd>Los frenos son los mecanismos que reducen la velocidad de la moto o la detienen completamente, proporcionando seguridad al conducir.</dd>
    <dt>Chasis</dt>
    <dd>El chasis es la estructura básica de la moto que sostiene y conecta todos los componentes, proporcionando la forma y la integridad estructural.</dd>
</dl>

Anidación

Anidando los 3 tipos de listas, se pueden presentar estructuras jerárquicas bastante interesantes visualmente y claras estructuralmente.

<ol>
  <li>Regiones Naturales
    <ul>
      <li>Regiones Naturales
        <ul>
          <li>Zona Norte
            <dl>
              <dt>Desierto de Atacama</dt>
              <dd>El desierto más árido del mundo, ubicado en la Región de Atacama.</dd>
              <dt>Valles Transversales</dt>
              <dd>Valles que se extienden desde la Cordillera de los Andes hasta la costa.</dd>
            </dl>
          </li>
          <li>Zona Central
            <dl>
              <dt>Valle Central</dt>
              <dd>Área fértil entre la Cordillera de los Andes y la Cordillera de la Costa, importante para la agricultura.</dd>
              <dt>Zona de Lagos</dt>
              <dd>Región conocida por sus numerosos lagos y paisajes naturales.</dd>
            </dl>
          </li>
          <li>Zona Sur
            <dl>
              <dt>Región de la Araucanía</dt>
              <dd>Conocida por su paisaje montañoso y bosques nativos.</dd>
              <dt>Patagonia Chilena</dt>
              <dd>Área con fiordos, glaciares y un paisaje espectacular.</dd>
            </dl>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>División Política
    <ul>
      <li>Regiones
        <ul>
          <li>Región de Arica y Parinacota
            <dl>
              <dt>Arica</dt>
              <dd>Ciudad costera en el extremo norte de Chile.</dd>
              <dt>Parinacota</dt>
              <dd>Zona montañosa cerca de la frontera con Bolivia.</dd>
            </dl>
          </li>
          <li>Región Metropolitana
            <dl>
              <dt>Santiago</dt>
              <dd>Capital de Chile y centro económico y cultural del país.</dd>
              <dt>Valparaíso</dt>
              <dd>Ciudad portuaria y sede del Congreso Nacional.</dd>
            </dl>
          </li>
          <li>Región de Los Lagos
            <dl>
              <dt>Puerto Varas</dt>
              <dd>Conocida por su belleza natural y actividades turísticas.</dd>
              <dt>Osorno</dt>
              <dd>Ciudad ubicada cerca del volcán Osorno y la Cordillera de los Andes.</dd>
            </dl>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Formaciones Geográficas
    <ul>
      <li>Montañas
        <ul>
          <li>Cordillera de los Andes
            <dl>
              <dt>Ojos del Salado</dt>
              <dd>El volcán más alto del mundo, ubicado en la frontera con Argentina.</dd>
              <dt>Monte Aconcagua</dt>
              <dd>El pico más alto de la cordillera, aunque está en Argentina, afecta la geografía de Chile.</dd>
            </dl>
          </li>
          <li>Cordillera de la Costa
            <dl>
              <dt>Macizo de Ñuble</dt>
              <dd>Parte de la Cordillera de la Costa, ubicado en la Región del Biobío.</dd>
            </dl>
          </li>
        </ul>
      </li>
      <li>Ríos
        <ul>
          <li>Río Baker
            <dl>
              <dt>Descripción</dt>
              <dd>Uno de los ríos más largos y caudalosos de Chile, ubicado en la Región de Aysén.</dd>
            </dl>
          </li>
          <li>Río Mapocho
            <dl>
              <dt>Descripción</dt>
              <dd>Río que atraviesa la ciudad de Santiago.</dd>
            </dl>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ol>

También se pueden utilizar con un punteo, donde el contenido de la etiqueta <li> sean estructurales como párrafos o headings.

<ol>
  <li>
    <h6>Valparaíso</h6>
    <p>Valparaíso es una ciudad puerto de Chile conocida por su arquitectura histórica y coloridos cerros. Es Patrimonio de la Humanidad y ofrece una rica experiencia cultural.</p>
    <p>En Valparaíso, puedes disfrutar de:</p>
    <ul>
      <li>Vista panorámica desde el Cerro Alegre.</li>
      <li>Recorridos en los históricos ascensores.</li>
      <li>Exploración del Museo de Bellas Artes.</li>
    </ul>
  </li>
  <li>
    <h6>San Pedro de Atacama</h6>
    <p>San Pedro de Atacama es una localidad en el desierto de Atacama, conocida por su impresionante paisaje árido y formaciones geológicas únicas.</p>
    <p>Algunas de las atracciones en San Pedro de Atacama incluyen:</p>
    <ul>
      <li>Los Geysers del Tatio.</li>
      <li>El Valle de la Luna.</li>
      <li>Los Ojos del Salar.</li>
    </ul>
  </li>
  <li>
    <h6>Puerto Varas</h6>
    <p>Puerto Varas es una pintoresca ciudad en la Región de Los Lagos, famosa por sus vistas al lago Llanquihue y al volcán Osorno.</p>
    <p>Actividades populares en Puerto Varas incluyen:</p>
    <ul>
      <li>Excursiones al Parque Nacional Vicente Pérez Rosales.</li>
      <li>Visitas al Lago Todos los Santos.</li>
      <li>Pesca y deportes acuáticos en el lago Llanquihue.</li>
    </ul>
  </li>
</ol>

Rutas

Hay que pensar que las rutas vienen de los principios de la computación sin interfaz gráfica, y si bien, hoy vemos carpetas que representan los directorios, en la practica no son mas que espacio ordenados anidados jerárquicamente.

De partida necesitamos dejar de pensar en carpetas y mas bien en caminos o ramas para llegar a un archivo en el disco duro del computador que se organiza en directorios. Como todo camino, tiene esquinas, rincones y vueltas, asi que tenemos que dejar de pensar en caminos rectos y planos y comenzar a ver la estructura como un árbol de varios niveles o varias ramas.

Veamos un caso práctico. Supongamos que tenemos un sitio web de varios archivos que se van a hipervincular y estan en el directorio mi_sitio

- mi_sitio
    |- index.html
    |- historia.html
    |- recursos
        |- imagenes
            |- imagen_uno.jpg
            |- imagen_dos.jpeg
            |- imagen_tres.png
        |- archivo.txt
        |- archivo.html
    |- proyectos
        |- proyecto_uno.html
        |- proyecyto_dos.html
        |- proyecto_3
            |- index.html
            |- recursos
                |- imagen_uno.jpg
                    |- imagen_dos.jpeg
                    |- imagen_tres.png

En este caso, en el directorio del mi_sitio, tengo 2 archivos (index.html y historia.html) y 2 directorios (recursos y proyectos) en la "raíz del sitio". O sea, cada vez que hablemos de la raiz, es el primer nivel del directorio de trabajo.

Nota:
El servidor web siempre va a buscar como primera respuesta el index de un directorio o el índice de ese directorio, por lo que es buena idea commenzar a acostubrarse a llamar index.html el punto de partida de un sitio web.

Si desde la página index.html quiero hipervincularme a la página historia.html, como está en la misma altura que la página index.html, simplemente le digo que vaya al archivo hisoria.html que está al lado. Pero si quiero ir, desde index.html al archivo archivo.html que está en el directorio recursos, entonces tengo que decirle que entre en recurso y de ahí busque la página archivo.html

recursos/archivo.html

A esto se llama la ruta, la cadena de texto que ocupa el "/" como carácter para separar directorios de archivos.

Veamos otro ejemplo, si estoy en index.html de la raíz del sitio, y quiero mostrar la imagen_tres.png que está en el directorio recursos, que a su vez está en el directorio proyectos_3 y éste está en el directorio proyectos entonces tenemos una ruta mucho más larga.

proyectos/proyecto_3/recursos/imagen_tres.png

Por otro lado, con "../" se recorre para atrás un directorio desde donde estoy o me salgo del directorio actual.

Veamos otro caso, si estoy en el archivo index.html de proyecto_3 y quiero llegar a historia.html que está en el directorio raíz, tengo que salir de proyectos_3 y de proyectos para estar a la misma altura que historia.html

../../historia.html

Compliquémoslo un poco más, hay dos tipos de rutas que se pueden construir, las rutas relativas o las rutas absolutas. En general, la mayor parte de las direcciones que se construyen en un sitio web son relativos, porque entrega la facilidad de mantener la relación de la ruta no importando en que computador se aloja la página.

Ruta relativa

Las rutas relativas se refieren a "relativas" a quien lo solicita. Entonces, cuando quiero llegar de una página a otra, siempre considero a la página solicitante como el punto de partida y desde ahí describo el camino.

Sigamos la misma estructura ejemplo de sitio. Si estoy en archivo.html del directorio recursos y quiero llegar a la imagen imagen_dos.jpeg que está en proyectos/proyecto_3/recursos primero, tengo que salir de recursos y después entrar hasta el recursos de proyecto_3

../proyectos/proyecto_3/recursos/imagen_dos.jpeg

Ruta absoluta

Las rutas absolutas son siempre desde el punto de partida. Generalmente comienzan con el caracter slash o barra "/ " como principio de la dirección.

Mismo caso anterior, pero de manera absoluta es desde la raíz del sitio

/proyectos/proyecto_3/recursos/imagen_dos.jpeg

La diferencia es sutil, uno es saliendo y entrando y el otro es desde el principio. La diferencia es mas práctica cuando desde proyecto_3 quiero llegar hasta historia.html, en vez de salir 2 veces con ../../, simplemente digo desde la raíz.

/historia.html

Pero se nota más aún, cuando queremos vincularnos a una dirección en otro sitio, porque siempre comienza con http o https, el dominio o IP dónde está el archivo que queremos vincular.

https://manuales.luisfel.com/assest/image/lf.png

a

La etiqueta <a> viene del ingles "anchor", que significa punto de anclaje, en general, entre más se usa la etiqueta en HTML, menos letras lo componen y como el objetivo de HTML es hipervincular, la etiqueta quedó como simplemente a.

La etiqueta <a> es cerrada por lo que el texto o imagen que está dentro de la etiquete tiene el comportamiento para hacer el vínculo y de manera predeterminada el cursor toma la forma de un puntero cuando se pasa por encima. En el caso de ser texto, éste queda subrayado y con un color azúl, y en el caso de ser una imagen, a ésta se le agregan bordes de color azul. Esto puede ser modificado y controlado con CSS.

<a href="../proyectos/proyecto_3/recursos/imagen_dos.jpeg">imagen</a>

Los vínculos tienen 4 estados, el básico, azul para decir que es un vínculo (link), morado para decir que ya ha sido visitado (visited), cambio de cursor cuando se está por encima del hipervínculo (hover) y rojo para decir que está siendo clickeado (active).

La etiqueta <a> tiene varios atributos que le permiten funcionar.

href

El atributo href es el único requerido, es más, si no existe href, no es un hipervínculo y pierde su comportamiento nativo. El atributo href viene de "Hypertext REFerence" y es en este atributo que le damos la URL (Uniform Resource Locator) del archivo de destino o la ruta.

<a href="recursos/archivo.html">archivo</a>

target

El atributo target nos permite decirle el dónde queremos que se ejecute el vínculo. De manera predeterminada, es en la misma ventana que está abierta o _self, o sea en si misma, pero puede tener variaciones propias o personalizadas que se arrastra de la época en que existían los frames en el HTML.

Nota:Los frames o varias páginas juntas en una sólo visualización desparecieron para HTML5 por los conflictos de indexación, aunque todavía sobreviven los <iframes> para incrustar una página en otra.

<a href="recursos/archivo.html" target="_blank">archivo</a>

En este ejemplo abrimos el mismo archivo anterior, pero en otra pestaña o lengüeta del browser.

Nota:
Siempre es buena idea, si el vínculo es externo, no abrirlo en la ventana de nuestro sitio, si no que abrir una ventana nueva.

download

La atributo download ya lo habíamos visto al principio del manual y se encarga de descargar el archivo que está vinculado, no requiere parámetros para funcionar, pero si además le agregamos un valor con =" ", entonces va a cambiar el nombre del archivo que se está descargando.

<a href="recursos/archivo.txt" download="mi_archivo.txt">descargar archivo</a>

rel

El atributo rel se ocupa para definir la relación que tiene el archivo vinculado con el archivo actual. Se ocupa más en accesibilidad y en usabilidad de los sitios web y en la indexación de los buscadores cuando los robots recorren los vínculos de nuestra página.

<a href="recursos/archivo.txt" download="mi_archivo.txt" rel="next">descargar archivo</a>

Vínculo local

Uno de los vínculos más usados es dentro del mismo archivo o página abierta, generalmente a un punto definido por heading (para poder contextualizar). Para vincularlo se necesita un atributo id único para el destino.

Supongamos la sección servicios de la página. Primero definimos el punto de destino:

<h3 id="servicios">Servicios</h3>

Y desde el vínculo, ocupamos el carácter "#" como URL de destino, que significa un id o identificador único para HTML.

<a href="#servicios">nuestros servicios</a>

Nota:
Lo mismo se puede utilizar con la URL de un documento externo que tenga id :
<a href="/proyectos/proyecto_dos.html#los_servicios">servicios</a>

Aplicaciones

Otra cosas que podemos vincular son aplicaciones relacionada con el browser o el sistema operativo.

Por ejemplo, que hable con el programa de correo electrónico relacionada en el equipo para enviar un email. Para esto antecedemos la URL con la orden malito: con el correo destinatario como valor.

<a href="mailto:mi.correo@mi.servidor.com">mándame un mail</a>

Alerta:
Usar mailto tiene el riesgo que el usuario no tenga configurada una aplicación de correo o no esté vinculado con el browser, el browser no entienda las mismas variables y no nos lleguen los contactos desde nuestro sitio web, para es mejor utilizar los formularios y enviar el correo con un lenguaje de programación desde el servidor como PHP.
https://php.luisfel.com/#enviar_e_mail

También podemos interactuar con la aplicación de teléfono si queremos que nos llamen. Mucho más útiles ahora que tenemos dispositivos mobilies que tienen el teléfono incluido, aunque algunos equipos de escritorio también tenían una línea telefónica incluida.

<a href="tel:+56987654321"> +569 8765 43 21 </a>

De los mayores usos que se dan a aplicaciones relacionadas es para gatillar una acción de JavaScript en la página.

<a href="javascript:alert('hola');">ejecutar javascipt</a>

Imágenes

Las imágenes en la web merecen un manual completo. De partida, hay que entender que no había imágenes en las primeras versiones de HTML, básicamente por que no había software gráficos, ni digitalizaciones, ni capacidad de los procesadores.

A diferencia del HTML que es texto (simple, corriente y vulgar caracteres ACII) las imágenes son bitmaps, o sea una representación de ceros y unos para definir cada pixel que compone una imagen y que pueden ser muchos dependiendo de sus dimensiones y los dpi (Dots per Inch) o profundidad de color. Entonces habían 2 problemas, interpretar esos ceros y unos y por otro lado transmitir esos ceros y unos con los anchos de banda que existían en la época.

No está en duda el poder de las imágenes, como complemento del discurso, como sustituto o simplemente como una decoración, mal que mal, "Una imagen vale más que mil palabras", pero meterlo en la naciente web requirió de más tiempo, avances en los procesadores, tarjetas de video y ancho de banda.

Es por lo mismo que no todos los formatos imágenes son válidos para la web y se limita a imágenes que se puedan, de alguna manera, comprimir para bajar su peso y poder transmitir. Si bien, el origen de la imagen, generalmente, determina su formato a compartir, la selección de formato de imagen a utilizar es una extraña balanza del peso sobre calidad por la relevancia.

Para imagenes del mismo tamaño y formato, entre más compresión, o sea más liviana, menos calidad se va a tener y al revés, entre más calidad o mejor información tenga la imagen, más va a pesar y más se va a demorar en llegar al browser.

Por otro lado no es lo mismo la imagen de un paisaje en mi blog de viajes, que la descripción territorial del instituto geográfico nacional. En uno, la calidad no prima sobre el discurso y sólo contextualiza o es referencial (y hasta puede sacar envidia), en el otro, es un registro histórico y patrimonial, el peso justifica la calidad de la imagen.

Con los editors gráficos actuales, generalmente puede hacerse una comparación de diferentes compresiones y formatos hasta llegar al equilibro en que pueda engañar al ojo humano, lo mucho que está dispuesto a esperar por verla y el tamaño e importancia en el discurso que se está construyendo.

Revisemos algunos formatos que aceptan los navegadores modernos para incorporar en una página web.

Foramto imágenes

JPEG

Es probablemente el formato más utilizado en la web para imágenes fotográficas. JPEG (Joint Photographic Experts Group) o simplemente JPG, nació en los noventa y fue de los primeros formatos de imagen que venían a resolver el problema del peso de la imagen sin perder mucha calidad.

Este comité entendió que, en la mayoría de los casos, 2 pixeles paralelos en una imagen, si no son iguales son sumamente parecidos, por lo que se podía eliminar los pixeles alrededor de un pixel seleccionado y duplicarlo a la hora de mostrarlo. (es un poco más complejo, pero es la idea). Se quita información para transmitirla y después se reinventa para mostrar, esto con diferentes niveles de calidad, hace que la imagen baje su peso sin perder información para engañara al ojo humano. A esto se llama compresión con pérdida.

Tomemos por ejemplo esta foto de un viñedo con la iglesia de fondo (Valle de Monte Grande). Comparando el peso de la imagen con diferente compresión, se puede llegar a un punto en que la historia de la imagen se entiende, y es más liviana de transmitir.

En general, es el mejor formato para imagenes fotográficas que tienen mucha más información por pixel que un logo o ícono.

GIF

Los GIF o Graphics Interchange Format, tuvieron una aproximación diferente. Evaluando una imagen, se dieron cuenta que no se necesitaba toda la información de colores existentes en la web, si no que se podía restringir a una planta de colores controlables y que la imagen requería.

Este formato es ideal para imágenes creadas digitalmente como logos e iconos y dominaron las primeras etapas de la web comercial.

Al controlar la paleta de colores que componen una imagen, nace también una posibilidad no prevista, de los GIF animados o una secuencia de imágenes, que comparten la misma paleta de colores, y que con pequeñas variaciones, son capaces de engañar al ojo (por la falla en el ojo de la persistencia rectilínea, la misma que nos permite tener cine y televisión), o sea una imagen persiste en la retina hasta que es sustituida por otra generando la sensación de movimiento.

PNG

Hay dos maneras de construir imágenes, mapa de bits o bitmaps, como BMP o TIFF (imágenes sin compresión) o JPEG o GIF bitmaps con compresión. La otra manera es vectorial, o sea coordenada de puntos que se rellenan con colores. Este último es muy utilizadas en imprenta por la capacidad de cambiar su tamaño sin perder calidad, a diferencia de los bitmpas que tienen que inventar o quitar información si se hace un cambio de tamaño haciendo que la imagen quede "pixeleada".

Con el tiempo se incorporó PNG (Portable Network Graphics) a los formatos interpretables en los browser y su gran aporte es mezclar los mundos de los vectores con el de los bitmaps. O sea, una imagen que define puntos o coordenadas y que rellena los pixeles entre medio.

Logra un segundo aporte en su proceso y es compresiones sin pérdidas de información de los pixeles, o sea, no elimina información como en los JPEG.

Si bien se ocupa en la fotografía digital, su mayor aporte está en la generaciones de imágenes no fotográficas.

SVG

El formato SVG (Scalable Vector Graphics) se incorporó a los browser a principios de los 2000 y aunque tardó en ser aceptado como un estándar, a venido a revolucionar la gráfica en la web.

Básicamente es una imagen vectorial que transmite las coordenadas como texto y es reinterpretado y construido por el navegador. No sólo tiene la ventaja del poco peso a la hora de transmitir, si no que puede ser manipulado con javascript para hacer animaciones o efectos.

El SVG se puede contruir en la página o incorporar como archivo externo. En el caso de construir, se basa en figuras y coordenadas que se entregan como información para ser interpretado.

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" >
    <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="blue" />
</svg>

Nota:
Llama la atención que las etiquetas de svg son auto cerradas con / al final de la orden como en HTML4, y es que svg y MathML no recibieron actualización al pasar a HTML5.

Claro que el ejemplo se puede expandir a un paisaje, si se tienen las habilidades gráficas para describirla en formas compuestas. No siempre con la misma cantidad de información que un bitmap, pero contando la historia de un viñedo con una iglesia al fondo.

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <!-- Cielo -->
  <rect width="100%" height="100%" fill="skyblue" />
  <!-- Sol -->
  <circle cx="700" cy="100" r="50" fill="yellow" />
  <!-- Campo de Viñedo -->
  <rect y="400" width="100%" height="200" fill="green" />
  <!-- Filas de vides -->
  <g stroke="sienna" stroke-width="5">
    <line x1="50" y1="400" x2="50" y2="600" />
    <line x1="100" y1="400" x2="100" y2="600" />
    <line x1="150" y1="400" x2="150" y2="600" />
    <line x1="200" y1="400" x2="200" y2="600" />
    <line x1="250" y1="400" x2="250" y2="600" />
    <line x1="300" y1="400" x2="300" y2="600" />
    <line x1="350" y1="400" x2="350" y2="600" />
    <line x1="400" y1="400" x2="400" y2="600" />
    <line x1="450" y1="400" x2="450" y2="600" />
    <line x1="500" y1="400" x2="500" y2="600" />
    <line x1="550" y1="400" x2="550" y2="600" />
    <line x1="600" y1="400" x2="600" y2="600" />
    <line x1="650" y1="400" x2="650" y2="600" />
    <line x1="700" y1="400" x2="700" y2="600" />
    <line x1="750" y1="400" x2="750" y2="600" />
  </g>
  <!-- Iglesia -->
  <rect x="500" y="150" width="150" height="200" fill="lightgray" />
  <polygon points="500,150 575,50 650,150" fill="gray" />
  <rect x="570" y="230" width="30" height="120" fill="gray" />
  <rect x="540" y="200" width="70" height="70" fill="white" />
  <rect x="560" y="260" width="30" height="60" fill="white" />
  <!-- Cruz de la Iglesia -->
  <line x1="585" y1="50" x2="585" y2="30" stroke="black" stroke-width="5" />
  <line x1="575" y1="40" x2="595" y2="40" stroke="black" stroke-width="5" />
</svg>

Es más común utilizar programas gráficos vectoriales para exportar un archivo svg y éste vincularlo al documento con la etiqueta img.

<img src="image/people-in-hot-springs-svgrepo-com.svg" alt="ejemplo de SVG">

No es buen formato para paisajes, pero es ideal para logotipos o isótopos.

ICO

ICO es un formato de imagen desarrollado por Microsoft para usar en Windows y poder poner iconos en la interfaz gráfica, no tiene mucha compresión, pero por el tamaño de su requerimiento es bastante liviano, se ocupa como favicon en las páginas web de manera standard, o sea la el icono que acompaña el "title" en las lengüetas del navegador.

No hay mayor uso de este formato dentro del contenido de una página web.

APNG

APNG o Animated Portable Network Graphics, es el último en incorporarse a la lista de imágenes que los browser pueden interpretar. Muy parecido al formato PNG, con la diferencia que éste puede ser animado o tener cuadros como el formato GIF.

Al ser el último en incorporarse su uso todavía no se ha extendido y hay pocas aplicaciones capaces de generarlos.

<img src="image/elephant.png" alt="ejemplo de APNG">

WEBP

En la competencia por la relación peso/calidad entró google con los equipos de investigación e inovación. Se desprendió del equipo de compresión de video un formato de imagen que optimiza el peso haciendo una relación de compresión de perdida como JPEG con la compresión sin pérdida como los PNG.

No sólo tiene mejor compresión que todos los formatos de imagen anteriores, si no que a más grande la imagen en pixeles y dpi, mayor es la diferencia de optimización. Mantiene la capacidad de transparencia y canal alfa como el PNG y el GIF, y puede hacer animaciones como el GIF animados o el APNG.

Todas estas características lo han potenciado como el formato ideal para la web y ha conseguido más adeptos cuando Adobe Photoshop lo adoptara como formato, aunque ya existían una gran cantidad de servicios online que generaban WebP.

Nota:
Aunque la mayor parte de los navegadores soportan WebP todavía no está completamente adoptado, por lo que es sugerible utilizarlo con imagenes alternativas en una etiqueta picture.

Uso de imágenes

img

La etiqueta <img>, de image, es la que vamos a utilizar para insertar una imagen en la estructura de nuestra página. Es una etiqueta abierta, ya que es una orden y no está afectando un contenido de texto.

Esta etiqueta tiene 2 atributos mínimo para poder funcionar: src y alt

src

El atributo src, de source o fuente, define la ruta de dónde se va a cargar la imagen. Debemos recordar, que las imágenes se solicitan en el barrido de interpretación del HTML, o sea cuando el documento ya está en el navegador del usuario y se encuentra con esta etiqueta y va a a buscar la imagen para incrustar a la ruta indicada, es por eso que aveces vemos que el contenido de nuestro sitio se reacomoda al alto y ancho de la imagen una vez descargada.

alt

Si bien, el atributo alt no es imperativo para mostrar imágenes, es absolutamente necesario para la accesibilidad de la misma por lo que se dice que es obligatorio.

Este atributo viene de los principios de uso de imágenes en las páginas web y significaba "texto alternativo", ya que navegadores como Netscape, no descargaba la imagen junto con la página por un tema de ancho de banda y si el texto alternativo, que describía la imagen, nos llamaba la atención, entonces se pedía bajarla manualmente. Con el aumento del ancho de banda y la mayor incorporación de imágenes a publicar por una necesidad comunicacional, este atributo se fue dejando de lado, pero renace cuando se comienza a hablar de la accesibilidad y usabilidad de los sitios.

El texto alternativo o alt se ocupa para la indexación de las imágenes en los buscadores como su referencia y se muestra si es que no se encuentra la imagen en el src especificado.

width y height

Si bien, el control de las imágenes se le da la responsabilidad a los estilos del sitio, la etiqueta <img> mantiene el atributo de alto y ancho en pixeles para poder reservar su espacio en el documento a mostrar hasta que termine de descargar.

Una cosa interesante con estos 2 atributos es que si sólo existe uno de ellos, el otro se acomoda proporcionalmente a la variación del que si está enunciado, o sea, si la imagen es de 100 x 100 pixeles y sólo se le da la medida del width a 50 pixeles, el height automáticamente es de 50 pixeles. Y si, las medidas son pixeles de manera predeterminada o se puede usar porcentaje (%) despues del número.

<img src="image/jpg30.jpg" width="30" alt="Montegrande">

picture

Desde la aparición de las multiplataformas, computadores de escritorio, portátiles, tabletas, móviles, televisores y ahora gafas virtuales, la capacidad y calidad de las imágenes que se puede mostrar son distintas, pero sólo se podía mostrar una imagen. Aquí es que se incorpora esta etiqueta con la capacidad de mostrar diferentes imágenes para diferentes resoluciones.

Se define una imagen base con la etiqueta <img>, pero se pueden poner diferentes source o fuentes para diferente tipo de anchos de dispositivos.

Nota:
Una propiedad interesante es que sólo baja una de las imagenes y no todas, optimizando el proceso de conversación con el servidor.

<picture>
    <source media="(min-width:650px)" srcset="image/jpg100.jpg">
    <source media="(min-width:465px)" srcset="image/jpg30.jpg">
    <img src="image/gif32.gif" alt="Viñedo Montegrande" style="width:auto;">
</picture>

Video

Si bien hay varios formatos de video digital, un par bien conocido por su éxito en los sistemas operativos como QT (QuickTime) de Apple o AVI (Audio Video Interleave) de Windows la relación peso/calidad que hablamos en la selección en el criterio de seleccionar una imagen, se aplica al video.

Basado en los principios openSource, la W3C, en la definición del formato de video standard para la web en el HTML 5 no se casó con ninguna de las dos empresas y optó por formatos nuevos como el MP4, WebM y Ogg con mejores resultado de compresión versus calidad.

Nota:
A la fecha, el navegador Safari de Apple, todavía no incorpora OGG como formato interpretable en la web.

Formatos de video

MP4

El formato MP4 (.mp4) de la familia de los de estándares MPEG (Moving Picture Experts Group) nace a finales de siglo pasado, con muy buenos resultados en la compresión de audio que se lleva a los video.

Tiene la ventaja de alta compatibilidad con la mayoría de los navegadores y dispositivos y ofrece un buen balance entre calidad y tamaño de archivo. Por otro lado, tiene la desventaja que puede tener problemas de rendimiento en algunos navegadores antiguos si no se optimiza correctamente.

WebM

El formato WebM (.webm) fue desarrollado por Google y se lanzó el 2010. Por lo que es un formato relativamente nuevo.

WebM fue creado para ser un formato ligero, de alta calidad y eficiente en cuanto a compresión, ideal para su uso en la web,.

Al igual que las imagenes WEBP, es de formato libre de regalías, optimizado para la web, con buena calidad y compresión. Compatible con la mayoría de los navegadores modernos. Su desventaja es que no es compatible con algunos navegadores y dispositivos más antiguos, especialmente Safari en algunas versiones.

Ogg

El formato Ogg (.ogv) fue desarrollado por Xiph.Org Foundation, una organización sin fines de lucro que crea formatos multimedia libres de regalías y software libre a principios del siglo. Ogg y sus códecs asociados fueron desarrollados para proporcionar una alternativa abierta y libre de patentes a los formatos multimedia propietarios

Es un formato libre de regalías. Compatible con Firefox y otros navegadores que apoyan software libre, pero de menor calidad en comparación con MP4 y WebM.

Uso de video

video

HTML 5 incorpora la etiqueta <video> para insertar videos en una página web, y al igual que la etiqueta <img> de las imagenes, hay que definir la ruta hasta el video.

<video src="mi-video.mp4" controls width="600">Su sistema operativo no reconocne el formato MP4</video>

Tiene 2 posibles usos. Por un lado, como una etiqueta única, como en el caso anterior, dónde la dirección del video se define en el atributo src. En él podemos poner una línea de texto, que sólo será vicible si el navegador no conoce la etiqueta.

Debido a que es tecnología en incorporación y no todos los sistemas operativos y navegadores cononcen o pueden interpretar todos los formatos, se puede usar como <picture> definiendo varias fuentes de origen según la compatibilidad del navegador con el atributo <source>.

<video controls width="600">
  <source src="mi-video.mp4" type="video/mp4">
  <source src="mi-video.webm" type="video/webm">
  <source src="mi-video.ogv" type="video/ogg">
</video>

En este ejemplo, si no puede ejecutar el mp4, prueba con webm y después con .ogv

Tiene varios atributos que permiten un mayor control sobre el video y que extienden su capacidad o presentación.

autoplay

El atributo autoplay le dice a la página que comience a ejecutar el video en lo que termine de cargar la página.

Este atributo entra en conflicto con el convenio de no autoejecutar videos con audio que podrían generar conflictos si comienza a sonar en lugares público. por lo que siempre debe ir acompañado del atributo muted para que se auto ejecute, pero sin audio.

muted

El atributo muted le dice al video que no ejecute la pista de audio a menos que el usuario seleccion el audio para que se escuche.

controls

El atributo controls genera una barra de control del video para parar/pausar y adelantar o retroceder.

width

El atributo width controla el espacio reservado y de visualización en pixeles del ancho del video.

height

El atributo height controla el espacio reservado y de visualización en pixeles del alto del video.

loop

El atributo loop le dice al video que se vuelva a reproducir una vez terminado.

poster

El atributo poster define un la ruta a una imagen que se presnta como caratula del video, hasta que se ponga play o autoplay.

preload

El atributo preload le dice al navegador que comience a hacer una precarga del video aunque no se está ejecutando, muy útil si el video es grande.

Tienes 3 posibles valores:

preload="auto"

Le indica al navegador que cargue el video completo tan pronto como la página se carga, incluso si el usuario no ha comenzado a reproducirlo

preload="metadata"

Solo carga los metadatos del video, como la duración, dimensiones, y posiblemente el primer cuadro, pero no el contenido completo del video

preload="none"

No se carga ningún dato del video hasta que el usuario interactúa directamente con él, por ejemplo, al presionar el botón de reproducción

src

El atributo src determina la ruta hacia el archivo de video que se quiere mostrar.

playsinline

El atributo playsinline en la etiqueta <video> se utiliza para controlar cómo se reproduce un video en dispositivos móviles, específicamente en dispositivos como el iPhone y iPad.

source

La etiqueta <source> se ocupa anidada en la etiqueta <video> y permite definir la o las rutas alternativas de varios formatos de video y así poder seleccionar el más eficiente o que puede leer el sistema operativo y navegador del usuario.

<video src="mi-video.mp4" controls autoplay loop muted poster="mi-imagen.jpg" preload="auto" width="600" height="400" playsinline>
  <source src="mi-video.webm" type="video/webm">
  <source src="mi-video.ogv" type="video/ogg">
  Tu navegador no soporta la reproducción de video.
</video>

Integración externa

Ya que es una tecnología reciente, sin una estandarización aceptada en todos los navegadores y sistemas operativos, muchas veces, en vez de tener alojado varios formatos alternativos y ocupar espacio de hosting, es preferible entregar esta responsabilidad a plataformas dedicadas a la distribución de videos como Youtube o Vimeo.

Ambas plataformas, al seleccionar compartir un video, ofrecen la alternativa de un código HTML para "incrustar" como <iframe> o un "inline frame" en nuestra página. Parece que perteneces a la misma página, pero en realidad lo incluye desde otra fuente.

Aparte del ahorro de peso en servidor propio o el consumo de los megas de transferencia, que son las dos maneras de cobrar el hosting, tiene la ventaja de que por cada video que subimos se generan automaticamente en la plataforma varias versiones en diferentes formatos y se entrga el mejor formato para el usuario, su navegador y velocidad de conexión.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=KiA4gAMr1uByget3" title="YouTube video player"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Audio

Al igual que con el video, existen muchos formatos de audio, desde sólo partituras como MIDI (Musical Instrument Digital Interface) hasta sin compresión como WAV (Waveform Audio File Format). Obiamente, se necesitaba un formato de audio liviana y de buena calidad y que no fuera propietario para distribuir audio en una página web, por lo que la W3C se decidió por las estandarización en 3 formatos: MP3, OGGG y WAV

Formatos de audio

MP3

El MP3 o MPEG Audio Layer III es el formato más aceptado y compatible con la mayoría de los navegadores.

Tiene la ventaja de un excelente balance entre calidad y tamaño de archivo. Sus creadores descubrieron que la mayor parte no escucha o interpreta la frecuencias altas y las muy bajas, por lo que se se eliminan, el archivo baja de peso al tener menos información.

OGG

El OOG es un formato de compresión con pérdida, libre de patentes y compatible con la mayoría de los navegadores modernos (Apple a la fecha no lo incluye en su navegador safari).

Genera archivos muy livianos de alta calidad.

WAV

El formato WAV es compatible con la mayoría de los navegadores, aunque no tan ampliamente utilizado como los formatos comprimidos por su peso y falta de compresión.

Si el proyecto requiere alta calidad, se justifica el peso y se entiende su uso, aunque para la mayor parte de proyectos se usa .mp3 o .ogg con buenos resultados.

Uso de audio

audio

Al igual que con el video, la etiqueta <audio> define el espacio para incluir un audio en la página web.

Como es una etiqueta naciente, al igual que la etiqueta <video>, se puede complementar con la etiqueta <source> para definir fuentes alternativas compatibles con el navegador que la usa.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</audio>

Esta etiqueta tiene varios atributos que le dice cómo se carga y se reproduce el audio en una página web.

autoplay

Hace que el audio se reproduzca automáticamente tan pronto como se carga la página.

Muchos navegadores limitan el uso de autoplay cuando el audio no está silenciado (muted), para evitar que el audio se reproduzca de forma intrusiva.

muted

Carga el audio en silencio. Este atributo es útil en conjunto con autoplay para evitar que el audio se reproduzca automáticamente con sonido.

controls

Muestra controles de reproducción (play, pause, volumen, etc.) para que el usuario pueda interactuar con el audio.

loop

Hace que el audio se repita indefinidamente una vez que termina

preload

Indica al navegador cómo manejar la precarga del audio antes de que el usuario lo reproduzca. Tiene tres posibles valores: auto, metadata y none.

src

Define la URL del archivo de audio que se va a reproducir.

<audio controls autoplay loop muted preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</audio>

Nota:
Si se agrega un texto dentro de la etiqueta, éste se mostrará si el navegador no entiende la etiqueta <audio>.

source

Esta etiqueta se usa anidada en la etiqueta <audio> y, al igual que con la etiqueta <video>, define varias posibles fuentes que se ajusten mejor a la capacidad del navegador del usuario.

Estructura base

table

La etiqueta <table> encierra la estructura de una tabla. Dentro de ella se defiende primero las filas y después las celdas que lo componen. Es bastante común hablar de filas y columnas con las tablas, sin embargo, las columnas son un impresión visual. Lo que realmente existen son las celdas en una fila y una celda sobre otra celda, de otra fila, genera la sensación de columna.

La primera regla que tiene que vigilarse en la construcción de tablas es que que todas las filas tengan la misma cantidad de celdas, si no, la estructura de la tabla se rompe.

El otro elemento a tener simpre en cuenta es que el contenido determina el ancho y alto de una celda. Y a su vez, el alto de las celdas determina el alto de la fila completa y la celda más ancha, determina el ancho de toda la "columna", jugando de manera armónica porque siempre se cumple la primera regla de estructura.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

Nota:
Si bien hay varios atributos que se pueden definir en ésta etiqueta, como los bordes, ancho, márgenes y padding entre celdas, generalmente se deja esta labor a CSS ya que tiene que ver más con la presentación que con el dato.

tr

La etiqueta <tr>, de table row, define la fila de una tabla, anidado en ella se definen las "table data" o celdas con la etiqueta <td>.

td

La etiqueta <td> define la celda dentro de la tabla y dentro de ella se pone el contenido. Estas tres etiquetas, <table>, <tr> y <td> son lo mínimo para construir una tabla.

th

La etiqueta <th> o table heading es similar a la etiqueta <td> en cuanto a definición de celda, pero se ocupa para definir cuando una celda es cabecera o título de "columna".

<table>
  <tr>
    <th>Nombre</th>
    <th>País</th>
    <th>Época</th>
    <th>Aportes</th>
  </tr>
  <tr>
    <td>José Martí</td>
    <td>Cuba</td>
    <td>Siglo XIX</td>
    <td>Ideas de libertad y justicia social, lucha por la independencia de Cuba</td>
  </tr>
  <tr>
    <td>Simón Bolívar</td>
    <td>Venezuela</td>
    <td>Siglo XIX</td>
    <td>Contribuciones al pensamiento político y la independencia de América Latina</td>
  </tr>
  <tr>
    <td>José Carlos Mariátegui</td>
    <td>Perú</td>
    <td>Siglo XX</td>
    <td>Fundación del socialismo peruano, análisis marxista de la realidad latinoamericana</td>
  </tr>
  <tr>
    <td>Leopoldo Zea</td>
    <td>México</td>
    <td>Siglo XX</td>
    <td>Filosofía de la historia, estudios sobre la identidad latinoamericana</td>
  </tr>
</table>

Estructura completa

Si se quiere ser más detallista, las tablas pueden tener 3 partes, la cabecera de la tabla, el cuerpo y el pie de la tabla, estas 3 partes se definen con las etiqueta <thead>, <tbody> y <tfoot>. Pueden coexistir las 3 o sólo 2, dependiendo de los datos que vamos a presentar.

De la misma forma, dependiendo de los datos, En los 3 casos pueden haber una o más filas (<tr>) con sus respectivas celdas.

thead

La etiqueta <thead> define una parte de la tabla como cabecera de la tabla, generalmente se anida en el un fila <tr> con <th> para definir sus celdas.

tbody

La etiqueta <tbody> define el cuerpo o contenido de la tabla, generalmente filas con <td> en su interior.

tfoot

La etiqueta <tfoot> se ocupa menos que las dos anteriores y define el pie de la tabla o la raya para la suma.

caption

<caption> es una etiqueta flotante que va generalmente después de la definición de la table con la etiqueta <table> y antes del <theader>, es un título o texto descriptivo del contenido de la tabla, se representa en HTML fuera de la estructura de la tabla, pero físicamente tiene que estar dentro de la etiqueta <table> para que haga la relación semántica.

<table>
  <caption>
  boleta de venta
  </caption>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>$10.00</td>
      <td>2</td>
      <td>$20.00</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>$15.00</td>
      <td>1</td>
      <td>$15.00</td>
    </tr>
    <tr>
      <td>Producto C</td>
      <td>$7.50</td>
      <td>4</td>
      <td>$30.00</td>
    </tr>
    <tr>
      <td>Producto D</td>
      <td>$5.00</td>
      <td>3</td>
      <td>$15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>Total</td>
      <td>$80.00</td>
    </tr>
  </tfoot>
</table>

Atributos de tablas

colspan y rowspan

Un tema interesante, en el uso de las celdas, y basado en la regla de que siempre tiene que haber la misma cantidad de celdas por fila, es la capacidad de que una celda valga por 2 o más celdas en una fila, para eso se usa el atributo colspan o sea "junta columnas" o puede valer por 2 o mas celdas en la misma columna, lo que seria el atributo rowspan o "junta fila", o incluso de ambas.

<table>
  <caption>
  Lista de Piezas de Motor de Moto
  </caption>
  <thead>
    <tr>
      <th>Pieza</th>
      <th>Descripción</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Cilindro</td>
      <td>Parte del motor donde ocurre la combustión</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Incluye pistón y segmentos</td>
      <td>1</td>
    </tr>
    <tr>
      <td colspan="2">Cigüeñal</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Válvulas</td>
      <td>Controlan la entrada y salida de aire y combustible</td>
      <td>4</td>
    </tr>
    <tr>
      <td rowspan="2">Sistema de Encendido</td>
      <td>Bujías</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Bobina de encendido</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total de Piezas</td>
      <td>10</td>
    </tr>
  </tfoot>
</table>

Área de formulario

Para que un formulario funcione, debe primero declarase con la etiqueta <form></form>, es, dentro de estos tags, que se van a colocar los campos "input" del formulario y van a ser enviados a la acción determinada con el método deseado.

<form name="form1" method="post" action="">

</form>

Representados en Dreamweaver con una línea roja punteada, aunque físicamente no existe y no se va a ver en nuestra página, Dreamweaver lo hace para indicarnos el lugar donde va el contenedor de los elementos de formulario.

Nota:
Si no se ve, puede ser que en las preferencias no esté activo o en la visualización está desactivada:
- Revisa en las preferencias, en los elementos invisibles si el "form delimiter" esta seleccionado.
- Selecciona el menú "view/visual aids" y verifica que este seleccionado el mostrar los elementos invisibles

El atributo "action", determina la dirección donde los datos recogidos dentro del formulario, van a ser enviados para ser procesados. Si no es definido, entonces el servidor asume que tiene que enviar los datos a la misma página que muestra el formulario.

El "method" se refiere a si lo vamos enviar vía post o get. De manera predeterminada el método, si no es definido, suele ser post, que significa que va a enviar los datos del formulario en el cuerpo del documento del mensaje. El método get anexa las solicitudes del formulario a la URL y es visible en la barra de dirección del browser.

Los campos de dato de los formularios son alimentados por el sistema operativo, por eso es que el entorno varía según sea el sistema operativo. Todos comparten los parámetros name (nombre) y value (valor), y es precisamente, dependiendo de quíen selecciona este último atributo el que nos permite generar una nueva propuesta de categorización más orientada a la funcionalidad e interrelación entre el usuario y el sistema:

• Campos libres
• Campos mixtos
• Campos cerrados

Campos libres

Este tipo de campo es propio del usuario. En él entrega información libremente, típico de los campos de nombre, teléfono u opinión, donde no se puede limitar a una lista (¿cuántos nombres habrán en el mundo?).

input

Los input son campos libres para ingresar datos, de manera predeterminada es del type texto, pero se pude definir otros tipos de campos.

<input type="text" name="nombre_campo">

Es importante entender que el tipo de campo está amarrada a la validación de los datos en los navegadores modernos.

Sus atributos:

type

El tipo de dato que el campo input va a tener.

name

Determina el nombre del campo y de la variable a transmitir.

maxlenght

Seguido de un valor que limitará el número máximo de caracteres a introducir en ese campo.

size

Seguido de un valor que limitará el numero de caracteres a mostrar en pantalla.

value

Indica el valor inicial del campo.

required

Si el campo es obligatorio o no.

password

password indica que el campo a introducir será una una clave. Mostrará asteriscos en lugar de letras escritas.

<input type="password">

Sus atributos:

name

Determina el nombre del campo y de la variable a transmitir.

maxlenght

Seguido de un valor que limitará el número máximo de caracteres a introducir en ese campo.

size

Seguido de un valor que limitará el numero de caracteres a mostrar en pantalla.

value

Indica el valor inicial del campo.

date

date define un campo de fecha que el browser agrega una calendario para seleccionar la fecha.

<input type="date">

Sus atributos:

name

Determina el nombre del campo y de la variable a transmitir.

value

Indica el valor inicial del campo.

Tambien existen los campos input del tipo month para mes, time para horas, week para semanas

email

email indica que el campo a introducir será un correo electrónico y el navegador validará que tenga estrucura de email.

Sus atributos:

<input type="email">

name

Determina el nombre del campo y de la variable a transmitir.

value

Indica el valor inicial del campo.

tel

tel indica que el campo a introducir será un número telefónico.

Sus atributos:

<input type="tel">

name

Determina el nombre del campo y de la variable a transmitir.

value

Indica el valor inicial del campo.

url

url indica que el campo a introducir será una drección URL (Uniform Resource Locator).

<input type="url">

Sus atributos:

name

Determina el nombre del campo y de la variable a transmitir.

value

Indica el valor inicial del campo.

Textarea

Los textarea delimitan un campo libre y generalmente de varias líneas para introducir texto. A diferencia de los input del tipo text, en estos se puede poner salto de línea en el area de texto.

<textarea></textarea>

Sus atributos:

name

Determina el nombre del campo y de la variable a transmitir

cols

Determina el ancho que ocupará en pantalla

rows

Determina la cantidad de filas o alto de la caja de texto

wrap

Determina que el texto va a seguir en su línea o respetar el espacio del campo.

Campos mixtos

Estos tipos de campos son de libre selección del usuario, pero limitados por el programador de la página. Se usan para tener control sobre el tipo de información que el usuario está entregando. Para una BD no es lo mismo "chile" que "Chile" o "CHILE" por lo que pedirle que escriba en un campo de texto el país de origen al usuario no basta, hay que limitarlo a un sólo tipo controlable que después facilite su selección, filtraje o agrupación a la hora de recuperar el dato desde una Base de Datos.

Aquí también podemos encontrar 3 tipos de elementos de formulario:

Checkbox

<input type="checkbox">

Determina un campo cuadrado que se puede seleccionar con un clic del mouse. El nombre y el valor a transmitir es determinado por el programador y el usuario es libre de seleccionarlo (uno o varios).

Los atributos son:

name

Nombre del campo.

value

Valor a transmitir si es seleccionado.

Radio

<input type="radio">

Determina un círculo que se puede seleccionar. La diferencia con los checkbox no son estéticos sino funcionales. Los checkbox son de múltiple selección mientras que los radio son limitados a una selección. Aquí el nombre del elemento es fundamental para que sea seleccionable uno sólo.

Los atributos son:

name

Nombre del campo.

value

Valor a transmitir si es seleccionado.

Select

<select></select>

Los select son un poco más complejos, aunque tienen la misma funcionalidad que los anteriores. El nombre de la variable a transmitir está determinado en el atributo name del <select>, mientras que los valores a transmitir se determinan en el tag <option>. La combinación de ambos, genera un menú desplegable con valores a mostrar y valores a transmitir.

<select name="numero">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>

La etiqueta select se puede modificar con el atributo size que convierte el menú desplegable en una lista, que además puede ser de múltiple selección, pero su uso es poco común por lo complicado de su manejo para el usuario final y el espacio que ocupa en el diseño de nuestra página.

File

Campo para poder recoger la dirección de un archivo en el computador del usuario y enviarlo a un directorio temporal en el servidor al momento del submit. Es del tipo mixto, no porque nosotros determinemos el valor a transmitir como en los casos anteriores, si no por que el usuario solamente puede escoger archivos de su computador y no puede intervenir en la modificación del valor a transmitir.

<input type=" file">

Nota:
Para que realmente tenga efectividad el extraer y enviar un archivo del computador del usuario al directorio temporal en el servidor, el <form> tiene que tener el aributo enctype="multipart/form-data" y el método tiene que ser POST.

Campos cerrados

Estos campos son propios del programador y sirven tanto para la acción como para transmitir datos y por lo general el usuario no sabe que se transmiten.

Hidden

<input type="hidden" value="el_valor">

Campo oculto donde transmite nombre y valor sin que el usuario intervenga, por ejemplo el usuario no tiene porque saber desde qué página está mandando los datos de un formulario, pero si es un dato que el programador necesita.

Los atributos son:

name

Nombre del campo.

value

Valor a transmitir.

Submit

<input type="submit">

Elemento botón que tiene como funcionalidad enviar los datos que están dentro de las etiquetas <form></form>, además, en sí mismo, transmite valor. Los atributos son:

name

Nombre del botón.

value

Valor que transmite el elemento y lo que despliega como texto en el cuerpo del botón.

Otros

Existen otros campos que están sujetos a funcionalidad más que a la comunicación entre el usuario y el programador. Por ejemplo el campo del tipo reset que parece un botón de enviar, pero su funcionalidad es específica con el browser.

Reset

<input type="reset">

Tiene la misma visualización que el elemento submit, pero tiene como objetivo volver a su estado inicial todos los campos que están dentro los tags <form></form>.

Button

<input type="button">

Botón "ton-tón", que no tiene más objetivo que ser un elemento de interfaz conocido y generalmente asociado con la acción. Este tipo de elemento generalmente se usa relacionado con programaciones javascript para darle funcionalidad, ya que dentro de un formulario no aporta nada (ton-tón).

ImageField

<input type="image">

En un formulario cumple las funciones de un botón submit, pero con gráfica personalizable. No transmite valor en sí misma, más allá de las coordenadas de la interacción con el mouse, a pesar de tener los atributos de name y value, pero sí realiza acción. Tiene los atributos de imagen: src, width y height.

Todos estos elementos del formulario se pueden poner en una página web desde la paleta de objetos "forms" y puede administrarse su contenido, parámetros y valores, con la paleta de propiedades.

Nota:
Recuerda revisar que todos los elementos del formulario tengan un nombre relacionado con el tipo de campo que se solicita (name).