Tutorial HTML – Liste, Tabele, Butoane, Imagini

September 21, 2021

Liste

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

Butoane

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!

0 Comentarii

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Alte Articole

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

Data trecută am stabilit că următorul tutorial va fi despre stilizarea unui buton, ceva nu foarte complicat. Vom începe prin crearea unui document cu extensia .html, în cazul meu, l-am denumit index.html, iar apoi facem şi un document cu extensia .css, spre exemplu...

Tutorial HTML – Introducere

Tutorial HTML – Introducere

Dacă mi-ar fi spus cineva acum un an că voi ajunge să învăţ design web, HTML şi chiar programare, i-aş fi râs în faţă şi i-aş fi spus că e nebun. Dar aşa e: în urmă cu vreo jumătate de an m-am uitat la primul meu tutorial de design web şi am făcut chiar şi primul meu...

Tutorial HTML – Introducere

Tutorial HTML – Introducere

Dacă mi-ar fi spus cineva acum un an că voi ajunge să învăţ design web, HTML şi chiar programare, i-aş fi râs în faţă şi i-aş fi spus că e nebun. Dar aşa e: în urmă cu vreo jumătate de an m-am uitat la primul meu tutorial de design web şi am făcut chiar şi primul meu...