Saltar navegación

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

smr - 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 21 de mayo de 2025 por Mario S.

56 visualizaciones

preparacion examen

Más información Transcripción

Descargar la transcripción

bueno en este vídeo vamos a ver cómo hacer lo de la página web de una forma lo voy a hacer 00:00:02
rápido vale sin editar ni nada como os dije solo para que lo tengáis como referencia entonces por 00:00:10
un lado lo que quiero es nosotros si estás empezando a hacer páginas web tú haces una 00:00:15
página web vale que tiene pues eso este sería como el navegador vale la ventana del navegador 00:00:22
Entonces tendría un encabezado aquí, un head, una cabecera, donde pondría el título, que fuera, ¿vale? Y un body, que sería todo esto, ¿vale? Sería todo esto de aquí, en el que vamos a meter la información que nosotros queramos, ¿vale? 00:00:32
Entonces tendríamos, por un lado, el encabezado, que sería este, y por otro lado, el body, que sería este. 00:00:53
Y todo esto, ¿vale? Todo esto es lo que sería mi página web. 00:00:59
Entonces, hacer esto con código, pues es lo típico del HTML, ¿no? 00:01:08
Vamos a ver si esto me deja aquí, sería el HTML, el HEAD, dentro del HEAD pondríamos el title, esto lo cerraríamos, bueno, a ver, vale, aquí pondríamos, por dentro lo que fuera, SMR, lo que fuera, vale, este código, este texto, este string, sería lo que vosotros quisierais 00:01:19
y que aparecería donde está esta línea roja, ¿vale? La cabecera. 00:01:50
Aquí terminaría el head y empezaría el body. 00:01:54
Y en el body, pues ya podríamos empezar a meter un table, ¿vale? Con sus tbs, con sus ths, con lo que fuera, 00:02:02
o las etiquetas que sean, ¿no? Para hacer la página que nosotros queramos, ¿vale? 00:02:15
El center, el div, lo que sea, lo que necesitemos, ¿vale? 00:02:19
Y una vez que ya tenemos hecha la página, aquí cerraría el body y aquí cerraría el HTML. 00:02:27
¿Vale? Y esto sería, pues, como la estructura, ¿no? El esquema de una página normal, ¿vale? 00:02:37
Ahora, yo lo que quiero es poder dividir esta página en varios trozos, ¿vale? Es decir, yo lo que quiero es, esto, a ver, me lo voy a borrar, esto, cómo se borra esto, esto fuera, esto fuera, vale. 00:02:42
Yo lo que quiero es tener una página web que sí va a tener su encabezado, pero quiero subdividirla, ¿vale? Lo que quiero no es cargar información, lo que quiero es dividirla, hacerla en cajas, en trozos, ¿vale? 00:03:15
Entonces, por ejemplo, hacer un trozo que fuera aquí así, ¿vale? 00:03:30
Otro trozo que fuera aquí así, ¿vale? 00:03:35
Bueno, e ir dividiendo esta página en diferentes frames que se llaman cajas, si queréis, ¿vale? 00:03:42
Y en cada una de estas cajas yo lo que voy a hacer es cargar una imagen, perdón, una imagen no, una página, ¿vale? 00:03:50
Entonces, aquí iría cargada una página web, un punto HTML, aquí iría cargado otro, ¿vale? En este espacio, y aquí iría cargado otro, ¿vale? Y ahí iría cargado otro. 00:03:58
De tal forma que he hecho un contenedor que lo que hace es visualizarme tres páginas a la vez, ¿vale? Y en esta página, en esta que está en morado, en este trozo, lo que voy a hacer es que cada vez que pulse una opción de las que tengo aquí a la izquierda, y esto es siguiendo el ejemplo que os pedí en el examen, ¿vale? 00:04:17
Cada vez que pulso en un link, se va a visualizar aquí, no se abre una ventana nueva, se va a visualizar aquí. Vale, un momentito. Vale, y entonces lo que queremos hacer es esto, ¿vale? 00:04:38
Entonces, para hacer eso, yo lo que hago, lo que suelo hacer es, por un lado me creo una carpeta, ¿dónde está? Nuevo, carpeta, y le llamo, pues, por ejemplo, creo lo que se llama una carpeta de proyecto. 00:04:57
Entonces le vamos a poner aquí el proyecto, se va a llamar project, a ver, smr, por ejemplo, ¿vale? Abro el Visual Studio, el code, que es el que tenemos en el instituto, o abras cualquiera, ¿vale? Lo que sea, me da igual. 00:05:14
Entonces, aquí le voy a decir Open Folder, me voy a ir al escritorio, le vamos a llamar a Project SMR, selecciono la carpeta, ¿vale? Y ya tengo aquí esta carpeta. Entonces, algunos de vosotros me preguntabais el otro día si puedo crear desde aquí archivos, carpetas, bueno, ya veis que sí. 00:05:33
vale entonces lo primero que hago es crear esas páginas que voy a cargar en 00:05:55
este caso le voy a llamar por ejemplo cabecera 00:05:59
cabecera punto html vale entonces aquí esto quita no 00:06:04
el control elemento 1 aquí le vamos a ir haciendo lo que lo 00:06:15
que hemos ido vamos a ir poniendo las etiquetas que hemos ido viendo 00:06:21
en clase, entonces pongo el head 00:06:25
no pongo ningún título porque no 00:06:26
quiero ahora, vale, para hacer esto más rápido 00:06:31
meto el body 00:06:33
vale, y entonces 00:06:34
este va a ser el 00:06:37
html que voy a cargar en la cabeza 00:06:39
entonces que voy a meter aquí 00:06:40
le puedo poner la etiqueta 00:06:42
center, le puedo meter 00:06:45
el p, el style 00:06:46
por ejemplo 00:06:49
style 00:06:50
le puedo meter el font 00:06:52
site le podemos meter aquí a 20 px vale por ejemplo vale 00:06:54
esto le vamos a poner aquí el nombre del alumno que en este caso pues en varios 00:07:03
centros mario santos vale si yo me vengo a mi 00:07:07
carpeta 00:07:11
aquí ya tengo creado cabecera y cuando lo abro vale tengo mario santos bueno si 00:07:16
yo cojo aquí le digo en vez de 20 le vamos a poner 60 vale pues pues obviamente cambiaríamos ese 00:07:22
tamaño de el nombre vale lee dónde estás aquí le voy a poner también otro color de fondo vale 00:07:32
entonces pues le voy a pasar también el style vamos a usar el style porque el style es el 00:07:44
principio de las hojas de estilos entonces pues así vamos viendo 00:07:49
pues eso vamos usando estas hojas vale total que esto se me queda así 00:07:55
y ya tengo una página o sea una de las páginas que van a cargarse dentro de la 00:08:01
que vamos a hacer la última como marcos vale vale ya tengo una ahora voy a crear 00:08:08
otra un momento 00:08:13
¿Sí? Ah, vale, pues paso ahora en un ratín. Muchas gracias, hasta luego. 00:08:22
vale, seguimos 00:08:34
entonces, vale, lo cargo 00:08:38
vale, ya tengo esto, ahora vamos a crear otra 00:08:40
página que le voy a llamar pues 00:08:42
opciones 00:08:43
opciones.html 00:08:45
vale 00:08:48
y voy a hacer lo mismo 00:08:50
el g, perdón, el html 00:08:51
el gead 00:08:54
este 00:08:58
lo vamos a 00:09:00
dejar así, el body 00:09:01
vale, y ahora que voy a poner en el body 00:09:03
las diferentes opciones 00:09:07
vale, entonces le voy a poner aquí 00:09:12
una P, dentro de esta P 00:09:14
le vamos a poner 00:09:17
el A HR 00:09:18
la referencia 00:09:20
vale, aquí le voy a pasar 00:09:22
pues HTTP 00:09:24
dos puntos 00:09:26
barra, barra 00:09:27
tres W 00:09:30
dobles.gmail.com 00:09:31
No sé si esto me va a llevar a algún lado o no. 00:09:40
Vale. 00:09:44
Esto lo cierro. 00:09:46
Aquí vamos a poner el correo. 00:09:48
Vale. 00:09:51
Y ahí iría poniendo las diferentes... 00:09:51
href 00:09:55
igual, pues por ejemplo 00:10:02
vamos a cargar la página 00:10:04
del IES 00:10:06
IES 00:10:07
Villablanca 00:10:10
IES Villablanca 00:10:13
voilà 00:10:18
control c 00:10:20
vale, aquí le voy a poner 00:10:22
control v 00:10:26
esto lo cerramos y ponemos 00:10:27
Villa Blanca 00:10:31
vale, bueno 00:10:32
total que me iría haciendo 00:10:35
mis diferentes 00:10:37
referencias de esta forma 00:10:39
que lo quiero bajar más que 00:10:41
usando tablas o usando la etiqueta 00:10:43
del BR por ejemplo 00:10:45
que ya os dije que esta es como el retorno 00:10:47
del carro, vale, esto 00:10:49
nos va a crear esta página 00:10:51
veis que tenemos opciones 00:10:53
y nos va a crear esto 00:10:55
vale bueno 00:10:57
vamos a modificarlo un poco entonces aquí le vamos a meter el style bueno 00:11:01
aquí vamos a ponérselo aquí detrás mejor 00:11:08
style le vamos a meter 00:11:13
un sol 00:11:19
ya está, font-size largo, vale, vamos a dejarlo así, ya está, vale, pues para verlo más grande, nada más, esto, control-c, esto, vale, esto ya es empezar a tunearlo, 00:11:28
o sea, control-v, ya lo tendría, aquí le voy a meter en el body, pues igual que he hecho antes, vale, le vamos a meter un color, pues vamos a meterle, si queréis, hasta el, 00:11:41
bueno, el mismo no, porque 00:11:53
así lo veis más fácil 00:11:57
vale, este le vamos a meter 00:11:59
pues un verde 00:12:03
así, muy bonito 00:12:04
vale, y ya lo tendríamos 00:12:06
vale, esto se convierte en esto 00:12:11
vale, ya tendría 00:12:13
dos cabeceras, ahora voy con el principal 00:12:14
y el principal, pues 00:12:17
puedo incluso dejarlo 00:12:18
tal cual, ¿no? o sea, crear un fichero 00:12:20
y lo voy a dejar en blanco, entonces lo voy a poner aquí 00:12:22
principal.html 00:12:24
vale, y aquí ya os digo 00:12:31
voy a dejarle 00:12:33
vamos a ponerle esto, si queréis que 00:12:34
esto os gusta ponerlo, el doctype 00:12:37
doctype 00:12:39
html 00:12:42
vale, bueno, pues eso 00:12:47
html 00:12:49
head 00:12:53
dentro del head, el título 00:12:54
si quiero, porque no quiero 00:12:57
El body 00:12:59
En el body le voy a poner 00:13:00
El color 00:13:04
Que en este caso le vamos a meter 00:13:05
Un morao 00:13:07
Y cierro el body 00:13:08
Ahí va 00:13:13
Le damos aquí 00:13:15
Y ya estaría, ¿vale? 00:13:18
Y esto lo único que me hace es 00:13:20
Esto 00:13:22
El principal 00:13:27
¿Vale? Ya está, no tiene nada 00:13:28
Pues no le he puesto nada, solo el color mora, ¿vale? Y ahora se trata de hacer esa página que va a cargar estos diferentes frames. Bueno, pues entonces para hacer eso vamos a crear esta cuarta página que es, vamos a llamarle cajas.html, ¿vale? O index o home, que sería la principal, ¿vale? 00:13:30
Entonces, le llamas caja, lo correcto aquí sería poner index, ¿vale? Sería poner index o home, ¿vale? Yo le voy a llamar cajas para que entendáis que esa es donde estoy creando esas cajas, ¿vale? 00:13:48
Vale, aquí le vamos a pasar el HTML, le voy a pasar el HEAD, que no me hace falta, pero bueno, yo se lo paso. 00:14:03
Y lo que os tenéis que acordar ahora es de no pasarle el BODY, ¿vale? Aquí directamente le voy a pasar el FRAMESET, ¿vale? 00:14:17
Me lo pone en rojo, no me importa, ¿vale? No me importa. Eso es porque está, bueno, pues que es antiguo, ¿vale? Pero a mí lo que me interesa es que trabajéis con esto, no que me estéis usando ahora lo más nuevo, o sea, vamos a coger una base y luego ya el curso que viene nos ponemos fuertes con lo otro, ¿vale? Con las cosas nuevas, que tampoco va a ser así, pero se trata de ir aprendiendo poco a poco, ¿vale? 00:14:24
Bueno, aquí lo que voy a hacer es dividirlo en columnas, ¿por qué en columnas? Porque aquí tengo una columna y dos columnas, ¿vale? En la segunda columna voy a hacer otro frameset para dividirlo en filas, el frameset es lo que hace la división, ¿vale? 00:14:54
Y el frame es el que carga las páginas, entonces sabiendo eso, en frameset yo le voy a decir, vale, quiero dos columnas, cols, igual, comillas, y aquí le voy a decir, la primera columna la quiero que sea el 25% de lo que sería toda la página, ¿vale? 00:15:12
y la segunda el resto, o sea, el 75%, vale, ahora, como os digo, aquí he hecho esa división, frame calls, vale, en la primera columna voy a cargar la de opciones, 00:15:33
Entonces aquí le voy a meter frame src igual, ¿cómo le he llamado? Opciones, ahí está, opciones html, ¿vale? Vale, y ahí sería el primer frame y ya estoy cargando esas opciones html. 00:15:48
La segunda columna hemos quedado en que la voy a dividir en dos filas, entonces tengo que coger y decirle, vale, pues, frameset, ahora lo quiero dividir en filas, le digo, vale, por la primera fila me la pones, pues, por ejemplo, al 20% y en la segunda al resto, ¿vale? 00:16:09
¿Vale? Y como aquí son ahora dos filas dentro de esta segunda columna, y sé que esta es la segunda columna porque cuando he dividido esto en dos columnas, esta sería la primera, ¿vale? Va en orden, y esta la segunda. 00:16:30
Aquí ya le paso el frame, le paso el src, le pasamos el nombre que queremos cargar, al principio, ¿cuál es? Cabecera, pues cabecera html, ¿vale? Y en la segunda, vale, en la segunda lo que le vamos a poner es frame src igual comillas y le voy a poner principal. 00:16:47
principal, vale, y ya tendría yo mis cajas, total, que si yo ahora cojo y en cajas lo abro, veis, ya me está mostrando las diferentes, las diferentes páginas, vale, las diferentes páginas que he ido cargando en cada una de las cajas, vale, 00:17:19
bueno y ahora ya es empezar a jugar con esto entonces por ejemplo a mí estos 00:17:48
bordes no me gustan entonces esto es esta línea grises no me gusta nunca me 00:17:52
han gustado entonces yo aquí por ejemplo le pasó 00:17:56
el border igual 0 00:18:02
y en todos se lo pasó en todos 00:18:08
pero 00:18:16
Yo creo que si solo se lo paso aquí me vale 00:18:20
Vamos a verlo 00:18:23
Cero, vale 00:18:25
Vamos a verlo 00:18:28
Esto lo actualizo, ¿veis? 00:18:30
Queda mejor, a mí me parece que queda mejor 00:18:33
Vale, y yo ahora pulso en correo 00:18:35
Y me lleva, me carga aquí mismo esta página 00:18:37
Vale, o Villablanca y me lo carga aquí mismo 00:18:40
Yo lo que quiero es que se cargue en esta parte 00:18:43
Vale, entonces 00:18:47
Entonces, lo que voy a hacer es poner un nombre, ¿no? Entonces en principal le voy a poner aquí name y le voy a decir, vale, pues este por ejemplo le voy a llamar, pues Hugo, ¿vale? Por ponerle otro nombre que no sea principal. 00:18:48
Le llamo Hugo a esto. Esto solo es para hacer referencia. Si os acordáis con el Word y con el Excel, cuando poníamos componentes como un botón o una caja de texto, se le daba un nombre y yo podía acceder a las propiedades de ese elemento luego a través de ese nombre, ¿no? Esto es lo mismo. 00:19:11
Yo le doy aquí un nombre, ¿vale? Y lo que hago es cuando cargo las opciones, aquí lo que le voy a pasar es un target, ¿vale? Es un target y donde quiero que me, es un objetivo, ¿no? 00:19:29
donde quiero que lo cargue, aquí lo puedes poner 00:19:48
blank, le puedes poner 00:19:50
vale, que lo deje en blanco, que 00:19:52
tal, y le puedo decir que lo cargue 00:19:54
en ugo, y aquí le digo 00:19:56
lo mismo 00:19:59
aquí le digo exactamente 00:19:59
lo mismo, vale, target 00:20:02
es igual a 00:20:04
ugo, ala 00:20:06
es igual a 00:20:08
ugo, vale 00:20:10
total, que si ahora ya 00:20:11
venimos 00:20:14
Lo volvemos a cargar todo, ya lo tengo 00:20:17
Si yo le doy a Villa Blanca 00:20:19
¿Veis? Me lo carga aquí 00:20:21
Y si le doy a correo, me lo carga aquí 00:20:22
¿Vale? En este caso, correo 00:20:25
Pues no me lo coge, pues no lo he puesto bien 00:20:27
Pero este sería el funcionamiento 00:20:29
No tiene más 00:20:31
Más problema 00:20:33
¿Vale? 00:20:35
Bueno, pues un saludo a todos 00:20:37
Chao 00:20:39
Idioma/s:
es
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
56
Fecha:
21 de mayo de 2025 - 12:30
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 19″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
56.25 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid