Aprendiendo a Hacer Pagina Web

Una Intruduccion a HTML y CSS

Que es HTML?

• HTML significa Hyper-Text Markup Language, o en espanol Lenguage Hiper-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

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

parrafoEl </p> explica a la computadora que aquí se cierre

el parrafo

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>

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>

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>

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.

Listas Organizadas

<h2>Peliculas Favoritas</h2><ol>

<li>American History X</li><li>The Motor Cycle Diaries</li><li>El Laberinto del Fauno</li> <li>Step Brothers</li>

</ol>

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 Political

Solutions</li></ul>

<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.

<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 Cycle Diaries</li><li>El Laberinto del Fauno</li> <li>Step Brothers</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 Political Solutions</li></ul>

</div>

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:

• <img src=“Alex.jpg” />

<div><h1>Alex Morse</h1><img src=“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>

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.

<h1>Ejemplo de un vinculo</h1><a href=“http://www.google.com/”>Haz clic

aquí a acceder a la pagina google</a>

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>