Dia 8

2023-11-29 13:43:04 +01:00 · 2023-11-29 13:43:04 +01:00 · 8c709817f3
commit 8c709817f3
parent 024851ef69
25 changed files with 116 additions and 0 deletions
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,15 @@
+SEMANTICA SECCIONES
+
+    <header>: la etiqueta de encabezamiento define el contenido introductorio de una página o sección.
+
+    <nav>: la etiqueta de navegación se utiliza para los enlaces de navegación. Puede anidarse dentro de la etiqueta <header>, pero las etiquetas <nav> de navegación secundaria también suelen usarse en otras secciones de la página.
+
+    <main>: esta etiqueta contiene el contenido principal (también llamado cuerpo) de una página. Solo debería haber una etiqueta <main> por página.
+
+    <article>: Representa una unidad de contenido, es decir, contenido que responde a un tema concreto. 
+
+    <section>: utilizar <section> es una forma de agrupar contenidos que tratan sobre temas similares. 
+
+    <aside>: un elemento "aside" define el contenido de menor importancia. Suele emplearse para las barras laterales, que incluyen información complementaria pero no esencial.
+
+    <footer>: usa <footer> en la parte inferior de una página. La etiqueta suele incluir información de contacto, derechos de autor y navegación por la web.
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practica 12</title>
+</head>
+
+<body>
+
+    <map name="mapa">
+        <area shape="circle" coords="224,191,90" href="https://www.google.com/intl/es_es/chrome/" />
+        <area shape="circle" coords="490,191,90" href="https://www.mozilla.org/es-ES/firefox/new/" />
+        <area shape="circle" coords="770,191,90" href="https://www.microsoft.com/es-es/download/internet-explorer.aspx" />
+        <area shape="circle" coords="349,450,90" href="https://www.opera.com/es" />
+        <area shape="circle" coords="604,450,90" href="https://www.apple.com/es/safari/" />
+    </map>
+
+
+    <img src="imagenes/imagen_navegadores.jpg" usemap="#mapa" />
+
+
+</body>
+
+</html>
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practica 12a</title>
+</head>
+
+<body>
+
+    <map name="mapa">
+        <area shape="rect" coords="293,236,489,315" href="https://es.wikipedia.org/wiki/Noruega" alt="Noruega" />
+        <area shape="rect" coords="700,292,850,415" href="https://es.wikipedia.org/wiki/Suecia" alt="Suecia" />
+        <area shape="rect" coords="987,246,1119,381" href="https://es.wikipedia.org/wiki/Finlandia"  alt="Finlandia"/>
+        <area shape="rect" coords="458,461,634,561" href="https://es.wikipedia.org/wiki/Dinamarca" alt="Dinamarca" />
+    </map>
+
+
+    <img src="imagenes/paises_nordicos.jpg" usemap="#mapa" />
+
+
+</body>
+
+</html>
--- a/12/codigo_mapa_imagenes.txt
+++ b/12/codigo_mapa_imagenes.txt
@ -0,0 +1,7 @@
+<map name="mapa">
+<area shape="circle" coords="224,191,90" href="https://www.google.com/intl/es_es/chrome/" />
+<area shape="" coords="" href="" />
+</map>
+
+
+<img src="ruta donde esta la imagen" usemap="#mapa"/>
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
--- a/12/imagenes/colores_web.jpg
+++ b/12/imagenes/colores_web.jpg
--- a/12/imagenes/imagen_navegadores.jpg
+++ b/12/imagenes/imagen_navegadores.jpg
--- a/12/imagenes/paises_nordicos.jpg
+++ b/12/imagenes/paises_nordicos.jpg
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practica 13</title>
+</head>
+<body>
+    <table style="width: 100%;">
+        <tr>
+            <td><img src="./imagenes/noruega.png" width="100%" alt="Noruega"></td>
+            <td><img src="./imagenes/finlandia.png" width="100%" alt="Finlandia"></td>
+            <td><img src="./imagenes/suecia.png" width="100%" alt="Suecia"></td>
+            <td><img src="./imagenes/dinamarca.png" width="100%" alt="Dinamarca"></td>
+        </tr>
+        <tr>
+            <td><audio src="./audio/noruega.mp3" controls style="width: 100%;"></audio></td>
+            <td><audio src="./audio/finlandia.mp3" controls style="width: 100%;"></audio></td>
+            <td><audio src="./audio/suecia.mp3" controls style="width: 100%;"></audio></td>
+            <td><audio src="./audio/dinamarca.mp3" controls style="width: 100%;"></audio></td>
+        </tr>
+        <tr>
+            <td><video src="./video/noruega.mp4" width="100%" controls></video></td>
+            <td><video src="./video/finlandia.mp4" width="100%" controls></video></td>
+            <td><video src="./video/suecia.mp4" width="100%" controls></video></td>
+            <td><video src="./video/dinamarca.mp4" width="100%" controls></video></td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/13/audio/dinamarca.mp3
+++ b/13/audio/dinamarca.mp3
--- a/13/audio/finlandia.mp3
+++ b/13/audio/finlandia.mp3
--- a/13/audio/noruega.mp3
+++ b/13/audio/noruega.mp3
--- a/13/audio/suecia.mp3
+++ b/13/audio/suecia.mp3
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,5 @@
+<audio src="audio/audio.mp3" controls></audio>
+
+
+
+<video src="video/video.mp4" controls></video>
--- a/13/imagenes/dinamarca.png
+++ b/13/imagenes/dinamarca.png
--- a/13/imagenes/finlandia.png
+++ b/13/imagenes/finlandia.png
--- a/13/imagenes/noruega.png
+++ b/13/imagenes/noruega.png
--- a/13/imagenes/suecia.png
+++ b/13/imagenes/suecia.png
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@ -0,0 +1,8 @@
+Los párametros que soporta <video> son:
+- Controls > Añade una barra con controles (es diferente por cada navegador).
+- Muted > Para quitar el audio al vídeo. Si queremos que se reproduzca  un vídeo en autoplay  en Chrome, tenemos que activar esta opción.
+- Autoplay > Para que el vídeo empiece sin necesidad de darle al play.
+- Loop > Para que se vuelva a reproducir cuando se acabe el vídeo.
+- Preload > Puede tomar los valores auto (carga el vídeo cuando carga la web), none (viene bién cuando tenemos una videogalería) y metadata (carga sólamente los metadatas)
+- Poster > Para añadir una imagen personalizada al inicio del vídeo.
+- Width - Height > Para especificar el ancho y el alto del vídeo.
--- a/13/video/dinamarca.mp4
+++ b/13/video/dinamarca.mp4
--- a/13/video/finlandia.mp4
+++ b/13/video/finlandia.mp4
--- a/13/video/noruega.mp4
+++ b/13/video/noruega.mp4
--- a/13/video/suecia.mp4
+++ b/13/video/suecia.mp4