Invatare Atomica

Inserarea obiectelor hipermedia in pagini web

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei invata sa inserezi obiecte hipermedia — imagini, secvente audio si video, hiperlegaturi si harti de imagini — intr-o pagina web HTML, conform programei TIC cls. XII (Tehnoredactare asistata de calculator / Tehnici de documentare asistata de calculator, OMECI 5099/2009). Aceste competente sunt necesare pentru proiectul practic final: realizarea si prezentarea publica a unei aplicatii web.

Dupa aceasta lectie vei putea:

  • Sa inserezi imagini in HTML folosind eticheta <img> cu atributele obligatorii
  • Sa creezi hiperlegaturi (linkuri) intre paginile proiectului tau web
  • Sa inserezi secvente audio si video cu etichetele HTML5 <audio> si <video>
  • Sa aplici maparea imaginilor (image maps) pentru zone interactive
  • Sa structurezi corect un document hipermedia cu toate tipurile de obiecte multimedia

Incearca singur!

Provocare:

Vrei sa publici online un referat despre marile orase europene. Ai pregatit: o fotografie cu Paris (paris.jpg), un clip scurt cu Venetia (venetia.mp4) si o harta a Europei pe care vrei sa marchezi orasele ca zone clickabile. Cum ai organiza structura HTML a paginii tale? Descrie in cateva randuri elementele pe care le-ai folosi si ordinea lor.

💡 Ai nevoie de un indiciu?

Gandeste-te ca o pagina web e un document structurat. Fiecare tip de continut are eticheta lui: <img> pentru imagini, <video> pentru clip, <map> + <area> pentru harta clickabila.

Ordinea logica: titlul paginii (<h1>), imaginea principala (<img>), clipul video (<video>), harta interactiva (<img usemap> + <map>). Fiecare element are atribute care controleaza comportamentul sau (src, alt, controls, href etc.).

1

1. Inserarea imaginilor cu <img>

Eticheta <img> insereaza o imagine in pagina web. Este o eticheta vida (nu are tag de inchidere). Atributele esentiale:
  • src — calea catre fisierul imagine (relativa sau absoluta). Ex: src="imagini/paris.jpg"
  • alt — textul alternativ, obligatoriu pentru accesibilitate. Ex: alt="Turnul Eiffel la apus"
  • width si height — dimensiunile in pixeli sau procente. Recomandat sa specifici cel putin unul pentru a evita saltul vizual la incarcare.
  • title — tooltip afisat la hover (optional, util pentru imagini informative).
Cod HTML — imagine cu toate atributele recomandate:
<img src="imagini/paris.jpg"
     alt="Panorama Parisului cu Turnul Eiffel"
     width="800"
     height="533"
     title="Paris, Franta — capitala culturala a Europei">
Exemplu umanist — portofoliu cultural online:

Creezi o pagina despre pictura impresionista. Inserezi trei imagini: monet_nuferi.jpg (alt="Nuferii de Monet, Muzeul Orangerie, Paris"), renoir_dans.jpg (alt="Dansul la Moulin de la Galette, Renoir") si degas_balerine.jpg (alt="Baletistele in culise, Degas"). Fiecare imagine are width="600" si un atribut title cu detalii despre opera.

2

2. Inserarea audio si video in HTML5

HTML5 a introdus etichetele native <audio> si <video>, eliminand necesitatea plugin-urilor externe (Flash, ActiveX). Atribute esentiale:
  • src — calea catre fisierul media.
  • controls — afiseaza butoanele de control (Play/Pause, volum, bara progres). Fara acesta, fisierul se incarca dar nu se vede niciun buton.
  • autoplay — porneste automat (de evitat — deranjant si blocat de multe browsere).
  • loop — redare repetata continua.
  • muted — pornit fara sunet (util cu autoplay pentru clipuri decorative).
  • poster (doar <video>) — imagine afisata inainte ca utilizatorul sa dea Play.
Cod HTML — video cu poster si controale:
<video src="media/venetia_canal.mp4"
       controls
       poster="imagini/venetia_preview.jpg"
       width="640">
    Browserul tau nu suporta redarea video HTML5.
</video>
Cod HTML — audio cu controale:
<audio src="media/vals_strauss.mp3" controls>
    Browserul tau nu suporta redarea audio HTML5.
</audio>
Exemplu umanist — prezentare multimedia a unui compozitor:

Pagina ta despre Beethoven include: un <video> cu interpretarea Simfoniei a 9-a (controls, poster cu portretul compozitorului), un <audio> cu Fur Elise (controls) si imagini din partitura originala. Textul alternativ si titlurile descriu fiecare element pentru accesibilitate.

3

3. Hiperlegaturi — <a href> si tipuri de linkuri

