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
		`@ -0,0 +1,5 @@`
							`<audio src="audio/audio.mp3" controls></audio>`



							`<video src="video/video.mp4" controls></video>`