Lectia 2: Documente Hipermedia — Editor Web | Cls a XII-a Umanist (Competente Digitale)

1

1. Principii ale proiectarii documentelor hipermedia

Un document hipermedia este un document digital care integreaza mai multe tipuri de continut — text, imagini, audio, video, animatii — legate intre ele si catre alte resurse prin hiperlegaturi (hyperlink-uri). Paginile web sunt cel mai raspandit exemplu de documente hipermedia.

Hipertext — text cu legaturi clickabile catre alte sectiuni sau pagini.
Hipermedia — extinde hipertextul cu elemente multimedia (imagini, audio, video).
HTML (HyperText Markup Language) — limbajul standard folosit pentru a crea documente hipermedia pe web. Browserul citeste codul HTML si afiseaza pagina.
Browser web — aplicatia care interpreteaza codul HTML si reda documentul hipermedia (Chrome, Firefox, Edge, Safari).

Etapele procesului de dezvoltare a unei interfete web:

Planificarea — definesti scopul site-ului, publicul tinta, structura paginilor (hartii site).
Proiectarea — schitezi aspectul vizual (layout, culori, tipografie), organizezi informatia in sectiuni logice.
Implementarea — scriei codul HTML (structura) si CSS (stilul) intr-un editor web.
Testarea — deschizi pagina in browser, verifici ca toate legaturile functioneaza, ca imaginile se incarca, ca pagina arata corect pe diferite dispozitive.
Publicarea — incarci fisierele pe un server web (hosting) si pagina devine accesibila pe internet.

Principii de proiectare a unui document hipermedia:

Claritatea structurii — ierarhie logica a informatiei: titlu principal, subtitluri, paragrafe.
Coerenta vizuala — culori, fonturi si layout consistente pe toate paginile.
Navigabilitate — utilizatorul gaseste usor orice sectiune; hiperlegaturile sunt vizibile si descriptive.
Accesibilitate — textele alternative pentru imagini (alt), contrast suficient, structura semantica corecta.
Performanta — imagini optimizate, cod curat, timp de incarcare redus.

2

2. Editor web — formatare text la nivel de caracter si paragraf

In HTML, formatarea textului se realizeaza prin etichete (tags). Fiecare eticheta are un tag de deschidere <tag> si unul de inchidere </tag>, iar continutul sta intre ele. Formatarile se impart in doua nivele:

Nivel caracter (inline) — afecteaza un cuvant sau o fraza, fara a intrerupe fluxul textului.
Nivel paragraf / sectiune (block) — creeaza un bloc nou pe pagina, cu spatiu deasupra si dedesubt.

Etichete de formatare la nivel de caracter (inline):

<strong>text</strong> — text aldin (bold); indica importanta semantica.
<em>text</em> — text cursiv (italic); indica accent sau titluri de opere.
<u>text</u> — text subliniat; folosit rar (risc de confuzie cu hyperlink).
<span style="color:red">text</span> — aplica stil CSS direct pe o portiune de text (culoare, dimensiune font).
<code>text</code> — afiseaza text in font monospat; folosit pentru cod sursa.

Etichete de formatare la nivel de paragraf si sectiune (block):

<h1> ... <h6> — titluri ierarhice; h1 = titlu principal, h2 = subtitlu, etc.
<p>text</p> — paragraf de text; browserul adauga spatiu deasupra si dedesubt.
<div>...</div> — sectiune generica; folosita pentru a grupa elemente si a aplica stiluri CSS.
<section>, <article>, <header>, <footer> — etichete semantice HTML5; descriu rolul sectiunii in pagina.
<br> — salt la rand nou (fara paragraf nou); eticheta fara inchidere.
<hr> — linie orizontala separatoare.

Exemplu complet — structura de baza HTML:

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>Referat de Literatura</title>
</head>
<body>
  <h1>Enigma Otiliei — analiza romanului</h1>
  <p>Roman publicat in <strong>1938</strong> de <em>George Calinescu</em>.</p>
  <h2>Tema</h2>
  <p>Conditia omului intr-o societate burgheza in descompunere.</p>
</body>
</html>

3

3. Hiperlegaturi, liste si tabele in HTML

Hiperlegaturile, listele si tabelele sunt elementele structurale fundamentale ale unui document hipermedia. Ele organizeaza informatia si permit navigarea intre pagini.

Hiperlegaturi (hyperlink-uri) — eticheta <a>:

Sintaxa de baza: <a href="URL">text afisat</a>
Link extern: <a href="https://www.edu.ro">Ministerul Educatiei</a> — deschide alt site.
Link intern: <a href="pagina2.html">Pagina 2</a> — deschide alta pagina din acelasi site.
Ancora (anchor): <a href="#sectiunea1">Salt la sectiunea 1</a> — sare la un element cu id="sectiunea1" pe aceeasi pagina.
Deschidere in tab nou: atribut target="_blank" — <a href="https://..." target="_blank">...</a>
Link email: <a href="mailto:contact@scoala.ro">Trimite email</a>

