Articole

În matematică, cele 4 simboluri cunoscute drept +, -, X și : sunt importante, fără de care nu se poate rezolva nicio ecuație. Dar În C++, acestea sunt reprezentate de simboluri diferite, ca mai jos.

“ + “ -> +
“ – “ -> -
“ x “ sau “ . “ -> *
“ : “ -> /

De asemenea, % are alt sens în acest limbaj față de matematică. Prin acesta putem afla restul Înpărțirii a două numere.

int a=10,b=3;
cout<<a%b; /// Restul împărțirii numărului 10 la 3 este 1, deci aceasta va fi valoarea afișată

Semnul “=” este folosit pentru a egala două numere sau variabile. Semnele “>” și “<”, precum și “<=”(mai mic sau egal) sau “>=”(mai mare sau egal) pot fi folosite pentru forma inegalități.

Cănd folosim un if pentru a întreba dacă două relați sunt egale, folosim “==” ca în exemplu:

int a=4,b=3;
if(a==b) cout<<a;
else cout<<b;

/// A nu este egal cu B, deci afișăm B

Dar cănd vrem să întrebăm dacă două relații sunt diferite, folosim “!=”

int a=8,b=7;
if(a!=b) cout<<a;
else cout<<b;

/// A este diferit de B, deci afișăm A

Atenție!! De fiecare dată când încărcați o soluție, aveți grijă ca toate operațiile să fie posibile! Greșeli precum a/0 sau a%0 pot duce la erori precum Fatal Signal 8! Testați înainte de a încărca soluția pe site cu un compiler de tipul Code::Blocks pentru a fi siguri că programul funcționează cu succes.

În anumite situații trebuie să precizăm culori. Marcajele și atributele HTML care lucrează cu culori au devenit in mare măsură învechite și au fost înlocuite cu proprietăți CSS.

Așa cum știm, în calculator culorile sunt formate prin “amestecul” a trei culori de bază: red, green și blue. “Cantitatea” culorilor de bază variază între 0 și 255.

Culori în HTML

