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