8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB
CON VISUAL STUDIO CODE
Logros:
ra imágenes.
- Creo la página pa
ra los vínculos.
- Modifico estilos pa
YouTube.
- Agrego videos de
.
platafor mas pa ra crear páginas web
- Uso
Viviendo con valores: Integridad
VALORES
Cualidad de quien tiene entereza moral. Honradez y rectitud en la conducta.
“La integridad del hombre se mide por su conducta, no
Hagamos clic - 6º Grado Educación Primaria
por su profesión”. Décimo Junio Juvenal
Poeta Romano (60 - 128)
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
Sesión
STUDIO CODE
PROYECTO:
2
Creo la página de imágenes de
autores peruanos
9
Aprendo:
Las imágenes se ordenan
en la página según el
MODELO FINAL tamaño con el que se
guardaron.
Actividades
?
a. Guardo las imágenes desde Internet.
b. Creo la página de imágenes de autores peruanos.
c. Agrego las imágenes guardadas de Internet.
a. Guardo imágenes desde Internet.
Para guardar imágenes: 2
1. Ingresa a tu navegador 1
web, para este caso
Google.
4
2. Escribe el texto a buscar.
3. Haz clic en la imagen 3
a guardar, se carga la
página.
4. Haz clic derecho en la
imagen en grande.
5. Haz clic en la opción
Guardar imagen como.
6. Ubica la carpeta de las
imágenes y escribe el
nombre. Guarda más 5
imágenes.
6
Hagamos clic - 6º Grado Educación Primaria 83
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 29 Creo la página de imágenes de autores peruanos.
b. Creo la página de imágenes de autores peruanos.
Para crear la página de
imágenes:
1
1. Presiona las teclas Ctrl + N
para crear la nueva página 2 3
y guarda el archivo con el
nombre [Link].
2. Escribe el inicio de la
programación.
3. Haz clic en la opción html:5
para que se muestre la
estructura de la página web.
4
4. Cambia el idioma y agrega el
5.
título Galería de imágenes.
Agrega una etiqueta h1 con
5
su clase para el título de la
página, la cual contendrá a
las imágenes.
6
6. Crea la página de estilos y
guárdala en la carpeta CSS.
7. Agrega el link para el estilo
8.
que se va a modificar.
Escribe el siguiente texto,
7
para crear la cantidad de ocho
comandos, luego presiona la
tecla Enter. 8
9. Ordena los comandos
duplicados de las ocho
imágenes.
Aprendo:
En la etiqueta de título
aparece un círculo blanco,
que nos indica que debemos
guardar los cambios.
9
84 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 29 Creo la página de imágenes de autores peruanos.
c. Agrego las imágenes guardadas de Internet.
Para agregar las imágenes:
1. Haz clic en el medio de las
comillas para agregar el texto
img.
2. Haz clic en la carpeta que se
muestra del menú contextual.
3. Haz clic en la imagen que vamos
4.
a colocar, para este caso galería1.
Haz clic para seleccionar todo el
1 2
texto entre comillas y presiona
las teclas Ctrl + C.
5. Pega el texto en medio de cada
comilla presionando las teclas
Ctrl + V.
6. Cambia el valor de la imagen
en cada texto copiado hasta el
número ocho, ya que serán ocho 3
imágenes que se muestren en la
página.
7. Presiona las teclas Ctrl + S para
guardar los cambios.
8. Abre la página de tu carpeta para
ver lo que estás realizando. Ctrl
+ S
9. Observa la galería de imágenes 4
que se muestran sin ningún
estilo.
6 7
5
Aprendo:
Los estilos permiten mejorar
la presentación, con sus
8
comandos y propiedades, 9
para el contenido.
Hagamos clic - 6º Grado Educación Primaria 85
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
Sesión STUDIO CODE
PROYECTO:
3 Modifico los estilos para la página de imágenes
0
MODELO FINAL
Actividades
?
a. Agrego un color de fondo para la página. Aprendo:
b. Uso los estilos en el lenguaje CSS. Los hipervínculos son
enlaces a una nueva
c. Agrego el hipervínculo para la galería de
imágenes. página web.
a. Agrego un color de fondo para la página.
Para agregar un color de fondo:
1
1. Abre el programa Visual Studio
Code.
2. Abre la página imá[Link] 3 2
y también imá[Link].
3. Escribe los comandos para
darle color a toda la página
web.
4. Agrega los comandos para darle
color al texto y la alineación del 4
título de la página web.
5. Presiona las teclas Ctrl + S para Ctrl
+ S
5
guardar los cambios.
86 Hagamos clic - 6º Grado Educación Primaria
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 30 Modifico los estilos para la página de imágenes.
b. Uso los estilos en el lenguaje CSS.
Para usar estilos en CSS:
1. Agregamos los
comandos para el
contenedor
imágenes.
de las
1
2. Copia los comandos
y sus atributos, como
muestra la imagen 2
sugerida.
3. Ahora vamos a mejorar
la galería pero de cada
una de las imágenes.
4. Agrega los comandos,
como se muestran en
la ventana, sin omitir 3
ninguno. 4
5. Agrega el comando
de desvanecimiento
de la imagen para que
nos muestre la imagen
más opaca y al pasar el
mouse cambie.
6. Abre el archivo
imá[Link] en el
7.
navegador web.
Observa la distribución
5
de cada una de las
imágenes.
Aprendo:
Una carpeta contiene todos
6
los archivos que forman
parte de una página web.
7
Hagamos clic - 6º Grado Educación Primaria 87
UNIDAD
UNIDAD28 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 30 Modifico los estilos para la página de imágenes.
c. Agrego el hipervínculo para la galería de imágenes.
Para agregar hipervínculos:
1. Abre la página web
1
[Link] que contiene
la página de los autores
peruanos. 2
2. Haz clic en el símbolo de
+
referencia del botón Leer
Ctrl S
más.
3. Agrega el nombre de la
página web que hemos 3 4
creado, para este caso
imá[Link].
4. Presiona las teclas Ctrl + S
para guardar los cambios
realizados.
5
5. Abre la carpeta que contiene
los archivos de la página 6
web.
6. Abre la página Index en tu 7
navegador preferido.
7. Observa la página web en tu
navegador.
8. Haz clic en el botón Leer
más.
9. Observa la página de
imágenes que se va cargar
automáticamente. 8 9
Aprendo:
Debes crear carpetas para
guardar los tipos de archi-
vos que forman parte del
proyecto web.
88 Hagamos clic - 6º Grado Educación Primaria
UNIDAD
UNIDAD 28 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
Sesión
STUDIO CODE
PROYECTO:
3
Agrego videos de YouTube a la página web
1
MODELO FINAL
Actividades
?
Aprendo:
a. Busco el video de YouTube. Las etiquetas que manejan
b. Copio la programación del video de el tamaño en el video son:
YouTube. width=”760” --> Ancho
c. Creo la página web del video con su height=”515” --> Alto
enlace.
a. Busco el video de YouTube.
Para buscar el video:
1. Ingresa a la página web
de YouTube para buscar 1
el video. 2
2. Haz clic en el recuadro de
búsqueda para escribir el
texto a buscar. 3
3. Haz clic en el video que
vamos a utilizar para la
página web.
4. Haz clic en el botón
reproducir para ver el
video de los autores
peruanos. 4
Hagamos clic - 6º Grado Educación Primaria 89
UNIDAD
UNIDAD28 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 31 Agrego videos de YouTube a la página web.
b. Copio la programación del video de YouTube.
Para copiar la programación:
1. Haz clic en la opción
Compartir del video de
YouTube.
2. Haz clic en la opción
Insertar de la ventana
Compartir.
3. Haz clic para seleccionar
todos los comandos de
2
programación.
1
4. Presiona las teclas Ctrl + C para
copiar el texto seleccionado.
5. Ingresa al programa Visual
Studio Code y presiona las Ctrl C
teclas Ctrl + N para crear un
Ctrl N 3 +
4
nuevo documento.
6. Presiona las teclas Ctrl + S +
para guardar el archivo. 5
7. Escribe el nombre del
archivo, para este caso
[Link]. Luego
presiona la tecla Enter.
8. Escribe html5 y presiona
la tecla Enter para obtener
6
la programación básica de
una página web.
7
Recuerda:
La extensión HTML
permite identificar una
página web. 8
90 Hagamos clic - 6º Grado Educación Primaria
UNIDAD
UNIDAD 28 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
STUDIO CODE
Sesión 31 Agrego videos de YouTube a la página web.
c. Creo la página web del video con su enlace.
Para crear la página:
1. Cambia el título de la
página web, para este caso
Videos.
2. Haz clic en el centro de la 1
etiqueta Body y presiona
las teclas Ctrl + V para pegar
2 3
el código de YouTube.
3. Haz clic al final de la
dirección de la etiqueta
SRC y presiona la tecla
Enter para observar los
comandos de todo lo
copiado. 4
4. Haz clic debajo de la
etiqueta Body y escribe la
etiqueta <center>, luego
cambia el tamaño del 5
video en width y height.
5. Agrega la etiqueta de
cierre </center> para que
el video este centrado.
6. Abre la pagina web para
ver el video.
7. Abre el archivo Index. 6
8. Agrega una etiqueta a, con
referencia al enlace del
video, como nos muestra
la imagen. 7
Recuerda:
Debemos tener Internet
para observar el video
8
que vamos a colocar.
Hagamos clic - 6º Grado Educación Primaria 91
UNIDAD 8 MANEJO HIPERVÍNCULOS EN PÁGINAS WEB CON VISUAL
Sesión STUDIO CODE
Proyecto 8: Utilizo Wix para crear una página web de
3
artistas peruanos
2 PROYECTO
FINAL
A. Ingresa a Wix
1. Ingresa a la plataforma de Wix dentro
del navegador que más uses.
2. Ingresa con tu cuenta de usuario de
Google o Facebook.
3. Guarda las imágenes que vas a utilizar
en una carpeta.
B. Busca plantillas para la web
1. Usa una de las plantillas que más te
agrade para el proyecto a realizar.
2. Cambia toda la información por la de
artistas peruanos.
3. Agrega hipervínculos si es necesario.
C. Completa tu página web
VIDEO
1. Puedes enlazar videos de YouTube
para completar la página web.
TUTORIAL
2. Copia el enlace que te brinda la
plataforma para su respectiva ESCANEA AQUÍ
presentación.
92 Hagamos clic - 6º Grado Educación Primaria