Aprendendiendo HTML

533 visualizaciones

Publicado el

Curso desarollado por el CCI Monte Rey y Caminante

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
533
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Aprendendiendo HTML

  1. 1. Aprendiendo a Hacer Pagina Web<br />Una Intruduccion a HTML y CSS<br />
  2. 2. Que es HTML?<br />HTML significa Hyper-TextMarkupLanguage, o en espanolLenguageHiper-Texto.<br />El HTML es lo que se utiliza para poner el contenido a una pagina web.<br />El HTML pasa informacion a la computadora explicando tambien sobre el tipo de contenido.<br />Parrafos<br />Titulos<br />Imágenes<br />Vinculos<br />
  3. 3. Sintaxsis de HTML<br />Los componentes de HTML normalmente consiste de un par de caracteres que explica el contenido, pero no aparece en la pagina<br />Ejemplo<br /><p> </p><br />El <p> explica a la computadora que aquí se abre el parrafo<br />El </p> explica a la computadora que aquí se cierre el parrafo<br />
  4. 4. Elementos de Texto - Titulos<br />Los elementos de texto se utliza para dar formato a su contenido<br /><h1> </h1> este elemento significa “Headline” o en espanol titulo. El 1 significa que es el titulo mas importante<br /><h2></h2> tambien significa titulo, pero el 2 muestra que es el segundo mas importante.<br />Otros titulos <h3></h3>,<h4></h4>,<h5></h5/…hasta <h7></h7><br />
  5. 5. Elementos de Texto – Parrafos<br />El par <p></p> significa parrafo. Esto es el componente mas comun. <br />Para escribir un parrafo en HTML<br /><p>Aquí esta el texto de mi primer parrafo.</p><br />Nota que el contenido siempre va adentro del par.<br />Si empieza el parrafo con <p> y lo cierre con </p><br />
  6. 6. Ejemplo<br /><h1>Alex Morse</h1><br /><h2>Conozca a Alex</h2><br /><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><br /><h2>Educacion</h2><br /><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><br />
  7. 7.
  8. 8. Listas<br />Hay dos formas de listas<br />Listas Organizadas (ol)<br />Listas no-organizadas (ul)<br />Listas Organizadas<br />Se utiliza cuando quiere dar importancia a la orden, con rangos o pasos por ejemplos.<br />Listas no organizadas<br />Se utiliza cuando es una lista en que no hay importancia en la orden.<br />
  9. 9. Listas Organizadas<br /><h2>Peliculas Favoritas</h2><br /><ol><br /> <li>American History X</li><br /> <li>The Motor CycleDiaries</li><br /> <li>El Laberinto del Fauno</li><br /> <li>StepBrothers</li><br /></ol><br />
  10. 10. Listas No- Organizadas<br /><h2>Experiencia</h2><br /> <ul><br /> <li>3 anos cocinando</li><br /> <li>Dirige campana del congreso</li><br /> <li>1 ano trabajando como misionero en Boca Chica</li><br /> <li>1 ano trabajando en un centro de llamadas bilingüe</li><br /> <li>Co-fundador de AP PoliticalSolutions</li><br /> </ul><br />
  11. 11. <div></div><br />El <div></div> Se utiliza para DIVIDIR la pagina en secciones differentes. Como la cabeza, el contenido, y el pie.<br />El <div></div> normalmente tiene otro contenido adentro.<br />
  12. 12. <div><br /> <h1>Alex Morse</h1><br /> <h2>Conozca a Alex</h2><br /> <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><br /> <h2>Educacion</h2><br /> <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><br /></div><br /><div><br /> <h2>Peliculas Favoritas</h2><br /> <ol><br /> <li>American History X</li><br /> <li>The Motor CycleDiaries</li><br /> <li>El Laberinto del Fauno</li><br /> <li>StepBrothers</li><br /> </ol><br /></div><br /><div><br /> <h2>Experiencia</h2><br /> <ul><br /> <li>3 anos cocinando</li><br /> <li>Dirige campana del congreso</li><br /> <li>1 ano trabajando como misionero en Boca Chica</li><br /> <li>1 ano trabajando en un centro de llamadas bilingüe</li><br /> <li>Co-fundador de AP PoliticalSolutions</li><br /> </ul><br /></div><br />
  13. 13.
  14. 14. Imagenes<br />Las imágenes son un poco diferente que los otros simbolos. Se abre y cierre al mismo tiempo.<br /><img /><br />Adentro siempre tenemos que poner la direccion de la foto o imagen. Si esta en la misma carpeta aparece asi:<br /><imgsrc=“Alex.jpg” /><br />
  15. 15. <div><br /> <h1>Alex Morse</h1><br /><imgsrc=“Alex.jpg” /><br /> <h2>Conozca a Alex</h2><br /> <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><br /> <h2>Educacion</h2><br /> <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><br /></div><br />
  16. 16. Creando Vinculos<br />Aveces necesitamos a conectar a otras paginas para conectar a otros sitios de web o para conectar paginas dentro de nuestro sitio.<br />El simbolo de vinculo es <a></a><br />Dentro del primer simbolo necesitamos a poner la direccion donde queremos conectar<br /><a href=“http://www.google.com/”></a><br />Entre los <a>AQUI</a> se pone el texto que quiere aparecer.<br />
  17. 17. <h1>Ejemplo de un vinculo</h1><br /><a href=“http://www.google.com/”>Haz clic aquí a acceder a la pagina google</a><br />
  18. 18. Formato de Una Pagina HTML<br />Cuando creamos una pagina web hay un poco mas información que necesitamos a poner.<br /><html><br /> <head><br /> <title>Titulo</title><br /> </head><br /> <body><br />El contenido…<br /> </body><br /></html><br />

×