SVG (BOTONES) HTML5:GRAFICOS

 PRACTICA 015: GRAFICOS: SVG HTML BOTONES

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

  

ACTIVIDADES

 1.- Agregar  nueva section en el archivo libros_HRM.html

2.- Agregar botones dentro de la section posición_2_0

3.- Buscar imágenes para los botones “Agregar”, “Imprimir”, “Continuar”, “Cancelar” y descargar en formato SVG:

Sugerencias:

https://material.io/resources/icons/?icon=label_important&style=baseline

https://simpleicons.org/

4.- Copiar el contenido de cada imagen SGV en el archivo libros_HRM.html

4.1 Abrir con un editor de texto la imagen SVG

4.2 Copiar todo el contenido del SVG dentro del botón Agregar

4.3 Cambiar de tamaño el SVG y poner su atributo class="icono_001"

4.4 Agregar a cada botón una  imagen SVG y poner su atributo class

Quedaría asi:

5.- Agregar estilos en el archivo mi_estiloLibros.css

5.1 Alinear la  nueva section con la section de abajo en forma horizontal (líneas sombreadas)

5.2 Agregar color a los iconos y color cuando se posicionan sobre el icono (líneas sombreadas)

5.3 Agregar estilo a los botones (líneas sombreadas)

    Quedaría así:

Al mover el mouse sobre los iconos cambiaran de color

6.- Agregar un nuevo botón en la misma section (lineas sombreadas)

7.- Buscar una nueva imagen SVG  para el botón Buscar

             7.1 Guardar la imagen en la carpeta img

7.2 Editar el archivo SVG para cambiar el tamaño y salvarlo

7.3 Agregar una imagen usando la imagen SVG(línea sombreada)

Quedaría asi: