Repsao HTML hasta mitad de unidad

https://code.visualstudio.com/download

Páginas locales y otros recursos • Cada página local que crees deberá ser guardada en la carpeta del proyecto Web • Si se tratas de imágenes que has descargado de la web o que provienen de tu computadora, guárdalas en una sub carpeta con un nombre que haga index.html

musica.html

style.css

gastronomia.html

destinos.html

referencia. Ej. images • No utilices mayúsculas ni acentos en los nombres de las páginas o sub carpetas.

• Siempre debes guardar esos documentos con la extensión correspondiente. Ej.

.html, .css

Abre Visual Studio Code • Escoge si deseas fondo blanco o negro (Primera vez) • Selecciona lenguaje HTML

Gracias a Emmet puedes crear un esqueleto de programa con

! Tab

Emmet shortcuts [Tab]

[Tab]

Emmet Documentation https://docs.emmet.io/cheat-sheet/

Navegación entre páginas mediante anclas (Anchors) <a href =“ ”></a> • Html funciona utilizando etiquetas • Los anchors son hipervínculos que te llevan a otro lugar, sea externo o una página local.

• Debes colocar el sistema de navegación en todas las páginas para que la navegación no se rompa.

• Se recomienda crear una división <nav></nav> para que se vea claro el propósito de esta división.

Menú - Sistema de navegación entre páginas locales Ej. 4 páginas locales y una hoja de estilos

gastronomia.html

musica.html

destinos.html

index.html

style.css

Estilo Menú y Flexbox • Los <ol></ol> son listas tipo bullet que normalmente se muestran en bloque hacia abajo.

• Para que luzca como un menú debes cambiar algunas propiedades en la hoja de estilos.

• Flexbox te puede sugerir varios formatos.

• Si usas una división <nav></nav> podrás especificar los estilos que quieras utilizar solo en esa división. Mira el ejemplo en la próxima página.

Ajustes de colores en enlaces a: {color: blue;} /*ajusta el color de enlace sin visitar azul*/ a: visited{color:blue;} /* se quedaría azul aunque haya sido visitado. */ a:hover {color: pink;} /* mientras pasas el mouse por encima, cambia de color. */

a:active{color:yellow;} /* Si está activo está amarillo. */

Recuerda que el Menú debe copiarse a TODAS las páginas locales

Recuerda que en todas las páginas debe aparecer el enlace a la hoja de estilos style.css

YouTube video

Panoramic View

https://www.airpano.com/360photo_list.php

Imágenes en la Web