Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Aprendiendo A Programar

    Загружено:

    Cindy Geraldine Cordova Huiman
    81 просмотров21 страница
    Aprendiendo a Programar Es un compendio de multiples clases que enseñan a como programar... de manera autodidacta. Una herramienta importante para estar a la par con el mundo tecnológico de nuestros días. Aprende a programar rápido. Una lección para tus momentos libres...tu mismo colocas tus horarios

    Оригинальное название

    Aprendiendo a Programar

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Aprendiendo a Programar Es un compendio de multiples clases que enseñan a como programar... de manera autodidacta. Una herramienta importante para estar a la par con el mundo tecnológico de nuestros días. Aprende a programar rápido. Una lección para tus momentos libres...tu mismo colocas tus horarios

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    81 просмотров21 страница

    Aprendiendo A Programar

    Загружено:

    Cindy Geraldine Cordova Huiman
    Aprendiendo a Programar Es un compendio de multiples clases que enseñan a como programar... de manera autodidacta. Una herramienta importante para estar a la par con el mundo tecnológico de nuestros días. Aprende a programar rápido. Una lección para tus momentos libres...tu mismo colocas tus horarios

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 21

    PROGRAMANDO

    PRIMERA PARTE
    CAPTULO I





















    PORQU APRENDER HTML?
    Cada pgina web est escrita en un lenguaje llamado HTML. Imagina
    que HTML es el esqueleto que le da estructura a c/pgina web. En este
    curso usaremos HTML para aadir prrafos, encabezados, imgenes y
    enlaces a una pgina web.

    En el editor hay una pestaa llamada test.html. Este es el archivo en el
    cual escribiremos nuestro HTML. Ves el cdigo con los smbolos de
    <>? Esto es HTML! Al igual que cualquier otro lenguaje, tiene su propia
    sintaxis (reglas para la comunicacin) especial.

    Ejercicio:
    1. En el archivo test.html.
    2. Cambia el texto de la lnea 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 pgina
    web, se hace clic en un hipertexto.

    Un lenguaje de marcado es un lenguaje de programacin usado para
    que el texto haga ms que solamente aparecer en una pgina; puede
    convertir el texto en imgenes, enlaces, tablas, listas, y mucho ms. El
    lenguaje de marcado que aprenderemos es HTML.

    Qu es lo que hace bonita a una pgina web?
    Eso es CSSCascading Style Sheets (hojas de estilo en cascada).
    Imagina que es la piel y el maquillaje que cubre los huesos del HTML.
    Primero aprenderemos HTML, despus, en cursos posteriores, nos
    ocuparemos del CSS.

    Ejercicio:
    La primera cosa que debemos hacer es configurar el esqueleto de la
    pgina.
    4. Escribe siempre <!DOCTYPE html> en la primera lnea. Esto le dice al
    navegador cul es el lenguaje que est leyendo (en este caso, HTML).
    1. Escribe siempre <html> en la segunda lnea. Esto comienza el
    documento de HTML.
    2. Escribe siempre </html> en la ltima lnea. Esto finaliza el
    documento de HTML.
    3. En medio de la segunda y la ltima lnea (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 tcnico.
    Sin embargo, se va a notar un patrn en la forma en que usamos
    espacios en cada lnea del HTML. Esto es para mejorar la
    legibilidad y ayudarnos a detectar los errores.
    Se hablar de los espacios, ms adelante.

    TERMINOLOGA BSICA
    Para aprender ms HTML, debemos aprender cmo hablar sobre HTML.
    Ya viste que usamos mucho los smbolos <>.
    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 parntesis; cuando abres uno,
    debes cerrarlo.
    Las etiquetas tambin pueden anidarse, as que debes cerrarlas en el
    orden correcto: la etiqueta abierta ms recientemente debe ser la
    primera que se cierre, como en el ejemplo de abajo:



    El ltimo ejercicio nos ense cmo 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> Algn 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 CABECERA
    Todo 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 seccin nos concentraremos en la cabecera:
    Tiene una etiqueta de inicio y una de cierre.
    La cabecera incluye informacin importante, como el ttulo de la
    pgina web.
    El ttulo son las palabras que vemos en la etiqueta (por ejemplo, el
    ttulo de esta pgina es INTRODUCCIN A HTML)

    Ejercicio:
    1. Aade una etiqueta de cabecera de inicio <head> y una de cierre
    </head>.
    2. En medio de las etiquetas de cabecera, aade etiquetas de inicio y de
    cierre para el ttulo <title> y </title>.
    3. En medio de las etiquetas de ttulo, escribe el nombre de tu pgina
    Web.






    PRRAFOS EN EL CUERPO
    Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando
    colocamos contenido en medio de las etiquetas, el trozo completo de
    cdigo es llamado elemento.



    El contenido en el cuerpo es lo que ser visible en la pgina real.

    Ejercicio:
    1. Escribir el nombre de la pgina en medio de las etiquetas del ttulo
    <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 prrafo requiere etiquetas de inicio <p> y de cierre </p>.
    Colocamos el contenido en medio de las dos etiquetas.
    4. En medio de las etiquetas de cuerpo <body> y </body>, crea dos
    prrafos (para esto se requerirn dos pares de etiquetas p).
    Debajo de la etiqueta de cierre de cabecera, el cdigo debera verse
    ms o menos as:
    <body>
    <p> El contenido del primer prrafo </p>
    <p> El contenido del segundo prrafo </p>
    </body>
    Y por supuesto la ltima lnea siempre debe terminar con </html>
















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










































    CAPTULO II

















    PRRAFOS Y ENCABEZADOS
    Hasta ahora hemos aprendido cundo y porqu usamos HTML. Tambin
    hemos aprendido cmo:
    Configurar un archivo HTML con etiquetas.
    Ponerle un ttulo a la pgina web (en la cabecera o <head>).
    Crear prrafos (en el cuerpo o <body>).
    El siguiente paso es colocarle encabezados a nuestros prrafos, usando
    las etiquetas de encabezado. Vamos a comenzar con la etiqueta <h1>,
    que marca una cosa como la ms importante.

    Ejercicio:
    1. Pregntate a ti mismo. Cul es el ttulo de la pgina?
    2. Crear un encabezado en la seccin 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 prrafos con el contenido que se
    desee.


























    Ms sobre los encabezados!
    En realidad, HTML nos permite tener ms de un tamao de encabezado.
    Hay seis tamaos 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 dems
    A continuacin te pediremos que aadas encabezados de varios
    tamaos. Puedes escribir lo que quieras como encabezados!
    INSTRUCTIONS
    1. Actualmente tu cdigo tiene un encabezado <h1> y dos prrafos.
    2. Aade un encabezado <h3> antes del segundo prrafo.
    3. Aade un encabezado <h5> despus del segundo prrafo, y luego
    aade un tercer prrafo despus de este encabezado.


























    Usando todos los encabezados
    Buen trabajo! Hasta ahora hemos usado encabezados de tres tamaos
    diferentes. Dado que en total son seis tamaos de encabezados,
    deberamos usarlos todos. (Incluso <h6>, nuestro humilde practicante
    encabezado que lleva caf, necesita sentirse til.)
    INSTRUCTIONS
    1. Aade tres encabezados ms al cdigo, haciendo uso de ,y`.
    Asegrate de cerrar todas tus etiquetas!
    2. Aade un prrafo corto debajo de cada encabezado. No olvides que
    los prrafos necesitan etiquetas de inicio y de cierre <p></p>!



















    CAPITULO 3
    Repaso de mitad de leccin
    Has hecho un trabajo fantstico! Aqu hay un resumen rpido 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 pgina web.
    5. Cmo hacer encabezados y prrafos.
    INSTRUCTIONS
    1. Aade un ttulo en medio de las etiquetas de ttulo.
    2. Crea un encabezado de tamao <h3>en el cuerpo. Haz que tu
    encabezado diga lo que quieras! (Pero no te olvides de cerrarlo.)
    3. Crea tres prrafos y llnalos con contenido (p.ej, sobre carros, tu
    mascota, tu ciudad favorita para ir de viajelo que quieras!)























    Aadiendo imgenes
    Puedes aadir imgenes a tus sitios web para hacer que se vean ultra
    fantsticos. Solamente necesitas una etiqueta de imagen, como: <img>.
    Esta etiqueta es un poco diferente a las dems. En vez de colocar el
    contenido en medio de las etiquetas, le dices a la etiquetas dnde est
    la imagen, usando src.
    Mira bien la etiqueta a la derechale aade a la pgina una imagen de
    un pato de goma! (Puedes verlo haciendo clic en la pestaa Resultados)
    Ves la direccin web (o URL, porlocalizador de recursos uniforme)
    despus de src=? Es "http://bit.ly/PK1euu". Le dice a la
    etiqueta <img> de dnde obtener la imagen!
    INSTRUCTIONS
    Aade una segunda imagen debajo de la primera. (Asegrate de que
    sea antes de la etiqueta de cierre de cuerpo!) Puedes escoger la imagen
    que quieras. Solamente busca una imagen en lnea, y luego coloca la
    URL de esa imagen despus de src=(asegrate de ponerla entre
    comillas, como se muestra).



















    Haz clic en esa imagen
    Bien hecho! Ahora ya sabes cmo aadir imgenes a tu sitio web. Pero,
    qu tal si quisieras darle clic a esa imagen para que te llevara a algn
    otro sitio?
    La etiqueta <a></a> es la que se usa para crear hipervnculos (o
    simplementeenlaces) en las pginas web. stas son las palabras o
    imgenes en las que haces clic que te lleven a una nueva pgina!
    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 dnde
    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
    dnde ir! El texto despus dehref es la direccin web, y el texto en
    medio de <a> y </a> es el texto sobre el que haces clic.
    INSTRUCTIONS
    Aqu est cmo convertir una imagen en un enlace: coloca una
    etiqueta <a href=""> antes de tus etiquetas<img> y una
    etiqueta </a> despus de ellas. En medio de las comillas despus
    de href=, escribe la direccin de tu sitio web favorito!
    Hint
    Asegrate de escribir una direccin completa,
    como"http://www.google.com". Ah, si: asegrate de poner la direccin
    entre comillas!










    Imgenes y enlaces
    Bien hecho! Cercirate de que entiendes las imgenes y los enlaces
    antes de continuar con el repaso.
    INSTRUCTIONS
    1. Aade dos imgenes 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. Despus de las dos imgenes, crea un enlace que simplemente sea una
    lnea de texto. Puede conducir a cualquier sitio que quieras.
    Si necesitas ayuda verifica la Sugerencia.
    Hint
    Las imgenes 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 PARTE
    CAPTULO 1:

    Qu es lo que hars
    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.
    Revisa el archivo index.html y la pestaa Resultados para ver un ejemplo
    hemos hecho nuestra propia pgina web.
    Instructions
    Presiona Ejecutar para comenzar a crear la tuya!







































    Cada casa necesita una estructura
    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, ybody.
    Instructions
    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

    ?
    Hint

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














    Es mejor con un encabezado
    Recuerda: si rima, debe ser cierto!
    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.
    Instructions
    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!


















    Cuntanos sobre ti
    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.
    Instructions
    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.

    ?
    Hint

    Que sea apropiado! Ya sabes que los nios andan en Internet.



















    Una imagen vale ms que mil palabras
    Buen trabajo! Aunque tu pgina an se ve un poco simple. Mejor
    adele una o dos imgenes para arreglarla un poco.
    Instructions
    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.

    ?
    Hint

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







    Enlzame!
    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!
    Instructions
    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!
    Revisa la Sugerencia si olvidaste cmo funciona una etiqueta a.

    ?
    Hint

    Recuerdas cmo hacer enlaces? Si no, aqu est:
    <a href="URL del sitio web">Texto o imagen!</a>

    Вам также может понравиться