Bienvenidos en esta clase vamos a ver los recursos estáticos web para utilizar dentro de nuestra aplicación
en las pistas en el HTML, como por ejemplo incluir imágenes, incluir hojas, estilos JavaScript,
incluso HTML estático.
Todos estos archivos estáticos se guardan dentro de resources en los recursos en la carpeta estática.
Acá vamos a guardar todo lo que son archivos CSS 10 o scrip imágenes, cualquier recurso estático.
Vamos a crear una carpeta dentro static click derecho new folder CSS Finalizar Dentro de esta carpeta
vamos a crear un archivo new otro.
Nos vamos a web y buscamos CSS Effi un archivo de hojas estilo siguiente.
Le vamos a llamar style.
Finalizar bien, vamos a quitar esto que viene por defecto.
Vamos a crear una clase, un estilo aplicado a los títulos, a la H1 y al H2.
Entonces con H1 el nombre del elemento punto para indicar para implementar el nombre de una clase de
un estilo color rojo las llaves.
Acá indicamos el color del texto color 2 punto raed un color por defecto css bien otro más h2 punto
color azul color blood blood también es un color propio de CSS.
Bien, vamos a guardar.
Ahora tenemos que aplicar estos colores en la vista index del controlador index.
Controlás nos vamos a template.
Nos vamos a index.
HTML el que está en la raíz.
Acá tenemos el H1 con el atributo class.
Indicamos el estilo a través del nombre que le dimos color rojo.
También un h2 para el ejemplo
color azul y un texto como por ejemplo decorando con estilo CSS
recursos estáticos.
Bien, pero ahora tenemos que enlazar este documento html, el index.
HTML a este recurso estático, a esta hoja de estilo.
Para eso utilizamos el elemento, la etiqueta link.
Dentro del Geet del HTML Link con atributos, por ejemplo, rel rel es bien importante, ya que indica
la relación entre este HTML, el index con la hoja de estilos que vamos a incluir.
La relación justamente tiene que ir como valor style chit espacio.
El tipo de contenido del tipo texto es larch se es es.
Y luego la ubicación de este recurso estático dentro de proyecto lo tenemos en static, pero esto está
configurado por defecto en Springwood.
Entonces la ruta es a partir de CSS, ya que estatica en la raíz para estos recursos estáticos usándote
h href una ruta.
Por lo tanto, igual que cualquier ruta de nuestro proyecto, como lo vimos con los controladores rutas
a los métodos handler del controlador se escriben con el arroba y las llaves.
Comienza siempre con el art.
La carpeta en este caso CSS y el nombre del archivo hasta el punto C es y guardamos.
Usamos el arroba y las llaves para cualquier ruta, ya sea recursos estáticos o rutas hacia métodos
del controlador mapeados con QUET mapping o con request mapping, tal como lo hemos visto.
Pero acá aplicado a recursos estáticos, también vamos a incluir una imagen y emerge un elemento HTML
para incluir imágenes.
Usamos el atributo C RC Por supuesto, primero con Taime LIF.
También es una ruta, por lo tanto con el arroba, las llaves y la ubicación de esta imagen.
Bien, vamos a crear una carpeta en static con click derecho new folder image o imágenes como le queramos
llamar finalizar y dentro de image.
Vamos a copiar cualquier imagen que tenga jpg o PNG.
En mi caso copié una imagen de Spring punto png.
Acá la tengo.
Entonces la idea es incluir esta imagen debajo del H2, la ruta images y el nombre spring punto png.
El nombre del archivo.
Bien, vamos a guardar y vamos a levantar.
En el navegador nos vamos a localhost 80 80 app de que la raíz del index controles llega, tenemos el
h1 de color rojo, el H2 de color azul y laimagen recursos estáticos, hoja de estilos, imágenes y
también podríamos incluir JavaScript, cosa que vamos a ver después durante el curso.
Por ejemplo, para trabajar con Vickery, con librerías JavaScript, también vamos a trabajar con pústula
para dar estilos a nuestras listas.
También vamos a incluir estos CSS dentro de static, pero por ahora nada más nos vemos.