În HTML, culoarea poate fi precizată prin denumirea ei, (de exemplu red) sau prin codul ei hexazecimal (de exemplu #ff0000).

Codul hexazecimal este un șir de șase cifre hexazecimale (0, 1, .., 9, A, B, …, F), interpretate astfel:

• primele două cifre reprezintă cantitatea de red: 00 reprezintă 0, adică minim, iar FF reprezintă 255, adică maxim;
• următoarele două cifre reprezintă cantitatea de green
• ultimele două cifre reprezintă cantitatea de albastru

Sunt 16 culori cu denumire în HTML, deși este posibil ca browser-ele să recunoască mai multe denumiri de culoare:

Culori în CSS

Cele mei multe atribute HTML care desemnează culori sunt învechite. Ele au fot înlocuite cu proprietăți CSS. Există mai multe proprietăți CSS care au ca valoare o culoare, de exemplu:

• color – culoarea textului dintr-o casetă
• background-color – culoarea fundalului unei casete
• border-color – culoarea chenarului unei casete

Culorile pot fi precizate în CSS astfel:

• prin nume. Toate denumirile de culoare din HTML sunt disponibile în CSS. În plus, există multe alte denumire, disponibile aici: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
• prin codul hexazecimal #RRGGBB, cunoscut deja, sau prin codul hexazecimal extins #RRGGBBAA, unde AA reprezintă gradul de opacitate al culorii – 00 înseamnă complet transparent, iar FF înseamnă complet opac

<div style="background: url('wall-red.png'); padding:20px;">
	<div style="background-color: #800080CC; color: teal; font-size: 2em; padding:20px; text-align: center;">
    	Culori
    </div>
</div>

• prin codul hexazecimal scurt:
  • #RGB este identic cu #RRGGBB
  • #RGBA este identic cu #RRGGBBAA
• folosind notația funcțională rgb(r,g,b), unde r, g și b sunt numere (naturale scrise în baza 10 cu valori între 0 și 255) sau procente (100%) corespunde cu 255
• folosind notația funcțională rgb(r,g,b,a), unde r, g și b sunt numere (naturale scrise în baza 10 cu valori între 0 și 255) sau procente (100%) corespunde cu 255. a este un număr intre 0 (complet transparent) și 1 (complet opac) sau un procent (100% corespunde cu 1);
• folosind notația funcțională hsl(h,s,l) sau hsl(h,s,l,a) – reprezentarea colorilor pe modelul HSL (hue, saturation, value). Detalii: https://en.wikipedia.org/wiki/HSL_and_HSV.

Anumite caratere nu pot fi inserate într-un document HTML, deoarece sunt folosite în marcarea conținutului. De exemplu caracterele < și >. Alte caractere nu există pe tastatură și este dificil să le scriem! Pentru asemenea situații s-a implementat conceptul de entitate HTML – o construcție care desemnează un caracter care nu poate fi inserat în alt mod, sau este dificil să facem acest lucru.

O entitate HTML este o bucată de text (un string) care începe cu & și se termină cu ;. De exemplu, pentru a insera caracterele < și > putem folosi entitățile < (lower than), respectiv > (greater than). O altă modalitate de a insera o entitate HTML este să-i precizăm codul numeric. Astfel, caracterul < poate fi inserat ca <.

O altă entitate utilă este   – non breaking space. Scopul ei este să înlocuiască caracterul spațiu în situațiile în care dorim să ne asigurăm că nu separăm cuvintele pe rânduri diferite. O altă utilizare frecventă a acestei entități este să inserăm un spațiu mai mare între cuvinte – știut fiind că spațiile consecutive sunt ignorate de către browser.

<p>
	In HTML, pentru a insera un paragraf folosim eticheta &lt;p&gt;.
</p>

O listă completă a entităților HTML este disponibilă aici.

Caut o solutie pentru aceasta problema.

Subprogramul cifre_impare primeşte prin parametrul n un număr natural având cel mult 9 cifre şi returnează valoarea 1 dacă numărul n are toate cifrele impare şi 0 în caz contrar.
a) Scrieţi numai antetul subprogramului cifre_impare.
b) Se dau de la tastatură n numere naturale. Scrieţi programul C care, folosind apeluri utile ale subprogramului cifre_impare, afişează pe ecran acele numere dintre cele citite care sunt mai mari decât 100 şi au toate cifrele impare. Numerele afişate sunt separate prin câte un spaţiu.

Exemplu: dacă s-au citit numerele: 10
1 333 709 23 258
34 713 2678
11573 778
se vor afişa pe ecran: 333 713 11573.

De la simplu la complex, orice site web este un ansamblu de tehnologii care interacționează. Navigarea pe web are două părți

• zona client, constând în pagina web, vizibilă în browser
• zona server, invizibilă vizitatorului

Acestor două părți le corespunde două componente diferite, din perspectiva programatorului:

• programarea pe client – folosind:
  • HTML – pentru crearea conțintului paginilor
  • CSS – pentru stabilirea aspectului paginilor
  • Javascript – pentru interactivitate și nu numai
• programarea pe server, în PHP, Java, ASP.NET, Node JS etc.

Programarea la nivel de client este posibilă fără utilizarea unui server web, deși nu este recomandat. Programarea la nivel de server necesită existența unui server, eventual unul local. În cazul programării în PHP, se poate folosi serverul web APACHE. ÎN Windows o soluție facilă este instalarea pachetului XAMPP, care integrează serverul de web Apache, server de baze de date MySQL (sau Maria DB), limbajul de programare PHP.

Programare la nivel de client

• Limbajul HTML
  • Introducere
  • Lucrul cu text
  • Stiluri CSS
  • Liste
  • Tabele
  • Legături și imagini
  • Entități HTML
  • Culori
  • Video și audio
  • Elementul HEAD
  • Formulare

WWW (World Wide Web) a fost proiectat ca un set de resurse globale (pagini web, imagini, alte fișiere, etc.), stocate pe diverse servere și conectate la Internet. Fiecare resursă are o adresă unică la nivel global, numită adresă URL (Uniform Resource Locator), iar utilizatorul poate accesa aceste resurse prin intermediul browser-ului și poate naviga între ele foarte ușor folosind mouse-ul sau tastatura.

Legăturile sunt elemente dintr-o pagină web care fac posibilă navigarea între resursele internet. Legătura este o proprietate a unui bloc de text și/sau a unei imagine de a accepta comenzi prin intermediul mouse-ului sau a tastaturii. Aceste comenzi conduc de regulă la navigarea la o altă resursă web.

Elementul a

Pentru a crea o legătură, folosim elementul ancoră <a>...</a>. Acesta trebuie să aibă atributul href, care conține adresa URL a resursei asociate cu legătura, ea fiind absolută sau relativă și poate fi adresa oricărul tip de fișier: document html, imagine, etc. Între etichetele elementului <a> se scrie un text (sau un element imagine) care va fi afișat în pagina web și care va accepta comenzi de la mouse sau de la tastatură.

<a href="https://www.pbinfo.ro">pbinfo.ro</a>

Ancorele pot avea atributul target, prin care se precizează fereastra în care se va deschide resursa precizată prin href. Valoarea implicită este _self, reprezentând fereastra curentă (tab-ul curent). O altă valoare frecvent utilizată este _blank, cu înțelesul de fereatră nouă (tab nou). Mai multe detalii aici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.

<a href="https://www.pbinfo.ro" target="_blank">pbinfo.ro</a>

Adrese relative și adrese absolute

O adresă absolută are următoarea formă:

protocol://nume.domeniu/cale/de/fisier.html

unde protocol este de regulă http sau https, nume.domeniu este numele de domeniu al site-ului în care este localizată resursa, /cale/de este calea spre directorul care conține fișierul resursă, iar fisier.html este fișierul propriu-zis. În acest fel fiecare resursă disponibilă în spațiul WWW este identificabilă.

Un site web reprezintă o colecție de fișiere localizate pe un server, într-un folder. Aceste fișiere pot fi documente html, imagini, fișiere de altă natură. De cele mai multe ori, crearea site-ului începe pe propriul calculator, fără a avea la dispoziție un server, deci fără ca fișierele din site să aibă o adresă URL validă. În acest context, în adresa URL lipsește partea protocol://nume.domeniu/, obținându-se o adresă relativă. Ea este relativă la structura de directoare care fac parte din folder-ul care conține site-ul și la documentul html din care face parte.

Considerăm următoarea structură de foldere și fișiere, în care site, pagini și img sunt foldere:

site
--pagini
----pagina1.html
----pagina2.html
--img
----poza1.jpg
----poza2.jpg
--index.html

În fișierul index.html, următoarele adrese sunt corecte:

<a href="pagini/pagina1.html">Pagina 1</a>
<a href="pagini/pagina2.html">Pagina 2</a>
<a href="img/poza1.jpg">Poza 1</a>
<a href="img/poza2.jpg">Poza 2</a>

Următoarele sunt greșite:

<a href="pagina1.html">Pagina 1</a>
<a href="poza1.jpg">Poza 1</a>
<a href="img/poza2.jpg">Poza 2</a>

În fișierul pagini/pagina1.html, următoarele adrese sunt corecte:

<a href="pagina2.html">Pagina 2</a>
<a href="../index.html">Index</a>
<a href="../img/poza1.jpg">Poza 1</a>

Ancore interne și externe

Legăturile de mai sus foloseau ancore externe – resursa era în exteriorul documentului html curent. Putem defini și ancore interne, cu care putem naviga în interiorul paginii web curente.

Mecanismul este următorul:

• se stabilește destinația legăturii, folosind atributul id:

<a id="destinatie"></a>

• se definește elementul <a>:

<a href="#destinatie">Click</a>

