Elementos Imagen de HTML Haz que tu Sitio Web Resalte

Lleva tu sitio web a la vida con imágenes. Aprende la etiqueta de HTML img, para incluir fotos, gráficos y gifs animados en tu página web. Aviva tu sitio web añadiendo títulos, texto alternativo, leyendas, y enlaces a imágenes con las etiquetas figure, figcaption y anchor.

  • Click here for the full video transcript

    [múscia inicial]

    >> MISS PIGGY-BACK: Querida Daisy, encontre un dibujo de un robot en la web que quiero incluir en mi sitio web, pero cuando intento insertarlo en mi página, todo lo que consigo es este dibjo de piernas en la playa¡ Sinceramente, Señorita Piggy-back

    >>DAISY: ¡Alto! No puedes enlazar en caliente imágenes como esa! No esta bien incluir imágenes desde otros sitios web en tu propia página. Muchos sitios web servirá un dibujo raro si tu intentas hacer eso, como aquellas piernas en la playa que tu viste. Necesitarás conseguir tus propias imágenes, pero no te preocupes. Tengo algunas que tu puedes usar. Aquí está un atractivo robot que puedes usar en tu sitio web. Lo copiaré dentro del subdirectorio images de este sitio web de ejemplo. Ahora en nuestro fichero index.html, podemos añadir la imagen con la etiqueta img. El único atributo que tu necesitas es el source. Éste es el camino al fichero, relativo a nuestro index.html. Oh, ¡vaya! Esta imagen es un camino demasiado grande. Reduzcámoslo con el atributo width. El atributo width tomar un valor específico en pixels. Los pixels son diminutos puntos de color que construyen una imagen. Al decirle al navegador que haga esta imagen 600 pixels de ancho, proporcionalmente reducirá el alto y el ancho de nuestra imagen para ajustarla. También podrías ajustar el alto de la imagen y estrecharlo desproporcionadamente. Aunque, ésta no es la mejor forma de cambiar el tamaño a una imagen. Deberías escalarlas con un programa de manipulación de imágenes como GIMP, antes de ponerlas en tu página web. Intenta una imagen diferente que ya ha sido cambiado su tamaño. Aquí está la imagen de un cangrejo que encontré en la playa. Voy a dar a esta imagen dos atributos extras llamados alt y title. El texto de alt es útil para usuarios ciegos, porque describe una imagen que ellos no serían capaces de percibir visualmente, y el texto de title proporcionará una descripción corta a cualquier usuario que se mantenga por encima de la imagen con su ratón. Mire ¿cómo estas imágenes exponen al lado una de la otra? Ésto es porque las imágenes son elementos en linea. Si quisiéramos separarlos, necesitaríamos usar una etiqueta br, o meterlos en un elemento a nivel de bloque. El elemento figure es útil cuando es usado con el elemento figcaption para añadir leyendeas a las imagenes. También podemos hacer un enlace a las imágenes metiéndolas en una etiqueda anchor. Las imágenes que son enlazadas será resaltadas en azul.

    >> UNIQUE ID: Espero que te hayas divertido con la emisión de esta noche. Habrás notado que usamos varios formatos de imágenes usados a lo largo del vídeo. Los formatos de imagen habituales para la web son jpg, gif y pnp. Jpg es un tipo de formato con pérdida, significa que es comprimido para ahorrar espacio en disco. Es bueno para las imágenes fotográficas y con alto colorido o detalle. Los formatos png y gif son sin pérdida, y son los mejores con pocos colores. Personalmente, soy bastante parcial hacia el gif animado.

    >>DAISY: Hoy realmente llevamos a nuestro sitio web a la vida con las imágenes. Aprendimos como insertar imágenes en nuestras páginas HMTL y añadir títulos, leyendas, y enlazarlos.

    En el próximo video, aprenderemos todo acerca de las tablas HTML mientras jugamos mi juego favorito con un invitado muy especial.

    [música de salida]

Únete al debate

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid
×