02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

Marcajul unui text

Marcajul unui text

Paragraful
Tag-ul <p> – un container universal pentru gruparea elementelor frazale mici, separarea lor unul de
celălalt și stilizarea ulterioară. În mod implicit, un paragraf este un element de tip bloc, ceea ce
înseamnă că începe pe o linie nouă și are indentări verticale care pot fi modificate în CSS.

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
asperiores non temporibus ut nisi minima?
</p>

De multe ori este necesar de completat un tag cu un text nonsens, menit să fie înlocuit cu un text
real care încă nu există. Pentru a face acest lucru, puteți utiliza un substituent special (un "pește" -
text fals).

UTIL

În documentul HTML din editorul VSCode puteți introduce codul lorem10 , apoi să tastați Tab .
Această acțiune va crea o matrice de text de 10 cuvinte. În loc de 10, puteți pune orice număr.

Titlurile
Grupul de tag-uri <h1>...<h6> – definește titlurile de text ale secțiunilor semantice de diferite
niveluri, care indică importanța secțiunii de conținut situată după ele. Acesta reprezintă un
instrument de structurare a conținutului textului.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 1/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

HTML CSS Result

Resources 1× 0.5× 0.25×

Tag-ul <h1> este folosit cel mai des o singură dată, ca titlu principal al paginii. Restul titlurilor pot fi
utilizate ori de câte ori doriți, dar să fie folosite în mod corect, respectând ierarhia.

UTIL

Motoarele de căutare acordă o atenție deosebită titlurilor, așa că utilizarea corectă a acestui
grup de tag-uri este extrem de importantă. Nu determinați nivelul titlului în funcție de
dimensiunea textului de pe machetă. Nu toate textele mari sunt titluri. Titlul reprezintă cuvântul
pus în fruntea secțiunii de conținut.

Listele
Listele vă permit să organizați colecțiile și să le prezentați într-un mod vizual și ușor de utilizat. O
listă reprezintă un container ai cărui copii pot fi doar elemente de listă, tag-urile <li> .

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 2/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

Tag-ul <ol> - creează o listă numerotată (ordonată), adică fiecare element din listă este numerotat.
Browserul numerotează automat elementele în mod succesiv, iar dacă unul sau mai multe elemente
dintr-o astfel de listă sunt șterse, numerele rămase vor fi automat recalculate. Numerotarea
articolelor poate fi controlată folosind atribute speciale de listă.

Acesta se folosește pentru a enumera acțiunile într-o anumită ordine, cum ar fi o rețetă.

<h1>Cum se prepară ceaiul</h1>

<p>Instrucțiuni pas cu pas pentru începători, doar repetă și vei reuși!</p>

<ol>
<li>Se fierbe apa</li>
<li>Se pune ceaiul într-o ceașcă</li>
<li>Se toarnă apă clocotită în ceașcă</li>
<li>Așteaptă 10 minute, după care poți bea</li>
</ol>

[Tag-ul <ul> ](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul- element) –

creează o listă (neordonată) de marcatori, fiecare element începând cu un caracter mic (marcator).
Folosind CSS, marcatorul poate fi eliminat sau înlocuit.

Acesta se folosește pentru a enumera un set într-o ordine arbitrară, cum ar fi o listă de stațiuni.

<h1>Cele mai fierbinți stațiuni</h1>

<p>Anul acesta, experții recomandă să vizitați următoarele locații.</p>

<ul>
<li>Tunisia</li>
<li>Turcia</li>
<li>Grecia</li>
<li>Egipt</li>
</ul>

ATENȚIE

Conform specificației, numai elementele de listă pot fi imbricate în tag-urile <ul> și <ol> –
tag-urile <li> . În același timp, alte tag-uri arbitrare pot fi imbricate în interiorul tag-urilor
<li> .

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 3/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

Listele imbricate

Realizarea unei liste cu mai multe niveluri este simplă – în interiorul elementului listă imbricăm o altă
listă. Acest mod este adesea folosit pentru a crea meniuri cu mai multe niveluri.

<ul>
<li>
Calculatoare și accesorii
<ul>
<li>Procesoare</li>
<li>Monitoare</li>
<li>Plăci video</li>
</ul>
</li>
<li>
Aparate electrocasnice
<ul>
<li>Frigidere</li>
<li>Televizoare</li>
<li>Mașini de spălat</li>
</ul>
</li>
<li>
Produse de uz casnic
<ul>
<li>Fotolii</li>
<li>Saltele</li>
<li>Șeminee electrice</li>
</ul>
</li>
</ul>

