Articolele lui Candale Silviu (silviu)

Standard Template Library - STL

2024-09-01 |

STL - Concepte fundamentale

Standard Template Library reprezintă un ansamblu de mecanisme scrise în C++ pentru gestionarea eficientă a unor colecții de date, împreună cu algoritmi eficienți care prelucrează aceste date. Este parte a Bibliotecii Standard C++, fiind astfel disponibilă în orice compilator care respectă standardul C++.

Introducere

STL are trei componente fundamentale: containerele, iteratorii și algoritmii, precum și o serie de componente suplimentare: containerele speciale, functorii, alocatorii.

Containerele

Containerele sunt obiecte care conțin date (de orice tip, putând fi la rândul containere). Alocarea memoriei pentru conținutul containerelor se face automat (de regulă dinamic), de către container.

Containerele sunt de două tipuri: containere secvențiale și containere asociative.

Containerele secvețiale gestionează un ansamblu de elemente dispuse strict liniar. Fiecare element al containerului are o poziție bine stabilită, care nu depinde de valoarea elementului. Avem următoarele contaniere secvențiale:

vector – gestionează o secvență de elemente asemănătoare tablourilor standard C;
deque (double-ended queue)- este o coadă cu operații rapide de adăugare și eliminare la ambele capete;
list – gestionează o listă alocată dinamic, oferind operațiile de bază cu aceasta.

Timpul necesar pentru operațiile uzuale asupra containerelor secvențiale este redat mai jos:

Operație	vector	deque	list
Accesarea primului element	constant	constant	constant
Accesarea ultimului element	constant	constant	constant
Accesarea unui element oarecare	constant	constant	liniar
Adăugare/ștergere la început	liniar	constant	constant
Adăugare/ștergere la sfârșit	constant	constant	constant
Adăugare/ștergere oarecare	liniar	liniar	constant

Containerele asociative sunt structuri de date în care fiecare element are asociată o anumită cheie și are o anumită valoare. Ordinea elementelor în container depinde de cheie și se poate schimba în funcție de celelalte elemente. Aceste containere implementează eficient operațiile de adăugare de noi elemente, ștergere a elementelor în funcție de cheie, precum și căutarea elementelor după cheie.

Sunt două familii de containere asociative:

set – în care cheia și valoarea elementelor sunt identice; containerele de acest tip sunt:
- set – memorează elemente distincte; elementele sunt menținute în ordine (strict) crescătoare;
- multiset – elementele pot fi egale și sunt menținute în ordine crescătoare;
- unordered_set – memorează elemente distincte; nu este garantată o anumită ordine a elementelor;
- unordered_multiset – elementele pot fi egale și nu este garantată o anumită ordine a elementelor

map – cheile și valorile diferă; accesul la elemente se face prin intermediul cheii; containerele de acest tip sunt:
- map – cheile sunt distincte; elementele sunt menținute în ordine (strict) crescătoare a cheilor;
- multimap – cheile pot fi egale și sunt menținute în ordinea crescătoare a cheilor;
- unordered_map – cheile sunt distincte; nu este garantată o anumită ordine a elementelor;
- unordered_map – cheile pot fi egale și nu este garantată o anumită ordine a elementelor.

Timpii necesari pentru operațiile de adăugare, ștergere și acces sunt logaritmici pentru containerele asociative care menține elementele ordonate și constanți pentru containerele care nu mențin elementele în ordine.

Iteratorii

Iteratorii reprezintă o generalizare a conceputului de pointer. Ei oferă acces la elementele containerelor într-o manieră uniformă, pentru toate containere și pentru toți algoritmii STL.

Operațiile cu iteratorii sunt similare cu operațiile cu pointeri, putându-i dereferenția, incrementa/decrementa, compara, aduna cu întreg, etc. Unele operații sunt disponibile pentru toți iteratorii, altele doar pentru cei ai unor anumite tipuri de container.

Algoritmii

Algoritmii prelucrează colecții de elemente. Aceste colecții pot fi containere, părți ale unor containere sau slte structuri de date care permit lucrul cu pointeri (de exemplu tablouri standard C).

Algoritmii sunt folosiți sub formă de funcții, iar prelucrările pe care le fac sunt diverse: sortări, căutări, modificări, etc.

Containere speciale

Containerele speciale sunt:

bitset – folosit pentru manipularea eficientă a șirurilor de biți
containere adaptor – acoperă necesități speciale și sunt create pornind de la containere standard: containerele stack și queue permit gestionarea ușoară a unei stive, respectiv a unei cozi și sunt create pe baza containerului deque, iar containerul priority_queue gestionează o coadă de priorități (heap) și este creat pe baza clasei vector.

Functori și alocatori

Functorii sunt obiecte care se folosesc în maniera unui apel de funcție. Sunt folosite frecvent în cadrul algoritmilor.

Alocatorii sunt obiecte care gestionează alocarea memoriei pentru orice obiect și, în particular, pentru obiectele care fac parte dintr-un container.

Standard Template Library – STL

Informatică

Citește articolul

2024-09-01 |

Subiecte propuse MEC, aprilie-mai 2020

Citește articolul

2020-07-05 |

Limbajul HTML - culori

Î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:

`black` – #000000	`silver` – #C0C0C0	`bgray` – #808080	`white` – #FFFFFF
`maroon` – #800000	`red` – #FF0000	`purple` – #800080	`fuchsia` – #FF00FF
`green` – #008000	`lime` – #00FF00	`olive` – #808000	`yellow` – #FFFF00
`navy` – #000080	`blue` – #0000FF	`teal` – #008080	`aqua` – #00FFFF

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.

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2020-05-12 |

Limbajul HTML - entități

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.

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2021-09-26 |

Programare web

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2020-09-09 |

Limbajul HTML - legături și imagini

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="pagini/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 destinație 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.

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2021-09-27 |

Limbajul HTML - tabele

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:

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>

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2020-05-04 |

Limbajul HTML - liste

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.

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2020-05-04 |

Limbajul HTML - stiluri CSS

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:

cum formatăm conținutul paginii: culori, fonturi, fundaluri, etc. Acestea sunt stabilite prin intermediul regulilor CSS.
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.

Informatică Clasa a 12-a Programare Web HTML - CSS

Citește articolul

2020-05-03 |

Articolele lui Candale Silviu (silviu)

Introducere

Containere

Algoritmi

Introducere

Containerele

Iteratorii

Algoritmii

Containere speciale

Functori și alocatori

Testul 1

Testul 2

Testul 3

Testul 4

Testul 5

Testul 6

Testul 7

Testul 8

Testul 9

Testul 10

Testul 11

Testul 12

Testul 13

Testul 14

Testul 15

Testul 16

Testul 17

Testul 18

Testul 19

Testul 20

Culori în HTML

Culori în CSS

Programare la nivel de client

Elementul a

Adrese relative și adrese absolute

Ancore interne și externe

Formatarea legăturilor cu CSS

Inserarea imaginilor

Un tabel implicit

Un tabel formatat

Câteva elemente/atribute utile

Elementele thead, tbody, tfoot

Atributele colspan și rowspan

Alinierea celulelor

Liste neordonate și ordonate

Liste de definiții

Elementul `a`