Introducere

Dacă puteți, imaginați-vă perioada înainte de invenția Internetului. Site-urile nu existau, iar cărțile, tipărite pe hârtie și strâns legate, erau sursa principală de informații. A fost nevoie de un efort considerabil  și de lectură pentru a primi informațiile exacte pe care le căutați.

Astăzi puteți deschide un browser web, puteți accesa motorul de căutare la alegere și să căutați informația necesară. Aveți toate șansele că cineva a creat un site web cu informația pe care o căutați.

În cadrul acestui curs, vă voi arăta cum să vă construiți propriile site-uri web folosind cele mai dominante limbaje de computer – HTML și CSS.

Înainte de a începe călătoria noastră pentru a învăța cum să construim site-uri web cu HTML și CSS, este important să înțelegem diferențele dintre cele două limbaje, sintaxa fiecărui limbaj și unele terminologii comune.

Ce sunt HTML și CSS?

HTML , HyperText Markup Language, oferă structura și sensul conținutului prin definirea acelui conținut ca, de exemplu, titluri, paragrafe sau imagini. CSS , sau Cascading Style Sheets, este un limbaj de prezentare creat pentru a stiliza aspectul conținutului – folosind, de exemplu, fonturi sau culori.

Cele două limbaje – HTML și CSS – sunt independente unele de altele și ar trebui să rămână așa. CSS nu ar trebui să fie scris în interiorul unui document HTML și invers. De regulă, HTML va reprezenta întotdeauna conținut, iar CSS va reprezenta întotdeauna aspectul acelui conținut.

Cu această înțelegere a diferenței dintre HTML și CSS, haideți să ne scufundăm în HTML mai detaliat.

Înțelegerea termenilor HTML comuni

În timp ce începeți cu HTML, probabil că veți întâlni termeni noi – și adesea ciudați . Cu timpul, veți deveni tot mai familiari cu toți, dar cei trei termeni HTML  cu care ar trebui să începeți sunt elemente , etichete și atribute .

Elemente

Elementele sunt indicatoare care definesc structura și conținutul obiectelor dintr-o pagină. Unele dintre cele mai frecvent utilizate elemente includ mai multe niveluri de titluri ( identificate ca elemente de la <h1> până la <h6>) și alineate ( identificate ca elemente <p>); lista poate continua să includă elementele <a>, <div>, <span>, <strong>, și <em> , și multe altele.

Elementele sunt identificate prin semnele mai mare și mai mic  în jurul elementului.  Astfel, un element va arăta astfel:

<a>

Etichete

Utilizarea semnelor < și > formează ceea ce este cunoscut sub numele de etichetă . Etichetele se găsesc cel mai adesea în perechi de etichete de deschidere și închidere.

O etichetă de deschidere marchează începutul unui element. Constă din < urmat de numele unui element, apoi se termină cu semnul  > ; de exemplu <div>.

Conținutul care se încadrează între etichetele de deschidere și închidere este conținutul acelui element. O legătură ancoră, de exemplu, va avea o etichetă de deschidere <a> și o etichetă de închidere </a>. Ceea ce se încadrează între aceste două etichete va fi conținutul legăturii de ancoră.

Deci, etichetele de tip ancoră vor arăta cam așa:

<a>...</a>

Atribute

Atributele sunt proprietăți utilizate pentru a furniza informații suplimentare despre un element. Cele mai comune atribute includ atributul id, care identifică un element; atributul class, care clasifică un element; atributul src, care specifică o sursa conținutului încorporabil; și atributul href, care furnizează o referință de hyperlink la o resursă legată.

Atributele sunt definite în eticheta de deschidere, după numele unui element. În general, atributele includ un nume și o valoare. Formatul acestor atribute constă în numele atributului urmat de un semn egal și apoi o valoare a atributului citat. De exemplu, un element <a> care include un atribut href ar arăta astfel:

See the Pen Linkuri by Arina (@arinalachi) on CodePen.

Codul precedent va afișa textul „FET” pe pagina web și va duce utilizatorii la adresa https://fet.utm.md/ când faceți clic pe textul „FET”. Elementul de ancoră este declarat cu etichetele de deschidere <a> și închidere </a> care cuprind textul, iar atributul de referință și valoarea hyperlink-ului sunt declarate cu href="https://fet.utm.md" în eticheta de deschidere.

Acum că știți care sunt elementele, etichetele și atributele HTML, să aruncăm o privire la crearea primei noastre pagini web. Dacă vă pare ceva nou aici, nu vă faceți griji – o vom descifra pe măsură ce mergem mai departe.