În articolul de astăzi, vom urmări pas cu pas un tutorial HTML! Vom insera liste, tabele și imagini, vom adăuga butoane și vom vorbi puțin despre div-uri, id-uri și clase. Hai să începem!

Listele în HTML
Dacă data trecută am vorbit puţin despre HTML, astăzi continuăm cu încă câteva elemente ce sunt de folos atunci când ne dorim să construim o pagină web simplă. Aşadar, începem cu inserarea unei liste. Avem 2 tag-uri pentru liste, anume <ul>…</ul>, pentru liste neordonate (unordered list) şi <ol>…</ol>, pentru liste ordonate (ordered list). În interiorul acestor tag-uri, pentru fiecare element care face parte din listă vom insera tag-ul <li>…</li>, anume list item.


Tabele
Acum, hai să discutăm şi despre tabele. Pentru a insera un tabel, vom folosi tag-ul <table>…</table>. Apoi, ne vom mai folosi de încă alte 3 tag-uri: <tr>…</tr>, pentru a insera un rând (table row), <th>…</th>, pentru a insera un header (table header) şi tag-ul <td>…</td>, pentru a insera o informaţie (table data).


Adăugarea de butoane folosind HTML

Pentru a insera un simplu buton, vom folosi tag-ul <buton>…</buton>, însă asta nu e de ajuns. Mai departe, vom folosi tag-ul <a>…</a> (anchor link). Tagu-ul acesta este independent de buton şi îl folosim pentru a trimite pe alte pagini. În interior vom insera link-ul, precedat, de notaţia href (hypertext reference).

Imagini

Nu în ultimul rând, vom învăţa să inserăm şi o poză. Pentru asta, ne folosim de tag-ul <img>, tag care nu se mai şi închide. În interiorul acestui tag vom scrie sursa pozei, sub forma src=folderul/numele pozei cu extensie. Ar trebuie să arate în felul următor:

Pentru că poza avea o dimensiune prea mare, am modificat-o folosindu-mă de atributul style. Dar despre asta vom vorbi mai mult în următoarele lecţii, când vom discuta despre CSS.
Div-uri, Id-uri şi Clase
Ultimul aspect din lecţia de astăzi este referitor la div-uri, id-uri şi clase. Ne putem gândi la un div ca la o secţiune a unei pagini web, o singură bucăţică din pagina noastră.
Folosim id-urile şi clasele pentru a identifica o componentă a paginii. Cu toate astea, există 2 diferenţe între id-uri şi clase. Orice componentă poate să aiba un singur id şi oricâte clase. De asemenea, regulile scrise prin selectarea unui id au prioritate mai mare în faţa celor scrise prin selectarea unei clase.


Şi… cam asta a fost şi cea de-a doua lecţie de HTML. Data viitoare vom învăţa cum să stilizăm pagina noastră web, folosind elemente de CSS. Cum vi se pare până acum? Poate fi puţin plictisitor dar trust me, va deveni din ce în ce mai interesant!
Acesta a fost articolul de astăzi! Dacă ți-a plăcut, nu uita să arunci un ochi peste blog-ul nostru pentru mai multe articole interesante, în special pe categoria Web-ul în 100 de pași! De asemenea, ne găsești și pe TikTok, și pe Instagram!