Publicación de página web

en internet
grados 10 y 11

1
Creación de cuenta en w3school
Ingresar a la dirección https://www.w3schools.com/

dar clic en log in

2
Creación de cuenta en w3school
En la siguiente página dar clic en sign up

e ir a la siguiente página de registro

3
Creación de cuenta en w3school
En esta interfaz crear una cuenta de
w3school usando su cuenta de
correo institucional

Dar clic en el botón verde de

continuar

4
Creación de cuenta en w3school
En esta interfaz crear una cuenta de
w3school usando su cuenta de
correo institucional

Dar cli en el botón verde de sign up

for free

5
Creación de cuenta en w3school
Vaya a su correo electrónico y
verifique el enlace que le llega al
correo institucional.

Dar clic en el botón verde de “i have

clicked the link”

6
Creación de cuenta en w3school
Al ingresar a su correo
institucional debe aparecer un
mensaje de w3school.

Dar clic en el botón Verify email

7
Creación de cuenta en w3school
Le aparece un mensaje de que ya
puede ingresar a su espacio de
creación de paginas en w3school

8
Ir a página principal de w3school
Dar clic en la letra w3 que muestra la
flecha amarilla, para ir a la página
principal.

9
Cambiar idioma e ingresar al enlace website de w3school
Seleccionar el idioma español en el símbolo que indica la flecha amarilla de la
imagen y posteriormente dar clic en español, como se muestra en la imagen

En el menú que aparece como lo muestra la siguiente figura dar clic en Website
que se encuentra en la parte superior derecha como lo muestra la imagen.

10
Crear una página web en w3school
Dar clic en el botón verde de Get
started for free.

11
Crear una página web en w3school
En la siguiente página dar clic en la
opción de la derecha como se
muestra en la imágen.

Después dar clic en el botón verde

“continué”

12
Crear una página web en w3school
En la siguiente página escribir el nombre de su página web con su primer
nombre y primer apellido, en este caso la dirección de la página quedaría
felipecruz.w3spaces.com .

Después dar clic en el botón verde “continué”

13
Crear una página web en w3school
En la siguiente página dar clic en la
opción de la derecha como se
muestra en la imágen.

Después dar clic en el botón verde

“continué”

14
Crear una página web en w3school
En la siguiente página dar clic en el enlace de la izquierda en este caso es la
dirección de la página creada, como se muestra en la imágen con la flecha
amarilla.

Después dar clic en el botón verde “continué”

15
Crear una página web en w3school
El resultado es una página simple como se muestra en la siguiente imágen:

dar clic en la página anterior para volver

16
Gestionar su página web en w3school
En la página que aparece dar clic en los tres puntos como lo muestra la fecha
amarilla

17
Crear una página web en w3school

dar clic en show files

(mostrar archivos).

En la siguiente
página nos
aparecerá 4 tipos de
archivos por ahora
seleccionamos
index.html

18
Crear una página web en w3school

Seleccionar el texto
que aparece allí y
reemplazarlo con el
código de html para
crear su página web,
y dar clic en el botón
ejecutar (run), de la
parte superior
derecha

19
Crear una página web en w3school

El código que usted va a usar para crear esta

página web lo puede encontrar en classroom
en el documento de la dirección:

https://docs.google.com/document/d/1Qo3rwF
MO8ddbppoyRaFZCJplqv3AjU3q23_FJTyEvY
g/edit?usp=sharing

El codigo de acceso a la clase de classroom

es

20
Gestionar su página web en w3school
El resultado de copiar y pegar el código html, aparecerá en la parte derecha

21
Publicar su página web en w3school en internet
Para ver el resultado de la página web en internet dar clic en el icono que aparece
a la derecha en la parte superior sobre el resultado de la ejecución del código en
html, donde lo indica la flecha roja

22
Publicar su página web en w3school en internet
Finalmente usted verá el resultado de su página web publicada

Copiar la dirección que se indica con la flecha roja y enviar por correo o whatsapp

23
Crear enlace a otra página web en w3school en internet
Ahora vamos a crear una nueva página web, volviendo a la opción de spaces,
luego clic en los 3 puntos, luego en mostrar archivos (show files) y luego dar clic
como lo muestra la flecha roja en “New file”

24
Crear enlace a otra página web en w3school en internet
En la ventana nueva que aparece, seleccionamos la opción de .html y después en
donde indica la flecha roja escribir gradoapellidonombrenombrearchivo ejemplo
11bMacaMariaEstilosdeaprendizaje y luego dar en create file

25
Crear enlace a otra página web en w3school en internet
Darle clic en frente del archivo creado en el ícono que muestra la flecha roja para
copiar la dirección absoluta, en internet, del archivo que acabamos de crear

26
Copiar el código de la página index.html en la página web
creada
Vamos a copiar el código de la página index.html en la nueva página creada en este caso
la página (en este caso) 11bmacamariaestilosdeaprendizaje.html