Link-ul
Tag-ul <a> – este conceput pentru a crea link-uri, texte, care odată accesate, ne duc spre altă
pagină, descărcam un fișier etc. Textul link-ului este afișat în browser cu o subliniere, culoarea
fontului este albastru, când treceți cu mouse-ul peste link, cursorul mouse-ului își schimbă aspectul.

Adresa link-ului este specificată în atributul obligatoriu href="adresa" . Adresa este URL, care poate
indica o pagină, un fișier sau orice altă resursă.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 4/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

<a href="https://google.com">Link către pagina principală Google</a>

Atributele target și rel

În mod implicit, link-ul se deschide în fila curentă a browserului. Atributul target="valoare"

determină în ce filă ar trebui să se deschidă documentul, către care duce link-ul. Dacă este setată la
_blank , pagina se deschide într-o filă nouă de browser.

Atributul rel completează atributul href cu informații despre relația dintre documentul curent și
cel asociat și este utilizat împreună cu target="_blank" .

<!-- Link către o resursă externă, care se deschide în fila curentă -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- Link către o resursă externă, care se deschide într-o filă nouă -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
Facebook
</a>

Atributul download

Dacă în link-urile href se indică calea către un fișier, browserul va încerca să-l deschidă în fereastra
curentă dacă poate gestiona fișiere de acest tip. Acest lucru se întâmplă de obicei cu imaginile și
fișierele de tip PDF.

Atributul download="nume fișier" anunță browserul, că resursa specificată nu trebuie deschisă, ci

ar trebui să fie descărcată atunci când utilizatorul face clic pe link. Valoarea atributului specifică
numele fișierului care urmează să fie descărcat, adică numele poate fi schimbat în timpul descărcării.
Atributul poate fi folosit fără valoare, caz în care se va folosi numele fișierului original.

<!-- Link pentru descărcarea unui fișier -->

<a href="/cale/către/cv.pdf" download>Descarcă CV</a>

Semnificații speciale href

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 5/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

Link-urile oferă posibilitatea nu numai de a duce la alte pagini și de a descărca fișiere, ci și de a

efectua apeluri telefonice, trimite mesaje sau efectua apeluri Skype.

<!-- Link către un număr de telefon -->

<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Link către o adresă de e-mail -->

<a href="mailto:example@mail.ru">example@mail.ru</a>

Ancore

Ancora este folosită pentru a crea navigare către pagina curentă. De exemplu, pentru a sări rapid la
o secțiune (ca în aceste materiale). Când faceți clic pe un astfel de link, browserul va derula pagina
până la ancoră fără a o reîncărca.

Pentru a crea o ancoră, trebuie să adăugați tag-ul la care doriți să derulați pagina, atributul id este
un identificator unic. Iar atributul href al link-ului este setat la o valoare care începe cu caracterul
# , după care este specificat identificatorul elementului.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 6/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

HTML CSS Result

Resources 1× 0.5× 0.25×

Butonul
Un element interactiv care este animat folosind JavaScript. De exemplu, un buton pentru a deschide
și închide o fereastră pop-up, a comuta un meniu mobil sau a trimite un formular. Atributul type
trebuie specificat în mod explicit. Valoarea sa implicită este submit , dar cea mai comună valoare
este button . Da, un buton de tip "buton", este o astfel de caracteristică.

<button type="button">Deschideți o fereastră modală</button>

UTIL

Este important să nu confundați un link și un buton. Dacă, atunci când faceți clic pe un element
de interfață, are loc o tranziție către o adresă, adică href , atunci acesta este un link. Dacă se
întâmplă ceva la clic fără reîncărcarea sau redirecționarea paginii, atunci la sigur este un buton.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 7/8
02/06/2023, 20:31 Marcajul unui text | Марафон HTML+CSS

Atributul lang
Dacă o pagină conține un text în mai multe limbi, pentru a o face mai accesibilă tehnologiilor de
asistență, puteți seta atributul lang nu numai pentru întregul document, ci și pentru tag-urile
individuale.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="description" content="Instrucțiune pentru plăcinte" />
<title>Plăcintele sunt delicioase!</title>
</head>
<body>
<p>Manual de utilizare</p>
<p lang="en">Operating instructions</p>
<p lang="fr">Manuel d'utilisation</p>
</body>
</html>

ATENȚIE

Aceasta este o opțiune, o recomandare, nu o cerință. Machetarea, ținând cont de suportul

tehnologiilor de asistență, se realizează numai la cererea clientului.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/text 8/8