Site-uri și aplicații pentru web

Curs 1


Capitolul 1. Aspecte generale

Internet şi WWW

WWW (World Wide Web) este un ansamblu de protocoale şi convenţii de reprezentare a informaţiei care facilitează afişarea în aplicaţii de navigare a conţinutului paginilor Web. În paginile Web informaţia este codificată în format hipertext (denumit şi format HTML, prescurtare de la HyperText Markup Language). O aplicaţie de navigare (denumită în engleză browser) permite afişarea conţinutului paginilor Web care poate fi simplu text, secvenţe video, miniaplicaţii interactive sau secvenţe audio. Deoarece paginile pot conţine şi referinţe spre alte pagini, se crează un efect de reţea.

Într-un document hipertext hiperlegătura (eng. hyperlink) este un şir de caractere sau o imagine care în urma selectării cu mouse-ul determină afişarea în fereastra aplicaţiei de navigare a unui alt document sau a unei alte porţiuni din documentul curent.

Într-o hiperlegătură fişierul care trebuie încărcat este referit prin adresa lui. Sistemul de adresare în Internet este standardizat, fiecare fişier având o adresă unică (URL, Uniform Resource Locator).

O adresă a unui fişier din WWW este formată prin alăturarea a trei componente:

  • simbolul unui protocol de comunicaţie (de exemplu http sau https pentru Hypertext Transfer Protocol sau ftp pentru File Transfer Protocol),
  • un nume de domeniu (sau subdomeniu) care deține fișierul şi
  • calea spre fişier.

Numele unui domeniu (sau subdomeniu) se citește de la dreapta spre stânga și începe cu TLD (eng. Top Level Domain), apoi apare numele domeniului și eventuale nume de subdomenii.

Exemplu de adresă de fișier:

  https://www.infoap.ro/cursuri/courses/IAP33/document/Curs1.html

Un fişier din Internet poate fi referit printr-o adresă absolută, formată aşa cum s-a arătat, sau relativă. Adresele relative sunt folosite pentru a indica fişiere din interiorul aceluiaşi site: pagini web, componente multimedia (imagini, secvenţe audio sau video) etc.

Un site web este format dintr-un ansamblu de pagini web legate între ele şi accesibile folosind acelaşi nume de domeniu (subdomeniu). O astfel de adresă este https://www.google.com sau https://www.infoap.ro.

Diversele site-uri sunt găzduite pe calculatoare conectate la Internet. Fiecare astfel de calculator are o adresă fizică unică (IP, Internet Protocol). Pentru codificarea adreselor fizice există două convenții, IPV4 și IPV6.

  • în varianta IPV4 adresele calculatoarelor conectate la Internet sunt exprimate folosesind 32 biți. Ele sunt scrise de regulă ca succesiune a patru numere întregi despărțite prin puncte, fiecare număr fiind cuprins între 0 şi 255. Exemplu: 193.226.7.133 este adresa calculatorului care găzduiește site-ulwww.infoap.utcluj.ro
  • în varianta IPV6 adresele calculatoarelor sunt codificate folosind 128 biți. Aceste adrese sunt scrise sub forma a 8 grupe de câte 4 cifre hexazecimale separate prin caractere ':' (de exemplu 2027:0da8:8b73:0000:0000:8a2e:0370:1337).

Browser-ele accesează fișierele folosind adresele fizice ale calculatoarelor. Trecerea de la numele de domeniu (www.infoap.utcluj.ro din exemplul dat) la adresa fizică a calculatorului care găzduieşte domeniul (193.226.7.133) se realizează prin intermediul serviciului DNS (Domain Name System) integrat în Internet.

Observație: În calculatorul conectat la internet și care găzduiește site-uri rulează o aplicație dedicată (de exemplu serverul HTTP Apache, aplicație dezvoltată de Apache Software Foundation) care rezolvă cererile venite din partea browser-elor.


TOP

Organizarea fişierelor unui site

Un site web constă dintr-un ansamblu de componente aflate în interacţiune.

