Proiectare și Dezvoltare WEB

Document Web
 Diferența dintre

Limbaj de marcare Limbaj de stilizare

Limbaj scripting client-slide
Ai nevoie numaidecit
 Download

Visual studio code Notepad ++

Noțiuni
...Internetul este o rețea de calculatoare
utilizată ”Interconnected Networks”.
Rețeaua Internet oferă accesul la mai multeservicii:
•poștă electronică
• serviciul Web.

Mulți confundă serviciul Web cu Internetul...

Serviciul Web sau
WWW sau World WideWeb
reprezintă partea multimedia a
rețelei globale Internet.
Multimedia include o combinație de text, audio,
imagini, animație, video, sau alte forme
de conținut interactiv. Toate aceste resurse sunt în
format electronic şi pot fi vizualizate
pe un calculator, tabletă, smartphone, e-reader etc.
Web-ul constă din milioane de pagini, care pot fi afișate pe
ecranul utilizatorului.
În cadrul serviciului WWW resursele rețelei Internet se
specifică, prin intermediul unor
adrese speciale, numite adrese
URL (Uniform Resource Locator).
Un URL identifică, în mod unic, o resursă de pe Internet, ca
de exemplu o pagină web, un server, o imagine etc. E la fel
cum IDNP-ul tău te identifică în mod univoc pe tine în toată
țara.
Exemplu: https://pixabay.com/ro/photos/japonez%C4%83-
cherry-copaci-flori-324175/
Site-ul web reprezintă o colecție de resurse web, precum: pagini
web cu conținut multimedia. Site-ul web este identificat, de obicei,
cu un nume de domeniu comun și publicat pe cel puțin un server
web. Numele de domeniu este parte componentă a URL- ului. De
exemplu, microsoft.com sau facebook.com.
Astfel, site-ul web poate fi format din una sau mai multe pagini
web, între care sunt stabilite relații logice.
Site-urile web sunt create pentru a informa utilizatorii sau pentru a
prezenta o firmă/
companie sau pentru a prezenta produsele/ serviciile oferite de o
companie sau să
promoveze evenimente.

Exemplu: http://www.columna.org.md/
O pagină web se definește de un
document web și reprezintă o resursă
informațională,
ce este păstrată, sub forma unui fișier pe
un calculator sau server web. Pagina web
poate:
conține
text,
imagini,
referințe la alte pagini etc.
Site-ul web este accesat de utilizatori, cu ajutorul unui
browser web, ca de exemplu:
Google Chrome, Internet Explorer, Mozilla Firefox etc.,
specificând în bara de adrese a browserului, numele de
domeniu al site-ului, ca de exemplu:
microsoft.com sau google.com etc.
Browserul web, numit și ”program client”, va crea o
interogare a serverului web și va solicita pagina de start a
site-ului, numele de domeniu al căruia a fost scris în bara de
adrese. De obicei, numele de domeniu al site-ului corespunde
paginii principale a site- ului, care mai este numită și ”home
page”. Serverul web va prelucra interogarea”clientului” și-i
va returna resursa web, sau în cazul formulării unei cereri
incorecte, va răspunde cu un mesaj de eroare, ca de exemplu
”404 Not Found”.
Tema
Elementele HTML
utilizate în antetul
documentului web
ANTÉT, anteturi, -e, s. n. Indicație
tipărită în partea de sus a unei foi de
hârtie sau a unui plic, cuprinzând
numele, adresa etc. unei instituții sau
unei persoane.
Elementele, care pot fi inserate în secțiunea HEAD
sunt

<title>
<style>
<meta>
<link>
<script>
<base>
<title> Continutul</title>

Exemplu:
<title> Proiectarea Web</title>
<link>
Elementul LINK este utilizat pentru a face referire din
documentul curent la unele resurse externe, care vor fi
utilizate în cadrul documentului, ca de exemplu: se poate
face referire la imaginea-iconiță de lângă titlul
documentului, la stilurile externe etc. Acest element,
LINK, este susținut de toate browserele web și nu are
conținut, dar are câteva atribute.
<link rel=“tip_relatie” type=“tip_resursa” href=“nume _fisier extensie” />

rel este atributul obligatoriu şi specifică relaţia cu resursa legată. Poate avea mai
multe valori: icon, stylesheet etc

type specifică tipul documentului legat

href specifică locația fișierului legat cu documentul curent

<meta>
<meta atribut=“valoare” />
Elementul META este utilizat, de obicei, pentru a
furniza metadate despre un anumit document
HTML. Este suportat de toate browserele web.
Metadatele nu vor fi afișate pe pagina. Elementul
META specifică: setul de caractere utilizat în
document, cuvintele cheie, descrierea paginii,
autorul documentului etc. Toate aceste date sunt
utilizate de browser, motoarele de căutare sau alte
servicii web.
<meta charset=“UTF-8” />-atributul charset, al
elementului META, este utilizat pentru a specifica codificarea
caracterelor, folosite într-o pagină web. Cea mai uzuală azi
codificare este utf-8. Se recomandă să fie specificată în toate
proiectele web, pentru ca browser-ul să prezinte corect
conținutul paginii. Atunci când browser-ul ”nu va ghici” corect
codificarea, iar tu vei utiliza în text litere românești precum: ă,
î, â, ț, ș sau litere rusești, pe ecran vor fi reflectate, uneori,
ieroglife, neclare ochiului uman.

Viewport-ul este zona vizibilă utilizatorului, la