Hiperlegatura (link) este elementul fundamental al hipermedia: conecteaza documente, sectiuni si resurse. Eticheta <a href="...">text</a> creeaza un link.
  • Link relativ: calea porneste de la fisierul curent. Ex: href="pagina2.html" sau href="../index.html" — pentru navigatia interna a proiectului.
  • Link absolut: URL complet. Ex: href="https://ro.wikipedia.org/wiki/Eminescu" — pentru resurse externe.
  • Ancora (anchor): salt la o sectiune din aceeasi pagina. Ex: href="#capitol2"; sectiunea tinta are id="capitol2".
  • Link e-mail: href="mailto:contact@scoala.ro" — deschide clientul de email al utilizatorului.
  • target="_blank": deschide linkul in tab nou (recomandat pentru linkuri externe, pentru a nu pierde pagina curenta).
Cod HTML — exemple de tipuri de linkuri:
<!-- Link intern (relativ) -->
<a href="capitolul2.html">Capitolul 2: Romantismul</a>

<!-- Link extern (in tab nou) -->
<a href="https://ro.wikipedia.org/wiki/Mihai_Eminescu"
   target="_blank" rel="noopener">
    Eminescu pe Wikipedia
</a>

<!-- Ancora in pagina -->
<a href="#bibliografie">Sari la bibliografie</a>
...
<h2 id="bibliografie">Bibliografie</h2>

<!-- Link e-mail -->
<a href="mailto:redactie@revista-literara.ro">Contacteaza redactia</a>
Exemplu umanist — revista literara online cu navigatie interna:

Proiectul tau "Revista Literara Scolara" are: index.html (pagina principala), poezie.html, proza.html, recenzii.html. In meniul de navigatie al fiecarei pagini inseri linkuri relative catre celelalte pagini. Rubrica "Resurse externe" contine linkuri absolute catre biblioteci digitale, deschise cu target="_blank".

4

4. Maparea imaginilor (Image Maps)

Maparea imaginilor permite definirea de zone geometrice clickabile pe o imagine, fiecare zona avand un link propriu. Se foloseste pentru harti geografice interactive, scheme anatomice, planuri arhitecturale etc.
  • Eticheta <map name="numeHarta"> defineste harta.
  • Eticheta <area> defineste o zona: shape (rect/circle/poly), coords (coordonatele), href (destinatia), alt (text alternativ).
  • Imaginea se leaga de harta prin atributul usemap="#numeHarta".
Cod HTML — harta Europei cu doua orase clickabile:
<img src="harta_europa.jpg"
     alt="Harta Europei"
     usemap="#hartaEuropa"
     width="800" height="600">

<map name="hartaEuropa">
    <area shape="circle"
          coords="320,180,20"
          href="paris.html"
          alt="Paris — capitala Frantei">
    <area shape="rect"
          coords="400,300,440,330"
          href="roma.html"
          alt="Roma — capitala Italiei">
</map>
Forma coordonatelor:

rect: x1,y1,x2,y2 (coltul stanga-sus si dreapta-jos). circle: cx,cy,raza (centrul si raza in pixeli). poly: x1,y1,x2,y2,x3,y3,... (varfurile poligonului). Coordonatele se masoara in pixeli fata de coltul stanga-sus al imaginii.

Exemplu umanist — proiect "Tururi culturale europene":

Pagina principala contine o harta a Europei cu 5 orase marcate ca zone clickabile (Paris, Roma, Atena, Viena, Praga). Fiecare click deschide pagina HTML corespunzatoare cu informatii culturale, imagini si un clip video. Harta devine navigatia vizuala a intregului proiect web.

5

5. Organizarea fisierelor si cai relative in proiect

Un proiect web profesional are o structura de directoare clara. Fisierele se refera unele pe altele prin cai relative — nu prin cai absolute de pe calculatorul tau (acestea nu functioneaza pe server sau la alt utilizator).
Structura recomandata pentru un proiect web cls. XII:
proiect-web/
├── index.html          (pagina principala)
├── pagini/
│   ├── capitol1.html
│   ├── capitol2.html
│   └── contact.html
├── imagini/
│   ├── harta.jpg
│   ├── portret_autor.jpg
│   └── logo.png
└── media/
    ├── clip.mp4
    └── muzica.mp3
Exemple de cai relative:

Din index.html: src="imagini/harta.jpg" — cobori in imagini/.
Din pagini/capitol1.html: src="../imagini/harta.jpg" — .. inseamna "du-te un nivel sus", apoi cobori in imagini/.
Link catre alta pagina din acelasi director: href="capitol2.html".
Link catre index din subdirector: href="../index.html".

Conventii de denumire — reguli de baza:

Foloseste litere mici, fara spatii si fara diacritice in numele fisierelor web: portret_eminescu.jpg nu Portret Eminescu (1).jpg. Serverele Linux sunt case-sensitive: Foto.jpg si foto.jpg sunt fisiere diferite.

6

6. Recapitulare — elemente hipermedia pentru proiectul final

Sumar rapid al etichetelor si atributelor de hipermedia necesare pentru proiectul final cls. XII:
  • <img src alt width height> — imagine; alt este obligatoriu pentru accesibilitate.
  • <video src controls poster width> — clip video HTML5, fara plugin extern.
  • <audio src controls> — fisier audio HTML5.
  • <a href> — hiperlegatura; tipuri: relativa, absoluta, ancora (#), mailto.
  • target="_blank" pe <a> — deschide in tab nou (pentru linkuri externe).
  • <map name> + <area shape coords href alt> — harta de imagine cu zone clickabile.
  • usemap="#numeHarta" pe <img> — leaga imaginea de harta.
  • Cai relative — obligatorii in proiectele portabile; .. urca un nivel in ierarhia de directoare.
  • Structura de directoare: index.html la radacina + subdirectoare imagini/, pagini/, media/.
  • Conventii de denumire: litere mici, fara spatii, fara diacritice.
Mnemotehnica umanista pentru etichetele media:

Gandeste-te la o expozitie culturala: <img> = tabloul de pe perete (static, vizual); <video> = ecranul de proiectie (miscare, sunet, afis-poster); <audio> = sistemul de sonorizare din sala (asculti, nu vezi); <a> = usa dintre sali (te duce in alta parte); <map> + <area> = ghidul cu harta expozitiiei (fiecare zona a hartii te duce la o sala specifica).

Exercitii practice

Exercitiul 1 (Nivel minim) — Identifica etichetele corecte

Ai nevoie sa adaugi urmatoarele elemente pe pagina ta HTML despre "Orasele Europei". Identifica eticheta HTML corecta pentru fiecare: (a) O fotografie cu Colosseumul din Roma, cu descriere pentru screen reader-e. (b) Un clip video cu carnavalul din Venetia, cu buton de Play vizibil si imagine de afis inainte de redare. (c) Un link catre pagina Wikipedia despre Louvre, care se deschide in tab nou. (d) O ancora care sare la sectiunea "Bibliografie" din aceeasi pagina. Scrie codul HTML minim pentru fiecare caz.

Exercitiul 2 (Nivel standard) — Pagina hipermedia completa

Creaza un fisier HTML numit capitala_culturala.html despre un oras european ales de tine. Pagina trebuie sa contina: (1) Un titlu <h1> si un paragraf introductiv. (2) Cel putin doua imagini cu atributele src, alt, width corecte. (3) Un element <video> sau <audio> cu atributul controls. (4) Un meniu de navigatie cu trei linkuri: unul relativ (catre alta pagina a proiectului), unul absolut (catre o resursa externa), unul ancora (catre o sectiune din aceeasi pagina). (5) O sectiune <h2 id="bibliografie"> la final cu surse. Verifica in browser ca toate elementele se afiseaza corect.

Exercitiul 3 (Nivel performanta) — Proiect web cu harta interactiva

Realizeaza un mini-proiect web cu tema "Tururi culturale" format din cel putin 3 fisiere HTML. Pagina index.html contine o imagine a unei harti (Europa, Romania sau un oras) cu minimum 3 zone clickabile definite cu <map> si <area> — fiecare zona deschide pagina HTML corespunzatoare. Fiecare pagina secundara contine: (a) titlu si text descriptiv, (b) cel putin o imagine inserata corect, (c) un clip video sau audio relevant, (d) un link de intoarcere la index.html (cale relativa). Organizeaza fisierele in structura de directoare recomandata (imagini/, pagini/, media/). Verifica ca toate caile relative functioneaza corect prin deschiderea proiectului in browser.

Ce ai invatat astazi

  • Eticheta <img src alt width> insereaza imagini; alt este obligatoriu pentru accesibilitate
  • HTML5 ofera <video controls poster> si <audio controls> fara plugin-uri externe
  • Eticheta <a href> creeaza hiperlegaturi: relative, absolute, ancora (#id) si mailto
  • target="_blank" deschide linkul in tab nou — recomandat pentru resurse externe
  • <map name> + <area shape coords href> + usemap pe <img> = harta de imagine interactiva
  • Caile relative (imagini/foto.jpg, ../index.html) fac proiectul portabil pe orice server
  • Structura recomandata: index.html la radacina + subdirectoare imagini/, pagini/, media/
  • Conventie denumire fisiere: litere mici, fara spatii, fara diacritice

Urmatoarea lectie

Continua cu Proiect integrator — aplicatie web completa — vei combina toate competentele (HTML, hiperlegaturi, obiecte hipermedia, design general, publicare si testare) intr-un proiect final complet, relevant profilului Umanist cls. XII, conform programei OMECI 5099/2009.

Continua →