SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA

Antes de pedirte que escribas un montn de cdigo, creemos que es de ayuda que veas exactamente lo que vas a hacer en este proyecto. Primero crears en el Bloc de notas todos el cdigo HTML necesario para hacer algo como esto:

Una pgina HTML es como una casa: necesita cierta cantidad de estructuras esenciales para poder funcionar. Y al igual que una casa, una pgina HTML necesita una estructura. En este caso, la estructura est hecha de las etiquetas !DOCTYPE, html , head , y body .

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA Tu pgina web es como un lienzo en blanco! Vamos a aadir cinco cosas: 1. La etiqueta !DOCTYPE 2. Tus etiquetas html 3. Tus etiquetas head 4. etiquetas title (con el ttulo que quieras!) en medio de tus etiquetas de cabecera 5. Tus etiquetas body

A tu pgina web le vendra bien un encabezado h1 en medio de las etiquetas de cuerpo, de modo que todos sepan que la pgina es acerca de ti. Crea una etiqueta h1 dentro de tus etiquetas de cuerpo. Escribe tu nombre en medio de tus etiquetas de inicio y de cierre h1 , para que todos lo vean!

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA

Tu pgina est saliendo muy bien, pero an no nos dice mucho. Podras escribir un prrafo o dos, en donde les digas a tus lectores cules son tus intereses, en qu trabajas, lo mucho que te gusta aprender HTML, y muchas otras cosas. Inserta tres etiquetas p despus de tu etiqueta h1 (pero antes de tu etiqueta de cierre body !). Escribe un poco sobre ti en cada uno de los tres prrafos. Puedes decir lo que quieras! Es tu pgina web.

Buen trabajo! Aunque tu pgina an se ve un poco simple. Mejor adele una o dos imgenes para arreglarla un poco.

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA Inserta una etiqueta img en medio de tus etiquetas body . Puedes ponerla donde quieras! (Creemos que se vera mejor despus de tu etiqueta h1 , pero antes de tus etiquetas p .) Puedes hacer que el atributo src apunte a la imagen que quieras.

Grandioso! Solo hay un problema: tu pgina web es como una casa sin puertas. No hay modo de entrar o salir! Vamos a arreglarla aadiendo un par de enlaces. Una vez que aadas tus enlaces y presiones Ejecutar, habrs finalizado! Delitate con tu pgina web recin creada. Si an te parece que se ve un poco bsica, no te preocupes. Pronto te ensearemos CSS para que hagas que tus pginas web se vean bien!

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA Aade al menos dos enlaces a tu pgina web. Puedes convertir una imagen o un trozo de texto en un enlace; incluso puedes convertir parte del texto dentro de tus etiquetas p en un enlace!

Ah! y no lo olvides, guarda tu primer proyecto web. Felicitaciones!

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co