Referat: Elementele de conținut ale
paginilor web
1. Introducere
O pagină web reprezintă o unitate de bază a World Wide Web-ului și este creată folosind
limbaje precum HTML, CSS și JavaScript.
Conținutul unei pagini web este alcătuit din diferite elemente care contribuie la prezentarea
informației și la interacțiunea cu utilizatorul.
Printre cele mai importante elemente de conținut se numără: textul, listele, tabelele, imaginile,
animațiile, casetele de dialog și ferestrele.
2. Textul
Textul este elementul fundamental al unei pagini web. El transmite informația principală către
utilizator.
Prin intermediul limbajului HTML, textul este structurat cu ajutorul unor etichete:
• <p> – pentru paragrafe
• <h1> … <h6> – pentru titluri
• <b> sau <strong> – pentru text îngroșat
• <i> sau <em> – pentru text italic
• <u> – pentru text subliniat
• <br> – pentru trecerea pe un rând nou
De asemenea, textul poate fi stilizat cu CSS pentru a schimba culoarea, dimensiunea, fontul
sau alinierea.
3. Listele
Listele sunt folosite pentru a organiza informațiile într-o formă clară și ușor de citit.
Există trei tipuri principale de liste în HTML:
1. Liste neordonate – folosesc simboluri (bullets):
2. <ul>
3. <li>Element 1</li>
4. <li>Element 2</li>
5. </ul>
6. Liste ordonate – folosesc numere:
7. <ol>
8. <li>Primul element</li>
9. <li>Al doilea element</li>
10. </ol>
11. Liste de definiții – utile pentru glosare sau termeni explicați:
12. <dl>
13. <dt>HTML</dt>
14. <dd>Limbaj de marcare pentru crearea paginilor web</dd>
15. </dl>
4. Tabelele
Tabelele sunt folosite pentru a afișa date într-o formă organizată, similară unui tabel Excel.
Structura de bază a unui tabel HTML este:
<table border="1">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Vârstă</th>
</tr>
<tr>
<td>Popescu</td>
<td>Maria</td>
<td>20</td>
</tr>
</table
Elementele principale sunt:
• <table> – definește tabelul
• <tr> – definește un rând
• <th> – definește un antet de coloană
• <td> – definește o celulă
5. Imaginile
Imaginile fac paginile web mai atractive și ajută la transmiterea vizuală a mesajului.
Pentru a introduce o imagine se folosește eticheta:
<img src="[Link]" alt="Descriere imagine" width="300">
Atributele importante sunt:
• src – calea către fișierul imaginii
• alt – text alternativ (afișat dacă imaginea nu se poate încărca)
• width și height – dimensiuni
6. Animațiile
Animațiile adaugă dinamism și interactivitate paginilor web.
Ele pot fi create în mai multe moduri:
• Prin GIF-uri animate
• Cu ajutorul CSS (proprietățile animation sau transition)
• Prin JavaScript sau biblioteci precum GSAP
• Folosind formate video sau SVG animate
Exemplu simplu CSS:
@keyframes deplasare {
from { left: 0; }
to { left: 100px; }
}
div {
position: relative;
animation: deplasare 2s infinite alternate;
}
7. Casetele de dialog și ferestrele
Casetele de dialog (sau popup-uri) sunt folosite pentru a interacționa direct cu utilizatorul.
Acestea pot afișa mesaje, pot cere confirmări sau pot primi date de la utilizator.
Exemple JavaScript:
alert("Bun venit pe site!");
confirm("Doriți să continuați?");
prompt("Introduceți numele:");
Ferestrele (sau frames) pot fi folosite pentru a afișa mai multe documente într-o singură
pagină, deși sunt mai rar utilizate astăzi.
Exemplu:
<iframe src="[Link]" width="600" height="400"></iframe>
8. Concluzie
Elementele de conținut ale unei pagini web contribuie la structurarea, prezentarea și
interactivitatea informației.
Prin combinarea textului, listelor, tabelelor, imaginilor, animațiilor și elementelor interactive
precum casetele de dialog, se pot crea pagini web atractive, informative și ușor de utilizat.
Carpiuc Patricia