Formatarea legăturilor cu CSS

<style>
	#nav{
    	background-color: #ffff00;
        list-style-type: none;
        padding:0;
    }
    #nav li{display: inline;}
    #nav li a{padding:5px; line-height: 20pt; text-decoration: none; background-color: #ff00ff; color: white; float:left; border-right: solid 1px white;}
    #nav li a:hover{background-color: black; text-deoration: underline;}
</style>
<ul id="nav">
	<li>
    	<a href="#">Link 1</a>
    </li>
    <li>
    	<a href="#">Link 2</a>
    </li>
    <li>
    	<a href="#">Link 3</a>
    </li>
    <li>
    	<a href="#">Link 4</a>
    </li>
</ul>

Inserarea imaginilor

Imaginile îmbunătățesc semnificativ aspectul paginilor web. Pentru a insera o imagini, vom folosi elementul <img>.

<img src="santas.gif">

Adresa propriu-zisă a fișierului imagine se stabilește prin atributul src și este o adresă URL, absolută sau relativă. Acest atribut este practic obligatoriu. Un atribut recomandat este alt – alternative text, care conține un text care va fi afișat în cazul in care nu se poate afișa imaginea:

<img src="santas.gif" alt="Mos Craciun">

Alte atribute utile sunt height și width, care precizează înălțimea, respectiv lățimea, exprimate în pixeli, cu care se va afișa imaginea.

<img src="santas.gif" alt="Mos Craciun" width="100" height="200">

Mai multe informații despre elementul <img> sunt disponibile aici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img.

Tabelele permit afișarea informațiilor într-o formă organizată pe rânduri și coloane. Elementul <table> este unul dintre elementele HTML cu complexitate ridicată.

Orice tabel este compus din:

• un element <table>...</table> – acesta conține toate celelalte elemente care definesc tabelul;
• rânduri, definit prin elementul <tr> – table row;
• celule, definite prin elementul <td> – table data, o celulă oarecare a tabelului sau <th> – care definește o celulă care este antet (header) pentru un grup de celule.

Un tabel implicit

În exemplul următor se afișează un tabel cu parametri impliciți.

<p> Un paragraf inaintea tabelului</p>
<table>
    <tr>
        <th>Nume</th>
        <th>Prenume</th>
        <th>Nota</th>
    </tr>
    <tr>
        <td>Popescu</td>
        <td>Ionel</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Vlad</td>
        <td>Gregoria</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Lipan</td>
        <td>Victoria</td>
        <td>10</td>
    </tr>
</table>
<p> Un paragraf dupa tabel.</p>

Un tabel formatat

Următorul tabel este formatat cu CSS:

