Index

Taguri - continuare

Cuvinte de retinut

Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare: <tag> 
Element - este un tag complet, avand un <tag> de deschidere si unul de inchidere </tag>.
Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.

Deocamdata trebuie doar sa retinem ca un tag este o comanda pe care browser-ul o interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica un element in HTML.

Dupa cum veti putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau doua.

<openingtag>Continut</closingtag>
<p>Exemplu un paragraf</p>

Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.

Mai jos sunt cateva exemple de taguri in HTML.

<body>Actioneaza ca o capsula asupra continutului.

<p>Paragraf</p>

<h2>Titlu (heading)</h2>

<b>Ingrosat (bold)</b>

<i>Inclinat (italic)</i>

</body>


Exceptii - Tag-uri care nu au nevoie de inchidere

Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.

Cel mai simplu exemplu este "linebreak"

<br/>

 

Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit. Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.

Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.

<!--
Acesta este un comentariu, el nu va apare in pagina cand o deschidem in browser.Este folosit de programatori pentru a adnota codul HTML.
-->

<img src="imagine.jpg" alt="test image" height="42" width="42"/> <!-- Acesta tag afiseaza imaginea imagine.jpg. -->

 

<br /> <!-- tagul "Line Break" care trece textul care il urmeaza pe linia urmatoare -->

<input type="text" size="12" /> <!-- Input Field -->

Vizualizare


-- Line Break --

Dupa cum puteti vedea browser-ul este capabil sa reproduca aceasta imagine atata timp cat furnizam locatia cu ajutorul atributului "src".

Atributul "alt" specifica un text alternativ pentru imagine (daca nu este gasita imaginea sau pagina se dechide intr-un browser text, atunci se afiseaza textul atributului alt, in cazul nostru "test image").

Atributele "height" respectiv "width" stabilesc inaltimea respectiv latimea imaginii in pixeli.

Tabelul

<table border ="1">
  <tr>
    <th>Luna</th>
    <th>Economii</th>
  </tr>
  <tr>
    <td>Ianuarie</td>
    <td>100€</td>
  </tr>
</table>

Tagul <table> defineste un tabel HTML.

Un tabel HTML consta din elementul <table> si unul sau mai multe elemente <tr><th>, and <td> elements.

Elementul <tr> defineste un rand de tabel, elementul <th> defineste un cap de tabel, iar elementul <td> defineste o celula a tabelului.
Atributul border = "1" definește un chenar de 1 pixel grosime în jurul tabelului.

TODO: Să se creeze un tabel cu următoarele câmpuri: denumire produs, imagine produs, descriere, pret. Tabelul va fi populat cu date la alegere și trebuie să conțină minim 5 înregistrări. Câmpul "imagine produs" trebuie să conțină un link spre un site, iar in locul textului link-ul va afișa o poză.