Articole recomandate

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

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.

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>

Introducere

Limbajul HTML este folosit pentru a descrie conținutul paginilor web și este folosit împreună cu alte tehnologii, precum CSS și Javascript.

HTML înseamnă HyperText Markup Language.

Documentele html conțin cod HTML. Ele sunt încărcate în browser, de pe calculatorul local sau de pe Internet. Conținutul său este interpretat de browser; acesta mai încarcă și alte fișiere, de exemplu imagini, precizate în document, și afișează pagina web.

Documentele HTML conțin doar text. Acesta poate fi creat cu orice editor de texte, de exemplu Notepad, dar un editor specializat poate ajuta în realizarea mai rapidă a documentului. Exemple de editoare de text utile în realizarea documentelor HTML: Notepad++, Komodo Edit, Sublime Text Editor, etc.

Pe internet există numeroase locuri unde putem învăța limbajul HTML, și nu numai. Dintre acestea, amintim:

• W3Schools – o platformă de învățare cu tutoriale de mici dimensini, simple și clare, foarte potrivite pentru începători;
• Khan Academy – o suită de lecții interactive, gândite să fie parcurse pas cu pas;
• MDN Web Docs – o platformă a fundației Mozilla – care conține atât tutoriale, cât și referințe complete pentru tehnologiile folosite în crearea unei pagini web.

Ciclul de proiectare a unei pagini web

1. editarea documentul html folosind un editor de text;
2. salvarea cu extensia .html;
3. afișarea paginii web folosind un browser – de exemplu Mozilla Firefox sau Google Chrome.

Primul document HTML

Scrieți codul de mai jos într-un editor de text.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Prima pagină</title>
    </head>
    <body>
        <!-- acest text este un comentariu -->
        <h1>Salut</h1>
        <hr>
        <p> Aceasta este prima pagină web.</p>
        <p> <a href="https://www.pbinfo.ro">Link spre pbinfo.</a> </p>
    </body>
</html>

Mai departe:

• salvați fișierul cu numele salut.html, într-un folder pe disc. Extensia html este importantă!
• deschideți folderul unde l-ați salvat și deschideți fișierul cu un browser!

Explicația exemplului

• declarația <!DOCTYPE html> precizează că documentul respectă standardul HTML5.
• elementul <html> este elementul râdăcină al oricărui document html.
• elementul <head> conține informații despre document care nu se vor afișa în pagina web.
• elementul <title> precizează titlul document, așa cum va fi afișat în bara de titlu a browser-ului.
• elementul <meta charset="utf-8"> precizează că documentul este scris folosind codificare UTF-8 pentru caractere. Aceasta permite utilizarea caracterelor cu diacritice, specifice limbii române: ă, â, î, ș, ț.
• elementul <body> conține ceea ce se afișează în fereastra browser-ului.
• elementul <h1> definește un titlu de cel mai important nivel.
• elementul <hr> definește o linie orizontală (horizontal rule)
• elementul <p> definește un paragraf (aliniat) oarecare.
• elementul <a> definește o ancoră; prin intermediul lui se introduc în pagina web link-uri.
• secvența <!-- ... --> este un comentariu. Browserul îl ignoră și nu îl afișează în pagina web; el are importanță numai pentru cei care editează documentul html.

Structura unui document html

Un document html este alcătuit din elemente, sau marcaje (engl. elements): html, head, body, title, h1, p, a , meta, hr.

Elementele sunt inserate în document prin intermediul etichetelor (engl. tags). Acestea conțin elementul între simbolurile <>.

• Majoritatea elementelor sunt definite prin intermediul a două etichete: eticheta de deschidere (ex. <h1>) și eticheta de închidere (ex. </h1>), iar între cele două etichete se află conținutul elementului: <h1>Salut</h1>.
• Există și elemente cu o singură etichetă, de exemplu hr. Eticheta de închidere nu este necesară, deoarece aceste elemente nu au conținut.

Unele elemente pot avea atribute (engl. attributes). Ele furnizează informații suplimentare despre element și se scriu în eticheta de deschidere. Un atribut are de regulă o valoare (engl value), dar există și atribute care nu au valori – simpla prezență a atributului în element este suficientă. Pentru atributele care au valori, ele se dau în forma atribut="valoare"!

