Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Uso de Imágenes en HTML

    Cargado por

    Profa. Ivonne Rivera
    12 vistas9 páginas

    Título original

    Uso de imágenes en HTML

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

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

    Uso de Imágenes en HTML

    Cargado por

    Profa. Ivonne Rivera

    Copyright:

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

    USO DE IMÁGENES EN HTML

    Secundar ia México Independiente


    I M AG E N D E S D E L A M I S M A C A R P E TA

    Para insertar una imagen desde la misma carpeta, se debe usar


    el siguiente tag:

    <img src=“Imagen.jpg">

    Donde Imagen.jpg debe estar guardada en el mismo sitio que


    nuestro HTML
    Para conocer la terminación (.jpg, .png, .gif, etc) se debe de
    poner los elementos de la carpeta en vista “detalles”
    I M AG E N D E S D E C A R P E TA D I F E R E N T E

    Para insertar una imagen que no está en la misma carpeta, se debe de


    poner la ruta completa, observa el ejemplo:

    <img src=“Carpeta1\Carpeta2\Imagen.gif">

    Donde se va a insertar “Imagen.gif ” que está guardada en la


    “Carpeta2”
    Para encontrar la ruta, puedes ir a la imagen, dar clic con el botón
    secundario (derecho), elegir propiedades, y ahí aparece la ruta de la
    imagen.
    IMAGEN DESDE PÁGINA WEB

    Para insertar una imagen desde una página web, se debe de


    incluir el siguiente tag:

    <img src="Aquí va todo el URL">

    Para obtener la dirección de la imagen, se le da clic con el


    botón secundario y se selecciona la opción de "copiar
    enlace"
    C A M B I A R TA M A Ñ O D E I M AG E N

    Para cambiar el tamaño de la imagen se usan las siguientes


    indicaciones:

    <img src=“Imagen.png" width="300" height="150" >

    De esta forma, conseguimos que la imagen quede de 300 pixeles


    de ancho y 150 pixeles de alto, además se pueden poner en
    distinto orden, es decir, primero el alto y después el ancho.
    I N S E RTA R U N V Í N C U L O A L A I M A G E N

    Si se desea poner un vínculo a una imagen, se debería escribir de


    la siguiente forma:

    <a href=“URL"> <img src=“Imagen.png"> </a>

    De esta forma, tendremos una imagen en nuestra página que al


    darle clic, nos enviará a la URL asociada
    IMAGEN DE FONDO

    Para poner una imagen de fondo, usaremos las siguientes indicaciones


    dentro de body

    <body background="Fondo.jpg">

    La imagen se repetirá por toda la página, así que es conveniente usar fondos
    grandes y no muy saturados, los tamaños ideales son:
    • 1024×768 pixeles
    • 1366×768 pixeles
    • 1920×1080 pixeles
    EJEMPLOS
    Imagina que deseas insertar una imagen en tu página, de tal modo que al darle clic, te envié al vídeo de
    Back To Black de Amy Winehouse
    Usarás la siguiente imagen:

    Y la tienes guardada justo en la misma carpeta donde tienes tu HTML con el nombre de Video en
    formato PNG
    La URL del vídeo es https://www.youtube.com/watch?v=TJAfLE39ZZ8

    Deseas que en tu página aparezca centrada y de un tamaño de 500 pixeles de ancho por
    250 pixeles de alto.
    Tu tag quedaría escrito como:
    <p align=center><a href="https://www.youtube.com/watch?v=TJAfLE39ZZ8"> <img
    src=“Video.png“ width=“500" height=“250"> </a>

    También podría gustarte