Centro de Gestión y Mercados y Logísticas Tecnológicas de
la Información - SENA
Introducción a JavaScript
JavaScript
Autor
Angel David Cruz Pardo
Tutor
Eduardo Alexander Foglia Morales
Técnico en Programación de Software
Ficha:2617818
Bogotá – 2023
1. Ir al menú de Inicio y dar clic en Xampp Panel Control. 2. Activar el botón start de los módulos Apache
y MySQL. Deben quedar en color verde. Luego Cerrar Xampp. 3. Ir a la unidad C:/ y abrir la carpeta de
xampp y dentro de ella abrir la subcarpeta htdocs 4. Dentro de htdocs crear una carpeta con el nombre
crud_JS 5. Abrir la carpeta del proyecto crud_JS en Visual estudio Code y crear tres archivos llamados:
index.html, estilos.css y app.js. Tal como se ven en la imagen.
6. Seleccionar el archivo index.html para iniciar el proyecto. 7. Digitar html y seleccionar la opción html:
5 para crear automáticamente la estructura del documento.8. La estructura debe quedar como el
ejemplo de la siguiente imagen:
9. Cambiar el lenguaje del documento por español
10. Cambiar el título del documento por CRUD-CSS-JS 11. Debajo de la línea del título del documento
agregue el link para enlazar el archivo de estilos.css que se creó anteriormente
12. Dentro del <body crear un contenedor <div>con una clase para el título y poder agregarle
estilos de la siguiente manera:
13. Agregar otro contenedor general para manipular la mayor parte de la información de nuestro
proyecto.
14. Vamos a agregar un nuevo contenedor “div-formulario” dentro del “contenedor” de la siguiente
manera:
15. Crear un formulario dentro del <div> contenedor de la siguiente forma:
16. Agregar un contenedor <div> para listar los elementos y dentro vamos a agregar otro
contenedor vacío donde se agregarán los elementos por medio del script más adelante
17. Por ultimo agregamos el enlace del script que usaremos para ingresar la información a nuestro
formulario
18. Verificamos en funcionamiento de este archivo index.html de la siguiente manera: Guardar cambios,
clic derecho sobre el código y seleccionar la opción:19 Este debe ser el resultado parcial del archivo
index.html
20. Abrir el archivo de estilos.css para iniciar la asignación de estilos a los elementos del CRUD. 21.
Agregar los estilos generales para el CRUD de la siguiente manera:
22. Agregar estilos posición para el título y cajas de texto del formulario:
23. . Estilos para el marco del contendor y el título del formulario:
24. Guarde cambios y verifique en el navegador los resultados. 25. Estilos para el posicionamiento de las
cajas de texto y botones dentro del formulario:
26. Guarde cambios y verifique en el navegador los resultados. 27. No olvide ir guardando las diferentes
capturas de pantalla he irlas agregando en un documento Word para ser entregadas como
documentación final de su práctica.
28. Estilos para el posicionamiento del marco para la lista de empleados y el tratamiento para el título
del mismo:
29. Estilos para hr y botones que se verán más adelante cuando se ingrese la información al formulario.
Cambio de colores a los contenedores