De exemplu, în elementul <a href="https://www.pbinfo.ro">Link spre pbinfo.</a>, href este un atribut, iar https://www.pbinfo.ro; valoarea sa stabilește destinația link-ului.

• elementele și atributele lor se scriu cu litere mici
• valorile se scriu între ghilimele duble: "

Spații albe

Browser-ele ignoră spațiile albe (caracterele spațiu, tab, sfârșit de rând). Următoarele secvențe au același efect.

<p> Aceasta este prima pagină web.</p>
<p> 
	Aceasta este prima pagină web.
</p>
<p> 
    Aceasta           este 

prima
            pagină web.
</p>

Pentru a insera un spațiu de dimensiuni mai mari, putem folosi o construcție specială a limbajului HTML:  . Ea se numește entitate HTML (engl. HTML entity).

Pentru trece la rând nou în interiorul unui paragraf, putem folosi elementul <br> (break).

MySQL este cel mai popular sistem de gestiune a bazelor de date open-source, şi unul dintre cele mai performante SGBD existente în prezent.

Este un server de baza de date SQL robust, rapid, multi-threaded (utilizează fire de execuţie concurente), şi multi-user (permite deservirea simultană a mai multor utilizatori). Aceste calităţi îl recomandă ca back-end pentru aplicaţiile Web dinamice.

Există numeroase interfeţe de acces la bazele date MySQL din diverse limbaje de programare: C/C++, Java, PHP, precum şi aplicaţii numeroase aplicaţii client – care permit conectarea la server şi rularea de comenzi pe acesta.

Introducere

O bază de date este o colecție de date care modelează un univers (instituție, organizație, eveniment, etc.). Acest univers este format din mai multe elemente care interacționează, elementele de același tip făcând parte dintr-o entitate. Fiecare entitate are anumite atribute și conține mai multe elemente; fiecare element al unei entități are același set de atribute, dar elementele diferă între ele prin valorile atributelor.

Exemplu

Pentru gestionarea unei școli se va folosi o bază de date cu numele scoala. Entitățile care fac parte din această bază de date sunt (cel puțin) ELEV, PROFESOR, CLASE:

• entitatea ELEV va conține informații despre fiecare elev;
• entitatea PROFESOR va conține informații despre fiecare profesor din școală;
• entitatea CLASA va conține informații despre fiecare clasă;

Fiecare entitate va avea (cel puțin) următoarele atribute:

Desigur, elevii și profesorii pot avea și alte caracteristici (număr la pantof, preferințe muzicale), dar acestea nu sunt relevante pentru școală. Atributele entităților vor corespunde proprietăților relevante pentru universul descris de baza de date.

Elementele acestor entități pot fi privite astfel:

ELEV

PROFESOR

CLASA

Entitatea corespunde tabelului.
Atributele corespund coloanelor din tabel.
Elementele corespund liniilor din tabel.

Sistem de gestiune a bazelor de date

Un Sistem de Gestiune a Bazelor de Date (SGBD) este o aplicație software care realizează o serie de operații specifice cu bazele de date:

• crearea bazei de date
• ștergerea, modificarea, importul/exportul bazei de date
• crearea unei entități
• gestionarea atributelor unei entități: adăugare, modificare, ștergere
• gestionarea elementelor unei entități: adăugare, modificare, ștergere
• controlul accesului
• etc.

De-a lungul timpului au fost implementate mai multe modele pentru bazele de date. În prezent este (încă) folosit pe scară largă modelul relațional. În acest model, entitățile sunt privite ca niște mulțimi, având ca elemente înregistrările. Astfel, într-o entitate nu putem avea mai multe înregistrări cu exact aceleași valori ale atributelor (ar exista mai multe elemente egale în mulțime), iar cu entitățile (sau parte a lor) se pot face operații de reuniune, intersecție, specifice mulțimilor.

Exemple de SGBD-R – sisteme de gestiune a bazelor de date relaționale: MySQL, Microsoft SQL Server, Microsoft Access, Oracle, SQLite.

Terminologie

Diversele sisteme de gestiune a bazelor de date folosesc termeni diferiți pentru conceptele specifice bazelor de date. În continuare prezentăm o listă de noțiuni sinonime, într-o ordine ierarhică:

• baza de date
• entitate, tabel, tabelă
  • structura unei entități: atribut, câmp, coloană
  • datele dintr-o entitate: elemente, instanțe, înregistrări, linii

Cheie, cheie primară, chei străină

