Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Práctica 3 - HTML - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 7 de mayo de 2024 por Enrique G.

61 visualizaciones

Más información Transcripción

Descargar la transcripción

Muy buenos días, vamos a empezar con el video tutorial de la práctica 3 de HTML que a algunos se os ha atragantado un poco, ¿vale? 00:00:00
En primer lugar estamos aquí en nuestro menú principal de Replit, ¿vale? Para el que no sepa cómo llegar tiene que ir a Profile 00:00:08
y tenéis que ir a Reps, ¿vale? En vuestros Reps van a aparecer los archivos que ya tenéis creados, ¿vale? 00:00:14
Este lo voy a borrar para empezar de nuevo, ¿vale? 00:00:24
Con la práctica 3, este es uno de Python que tengo que no vais a necesitar. 00:00:27
Le damos aquí a Create, ¿vale? 00:00:31
A Create, REPL es como Replit llama a los programas. 00:00:32
Vamos a crear HTML y decimos que se va a llamar la práctica 3, ¿vale? 00:00:37
Muy bien, le damos a Create REPL y aparece ya el archivo vacío con el Hello World, ¿vale? 00:00:42
Si le damos a Run, aquí nos aparece Hello World. 00:00:51
Muy bien, tenemos nuestra página de index, ¿vale? Lo que queremos es insertar hipervínculos para pasar de una página a otra, es decir, aquí tenemos que tener más páginas. 00:00:53
Lo primero de todo que vamos a hacer va a ser, bueno, esto del script sabéis que lo podéis borrar, que eso no vale para nada en esta práctica. 00:01:04
Lo único que tenéis que tener en cuenta es que tenéis que escribir todo entre el body abierto, la etiqueta del body abierto y body cerrado, ¿vale? 00:01:14
Todo tiene que estar escrito aquí, lo del resto dejadlo un poco como está, pero no pongáis cosas aquí debajo, ¿vale? Es importante. 00:01:20
Entonces, lo primero que tenemos que hacer es darle un nombre a nuestro diario. Yo le voy a dar, por ejemplo, Diario Montañés. 00:01:29
hemos dicho que había que ponerle una etiqueta de header 1, abierto y luego cerrarlo después del título 00:01:36
para que veáis ahora aparece ya con un título de nivel 1, es decir, grandote 00:01:49
Bien, y vamos a poner un H2 que va a ser el de noticias deportivas y otro H2, que vamos a copiarlo entero, que va a ser de noticias políticas. 00:01:54
Ya tenemos el diseño de la primera página, pero necesitamos que esto sea un hipervínculo 00:02:12
¿Cómo conseguimos que esto sea un hipervínculo? 00:02:25
Pues para empezar tenemos aquí de momento solo una página de HTML 00:02:27
Para ello necesitamos crear un nuevo archivo que se llame un poco lo que vosotros queréis 00:02:30
Yo voy a llamar, por ejemplo, deportivas.html, ojo, cuidado, con la extensión, muy importante, le damos al enter y se nos ha creado, está vacío ahora mismo, ¿vale? Y lo mismo vamos a hacer una con políticas.html. 00:02:39
Ya tenemos nuestras tres páginas 00:02:56
La primera es esta, que todavía está sin hipervínculo 00:03:01
Y las otras dos están vacías absolutamente 00:03:03
Ya lo podéis ver aquí 00:03:05
Entonces, ¿cómo le dábamos un hipervínculo a esto? 00:03:07
Pues haríamos una etiqueta que era A 00:03:13
Luego poníamos href="a 00:03:15
Y poníamos el nombre de la página que queremos 00:03:18
Esto es noticias deportivas, vamos a poner deportivas.html, vamos a cerrar la primera A, digamos la etiqueta de AHREF, la cerramos, pero esto de aquí, el texto tiene que estar dentro de, entre el A abierto y el A cerrado, ¿vale? 00:03:23
muy importante, quedaos con esta estructura 00:03:49
entonces ahora cuando le demos a run 00:03:51
ya vais a ver que tenemos 00:03:53
diario montañés, noticias deportivas y noticias políticas 00:03:55
¿no? bien, hasta ahí bien 00:03:57
vale 00:03:59
tienes que hacer lo mismo exactamente 00:04:00
con noticias políticas, pero que os lleve 00:04:03
a la página, en vez de a deportivas 00:04:05
html, que es esta, pues a políticas 00:04:07
html, que es esta de aquí, muy bien 00:04:09
si veis que le damos aquí 00:04:11
nos lleva a una en blanco completamente 00:04:13
¿por qué? pues porque estamos en 00:04:15
en, perdón, estamos en 00:04:17
en una completamente en blanco 00:04:19
entonces lo que vamos a hacer va a ser copiar 00:04:21
copiar todo 00:04:23
el índice 00:04:27
y lo vamos a pegar en deportivas 00:04:28
por lo tanto ahora que estamos 00:04:31
en deportivas nos va a aparecer esto 00:04:33
estamos en deportivas, vale 00:04:35
si le pinchamos 00:04:37
aquí nos va a llevar al 00:04:39
a ver, nos llevaría al mismo sitio 00:04:41
evidentemente, porque le estamos diciendo que nos lleve a 00:04:43
deportivas, entonces vuelve a su sitio 00:04:45
Para volver a index, ¿cómo lo hacemos? Pues lo que tenemos que hacer es sustituir este enlace, por ejemplo, vamos a ponerle que vuelva a ir a index y vamos a poner aquí, en vez de noticias deportivas, vamos a poner vuelta a página principal, ¿vale? 00:04:47
Estos noticias políticas lo eliminamos 00:05:04
Muy bien 00:05:08
Vale, entonces ahora le damos a Run 00:05:08
Nos va a aparecer vuelta a la página principal 00:05:11
Que nos va a llevar a la primera 00:05:13
¿Veis? Noticias deportivas, tal cual, tal cual 00:05:15
Muy bien 00:05:18
Entonces, yo voy a hacerlo solo para noticias deportivas 00:05:19
¿Vale? Para noticias políticas ya lo hacéis vosotros 00:05:21
Tienes que poner aquí, evidentemente 00:05:24
El hipervínculo 00:05:27
Y tenéis que crear 00:05:29
Ahora ya sí el diseño 00:05:32
tanto de deportivas como de políticas. Yo voy a hacerlo de deportivas solamente, ¿vale? 00:05:33
Aquí veis que tengo abiertas dos. Si quisiera abrir la de prácticas, pues la de políticas, perdona, se me abre aquí. 00:05:37
Bien, entonces, ¿qué es lo que hay que hacer en deportivas? Vamos a deportivas, ¿qué es lo que hay que hacer aquí dentro? 00:05:43
Pues aquí tenemos que meter un título, vamos a ir a marca, por ejemplo, ¿vale? 00:05:49
Para un, yo qué sé, pues noticias del Atleti, cualquiera. 00:05:55
Morata, respaldo total, estupendo, mira. 00:06:01
Vamos a ponerlo, vamos a ir copiándolo como podamos, ¿vale? 00:06:03
Molata, respaldo total lo ponemos en H1. 00:06:06
Y veis que aquí hay un... Estas son las... La noticia entera, ¿vale? 00:06:11
Van a ir copiando y pegando. 00:06:14
Y esto que veis aquí, esto tenéis que ponerlo como H3, digamos, ¿vale? 00:06:15
Entonces podéis copiar uno o dos párrafos, me da exactamente igual. 00:06:23
Le voy a copiar, por ejemplo, este de aquí hasta aquí. 00:06:27
Vamos a copiar esto y lo vamos a poner por aquí. Ojo, cuidado, el cuerpo no tiene que tener formato, ¿vale? Lo vamos a dejar así para que no sea, no tiene que tener formato de encabezado, ¿vale? 00:06:31
Luego ya si le queréis meter un, esto sí que lo tenéis que hacer, ¿no? Porque lo pone en la rúbrica, tenéis que ir metiéndole párrafos, ¿no? Pues aquí un párrafo y el siguiente párrafo, y esto lo vamos a cerrar aquí. 00:06:42
Y lo mismo aquí, abrimos un párrafo y lo cerramos aquí. Muy bien, ya tenemos más o menos dos párrafos puestos dentro de nuestra noticia. 00:06:55
hemos dicho en la rubrica pone que tiene que haber algo de un encabezado de nivel 3 que haga como una especie de separación entre la noticia 00:07:13
pues esto lo vamos a poner aquí y le vamos a meter un, bueno, mejor vamos a abrir primero la etiqueta 00:07:21
h3, cerramos y ya lo pegamos ahí, entonces ya nos aparece el respaldo de Simeone, muy bien 00:07:27
Bien, entonces, esto de aquí lo vamos a volver a pegar y lo pegáis aquí. 00:07:36
Me da igual que sea muy grande, muy pequeña la noticia, me da un poco igual, ¿vale? 00:07:45
Yo lo que quiero es que sepáis cómo crear hipervínculos. 00:07:53
Ya tenemos nuestra noticia más o menos entera, ¿vale? 00:07:56
y tenemos la vuelta a la página principal de nuestro periódico, el diario Montañés. 00:08:02
Entonces tenemos noticias deportivas, noticias políticas. 00:08:09
Tenemos noticias deportivas, va a aparecer lo que estábamos haciendo antes. 00:08:11
Bien, esto. Esto es lo que tienes que hacer, pero también con noticias políticas. 00:08:14
Exactamente igual, con una noticia política que queráis. 00:08:19
Es decir, tienes que veniros aquí y demás. 00:08:24
¿Cómo se entrega la práctica? 00:08:26
Una vez hayáis terminado todo, vais a tener que darle aquí y Download as ZIP. 00:08:27
Se os aparece un archivo de WinRAR o WinZIP, depende de cualquier programa. 00:08:33
Esto está comprimido, tenéis que descomprimirlo. 00:08:41
A mí lo que me interesa es que me subáis estos tres archivos. 00:08:45
Estos tres archivos es lo que yo necesito para poder verlo. 00:08:49
¿Por qué? Porque yo voy a abrir el index y se me va a abrir esto. 00:08:54
Y voy a poder mirar a ver cómo han sido vuestras noticias, ¿vale? 00:09:00
Mirad la rúbrica, por favor, mirad, pues eso, todo lo que os pido, 00:09:04
porque os pido que lo separéis en párrafos, os pido encabezados, os pido negritas, 00:09:12
recordad que para negritas la etiqueta B, para la cursiva es la etiqueta I, 00:09:19
y demás, pues esto es todo lo que tenéis que hacer 00:09:23
básicamente, es una práctica bien sencilla 00:09:26
¿vale? 00:09:28
Subido por:
Enrique G.
Licencia:
Todos los derechos reservados
Visualizaciones:
61
Fecha:
7 de mayo de 2024 - 19:06
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
09′ 31″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
118.38 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid