1.

Introducere
Adrian Adiaconitei
Obiective
ü Să ne cunoaștem
ü Logistica cursului
ü Aplicații / Programe folosite la curs
ü Internet
ü Protocolul HTTP
ü Arhitectura Client-Server
ü HTML
ü CSS
ü JavaScript
ü PHP
Despre mine
Adrian
Adiaconiței

ü Senior Software Engineer

ü Formator / Trainer / Profesor
Despre voi

üAșteptări?
Cele mai utilizate
limbaje din întreaga
lume

© Statista.com 2021
900 000 Deficit de programatori în Uniunea Europeană

130 000 Angajați în IT în România

45 000 Deficit de programatori în România

Sursa: Start-up.ro + EuroStat

Aplicatii/ Programe folosite
ü Windows / Mac / Linux
ü Google Chrome
ü Visual Studio Code
ü Git cu Github
ü iTerm2
ü XAMPP
Web 1, 2, 3 ... START! 01 Agenda

HTML fără … secrete! 02

IMAGINI = 100 de cuvinte 06
CODUL, direct la SURSĂ. 03
TABELE, dar nu în Excel. 07
ANCORA sus, navigăm 04
<FORM>ULARE, doar On-line. 08
Web 1,2,3 ... Start!
ü WWW - Tim Berners-Lee 1989
http://info.cern.ch/hypertext/WW
W/TheProject.html
ü Web 2.0
ü Web 3.0
Internet
Internet
Internet
Pentru ca toate lucrurile conectate la internet să comunice între
ele e nevoie ca ele să se pună de acord asupra unui protocol de
comunicare (așa cum oamenii se înțeleg într-o anumită limbă).
Există multe protocoale de comunicare:
HTTP, HTTPS - HyperText Transfer Protocol
FTP, SFTP - File Transfer Protocol
SMTP - Simple Mail Transfer Protocol,
POP - Post Office Protocol,
SIP - Session Initiation Protocol,
IP - Internet Protocol
Populatia:
7.912.207.076

Site-uri online
1,911,108,707
 Protocolul HTTP/HTTPS
ü HTTP: Este un set de reguli de
comunicare intre client (browser)
si server. Comunicarea HTTPS
(HyperText Transfer Protocol /
Secure) este criptata
ü Adresa IP – mod de
recunoastere a serverului
ü Port - numar de la 0 - 65535
• Determina modul de comunicare
• Se leaga cu adresa IP cu care
formeaza o adresa de retea completa
Internet
Protocolul HTTP/HTTPS
ü Fiecare resursă are o adresă Uniform Resource Identifier (URI) sau
Uniform Resource Locator (URL)
ü Un URI este folosit pentru a identifica unic fiecare lucru din World Wide
Web: pagini web, documente, date.
ü URI: protocol://host:port/cale/resursa
ü URL: protocol://host:port/cale
ü 𝑈𝑅𝐿 ⊂ 𝑈𝑅𝐼
ü Exemple
https://www.google.com/search?q=url+vs+uri&oq=url+vs+u&
ftp://www.ftp.org/docs/test.txt
mailto:user@test101.com
Protocolul HTTP/HTTPS
HyperText
 Status - Coduri HTTP
ü Coduri HTTP pe care ar fi bine sa le stiti
• 1XX – sau coduri de informare “cerere inregistrata, se continua procesul”
• 2XX – sau coduri de confirmare a succesului actiunii – cererea a fost primita,
inteleasa, acceptata si indeplinita cu success
• 3XX – sau coduri de redirectionare – utilizatorul trebuie sa indeplineasca
taskuri suplimentare pentru indeplinirea cererii
• 4XX – Client error – cele mai cunoscute coduri intalnite de catre utilizatorii
internetului, codurile de tipul 4XX arata ca utilizatorul a intampinat o problema
• 5XX – Server error – serverul nu a indeplinit o actiune apparent valida
Cascading Style Sheets

Hypertext Markup Language

HTML fără … secrete!
ü este un limbaj care permite structurarea conținutului
ü 1991 HTML
ü 1994 HTML 2 PHP
ü 1996 CSS 1 + JavaScript
ü 1997 HTML 3.2
ü 1998 CSS 2
ü 1999 HTML 4.01, bazele CSS3
ü 2000 XHTML 1
ü 2002 Design Web fara tabele
ü 2005 AJAX
ü 2009-2010 HTML 5
ü 2014 recomandarea HTML 5.0
Sintaxa HTML
- foloseste elemente pentru
descrierea continutului.
- tagurile sunt cuvinte cheie
HTML delimintate de < / >,
care marcheaza inceputul si
sfarsitul unui element
- tagurile de deschidere pot
avea atribute
Structura unei pagini HTML
Aplicatia1:
ü Deschideti un editor de text
(VS Code);
ü Scrieti codul din dreapta;
ü Salvati fisierul: curs1_ap1.html
(litere, cifre, _ , -);
ü Deschiteti fiserul
curs1_ap1.html cu un browser
(Chrome);
 Organizarea semantică a paginilor
