Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Curso C++1

    Cargado por

    John Bustos
    20 vistas8 páginas
    C--

    Título original

    CURSO C++1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    C--

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    20 vistas8 páginas

    Curso C++1

    Cargado por

    John Bustos
    C--

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    CURSO C++ 1

    Pgina de fotos interactivas

    Algunas fotos en tu tabla


    Ya sabs todo sobre tablas. Pero, sabas que las tablas son tiles para mucho ms
    que darle formato al texto?
    Pods usar una tabla para crear una grilla de fotos con un lindo formato.
    Notars que incluimos un archivo extra en este proyecto:stylesheet.css. Vas a
    aprender CSS en la prxima leccin y en el proyecto siguiente, pero pensamos que te
    gustar que te adelantemos un poco ac. Este archivo te va a ayudar a darle formato
    a tu HTML para que se vea buensimo.
    Instructions

    Hac clic en Guardar y enviar para comenzar tu proyecto fotogrfico.


    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
    <title>Mi pgina de fotos</title>
    </head>
    <body></body>
    </html>

    Fila por fila


    Primero lo primero: tenemos que crear filas para nuestra tabla.

    Instructions

    Cre una tabla (completa) con tres filas. Si necesits un repaso, fijate en Consejos
    tiles.

    Hint
    Primero, coloc las etiquetas<table></table>, despus agreg las
    etiquetas <tbody></tbody>(cuerpo de tabla) en medio de tus etiquetas de tabla.
    Pods crear filas de tabla dentro del cuerpo de tu tabla con las etiquetas <tr></tr>.

    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
    <title>Mi pgina de fotos</title>
    </head>
    <body>
    <table border="1px">
    <tr>
    <td></td>
    </tr>
    <td></td>
    <tr>
    <td></td>
    </tr>
    <tr>
    </tr>
    </table>

    </body>
    </html>

    Celda por celda


    Buensimo! Ahora necesitaremos tres celdas por fila (para tener nueve celdas en
    total).

    Instructions

    Agreg tres celdas de tabla por fila para obtener un total de nueve celdas.

    Hint
    Pods crear celdas de tabla con las etiquetas <td></td>.
    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
    <title>Mi pgina de fotos</title>
    </head>
    <body>
    <table border="1px">
    <tr>
    <td></td> <td></td> <td></td>
    </tr>
    <td></td> <td></td> <td></td>
    <tr>
    <td></td> <td></td> <td></td>
    </tr>
    <tr>
    </tr>
    </table>

    </body>
    </html>

    Acordate: es mejor con


    un encabezado
    Vas a querer ponerle un encabezado a tu tabla para que todo el mundo sepa de qu
    se tratan tus fotos.

    Para asegurarte de que el encabezado se vea bien, acordate de fijar su


    atributo colspan en 3 (ya que tens tres columnas y quers que el encabezado
    abarque las tres columnas).

    Instructions

    Cre un encabezado de la tabla usando las etiquetas <thead></thead>y <th></th>.


    Ponele el nombre que quieras a tu tabla.
    ?

    Hint
    El encabezado de la tabla (<thead>) contiene las etiquetas <th></th> y va despus de
    la etiqueta de inicio<table> pero antes de la primera fila de la tabla.
    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
    <title>Mi pgina de fotos</title>
    </head>
    <body>
    <table border="1px">
    <thead>
    <tr>
    <th colspan="3"> MIS FOTOS</th>
    </tr>
    <tr>
    <td></td> <td></td> <td></td>
    </tr>
    <td></td> <td></td> <td></td>
    <tr>
    <td></td> <td></td> <td></td>
    </tr>
    <tr>
    </tr>
    </table>

    </body>
    </html>

    Nueve imgenes valen ms que 9.000 palabras


    Muy bien! Siguiente paso: encontrar nueve imgenes. Pods elegir los enlaces de
    imgenes que quieras. Si no se te ocurre ninguno, fijate en "stock photo" con el motor
    de bsqueda que prefieras.
    Acordate: la etiqueta <img> es una de las pocas etiquetas de HTML que se cierran
    solas. Esto significa que en lugar de
    <img src="URL"></img>

    Tens que escribir


    <img src="URL" />

    Esto es porque no va nada entre la etiqueta de inicio <img> y la etiqueta de cierre, de


    modo que podes abrirla y cerrarla usando una sola etiqueta.

    Instructions

    Insert una etiqueta <img /> entre cada par de etiquetas <td></td>. Asegurate de
    ajustar cada atributosrc con la imagen URL que elegiste como foto.
    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
    <title>Mi pgina de fotos</title>
    </head>
    <body>
    <table border="1px">
    <thead>
    <tr>
    <th colspan="3"> FOTOS DE ANIMALES</th>
    </tr>
    <tr>
    <td><img
    src="http://deconceptos.com/wp-content/uploads/2008/09/concepto-deanimales.jpg"
    /></td>
    <td><img
    src="http://animalesmascotas.com/wpcontent/uploads/2011/01/animales-salvajes1.jpg"
    /></td>
    <td><img
    src="http://1.bp.blogspot.com/k_LL6VasU0A/Tcp1eWIrgXI/AAAAAAAAAAc/BawlRdm2r8Y/s1600/animales+salvajes.jpg" /></td>
    </tr>
    <td><img src="http://www.oocities.org/es/animaleswebs/img/animales-marinos1.jpg"
    /></td> <td><img src="http://3.bp.blogspot.com/_XQGuByKF2bA/Sbl6x7JcKgI/AAAAAAAAAAk/t-

    3OQovGhyI/s320/animales-salvajes-2.jpg"
    /></td>
    <td><img
    src="http://2.bp.blogspot.com/_AKSYZU4s0Nc/SEFlAuzopI/AAAAAAAAABU/083G5Q4r_YY/s400/Dibujo.JPG" /></td>
    <tr>
    <td><img
    src="http://3.bp.blogspot.com/_o-1UTO4UVQ/RzIEmy1Dw8I/AAAAAAAAAKk/5RsDrENOuw0/s320/lince.jpg"
    /></td>
    <td><img
    src="http://imalbum.aufeminin.com/album/D20061123/240522_PWN3TRW8TJCZQG3DZYOFHUL
    EXJAAMP_10006_emofondos_animales_emotik_com_H044718_L.jpg"
    /></td>
    <td><img
    src="http://ocularis.es/blog/pics/falcon1.jpg" /></td>
    </tr>
    <tr>
    </tr>
    </table>

    </body>
    </html>

    Enlazalos
    Perfecto! Ahora solamente necesits encerrar cada etiqueta <img> entre
    etiquetas <a></a>. As:
    <a href="http://codecademy.com">
    <img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logoblack.jpg">
    </a>

    Acordate de darle a cada etiqueta<a> un atributo href y de configurarlo igual a la


    direccin web adonde quers que te lleve el enlace! (Verific el Consejo si ests
    atascado.)

    Instructions

    Encerr cada etiqueta <img> con etiquetas <a></a> como se muestra en el ejemplo.
    No hay necesidad de hacer que los atributos src de tu etiqueta <img> yhref de tu
    etiqueta apunten a la misma direccin web; de hecho, te sugerimos que los hagas
    diferentes.

    Hint
    Te acords de cmo funcionan las etiquetas <a>?
    <a href="direccin del sitio web"><

    El cielo es el lmite
    Ahora conts con una linda tabla de imgenes interactivas para mostrar en tu sitio
    web que crece rpidamente.
    Pero no hay razn para que te quedes solamente con nueve imgenes: pods crear
    un lbum completo con docenas de imgenes, bien organizadas en una tabla. No
    dudes en experimentar y enlazar las imgenes chiquitas de la tabla a versiones ms
    grandes de las fotos, de aadir celdas adicionales a la tabla, y muchas cosas ms.

    Instructions

    Hac clic en Guardar y enviar cuando ests listo para finalizar el curso.

    También podría gustarte