PROYECTO DESARROLLO WEB CON HTML 5 Y CSS

Durante la presente y las próximas sesiones de formación, estaremos desarrollando una

página web básica que contiene todos los elementos importantes que usted debería
aprender sobre esta temática.
Para un correcto desarrollo del proyecto, por favor, siga al pie de la letra estas
especificaciones:

1. Descargue e instale de forma normal el programa Visual Studio Code de

https://code.visualstudio.com/
2. Configure el programa para que quede en español. Para esto oprima al
tiempo las teclas Ctrl, Shift, P. Acto seguido en el campo que le aparecerá en
la parte superior escriba language y elija “Configure display language”,
después de lo cual debe dar clic allí y elegir “Install aditional languages”.
3. Cree una carpeta nueva llamada “proyectoweb” la cual guardará donde usted
desee (puede ser en Mis documentos, o en su memoria o USB u otra
ubicación).
4. Dentro de la carpeta “proyectoweb” cree otra carpeta llamada “imágenes”
5. Dentro de la carpeta proyectoweb cree otra carpeta llamada “css”
6. Abra el programa previamente instalado “Visual Studio Code” y arrastre la
carpeta “proyectoweb” hasta la ventana principal del programa como se hizo
en la clase anterior. Asegúrese que la carpeta sí quedó asociada al
programa.
7. Dentro del programa Visual Studio Code de clic en Nuevo archivo y póngale
el nombre de “index.html”

8. Notará que en la pantalla principal del programa se abrirá una nueva área de
trabajo donde podrá digitar el código HTML.
9. Allí, en la primera línea escriba HTML. Verá que el programa le da unas
sugerencias donde usted debe elegir HTML:5 lo cual le desplegará
automáticamente lo siguiente
10. En medio de la etiqueta <title> escriba mi primer proyecto o un título similar
de su gusto.
11. Digite las siguientes líneas de código debajo de title:

12. Abra el archivo “index.html” que está guardado en la carpeta “proyectoweb”

con un navegador web como Google Chrome o cualquier otro. Compruebe
cómo está quedando la página
13. Para que tenga una idea del objetivo que se persigue con este proyecto
revise el siguiente bosquejo:
14. Acto seguido, debajo del código que ya ha digitado en el Visual Studio code,
escriba las siguientes líneas de código:
15. Ponga por escrito en este punto, la explicación dada por el instructor sobre
las etiquetas padre, hijas, hermanas basadas en la siguiente imagen: