Saltar navegación

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

Creación de una página web en GitHub Tutorial 03 - 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 14 de noviembre de 2025 por Jose G.

30 visualizaciones

Tutorial de la construcción de una página web en GitHub, con todos los elementos que se pueda necesitar.

Más información Transcripción

Descargar la transcripción

Hola, chicos. En este videotutorial se va a crear una página web, como ejemplo de las diferentes capacidades que permite el uso de GitHub. 00:00:26
Se va a ir introduciendo todos los elementos necesarios para construir la página web. 00:00:35
Y luego se verá cómo GitHub tiene su propio servidor de páginas web para su publicación y difusión. 00:00:41
En la creación de la página web de ejemplo, se utilizará el editor que incluye GitHub. 00:00:47
Luego, según se va construyendo, poco a poco, la página se va a ir introduciendo toda la 00:00:52
información necesaria, es decir, texto e imágenes. 00:00:58
En este proceso de construcción, se va a organizar esta información para que tenga 00:01:03
un aspecto apropiado e interesante. 00:01:07
Y finalmente, cada vez que se haga un cambio en la página, se va a ir probando la publicación 00:01:10
y ver el resultado, tal como lo ve cualquier persona que llegue a esta web. 00:01:15
Hay que recordar que se parte del videotutorial GitHub 2 y, por tanto, estamos situados en el editor de páginas web. 00:01:28
También hay que recordar que ya se tenía el primer archivo o la primera página web de ejemplo, el index.gdml. 00:01:36
Aquí se tiene que empezar a colocar todas las etiquetas y atributos que van a definir la página web. 00:01:43
Se recuerda que para la creación de cualquier página web es necesario el empleo de etiquetas o lenguaje de etiquetas. 00:01:48
Bien, en la creación de cualquier página web, siempre debe tener este esqueleto. 00:02:05
Siempre debe tener la etiqueta HTML y la etiqueta con la barra diagonal HTML, que es la que va a indicar siempre que es un documento de página web. 00:02:12
Como todo documento HTML, debe tener una cabecera, indicada con la etiqueta title y finalización de cabecera con la etiqueta barra diagonal title. 00:02:24
¿Dónde va el nombre de la página? 00:02:34
En la parte del cuerpo, tiene la etiqueta BODY y la etiqueta barra diagonal BODY. 00:02:36
Estas etiquetas componen el esqueleto de cualquier página web. 00:02:42
Bien, una vez introducida toda esta información, se cliquea aquí, al control de código. 00:02:47
Se va a hacer la primera actualización, y en esta caja se escribe el nombre de la actualización. 00:02:53
Prueba 00. 00:02:59
Se cliquea en el botón Confirmar y Enviar cambios. 00:03:01
Estos cambios se envían al servidor de páginas web que tiene GitHub. 00:03:04
Ahora se va a realizar ya el primer cambio en el esqueleto. 00:03:16
Se va a escribir nuevas etiquetas para que aparezcan en este ejemplo de página web. 00:03:20
Y se verán los primeros cambios en ella. 00:03:25
Entre las etiquetas title, se escribe componentes de una computadora. 00:03:33
Y entre las etiquetas body, se escribe componentes de una computadora entre las etiquetas de tamaño de título. 00:03:37
Se cliquea en el control de código. 00:03:45
Se hace la segunda actualización y en esta caja se escribe el nombre de la actualización. 00:03:47
Prueba 01. 00:03:53
La próxima acción para realizar es abrir una nueva pestaña. 00:04:02
Esta tiene que corresponder al usuario de GitHub que se está empleando. 00:04:15
Se va a ir aquí y se cliquea Acción. 00:04:23
Ahora aparece una lista de diferentes actualizaciones que se han hecho en esta página. 00:04:28
página. Todas las actualizaciones están todas en verde. 00:04:33
Si presiono aquí en la última actualización, envía a la siguiente pantalla. 00:04:40
Al cliquear en este enlace, abre una pestaña de nombre componentes de una computadora, 00:04:48
que corresponde a la página web creada. En ella, aparece el título Componentes de una 00:04:53
computadora. Bien, ahora se vuelve al editor de la página 00:05:00
web. Se van a hacer algunos cambios en el título de la página web. En el título Componentes de la 00:05:11
computadora, se le posiciona en el centro de la cabecera. Para ello, se posiciona Componentes de 00:05:28
la computadora entre la etiqueta Center y la etiqueta barra diagonal Center. Se cliquea en 00:05:36
el control de código y en esta caja se escribe el nombre de la actualización. Prueba 03. Se 00:05:57
hace la nueva actualización. Se cliquea en el botón azul de confirmar y enviar cambios. 00:06:04
A continuación, se cliquea el botón acción. En el cambio de pantalla, se ve cómo se está 00:06:19
realizando la nueva actualización. Cuando la actualización pase de color amarillo a 00:06:31
verde, significa que ya están los nuevos cambios en el servidor de páginas web. Si 00:06:38
se cliquea en la pestaña, se vería que no hay cambios. Para ver si ha terminado de actualizar, 00:06:45
se cliquea Actualizar página y se comprueba si ha pasado a verde el indicador. Está verde. Ya 00:06:58
está actualizada. Se cliquea en la pestaña de la página. Se cliquea en Actualizar página y se 00:07:05
comprueba que el título aparece centrado en la página. Ahora se vuelve, otra vez, al editor. 00:07:14
Se va a realizar otro cambio en la página. 00:07:30
El cambio a realizar está relacionado con la fuente del título. 00:07:37
Se añade en la etiqueta Font el atributo color igual a blue y la etiqueta barra diagonal Font, y se actualiza como las veces anteriores. 00:07:42
Se cliquea en Acción. Una vez que la actualización está verde, se clique la pestaña. 00:07:51
Se actualiza la página, y se verifica el cambio de color a azul del título. 00:07:59
A continuación, se vuelve al editor para añadir nuevas propiedades a la página index.html. 00:08:03
La propiedad que se va a cambiar es el tipo de fuente. 00:08:16
En la etiqueta Fonts, después del atributo Color igual a Blue, se añade el atributo Face igual a Arial Black. 00:08:29
Se cliquea en el control de código para la nueva actualización, y en esta caja se escribe el nombre de la actualización. 00:08:37
Prueba 05. 00:08:45
Se cliquea el botón azul de Confirmar y Enviar cambios. 00:08:47
Se cliquea en la pestaña. 00:09:00
Se cliquea en Acción. 00:09:03
Se espera a que se envíe los cambios al servidor de páginas web. 00:09:08
Se cliquea Actualizar. 00:09:14
Se cliquea aquí. 00:09:22
Y se comprueba que los cambios se han enviado. 00:09:25
Se cliquea en la pestaña. 00:09:34
Y se actualiza la página. 00:09:35
Ahora se ve el cambio de tipo de letra. 00:09:41
Ha cambiado a Arial Black y se mantiene el color azul. 00:09:43
Se va a añadir otra propiedad a esta página. 00:09:53
Se vuelve al editor. 00:09:56
El cambio que se va a realizar es sustituir el fondo blanco de la página por otro color. 00:09:58
El cambio que se va a hacer en la etiqueta Body. 00:10:05
En la etiqueta se incluye el atributo VGColor igual a almohadilla de F09E. 00:10:08
En cualquier página web, el color puede ser definido mediante un código numérico. 00:10:13
Lo habitual es emplear código numérico hexadecimal. 00:10:21
Para obtener el color deseado y su código numérico, solo tenemos que ir a un buscador de Internet y teclear código de colores en HTML. 00:10:26
Se cliquea en esta opción y se entra en esta web. 00:10:36
Ahora se puede buscar y elegir el color deseado. 00:10:53
realizando los ajustes necesarios en la paleta de colores. 00:10:57
En esta caja, se expresa el código numérico sexagesimal del color elegido 00:11:01
después de todos los ajustes que se han realizado, y se copia. 00:11:06
En este ejemplo de trabajo, se propone el código de AF09E. 00:11:14
Ahora, se cliquea en el control de código. 00:11:20
Se hace la nueva actualización. 00:11:24
y en esta caja se escribe el nombre de la actualización. 00:11:25
Prueba 05. 00:11:29
Se cliquea el botón azul de Confirmar y Enviar cambios. 00:11:33
Se vuelve a cliquear Acción 00:11:37
y se ve cómo se ha vuelto a iniciar el proceso de actualización de los cambios en el servidor de páginas web. 00:11:39
El color verde indica que ya están realizados todos los cambios. 00:11:47
Se cliquea la pestaña 00:11:54
y se actualiza la página. 00:11:56
El resultado es que el fondo ha cambiado de color blanco a color verde claro. 00:11:59
Seguidamente, se va a añadir nuevos elementos con sus correspondientes propiedades. 00:12:11
Se vuelve al editor. 00:12:21
Ahora se va a añadir una imagen debajo del título. 00:12:26
Para poner la imagen en la página, es necesario que esté en el repositorio, al mismo nivel que los archivos que tiene la página web. 00:12:35
Seguidamente, se localiza la imagen que se va a emplear, mediante el explorador de archivos. 00:12:43
Se selecciona. 00:13:01
Se arrastra de la carpeta local al repositorio. 00:13:03
Se ve que ya está copiada en él, porque se puede ver. 00:13:08
A continuación, se cliquea en el control de código. 00:13:12
Se hace la actualización. 00:13:16
Y en esta caja se escribe el nombre de la actualización. 00:13:18
Prueba 07. 00:13:21
Como siempre, se cliquea el botón azul de confirmar y enviar cambios. 00:13:26
Ahora ya se dispone de la imagen para incluir en la página web de este ejemplo. 00:13:33
Ahora se escribe la etiqueta que permite incluir la imagen en la página. 00:13:46
La etiqueta que se va a emplear es simsf="computadora.jpg", con los atributos width="600", height="337", 00:13:50
de ancho y alto respectivamente, medidos en píxeles. Y esta etiqueta está posicionada 00:14:00
en las etiquetas Center y barra diagonal Center. Luego, se cliquea en el control de código. 00:14:06
Se hace la actualización. Y en esta caja se escribe el nombre de la actualización. 00:14:13
Prueba 08. Como siempre, se cliquea el botón azul de confirmar y enviar cambios. 00:14:19
Se cliquea en Acción. 00:14:31
Se verifica el envío de los cambios al servidor de páginas web. 00:14:36
Ya está verde. 00:14:48
Ya se han realizado los cambios. 00:14:49
Se cliquea la pestaña. 00:14:51
Y se actualiza la página. 00:14:53
Aparece la imagen centrada ahí debajo del título. 00:14:58
Con el tamaño deseado. 00:15:01
Ahora se van a añadir nuevos elementos. 00:15:08
Una vez que se regresa al editor. 00:15:10
Un texto de introducción al tema de la página, situado debajo de la imagen. 00:15:15
Este texto tendrá las etiquetas de FAND con los atributos de color igual a green, face igual a areal y size igual a 3, 00:15:40
es decir, letra de color verde, tipo areal y tamaño 3, insertado en las etiquetas de párrafo P y barra oblicua P. 00:15:48
Y para realizar los cambios, se hace, se cliquea en el control de código. 00:15:56
Se hace la actualización, y en esta caja se escribe el nombre de la actualización. 00:16:10
Prueba 09. 00:16:15
Se cliquea el botón azul de Confirmar y enviar cambios. 00:16:25
Se cliquea el botón de Acción. 00:16:29
Se está produciendo el envío de los cambios al servidor web. 00:16:33
Ya se han producido los cambios. 00:16:41
Se cliquea la pestaña y se recarga la página. 00:16:47
Debajo de la imagen, aparece el texto de introducción con las propiedades que se han sugerido para este trabajo, fuente areal, color verde y tamaño 3. 00:16:57
En la siguiente modificación de la página, se introducen nuevos elementos, con una nueva forma de ordenación y presentación de los contenidos. 00:17:12
Para ello, se empleará el concepto de tabla. 00:17:22
Se vuelve a regresar al editor. 00:17:28
En este ejemplo, se va a añadir nueva información. 00:17:30
Se va a añadir nuevas imágenes y texto. 00:17:42
En concreto, dos fotografías y sus textos explicativos relacionados con la temática de la página web. 00:17:46
Para tal fin, se emplea una tabla compuesta de dos filas y dos columnas. 00:17:54
Recordad que la intersección de las filas y las columnas son las celdas, 00:17:59
y en las celdas es donde se va a posicionar las fotografías y los textos. 00:18:03
Lo primero que se va a hacer es cargar las fotografías de la computadora al repositorio. 00:18:08
Se arrastra cada una de ellas de la carpeta de local de la computadora al repositorio 00:18:14
y se comprueba que se han cargado correctamente. 00:18:18
Ya están todas las imágenes necesarias. 00:18:48
Ahora, se añade todas las etiquetas necesarias para crear la estructura de la tabla. 00:18:53
Se escribe las etiquetas de párrafo. 00:18:59
Se escribe las etiquetas de centrado. 00:19:03
Se escribe las etiquetas de tabla. 00:19:05
Tabla y barra diagonal tabla, con el atributo de borde de ancho 2. 00:19:07
En la tabla establecida, entre las etiquetas de tabla, se inserta las etiquetas de la primera fila, TR y barra diagonal TR. 00:19:13
Entre las etiquetas de la fila, se inserta las etiquetas de cada una de las columnas, TD y barra diagonal TD. 00:19:21
y en cada etiqueta de cada columna se insertan las etiquetas de la imagen con sus atributos 00:19:28
o las etiquetas del texto con sus atributos. 00:19:34
Se repite el mismo proceso para la segunda fila. 00:19:37
Seguidamente, se cliquea en el control de código. 00:20:22
Se hace la actualización para que las fotografías se puedan insertar en la página 00:20:25
y se cree la estructura de la tabla. 00:20:30
Y en esta caja se escribe el nombre de la actualización, Prueba 11. 00:20:33
Ahora, se cliquea el botón azul de Confirmar y enviar cambios. 00:20:38
Se cliquea el botón de Acción. 00:20:44
Se espera a que las fotografías y los cambios se envíen al servidor. 00:20:48
Cuando el indicador cambia de color a verde es la señal de que todo está actualizado. 00:20:52
Finalmente, se cliquea sobre la página y se vuelve a recargar. 00:21:05
El resultado es que se visualiza una tabla formada por dos filas y dos columnas. 00:21:10
En la primera columna están las imágenes de los componentes y la segunda los nombres de los componentes. 00:21:26
Y con esto, finaliza el videotutorial del proceso de construcción de la página web en GitHub y el proceso de publicación de la misma. 00:21:37
Espero que os sea útil. 00:21:45
Adiós, chicos. 00:21:47
Idioma/s:
es
Materias:
Tecnología, Tecnologías de la Información
Etiquetas:
Internet, Tecnología
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Educación Secundaria Obligatoria
    • Ordinaria
      • Primer Ciclo
        • Primer Curso
        • Segundo Curso
      • Segundo Ciclo
        • Tercer Curso
        • Cuarto Curso
        • Diversificacion Curricular 1
        • Diversificacion Curricular 2
    • Compensatoria
  • Bachillerato
    • Primer Curso
    • Segundo Curso
  • 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:
José González
Subido por:
Jose G.
Licencia:
Todos los derechos reservados
Visualizaciones:
30
Fecha:
14 de noviembre de 2025 - 10:43
Visibilidad:
Público
Centro:
IES JIMENA MENÉNDEZ PIDAL
Duración:
22′ 10″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
439.18 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid