3. HTML: div, video, audio, canvas, iframe, article, aside y progress.

-

La etiqueta <div> de HTML

La etiqueta <div> es un contenedor carente de semantica. En muchos casos se usa para agrupar elementos HTML.

Ejemplo:  

<div style="background-color: red; width: 30px; height: 100px"></div>

Resultado:


En el interior del <div> podemos poner otro elementos HTML.



Podemos usar <div>:
  • Cuando necesitemos agrupar una seríe de elementos HTML y no exista un contenedor de tipo semántico que podamos usar ("section", "article", "header", "main", "footer", "nav", "ul", etc, etc..).
  • Cuando queramos construir elementos auxiliares como estos (flechas negras):

Existe cierta tendencia a añadir etiquetas <div> cuando no son necesarias. Es la llamada "divitis":


Ejemplo de uso de <div>:

Las partes de un <footer> pueden estar dividas en "divs":


Incluir videos en HTML: <video>

<video width="..." height="..." controls>
  <source src="mi_video.mp4" type="video/mp4">
</video>
  • width: anchura del video.
  • height: altura del video.
  • controls: muestra los mandos de reproducción (reproducción, pausa, volumen, etc).
  • src: nombre/ruta del archivo del video a mostrar.
  • type: formato del archivo del video a mostrar.

Formatos soportados por la marca <video>

Hay 3 formatos soportados por HTML5:
  • MP4 (type="video/mp4") -> soportado por todos los navegadores
  • WebM (type="video/webm)
  • Ogg (type="video/ogg)

Incluir archivos de audio en HTML: <audio>

<audio controls>
  <source src="mi_audio.mp3" type="audio/mpeg">
</audio>
  • controls: muestra los mandos de reproducción (reproducción, pausa, volumen, etc).
  • src: nombre/ruta del archivo de audio a reproducir.
  • type: formato del archivo de audio a reproducir.

Formatos soportados por la marca <audio>

Hay 3 formatos soportados por HTML5:
  • MP3 (type="video/mp4") -> soportado por todos los navegadores
  • Wav (type="video/wav)
  • Ogg (type="video/ogg)

Dibujar gráficos en una página web: <canvas>

La marca <canvas>  muestra un contenedor en el que se pueden dibujar gráficos.

<canvas width="..." height="..." style="border: 1px solid #000></canvas>
  • width: anchura del contenedor.
  • height: altura del contenedor
  • style="border: 1px solid #000": muestra un borde negro alrededor del canvas.
El area de dibujado aparece vacia por defecto. Para dibujar sobre un canvas es necesario usar JavaScript.

Ejemplo: dibujar una linea recta en un <canvas>

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
    </script>

  </body>
</html>

Incluir contenido de otras páginas web: <iframe>

<iframe src="..." width="..." height="..."></iframe>
  • src: URL de la página web que queremos incluir.
  • width: ancho del iframe.
  • height: alto del iframe.
En la siguiene página web han incluido la web de Google a través de un <iframe>.

 

Ejemplo <iframe>: incluir mapas de Google Maps en un documento HTML

  1. Localizamos en Google Maps la dirección que queremos mostrar.
  2. Pulsamos sobre el botón "COMPARTIR".
  3. Aparecerá un pop-up.
  4. En el pop-up pulsamos sobre "Insertar mapa".
  5. Seleccionamos el tamaño del mapa que queremos incluir.
  6. Copiamos la etiqueta <iframe src="....>
  7. La pegamos en nuestro documento HTML.
Una vez pegado el código en nuestro documento HTML, dado que es un etiqueta <iframe>, podemos modificar sus dimensiones a través de los atributos width y height.

Ejemplo <iframe>: incluir videos de YouTube en un documento HTML.

  1. Abro la página de YouTube que contiene el video que quiero insertar.
  2. Pulso sobre el botón "COMPARTIR".
  3. En el pop-up que aparece pulso "Insertar".
  4. Copio el código HTML (<iframe>).
  5. Pego el código en mi página.

Unidades de contexto: <article>

La etiqueta <article> se usa para delimitar contenidos que se diferencian del resto y que forman una unidad de contexto.

La etiqueta <article> se puede usar para delimitar:
  • Las entradas (posts) en un hilo de un foro.
  • Una entrada (post) en un blog.
  • Una noticia de periódico.
  • Un comentario.
Ejemplo:

<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser depeloped by Google, released in 2008.</p>
<article>

Contenido aparte del contenido principal: <aside>

Cuando un contenido no está relacionado con el contenido principal, lo introduciremos en una etiqueta <aside></aside>.


Incluir barras de progreso en HTML: <progress>

La etiqueta <progress> muestra una barra de progreso.

<progress value="22" max="100"></progress>

  • value: parte que aparece como completada.
  • max: valor máximo.

Ejercicio 

0) Crear en la página electricidad.html un enlace interno al apartado "Códigos HTML basicos" de la página sobre HTML en español de la Wikipedia.

a) Incluir en la página electricidad.html un trozo de la página jardineria.html a través de la etiqueta <iframe>.

b) Incluir en la página electricidad.html un trozo de la página jardineria.html a través de la etiqueta <iframe>.

c) Dibujar en la página electricidad.html, un canvas con el siguiente gráfico:


d) Añadir en electricidad.html un video que se reproduzca de manera automática al mostrarse en la página. Utilizar la etiqueta <video>.

d) Añadir en electricidad.html un archivo de audio a través de la etiqueta <audio>.

f) Añadir en electricidad.html un video de YouTube que NO muestre el panel de control (reproducir, pausar, etc) y que se reproduzca de manera automática al cargarse la página.

g) Añadir en electricidad.html un mapa de Google Maps con la dirección del Ayuntamiento de Madrid. Redimensiona el <iframe> a 200x100.

h) Buscar en una página de YouTube a través del inspector de código HTML del un navegador, la etiqueta <video>.

i) Buscar una etiqueta <article> en una página web cualquiera.

j) Buscar una etiqueta <aside> en una página web cualquiera.

Otros ejercicios:

https://www.w3schools.com/html/html_exercises.asp
https://www.w3schools.com/html/html_quiz.asp

Comentarios

Publicar un comentario

Entradas populares de este blog

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más