En la clase de hoy veremos cómo mostrar imágenes en HTML, sus principales atributos, estilo e incluso cómo optimizarlas para nuestro SEO y rendimiento.
6– Imágenes en HTML
Hasta ahora hemos visto textos, enlaces y listas. Pero atención porqu llega ya el momento de añadir un poco de salsa al aburrido texto. Lo haremos con las imágenes.
Veamos cómo colocar imágenes en una web, a través de HTML, y cuales son sus atributos más importantes para poder mostrarla cómo queramos y del tamaño que queramos.
¡Como podéis ver, mostrar imágenes en HTML es facilísimo, y no tiene ningún secreto. No deja de ser una etiqueta más, como todas las que ya hemos visto, pero con la particularidad de tener un atributo dónde debemos indicar dónde se encuentra.
Así pues, los deberes de hoy son:
- Mostrar esta imagen en una página en blanco.
- Añadirle una descripción para SEO, accesibilidad y seguridad.
- Colocarle un nombre para identificarla
- Forzar tamaños no naturales
- Más pequeña de lo que es en realidad.
- Más grande de lo que es en realidad.
- Estilos
- Colocarle un borde
- Alinearla a la derecha
- Establecer 50 pixeles de espacio superior e inferior
- Ocionalmente, hacerlo con CSS
Como podéis ver, ésta es una etiqueta simple pero muy útil. Ahora ya sabemos cómo mostrar la imagen que queremos dónde queramos y como queramos. Si tenéis alguna duda de la clase de hoy, podéis ir al enlace que os he dejado debajo del vídeo para ver el código, y si tenéis alguna duda, podéis contactar a través de la intranet :)
Nos vemos en la siguiente clase, en la que veremos una etiqueta clave para mostrar la información de una forma ordenada y organizada. Hasta entonces... ¡A htmlear!
Todos los capítulos de este curso:
- Curso de HTML #1: Teoría base y primera práctica
- Curso de HTML #2: Etiquetas y atributos
- Curso de HTML #3: Formatos de texto
- Curso de HTML #4: Enlaces
- Curso de HTML #5: Listas
- Curso de HTML #6: Imágenes
- Curso de HTML #7: Tablas
- Curso de HTML #8: Formularios
- Curso de HTML #9: Estructura
- Curso de HTML #10: Integración con CSS y JavaScript