Sunteți pe pagina 1din 14

DOCUMENTE WEB

Notiuni si concepte
Ce este o pagina web?

■ O pagină web este o resursă aflată în spațiul web (WWW)


din Internet, de obicei în format HTML și
având hiperlinkuri (hiperlegături) pentru navigarea simplă
(cu un singur clic de mouse-ul) de la o pagină sau secțiune
de pagină la alta. Pagina web se numește astfel, deoarece
ea se poate afișa pe un monitor sau ecran de calculator și
se aseamănă într-o oarecare măsură cu o pagină de ziar.
Ce contine o pagina web?
■ texte în cele mai diferite formate (forme, mărimi, culori, poziții etc.);
■ imagini (fișiere cu formatele .gif, .jpeg, .png ș.a.);
■ audio (fișiere în formatele .mid, .wav ș.a.);
■ conținut multimedial interactiv care, pentru a fi văzut și utilizat, necesită de obicei un plugin ca de ex. cu
formatul Adobe Flash sau Adobe Shockwave;
■ miniaplicații, (așa-numite "applets") – subprograme care rulează la chemarea paginii și care deseori oferă filme,
imagini, interacțiune și sunete.
■ Paginile web mai pot conține și elemente care nu sunt făcute pentru a fi afișate de browser, cum ar fi:
■ scripturi (de obicei în formatul JavaScript), care adaugă paginii funcționalitate suplimentară (de exemplu,
creează efecte vizuale sau verifică datele introduse intr-un formular web);
■ meta-etichete – furnizează informații despre pagină, instrucțiuni pentru roboții motoarelor de căutare, etc.
Cuvintele cheie și celelalte descrieri din meta-etichete ajută motoarele de căutare să catalogheze pagina corect
și, în cazul acțiunilor de căutare, să ofere rapid informații și rezultate;
■ foi de stil (așa-numite "Cascading Style Sheets" sau "CSS"), care stabilesc modul cum este formatată pagina;
■ comentarii;
■ Atenție, paginile web mai pot conține și așa-numiți viruși informatici precum și alte funcțiuni dăunătoare
(malițioase) dar greu de văzut/recunoscut.
Ce inseamna HTML?

■ HyperText Markup Language sau HTML este un limbaj de


marcare utilizat pentru crearea paginilor web ce pot fi
afișate într-un browser (sau navigator). Scopul HTML este
mai degrabă prezentarea informațiilor – paragrafe, fonturi,
tabele ș.a.m.d. – decât descrierea semanticii documentului.
■ HTML este de ajutor atunci cand vrei sa afisezi informatii
intr-un site. HTML-ul nu este nici pentru design, desi a fost o
perioada in care HTML-ul si design-ul mergeau mana in
mana. Pentru design avem un alt limbaj si anume CSS.
Ce contine acest fisier html?
■ Tag-urile - De asemenea, poti observa ca in codul HTML apar multe secvente de cod
cuprinse intre “<” si “>”. Acestea sunt numite in mod curent tag-uri. Tag-ul este
folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta
ulterior browser-ul. Tag-ul este o secventa de cod cuprinsa intre caracterele “<” si
“>”.
■ Elementele - De cele mai multe ori informatiile dintr-o pagina html sunt cuprinse
intre doua tag-uri: unul de deschidere (<tag>) si unul de inchidere (</tag>). Tagul de
deschidere si de inchidere formeaza impreuna un element. Spre exemplu, in codul
scris mai sus, “<h1>Primul meu titlu</h1>” este un element numit heading 1.
■ Atributele - Atributele sunt folosite pentru a modifica valoarea unui element in HTML.
De obicei un element are mai multe atribute.
Structura documentului HTML
■ Orice document HTML incepe cu
notația <html> și se termina cu
notația </html>.
■ Între cele doua
marcaje <html> și </html> vom introduce
doua secțiuni:
- sectiunea de antet <head>...</head> și -
corpul documentului <body>...</body>.
Codul pentru afisarea
■ Blocul <body>...</body> cuprinde de mai sus:
conținutul propriu-zis al paginii HTML, adică
ceea ce va fi afișat în fereastra browser-ului. 1<html>
2<head> </head>
■ Blocul <head>...</head> efinește titlul 3<body>
paginii web precum și informații meta, php 4</body>
scripturi, javascripturi și css-uri. 5</html>
■ Structura unui site porneşte de
la Homepage, care reprezintă
prima pagină a site-ului, se
ramifică în secţiuni principale şi
subsecţiuni, şi se termină în
paginile de conţinut.
■ Paginile site-ului pot fi statice,
cu un conţinut mereu fix, sau
dinamice, cu un conţinut
generat automat din
componente.
Structura vizuala unei pagini web
■ <header> - specifica antentul unui document
sau al unei sectiuni
■ <footer> - specifica subsolul unui document
sau al unei sectiuni
■ <section> - specifica o sectie in document
■ <article> - specifica content cu inteles si
valoare independent
■ <aside> - specifica content deoparte a
blocului de content principal si trebuie sa
aiba vreo legatura logica cu acesta
■ <nav> - specifica un set de linkuri folosite
pentru navigarea prin site
Care sunt etapele crearii unui site web?

