Aprendiendo a Programar

PROGRAMANDO

PRIMERA PARTECAPÍTULO I

¿PORQUÉ APRENDER HTML?Cada página web está escrita en un lenguaje llamado HTML. Imagina que HTML es el esqueleto que le da estructura a c/página web. En este curso usaremos HTML para añadir párrafos, encabezados, imágenes y enlaces a una página web.

En el editor hay una pestaña llamada test.html. Este es el archivo en el cual escribiremos nuestro HTML. ¿Ves el código con los símbolos de <>? ¡Esto es HTML! Al igual que cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicación) especial.

Ejercicio:1.En el archivo test.html.2.Cambia el texto de la línea tres por lo que se desee.3.Las etiquetas <strong></strong> convirtieron nuestro texto en

negrilla.

HTML Y CSS

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Hipertexto quiere decir “texto que contiene enlaces”. Cada vez que se hace clic en una palabra, esta te lleva a una nueva página web, se hace clic en un hipertexto.

Un lenguaje de marcado es un lenguaje de programación usado para que el texto haga más que solamente aparecer en una página; puede convertir el texto en imágenes, enlaces, tablas, listas, y mucho más. El lenguaje de marcado que aprenderemos es HTML.

¿Qué es lo que hace bonita a una página web? Eso es CSS—Cascading Style Sheets (hojas de estilo en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, después, en cursos posteriores, nos ocuparemos del CSS.

Ejercicio:La primera cosa que debemos hacer es configurar el esqueleto de la página.

4.Escribe siempre <!DOCTYPE html> en la primera línea. Esto le dice al navegador cuál es el lenguaje que está leyendo (en este caso, HTML).

1. Escribe siempre <html> en la segunda línea. Esto comienza el documento de HTML.

2. Escribe siempre </html> en la última línea. Esto finaliza el documento de HTML.

3. En medio de la segunda y la última línea (en medio de <html> y </html>) se puede escribir cualquier mensaje que se desee.

NOTA:En HTML importa el orden en el que pongas las cosas. Pero el formato (por ejemplo, los espacios en blanco) no importan desde un punto de vista técnico.Sin embargo, se va a notar un patrón en la forma en que usamos espacios en cada línea del HTML. Esto es para mejorar la legibilidad y ayudarnos a detectar los errores.Se hablará de los espacios, más adelante.

TERMINOLOGÍA BÁSICAPara aprender más HTML, debemos aprender cómo hablar sobre HTML. Ya viste que usamos mucho los símbolos <>. Las cosas dentro de <> se llaman etiquetas. Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y

una de cierre. Un ejemplo de una etiqueta de inicio: <html> Un ejemplo de una etiqueta de cierre: </html>

Imagina que las etiquetas son como paréntesis; cuando abres uno, debes cerrarlo. Las etiquetas también pueden anidarse, así que debes cerrarlas en el orden correcto: la etiqueta abierta más recientemente debe ser la primera que se cierre, como en el ejemplo de abajo:

El último ejercicio nos enseñó cómo configurar el archivo HTML. Todo lo que haremos ahora irá en medio de <html> y</html>.

Ejercicio:1. Colocar una etiqueta <¡DOCTYPE html>

<primera etiqueta> <segunda etiqueta> ¡Algún texto! </segunda

etiqueta> </primera etiqueta>

2. Colocar las etiquetas html de inicio y de cierre.3. Escribir lo que se desee en medio de las etiquetas html.

HAZ LA CABECERATodo dentro de nuestro archivo HTML irá en medio de las etiquetas de inicio <html> y de cierre</html>.El archivo siempre consiste de dos partes: la cabecera y el cuerpo.

En esta sección nos concentraremos en la cabecera: Tiene una etiqueta de inicio y una de cierre. La cabecera incluye información importante, como el título de la

página web. El título son las palabras que vemos en la etiqueta (por ejemplo, el

título de esta página es “INTRODUCCIÓN A HTML”)

Ejercicio:1. Añade una etiqueta de cabecera de inicio <head> y una de cierre

</head>.2. En medio de las etiquetas de cabecera, añade etiquetas de inicio y

de cierre para el título <title> y </title>.3. En medio de las etiquetas de título, escribe el nombre de tu página

Web.

PÁRRAFOS EN EL CUERPOHemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en medio de las etiquetas, el trozo completo de código es llamado “elemento”.

El contenido en el cuerpo es lo que será visible en la página real.

Ejercicio:1. Escribir el nombre de la página en medio de las etiquetas del título

<title> y </title>.2. Colocar las etiquetas de cierre y de inicio del cuerpo (<body> y

</body> debajo de la etiqueta de cierre de cabecera </head>.3. Cada párrafo requiere etiquetas de inicio <p> y de cierre </p>.

Colocamos el contenido en medio de las dos etiquetas.

elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>

4. En medio de las etiquetas de cuerpo <body> y </body>, crea dos párrafos (para esto se requerirán dos pares de etiquetas p).Debajo de la etiqueta de cierre de cabecera, el código debería verse más o menos así:<body>

<p> El contenido del primer párrafo </p><p> El contenido del segundo párrafo </p>

</body>Y por supuesto la última línea siempre debe terminar con </html>

CAPÍTULO II

PÁRRAFOS Y ENCABEZADOSHasta ahora hemos aprendido cuándo y porqué usamos HTML. También hemos aprendido cómo: Configurar un archivo HTML con etiquetas. Ponerle un título a la página web (en la cabecera o <head>). Crear párrafos (en el cuerpo o <body>).El siguiente paso es colocarle encabezados a nuestros párrafos, usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta <h1>, que marca una cosa como la más importante. Ejercicio:1. Pregúntate a ti mismo. ¿Cuál es el título de la página?2. Crear un encabezado en la sección del cuerpo. Para hacerlo, hay

que crear una etiqueta <h1>.3. Poner un encabezado al contenido.

4. Cerrar el elemento con una etiqueta de cierre </h1>. (El encabezado debe estar en medio de <h1> y </h1>)

5. Debajo del encabezado, crear dos párrafos con el contenido que se desee.

¡Más sobre los encabezados!En realidad, HTML nos permite tener más de un tamaño de encabezado. Hay seis tamaños de encabezado: ¡<h1> es el jefe de todos y <h6> es un enclenque! <h1> - El Presidente Ejecutivo <h2> - El Vicepresidente Elegante <h3> - El director de algo <h4> - El de gerencia intermedia <h5> - El humilde asistente <h6> - El que les lleva café a los demásA continuación te pediremos que añadas encabezados de varios tamaños. ¡Puedes escribir lo que quieras como encabezados!INSTRUCTIONS1. Actualmente tu código tiene un encabezado <h1> y dos párrafos.2. Añade un encabezado <h3> antes del segundo párrafo.3. Añade un encabezado <h5> después del segundo párrafo, y luego

añade un tercer párrafo después de este encabezado.

Usando todos los encabezados¡Buen trabajo! Hasta ahora hemos usado encabezados de tres tamaños diferentes. Dado que en total son seis tamaños de encabezados, deberíamos usarlos todos. (Incluso <h6>, nuestro humilde practicante encabezado que lleva café, necesita sentirse útil.)INSTRUCTIONS1. Añade tres encabezados más al código, haciendo uso de ,y`.

¡Asegúrate de cerrar todas tus etiquetas!2. Añade un párrafo corto debajo de cada encabezado. ¡No olvides

que los párrafos necesitan etiquetas de inicio y de cierre <p></p>!

CAPITULO 3Repaso de mitad de lección¡Has hecho un trabajo fantástico! Aquí hay un resumen rápido de las cosas que hemos aprendido:

1. HTML se usa para dale estructura a los sitios web.2. Abrimos los archivos HTML usando un navegador, y el

navegador traduce el archivo (nos lo muestra).3. Los archivos HTML tienen una cabecera y un cuerpo (¡así como tú

tienes una cabeza y un cuerpo!)4. En la cabecera encontramos las etiquetas<title>, y las usamos para

especificar el nombre de la página web.5. Cómo hacer encabezados y párrafos.INSTRUCTIONS1. Añade un título en medio de las etiquetas de título.2. Crea un encabezado de tamaño <h3>en el cuerpo. ¡Haz que tu

encabezado diga lo que quieras! (Pero no te olvides de cerrarlo.)3. Crea tres párrafos y llénalos con contenido (p.ej, sobre carros, tu

mascota, tu ciudad favorita para ir de viaje—¡lo que quieras!)

Añadiendo imágenesPuedes añadir imágenes a tus sitios web para hacer que se vean ultra fantásticos. Solamente necesitas una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente a las demás. En vez de colocar el contenido en medio de las etiquetas, le dices a la etiquetas dónde está la imagen, usando src.

Mira bien la etiqueta a la derecha—¡le añade a la página una imagen de un pato de goma! (Puedes verlo haciendo clic en la pestaña Resultados)¿Ves la dirección web (o URL, porlocalizador de recursos uniforme) después de src=? Es "http://bit.ly/PK1euu". ¡Le dice a la etiqueta <img> de dónde obtener la imagen!INSTRUCTIONSAñade una segunda imagen debajo de la primera. (¡Asegúrate de que sea antes de la etiqueta de cierre de cuerpo!) Puedes escoger la imagen que quieras. Solamente busca una imagen en línea, y luego coloca la URL de esa imagen después de src=(asegúrate de ponerla entre comillas, como se muestra).

Haz clic en esa imagen¡Bien hecho! Ahora ya sabes cómo añadir imágenes a tu sitio web. Pero, ¿qué tal si quisieras darle clic a esa imagen para que te llevara a algún otro sitio?La etiqueta <a></a> es la que se usa para crear hipervínculos (o simplementeenlaces) en las páginas web. ¡Éstas son las palabras o imágenes en las que haces clic que te lleven a una nueva página!Al igual que con <img>, <a> tiene unatributo que indica el enlace a donde vamos. En lugar de src, <a> usa href, de esta manera:<a href="http://www.codecademy.com">¡Aprende a programar!</a>src significa "source" (fuente). ¡Le dice al enlace <img> de dónde proviene la imagen!href significa "hypertext reference" (referencia de hipertexto). ¿Recuerdas cuando dijimos que el hipertexto (es decir, los enlaces) es texto sobre el cual puedes hacer clic? ¡Pues href le dice a ese enlace a dónde ir! El texto después dehref es la dirección web, y el texto en medio de <a> y </a> es el texto sobre el que haces clic.INSTRUCTIONS

Aquí está cómo convertir una imagen en un enlace: coloca una etiqueta <a href=""> antes de tus etiquetas<img> y una etiqueta </a> después de ellas. ¡En medio de las comillas después de href=, escribe la dirección de tu sitio web favorito!HintAsegúrate de escribir una dirección completa, como"http://www.google.com". ¡Ah, si: ¡asegúrate de poner la dirección entre comillas!

Imágenes y enlaces¡Bien hecho! Cerciórate de que entiendes las imágenes y los enlaces antes de continuar con el repaso.INSTRUCTIONS

1. Añade dos imágenes en medio de las etiquetas de cuerpo. Una debe ser un enlace; la otra no. El enlace puede conducir a cualquier sitio que quieras.

2. Después de las dos imágenes, crea un enlace que simplemente sea una línea de texto. Puede conducir a cualquier sitio que quieras.Si necesitas ayuda verifica la Sugerencia.HintLas imágenes funcionan de esta manera:<img src="URL del sitio web"></img>Los enlaces funcionan así:<a href="URL del sitio web"></a>Puedes poner un enlace alrededor de una imagen:

II PARTECAPÍTULO 1:

Qué es lo que harásAntes de pedirte que escribas un montón de código, creemos que es de ayuda que veas exactamente lo que vas a hacer en este proyecto.Revisa el archivo index.html y la pestaña Resultados para ver un ejemplo —hemos hecho nuestra propia página web.Instructions¡Presiona Ejecutar para comenzar a crear la tuya!

Cada casa necesita una estructuraUna página HTML es como una casa: necesita cierta cantidad de estructuras esenciales para poder funcionar. Y al igual que una casa, una página HTML necesita una estructura. En este caso, la estructura está hecha de las etiquetas !DOCTYPE, html, head, ybody.

Instructions¡Tu página web es como un lienzo en blanco! Vamos a añadir cinco cosas:

1. La etiqueta !DOCTYPE2. Tus etiquetas html3. Tus etiquetas head4. etiquetas title (¡con el título que quieras!) en medio de tus etiquetas

de cabecera5. Tus etiquetas body

?Hint

Puedes revisar los conceptos básicos de HTML (enlace TK) en caso de que te encuentres atascado.

Es mejor con un encabezadoRecuerda: ¡si rima, debe ser cierto!A tu página web le vendría bien un encabezado h1 en medio de las etiquetas de cuerpo, de modo que todos sepan que la página es acerca de ti.

InstructionsCrea 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!

Cuéntanos sobre tiTu página está saliendo muy bien, pero aún no nos dice mucho. Podrías escribir un párrafo o dos, en donde les digas a tus lectores cuáles son tus intereses, en qué trabajas, lo mucho que te gusta aprender HTML, y muchas otras cosas.

InstructionsInserta tres etiquetas p después de tu etiqueta h1 (¡pero antes de tu etiqueta de cierre body!). Escribe un poco sobre ti en cada uno de los tres párrafos. ¡Puedes decir lo que quieras! Es tu página web.

?Hint

¡Que sea apropiado! Ya sabes que los niños andan en Internet.

Una imagen vale más que mil palabras

¡Buen trabajo! Aunque tu página aún se ve un poco simple. Mejor añádele una o dos imágenes para arreglarla un poco.

InstructionsInserta una etiqueta img en medio de tus etiquetas body. ¡Puedes ponerla donde quieras! (Creemos que se vería mejor después de tu etiqueta h1, pero antes de tus etiquetas p.) Puedes hacer que el atributo src apunte a la imagen que quieras.

?Hint

¿Recuerdas cómo funciona la etiqueta img? Si no, aquí tienes un recordatorio:<img src="URL del sitio web"></img>

¡Enlázame!¡Grandioso! Solo hay un problema: tu página web es como una casa sin puertas. ¡No hay modo de entrar o salir! Vamos a arreglarla añadiendo un par de enlaces.Una vez que añadas tus enlaces y presiones Ejecutar, ¡habrás finalizado! Deléitate con tu página web recién creada.Si aún te parece que se ve un poco básica, no te preocupes. ¡Pronto te enseñaremos CSS para que hagas que tus páginas web se vean bien!

InstructionsAñade al menos dos enlaces a tu página 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!Revisa la Sugerencia si olvidaste cómo funciona una etiqueta a.

?Hint

¿Recuerdas cómo hacer enlaces? Si no, aquí está:<a href="URL del sitio web">¡Texto o imagen!</a>

Aprendiendo a Programar

Documents

Transcript of Aprendiendo a Programar