Liste formatate:

Lista neordonata (cu puncte): <ul><li>element</li></ul>
Lista ordonata (cu numere): <ol><li>element</li></ol>
Lista de definitii: <dl><dt>termen</dt><dd>definitie</dd></dl>
Listele pot fi imbricate (o lista in interiorul alteia) pentru a crea ierarhii.

Tabele HTML:

<table border="1">
  <tr>                          <!-- rand (table row) -->
    <th>Autor</th>              <!-- celula antet (table header) -->
    <th>Opera</th>
    <th>An</th>
  </tr>
  <tr>
    <td>Mihai Eminescu</td>    <!-- celula date (table data) -->
    <td>Luceafarul</td>
    <td>1883</td>
  </tr>
</table>

Atribute utile: colspan="2" — celula se intinde pe 2 coloane; rowspan="2" — celula se intinde pe 2 randuri.

4

4. Imagini, audio si video in documente hipermedia

Documentele hipermedia pot incorpora mai multe tipuri de media: imagini statice, secvente audio si video. HTML5 a adus etichete native pentru audio si video, eliminand dependenta de plugin-uri externe (Flash etc.).

Inserarea imaginilor — eticheta <img>:

Sintaxa: <img src="cale/fisier.jpg" alt="descriere" width="300" height="200">
src — calea catre fisier: poate fi relativa (imagini/foto.jpg) sau absoluta (URL complet).
alt — text alternativ: obligatoriu pentru accesibilitate; afisat daca imaginea nu se incarca.
width / height — dimensiunile in pixeli; daca specifici doar unul, celalalt se calculeaza proportional.
Formate suportate: JPEG (fotografii), PNG (transparenta), GIF (animatii simple), WebP (compresie moderna), SVG (vectorial).

Maparea imaginilor (Image Maps):

O imagine poate contine zone clickabile diferite, fiecare cu un hyperlink propriu. Se defineste cu <map> si <area>:

<img src="harta.jpg" usemap="#harta-ro">
<map name="harta-ro">
  <area shape="rect" coords="10,20,100,80" href="moldova.html" alt="Moldova">
  <area shape="circle" coords="200,150,50" href="muntenia.html" alt="Muntenia">
</map>

Audio si video in HTML5:

<!-- Audio -->
<audio controls>
  <source src="melodie.mp3" type="audio/mpeg">
  Browserul tau nu suporta redarea audio.
</audio>

<!-- Video -->
<video controls width="640" height="360">
  <source src="prezentare.mp4" type="video/mp4">
  Browserul tau nu suporta redarea video.
</video>

Atributul controls afiseaza butoanele Play/Pause/Volum. Alte atribute: autoplay, loop, muted.

Exemplu cu specific umanist — portofoliu artist:

Un site de portofoliu pentru un artist plastic poate include: <img> pentru reproduceri de tablouri cu atribut alt descriptiv, <audio> pentru un interviu sau o prezentare audio, <video> pentru un clip de vernisaj — toate cu legaturi <a> catre pagini de detaliu per opera.

5

5. Proiectarea designului si cadre (frames)

Proiectarea designului unui document hipermedia implica decizii despre layout (dispunerea elementelor), tipografie, schema de culori si navigatie. CSS (Cascading Style Sheets) este limbajul care controleaza aspectul vizual al paginilor HTML.

Principii de design al documentelor hipermedia:

Ierarhia vizuala — elementele importante (titlu, CTA) trebuie sa atraga primul privirea prin dimensiune, culoare sau pozitie.
Consistenta — aceeasi schema de culori, aceleasi fonturi si acelasi stil de navigatie pe toate paginile.
Spatiu alb (whitespace) — spatiul gol intre elemente nu este pierdut; imbunatateste lizibilitatea si aspectul profesional.
Responsive design — pagina se adapteaza la dimensiunea ecranului (desktop, tableta, telefon).

CSS — stilizarea paginii HTML:

<!-- In sectiunea <head> -->
<style>
  body {
    font-family: Georgia, serif;
    font-size: 16px;
    color: #222222;
    background-color: #f9f9f9;
    margin: 0 auto;
    max-width: 800px;
  }
  h1 {
    color: #003366;
    text-align: center;
  }
  p {
    line-height: 1.6;
    text-align: justify;
  }
</style>

Cadre (Frames) si <iframe>:

Cadrele permit afisarea mai multor pagini HTML simultan in acelasi browser. Tehnologia clasica <frameset> este depreciata in HTML5. Inlocuitorul modern este <iframe> (inline frame) — un cadru incorporat in interiorul unei pagini:

<iframe src="meniu.html" width="200" height="400" title="Meniu navigare"></iframe>

Utilizari comune: incorporarea hartilor Google Maps, videoclipuri YouTube, sau sectiuni de navigatie separate.

