Curso desarollado por el CCI Monte Rey y Caminante

1. Aprendiendo a Hacer Pagina Web Una Intruduccion a HTML y CSS

2. Que es HTML? HTML significa Hyper-TextMarkupLanguage, o en espanolLenguageHiper-Texto. El HTML es lo que se utiliza para poner el contenido a una pagina web. El HTML pasa informacion a la computadora explicando tambien sobre el tipo de contenido. Parrafos Titulos Imágenes Vinculos

3. Sintaxsis de HTML Los componentes de HTML normalmente consiste de un par de caracteres que explica el contenido, pero no aparece en la pagina Ejemplo <p> </p> El <p> explica a la computadora que aquí se abre el parrafo El </p> explica a la computadora que aquí se cierre el parrafo

4. Elementos de Texto - Titulos Los elementos de texto se utliza para dar formato a su contenido <h1> </h1> este elemento significa “Headline” o en espanol titulo. El 1 significa que es el titulo mas importante <h2></h2> tambien significa titulo, pero el 2 muestra que es el segundo mas importante. Otros titulos <h3></h3>,<h4></h4>,<h5></h5/…hasta <h7></h7>

5. Elementos de Texto – Parrafos El par <p></p> significa parrafo. Esto es el componente mas comun. Para escribir un parrafo en HTML <p>Aquí esta el texto de mi primer parrafo.</p> Nota que el contenido siempre va adentro del par. Si empieza el parrafo con <p> y lo cierre con </p>

6. Ejemplo <h1>Alex Morse</h1> <h2>Conozca a Alex</h2> <p>Me llamo Alex Morse. Naci en Seattle, Washington en los estados unidos. Trabajo en la Republica Dominicana como voluntario con la organización CWS.</p> <h2>Educacion</h2> <p>Me gradue del bachillerato en el ano 2004 y termine con la universidad en 2007. Estudie espanol y ciencias politicas. En agosto voy a volver a empezar una maestria en el desarrollo internacional.</p>

8. Listas Hay dos formas de listas Listas Organizadas (ol) Listas no-organizadas (ul) Listas Organizadas Se utiliza cuando quiere dar importancia a la orden, con rangos o pasos por ejemplos. Listas no organizadas Se utiliza cuando es una lista en que no hay importancia en la orden.

9. Listas Organizadas <h2>Peliculas Favoritas</h2> <ol> <li>American History X</li> <li>The Motor CycleDiaries</li> <li>El Laberinto del Fauno</li> <li>StepBrothers</li> </ol>

10. Listas No- Organizadas <h2>Experiencia</h2> <ul> <li>3 anos cocinando</li> <li>Dirige campana del congreso</li> <li>1 ano trabajando como misionero en Boca Chica</li> <li>1 ano trabajando en un centro de llamadas bilingüe</li> <li>Co-fundador de AP PoliticalSolutions</li> </ul>

11. <div></div> El <div></div> Se utiliza para DIVIDIR la pagina en secciones differentes. Como la cabeza, el contenido, y el pie. El <div></div> normalmente tiene otro contenido adentro.

12. <div> <h1>Alex Morse</h1> <h2>Conozca a Alex</h2> <p>Me llamo Alex Morse. Naci en Seattle, Washington en los estados unidos. Trabajo en la Republica Dominicana como voluntario con la organización CWS.</p> <h2>Educacion</h2> <p>Me gradue del bachillerato en el ano 2004 y termine con la universidad en 2007. Estudie espanol y ciencias politicas. En agosto voy a volver a empezar una maestria en el desarrollo internacional.</p> </div> <div> <h2>Peliculas Favoritas</h2> <ol> <li>American History X</li> <li>The Motor CycleDiaries</li> <li>El Laberinto del Fauno</li> <li>StepBrothers</li> </ol> </div> <div> <h2>Experiencia</h2> <ul> <li>3 anos cocinando</li> <li>Dirige campana del congreso</li> <li>1 ano trabajando como misionero en Boca Chica</li> <li>1 ano trabajando en un centro de llamadas bilingüe</li> <li>Co-fundador de AP PoliticalSolutions</li> </ul> </div>

14. Imagenes Las imágenes son un poco diferente que los otros simbolos. Se abre y cierre al mismo tiempo. <img /> Adentro siempre tenemos que poner la direccion de la foto o imagen. Si esta en la misma carpeta aparece asi: <imgsrc=“Alex.jpg” />

15. <div> <h1>Alex Morse</h1> <imgsrc=“Alex.jpg” /> <h2>Conozca a Alex</h2> <p>Me llamo Alex Morse. Naci en Seattle, Washington en los estados unidos. Trabajo en la Republica Dominicana como voluntario con la organización CWS.</p> <h2>Educacion</h2> <p>Me gradue del bachillerato en el ano 2004 y termine con la universidad en 2007. Estudie espanol y ciencias politicas. En agosto voy a volver a empezar una maestria en el desarrollo internacional.</p> </div>

16. Creando Vinculos Aveces necesitamos a conectar a otras paginas para conectar a otros sitios de web o para conectar paginas dentro de nuestro sitio. El simbolo de vinculo es <a></a> Dentro del primer simbolo necesitamos a poner la direccion donde queremos conectar <a href=“http://www.google.com/”></a> Entre los <a>AQUI</a> se pone el texto que quiere aparecer.

17. <h1>Ejemplo de un vinculo</h1> <a href=“http://www.google.com/”>Haz clic aquí a acceder a la pagina google</a>

18. Formato de Una Pagina HTML Cuando creamos una pagina web hay un poco mas información que necesitamos a poner. <html> <head> <title>Titulo</title> </head> <body> El contenido… </body> </html>