Fiecare valoare din baza de date trebuie să fie accesibilă. Orice valoare din baza de date se află într-o entitate și este valoare corespunzătoare unui anumit atribut al unui anumit element.

Entitățile și atributele pot fi identificate prin numele lor, dar elementele entității nu au nume. Pentru a le identifica a fost realizat un alt mecanism de identificare, numit cheie.

O cheie este un atribut sau ansamblu de atribute dintr-o entitate care identifică elemente unei entități.

O cheie primară este un atribut al unei entități (sau ansamblu de atribute) care are valori unice pentru fiecare element al entității. Astfel, cheia primară identifică în mod unic fiecare element al entității din care face parte. Pentru a facilita operațiile cu date, fiecare entitate trebuie să aibă o cheie primară.

Este posibil ca o entitate să aibă mai multe atribute (grupuri de atribute) cu valori unice la nivelul entității, dar numai una poate fi aleasă ca fiind cheie primară, celelalte sunt chei candidat. De exemplu, pentru persoane există codul numeric personal și seria/numărul cărții de identitate. Doar una dintre ele poate fi cheie primară, cealaltă find cheie candidat.

O cheie primară este:

• obligatorie – fiecare entitate are o singură cheie primară
• unică – nu există două elemente ale entității cu aceleași valori ale cheii primare
• simplă sau compusă – o cheie primară simplă este un singur atribut al entității. O cheie primară compusă cuprinde mai multe atribute ale entității
• non null – valoarea cheii primare nu poate fi vidă
• stabilă – după ce au fost create, valorile cheilor primare se schimbă foarte rar
• ne-reutilizabilă – dacă se șterge un element al entității, nu se asociază altui element valoarea cheii primare a elementului șters

Pentru a stabili legături între entități se folosește un mecanism numit chei străine. O cheie străină are următoarele caracteristici:

• este un atribut al unei entități ale cărui valori sunt în relație cu valorile dintr-o altă entitate;
• asigură faptul că elementele unei entități au elemente corespondente în altă entitate;
• respectă reguli de integritate: valorile cheii străine dintr-o entitate sunt chei primare în altă entitate.

Atribute obligatorii și opționale. Valoarea NULL

Observăm că atributele cheie primară și cheie străină sunt obligatorii – pentru fiecare element al entității trebuie să fie cunoscută valoarea sa. Există și alte atribute obligatorii: fiecare elev șî fiecare profesor au nume, prenume, data nașterii, dar există și atribute care nu sunt obligatorii. Poate nu este obligatoriu să fie cunoscută adresa tuturor profesorilor și este posibil ca nu toți profesorii să aibă adrese de email.

Constatăm astfel că atributele unei entități pot fi:

• obligatorii – pentru fiecare element al entității trebuie să fie cunoscută valoarea atributelor obligatorii;
• opționale
  • valoarea acestor atribute este cunoscută doar pentru a parte a elementelor. De exemplu, doar o parte a profesorilor au o adresă de email;
  • atributele au sens doar pentru anumite elemente ale entității. De exemplu, data căsătoriei au sens numai pentru profesorii căsătoriți.

Pentru atributele opționale putem avea valoarea NULL.

NULL = constantă care desemnează o valoare necunoscută sau inaplicabilă.

Reprezentarea atributelor unei entități se face astfel:

• atributele sunt scrise cu litere mici, fiecare pe câte o linie;
• atributele cheie primară sunt precedate de caracterul #;
• atributele obligatorii sunt precedate de caracterul *;
• atributele opționale sunt precedate de caracterul ∘.

Exemplu

Considerăm baza de date scoala. Fiecare entitate va fi înzestrată cu o cheie primară. O modalitate frecvent folosită constă în adăugarea unui câmp suplimentar (id), valorile sale fiind independente de valorile celorlalte atribute – de multe ori valorile sale se incrementează automat, la adăugarea de noi elemente în entitate.

Cele trei entități vor avea următoarea structură:

După adăugarea cheii, elementele entităților bazei de date scoala pot fi privite astfel:

ELEV

PROFESOR

CLASA

Nu trebuie să considerăm cheile primare ca un sistem de numerotare a elementelor entității. Ordinea elementelor nu este obligatoriu identică cu cea a valorilor cheii, iar anumite valori pot să lipsească!

Relații între entități

După cum spuneam elementele entităților dintr-o bază de date interacționează – între entitățile baze de date există relații.

