Curso HTML 5 | Aprendoencasa https://www.aprendoencasa.com Tu formación gratuita online. Wed, 31 Jul 2019 18:50:34 +0000 es hourly 1 https://www.aprendoencasa.com/wp-content/uploads/2018/12/cropped-logo4-32x32.png Curso HTML 5 | Aprendoencasa https://www.aprendoencasa.com 32 32 Etiqueta <AUDIO>, Curso Práctico HTML5 https://www.aprendoencasa.com/etiqueta-audio-curso-practico-html5/ https://www.aprendoencasa.com/etiqueta-audio-curso-practico-html5/#respond Wed, 31 Jul 2019 18:50:34 +0000 https://www.aprendoencasa.com/?p=801 Etiqueta <AUDIO> La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de audio. Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también depende del navegador que se permita su reproducción. La siguiente lista muestra los formatos y su reproducción en […]

La entrada Etiqueta apareció primero en Aprendoencasa.]]> Etiqueta <AUDIO>

La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de audio.



Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también depende del navegador que se permita su reproducción.

La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.

Navegador MP3 Wav Ogg
Internet Explorer SI NO NO
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera NO SI SI

La sintaxis de la etiqueta es la siguiente.

<audio autoplay controls loop muted preload=”valor” src=”valor”>
	Texto para navegadores que no soportan audio…
</audio>

Entre los atributos de la etiqueta encontramos los siguientes.

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el audio a cargar en el documento web.

Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a reproducir el audio.

Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

autoplay

El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el archivo cargado por el navegador.

Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el atributo en la etiqueta.

controls

El atributo es booleano, por lo que, al ser especificado en la etiqueta, permite que se visualicen los controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa, búsqueda y volumen.

loop

Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle, cuando finalice el audio volverá a empezar de nuevo.

muted

Al especificar el atributo, el archivo de audio será cargado, pero se activará la opción de silenciar el audio.

preload

El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se realiza una precarga inicial del archivo de audio.

Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el que active el audio pulsando sobre el control correspondiente.

Si se indica el valor auto, se realiza la precarga completa del archivo de audio, para que la reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si no se compromete la velocidad de descarga entre el cliente y servidor.

Por último si se especifica el valor metadata, se realiza como precarga solo la información concerniente al archivo de audio, como duración, dimensión, etc.

Se ha de tener en cuenta que, para realizar una carga correcta del formato de audio, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.

Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se utilice la misma.

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes:

Valor MIME Audio/Video
video/ogg Video
video/mp4 Video
video/webm Video
audio/ogg Audio (*.ogg)
audio/mpeg Audio (*.mp3)

El siguiente ejercicio muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<audio controls>
    <source src="Hoy.mp3" type="audio/mpeg">
    <source src="Hoy.ogg" type="audio/ogg">
    El Navegador NO SOPORTA AUDIO.
</audio>
</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imagen.

Etiqueta Audio HTML5

Curso práctico HTML5, etiqueta AUDIO

Gracias por vuestra visita y un saludo!!!

Busca tu articulo

Utiliza este buscador para encontrar el articulo que te interesa, si no existe la practica o ejercicio, deja un comentario proponiendo que realicemos un articulo sobre el, gracias por vuestra visita y un saludo!!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
La entrada Etiqueta apareció primero en Aprendoencasa.]]> https://www.aprendoencasa.com/etiqueta-audio-curso-practico-html5/feed/ 0 Etiqueta <DETAILS>, Curso Práctico HTML5 https://www.aprendoencasa.com/etiqueta-details-curso-practico-html5/ https://www.aprendoencasa.com/etiqueta-details-curso-practico-html5/#respond Wed, 31 Jul 2019 08:43:49 +0000 https://www.aprendoencasa.com/?p=798 Etiqueta <DETAILS> La etiqueta <details>, permite definir contenido que el usuario puede visualizar u ocultar según le interese. La etiqueta permite cualquier tipo de contenido, y para visualizar el mismo se ha de realizar un clic sobre el símbolo correspondiente en el navegador, para que la etiqueta muestre su contenido, ya que por defecto y […]

La entrada Etiqueta
, Curso Práctico HTML5 apareció primero en Aprendoencasa.]]> Etiqueta <DETAILS>

La etiqueta <details>, permite definir contenido que el usuario puede visualizar u ocultar según le interese. La etiqueta permite cualquier tipo de contenido, y para visualizar el mismo se ha de realizar un clic sobre el símbolo correspondiente en el navegador, para que la etiqueta muestre su contenido, ya que por defecto y si no se especifica lo contrario se establece como oculto.



