7
Logros:
andos principales.
- Identifico los com
.
a de la página web
- Diseño la portad
a la portada.
- Agrego los estilos
es de responsive.
- Manejo las opcion
Viviendo con valores: Justicia
VALORES
Acción o poder de reconocer y dar a cada uno lo que le pertenece.
“Solo el tiempo puede revelarnos al hombre justo;
al perverso se le puede conocer en un solo día”. Sófocles
Poeta trágico griego (495 a.C. - 406 a.C.)
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
Sesión VISUAL STUDIO CODE
PROYECTO:
2
Identifico los comandos principales para dar inicio a la
programación web
5 Aprendo:
HTML es un lenguaje de
marcado que nos permite
indicar la estructura de
nuestro documento mediante
etiquetas.
MODELO FINAL
Actividades
?
a. Descargar Visual Studio Code.
b. Conozco los atajos de teclado de Visual Studio Code.
c. Creo un nuevo documento HTML.
a. Descargar Visual Studio Code.
Para descargar Visual
Studio Code: 1
1. Ingresa a tu navegador
web, para este caso 2
Google.
2. Haz clic en el recuadro 3
de búsqueda y escribe
Visual Studio Code.
3. Haz clic en el enlace
para ingresar a la página
principal del programa.
4. Haz clic en el botón
Descargar. 4
5. Haz clic en el sistema
operativo y versión que
deseas descargar.
5
72 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Identifico los comandos principales para dar inicio a la
Sesión 25 programación web.
b. Conozco los atajos de teclado de Visual Studio Code.
Atajos de funcionalidad básica
Los atajos de funcionalidad general más úti-
les en Visual Studio Code son los siguientes:
Ctrl + Shift + P: abre la paleta de comandos.
Ctrl + Shift + N: abre una nueva ventana.
Ctrl + Shift + W: cierra una ventana.
F11: activa y desactiva la pantalla completa.
Atajos para la gestión de archivos
En lo que a gestión de archivos se refiere, los atajos de teclado más utilizados son
los siguientes:
Ctrl + O: permite abrir con VS Code un archivo existente en el dispositivo.
Ctrl + N: abre un archivo nuevo.
Ctrl + S: guarda el archivo.
Ctrl + Shift + S: realiza la acción «Guardar Como».
Ctrl + K + Ctrl + W: cierra todas las pestañas que estén abiertas.
Ctrl + Shift + T: permite abrir la última o últimas pestañas cerradas.
Ctrl + 2: divide la pantalla en dos.
Atajos para programar
de Visual Studio Code
Html:5 + Enter:
El resultado es el siguiente:
Etiqueta*X + Enter: cuando
trabajamos con archivos.
html, podemos escribir
el nombre de cualquier
etiqueta (sin los símbolos
<>) y multiplicarlo por el
número que queramos
mediante el símbolo *.
Por ejemplo, [Link]*5, el
resultado es el siguiente:
Hagamos clic - 6º Grado Educación Primaria 73
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Identifico los comandos principales para dar inicio a
Sesión 25 la programación web.
c. Creo un nuevo documento HTML.
Para crear un nuevo documento:
1
1. Abre el programa instalado y
haz clic en el menú Archivo.
2
2. Haz clic en la opción Nuevo
archivo de texto. Se muestra
el documento.
3. Haz clic en el menú Archivo.
4. Haz clic en la opción
Guardar. 3
5. Haz clic en la carpeta donde
se va a guardar el archivo y
escribe el nombre, para este
caso Index.
6. Haz clic en el tipo de archivo
HTML respectivamente. 4 5
7. Escribe el texto html y
escoge la versión 5.
8. Automáticamente se
muestra la estructura básica
de una página web.
9. Cambia el título de la 7 6
cabecera (head) y agrega
una etiqueta H1 para el título
de cuerpo de la página.
10. Abre el navegador para
visualizar lo realizado con la
programación.
8
Aprendo:
Toda estructura tiene dos
9
etiquetas: una de apertura y
la otra de cierre.
<body> (Apertura)
</body> (Cierre)
10
74 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
Sesión
VISUAL STUDIO CODE
PROYECTO:
Diseño la portada de la página web de autores peruanos
2
6
MODELO FINAL
Actividades
?
a. Guardo la imagen para el banner. Aprendo:
b. Agrego la programación de la imagen. La página principal de una
c. Genero un estilo para la imagen. web tiene como nombre
Index de inicio.
a. Guardo la imagen para el banner.
Para guardar la imagen: 1
1. Ingresa a Google y escribe el
texto a buscar en la galería
3
imágenes. 2
2. Haz clic en la imagen a
guardar.
3. Haz clic derecho en la imagen 5
grande.
4. Haz clic en la opción Guardar
imagen como. 4
5. Haz clic en la carpeta
principal de la página.
6. Escribe el nombre y haz clic
6
en guardar.
Hagamos clic - 6º Grado Educación Primaria 75
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Diseño la portada de la página web de autores
Sesión 26 peruanos.
b. Agrego la programación de la imagen.
Para agregar la programación: 1
1. Haz clic en el menú Archivo
de la ventana de Visual Studio 2
Code.
2. Haz clic en la opción Abrir
carpeta.
3. Haz clic en la carpeta principal
donde están guardados los
3
archivos y las imágenes.
4. Observa los archivos que
existen en la carpeta abierta.
5. Ubica el cursor debajo de
la etiqueta H1 y escribe la
programación para abrir la
imagen. 5
6. Completa la programación 4
para la portada de la página
web, como muestra la imagen,
sin omitir ninguna etiqueta.
6 Ctrl S
7. Presiona las teclas Ctrl + S para
guardar los cambios realizados +
en la página. 7
8. Abre el archivo web que se
encuentra en la carpeta.
9. Observa la página web que se
está creando. 8
9
Aprendo:
Una carpeta contiene todos
los archivos que forman
parte de una página web.
76 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Diseño la portada de la página web de autores
Sesión 26 peruanos.
c. Genero un estilo para la imagen.
Para generar estilos:
2
Ctrl
+ S
1. Presiona las teclas Ctrl + N para
crear un nuevo documento. 3
2. Presiona las teclas Ctrl + S
para guardar el archivo. Ctrl N
3. Crea una subcarpeta para los
estilos, para este caso CSS.
+ 1 4
4. Escribe el nombre del archivo,
para este caso [Link] y
haz clic en el botón Guardar.
5. Escribe los comandos para la
sección de la imagen.
5
6. Escribe los comandos para
el banner que contiene la
imagen. 6
7. Escribe el comando para la
posición del texto encima de
la imagen.
8. Escribe los comandos para 7
el cuadro de Leer más. Para
el hover y el contenedor
principal.
9. En la página de Index, agrega 8
el link referente para que
jale los estilos en la página.
Guarda los cambios y observa
lo que se ha realizado.
Aprendo: 9
Usa las teclas Ctrl + S para
guardar los cambios realizados
en la programación.
Hagamos clic - 6º Grado Educación Primaria 77
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
Sesión VISUAL STUDIO CODE
PROYECTO:
2
Agrego estilos para el resto de la página
7
MODELO FINAL
Actividades
?
a. Agrego la sección de bienvenida. Aprendo:
b. Agrego más imágenes a la página Visual Studio Code tiene el
principal. botón para ejecutar el ser-
c. Creo un nuevo estilo para las vidor en vivo.
imágenes.
a. Agrego la sección de bienvenida.
Para agregar una sección:
1 2
1. Ingresa al programa
Visual Studio Code.
2. Abre el archivo Index que
se está trabajando.
3
3. Agrega otra sección con
el nombre Bienvenidos,
un texto H2. 4
4. Corta el texto del H3 que
se encuentra debajo de
la etiqueta </main>
5. Agrega la etiqueta <p> y
el texto cortado. 5
3
78 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Sesión 27 Agrego estilos para el resto de la página.
b. Agrego más imágenes a la página principal.
Para agregar más imágenes:
1. Haz clic en el archivo CSS para 1
mostrarlo.
2. Escribe los comandos
para centrar el texto de
2
3.
Bienvenidos.
Haz clic en el archivo Index
3
respectivamente.
4. Agrega los comandos para
una nueva sección con el texto 4
que quedaba anteriormente.
5. Agrega un div con la clase
contenedor para que 5
contenga artículos de
imágenes, agrega esos
comandos y luego, presiona
la tecla Enter.
6. Observa que se repitieron
tres veces los comandos y las 6 7
clases para las imágenes.
7. Agrega las imágenes que
están en la carpeta img.
8. Agrega el texto de cada una
de las imágenes.
9. Presiona las teclas Ctrl + S 10 8
para guardar los cambios.
10. Abre la página web en el 9
+
navegador.
Ctrl S
Recuerda:
No verás los cambios en el
navegador si no guardas los
archivos trabajados.
Hagamos clic - 6º Grado Educación Primaria 79
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
VISUAL STUDIO CODE
Sesión 27 Agrego estilos para el resto de la página.
c. Creo un nuevo estilo para las imágenes.
Para crear un nuevo estilo:
1. Crea un nuevo estilo llamado
[Link] y guárdalo en la 1
carpeta correspondiente. 2
2. Agrega los comandos para
el contenedor de imágenes
y los artículos. 3
3. Haz clic en el archivo Estilos
CSS.
4. Escribe el comando @
import url([Link]) para
que pueda ejecutarse el 4
estilo para el blog.
5. Haz clic en el archivo
[Link] para manejar los
comandos.
6. Agrega la programación
para las imágenes y los
textos que acompañan las
5
imágenes.
7. Presiona las teclas Ctrl + S en
los dos archivos, es decir, en
el [Link] y en [Link]. 6 Ctrl
+ S
8. Abre la página web en tu
navegador y observa la 7
portada de la página web
de los autores peruanos.
8
Aprendo:
Las carpetas contienen
los archivos según su
categoría o la extensión
de archivos.
80 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 7 PROGRAMO PÁGINAS WEB DE AUTORES PERUANOS UTILIZANDO
Sesión
VISUAL STUDIO CODE
Proyecto 7: Manejo las opciones de responsive
2
para la página web
PROYECTO
FINAL
8
A. Modo celular
1. Los comandos que se ejecutan son
para el modo celular, ya que es el modo
más pequeño para ser ejecutado.
2. Debemos iniciar la vista previa en
modo celular.
B. Modo tablet
1. El comando flex-wrap: wrap permite
que las imágenes que no entran en
una línea salten a la siguiente.
2. El comando display: flex permite que
las imágenes estén en una sola linea.
3. El comando margin permite separar
las imágenes.
C. Modo escritorio
VIDEO
1. El modo escritorio es la forma más TUTORIAL
común para programar páginas web.
2. Todos los archivos como imágenes,
estilos y la página web deben estar en ESCANEA AQUÍ
una sola carpeta.
Hagamos clic - 6º Grado Educación Primaria 81