Scribd Logo
Carica

Benvenuto in Scribd!

  • Diseño Web - Taller 2

    Caricato da

    jeckson_loza
    57 visualizzazioni2 pagine

    Titolo originale

    Diseño Web - taller 2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    57 visualizzazioni2 pagine

    Diseño Web - Taller 2

    Caricato da

    jeckson_loza

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 2

    INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL AREA: TEMA: Tecnologa e Informtica Grado 11 HTML bsico Imgenes, Enlaces

    Introduccin Esta gua contiene informacin y ejercicios que permitirn comprender el lenguaje HTML para el diseo de pginas web. Aprender a incrustar imgenes y enlaces (hipervnculos) mediante etiquetas HTML.

    IMGENES
    Uno de los elementos ms utilizados en una pgina web son las imgenes, tanto para mostrar informacin como parte del propio diseo de la pgina. Pueden ser fotografas o grficos creados por programas como Photoshop, Illustrator, o con programas gratuitos como Gimp e Inkscape. Bsicamente, en pginas web nos encontramos tres tipos de imgenes: GIF y PNG (para grficos simples, dibujos y transparencias simples) y JPG (fotografas con buena calidad y muchos colores). Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mnimo ha de tener esta etiqueta son los siguientes: <img src="ubicacion/imagen.gif" alt="texto alternativo" /> Lo primero que debemos de saber es dnde est la imagen, su ubicacin, que es lo que debe contener el atributo src: Una direccin absoluta es aquella que incluye toda la ruta hasta el archivo, incluido el protocolo http. Por ejemplo http://www.aulaclic.es/illustratorcs3/graficos/ej_homer_final.gif, o http://www.aulaclic.es/index.htm. Una direccin relativa es aquella que se expresa a partir de una ubicacin conocida, dentro de un mismo sitio.

    Cuando el navegador no encuentre la imagen ubicada en scr no podr mostrar la imagen. En su lugar puede mostrar una imagen de error. Adems se mostrar el texto contenido en el atributo alt, ya que sa es su funcin: mostrar un texto alternativo cuando no se puede mostrar la imagen. Aunque no son obligatorios, es muy frecuente aadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en pxeles. Para aumentar o disminuir una imagen es conveniente utilizar un programa grfico, ya que estos programas tienen opciones para optimizar el tamao de las imgenes Ejercicio: aadir una imagen a nuestra pgina del ITSI. La imagen se encuentra en d:\web\entrada.jpg. Este es el cdigo: <html> <head> <title> ITSI. Instituto Tcnico Superior Industrial </title> </head> <body> <h1>Bienvenido al ITSI</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre nuestra institucin y una coleccin de fotografas de las instalaciones </p> <img src=file://d:/web/entrada.jpg width=404 height=303 alt=No se encuentra la imagen title=Entrada al ITSI /> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp; Te esperamos.</p> </body> </html> A la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el navegador debe de descargarla primero; cuanto ms grande sea la imagen, ms ocupa, por lo tanto, hay que procurar usar imgenes lo ms pequeas posibles, siempre que lo que queramos mostrar se vea con suficiente nitidez.

    ENLACES
    Cualquier pgina web tiene imgenes o texto, que al pulsarlos nos llevan a otra pgina del mismo sitio, o a una pgina de un sitio distinto. Esto es un enlace o hiperenlace (en ingls link o hyperlink) tambin llamado hipertexto o hipervnculo. Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una mano. Tambin es muy frecuente que los enlaces aparezcan subrayados, ya que es la opcin por defecto que les asigna el HTML.

    En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un enlace es la siguiente: <a href="archivo_enlazado">contenido del enlace</a> El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.google.com.co . El contenido del enlace es lo que el usuario ve en la pgina y que al pulsar sobre l nos lleva al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aqu. Pulsa <a href="http://www.google.com.co">aqu</a>. Se ver as: Pulsa aqu.

    Es muy comn aadir a los enlaces el atributo title, para que muestre informacin sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo: Pulsa aqu:
    Pulsa <a href="http://www.colombiaaprende.edu.co" title="Visita el portal de Colombia Aprende">aqu</a>.

    Por defecto, el enlace se abrir en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo target="_blank". Ejercicio: Modifique el cdigo html de nuestra pgina, tal como aparece a continuacin.
    <html> <head> <title> ITSI. Instituto Tcnico Superior Industrial </title> </head> <body> <h1>Bienvenido al ITSI</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre nuestra institucin y una coleccin de fotografas de las instalaciones </p> <img src=file://d:/web/entrada.jpg width=404 height=303 alt=No se encuentra la imagen title=Entrada al ITSI /> <p>Visita el portal educativo ms importante de Colombia: <a href=http://www.colombiaaprende.edu.co target=_blank>Colombia Aprende</p> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp; Te esperamos.</p> </body> </html>

    Ejercicio: Utilizando el bloc de notas, cree una pgina como la que ver a continuacin. Gurdela con el nombre nuestra_institucion.html. Nota: el escudo se encuentra en la carpeta d:\web

    Compromiso: Disea en casa una hoja de vida en formato html, empleando etiquetas para dar formato al texto. Envala por correo electrnico a jecksonloza@gmail.com antes del 11 de febrero.

    Potrebbero piacerti anche