HTML5
de tip block : de tip inline:
<header> - antetul paginii • <strong> - cuvinte importante
<nav> - navigare • <em> - cuvinte accentuate
<article> - articol din pagina • <img>
<section> - sectiune din pagina
<aside> - coloanele laterale
<footer> - subsolul paginii https://www.w3.org/TR/html5-diff/
Formatarea textului
Adaugarea titlurilor – elementele h1 - h6
<p>Acesta este un paragraf.</p>
<strong></strong> si <b></b>
<em></em> si <i></i>
<mark> Cuvinte marcate</mark>
<q> Exemplu de citat</q>
Exemplu de _indice
Exemplu de ^exponent
<code>Un fragment de cod</code>
Formatarea textului
<pre>pastreaza formatarea</pre>
<span>grupeaza elemente
inline</span>
<hr> - linii de separare
<br> - linie noua
<wbr> - desparte cuvantul
Aplicatia2: Adaugati elementele HTML de mai sus in curs1_ap2.html
Liste - <P>unem punctul pe <li>
- listele permit organizarea secventiala a
continutului
ü <ul><li> Liste neordonate
ü <ol><li> Liste ordonate
ü <dl>, <dt>, <dd> Liste de date
ü Liste ierarhice
Liste
Aplicatia3: Faceti o pagina curs1_ap3.html, care
sa contina toate tipurile de liste.
Link-uri - ANCORA sus, navigăm
ü Termenii ancora, link si hyperlink sunt echivalenti
ü link-urile permit navigarea intre site-uri, intre paginile
aceluiasi site, in interiorul aceleiasi pagini, o adresa de
email sau un alt tip de document.
ü Link-ul are doua componente: sursa (text, imagine sau
multimedia) si destinatia care indica locatia dorita.
ü link-urile sunt create folosind elementul ancora a
ü Ex.: <a href=‘https://www.link-academy.com’ > LINK Academy</a>
Link-uri
Aplicatia4: Faceti o pagina curs1_ap4.html, care
sa contina tipuri de link-uri.
Imagini = 1000 de cuvinte
Imagini
ü Imaginile HTML sunt definite cu elementul <img>
(nepereche / vid).
ü Elementul img este de tip inline
ü Numele şi dimensiunile imaginii pot fi precizate ca atribute.
ü Atributul src contine URL-ul catre imagine.
ü Ordinea in care apar atributele nu este relevanta
<img src="img/logo.jpg" width="25%" alt="Logo LinkAcademy"
title="Scoala pentru o cariera IT profitabila">
Media – Video / Audio
<audio controls>
<source>
</audio>
<video controls>
<source>
</video>
Aplicatiea5:curs1_ap5.html
 TABELE, dar nu în Excel
Coloana 1 Coloana 2 Coloana 3 Coloana 4
ü Afișare informațiilor

ü <table><tr><td> Rând 12 32 23 45

Rând 67 23 45 65

Rând 67 49 78 34
Tabele
ü tabelele sunt containere care pot afișa text,
imagini, liste etc.
ü reprezentarea datelor organizate sub forma de
linii și coloane.
ü se folosesc numai pentru reprezentarea datelor,
nu pentru estetica paginii
ü elementele pentru tabele: table, tr, td, th,
caption, colgroup, col, thead, tbody, tfoot.
Tabele
<table>
<tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr>

<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

</table>

Aplicatia 6: curs1_ap6.html
Formulare
Formulare
• Formularele permit transfer de date intre browser si server;
• elementul container care colecteaza datele este form
• specificarea actiunii se face cu ajutorul atributului action
• transmiterea datelor catre server se realizeaza cu un
element de tip submit
• sunt doua modalitati de trimitere a informatiei folosind
metoda get caz in care informatiile apar un URL si metoda
post in care sunt transmise separate
• colectarea informatiilor se face cu elementul input,avand
atributele type si name.
Formulare
Formulare
<input type="text" name=“cuvant“/>
ü type=
– text
– password
– radio
– checkbox
– reset
– email
– file
– submit
– ……..
Formulare
Aplicatia6: Faceti o pagina curs1_ap6.html, care
sa contina um formular.
 Formulare web

URL-ul poate avea maxim 8192 de caractere

Recapitulare
ü HTML este un limbaj folosit pentru descrierea si structurarea
arborescenta a continutului paginilor.
ü Radacina acestei structuri arborescente este elementul html si are
doi descendenti head si body.
ü Elementele pereche sunt specificate cu ajutorul tagurilor de
deschidere si tagurilor de inchidere.
ü Elementele vide au doar tagul de deschidere.
ü Pentru setarea informatiilor auxiliare elementele pot avea atribute
plasate in tagul de deschidere.
ü Pentru afisarea caracterelor speciale se folosesc entitatile HTML.
ü Elementele descendente din body pot fi: de tip block si de tip inline.
Provocari
1. Instalati VS Code, Git
2. Cont GitHub