accesarea unei pagini web.
<meta name=“ viewport” content=“width=device-width, initial-scale=1.0 />
<style>
Elementul STYLE este utilizat pentru a defini informațiile despre
stilurile elementelor din documentul web curent. Sintaxa recomandată
este:
<style>stiluri_CSS</style>
Tema
Elemente HTML utilizate la definirea
corpului paginii web. Elemente HTML
pentru editarea și formatarea textului
Culoarea poate fi specificată prin denumirea
ei în limba engleză: aqua, black, fuchsia,
gray, green, lime, maroon, navy, olive,
purple, red, silver, white, yellow
codul hexazecimal – primele 2 cifre
indică intensitatea culorii roșie,
următoarele 2 – a culorii verde și ultimele
două cifre – a culorii albastru, toate
urmând după simbolul ”#”: #00FF00,
#ff0000 … – astfel putem defini 65536
de culori. De asemenea, putem utiliza
codul RGB (Red, Green, Blue) la
definirea culorii: rgb(255,0,0).
Titluri sau antete de text în HTML
Cred că ai observat că orice roman sau poveste – au titluri. În
manuale, cred că ai văzut denumiri de capitole, denumiri de
subcapitole evidențiate altfel comparativ cu textul de bază etc.
Adică orice text este structurat din antete și conținut textual, astfel
încât cititorului să-i fie mai clar ceea ce citește.
În HTML denumirea capitolului se va numi antet de nivel 1 (cel mai
important) și se va defini cu elementul H1. Denumirea subcapitolului
va fi un antet de nivel 2 și se va defini cu elementul H2. În cazul în
care va fi necesară definirea antetelor de nivel 3 – vom utiliza Web
design and development elementul H3 și tot așa...
Titlurile HTML pot fi definite cu ajutorul elementelor h1, h2, h3, h4,
h5, h6. Adică vom putea defini antete ce au nivelul cel mai mic 6.
Pentru a trece forțat din rând nou textul, se
folosește elementul BR. Acest element nu
are conținut, şi de aceea, în ultimele
versiuni, tag-ul de deschidere conține şi
specificarea închiderii .
Acest element este suportat de toate
browserele cunoscute.
<br/><br/>
Pentru a afișa un text pre-formatat se utilizează
elementul PRE. Acest element are tag de început și
sfârșit. Sintaxa ce trebuie respectată este
<pre></pre>
În HTML există câteva elemente folosite la prezentarea citatelor într-o
pagină web.
BLOCKQUOTE - este utilizat pentru evidențierea citatelor, chiar şi ale
celor de câteva alineate. Acest element va evidenția citatul sub forma
unui bloc separat, special aliniat, altfel decât restul textului.
Q - este utilizat pentru evidențierea citatelor scurte, într-o propoziție.
Citatul automat se va încadra între ghilimele.
CITE este folosit pentru evidențierea sursei citatului sau pentru
evidențierea unei surse, în general.
Tema: Elemente HTML
pentru aranjarea textului cu
ajutorul listelor de date
În HTML pot fi definite trei tipuri de liste,
ce pot fi utilizate în organizarea textului,
atunci când se dorește enumerarea unor
noțiuni sau date, sau pentru descrierea
noțiunilor.
Astfel, în HTML putem defini liste:
ordonate, neordonate şi listele de
definiție sau, mai nou, liste de descrieri.
Listele neordonate, ce au pentru fiecare element
un marcaj, la început, se definesc
folosind elementul UL (unordered list).
Elementele listei se definesc cu elementul HTML
LI (list item). Ambele elemente sunt formate din
tag-uri pereche şi sunt suportate de toate
browsere-le web.
<ul></ul>,<li></li>
Sintaxa recomandată a fi respectată la
definirea unei liste neordonate este:
<ul type=“valoare”>
<li> continutul</li>
………

</ul>
Atributul type poate avea una din
3 valori:
disc – valoarea implicită,
circle
square
Listele ordonate, în HTML, se definesc folosind
elementul OL(ordered list). Elementele listei
se definesc cu elementul LI. Putem defini o lista
ordonată, elementele fiind numerotate (valoarea
implicită) sau ordonate cu ajutorul literelor.
Ambele elemente sunt formate din tag-uri
pereche şi sunt suportate de toate browsere-le
web. Sintaxa recomandată este:

<ol atribut =“valoare”>

<li> continut</li>
……..
</ol>
Tag-ul OL poate avea câteva
atribute: type, start, reversed
Atributul type are 5 valori, utilizate
pentru a defini tipul ordonării:
1 (valoarea implicită), A, a, I, i.
Atributul start – specifică de la ce
număr să înceapă ordonarea listei.
Forma generală va fi:
<ol start="număr">, unde „număr”
reprezintă o valoare numerică de la
care se dorește începerea numerotării
elementelor listei.
Atributul reversed este utilizat pentru
a ordona elementele listei, în ordine
descrescătoare. Nu ia valori. Este de
tip logic și trebuie doar specificat.
Acest atribut trebuie utilizat cu atenție,
fiindcă nu este suportat de browserul
InternetExplorerși Safari.
Listele de descrieri, anterior erau numite ”liste de definiții”,
în HTML se definesc cu
elementul DL (description list). Pentru definirea
elementelor listei se utilizează elementele
HTML: DT şi DD. Astfel, DT - se utilizează pentru definirea
denumirii noțiunii, iar DD - se
utilizează pentru descrierea noțiunii. Toate aceste trei
elemente sunt formate din tag-uri
pereche şi sunt suportate de majoritatea browserelor web.
Sintaxa recomandată:
<dl>
<dt> notiunea</dt>
<dd> descrierea</dd>
…….

</d>
 .
Bine, am terminat cu listele, dar aș vrea să mai
vezi care este efectul elementului HR din
HTML. Deci, pentru a trasa o linie orizontală pe
pagina web sau, cum se spune în versiunea
HTML5, pentru a separa contextul paginii, se
utilizează elementul HR. Acest element nu are
conținut, de aceea, se recomandă să se închidă
chiar din start <hr/>