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

Estructuración de una página web - Contenido educativo

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 10 de enero de 2022 por Jaime S.

84 visualizaciones

Hola de nuevo, os voy a explicar cómo hacer nuestra primera página web. 00:00:00

Dentro del tema de edición de páginas web, en este videotutorial os voy a explicar cómo crear la estructura general de nuestra página web. 00:00:04

En primer lugar, ya habréis elegido una temática de vuestra página web y lo siguiente que vamos a hacer es crear la estructura general a partir de mi temática. 00:00:13

Es decir, yo he elegido la temática del sistema solar y dentro del sistema solar voy a hablar del sol y de los planetas. 00:00:22

Yo voy a hacer una estructura general y vosotros vais a adaptar esta estructura general a vuestra temática de la página web. 00:00:28

Lo primero que hay que hacer para crear una página web es crearte un espacio web, que al fin y al cabo es una carpeta. 00:00:37

Yo la voy a crear en el escritorio, nueva carpeta, que la voy a llamar sistema solar 1. 00:00:44

Y dentro de esa carpeta, pues tenéis que crear otra nueva carpeta que sea imágenes. 00:00:53

Dentro de esta carpeta imágenes, dentro de vuestro espacio web, tenéis que poner todas las imágenes que vais a utilizar en vuestra página web. 00:01:03

Imagen que no esté dentro de esta carpeta va a ser imagen que no aparezca en mi página web cuando a mí me la envíéis y en el caso necesario, cuando se suba al servidor, tampoco aparecería. 00:01:11

Si habéis visto alguna página web en la que habéis entrado y os aparece un cuadro con una X 00:01:21

significa que esa imagen no está cargada y que no se ha subido correctamente dentro de la carpeta de imágenes 00:01:27

Una vez que yo ya me he creado el sitio web, es decir, la carpeta 00:01:33

lo que hago es abrir el programa para editar la página web 00:01:38

El programa para editar la página web es Composer 00:01:41

Ya me aparece una página en blanco sin título 00:01:44

Lo primero que voy a hacer es archivo, guardar como, vale, el título de la página es lo que aparece cuando carga en el navegador la página, es lo que aparece arriba. 00:01:48

Y muy importante, esta es la página principal, la voy a guardar como index, como index dentro del espacio web que yo me he creado, 00:02:00

Es decir, en el escritorio, sistema solar 1, la página principal la guardo con nombre de archivo index. 00:02:12

Y aparece el título como principal y está guardada dentro de la carpeta como index. 00:02:21

Lo siguiente que voy a hacer es formato, colores y fondo de página. 00:02:26

Aquí viene el color de texto predeterminado en negro, luego lo vamos a poder cambiar. 00:02:33

el texto del enlace en color azul cuando no has entrado, cuando está entrando y en color violeta cuando ya has entrado o visitado ese enlace. 00:02:37

Y por último, el color de fondo, pues voy a poner un color azul claro para esta página principal. 00:02:47

Me he creado la página principal, nuestra página va a tener una página principal y cuatro páginas más en las que voy a dividir la temática de mi página entre ellas. 00:02:56

Ya tengo la página principal y me creo una nueva página. 00:03:07

Siguiente, archivo, guardar como, título le voy a poner sol y a la guardo dentro de sistema solar como sol. 00:03:11

En esta página voy a poner en lugar de un color de fondo, voy a usar una imagen. 00:03:23

Las imágenes si tienen tamaño pequeño se repiten hasta que llena todo el ancho de mi página. 00:03:34

Si tiene tamaño grande, pues puedo incluso a no llegar a repetirse. 00:03:41

Voy a poner el sol y veréis como aquí se me repite tantas veces como sea necesario para cubrir el ancho total de toda la página. 00:03:45

Evidentemente cuando yo pongo una imagen de fondo queda muy bonito, pero hay que tener mucho cuidado a la hora de seleccionar el color de texto. 00:03:54

Yo aquí teniendo colores negros oscuros no puedo poner el texto en color negro porque no se va a leer. 00:04:02

Tendría que poner el texto en color blanco. 00:04:07

Voy a mantener esta imagen aunque no queda bien. 00:04:10

Tendría que haber puesto una imagen grande de fondo para luego poder escribir encima en color blanco. 00:04:13

Vuelvo a crear una nueva página, archivo, guardar como y la voy a llamar planetas. 00:04:22

Y la guardo con el nombre de archivo planetas. 00:04:33

Y en formato colores de fondo de la página, en color de fondo voy a ponerle un color verde. 00:04:36

Ya tengo la página principal más dos más y ahora me quedan otras dos. Creo otra página nueva, formato, colores de fondo de la página, uso los mismos colores pero en el color de fondo le voy a poner un color amarillo nuevamente. 00:04:44

Le he puesto un color de fondo pero como no lo ha guardado vengo y le digo archivo guardar como y aquí yo en esta página voy a hablar de la tierra. 00:05:07

Aguardo como tierra. 00:05:19

Y por último me creo una nueva página. 00:05:21

Esta página, archivo guardar como, la voy a llamar registro. 00:05:24

Y con nombre de archivo, registro. 00:05:32

Cambio el color de fondo de mi página. 00:05:37

Le voy a poner un color violeta. 00:05:42

Y ya tengo la estructura de mi página. 00:05:46

La página principal en la que no he puesto nada de texto. 00:05:48

La página sol, planetas, tierra y registro. 00:05:52

Vosotros tenéis que crearos la estructura de vuestra página haciendo todos los pasos que yo acabo de hacer, 00:05:55

pero poniendo el nombre a cada una de las páginas en función de vuestra temática y la que vais a desarrollar en cada una de las páginas. 00:06:02

Si yo ahora minimizo el Composer y vengo a Sistema Solar 1, pues ya os dais cuenta que tengo la página principal, planetas, registro sol y tierra. 00:06:10

Todas las páginas que me he creado. 00:06:24

Si ahora abro index, directamente me aparece la página con el color que yo he puesto, porque no he puesto nada más, y en esta página me la ha abierto con el navegador. 00:06:26

El navegador a mí no me permite editar, simplemente el navegador es para visualizar. 00:06:39

Para poderla editar debería abrir Composer nuevamente, abrir la página y editarla. 00:06:44

Ahora tenéis que crear la estructura de vuestra página y ya en el siguiente videotutorial os digo cómo crear la página principal y la segunda página adicional. 00:06:50

Nos vemos dentro de un poco en el siguiente videotutorial. Hasta ahora. 00:06:59