Guía de Taller
1
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e IFRAMES
_______________________________________________________________________
Diseño y Maquetación Web
Navegación en la web, imágenes, videos e IFRAMES
Sesión 6
LOGRO DE LA SESIÓN
Implementa elementos personalizados de navegación en la web y recursos de imágenes, videos y IFrames
mediante directivas de CSS
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
ETIQUETAS <IMG>, <PICTURE> Y SU PERSONALIZACIÓN CON CSS
Imágenes HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página web.
Sintaxis de imágenes HTML
La etiqueta HTML <img> se utiliza para incrustar una imagen en una página web. No se insertan técnicamente
en una página web; las imágenes están vinculadas a páginas web.
La etiqueta <img> crea un espacio de espera para la imagen referenciada, está vacía, solo contiene atributos y
no tiene una etiqueta de cierre. Tiene dos atributos obligatorios:
src: especifica la ruta a la imagen
alt: especifica un texto alternativo para la imagen
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e IFRAMES
_______________________________________________________________________
Tamaño de la imagen: ancho y alto
Puede utilizar el atributo de estilo para especificar el ancho y el alto de una imagen. Alternativamente, puede
usar los atributos de ancho y alto que se definen en pixeles.
Imágenes en otra carpeta
Imágenes en otro servidor / sitio web
Imagenes animadas
Imagen como enlace
Imagen flotante
Utilice la propiedad flot de CSS para dejar que la imagen flote a la derecha o a la izquierda de un texto:
HTML <picture>
El elemento HTML <picture> ofrece a los desarrolladores web más flexibilidad para especificar recursos de
imágenes.
Contiene uno o más elementos <source>, cada uno de los cuales hace referencia a diferentes imágenes a través
del atributo srcset. De esta forma, el navegador puede elegir la imagen que mejor se adapte a la vista y / o
dispositivo actual.
Cada elemento <source> tiene un atributo de medios que define cuándo la imagen es la más adecuada.
Diseño y Maquetación Web – Formación Continua
1
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e IFRAMES
_______________________________________________________________________
Diseño y Maquetación Web
Navegación en la web, imágenes, videos e IFRAMES
Sesión 6
LOGRO DE LA SESIÓN
Implementa elementos personalizados de navegación en la web y recursos de imágenes, videos y IFrames
mediante directivas de CSS
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
ETIQUETAS <IMG>, <PICTURE> Y SU PERSONALIZACIÓN CON CSS
Imágenes HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página web.
Sintaxis de imágenes HTML
La etiqueta HTML <img> se utiliza para incrustar una imagen en una página web. No se insertan técnicamente
en una página web; las imágenes están vinculadas a páginas web.
La etiqueta <img> crea un espacio de espera para la imagen referenciada, está vacía, solo contiene atributos y
no tiene una etiqueta de cierre. Tiene dos atributos obligatorios:
src: especifica la ruta a la imagen
alt: especifica un texto alternativo para la imagen
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e IFRAMES
_______________________________________________________________________
Tamaño de la imagen: ancho y alto
Puede utilizar el atributo de estilo para especificar el ancho y el alto de una imagen. Alternativamente, puede
usar los atributos de ancho y alto que se definen en pixeles.
Imágenes en otra carpeta
Imágenes en otro servidor / sitio web
Imagenes animadas
Imagen como enlace
Imagen flotante
Utilice la propiedad flot de CSS para dejar que la imagen flote a la derecha o a la izquierda de un texto:
HTML <picture>
El elemento HTML <picture> ofrece a los desarrolladores web más flexibilidad para especificar recursos de
imágenes.
Contiene uno o más elementos <source>, cada uno de los cuales hace referencia a diferentes imágenes a través
del atributo srcset. De esta forma, el navegador puede elegir la imagen que mejor se adapte a la vista y / o
dispositivo actual.
Cada elemento <source> tiene un atributo de medios que define cuándo la imagen es la más adecuada.
Diseño y Maquetación Web – Formación Continua
