Codificando con HTML & Visual Studio Code

1. INSTALACIÓN DE VISUAL STUDIO CODE

2. PRIMER EJERCICIO: INICIANDO CON HTML & VISUAL STUDIO CODE

3. SEGUNDO EJERCICIO: ÁRBOL FAMILIAR

4. COMPRIMIR CARPETA PARA ENTREGAR POR TEAMS

5. TERCER EJERCICIO: MIS MASCOTAS

6. RUTAS

Consuma este recurso interactivo a conciencia tantas veces como sea necesario; póngalo en práctica en el tutorial del numeral 7; comprenda que la definición exacta de las rutas es esencial para que la navegación de un sitio web no se rompa, se muestre contenido externo como imágenes y videos, entre otros.

7. CUARTO EJERCICIO: RUTAS DE ARCHIVO

8. QUINTO EJERCICIO: SÍMBOLOS PATRIOS

Haga clic aquí para descargar la carpeta comprimida.

Descomprima la carpeta en el Escritorio.
Abra la carpeta en Visual Studio Code.
Complete el ejercicio según las indicaciones dadas en clase.

9. SEXTO EJERCICIO: LISTAS

Descargue la carpeta comprimida.

Este Paso a Paso le ayudará a resolver dudas, a mejorar su codificación. Tan solo invierta un poco de tiempo y se sorprenderá usted de lo que es capaz de hacer. ¡Ánimo!

1. Consuma el recurso sobre Listas.

2. Descargue el archivo con la carpeta comprimida.

3. No es necesario iniciar sesión o registrarse.

4. Descomprima.

Usted debe diferenciar entre el ícono del archivo con la carpeta comprimida (abajo) y el ícono de la carpeta normal (arriba).

Si su PC tiene un compresor como Winrar, Winzip o lo que sea, la carpeta comprimida (archivo con la cremallera) lucirá diferente, posiblemente algo así:

5. Corte y pegue la carpeta en el Escritorio.

6. Cambie el nombre de la carpeta.

7. Abra Visual Studio Code.

8. Abra la carpeta del proyecto.

9. Confíe en el autor, usted mismo.

10. Revise la carpeta del proyecto.

Preste especial atención a la estructura del proyecto: las carpetas que contiene y los tipos de archivos que hay en cada una. Ubique los archivos index.html y favicon.png, que siempre deben estar en la raíz del proyecto. Hágase a la idea de que hay bastante por desarrollar, pero no se desanime. ¡Pronto usted volará codificando!

11. Ejecute Live Server.

12. Recuerde que puede abrir cualquier documento html en el entorno del servidor a través de su menú contextual.

Siempre revise que la barra de dirección del navegador muestra IP y puerto.

Nunca abra los archivos html desde el Explorador de Windows.

13. Primer paso: el principio, los nombres y lo que se espera del ejercicio.

Explore en busca de hipervínculos. Note que la imagen de la izquierda (colores) es un hipervínculo. haga clic a ver a dónde lo lleva.

Los nombres, lo primero. Observe la estructura, lea muy bien las indicaciones y hágase la idea de lo que falta para completar esta página y el proyecto.

En esta página las instrucciones son tres:

Emplee la imagen ubicada en la carpeta con un ancho de 400 (elemento img).
Haga una lista no numerada de 7 colores (elementos ul y li).
Codifique la navegación hacia index y las demás páginas a través de las imágenes. Esto significa que arriba deben estar las tres "miniaturas" de las otras listas (frutas, deportes y mascotas) y deben usarse como hipervínculo a sus respectivas páginas. Para ello debe emplear el elemento a y el elemento img.

El aspecto de la página colores.html debe ser así:

14. La página de frutas queda así:

15. La página Mascotas queda así:

Ya tiene claro el desarrollo, verdad?

Bueno, inicie con index.html

¡Insista, persista y no desista que al final conquista!

10. SEPTIMO EJERCICIO: FIXME

Descargue la carpeta comprimida.

Tenga en cuenta las siguientes capturas de pantalla:

--------------------------------------------------

11. ¿DUDAS?

12. ANCLAS

Clic para descargar...

13. ELEMENTOS DE SECCIÓN

En el ejercicio anterior vimos cómo el elemento section nos permitió estructurar/dividir/segmentar en tres bloques el contenido de la página con el objetivo de definir enlaces internos o anclas.

Veamos esta infografía que nos presenta algunos elementos de sección.

Elementos de sección en HTML de Carlos Adolfo Reyes Castañeda

En el siguiente ejercicio, usted debe definir las secciones header, main, footer así como las section para poder aplicar las anclas. El resultado debe verse así: