guÍa de trabajo para clase a continuación, haremos el paso … · a continuación, haremos el...

Universidad Pedagógica y Tecnológica de Colombia

Facultad de ciencias de la educación

Licenciatura en informática y tecnología

Colegio de Boyacá Sistema de gestión de la calidad

Guía de trabajo.

GUÍA DE TRABAJO PARA CLASE

A continuación, haremos el paso a paso para crear una página web

con código html y css, básica.

1. Estatura de una Página Web en HTML.

✓ Lo primero que hay que hacer es crear una carpeta con el nombre de

"semana5" en el escritorio o en la carpeta de documentos.

✓ Luego abrimos el editor de código Sublime text, y quitamos los comandos

en el teclado: "Control+n", y despues "Control+S" y guardamos con

nombre “Index.html” en la carpeta semana5 que creamos en el

escritorio:





Guía de trabajo.

✓ Posteriormente, como ya hemos visto en clases, visitamos la estructura

básica de una página web en HTML como se muestra en la imagen:





Guía de trabajo.

✓ Ahora digitamos el comando “Control +s" para guardar cambios, y vamos

a la carpeta semana 5 y abrimos el archivo HTML y con google chrome.

✓ Y nos tiene que aparecer por el momento la página web en blanco.





Guía de trabajo.

✓ Ahora, volvemos al programa sublime y editamos el siguiente código

dentro de la etiqueta “body”: (Recuerden que para sacar el texto

automáticamente sólo hay que escribir las palabras "lorem” después de

la letra P de la etiqueta, ósea: <p lorem>).





Guía de trabajo.

✓ Descargamos el logo del colegio en formato png lo guardamos en la

carpeta semana5.

✓ Luego, volvemos a la página presionamos la tecla f5 para refrescar la

página y tiene que quedar de la siguiente manera:





Guía de trabajo.

2. Página de estilo CSS externa (5 puntos).

✓ Ahora, la siguiente línea de código después de la etiqueta título.

<link rel="stylesheet" type="text/css" href="estilo.css"> y luego

guardamos los cambios con el comando “control+S”.

t

✓ Posteriormente, tecleamos el comando "Control+N" para abrir un nuevo

documento, y luego "Control+S" para guardarlo en la carpeta semana5

y escribimos estilos.css y clic en guardar.





Guía de trabajo.

t

✓ Y luego, insertamos el siguiente código de propiedades CSS en el

documento que acabamos de crear. ( A medida que vayamos ingresando

código tecleamos "Control+S" para guardar cambios y vamos pre

visualizando la página para ver los cambios de estilos que se van

generando)





Guía de trabajo.

✓ Guardamos cambios y vamos a navegador y refrescamos la página y

tiene que verse de la siguiente manera:





Guía de trabajo.

3. Etiqueta “ul” para insertar un menú (5 puntos).

✓ Ahora, vamos al documento Index.html y digitamos el siguiente código

dentro de las dos líneas de comentario que se llaman menú y fin de

menú, guardamos cambios Control+S y luego vamos al navegador y

refrescamos.

t





Guía de trabajo.

✓ Luego vamos a la página de estilos e insertamos el siguiente código,

guardamos cambios vamos a la página y refrescamos.

Y la página tendrá que verse así:

RETO (otros 10 PUNTOS)





Guía de trabajo.

Tiene que haber:

✓ Una segunda imagen después del título que se llama “contenido”.

✓ Dos botones más del menú vertical que se llamen título 4 y título 5.

✓ El título uno tiene que regresar a la página del colegio, y el titulo 2 tiene

que redireccionar blog de la profesora Rosa.

Segunda parte del Taller

✓ Para empezar con la segunda parte del taller, lo que hay que hacer es

insertar la línea de código con la etiqueta <a> para que redireccione a un

nuevo documento html que vamos a crear más adelante con el nombre

de indexPágina2.html, esta etiqueta <a>la vamos a ubicar en el título

3 de la etiqueta nav, cómo lo muestra la imagen:

✓ Luego, creamos un nuevo documento en sublime con el comando

control+n, y lo guardamos con el comando control+s con el nombre de

indexPágina2.html dentro de la misma carpeta semana 5 en dónde se

encuentra el documento index.html.





Guía de trabajo.

✓ Luego, en ese nuevo archivo insertamos nuevamente la estructura básica

de una página web html.





Guía de trabajo.

✓ Posteriormente, dentro de la etiqueta body creamos 3 div, el primero va

a tener un "id" con el nombre documento, el segundo div va a tener un

"id" con el nombre video1 y el tercer div va a tener un "id" con el

nombre efectoImagen: Como lo muestra la siguiente imagen:

✓ Luego, vamos a ingresar las siguientes líneas de código dentro de cada

div para poder insertar un documento PDF, un video y poner un efecto

sobre una imagen. (el documento, el video y la imagen están en la

carpeta compartida desde el blog de la profe, los descargan dentro de la

carpeta semana5)





Guía de trabajo.

✓ Guardamos cambios y previsualizamos la página dando clic en el título 3

para ver cómo está quedando.

✓ Ahora insertamos la siguiente línea de código después de la etiqueta title





Guía de trabajo.

Ahora, abrimos un nuevo documento en sublime y lo guardamos con el

nombre de estiloPágina2.css,





Guía de trabajo.

Luego,Editamos el siguiente código dentro de ese nuevo documento, a

medida que vayamos digitando códigos vamos guardando cambios y

previsualizando de la página.





Guía de trabajo.

Previsualizamos cambios en la página y tienen que verse así:





Guía de trabajo.

Ahora, seguimos digitamos el siguiente código a continuación del anterior

en mismo documento

Y por último previsualizamos la página y tiene que verse así (con un Zoom

de 67%), y seguimos instrucciones del docente.





Guía de trabajo.

guÍa de trabajo para clase a continuación, haremos el paso … · a continuación, haremos el...

Documents