1. Analiza proiectului
2. Web Design
3. Web Development
4. Lansarea site-ului
Analiza proiectului
comunicare, definire proiect, obiective, definire public
tinta, analiza competitie
■ Aceasta este etapa preliminara si totodata una dintre cele mai
importante. In analiza proiectului, echipa SCDesign poarta o discutie
aprofundata cu clientul, astfel incat ambele parti sa ajunga la
consens cu privire la tintele proiectului si modalitatea prin care
acestea se vor atinge.
■ Astfel, se pot stabili care sunt obiectivele si de asemenea identifica
publicul tinta. Etapa continua cu analiza competitiei si identificarea
punctelor slabe ale acestora, astfel incat, in momentul lansarii,
proiectul clientului nostru sa fie publicat cu prima sansa pe piata.
Web Design
schita, wireframe, harta site, template design, ui/ux

■ Avand toate detaliile bine stabilite, designer-ul de proiect isi intra in


rol. Acesta schiteaza manual, pe hartie, 8 concepte diferite alcatuite
din elementele site-ului web. Impreuna cu echipa, aleg cel mai bun
concept si continua cu crearea wireframe-ului. Wireframe-ul
reprezinta transpunerea in digital a schitei. Urmatorul pas il reprezinta
harta site-ului, mai exact se definesc toate paginile si legaturile
acestora.
■ O data ce toate acestea sunt finalizate, se continua cu etapa in care
site-ul web prinde cu adevarat viata: template design, respectiv UI/UX.
Designer-ul stabileste culorile, stilul artei, font-ul folosit, animatiile,
interactiunile dintre elementele site-ului web si utilizator, dar si detalii
profunde precum incarcarea selectiva a continului sau
microinteractiuni.
Web Development
programare, dezvoltare functionalitati, implementare,
adaugare continut

■ Avand design-ul aprobat atat de echipa cat si de client, este momentul


ca site-ul sa devina functional si pregatit pentru a fi afisat in browsere,
pe orice dispozitiv, fie ca este vorba de desktop sau de telefon mobil.
Pentru a realiza acest lucru, web developer-ul de proiect scrie sute de
linii de cod, folosind tehnologii precum HTML, CSS, JavaScript, PHP
sau MySQL.
■ Un site complet functional, cu un design superb, nu isi atinge
obiectivul daca nu are si continut pe masura. Echipa SCDesign
sfatuieste clientul asupra celui mai potrivit continut, apoi il adauga si
implementeaza in site intr-un mod cat mai lizibil si intuitiv pentru
utilizator.
Lansarea site-ului
incarcare pe host, actualizare domeniu web,
promovare si mentenanta

■ In acest moment site-ul web este finalizat, ramanand sa fie publicat


pe internet pentru a putea fi accesat de catre utilizatori. Astfel, sunt
necesare un host, pe care sa fie incarcate fisierele site-ului si un
domeniu web bine ales, care sa faciliteze accesul.
■ Ingredientele unui site de succes sunt design-ul, functionalitatea,
continutul dar si numarul de utilizatori. Un site web fara utilizatori, nu
este nimic altceva decat o adunatura de biti incarcata pe un server.
Astfel, orice site va avea nevoie de o campanie de promovare bine
gandita. De asemenea, pentru a elimina posibilitatea aparitiei de erori
tehnice,serviciile de mentenanta sunt recomandate.
Links

■ https://scdesign.ro/blog/care-sunt-etapele-crearii-unui-site-web/
■ https://www.w3schools.com/html/html5_semantic_elements.asp
■ https://www.whd.ro/ce-este-un-site-web
■ https://web.ceiti.md/lesson.php?id=1
■ http://www.ecursuri.ro/cursuri-online/structura-unui-document-html.html
■ https://avenir.ro/html-tutorial-01-ce-este-html-la-ce-foloseste-si-cum-arata/
■ https://ro.wikipedia.org/wiki/Pagină_web
■ https://ro.wikipedia.org/wiki/HyperText_Markup_Language