Saltar navegación

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

Final-HTML-Cambiar-contenido - 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 22 de febrero de 2021 por Julio G.

118 visualizaciones

Más información Transcripción

Descargar la transcripción

Para cambiar el contenido de la plantilla voy a utilizar BlueGryphon, aunque podría haber utilizado Brackets o cualquier otro editor. 00:00:00
Me he preparado un documento de texto con el contenido que quiero utilizar y lo que voy a hacer es abrir el documento que he denominado Index, que sería el de inicio. 00:00:08
y desde aquí voy a ir cambiando 00:00:23
pues todo lo que quiera respecto a contenido se refiere 00:00:25
vamos a cambiarle el nombre 00:00:30
a la cabecera 00:00:32
y vamos a ir modificando 00:00:35
vamos a ir modificando pues 00:00:37
el contenido en general 00:00:45
bueno, voy a habilitar la opción 00:00:50
vista dual 00:00:59
para poder ver el código a la vez que 00:01:01
que veo como se va a mostrar en el navegador 00:01:04
vale, ya he cambiado ese encabezado 00:01:07
y voy a copiar 00:01:11
que voy a introducir en forma de párrafo 00:01:13
ahí lo vemos, también podemos modificarlo 00:01:25
desde la vista de diseño 00:01:31
vale, voy a incluir ahora una imagen 00:01:35
y voy a utilizar la vista diseño para hacerlo 00:01:45
entonces voy a localizar la imagen 00:01:50
Dentro de la carpeta de imágenes ya he puesto algunas de las imágenes que voy a utilizar. Voy a seleccionarla. Importantísimo indicar que la URL es relativa a la ubicación de la página. 00:01:53
Ponemos un título y un texto alternativo y aceptamos. La imagen se va a incluir con su tamaño original, en este caso es muy grande y se sale del contenedor en el que la estamos incluyendo. 00:02:06
Vamos a cambiar su tamaño y de momento lo vamos a hacer desde la opción de HTML porque no vamos a tocar los estilos de momento. Vamos a utilizar el atributo width y recordad que vamos a utilizar porcentajes para que las imágenes se ajusten al tamaño de pantalla. 00:02:29
Vale, le he puesto el 80%, a ver que da un salto de línea y no era necesario. Ahí vemos que ahora sí la imagen ocupa un 80% del contenedor en el que se encuentra. La voy a centrar y lo puedo hacer utilizando de nuevo las opciones de diseño y ahí tendríamos ahora mismo parte del contenido ya modificado. 00:02:48
otra cosa que voy a hacer es este párrafo 00:03:10
lo voy a poner con una alineación justificada 00:03:13
que me gusta más, vale, debajo de la imagen 00:03:20
que la vemos aquí, vamos a seguir incluyendo 00:03:24
otro párrafo, lo hago desde la opción de código, he creado 00:03:28
un párrafo y voy a coger el texto que quiero utilizar para ese párrafo 00:03:34
copio 00:03:38
y lo pego, veríamos de nuevo 00:03:41
en la opción de diseño, como aparece 00:03:50
ese nuevo contenido. 00:03:56
No me lo voy a justificar. Ahí veníamos. 00:03:58
Vale. 00:04:01
Voy a seguir creando 00:04:03
contenido dentro de esta página de inicio 00:04:05
y lo que voy a hacer 00:04:07
es crear 00:04:08
unos enlaces. 00:04:11
Vamos a crear un encabezado. 00:04:13
Lo hago desde la vista 00:04:16
de diseño. Lo podría hacer también 00:04:17
desde el código, que se va a 00:04:19
llamar otros datos. 00:04:21
Y aquí vamos a añadir una tabla. Esto no lo habíamos utilizado, pero ya que tenemos BlueGryphon con vista a diseño, pues vamos a usarlo. Voy a añadir una tabla y voy a incluir un contenido en forma de enlace en cada una de las celdas de la tabla. 00:04:22
Entonces vamos a poner un enlace al proyecto educativo del centro, vamos a poner un enlace a las enseñanzas de la ESO y vamos a poner un contenido a las enseñanzas de bachillerato. 00:04:43
Esto van a ser enlaces externos a páginas que ya están elaboradas pero que están fuera de mi sitio web. 00:05:21
Por ejemplo, aquí tenemos el proyecto educativo que se encuentra en esta dirección, entonces vamos a copiar la url para enlazarla, ahí la vemos, en este caso no ponemos que es una url relativa porque es una dirección externa y vamos a decir que lo abra en una ventana nueva. 00:05:29
Haríamos lo mismo con las enseñanzas de la ESO y las enseñanzas de bachillerato 00:06:06
Hemos hecho lo mismo con enseñanzas de la ESO y enseñanzas de bachillerato 00:06:14
Bueno, todavía no vamos a tocar 00:06:20
Todavía no vamos a tocar los estilos, pero de momento voy a centrar en la tabla 00:06:24
Y desde aquí, desde la opción del código, que veo que está poniendo un borde a mi tabla 00:06:33
Se lo voy a quitar, no me gusta el orden de esta tabla. 00:06:39
Podemos comprobar de momento, vamos a guardar y vamos a comprobar cómo está quedando ya desde el navegador. 00:06:45
Vamos a abrir el navegador y podemos comprobar la apariencia que está tomando y vamos comprobando esos enlaces que hemos creado que efectivamente funcionan. 00:06:55
Vale, vamos a continuar editando. Vamos a cambiar el pie de la página y la barra de navegación. Para el pie de la página he preparado también un texto que simplemente voy a copiar y sobre la opción de diseño, por ejemplo, lo voy a pegar. 00:07:11
bien, si me gusta el aspecto 00:07:35
lo mantendríamos aquí 00:07:38
bueno, quedaba bien ese salto de línea 00:07:39
vale, y respecto a la 00:07:43
barra de navegación, aquí lo que voy a 00:07:46
tener que hacer es poner los textos indicando 00:07:48
hacia donde van a navegar 00:07:50
y enlazarlo, crear enlaces 00:07:51
internos a mi sitio web con las diferentes páginas 00:07:53
siempre va a haber 00:07:56
una que se va a llamar inicio 00:07:58
lo voy a cambiar desde la opción de 00:08:01
código 00:08:03
puedo poner mayúsculas 00:08:06
una que se va a llamar 00:08:10
naciones 00:08:15
acordaos que en el boceto habíamos definido las páginas que vamos a utilizar 00:08:18
una que sería la de día 00:08:23
y necesitaría un cuarto enlace 00:08:25
para ello puedo copiar 00:08:29
y pegar 00:08:32
y crear un nuevo 00:08:34
ítem del menú de navegación que sería 00:08:36
luz y color 00:08:39
ya están creados los 00:08:41
cuatro ítems del menú de navegación 00:08:46
pero ahora hay que enlazarlos 00:08:49
con las páginas a las que 00:08:51
a las que apuntan 00:08:52
la página inicio 00:08:55
pues ya sabemos que es el 00:08:57
index.html 00:09:00
conviene utilizar minúsculas 00:09:01
ojo, es sensible a las mayúsculas y a las minúsculas 00:09:08
y no localizaría 00:09:10
el archivo. La página 00:09:12
instalaciones, pues sería instalaciones.html 00:09:16
y así haríamos con galería y con 00:09:18
luz color. También lo podemos hacer desde aquí 00:09:27
doble clic y buscamos 00:09:30
la página sobre la que queremos enlazar, en este caso 00:09:35
galería. Importante de nuevo, url relativa a la 00:09:39
ubicación de la página y aceptaríamos lo mismo con luz y color. Guardamos y comprobamos 00:09:43
el aspecto que tiene la página. Ahora mismo, ahí han aparecido los sitios del menú de 00:10:06
navegación y comprobamos que, bueno, todavía no he modificado las otras páginas, pero 00:10:19
me estarían enlazando a las diferentes páginas 00:10:26
este menú de navegación, tal cual lo voy a copiar y lo voy a pegar 00:10:30
en el resto de documentos HTML 00:10:34
lo mismo voy a hacer con el pie de la página 00:10:36
que va a ser igual en todos los documentos HTML 00:10:43
vamos por ejemplo a hacerlo en el de instalaciones para que veáis a lo que me refiero 00:10:46
voy a abrir el archivo 00:10:50
denominado instalaciones que ahora mismo contiene la plantilla básica 00:10:56
voy a poner la vista dual, tengo ahora aquí los dos archivos abiertos 00:10:59
voy al archivo que he puesto como inicio 00:11:04
y voy a copiar todo lo que es la barra de navegación 00:11:08
control c, copiar, control c, copiar 00:11:13
y se lo voy a cambiar, control v 00:11:16
ahí lo vemos, también cambiaría título 00:11:20
cambiaría el contenido, pero eso lo haríamos después 00:11:25
y vamos a cambiar también 00:11:37
lo que es el footer o el pie de la página 00:11:39
control c para copiar, control c para copiar 00:11:44
y vamos a el footer 00:11:49
control v, ahí está, vale 00:11:52
vamos a guardar, y ahora si vemos la vista 00:11:56
Si vemos en el navegador, ahora comprobaremos que efectivamente si voy a instalaciones, aparece la página de instalaciones, si voy a inicio, vuelve a la página de inicio. 00:12:01
Tendríamos ya la primera página y también tendríamos el menú de navegación y el pie para utilizar en el resto de páginas. 00:12:12
bueno, así crearíamos el contenido de todas nuestras páginas de nuestro sitio 00:12:21
podemos incluir todo lo que hemos ido aprendiendo 00:12:27
vídeo, listas, mapas 00:12:30
bueno, todo lo que queráis incluir 00:12:34
Subido por:
Julio G.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
118
Fecha:
22 de febrero de 2021 - 12:38
Visibilidad:
Público
Centro:
IES LA CABRERA
Duración:
12′ 39″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
87.00 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid