Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 11 - (W3schools) - Imágenes de HTML

    Cargado por

    pacmaren
    6 vistas8 páginas
    imágenes html

    Título original

    11_(w3schools)_Imágenes de 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
    imágenes html

    Copyright:

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

    11 - (W3schools) - Imágenes de HTML

    Cargado por

    pacmaren
    imágenes html

    Copyright:

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

    Imágenes de HTML https://www.w3schools.com/html/html_images.

    asp

    EL MU ND O ES MAYOR SIT I O WEB DEV ELOPER

    W3.CSS JQUERY XML FORUM

    Las imágenes pueden mejorar el diseño y la apariencia de una página web.

    Ejemplo

    <img src="pic_trulli.jpg" alt="Italian Trulli">

    Ejemplo

    <img src="img_girl.jpg" alt="Girl in a jacket">

    Ejemplo

    <img src="img_chania.jpg" alt="Flowers in Chania">

    1 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    Imágenes de sintaxis HTML


    En HTML, las imágenes se definen con la <img> etiqueta.

    La <img> etiqueta está vacío, contiene atributos solamente, y no tiene una etiqueta de cierre.

    El src atributo especifica la dirección URL (dirección web) de la imagen:

    <img src="url">

    El atributo alt
    El alt atributo proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede
    visualizarla (debido a la conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).

    El valor del alt atributo debe describir la imagen:

    Ejemplo

    <img src="img_chania.jpg" alt="Flowers in Chania">

    Si un navegador no puede encontrar una imagen, se mostrará el valor del alt atributo:

    Ejemplo

    <img src="wrongname.gif" alt="Flowers in Chania">

    Nota: El alt es necesaria atributo. Una página web no se valida correctamente sin ella.

    Tamaño de imagen - Ancho y Altura


    Puede utilizar el style atributo para especificar el ancho y la altura de una imagen.

    Ejemplo

    2 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

    Alternativamente, se puede utilizar el width y height atributos:

    Ejemplo

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

    El width y height atributos siempre define la anchura y la altura de la imagen en píxeles.

    Nota: Siempre especificar el ancho y la altura de una imagen. Si no se especifican la anchura y la altura, la
    página puede parpadear mientras se carga la imagen.

    Anchura y altura, o el estilo?


    Las width , height y style los atributos son válidos en HTML.

    Sin embargo, sugerimos usar el style atributo. Evita que las hojas de estilos de cambiar el tamaño de las
    imágenes:

    Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
    width: 100%;
    }
    </style>
    </head>
    <body>

    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

    </body>
    </html>

    Imágenes en otra carpeta


    3 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.

    Sin embargo, es común para almacenar las imágenes en una subcarpeta. A continuación, debe incluir el nombre
    de la carpeta en el src atributo:

    Ejemplo

    <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

    Imágenes en otro servidor


    Algunos sitios web almacenan sus imágenes en servidores de imágenes.

    En realidad, se puede acceder a las imágenes desde cualquier dirección web en el mundo:

    Ejemplo

    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

    Puede leer más acerca de las rutas de archivos en el capítulo Caminos archivo HTML .

    Las imágenes animadas


    HTML permite GIF animados:

    Ejemplo

    <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

    Enlace imagen como una


    Para usar una imagen como un enlace, poner la <img> etiqueta dentro de la <a> etiqueta:

    Ejemplo

    4 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    <a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
    </a>

    Nota: border:0; se añade para prevenir IE9 (y anterior) muestre un borde alrededor de la imagen (cuando la
    imagen es un enlace).

    imagen Flotación
    Utilizar el CSS float propiedad a dejar flotar imagen a la derecha oa la izquierda de un texto:

    Ejemplo

    <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">


    The image will float to the right of the text.</p>

    <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">


    The image will float to the left of the text.</p>

    Consejo: Para obtener más información acerca del flotador CSS, lea nuestro flotador CSS Tutorial .

    Los lectores de pantalla HTML


    Un lector de pantalla es un programa de software que lee el código HTML, convierte el texto, y permite al usuario
    "escuchar" a los contenidos. Los lectores de pantalla son útiles para las personas con discapacidad visual o
    discapacidades para el aprendizaje.

    Resumen del capítulo


    Utilice el código HTML <img> elemento para definir una imagen
    Utilice el código HTML src de atributos para definir la URL de la imagen
    Utilice el código HTML alt de atributos para definir un texto alternativo para una imagen, si no se puede
    mostrar
    Utilice el código HTML width y height atributos para definir el tamaño de la imagen
    Utilice el CSS width y height propiedades para definir el tamaño de la imagen (alternativamente)
    Utilizar el CSS float propiedad a dejar flotar la imagen

    5 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    Carga de imágenes lleva tiempo. Las imágenes grandes pueden ralentizar su página. Utilizar imágenes
    cuidadosamente.

    Ejercicios HTML

    Ponte a prueba con ejercicios

    Ejercicio:
    Utilice los atributos de imagen HTML para establecer el tamaño de la imagen a 250 píxeles de ancho y 400
    píxeles de alto.

    <Img src = "scream.png" = "250" = "400">

    Iniciar el ejercicio

    HTML etiquetas de imagen


    Tag Description

    <img> Defines an image

    <map> Defines an image-map

    <area> Defines a clickable area inside an image-map

    <picture> Defines a container for multiple image resources

    Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra etiqueta HTML referencia .

    6 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    SELECTOR DE COLOR

    CÓMO

    Tabs
    Dropdowns
    Acordeones
    lateral de navegación
    de navegación superior
    Cajas modales
    Las barras de progreso
    Parallax
    Formulario de acceso
    HTML incluye
    Google Maps
    controles deslizantes de
    intervalo
    sobre herramientas
    Presentación
    Lista Filtrar
    Ordenar lista

    COMPARTIR

    CERTIFICADOS

    HTML
    CSS
    JavaScript
    SQL
    Python
    PHP
    jQuery
    Bootstrap
    XML

    7 de 8 25/12/2019 22:03
    Imágenes de HTML https://www.w3schools.com/html/html_images.asp

    Top Tutoriales Top Referencias


    Tutorial HTML Referencia HTML
    Tutorial CSS CSS Referencia
    Javascript Tutorial Referencia de JavaScript
    Cómo Tutorial Consulta de SQL
    Tutorial de SQL Python Referencia
    Tutorial de Python W3.CSS Referencia
    W3.CSS Tutorial Bootstrap referencia
    Bootstrap Tutorial PHP Referencia
    PHP Tutorial HTML Colores
    jQuery Tutorial jQuery referencia
    Tutorial de Java Java de referencia
    C ++ Tutorial angular de referencia

    Top ejemplos Certificados web


    Ejemplos HTML Certificado HTML
    CSS Ejemplos CSS Certificado
    de JavaScript Ejemplos JavaScript Certificado
    Cómo Ejemplos SQL Certificado
    Ejemplos de SQL Python Certificado
    Python Ejemplos jQuery Certificado
    W3.CSS Ejemplos PHP Certificado
    Bootstrap Ejemplos Bootstrap Certificado
    PHP Ejemplos Certificado XML
    de jQuery Ejemplos
    Java Ejemplos
    Ejemplos de XML

    8 de 8 25/12/2019 22:03

    También podría gustarte