Curs 2

Dezvoltare Web Frontend (prima parte)
Informatică Aplicată 1 - cursul 2
Victor BUCATĂ
Facultatea de Inginerie Electrică - UNS, TPB
18 octombrie 2023
Victor BUCATĂ (Facultatea de Inginerie Electrică - UNS, TPB) Dezvoltare Web Frontend (prima parte) 18 octombrie 2023 1 / 96
Cuprins
1 Introducere 8 Structura de bază a unui document HTML

9 Titluri HTML s, i elemente semantice
2 Ce este HTML?
10 Elemente de bloc s, i de linie
3 Ce este CSS?
11 Liste
4 Ce este JavaScript? 12 Entităt, ile HTML de caracter
5 Cum putem dezvolta un site web? 13 Linkuri HTML
6 Resurse utile 14 Afis, area imaginilor
7 Limbajul HTML 15 Exemple
Proiectul HTML
▶ Proiectul trebuie ı̂ncărcat ı̂n spat, iul rezervat pe Moodle până ı̂n săptămâna 6 (termen: 10
Noiembrie 2023).
▶ Vă organizat, i ı̂n maxim 10 echipe per grupă a câte 2, 3 sau 4 student, i.
▶ Se va prezenta la laborator ı̂n săptămâna 7 (13-19 Noiembrie 2023).
▶ Se vor da două note: o notă ı̂ntrebări pentru fiecare membru al echipei referitoare la programarea
proiectului (10p) s, i o notă pentru proiect per ansamblu (20p).
▶ Tema proiectului trebuie să fie din domeniul ingineriei electrice sau din domenii conexe.
▶ Proiectul ı̂l putet, i realiza cu ce tehnologie/framework dorit, i.
▶ Trebuie să cont, ină minim 3 fis, iere HTML s, i 1 fis, ier CSS (opt, ional JavaScript) s, i va trebui să putet, i
descrie codul.
Proiectul HTML - exemple de teme
▶ Circuite electrice (teoreme, metode de rezolvare)
▶ Câmp electromagnetic (legi, aplicat, ii)
▶ Personalităt, i din domeniu
▶ Automobile electrice
▶ Energie verde
▶ Magnet, i, bobine s, i alte componente
▶ Componente hardware
▶ Algoritmi s, i alt, i termeni din informatică
▶ Tehnologia Blockchain
▶ Calculatorul cuantic
▶ Inteligent, a artificială
▶ Surface-deep-dark web
▶ Lista este deschisă!
Webografie
▶ Site-ul MDN oferă documentat,ie detaliată s, i tutoriale pentru toate cele trei limbaje: HTML
https://developer.mozilla.org/en-US/docs/Web/HTML, CSS https://developer.mozilla.org/en-US/docs/Web/CSS s, i
JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript.
▶ W3Schools https://www.w3schools.com/ este o sursă populară de ı̂nvăt,are a tehnologiilor web, care oferă tutoriale, exemple practice s, i teste pentru
HTML, CSS s, i JavaScript.
▶ Codecademy https://www.codecademy.com/ oferă cursuri interactive pentru HTML, CSS s, i JavaScript. Unele lect,ii sunt gratuite, iar pentru acces la
cont,inutul premium putet,i opta pentru abonament.
▶ freeCodeCamp https://www.freecodecamp.org/ este o platformă educat,ională gratuită care oferă cursuri extinse pentru dezvoltarea web, inclusiv
HTML, CSS s, i JavaScript. Această platformă pune accent pe proiecte practice.
▶ Pe platformele de ı̂nvăt,are online Coursera s, i edX putet,i găsi cursuri de calitate sust,inute de universităt,i s, i institut,ii de renume. De obicei, acestea oferă s, i o opt,iune
de acces gratuită.
▶ Există o mult,ime de tutoriale video pe YouTube pentru ı̂nvăt,area HTML, CSS s, i JavaScript. Unele canale populare pentru acest scop sunt ”Traversy Media”, ”The
Net Ninja” s, i ”Academind”.
▶ Stack Overflow https://stackoverflow.com/ nu este doar o platformă de ı̂ntrebări s, i răspunsuri, ci s, i o resursă excelentă pentru găsirea răspunsurilor la
problemele specifice cu care vă confruntat,i ı̂n timp ce ı̂nvăt,at,i s, i dezvoltat,i ı̂n HTML, CSS s, i JavaScript.
▶ Pe GitHub https://github.com/ putet,i găsi proiecte open source s, i exemple de cod HTML, CSS s, i JavaScript. Este o modalitate bună de a ı̂nvăt,a
observând codul altora.
Introducere: Ce este hipertextul?
Ce este hipertextul?
▶ Ted Nelson, filozof, sociolog s, i informatician american introduce termenii de hypertext” s, i
”
hypermedia”. El defineşte ı̂n 1965 hipertextul (text non-linear) ca fiind un ”material scris
”
sau grafic interconectat ı̂ntr-o manieră complexă care ı̂n mod convenţional nu poate fi
reprezentat pe hârtie. El poate conţine cuprinsuri ale propriului său conţinut şi relaţiile
dintre diverse părţi componente; poate de asemenea să conţină adnotări, adăugiri şi note
de subsol pentru cei care doresc să-l examineze”.
▶ Metodă de organizare a informaţiilor ı̂n care datele sunt memorate ı̂ntr-o reţea de noduri
şi legături, putând fi accesată prin intermediul browserelor şi manipulată de un editor.
Ce crede ı̂n prezent Ted Nelson despre hipertext (v. visible connections):
https://www.youtube.com/watch?reload=9&v=hMKy52Intac
Un vizionar al WWW - Vannevar Bush - 1945
Vannevar Bush (n. 11 martie 1890) a fost un inginer american cunoscut pentru activitatea sa
ı̂n domeniul computerelor analogice, pentru rolul său politic ı̂n dezvoltarea bombei atomice,
fiind unul din oamenii important, i ai Proiectului Manhattan s, i pentru Memex, un concept (apărut
ı̂n anii 1930) pe care se bazează ret, eaua de internet WWW-World Wide Web apărută zeci de
ani mai târziu (eseul ”As we may think” 1945).
Începuturile WWW
▶ 12 noiembrie 1990: Bazându-se pe conceptul de hipertext creat de Ted Nelson s, i pe
ideile lui Vannevar Bush, Tim Berners-Lee de la CERN, cu ajutorul lui Robert Cailliau
publică o propunere de a construi un ”Proiect Hypertext” denumit ”WorldWideWeb”
(cunoscut şi ca ”W3”) ca fiind o reţea de documente hypertext care să fie văzute de
browsere folosind o arhitectură de tip client-server.
▶ Până la sfârşitul lui 1990, Berners-Lee construieşte toate instrumentele necesare pentru
un Web funcţional: primul browser web (care era ı̂n acelaşi timp şi editor web), primul
server web şi prima pagină web care constituia proiectul.
▶ 1992: 20 de servere web ı̂n ı̂ntreaga lume
▶ 1993: apare browserul Mosaic
▶ de atunci a cunoscut o dezvoltare spectaculoasă
Primul server web
Acest calculator (NeXT) a fost folosit de Tim Berners-Lee de la CERN şi a devenit primul
server Web din lume.
Ce spune Tim Berners-Lee ı̂n 2018 despre invent, ia sa
Tim Berners-Lee, celebrul inventator britanic al World Wide Web-ului, vine cu o idee
considerată revoluţionară şi propune o platforma descentralizată numită Solid unde fiecare
utilizator să-şi poată gestiona datele şi să poate decide dacă vrea să le partajeze cu cineva.
Berners-Lee a spus de multe ori că este ı̂ngrozit de ceea ce a ajuns Internetul şi de faptul că
oamenii nu mai au deloc control asupra datelor personale.
Cum funct, ionează WWW?
Cum funct, ionează arhitectura client-server?
WWW se bazează pe arhitectura client-server.
▶ Un client poate fi de exemplu un browser web

▶ Folosind TCP/IP, clientul trimite solicitări HTTP serverului gazdă
▶ Solicitarea este dezmembrată ı̂n pachete HTTP care sunt transmise prin infrastructura de
comunicat, ii TCP/IP calculatorului gazdă
▶ Calculatorul gazdă (server) execută serviciul cerut. El adăpostes, te site-ul web
▶ Sunt accesate baza de date s, i alte aplicat, ii de pe calculatorul gazdă
Cum sunt structurate URL-urile?
URL = Uniform Resource Locator
1 tipul de protocol (uzual http sau https)
2 domeniul gazdă
3 directorul de pe domeniul gazdă
4 numele fis, ierului
Cum funct, ionează serverele DNS?
▶ Serverul de nume local poate să nu aibă adresa pe care o căutăm. Atunci se conectează
la un DNS de pe Internet
▶ DNS local contactează DNS primar apoi secundar
▶ DNS local transmite clientului adresa IP
Frontend vs. Backend
Ce sunt HTML, CSS s, i JavaScript?
Tehnologiile care stau la baza WWW
Ce este HTML?
Ce este HTML?
Ce este HTML?
Ce este HTML?
Ce este HTML?
Ce este HTML?
Ce este HTML?
HTML este limbajul de marcare folosit pentru descrierea cont, inutului paginilor web.
▶ Tim Berners-Lee pune bazele lui ı̂n anul 1989 pentru comunicarea pe Internet ı̂ntre
fizicienii de la CERN.
▶ HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language)
standardizat ı̂n 1986.
▶ HTML nu este un limbaj de programare, e un limbaj de marcare.
▶ Un limbaj de marcare este format dintr-un set de etichete (taguri) de marcare.
▶ Cont, inutul documentelor HTML este descris folosind etichete (taguri) HTML.
▶ Fiecare etichetă (tag) HTML descrie un tip de cont, inut diferit.
Cum s-a ajuns la HTML5
Ce este relevant?
Ce este CSS?
Ce este CSS?
▶ CSS este acronimul de la Cascading Style Sheets (Foi de Stil ı̂n Cascadă).
▶ CSS descrie modul ı̂n care sunt afis, ate elementele HTML pe ecran, hârtie sau alte
suporturi.
▶ CSS cres, te eficient, a. Poate controla aspectul mai multor pagini Web foarte us, or.
▶ Foile de stil externe sunt stocate ı̂n fis, iere CSS.
La ı̂nceput era doar textul... s, i nu exista stil.
▶ HTML provine din SGML (Standard Generalized Markup Language) standardizat ı̂n 1986.
▶ a fost conceput init, ial pentru a structura un document bazat pe text
▶ text formatat cu niveluri multiple de titluri s, i ı̂n corpul paginii (body)
Apoi au apărut imaginile.
▶ O imagine face cât o mie de cuvinte

▶ Tagul IMG pentru imagini a fost introdus cu HTML 2.0 (aprilie 1994 - septembrie 1995)
▶ singurul atribut suplimentar disponibil, atributul alt.
Apoi au apărut tabelele.
▶ Începând cu versiunea HTML 3.0 au fost introduse tabelele.

▶ HTML 3.0 nu a fost niciodată ”aprobat” ci HTML 3.2
”Manipularea” tabelelor
▶ Dezvoltatorii observă că tabelele pot fi folosite s, i pentru altceva decât prezentarea datelor.
▶ Tabelele sunt folosite pentru structurarea paginii web.
▶ În general sunt folosite pe desktop
Web designerii intră ı̂n act, iune.
▶ O dată cu HTML 3.2, devine posibilă stabilirea fonturilor, culorilor, fundalurilor etc.
▶ S, i astfel se nas, te designerul web.
▶ Afirmat, ia ”Cont, inutul este cel mai important” nu mai este general valabilă.
▶ HTML 3.2 este standardizat ı̂n ianuarie 1997
Browserele evoluează.
▶ La ı̂nceput existau doar browsere bazate pe text.
▶ Apare Mosaic s, i apoi apar alte browsere.
▶ Netscape s, i IE introduc taguri proprii pentru atractivitate
▶ Unele taguri proprii vor fi scrise ı̂n specificat, ii - Războiul browserelor
▶ Nu toate browserele afis, au aceeas, i pagină la fel.
O solut, ie mai bună - CSS1
▶ În decembrie 1996 apare CSS1 pentru a separa modul de afis, are fat, ă de cont, inut.
▶ Proprietatea ”float” permite pozit, ionarea unor elemente precum imaginile
Pozit, ionarea CSS2
▶ Permite structurarea paginilor fără a folosi tabele.

▶ Exemple (proprietatea position): absolute, relative, static s, i fixed
▶ Apare avantajul as, a numitelor print sheets (necesare imprimării corecte a paginilor)
Avantajele folosirii CSS
▶ Aspect unitar pentru site
▶ Cu un fis, ier sau două CSS se ment, ine stilul pentru ı̂ntreg siteul - nefiind nevoie de
implementarea lui ı̂n fiecare pagină
▶ Cu CSS se câs, tigă timp
▶ Des, i la ı̂nceput ia mai mult decât un editor de tip WYSIWYG, ulterior viteza cres, te
▶ Se poate schimba aspectul ı̂ntregului site prin modificarea unui singur fis, ier de stil
▶ La introducerea unui aspect, nu mai este nevoie de verificarea pagină cu pagină a siteului
Demonstrat, ie CSS: O singură pagină HTML - mai multe stiluri!
Urmărit, i exemplul de mai jos - o pagină HTML afis, ată cu patru foi de stil diferite. Apăsat, i pe
”Foaia de stil 1”, ”Foaia de stil 2”, ”Foaia de stil 3”, ”Foaia de stil 4” pentru a vedea diferitele
stiluri:
http://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/
demo-css.html
Un site interesant (pentru a vedea funct, ionalitatea CSS):

https://www.csszengarden.com/
CSS3
▶ CSS3 nu este o singură specificat, ie - este formată din module

▶ Această abordare permite W3C prioritizarea specificat, iilor s, i timp de react, ie rapid la
cererile noi
▶ Starea actuală a CSS3: http://www.w3.org/Style/CSS/current-work
Ce este JavaScript?
Ce este JavaScript?
▶ JavaScript este un limbaj de programare de script (codul este vizibil utilizatorului),
interpretat ı̂n browser, dezvoltat de Netscape s, i Sun s, i cu care pot fi create pagini web
interactive.
▶ HTML 5 cont, ine s, i descrierea unor funct, ii API (Application Programming Interface)
JavaScript care interact, ionează cu documentul HTML prin intermediul arborelui DOM
(Document Object Model).
Ce metode avem pentru a crea site-uri web?
Ce metode avem pentru a crea site-uri web?
1 direct HTML, CSS s, i JavaScript, folosind editoare de text, de exemplu: Notepad++,
Sublime Text 3, Atom
2 Editoare grafice profesionale de tip WYSIWYG, ex: Adobe DreamWeaver (Creative
Cloud), Microsoft Visual Studio
3 Website Builder (nu este nevoie de experient, ă ı̂n domeniu), ex: WIX,GoDaddy,Weebly,
nice.page
4 Content Management System (CMS), ex: Wordpress, Drupal, Joomla
Metoda 1: Direct cod HTML,CSS, JavaScript
▶ cea mai laborioasă metodă dar s, i cea mai flexibilă
▶ necesită cunos, tint, e speciale, curbă de ı̂nvăt, are lentă
▶ poate fi folosită cu succes ı̂n paralel cu celelalte metode
▶ se pot folosi editoare de gen Notepad++, SublimeText 3, Atom
▶ O select, ie bună a instrumentelor indispensabile: https://blog.udacity.com/
2015/04/13-useful-web-dev-tools-cant-live-without.html
▶ Se pot folosi biblioteci de cod (Bootstrap, JQuery)
Metoda 2: Editoare Web profesionale
▶ WYSIWYG = What You See Is What You Get
▶ nu este nevoie de cunos, tint, e avansate de HTML, CSS s, i JavaScript dar trebuie
cunoscute programele
▶ Exemple: Adobe DreamWeaver (Creative Cloud), Microsoft Visual Studio
▶ Rezultatul este profesional!
Metoda 3: Website Builder
Metoda 3: Website Builder
▶ Care este cel mai bun Website Builder?
diverse facilităt, i: teme responsive... eCommerce
▶ Cum scriu un site web?
nu este nevoie să fii expert, oricine poate crea un site web
▶ Cum aleg un serviciu de gen Website Builder?
pentru un blog personal este suficient un serviciu simplu.
pentru facilităt, i suplimentare gen eCommerce, este nevoie de un serviciu mai avansat.
Metoda 4: CMS
Metoda 4: CMS
▶ CMS = Content Management System
▶ Metodă potrivită atunci când avem un site complex, cu mult, i utilizatori ı̂nscris, i
▶ Datele noi se introduc us, or prin intermediul unei interfet, e facile
▶ Dezavantaj: viteză scăzută
Resurse utile
▶ Standarde: http://www.w3.org
▶ Resurse pentru validare: http://validator.w3.org
▶ Resurse pentru investigarea caracteristicilor: http://www.caniuse.com
▶ Resurse pentru statisticile browserelor: http://w3schools.com/browsers/
Limbajul HTML
Structura unui tag HTML
Elemente ce au doar tag de deschidere
Structura de bază a unui document HTML
Declarat, ia <!DOCTYPE>
▶ Declarat, ia <!DOCTYPE>ajută browserul să afis, eze pagina web corect.

▶ Pe web există mai multe tipuri de documente.
▶ Pentru a afis, a documentul corect, browserul trebuie să cunoască tipul s, i versiunea.
▶ Declarat, ia doctype nu este obligatoriu să fie scrisă cu majuscule. Următoarele cazuri sunt
acceptate:
1 <!DOCTYPE html>
2
3 <!DOCTYPE HTML>
4
5 <!doctype html>
6
7 <!Doctype Html>
Declarat, ii <!DOCTYPE>uzuale
▶ HTML 5:
<!DOCTYPE html>
▶ HTML 4.01:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”
”http://www.w3.org/TR/html4/loose.dtd”>
▶ XHTML 1.0:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
▶ Vom folosi doar declarat, ia pentru HTML5.
Un exemplu minimal HTML
1 <!DOCTYPE html> ▶ Declarat, ia DOCTYPE defines, te tipul de document ca fiind HTML.

2 <html>
3 <head> ▶ Textul dintre <html>s, i </html>defines, te cont, inutul documentului
4 <meta charset="utf-8"> HTML.
5 <title>Titlul paginii
6 </title> ▶ Textul dintre <head>s, i </head>oferă informat, ii despre document.
7 </head>
8 <body> ▶ Textul dintre <title>s, i </title>furnizează titlul documentului.
9
10 <h1>Primul titlu</h1> ▶ Textul dintre <body>s, i </body>defines, te cont, inutul vizibil al
11 <p>Primul paragraf.</p> paginii.
12
13 </body> ▶ Textul dintre <h1>s, i </h1>defines, te un titlu de nivel 1.
14 </html>
▶ Textul dintre <p>s, i </p>defines, te un paragraf.
▶ http://itee.elth.pub.ro/˜vbucata/ia/cursuri/
ex-html-css/ex1v0.html
Structura unei pagini HTML
Numai domeniul <body>(suprafat, a albă) este afis, ată de către browser.
Titluri HTML s, i elemente semantice
Titluri HTML
▶ Titlurile sunt elemente importante din punct de vedere semantic ı̂n documentele HTML.
▶ Titlurile (antetele) sunt definite cu etichetele de la <h1>la <h6>.
▶ <h1>defines, te cel mai important titlu iar <h6>defines, te cel mai put, in important titlu.
1 <h1>Acesta este un titlu</h1>
Observat, ie: Browserele adaugă ı̂n mod automat spat, ii albe (o margine) ı̂nainte s, i după fiecare
titlu.
Titlurile reflectă ceva important
▶ Folosit, i etichetele h1...h6 pentru titluri. Nu le folosit, i pentru a face corpul de litere mai
mare sau aldin.
▶ Motoarele de căutare folosesc titlurile pentru a indexa structura s, i cont, inutul paginilor
web.
▶ Utilizatorii răsfoiesc paginile prin titluri. Este importantă folosirea titlurilor pentru a
structura documentul.
▶ Titlurile h1 ar trebui să fie titlurile cele mai importante, urmate de h2, h3 etc.
Elemente semantice
▶ Sunt elemente ce implică o anumită important, ă pentru cont, inut.
▶ Oamenii/dispozitivele pot ı̂nt, elege mai bine cont, inutul inclus ı̂ntr-un element semantic.
▶ Deasemenea pot ajuta motoarele de căutare, v. SEO
▶ HTML 5 oferă noi elemente semantice care definesc diferitele părt, i ale paginii web.
Element Descriere
header antet pentru un document sau sect, iune
nav container pentru navigare
section sect, iunea unui document
article articol de sine stătător
aside bară laterală
footer subsolul unui document sau al unei sect, iuni
details detalii suplimentare
summary antet pentru detalii
Pe scurt:
▶ Alegerea corectă a cont, inutului elementului H1 este crucială pentru SEO

▶ Elementele semantice permit o expresie mai sugestivă a structurii paginii HTML
Elemente de bloc s, i de linie
Elemente de bloc s, i de linie
▶ Un element de nivel bloc ı̂ncepe ı̂ntotdeauna pe o linie nouă s, i ocupă ı̂ntreaga lăt, ime
disponibilă.
▶ Elementul <div> este un element de nivel bloc.
▶ Exemple de elemente de tip bloc:
▶ <div>, <h1>- <h6>, <p>, <form>
▶ Un element de nivel linie (inline) nu este obligatoriu să ı̂nceapă pe o linie nouă s, i ocupă
doar lăt, imea necesară afis, ării lui.
▶ Exemple de elemente de linie:
▶ <span>, <a>, <img>
▶ Obs: elementele div s, i span nu fac parte oficial din HTML5 dar ı̂ncă sunt folosite.
Liste
Liste HTML
▶ Cele mai uzuale liste sunt cele neordonate, ordonate s, i cele descriptive.
▶ Listele sunt adesea folosite pentru structurarea port, iunilor de navigare din pagina web.
Liste neordonate
▶ O listă neordonată ı̂ncepe cu eticheta <ul>. Fiecare element al listei ı̂ncepe cu eticheta
<li>.
▶ Elementele listei vor fi marcate cu nis, te cercuri mici negre:
1 <ul>
2 <li>Rezistor</li>
3 <li>Bobina</li>
4 <li>Condensator</li>
5 </ul>
Liste ordonate
▶ O listă ordonată ı̂ncepe cu eticheta <ol>. Fiecare element al listei ı̂ncepe cu eticheta
<li>.
▶ Elementele listei vor fi marcate cu numere:
1 <ol>
2 <li>Rezistor</li>
3 <li>Bobina</li>
4 <li>Condensator</li>
5 </ol>
Liste ordonate - atributul type
La o listă ordonată poate fi folosit atributul type pentru a defini tipul marcatorului:
Stil Descriere - Elementele listei vor fi marcate

type=”1” cu numere (implicit).
type=”A” cu litere mari.
type=”a” cu litere mici.
type=”I” cu cifre romane mari.
type=”i” cu cifre romane mici.
Liste descrieri
▶ O listă descriere este o listă de termeni, fiecare având o descriere.
▶ O listă descriere ı̂ncepe cu eticheta <dl>. Fiecare termen se introduce cu eticheta <dt>
iar fiecare descriere cu eticheta <dd>.
1 <dl>
2 <dt>Cafea</dt>
3 <dd>- bautura fierbinte inchisa la culoare</dd>
4 <dt>Lapte</dt>
5 <dd>- bautura rece de culoare alba</dd>
6 </dl>
Liste imbricate
Listele pot fi imbricate (liste ı̂n interiorul altor liste):
1 <ul>
2 <li>Rezistoare</li>
3 <li>Tranzistoare
4 <ul>
5 <li>Bipolare</li>
6 <li>Cu efect de camp/li>
7 </ul>
8 </li>
9 <li>Bobine</li>
10 </ul>
Observat, ie: Elementele listelor pot cont, ine noi liste sau alte documente HTML precum imagini
s, i linkuri.
Entităt, ile HTML de caracter
Referint, e entităt, i caracter
Pe scurt:
Entităt, ile HTML

▶ ajută la eliminarea problemelor de afis, are
▶ previn o codare de caracter limitată
▶ oferă caractere ce nu sunt disponibile la tastatură
Linkuri HTML
Linkuri
▶ Linkurile se găsesc ı̂n aproape toate paginile web. Linkurile permit utilizatorilor să
navigheze de la o pagină la alta.
▶ Linkurile HTML se mai numesc s, i hiperlinkuri.
▶ Un hiperlink este un text sau o imagine pe care dacă apăsat, i, sărit, i la alt document.
Sintaxa linkurilor
În HTML linkurile sunt definite folosind eticheta <a>:
<a href=”url”>text link </a>
1 <a href="http://itee.elth.pub.ro/˜vbucata/">Laboratorul de Informatica</a>
▶ Atributul href specifică adresa destinat, ie (http://itee.elth.pub.ro/ vbucata/)

▶ Doar textul linkului este vizibil (Laboratorul de Informatica).
▶ Apăsând pe textul linkului vet, i fi redirect, ionat, i către adresa respectivă.
Sintaxa linkurilor
▶ Observat, ie: Cont, inutul linkului nu trebuie să fie obligatoriu text. Poate fi o imagine HTML
sau orice alt element HTML.
▶ Observat, ie: Fără semnul slash de la sfârs, itul adresei subfolderului, se pot genera două
cereri serverului. Cele mai multe servere vor adăuga automat un slash la sfârs, itul adresei
s, i apoi vor genera o nouă cerere.
▶ Exemplul de mai sus a folosit un URL absolut (adresa completă a unui site web).
▶ Dacă atributul target are valoarea ” blank”, linkul se va deschide ı̂ntr-o fereastră nouă.
▶ Un link local (către acelas, i site web) este specificat folosind un URL relativ (fără
http://www....).
1 <a href="lectia1.html">Lectia 1</a>
Afis, area imaginilor
Elemente imagine
În paginile web pot fi incluse imagini ı̂n diferite formate: jpg, gif, png
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <h2>Emitator radio</h2>
5 <img src="schema.jpg" alt="Schema emitator unde ultrascurte" style="width:304px;
height:228px;">
6 </body>
7 </html>
Observat, ie: specificat, i ı̂ntotdeauna lăt, imea s, i ı̂nălt, imea unei imagini. Dacă acestea nu sunt
specificate, pagina va fi afis, ată necorespunzător ı̂n timp ce se ı̂ncarcă imaginea.
Sintaxa elementelor imagine
▶ În HTML imaginile sunt definite folosind eticheta <img>.
▶ Elementul <img>este vid, nu cont, ine decât atribute s, i nu are un tag de sfărs, it.
▶ Atributul src specifică adresa web (URL) a imaginii:
1 <img src="url" alt="un_text">
▶ Atributul alt specifică un text alternativ pentru o imagine, ı̂n cazul ı̂n care imaginea nu
poate fi afis, ată (conexiune lentă, o eroare ı̂n atributul src sau dacă utilizatorul foloses, te
un screen reader).
1 <img src="numegresit.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
▶ Atributul alt este obligatoriu. O pagină web nu va fi validată fără el.
Mărimea imaginii - lăt, imea s, i ı̂nălt, imea
▶ Pentru a specifica lăt, imea s, i ı̂nălt, imea unei imagini poate fi folosit atributul style.
▶ Valorile sunt specificate ı̂n pixeli (utilizat, i px după valoare):
1 <img src="html5.gif" alt="Emblema HTML 5" style="width:128px;height:128px;">
▶ Pot fi utilizate s, i atributele width s, i height. Valorile sunt specificate implicit ı̂n pixeli:
1 <img src="html5.gif" alt="Emblema HTML 5" width="128" height="128">
Concluzii
Am văzut:
▶ ce este HTML s, i rolul pe care ı̂l joacă ı̂n proiectarea web
▶ resursele utile pentru orice proiectant web
▶ ce ı̂nseamnă un tag/etichetă
▶ sintaxa corectă a unui element HTML
▶ structura unei pagini web
▶ modurile de editare a unei pagini web
▶ principalele elemente HTML (titluri, paragrafe, el. semantice, liste, linkuri, imagini)
Recapitulare prin exemple HTML
Putet, i urmări exemplele de mai jos:
http:
//itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/index.html
Întrebări ?
Vă mult, umesc pentru atent, ie!

Curs 2

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 2

Încărcat de

Drepturi de autor:

Formate disponibile

Dezvoltare Web Frontend (prima parte)

Informatică Aplicată 1 - cursul 2

Facultatea de Inginerie Electrică - UNS, TPB

1 Introducere 8 Structura de bază a unui document HTML

observând codul altora.

▶ Un client poate fi de exemplu un browser web

▶ O imagine face cât o mie de cuvinte

▶ Începând cu versiunea HTML 3.0 au fost introduse tabelele.

▶ Permite structurarea paginilor fără a folosi tabele.

Un site interesant (pentru a vedea funct, ionalitatea CSS):

▶ CSS3 nu este o singură specificat, ie - este formată din module

▶ Declarat, ia <!DOCTYPE>ajută browserul să afis, eze pagina web corect.

1 <!DOCTYPE html> ▶ Declarat, ia DOCTYPE defines, te tipul de document ca fiind HTML.

▶ Alegerea corectă a cont, inutului elementului H1 este crucială pentru SEO

Stil Descriere - Elementele listei vor fi marcate

Entităt, ile HTML

▶ Atributul href specifică adresa destinat, ie (http://itee.elth.pub.ro/ vbucata/)

▶ Atributul alt este obligatoriu. O pagină web nu va fi validată fără el.

S-ar putea să vă placă și