La sintaxis de la etiqueta es la siguiente.

<details open>
	<summary>Titulo del contenido</summary>	
	Contenido de la etiqueta …
</details>

La etiqueta tiene solo un atributo, open, si se especifica el contenido de la etiqueta se muestra visible al cargar el documento web. Es un atributo booleano, por lo tanto, solo está activado en caso de reflejarse el mismo en la etiqueta, por defecto no se suele utilizar.

Por otra parte, para que se visualice como título de la etiqueta, sirviendo a su vez de texto de referencia, para visualizar o no el contenido, se utiliza la etiqueta <summary></summary>, en la que se ha de teclear el título que se desea visualizar, esta etiqueta de título ha de ser la primera etiqueta del contenido de la etiqueta <details>.

El siguiente ejemplo muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<h1>Páginas webs interesantes</h1>
<details>
    <summary>Buscadores</summary>
    <ul>
        <li><a href="http://www.google.es">Google</a></li>
        <li><a href="http://www.bing.es">Bing</a></li>
    </ul>
</details>
<details>
    <summary>Educación</summary>
    <ul>
        <li><a href="http://www.aprendoencasa.com">Informática Online</a></li>
        <li><a href="http://manual.bubok.com">Libros</a></li>
    </ul>
</details>
</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.

Etiqueta DETAILS, curso práctico html5

Etiqueta Details html5, ejercicios y prácticas html5

Gracias por vuestra visita y un saludo!!!

 

La entrada Etiqueta
, Curso Práctico HTML5 apareció primero en Aprendoencasa.]]> https://www.aprendoencasa.com/etiqueta-details-curso-practico-html5/feed/ 0 Etiqueta <TIME>, Curso Práctico HTML5 https://www.aprendoencasa.com/etiqueta-time-curso-practico-html5/ https://www.aprendoencasa.com/etiqueta-time-curso-practico-html5/#respond Fri, 26 Jul 2019 09:13:02 +0000 https://www.aprendoencasa.com/?p=796 Etiqueta <TIME> La etiqueta <time>, permite definir una hora con formato de 24 horas, o una fecha en formato gregoriano, opcionalmente con un tiempo y desplazamiento de zona horaria. Se debe de utilizar para establecer una codificación de fecha y hora, de forma legible para la máquina. De manera que los agentes de usuario y […]

La entrada Etiqueta apareció primero en Aprendoencasa.]]> Etiqueta <TIME>

La etiqueta <time>, permite definir una hora con formato de 24 horas, o una fecha en formato gregoriano, opcionalmente con un tiempo y desplazamiento de zona horaria.



Se debe de utilizar para establecer una codificación de fecha y hora, de forma legible para la máquina. De manera que los agentes de usuario y motores de búsqueda, puedan establecer recordatorios, eventos programados, o resultados de búsqueda más inteligentes.

La sintaxis de la etiqueta es la siguiente.

<time datetime=”valor”>Contenido de la etiqueta … </time>

El ejercicio siguiente muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
</head>
<body>
<header>
    <h1>Días Festivos</h1>
</header>
<section id="Principal">
    <p><time datetime="2013-11-01">Hallowen</time></p>
    <p>Reunión familiar <time datetime="2013-12-25">Navidad</time> a las <time>10:00</time> h.</p>
</section>
</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.

etiqueta time, curso práctico html5

etiqueta time, curso práctico html5

Gracias por vuestra visita y un saludo.

 

La entrada Etiqueta apareció primero en Aprendoencasa.]]> https://www.aprendoencasa.com/etiqueta-time-curso-practico-html5/feed/ 0 Etiqueta <FOOTER> , Curso Práctico HTML5 https://www.aprendoencasa.com/etiqueta-footer-curso-practico-html5/ https://www.aprendoencasa.com/etiqueta-footer-curso-practico-html5/#respond Tue, 02 Jul 2019 11:10:48 +0000 https://www.aprendoencasa.com/?p=788 Etiqueta <FOOTER> La etiqueta <footer>, permite definir un pie de página de un documento o sección. Se recomienda que el contenido de la etiqueta ha de guardar relación con el elemento que la contiene. Si se utiliza a pie de página, suele contener información relativa al autor del documento, copyright, enlaces, términos de uso, información […]

La entrada Etiqueta