Organizarea informatiei — tehnici de tehnoredactare computerizata:

Structura ierarhica: pagina principala (index.html) → pagini de sectiune → pagini de detaliu.
Meniu de navigatie: lista de hyperlink-uri catre sectiunile principale, prezenta pe toate paginile.
Fil de navigare (breadcrumb): „Acasa > Sectiunea > Pagina curenta" — indica pozitia utilizatorului in site.
Footer (subsol de pagina): informatii de contact, drepturi de autor, link-uri secundare.

6

6. Publicarea si testarea paginii web

Dupa scrierea si designul paginii, urmeaza testarea si publicarea. Testarea verifica functionarea corecta a tuturor elementelor; publicarea face pagina accesibila pe internet prin incarcarea pe un server web (hosting).

Testarea paginii web — checklist:

Testare locala: deschizi fisierul HTML in browser (File → Open sau dublu-click) si verifici aspectul vizual.
Legaturi: verifici ca toate hyperlink-urile functioneaza — link-urile interne duc la paginile corecte, link-urile externe se deschid.
Imagini si media: verifici ca toate imaginile, fisierele audio si video se incarca si se redau corect.
Compatibilitate browser: testezi in cel putin 2 browsere diferite (ex: Chrome si Firefox) — unele elemente pot aparea diferit.
Responsive: redimensionezi fereastra browserului pentru a simula un ecran de telefon si verifici ca pagina ramane lizibila.
Validare HTML: folosesti validatorul oficial W3C (validator.w3.org) pentru a detecta erori de cod.

Publicarea pe un server web (hosting):

Alegi un serviciu de hosting: gratuit (GitHub Pages, Netlify, Vercel) sau platit (hostinger, GoDaddy etc.).
Incarci fisierele: prin interfata web (drag & drop), prin FTP (FileZilla) sau prin Git (pentru servicii ca GitHub Pages).
Structura de fisiere: fisierul principal trebuie sa se numeasca index.html; imaginile si celelalte resurse se organizeaza in subfoldere (imagini/, css/, js/).
Testare post-publicare: dupa incarcare, accesezi URL-ul public si reverifici ca totul functioneaza si la distanta (nu doar local).

Exemplu cu specific umanist — proiect final:

Un proiect tipic la cls. XII umanist: site de prezentare a unui curent literar (Romantismul romanesc). Structura: index.html (pagina principala cu definitie si autori), eminescu.html (pagina dedicata), alecsandri.html etc. Meniu de navigatie comun pe toate paginile. Imagini cu portrete si opere. Un tabel cu autorii si operele reprezentative. Publicat pe GitHub Pages. Testat in Chrome si Firefox.

7

7. Recapitulare — fluxul complet de creare a unui site web

Urmand acesti pasi in ordine, obtii un document hipermedia complet, functional si publicat:

Pasul 1 — Planificarea

Definesti scopul si publicul site-ului. Schitezi pe hartie structura paginilor (harta site). Colectezi continuturile: texte, imagini, video-uri.

Pasul 2 — Structura HTML de baza

Creezi index.html cu: <!DOCTYPE html>, <html>, <head> (charset, title), <body>. Adaugi titluri (<h1>-<h3>), paragrafe (<p>), structura semantica (<header>, <main>, <footer>).

Pasul 3 — Continut si legaturi

Inserezi listele (<ul>/<ol>), tabelele (<table>/<tr>/<td>), imaginile (<img src="..." alt="...">) si hiperlegaturile (<a href="...">) catre paginile secundare si resurse externe.

Pasul 4 — Stilizare CSS

Adaugi stiluri in <style> (in <head>) sau intr-un fisier separat stil.css (legat cu <link rel="stylesheet" href="stil.css">). Setezi fonturi, culori, spatieri, layout-ul paginii.

Pasul 5 — Testare locala

Deschizi index.html in browser. Verifici: aspectul vizual, toate legaturile, incarcarea imaginilor si media. Repari erorile gasite. Validezi cu W3C Validator.

Pasul 6 — Publicare si verificare finala

Incarci fisierele pe hosting (GitHub Pages, Netlify sau FTP). Accesezi URL-ul public. Reverifici ca totul functioneaza online. Prezinti link-ul ca produs final.

Documente hipermedia — proiectare si editor web

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

1. Principii ale proiectarii documentelor hipermedia

2. Editor web — formatare text la nivel de caracter si paragraf

3. Hiperlegaturi, liste si tabele in HTML

4. Imagini, audio si video in documente hipermedia

5. Proiectarea designului si cadre (frames)

6. Publicarea si testarea paginii web

7. Recapitulare — fluxul complet de creare a unui site web

Exercitii practice

Exercitiul 1 (Nivel minim) — Prima pagina HTML

Exercitiul 2 (Nivel standard) — Pagina cu toate elementele

Exercitiul 3 (Nivel performanta) — Mini-site cu specific umanist

Ce ai invatat astazi

Urmatoarea lectie