Tutorial HTML – Liste, Tabele, Butoane, Imagini

septembrie 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 Comentarii

Înaintează un Comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte Articole

Ecommerce – Web-ul în 100 de pași

Ecommerce – Web-ul în 100 de pași

Odată cu apariția Internetului, o mare parte din viața noastră de zi cu zi s-a mutat în online. Dacă înainte ne puteam face cumpărăturile doar fizic, acum găsim online absolut orice poftim, la orice oră din zi sau noapte. Și toate acestea datorită ecommerce-ului, care...

Job în programare. Merită să faci facultate?

Job în programare. Merită să faci facultate?

Cum să înveţi programare? Vrei să înveţi programare dar nu te-ai convins încă dacă chiar merită? Ei bine, dacă ştii programare, reprezinţi clar o resursă valoroasă pentru angajatori. Mai mult, poți chiar lucra independent. Pe măsură ce industria de programare creşte,...

Meme – Web-ul în 100 de pași

Meme – Web-ul în 100 de pași

 Data trecută am vorbit despre conținutul viral, iar dacă ai citit articolul, probabil îți amintești de faptul că, printre exemple de conținut viral se numărau și meme-urile. Ei bine, ele au devenit o parte așa importantă din viața noastră încât dedicăm un articol...