O relație este o asociere între elementele a două entități. De exemplu, între entitățile elev și clasa există relația de apartenență a elevilor la clasă. Această relație poate fi exprimată prin următoarele două afirmații:

1. Fiecare clasă poate conține 0 sau mai mulți elevi.
2. Fiecare elev trebuie să aparțină unei singure clase.

O altă relație între elev și clasa este dată de calitatea de șefi ai clasei a unor elevi:

• Fiecare clasă trebuie să aibă un singur șef al clasei.
• Fiecare elev poate să fie șef al unei singure clasei.

Cuvintele evidențiate în propozițiile de mai sus, prin îngroșare și înclinare, reprezintă cele două caracteristici ale relației:

• cardinalitate – arată numărul elementelor din entitatea A îi corespund unui element din entitatea B, și invers;
• opționalitate – arată dacă corespondența dintre elementul (elemenetele) din A și cele din B este obligatorie sau opțională.

Relațiile dintre entități pot fi:

• unu la unu (one-to-one)
• unu la mai mulți (one-to-many)
• mai mulți la unu (many-to-one)
• mai mulți la mai mulți (many-to-many)

Relațiile între entități se realizează prin intermediul cheilor – primare și străine.

Unu la unu

Într-o relație unu la unu, la fiecare element dintr-o entitate A îi corespunde cel mult un element din altă entitate B, dar pot exista elemente în entitatea B care nu au corespondenți în A.

De exemplu, fiecărei clase (A) îi corespund exact un șef al clasei (B), dar există elevi (B) care nu sunt șefi pentru nicio clasă (A). Atributele entității clase devin:

Atributul id_elev_sef este cheie străină, valorile sale regăsindu-se în cheia primară id_elev al entității elevi.

Similar, fiecărei clase (A) îi corespund exact un profesor diriginte (B), dar există profesori (B) care nu sunt diriginți la nicio clasă (A). La atributele entității clase se adaugă id_profesor_diriginte, care este cheie străină, valorile sale regăsindu-se în cheia primară id_profesor al entității profesori.

Unu la mai mulți, mai mulți la unu

Într-o relație de tip unu la mai mulți, fiecare element din entitatea A îi corespund mai multe (zero sau mai multe) elemente din entitatea B, însă fiecare element din entitatea B are un singur element corespondent în entitatea A.

De exemplu, fiecare clasă (A) conține mai mulți elevi (B), dar fiecare elev face parte din exact o clasă. Entitatea elevi va avea următoarea structură:

Atributul id_clasa este cheie străină, valorile sale regăsindu-se în cheia primară id_clasa al entității clase.

Mai mulți la mai mulți

Într-o relație de tip mai mulți la mai mulți, fiecare element din entitatea A poate avea mai multe elemente corespondente în entitatea B și fiecare element din B poate avea mai multe elemente corespondente în A.

De exemplu, un profesor (A) predă la mai multe clase (B) și la o clasă (B) predau mai mulți profesori (A).

Relațiile mai mulți la mai mulți se stabilesc prin intermediul unei entități suplimentare, numită entitate asociativă. În cazul nostru, relațiile dintre profesori și clase se stabilesc prin intermediul entități încadrare, cu atributele:

• id_clasa – cheie străină cu valori din atributul id_clasa al entității clase
• id_profesor – cheie străină cu valori din atributul id_clasa al entității profesori
• număr_ore – numărul de ore pe care îl predă un anumit profesor la o anumită clasă.

Perechea (id_clasa, id_profesor) reprezintă cheia primară pentru entitatea nou creată.

Normalizarea

Poate v-ați întrebat de ce nu se unifică toate informațiile despre elevi (nume, prenume, clasa, diriginte, etc.) într-o singură entitate. Acest lucru ar fi posibil, însă în entitatea obținută am avea numeroase date duplicate: pentru fiecare elev, entitatea ar conține informații redundante despre clase și diriginți. Datele redundante nu sunt dorite: măresc considerabil dimensiunea bazei de date, încetinesc operațiile cu entitățile bazei de date și sunt foarte greu de întreținut. Dacă un profesor își schimbă domiciliul, vrem să modificăm într-un singur loc!

Normalizarea este procesul (alcătuit din etape) prin care se modifică structura entităților în scopul de a reduce redundanța datelor și a mări coerența lor.

