Skip to main content

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.

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>.

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>.

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>

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ă.

<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​

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.

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.

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="ro">
  <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.