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

Afegint contingut i mitjans

Següent ►
►

En aquest tema, aprendrem com afegir contingut i mitjans al nostre lloc web. Això inclou text, imatges, vídeos i àudio. Aquestes habilitats són essencials per crear un lloc web atractiu i funcional.

  1. Afegint Text

Paràgrafs i Encapçalaments

Els paràgrafs i els encapçalaments són elements bàsics per estructurar el contingut textual d'una pàgina web.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Text</title>
</head>
<body>
    <h1>Encapçalament Principal</h1>
    <h2>Subtítol</h2>
    <p>Aquest és un paràgraf de text. Els paràgrafs s'utilitzen per agrupar blocs de text.</p>
</body>
</html>

Llistes

Les llistes són útils per organitzar informació en punts.

Llista Desordenada

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>

Llista Ordenada

<ol>
    <li>Primer Element</li>
    <li>Segon Element</li>
    <li>Tercer Element</li>
</ol>

  1. Afegint Imatges

Les imatges fan que el contingut sigui més atractiu i informatiu.

Etiqueta <img>

L'etiqueta <img> s'utilitza per inserir imatges.

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

Exemple:

<img src="imatges/logo.png" alt="Logotip de l'empresa">

Atributs Importants

  • src: La ruta de la imatge.
  • alt: Text alternatiu que descriu la imatge.

  1. Afegint Vídeos

Els vídeos poden ser incrustats utilitzant l'etiqueta <video>.

Etiqueta <video>

<video controls>
    <source src="videos/exemple.mp4" type="video/mp4">
    El teu navegador no suporta la reproducció de vídeos.
</video>

Atributs Importants

  • controls: Mostra els controls de reproducció.
  • autoplay: Reprodueix el vídeo automàticament.
  • loop: Reprodueix el vídeo en bucle.

  1. Afegint Àudio

L'àudio es pot afegir utilitzant l'etiqueta <audio>.

Etiqueta <audio>

<audio controls>
    <source src="audio/exemple.mp3" type="audio/mpeg">
    El teu navegador no suporta la reproducció d'àudio.
</audio>

Atributs Importants

  • controls: Mostra els controls de reproducció.
  • autoplay: Reprodueix l'àudio automàticament.
  • loop: Reprodueix l'àudio en bucle.

Exercicis Pràctics

Exercici 1: Afegir Text i Imatges

Crea una pàgina HTML que contingui:

  1. Un encapçalament principal.
  2. Un paràgraf de text.
  3. Una llista desordenada amb tres elements.
  4. Una imatge amb una descripció alternativa.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 1</title>
</head>
<body>
    <h1>Encapçalament Principal</h1>
    <p>Aquest és un paràgraf de text.</p>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
    <img src="imatges/exemple.jpg" alt="Descripció de la imatge">
</body>
</html>

Exercici 2: Afegir Vídeos i Àudio

Crea una pàgina HTML que contingui:

  1. Un vídeo amb controls de reproducció.
  2. Un àudio amb controls de reproducció.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 2</title>
</head>
<body>
    <h1>Vídeo i Àudio</h1>
    <video controls>
        <source src="videos/exemple.mp4" type="video/mp4">
        El teu navegador no suporta la reproducció de vídeos.
    </video>
    <audio controls>
        <source src="audio/exemple.mp3" type="audio/mpeg">
        El teu navegador no suporta la reproducció d'àudio.
    </audio>
</body>
</html>

Conclusió

En aquesta secció, hem après com afegir text, imatges, vídeos i àudio a les nostres pàgines HTML. Aquests elements són fonamentals per crear un lloc web ric i interactiu. Practica afegint aquests elements al teu projecte per familiaritzar-te amb les seves etiquetes i atributs.

◄ 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