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