HTML tiene seis etiquetas de títulos/subtítulos: de <h1> hasta <h6>, correspondiendo los números al nivel jerárquico. Es decir, una etiqueta <h1> sería el nivel jerárquico máximo, <h2> los subtítulos de los niveles h1 y así sucesivamente. Veamos un ejemplo:

<h1>Título h1 </h1>
<h2>Título h2 </h2>
<h3>Título h3 </h3>
<h4>Título h4 </h4>
<h5>Título h5 </h5>
<h6>Título h6 </h6>

Para crearlas en HTML: en el caso de las listas enumeradas se usa la etiqueta <ol> y en el caso de las no enumeradas (con viñetas), se usa la etiqueta <ul>. En ambos casos se usa <li> para los elementos de la lista. Observa un ejemplo:

<ol>
  <li>El primer punto</li>
  <li>El segundo punto</li>
  <li>El tercer punto</li>
</ol>

La etiqueta <table> demarca la tabla. Dentro de ella, cualquier fila se demarca con <tr> que viene de “table-row” (fila de tabla, en inglés).

Podemos tener una primera fila con celdas con la etiqueta <th> (“table header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas (columnas) ordinarias con datos con la etiqueta <td>, “table data”. Todo ello lo puedes observar en el ejemplo:

<table border=1>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Web</th>
  </tr>
  <tr>
    <td>Lara</td>
    <td>Centeno</td>
    <td>https://www.laracenteno.com/</td>
  </tr>
  <tr>
    <td>Patricio</td>
    <td>Rivas</td>
    <td>https://www.patriciorivas.com/</td>
  </tr>
</table>

La etiqueta de un enlace es la etiqueta por excelencia en una página web. Esta etiqueta es <a>, de “anchor” (ancla en inglés) y su sintaxis básica es la siguiente:

<a target=”_blank” href=”[url del enlace]”>Texto del enlace</a>

La información clave, el enlace, viene en el atributo href, aquí debes insertar la URL del sitio que quiere enlazar. El atributo target también es muy importante. Sus valores más usados (y los únicos que necesitas realmente en la práctica) son “_blank”, que quiere decir la página del enlace se abre en una nueva pestaña/ventana, y “self”, que la abre en la pestaña/ventana del documento actual.

Su apariencia resulta: Texto del enlace

La etiqueta HTML para insertar una imagen en HTML es <img> y su sintaxis básica la siguiente:

<img src="[url de la imagen]" alt="[texto]" height="100" width="50">

Aquí el atributo src es el equivalente a href en el caso del enlace anterior: una URL que apunta a la imagen que quieres visualizar. Si la imagen se encuentra en el mismo servidor que el fichero html, basta con poner su nombre precedido de la ruta de carpetas a seguir hasta llegar a ella. Si está en una capeta de un servidor web, un ejemplo puede ser:

https://undominio.com/imagenes/laimagen.png

Otro atributo muy importante es alt:

• En caso de que el enlace a la imagen esté roto, visualizará un texto alternativo que será el texto asociado a este atributo,
• Además, Google lo tiene muy en cuenta para posicionar la imagen (en la búsqueda de imágenes).

Los atributos height y width te permiten especificar las dimensiones a las que ajustar la imagen en el navegador.

Con esta estructura tu página mostrará el típico reproductor de audio con un botón de play, barra de progreso, control de volumen, etc.:

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

En la etiqueta source: el atributo src indica la URL con la ubicación del fichero de audio.

En el atributo type tenemos que especificar el tipo de formato de audio utilizado. En el ejemplo viene el más usado, MP3, pero también se admiten los formatos OGG (valor “audio/ogg”) y WAV (“audio/wav”).

Fíjate también en el texto de “Tu navegador…” que se ha añadido al elemento audio. Este texto normalmente no se visualizará, es para el caso de navegadores muy antiguos que no soporten este elemento de HTML 5.

En tu página aparecerá:

El caso del vídeo es similar al del audio no requiere mucha explicación. Añadir que también se soporta el formato OGG. La sintaxis sería:

<video width="320" height="240" controls>
  <source src="VID_PRO2BAC_REA05_Bucles_anidados_v02.mp4" type="video/mp4">
  Tu navegador no soporta este elemento de audio.
</video>

Y aparecerá en tu web como:

La manera general de trabajar con audio y vídeo es otra: subir estos contenidos a una o varias plataformas especializadas como SoundCloud para audio, YouTube para vídeo, etc.

Así ahorrarás muchos recursos en tu servidor. Embeber los contenidos subidos a estas plataformas es muy fácil: todas ellas suelen tener una opción de compartir para generar código HTML que simplemente se copia y pega en tu página.

En la imagen puedes ver lo que sucede en el caso de YouTube cuando se elige la opción de “compartir” debajo de un vídeo y, a continuación, “insertar”:

En este ejemplo, con los elementos input podemos crear campos en la página que recogen la información que el usuario introduce, una información estructurada que puede ser procesada por una máquina.

En este formulario, tenemos cuatro parejas campo – valor:

1. Nombre – [lo que haya tecleado el usuario]
2. Email - [lo que haya tecleado el usuario]
3. Asunto - [lo que haya tecleado el usuario]
4. Solicitud - [lo que haya tecleado el usuario]

En el momento que el usuario haga clic en el botón del formulario, esta información se envía a la URL especificada en el atributo action de la etiqueta form.