Fiecare dintre componente constă dintr-unul sau mai multe fişiere codificate într-un limbaj adaptat.

Cele mai importante tipuri de fişiere din componenţa unui site sunt următoarele:

  • fişierele text care conţin informaţiile prezentate. Acestea sunt fişiere hipertext, codificate în HTML;
  • fişierele conţinând foi de stiluri, (CSS, Cascading Style Sheets) având extensia .css;
  • fişierele conţinând funcţii JavaScript, având extensia .js;
  • fişiere conţinând funcţii scrise în limbajul PHP, având extensia .php, ş.a..

În schema dată ultima componentă este o bază de date MySQL. Rolul acesteia este acela de a memora date specifice site-ului: cataloage de produse, date ale clienţilor înregistraţi ş.a.

Observaţie: Pe lângă categoriile de fişiere menţionate, un site foloseşte şi fişiere care conţin imagini. Acestea sunt folosite în foile de stiluri pentru realizarea fundalurilor elementelor afişate sau sunt fişiere care conţin imagini furnizate de client şi care trebuie afişate în paginile site-ului. Fişierele conţinând imagini sunt de regulă păstrate în directoare derivate din directorul rădăcină al site-ului.

Directorul rădăcină al unui site va conţine fişierele hipertext ale acestuia, începând cu fişierul principal denumit de regulă index. Acesta este de obicei codificat în HTML (index.html) dar poate fi şi alt tip: index.php, index.asp sau index.jsp, în funcţie de limbajul folosit. O modalitate de structurare a componentelor unui site simplu este cea din imagine.


TOP

Înainte de a începe

Realizarea fişierelor în format hipertext (.html), a foilor de stiluri, a fişierelor JavaScript şi a celorlalte componente ale unui site presupune utilizarea unei aplicaţii de editare adaptate. Există mai multe soluţii, mergând de la editoare simple, generale, instalate împreună cu sistemul de operare (Notepad de exemplu) până la aplicaţii dedicate: Dreamweaver (Adobe Co.), Aptana Studio ş.a. Există şi soluţii intermediare, intens folosite fiind Notepad++ sau Sublime Text.

