Etiqueta <a>
La etiqueta <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL. Por ejemplo:
<a href="www.mab55.com">Enlace a la web de Mab55</a>
Atributos de la etiqueta <a>
href
Especificamos el enlace o ruta donde queramos ir. Es importante saber que a parte de una url, también podemos colocar cualquier protocolo soportado por el navegador como:
- file: Sirve para enlazar a un archivo.
- mailto: Sirve para enlazar a un mail.
target
Definimos la forma en la cual se va a abrir el enlace. En este atributo podemos asignarle los siguientes comportamientos:
- _self: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.
- _blank: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.
- _parent: Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.
- _top: Carga la URL en el contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo modo que _self.
<a href="www.mab55.com" target="_self">Enlace con target _self</a>
<a href="www.mab55.com" target="_nblank">Enlace con target _nblank</a>
<a href="www.mab55.com" target="_parent">Enlace con target _parent</a>
<a href="www.mab55.com" target="_top">Enlace con target _top</a>
Etiqueta <meter>
La etiqueta <meter> define una medida escalar dentro de un rango conocido o un valor fraccionario.
<meter max=1.0 min=0.0 value=0.5></meter>
Atributos de la etiqueta <meter>
value
Un número de punto flotante que representa el valor actual del rango medido. Esto debe estar entre el valor min y el max (si se especifica).
min
Indica el límite inferior del rango medido. Esto debe ser menor que el valor max (si se especifica). Si no se especifica, el valor mínimo es 0.
max
Indica el límite superior del rango medido. Este debe ser mayor que el valor min (si se especifica). Si no se especifica, el valor máximo es 1.0.
Etiqueta <img>
La etiqueta <img> nos permite mostrar una imagen por pantalla.
<img src="puente.jpg" alt="Puente" width="250">
Atributos de la etiqueta <img>
alt
Define un texto alternativo para la imagen
width y height
Establecemos la anchura (width) y altura (height) de la imagen.
src
Propiedad más importante. Aquí es donde se establece el enlace de la imagen.
Etiqueta <video>
El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad de plug-ins ni reproductores.
La etiqueta <video> se usa para la reproducción nativa de archivos de vídeo en el navegador sin necesidad de plug-ins ni reproductores externos.
<video id='video' controls="controls" preload='none' width="300" poster="../img/tema1/sec5/miniatura.jpg"> <source id='mp4' src="../img/tema1/sec5/videoplayback.mp4" type='video/mp4'/> </video>
Atributos de la etiqueta <meter>
controls
Especifica si se muestran o no los controles en el vídeo (es recomendable mantener activada esta opción).
width
Indica el ancho que tendrá el vídeo.
loop
Indica si el vídeo debe reproducirse una y otra vez.
preload
Indicamos si queremos que el vídeo se active automaticamente.
poster
Imagen que se mostrará antes de cargar el vídeo.
Etiqueta <audio>
La etiqueta <audio> se usa para la reproducción de archivos de audio en el navegador sin necesidad de plug-ins ni reproductores externos.
<audio controls="controls"> <source src="http://www.noiseaddicts.com/2514.mp3" type="audio/mpeg" /> </audio>
Atributos de la etiqueta <audio>
controls
Especifica si se muestran o no los controles en el vídeo (es recomendable mantener activada esta opción).
loop
Indica si el vídeo debe reproducirse una y otra vez.
preload
Indicamos si queremos que el vídeo se active automaticamente.
poster
Imagen que se mostrará antes de cargar el vídeo.
Etiqueta <menu>
La etiqueta <menu> nos permite crear un menu para nuestra web.
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
Etiqueta <time>
La etiqueta <time> se usa para mostrar una hora en nuestro sitio web.
<time datetime="20:00">20:00</time>
Atributos de la etiqueta <time>
datetime
Especificamos la hora que queremos mostrar.
Etiqueta <figure> & <figcaption>
La etiqueta <figure> da visualización de bloque de contenido que es autónoma, como una imagen, junto con un elemento <figcaption> opcional.
<figure>
<img width="300px;" src="https://cimage.se/image/loro.png" alt="Imagen de un loro">
<figcaption>Figura 1: Esta es una simple imagen.
</figcaption>
</figure>
Etiqueta <main>
La etiqueta <main> se usa para estabecer la sección del contenido de la página.
Etiqueta <header>
La etiqueta <header> se usa para estabecer la sección de la cabecera de la página.
Etiqueta <footer>
La etiqueta <footer>, se usa para estabecer la sección del pie de la página.
Etiqueta <nav>
La etiqueta <main>, se usa para estabecer la sección del menú de navegación de la página.
Etiqueta <article>
La etiqueta <main>, se usa para estabecer la sección de artículo en la página.
Etiqueta <section>
La etiqueta <section>, se usa para estabecer una sección en la página.
Etiqueta <aside>
La etiqueta <aside>, se usa para estabecer la sección lateral de la página.