27
Modificación de código en nueva página web en w3school
Ahora vamos a modificar el código de la tabla dentro del archivo de estilos de aprendizaje,
(no en la página principal), para crear la tabla para crear la tabla de estilos de aprendizaje,
para lo cual usted ya ha estudiado cómo crear tablas en html al copiar las guías anteriores
en su cuaderno:
buscar la línea:
<table border="1" colorborder="yellow" style="color:red;">

y debe crear una tabla en html como lo aprendió en las guias anteriores así:
Estilo 1 Estilo 2 Estilo 3 Estilo 4

visual secuencial verbal otro

28
Modificación de código en nueva página web en w3school

Modificamos los códigos en la línea 97 y borramos los encabezados innecesarios

Estilo 1 Estilo 2 Estilo 3 Estilo 4

visual secuencial verbal otro 29

Crear enlace a otra página web en w3school en internet
posteriormente damos clic en index.html para modificar enlaces a otras páginas

30
Crear enlace a otra página web en w3school en internet
Buscamos en el código la etiqueta <nav> y dentro de esta etiqueta buscamos la etiqueta que
sirve para enlazar con otras páginas la cual tiene la siguiente estructura:
<a href=”direccion en internet (absoluta) o local ”>Nombre del enlace</a>
<nav>
<ul>
<li><a href="#">Resultados de Mis intereses profesionales </a></li>
<li><a href="./Mipersonalidad.html" >Resultados de Mis personalidad </a></li>
<li><a href="./10_Avila_Mariangel_estilos_de_aprendizaje.html" >Resultados de Mis estilos de
aprendizaje</a></li>
<li><a href="#">Resultados de Mis inteligencias múltiples </a></li>
<li><a href="#">Resultados de Mis aptitudes (CHASIDE) </a></li>
<li><a href="#">Mis hobbies, que me gusta hacer en la vida </a></li>
<li><a href="#">Mis Arbol del proyecto de vida </a></li>
<li><a href="#">1La profesión que quiero tener </a></li>
</ul>
</nav>

31
Crear enlace a otra página web en w3school en internet
Buscamos en el código la etiqueta <nav> y dentro de esta etiqueta buscamos la etiqueta
que sirve para enlazar con otras páginas la cual tiene la siguiente estructura:
<a href=”direccion en internet (absoluta) o local ”>Nombre del enlace</a>
en este caso buscamos el nombre del enlace que tiene estilos de aprendizaje
<li><a href="#">Resultados de Mis estilos de aprendizaje</a></li>
y allí reemplazamos la letra # por la dirección que copiamos en la diapositiva anterior a la
anterior:
https://felipecruz2.w3spaces.com/11bmacamariaestilosdeaprendizaje.html aEsta es una
dirección absoluta, pero vamos a dejar una dirección relativa es decir borramos
https://felipecruz2.w3spaces.com y dejamos: 11bmacamariaestilosdeaprendizaje.html

32
Crear enlace a otra página web en w3school en internet
La nueva dirección para crear el enlace quedaría así:

<li><a href="./11bmacamariaestilosdeaprendizaje.html">Resultados de Mis estilos

de aprendizaje</a></li>

Y ahora le damos clic en el botón de guardar (save)

33
Crear enlace a otra página web en w3school en internet
Una vez actualizada la dirección corta o relativa del archivo nuevo que se creó en la
página, se
procede a dar
guardar (save),
ejecutar y
luego en
publicar

34
Crear enlace a otra página web en w3school en internet
Al darle clic en el ícono y publicar con el resultado es el cambio en la tabla
que se despliega

35
Comprobar enlace a otra página desde la página principal
Regresamos a la página donde se encuentran todos los archivos y allí damos clic al
archivo principal index.html y después estando dentro le damos publicar dando clic en el
icono

Regresamos a la página donde se encuentran

todos los archivos y allí damos clic al archivo
principal index.html y después estando dentro le
damos publicar dando clic en el icono

36
Comprobar enlace a otra página desde la página principal
Regresamos a la página donde se encuentran todos los archivos y allí damos clic al
archivo principal index.html y después estando dentro le damos publicar dando clic en el
icono posteriormente damos clic en el enlace de estilos de aprendizaje

37
Comprobar enlace a otra página desde la página principal
La página resultante tendrá los valores nuevos de estilos de aprendizaje que fue editada.

38
Continuidad en actualización de enlaces
El procedimiento desde la página 24 hasta la página 38 se debe realizar con todos los
demás enlaces para que cada link dirija hacia una página diferente.

39
Envío de resultados
Los enlaces de su página web principalmente el de la página de index.html o su página
principal donde contiene el vínculo a sus demás páginas debe enviarse por whatsapp al
3174536308 o al correo felipe.cruz@iecesarnegretvelasco.edu.co…

Muchas gracias por su atención y cualquier consulta puede realizarse por whatsapp o
puede mejorar su página ingresando a:

https://www.w3schools.com/html/default.asp

40