El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Afegint imatges

Següent ►
►

En aquest tema, aprendrem com afegir imatges a les nostres pàgines HTML. Les imatges són una part essencial de qualsevol lloc web, ja que poden millorar l'atractiu visual i proporcionar informació addicional als usuaris.

Conceptes clau

  1. Etiqueta <img>: Utilitzada per inserir imatges en una pàgina HTML.
  2. Atributs de l'etiqueta <img>:
    • src: Especifica la ubicació de la imatge.
    • alt: Proporciona un text alternatiu per a la imatge.
    • width i height: Defineixen les dimensions de la imatge.

Etiqueta <img>

L'etiqueta <img> és una etiqueta auto-tancada que no necessita una etiqueta de tancament. A continuació es mostra la seva estructura bàsica:

<img src="ruta/de/la/imatge.jpg" alt="Descripció de la imatge">

Atributs de l'etiqueta <img>

  1. src: Aquest atribut és obligatori i especifica la ubicació de la imatge. Pot ser una URL absoluta o relativa.

    • Exemple de URL absoluta: https://www.example.com/imatge.jpg
    • Exemple de URL relativa: imatges/imatge.jpg

  2. alt: Aquest atribut és molt important per a l'accessibilitat. Proporciona un text alternatiu que es mostrarà si la imatge no es pot carregar. També és utilitzat pels lectors de pantalla per descriure la imatge a les persones amb discapacitat visual.

  3. width i height: Aquests atributs defineixen l'amplada i l'alçada de la imatge en píxels. És recomanable especificar aquestes dimensions per evitar que la pàgina es redimensioni de manera inesperada mentre es carrega la imatge.

Exemple pràctic

A continuació, es mostra un exemple pràctic d'ús de l'etiqueta <img>:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Afegint Imatges</title>
</head>
<body>
    <h1>Exemple d'imatge</h1>
    <img src="https://www.example.com/imatge.jpg" alt="Una bella imatge de la natura" width="600" height="400">
</body>
</html>

Explicació del codi

  • <img src="https://www.example.com/imatge.jpg" alt="Una bella imatge de la natura" width="600" height="400">:
    • src: La ubicació de la imatge.
    • alt: Descripció de la imatge.
    • width: Amplada de la imatge en píxels.
    • height: Alçada de la imatge en píxels.

Exercicis pràctics

Exercici 1: Afegir una imatge local

  1. Descarrega una imatge i guarda-la en una carpeta anomenada imatges dins del teu projecte.
  2. Crea un fitxer HTML i afegeix la imatge utilitzant una URL relativa.
<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imatge Local</title>
</head>
<body>
    <h1>Imatge Local</h1>
    <img src="imatges/imatge-local.jpg" alt="Descripció de la imatge local" width="500" height="300">
</body>
</html>

Exercici 2: Afegir una imatge amb dimensions personalitzades

  1. Utilitza la mateixa imatge de l'exercici anterior.
  2. Afegeix la imatge a la pàgina HTML, però aquesta vegada especifica dimensions diferents.
<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imatge amb Dimensions Personalitzades</title>
</head>
<body>
    <h1>Imatge amb Dimensions Personalitzades</h1>
    <img src="imatges/imatge-local.jpg" alt="Descripció de la imatge local" width="300" height="200">
</body>
</html>

Errors comuns i consells

  • Error: No especificar l'atribut alt: Sempre proporciona un text alternatiu per a millorar l'accessibilitat.
  • Error: Dimensions incorrectes: Assegura't que les dimensions especificades siguin proporcionals a la imatge original per evitar distorsions.
  • Consell: Utilitza imatges optimitzades per a la web per reduir el temps de càrrega de la pàgina.

Resum

En aquest tema, hem après com afegir imatges a les nostres pàgines HTML utilitzant l'etiqueta <img>. Hem explorat els atributs essencials com src, alt, width i height, i hem vist exemples pràctics per entendre millor el seu ús. També hem realitzat exercicis per reforçar els conceptes apresos. Ara estem preparats per continuar amb el següent tema del curs.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats