Elemente de conținut în dezvoltarea web cu HTML

Button

Un buton în HTML este similar cu butonul de transmitere a unui formular, dar, spre deosebire de alte stiluri de elemente, poate include text sau o imagine. Formatarea sa implicită îi conferă un aspect de buton teșit.

<button type="button">Click Here!</button>
<button type="button"><img src="Images/click-here.png"/></button>

Click Here! 

Legendă

Eticheta de legendă este pentru tabele și vă permite să definiți o etichetă care să fie tipărită lângă tabel pentru referință. Puteți avea doar o subtitrare pentru fiecare tabel și trebuie să fie după eticheta tabelului de deschidere.

<table>
<caption>Acesta este tabelul nostre</caption>
<tr>
<td>First Col</td><td>Second Col</td><td>Third Col</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>

 

Acesta este tabelul nostru

First Col	Second Col	Third Col
1	2	3
4	5	6

Cite

Deși citarea a fost inclusă în versiunile anterioare de HTML, specificația actuală HTML5 intenționează ca aceasta să fie utilizată pentru a defini titlul unei lucrări care este inclusă în document. Versiunile anterioare limitau această etichetă la citările adecvate ale publicațiilor scrise.

<img src="Images/Proiectarea.jpg"
<p><cite>Proiectarea web</cite> N. Sfetcu 2014.</p>




Proiectarea web N. Sfetcu 2014.

Entități

În exemplele din secțiunea Antet, Subsol, am plasat un simbol de drepturi de autor pe ecran folosind „©” care a spus browserului ce simbol dorim să folosim. Acesta este un simbol sau o entitate rezervată în HTML. Putem apela entități folosind &[nume entitate aici]; sau &[numărul entității aici];. De exemplu,   înseamnă spațiu fără rupere sau doar un spațiu standard. Aceasta este o modalitate de a introduce spații suplimentare în rezultatul nostru. Deoarece browserul ar omite toate spațiile suplimentare din codul nostru, putem adăuga entități de spațiu care nu se rup pentru a-i spune browserului că vrem să fie afișat pe ecran.

Tabelul de mai jos include exemple de alte simboluri populare (sunt multe altele). Rețineți că, atunci când utilizați nume de entități, acestea sunt sensibile la majuscule și minuscule.

Tabelul 1 Entități HTML

Rezultat	Descriere	Nume	Număr
	spațiu neîntrerupt	 	 
<	mai mic decât	&lt;	&#60;
>	mai mare decât	&gt;	&#62;
&	ampersand	&amp;	&#38;
©	copyright	&copy;	&#169;
®	marcă înregistrată	&reg;	&#174;
™	marcă	&trade;	&#8482;

 

Figure

Eticheta figure ne permite să etichetăm o imagine, un portret sau o altă artă vizuală inclusă într-o etichetă de imagine pentru a identifica conținutul ca atare.

<figure><img src="imagineanoastra.jpg"/></figure>

Figcaption

Figcaption, ca și legenda, ne permite să adăugăm o legendă la imaginea noastră așa cum am face-o pentru un tabel.

<figure>
<img src="imagineanoastra.jpg"/>
<figcaption>Figura 1</figcaption>
</figure>

Mark

Majoritatea etichetelor de modificare a textului au fost omise în acest text, deoarece pot fi obținute cu ușurință prin CSS (și pentru a menține separarea sarcinilor). Cu toate acestea, eticheta de marcare merită văzută ca o modalitate ușoară de a obține un efect de evidențiere. Poate fi util să inserați această etichetă atunci când generați rezultate pentru lucruri precum rezultatele căutării.

<p>Aceasta este o propoziție cu un text <mark>evidențiat</mark>.</p>

Aceasta este o propoziție cu un text evidențiat.

Meter

Eticheta meter ne permite să generăm o imagine vizuală pe baza valorilor furnizate. Aceasta este destinată valorilor care sunt deja cunoscute sau încărcate pe ecran, cum ar fi o diagramă sau un grafic. Există, de asemenea, o etichetă progress pentru monitorizarea acțiunilor fișierelor în curs, cum ar fi o descărcare.

<meter value="3" min="0" max="15">15">One Fifth</meter><br>
<meter value="0.65">65%</meter>

Nav

Dacă avem un grup de linkuri pe care le dorim într-un singur loc (adică un meniu sau o listă de referințe), le putem include în etichetele de navigare, astfel încât browserele să le recunoască ca un grup de link-uri. Acest lucru este util în special pentru software-ul de citire a ecranului, deoarece etichetele oferă un indicator pentru ce sunt linkurile.

<a href="//">Home</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/js/jquery/">jQuery</a>
</nav>

Home | CSS | JavaScript | jQuery

Progress

Eticheta progress a fost creată pentru a ajuta la afișarea stării unei încărcări sau a unei descărcări. Este nevoie de două atribute, inclusiv valoarea actuală (pe care am modifica-o folosind JavaScript) și valoarea totală sau cea mai mare a ceea ce monitorizăm. Dacă arătăm procentul unei încărcări pe care le-am putea folosi:

<progress value=”46″ max=”100″></progress>

Sau, dacă vrem să arătăm suma reală mutată sau mutăm un număr de articole, putem folosi numărul completat și numărul total în loc de un procent, iar imaginea ne va calcula:

<progress value=”345″ max=”850″></progress>

Time

Un alt element nou pentru HTML5 este time. Eticheta time este flexibilă prin faptul că poate specifica o valoare formatată pe 24 de ore, o dată completă a calendarului gregorian sau atât o dată, cât și o oră. Utilizarea acestei etichete în sine nu va schimba nici un stil vizual al paginii, dar permite aplicațiilor de pe dispozitivele noastre să găsească informațiile pentru a accepta funcții precum crearea de intrări în calendar sau de mementouri pe baza informațiilor.

<p>Întâlnirea zilnică va avea loc la <time>10:00</time>  în fiecare dimineață.</p> <p>Următoarea întâlnire lunară va avea loc pe <time datetime="2013-08-01">întâi august</time>.</p>

Întâlnirea zilnică va avea loc la 10:00 în fiecare dimineață.

Următoarea întâlnire lunară va avea loc pe întâi august.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Articol publicat sub licență CC BY-NC-SA 3.0