În cele ce urmează va fi folosit editorul Sublime Text (https://www.sublimetext.com/).

Înainte de a începe realizarea primelor pagini, deoarece sunt vizate în mod deosebit documentele care conţin text realizat în limba română, va trebui activată în Windows scrierea în această limbă (Control Panel / Region and Language / Keyboard and Languages / Change Keyboards...).

Ca urmare pe bara de stare a calculatorului va apărea un selector destinat stabilirii limbii, de unde se poate impune limba Română şi tastatura românească.

Dispunerea caracterelor pe o tastatură românească este cea din imagine:

În cazul tastelor destinate inserării mai multor simboluri, accesul la fiecare dintre acestea se realizează folosind tastele funcţionale Shift şi AltGr, ca în schema următoare.


TOP

Crearea unei pagini web minimale

O pagină web minimală are conţinutul următor:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Titlul paginii</title>
   </head>
   <body>
      <h1>Prima pagină HTML</h1>
      <p>Acest paragraf conţine şi caractere cu diacritice.</p> 
      <!-- Iar acesta este un comentariu. Comentariile nu produc nimic pe ecran. -->
   </body>
</html>

Aşa cum se poate observa, un document în format hipertext conţine doar caractere obişnuite (ASCII). O pagină Web este constituită din elemente, fiecărui element asociindu-i-se o notaţie specifică. Exemple: paragrafe (p), titluri (h1 ... h6), corpul paginii (body) ş.a..

Pentru a marca diferitele elemente care formează pagina se folosesc marcaje. Un marcaj se formează încadrând notaţia unui element între paranteze formate din caracterele '<' şi '>'. Marcajele apar de regulă în perechi. La scrierea perechii unui marcaj numele elementului este precedat de '/'. Exemplu:

<p>Acesta este un paragraf.</p>

Există şi elemente care nu presupun folosire unei perechi de marcaje. De exemplu trecerea la aliniat nou (<br>), inserarea unei imagini (<img>) sau comunicarea spre browser a unor informaţii (<meta>).

Marcajele pot avea atribute. În exemplul dat marcajul <meta> are atributul charset="UTF-8". Valorile atributelor se încadrează între ghilimele (" ").

Întregul document în format hipertext formează elementul <html> şi este format din două elemente principale, <head> şi <body>.

Pe ecranul aplicaţiei de navigare va apărea doar conţinutul elementului <body>.

Pentru a vizualiza într-o aplicaţie de navigare pagina Web realizată se va deschide un editor de texte (Notepad sau, mai bine, Notepad++ sau Sublime Text) şi se va tasta în fereastra acesteia conţinutul fişierului.

După încheierea introducerii paginii se va salva fişierul cu numele index.html într-un director de pe disc şi apoi se va deschide în browser-ul implicit (selectare cu un dublu clic în File Explorer).

Observație: Fişierele salvate din Notepad sau Notepad++ au implicit extensia .txt. Pentru a salva fişierul realizat cu extensia corectă (.html), numele fişierului se va pune între ghilimele. În cazul aplicaţiei Notepad se va preciza şi modul de codificare (UTF-8).

Rezultat:



Observaţii:

  1. Dacă pagina este deschisă prin selectarea cu un dublu clic în File Explorer, adresa sa va începe cu file:///...
  2. Titlul documentului (elementul <title>) apare scris pe bara de titlu a aplicaţiei de navigare.
  3. Elementul <h1> este titlul principal şi este implicit scris mai mare. Acest element echivalează cu Heading 1 din Microsoft Word. Pentru subtitluri de diferite ranguri se pot folosi elementele <h2>, <h3>, ..., <h6>.
  4. Textul obişnuit se introduce folosind paragrafe (elemente <p>).
  5. În pagină se pot include comentarii. Pentru a marca o zonă din pagină ca fiind un comentariu, aceasta va fi încadrată între <!-- și -->.
  6. Pentru a putea folosi diacriticele specifice limbii române s-a comunicat browser-ului printr-un atribut al unui element meta setul de caractere utilizat: <meta charset="UTF-8">.
  7. Pentru orice neînțelegeri legate de elementele folosite pe parcursul acestui curs puteți accesa site-ul http://www.w3schools.com/. Tutorialele conținute în acest site sunt clare, concise, și noțiunile prezentate sunt imediat exemplificate dacă se apasă butonul Try it Yourself.

TOP

CSS

CSS (eng. Cascading Style Sheets, în traducere: foi de stiluri în cascadă) este limbajul actual de descriere a aspectului şi a dispunerii în fereastra browser-ului a informaţiilor din documentele hipertext. Relaţia dintre HTML şi CSS este prezentată în imaginea următoare:

Dacă ansamblul de elemente conţinut într-un fişier hipertext dă structura şi conţinutul unei pagini Web, dispunerea şi modul de afişare a elementelor în fereastra browser-ului este impus prin foi de stiluri (fişiere CSS).

Foile de stiluri permit realizarea şi altei funcţii esenţiale, respectiv adaptarea modului de afişare a informaţiilor la diferitele medii de afişare. Astfel, fără a interveni în fişierul hipertext, doar prin folosirea altei foi de stiluri se poate realiza afişarea corectă a unei pagini web pe un ecran normal, pe imprimantă sau pe ecranul unui telefon.

Descrierea în limbajul CSS a modul de afişare a elementelor dintr-un document HTML se realizează prin stiluri. Un document HTML poate fi formatat folosindu-se una sau mai multe foi de stiluri, ordinea acestora determinând rezultatul final. De obicei prima foaie aplicată conţine stiluri generale, valabile în toate site-urile unei firme de producţie de site-uri şi au rolul de a uniformiza modul în care diferitele browsere tratează site-urile. De multe ori numele dat acestui fişier este chiar reset.css. După acestă foaie urmează alte foi cu rol particular, legate de conţinutul fiecărui site în parte.

Un stil conţinut într-o foaie de stiluri constă la rândul lui din două părţi: un selector sau un set de selectori (elemente HTML sau selectori special definiţi) şi un bloc de descriere încadrat între acolade ({}). Exemplu:

  p, h3 {font-size: 0.75em;}

Ansamblul de stiluri care formează o foaie de stiluri poate fi înregistrat într-un fişier separat având extensia .css sau inserat în pagină, la început, în <head>. Odată definită, o foaie de stiluri poate fi ataşată tuturor paginilor unui site, dându-le acestora un aspect unitar.

Integrarea într-un fişier în format hipertext a unui fişier conţinând stiluri se realizează folosind elementul <link>, ca în exemplul următor:

  <link href="stil.css" rel="stylesheet">

Stilurile utilizate la afișarea unei pagini web sunt inserate la începutul fişierului hipertext, în secțiunea <head>. Dacă nu se folosesc fișiere .css, poate fi adăugat un element <style>, astfel:

<!DOCTYPE html>
<html lang="ro">
   <head>
      <meta charset="UTF-8">
      <title>George Cosbuc</title>
      <style>
       /*   reguli css  */
      </style>
   </head>

În foile de stiluri comentariile sunt încadrate între '/*' şi '*/'.


TOP

Principiile CSS

Un stil dintr-o foaie de stiluri se descrie pe baza schemei următoare:

Selectori

Selectorii specifică elementele din fişierul hipertext care vor fi afectate de stilul respectiv. Selectorii folosiţi sunt în primul rând elementele conţinute în fişierul HTML asociat: <p>, <h1> ... <h6>, <body>, <html> etc.. Se pot declara însă şi selectori suplimentari, aşa cum se va vedea în continuare.

Scrierea selectorilor poate fi complicată, ea depinzând de elementele din pagină vizate.

În funcţie de elementele din fişierul hipertext vizate, selectorii pot fi de mai multe tipuri, astfel:

  1. Selectori globali

Regulile care descriu stilul se vor aplica tuturor elementelor <h1>, <h2> şi <p>. După scrierea acestui stil se pot particulariza cele trei elemente prin stiluri suplimentare care le-ar viza eventual pe fiecare, separat. Datorită efectului de "cascadă", fiecare element dintre cele trei va păstra toate proprietăţile din blocurile în care este descris, valorile acelor proprietăţi fiind însă cele de la ultima definire.

  1. Selectori de tip clasă care apar ca valori ai atributului class folosit în elementele html vizate. La definirea unui stil pentru un astfel de selector numele clasei este precedat de un punct '.'. Exemplu:
  <h2 class="evident">Principalele reguli</h2>
  <p>Aceste <span class="evident">reguli trebuie 
  respectate</span> de către toţi vizitatorii.</p>
.evident {background-color:RGBA(255, 255, 0, 0.5);}
  1. Selectori de tip identificator (ID) care permit descrierea stilului folosit la afişarea unui element din pagină căruia i s-a atribuit un nume unic folosind atributul <id>. Exemplu:
<div id="continut">
...
</div>
#continut {
    width:960px;
    margin:0 auto;
    border:1px solid #AAAAAA;
}

Notă: Într-un document hipertext un nume specificat prin atributul id poate apărea o singură dată, el indicând un element anume din pagină. Pentru a impune acelaşi stil mai multor elemente din pagină se foloseşte atributul class prezentat mai sus.

  1. Selectori poziţionali. Aceşti selectori permit localizarea unor elemente din documentul hipertext pe baza poziţiei lor. Exemplu:
  nav ul li {background-color: yellow;} 

Stilul bazat pe acest selector se aplică elementelor <li> din fişierul hipertext conţinute în <ul>, iar <ul> este conţinut la rândul lui într-un element <nav>. Elementele din succesiunea folosită pentru localizarea elementelor selectate sunt separate printr-un spaţiu.


TOP