<style>
	table, td, th {border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
    th{background-color:lightgray;}
    tr:nth-child(even) td{color:red;}
</style>
<table>
    <tr>
        <th>Nume</th>
        <th>Prenume</th>
        <th>Nota</th>
    </tr>
    <tr>
        <td>Popescu</td>
        <td>Ionel</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Vlad</td>
        <td>Gregoria</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Lipan</td>
        <td>Victoria</td>
        <td>10</td>
    </tr>
</table>

Câteva elemente/atribute utile

Elementele care se folosesc pentru inserarea tabelelor au numeroase atribute. Aici discutăm o mică parte a lor. Pentru detalii consultați următoarele reurse:

• elementul <table> – MDN
• elementul <tr> – MDN
• elementul <td> – MDN

Elementele thead, tbody, tfoot

Rândurile dintru tabel pot fi împărțite din punct de vedere semantic în trei categorii:

• rânduri antet ale tabelului – prin elementul <thead>
• rânduri care desemnează corpul tabelului – prin elementul <tbody>
• rânduri subsol ale tabelului – prin elementul <tfoot>

Aceste elemente fac parte din elementul <table> și conțin zero sau mai multe rânduri (<tr>). Înțelesul lor este pur semantic, dar pot fi folosite și pentru formatarea CSS:

<style>
	table, td, th {border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
    thead tr{background-color: lightgray;}
    tbody tr{background-color: #55CCFF;}
    tfoot tr{background-color: #FFFF66;}
</style>
<table>
	<thead>
        <tr>
            <th>Nume</th>
            <th>Prenume</th>
            <th>Nota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Popescu</td>
            <td>Ionel</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Vlad</td>
            <td>Gregoria</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Lipan</td>
            <td>Victoria</td>
            <td>10</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td colspan="2">Media</td>
            <td>8.33</td>
        </tr>
    </tfoot>
</table>

Atributele colspan și rowspan

o, Aceste atribute se aplică celulelor (<td> și <th>) și stabilesc pe câte rânduri se extinde celula (atributul rowspan), respectiv pe câte cloane se extinde celula (atributul colspan).

<style>
	table, td{border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
</style>
<table>
	<tr>
    	<td colspan="2"> 1 </td>
        <td colspan="2"> 2 </td>
    </tr>
    <tr>
    	<td rowspan="2"> 1 </td>
        <td rowspan="2" colspan="2"> 2 </td>
        <td> 3 </td>
    </tr>
    <tr>
    	<td> 1 </td>
    </tr>
    <tr>
    	<td colspan="4"> 1 </td>
    </tr>
</table>

Valorile implite ale atributelor rowspan și colspan sunt 1. Pentru colspan valorile mai mari decât 100 sunt considerate incorecte și redevin 1. Valorile rowspan egale cu 0 extind celula până la sfârșitul secțiunii de tabel din care face parte aceasta (secțiunile sunt definite de elementele <thead>, <tbody> și <tfoot>), iar valorile mai mari decât 65534 sunt reduse la 65534.

Alinierea celulelor

Conținutul unei celule (<td> sau <th>) poate fi aliniat pe orizontală și pe verticală. În acest scop putem folosi atributele align și valign, dar sunt învechite. Utilizarea lor nu este recomandată și se propune folosirea proprietăților CSS, astfel:

• alinierea pe orizontală se realizează prin intermediul proprietății CSS text-align, cu valorile left, right, center sau justify;
• alinierea pe verticală se realizează prin intermediul proprietății CSS vertical-align, cu valorile baseline, top, middle sau bottom;

<style>
	table, td{border: solid 1px gray;}
    td {padding:3px; text-align: center;  height:100px;}
    table{ border-collapse: separate; border-spacing: 3px;}
</style>
<table>
	<tr>
    	<td style="text-align: left; width:120px;"> left </td>
        <td style="text-align: center;"> center </td>
    </tr>
    <tr>
    	<td style="text-align: right;"> right </td>
        <td style="text-align: justify;"> O propozitie mai lunga, care se va intinde pe mai multe linii. </td>
    </tr>
</table>

<style>
	table, td{border: solid 1px gray;}
    td {padding:3px; height:100px;}
    table{ border-collapse: separate; border-spacing: 3px; width: 100%;}
</style>
<table>
	<tr>
    	<td style="vertical-align: baseline;"> baseline </td>
        <td style="vertical-align: top;"> top </td>
    	<td style="vertical-align: middle;"> middle </td>
        <td style="vertical-align: bottom;"> bottom </td>
    </tr>
</table>

O listă este o serie de articole. Putem insera mai multe feluri de liste:

• liste neordonate (marcate)
• liste ordonate (numerotate)
• liste de definiții

Liste neordonate și ordonate

Aceste liste sunt asemănătoare; fiecare element al listei are la început un marcaj care îl evidențiază. În listele neordonate toate elementele listei au același marcaj, în timp ce în listele ordonate marcajele sunt valori în ordine (numere, litere, numere romane).

Pentru definirea acestor liste folosim trei elemente HTML:

• <ol> – pentru a defini o listă ordonată – ordered list;
• <ul> – pentru a defini o listă neordonată – unordered list;
• <li> – pentru a defini un element de listă, indiferent dacă este o listă marcată sau numerotată – list item.

<p>Meniul zilei</p>
<ol>
	<li>
    	Mic dejun
        <ul>
        	<li>Paine</li>
            <li>Unt</li>
            <li>Ceai</li>
    	</ul>
    </li>
    <li>
    	Pranz
        <ul>
        	<li>Ciorba</li>
            <li>Fel principal</li>
            <li>Desert</li>
            <li>Paine</li>
        </ul>
    </li>
    <li>
    	Cina
        <ul>
        	<li>Peste</li>
            <li>Garnitura</li>
        </ul>
    </li>
 <ol>

Aspectul listelor poate fi modificat în felul următor:

• pentru listele numerotate se poate stabili modul de numerotare, cu atribulul type="X", un X poate fi:
  • 1 – implicit, pentru numerotarea cu cifre arabe;
  • A – pentru numerotarea cu litere mari;
  • a – pentru numerotarea cu litere mici;
  • I – pentru numerotarea cu cifre romane scrise cu litere mari;
  • i – pentru numerotarea cu cifre romane scrise cu litere mici;
• valoarea de început a numerotării unei liste este implicit 1, dar poate fi modificată prin intermediul atributului start="N", unde N este un număr întreg;
• marcatorul pentru listele neordonate poate fi ales cu atributul type="T", unde T poate fi disc – implicit, circle sau square. Atributul type este învechit. Pentru stabilirea marcatorului se poate folosi și CSS – vezi următorul exemplu;
• listele pot fi imbricate în orice mod.

<p>Meniul zilei</p>
<ol start="3" type="A">
	<li>
    	Mic dejun
        <ul type="circle">
        	<li>Paine</li>
            <li>Unt</li>
            <li>Ceai</li>
    	</ul>
    </li>
    <li>
    	Pranz
        <ul style="list-style-type: square;">
        	<li>Ciorba</li>
            <li>Fel principal</li>
            <li>Desert</li>
            <li>Paine</li>
        </ul>
    </li>
    <li>
    	Cina
        <ul style="list-style-type: none;">
        	<li>Peste</li>
            <li>Garnitura</li>
        </ul>
    </li>
 <ol>

Liste de definiții

O listă de definiții este o serie de termeni și definițiile acestora. Pentru a insera o listă de definiții folosim marcajele:

• <dl>..</dd> – Description List – pentru a încorpora lista
• <dt>..</dt> – Description Term – pentru a preciza termenul definit
• <dd>..</dd> – Description Details – pentru a preciza descriere (definiția) termenului

<p>Tehnologii web</p>
<dl>
	<dt>HTML</dt>
    <dd>Un limbaj de marcare prin care se precizează conținutul paginii Web.</dd>
    <dd>Înseamnă HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Un standard prin care se formatează elementele din pagina Web.</dd>

    <dt>Javascript</dt>
    <dt>Ecmascript</dt>
    <dd>Un limbaj de programare prin care se adaugă paginii Web interacțiune cu utilizatorul.</dd>
</dl>

Așa cum se vede în exemplul anterior, putem asocia mai multe descrieri cu un anumit termen, și putem asocia mai mulți termeni cu o descriere.

HTML5 promovează separarea prezentării de conținut, în sensul că elementele HTML și atributele lor definesc conținutul paginii, nu aspectul lor. Acesta este lăsat în seama CSS. Avem nevoie de CSS pentru că dorim ca paginile create să arate bine, nu doar să conțină informații utile! Acest articol prezintă pe scurt Foile de Stil în Cascadă – CSS (Cascading Style Sheets).

Când lucrăm cu CSS avem în vedere următoarele:

1. cum formatăm conținutul paginii: culori, fonturi, fundaluri, etc. Acestea sunt stabilite prin intermediul regulilor CSS.
2. cum aplicăm formatările elementelor din pagină. Putem folosi:
   • stiluri inline – pentru un anumit element din pagină se stabilește un set de reguli;
   • selectori – mecanisme prin care un set de reguli CSS se aplică mai multor elemente din pagină.

<h1 style="color:red; text-align: right;">Salut</h1>
<p style="color: #0f0;"> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>

În exemplul de mai sus am folosit stiluri inline, prin intermediul atributului style, aplicat la elementele <h1> și <p>. S-au folosit câteva reguli CSS:

• color:red; – stabilește culoarea textului, folosind pentru identificare culorii numele acesteia;
• color:#0f0; – stabilește culoarea textului, folosind pentru identificare culorii codul hexazecimal al ei;
• text-align: right; – stabilește aliniarea conținutului unui element de tip block.

<style>
   	h1{
		color:red; text-align: right;
   	}
    p{
    	color: #0f0;
    }
</style>
<h1>Salut</h1>
<p> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>

În exemplul de mai sus am folosit selectori pentru a preciza elementele cărora li se aplică regulile. Aceștia se scriu în interiorul marcajului <style> și sunt de tipuri diverse. În exemplul de mai sus am folosit selectori element.

Paginile web conțin text. Limbajul HTML oferă o serie de elemente ce permit lucrul cu acesta:

• împărțirea textului în secțiuni
• formatarea textului

Limbajul HTML a evoluat în timp. La început, elementele erau gândite să precizeze direct modul de afișare în pagină a conținutului. De exemplu, elementul <b> precizează că textul este îngroșat, folosit pentru a întări textul. În timp, limbajul HTML a devenit semantic, elementele precizând rolul lor în pagină, nu modul de afișare. Astfel, pentru a întări o porțiune de text se folosește elementul <strong>. Efectul vizual implicit este același cu cel al marcajului <b>.

Elementele care descriu modul de afișare a conținutului, precum și atributele care descriu aspectul conținutului au devenit în prezent învechite (deprecated, obsolete) și se recomandă evitarea lor. Pentru a descrie aspectul elementelor din pagină se folosesc foile de stil în cascadă (CSS).

Elemente block și elemente inline

Elementele cu efect vizual în pagina web pot fi clasificate după modul în care se afișează în pagină:

• elementele block se afișează în pagină unele sub altele, pe verticală;
• elementele inline se afișează în pagină pe orizontală, unele după altele și de regulă fac parte din elemente block.

Elementul p

Când avem un text mai lung, îl împărțim în paragrafe, pentru a ușura citirea lui. Paragrafele se definesc în HTML prin intermediul elementului <p>, un element de tip bloc.

<p> Un paragraf oarecare. </p>

Elementul <p> poate avea atributul align, cu valorile posibile left, center, right sau justify, care stabilește modul în care este aliniat pe orizontală conținutul paragrafului, dar este un atribut învechit. Valoarea sa implicită este left, adică paragraful va avea conținutul aliniat la stânga.

<p align="left"> Un paragraf aliniat la stânga. </p>
<p align="right"> Un paragraf aliniat la dreapta. </p>
<p align="center"> Un paragraf aliniat la centru. </p>

Între blocul definit de elementul <p> și blocul de text anterior se lasă un spațiu.

Titluri

În pagina web se pot introduce titluri. Afișarea lor diferă între ele și diferă de restul paginii.

Sunt șase categorii de titluri, definite prin intermediul elementelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Elementul <h1> definește titlul de importanță maximă, iar <h6> pe cel de importanță minimă.

Conținutul titlurilor poate fi aliniat cu atributul align, care este însă învechit.

<h1>Titlu 1</h1>
<h2>Titlu 2</h2>
<h3>Titlu 3</h3>
<h4>Titlu 4</h4>
<h5>Titlu 5</h5>
<h6>Titlu 6</h6>
<p>Un paragraf oarecare</p>

Citate

În pagina web se pot introduce citate, prin intermediul elementelor <blockquote> și <q>.

<blockquote> este un element block. De regulă se afișează cu o margine vizibilă în partea stângă. Poate avea atributul cite, a cărui valoare este adresa URL a documentului citat. Dacă se dorește afișare în text a documentului citat se poate folosi elementul <cite>.

Elementul <q> este un element inline – se folosește pentru a introduce un citat în interiorul unui block de text – de exemplu în interiorul unui paragraf. Și el are atributul cite, cu același înțeles.

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>

<p>Aldous Huxley sayd: <q cite="Brave New World">Words can be like X-rays</q>!</p>

Linii orizontale

Pentru a separa secțiunile unei pagini se pot folosi linii orizontale, prin intermediul elementului <hr>. Acesta are următoarele atribute, toate învechite:

• align, cu valorile posibile left, center și right – precizează alinierea liniei în blocul din care face parte;
• color – stabilește culoarea liniei;
• size – stabilește înălțimea (grosimea) liniei, în pixeli
• width – stabilește lungimea liniei, în pixeli sau procente

<hr>
<hr align="right" width="150" color="red" size="10">
<hr width="150" color="green" size="5">

Blocuri de text preformatat

În pagina web caracterele albe consecutive sunt implicit ignorate. Dacă totuși dorim să afișam un text exact așa cum este scris, putem folosi marcajul <pre>, care definește un bloc de text preformatat. Conținutul său va fi afișat în pagină exact așa cum este scris în documentul HTML, folosind un corp de literă monospațiat.

<pre>Un     text

preformatat,      în care sunt vizibile

spatiile     albe!
</pre>

Elementele div și span

Elementul <div> este un element de tip block generic, care poate fi utilizat în foarte multe moduri. Nu are niciun efect asupra conținutului sau aranjării în pagină dacă nu are atașat CSS.

Elementul <span> este un element inline generic, utilizabil în foarte multe moduri. La fel ca <div>, un are efect asupra conținutului sau aranjării în pagină dacă nu are atașat CSS.

<div style="border: solid 1px red; padding:5px; margin:5px;"> Un bloc DIV.
<div style="border: solid 1px red;  padding:5px; margin:5px;">Alt DIV.</div>
<div style="border: solid 1px green; padding:5px; margin:5px;">Acest DIV contine un <span style="border: dotted 1px red">SPAN</span>.</div>
</div>

Atributul style este folosit pentru formatarea elementelor prin intermediul CSS.

Elemente de frază

Elementele de frază ne permit să dăm un înțeles specific unei secțiuni din document:

• <em>...</em> – pentru evidențiere; textul conținut se afișează înclinat (cursiv);
• <strong>...</strong> – pentru evidențiere; textul conținut se afișează îngroșat (aldin);
• <code>...</code> – pentru inserarea unui fragment de cod de calculator; este afișat cu un font monospațiat;
• <kbd>...</kbd> – pentru inserarea unui caracter sau secvențe de caractere introduse de la tastatură; este afișat de regulă cu un font monospațiat;
• <samp>...</samp> – pentru inserarea text care reprezintă date de ieșire pentru un program de calculator; este afișat de regulă cu un font monospațiat;
• <var>...</var> – pentru a insera nume de variabile dintr-un text matematic sau dintr-un program de calculator; textul conținut se afișează înclinat (cursiv);
• <abbr>...</abbr> – pentru a insera o abrevier sau un acronim; textul conținut se afișează de regulă evidențiat într-un anume fel (de exemplu prin subliniere cu o linie); atributul title are un înțeles semantic – trebuie să conțină doar textul care este abreviat;

<p>
    <em>Text evidentiat</em> cu font inclinat.
</p>
<p>
    <strong>Text evidentiat</strong> cu font ingrosat.
</p>
<p>
    <code>Cod de calculator</code>.
</p>
<p>
    <kbd>CTRL</kbd> + <kbd>S</kbd> realizeaza salvarea documentelor.
</p>
<p>
    <samp>Date de iesire</samp> - font monospatiat.
</p>
<p>
    <var>x + y + z</var> - o expresie matematica.
</p>
<p>
    Invatam <abbr title="HyperText Markup Language">HTML</samp>!
</p>