• Redundanța se referă dublarea datelor – stocarea acelorași date în mai multe entități simultan, fără ca acest lucru să fie necesar.
• Coerența se referă la caracterul unitar al datelor: conformitatea cu un anumit format, încadrarea între anumite limite, lipsa contradicțiilor, etc.

După fiecare etapă a normalizării, baza de date este adusă într-o anumită formă normală.

Modelul matematic al normalizării definește cinci forme normale. În practică sunt frecvent utilizate primele trei:

• FN1, prima formă normală (1NF, first normal form)
• FN2, a doua formă normală (2NF, second normal form)
• FN3, a treia formă normală (3NF, third normal form)

Fiecare formă normală este mai puternică decât celelalte. O bază de date aflată în forma FN3 este în același timp în formele FN1 și FN2. Un nivel de normalizare mai ridicat va mări probabil numărul de entități ale bazei de date, în comparație cu o formă normală mai scăzută. Descompunerea unei entități în mai multe trebuie să fie:

• fără pierderi – divizarea tabelelor nu provoacă pierderi de informații
• cu păstrarea dependențelor – divizarea tabelelor nu provoacă pierderi între relații

Atributele cheie primară și cheie străină nu se consideră date redundante.

Prima formă normală

Un tabel în prima formă normală:

• atributele conțin doar valori atomice
• nu are grupuri de atribute care se repetă

O valoare atomică nu poate fi împărțită într-un mod care să aibă sens. De exemplu, numele unei persoane va ocupa două atribute, nume și prenume.

Un grup care se repetă este un grup de două sau mai multe atribute de același tip. De exemplu, un profesor poate avea una, două sau trei adrese de email. Nu vom plasa în entitatea profesor atributele email1, email2, email3, ci vom crea o nouă entitate, adrese_email, cu structura:

• id
• id_profesor
• email.

În această entitate atributul id_profesor este cheie străină, iar entitățile profesor și adrese_email se află în relația one-to-many.

A doua formă normală

O entitate în prima formă normală a cărei cheie primară este simplă este automat în a doua formă normală. În caz contrar, pentru a fi în a doua formă normală este necesar ca entitatea să nu aibă dependențe funcționale parțiale.

O entitate are o dependență funcțională parțială dacă există atribute non cheie care depind doar de o parte a atributelor care formează cheia primară. Acestea ar trebui actualizate la orice modificare a valorilor din cheia primară.

De exemplu, considerăm entitatea incadrare cu structura:

• (id_clasa, id_profesor) – cheie primară compusă
• disciplina – disciplina predată la clasă
• telefon_profesor – numărul de telefon al profesorului

Atributul telefon_profesor este dependent numai de atributul id_profesor, ceea ce nu este corect. Entitatea nu respectă a doua formă normală. Pentru a corecta, numărul de telefon al profesorului trebuie precizat ca atribut în entitatea profesor.

A treia formă normală

O entitate este în a treia formă normală dacă este în a doua formă și nu are dependențe tranzitive. Dependența tranzitivă apare când dacă valoarea unui atribut non cheie determină valoarea altui atribut non-cheie.

Considerăm tabelul elev cu structura:

• id – cheie primară
• nume, prenume
• id_clasa
• denumire_clasa

Valorile atributului denumire_clasa depind de valorile atributului id_clasa, care nu este cheie primară. Acest atribut trebuie să apară numai în entitatea clase, pentru a evita această dependență.

Acest articol conține subiectele date la examenele de bacalaureat din ultimii ani, la disciplina Informatică.

La examenul de bacalaureat pot susține proba E-d disciplina Informatică absolvenții profilelor “Matematică-informatică”, “Matematică-informatică intensiv informatică” și “Științele naturii”.

Pentru profilele “Matematică-informatică” și “Matematică-informatică intensiv informatică” subiectul este comun.

Totodată candidații pot alege alege între limbajele C/C++ și Pascal.

Programa pentru bacalaureat la Informatică (valabilă din 2011): Programa_Bac_2011_E_d_Informatica.pdf.

• Probleme pseudocod: https://www.pbinfo.ro/articole/26297/probleme-pseudocod
• Limbajul pseudocod: https://www.pbinfo.ro/articole/23972/limbajul-pseudocod
• Probleme care trebuie rezolvate eficient: https://www.pbinfo.ro/articole/25662/probleme-eficienta-bac