Embed Size (px)
Citation preview
Elemente de Web design
• Proba scrisaSaptamana13 Colocviu
• Proba laboratorSaptamana 14 Colocviu
• Evaluare• 15% Tema • 45% Proba Laborator• 40% Proba scrisa• http://staff.fmi.uvt.ro/~victoria.iordan/
Curs1• HTML• liste
Curs2
• HTML• Tabele• Formuare
Curs3• CSS
Curs4• CSS
Curs5• JavaScript• Instructiuni
Curs6• JavaScript• functii
Curs7• JavaScript• Obiecte• evenimente
Curs8
• PHP• tipuri de date• operatori• instructiuni
Curs9• PHP• Functii
Curs10
• PHP• fisiere• MySQL
Curs11• Php si
MySQL
Curs12• Php si
MySQL
• http://www.w3schools.com/html/• http://www.w3schools.com/css/• http://www.w3schools.com/js/• http://www.w3schools.com/php/• Jon Duckett – HTML&Cascading Style Sheets(CSS) design and build websites, 2011• Marijn Haverbeke– Eloquent JavaScript, 2018• http://php.net/manual/ro/index.php
REALIZAREA PAGINILOR WEB- limbajul HTMLHypertext Markup Language
Caracteristici• documentele HTML sunt exclusiv de tip text
(ASCII); prin urmare ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit. Se poate utiliza orice editor de texte;
• documentele descrise în HTML pot fi vizualizate cu ajutorul unor aplicaţii speciale denumite browsere, care lucrează pe diferite tipuri de sisteme de calcul; prin urmare, documentelor HTML sunt independente de platforma de lucru.
• HTML utilizează pentru descrierea documentelor Web etichete (denumite si tag-uri) specifice pentru fiecare element descris; etichetele stabilesc atât structura documentului, cât şi aspectul acestuia.
metode de realizare a paginilor WEB
• Folosind un editor de texte obişnuit se scrie conţinutul paginii într-un fişier text care se salvează cu extensia HTML sau HTM. Apoi, folosind un browser se încarcă pagina locală realizată.
• Folosind un editor specializat în realizarea paginilor de WEB. Există mai multe editoare de pagini de WEB, care generează codul paginii şi oferă şi facilităţi suplimentare. Cele mai cunoscute sunt Macromedia DreamWeaver, FrontPage şi Netscape Composer.
• Site-uri cu pagini statice
paginile Web sunt fişiere cu simplu text construite folosind limbajul Hypertext Markup Language (HTML).
• Site-uri cu pagini dinamice
Paginile dinamice pot comunica cu bazele de date, foi de calcul tabelar, sisteme de gestiune a bazelor de date client-server şi multe alte aplicaţii.La proiectarea unui astfel de site trebuie luate în considerare următoarele elemente: modul în care vor fi actualizate datele de pe site și costurile operațiunilor de actualizare periodică.
Tipuri de site-uri Web
• HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web
• Standardizare W3C - The World Wide Web Consortium
DOCTYPE - Declarația Tipului de Document - HTML5UTF-8 - Universal Transformation Format – 8-bițic0.html
<html><head></head><body></body></html>
<!doctype html> <html> <head> <meta charset= ″utf-8″ /><title>Titlul paginii web </title>
</head ><body> Conținutul paginii web</body ></html>
• Atributele pot fi definite ca niste proprietati ale tag-urilor.
• Atributele se pun numai in tag-ul de inceput.
• Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv
Elementul <BODY > admite următoarele atribute:
• BACKGROUND=URL• BGCOLOR=culoare
Culori.pdf• TEXT=culoare• LINK=culoare(link-urile nevizitate)• VLINK=culoare(link-urile vizitate)• ALINK=culoare(link-ul activ - cel asupra căruia este plasat
cursorul mouse-ului).
• Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se poate face cu ajutorul a două atribute ale etichetei <body>:
"Leftmargin" (stabileşte distanţa dintre marginea stângă a ferestrei browserului şi marginea stângă a conţinutului paginii);
"Topmargin" (stabileşte distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a conţinutului paginii);
c1.html
• Comentarii HTML
• <! şi se termină cu ->.
Exemplu:<! Acesta e un comentariu. Browser-ul nu
îl "vede"! ->
Formatarea textului• nivel de bloc (block-level) sau • la nivel de caracter (text-level sau inline).
Formatarea paragrafelor<P> Paragraful 1 </P><P> Paragraful 2
• Cel mai utilizat atribut pentru eticheta <P> este ALIGN
ALIGN = LEFT | CENTER | RIGHT | JUSTIFYc2.html• Pentru a stabili acelaşi mod de aliniere pentru
mai multe paragrafe, se vor grupa într-un singur bloc, cu ajutorul etichetei <DIV> :
<DIV ALIGN="RIGHT"><P>... primul paragraf ... </P><P>... al doilea paragraf ... <P> ... al treilea paragraf ...
Utilizarea paragrafelor titlu
• Documentele HTML pot fi structurate pe şase niveluri, existând şase etichete care definesc nivelul paragrafului titlu în structura documentului: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Etichetele de sfârşit sunt obligatorii.c3.html
Linii orizontale <hr>
• atribute ale etichetei <hr>:1. "align" ce permite alinierea orizontală a liniei.
Valorile posibile sunt "left","center" şi "right"; 2. "width" permite alegerea lungimii liniei; 3. "size" permite alegerea grosimii liniei; 4. "noshade" când este prezent defineşte o linie
fără umbră; 5. "color" permite definirea culorii liniei.c4.html
Blocuri CENTER• Blocul introdus de etichetele
<center>...</center> aliniază centrat toate elementele pe care le conţine.
• Blocuri DIV(delimitare şi formatare bloc text )<div>...</div>
<html><head><title>Blocul DIV</title></head><body>Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta. <div align="right">O singura linie.O singura linie.O singura linie.O singura linie.<br>O singura linie.O singura linie.O singura linie.O singura linie.<br>O singura linie.O singura linie.O singura linie.O singura linie.<br></div><div align="center">Bloc aliniat pe centru.Bloc aliniat pe centru.<br>Bloc aliniat pe centru.Bloc aliniat pe centru.<br>Bloc aliniat pe centru.Bloc aliniat pe centru.<br></div> </body></html>
c4_1.html
Formatarea la nivel de caracter
<FONT> </FONT>• Atributele admise de eticheta <FONT> sunt:SIZE = valoareCOLOR = culoareFACE = listă_fonturi(defineşte o listă de fonturi separate prin virgulă,
dintre care browser-ul îl va alege pe primul disponibil in ordinea preferinţelor. Dacă nici unul din fonturile din listă nu este instalat pe calculatorul utilizatorului, browser-ul va utiliza fontul implicit) c5.html
Utilizarea caracterelor speciale
• codurile HTML pentru cele mai folosite caractere si simboluri, care nu se gasesc pe tastatura calculatorului:
Simbol.pdf
• Aplicarea unor efecte asupra texlului<I> </I><U> </U><B> </B> <BIG> </BIG> <SMALL> </SMALL><STRIKE> </STRIKE> <EM> Textul este accentuat, scos în evidenţă
</EM> <STRONG> Textul este mai accentuat, puternic
scos în evidenţă </STRONG><CITE> Textul reprezinta o referire la o carte,
revista, articol etc </CITE>
Utilizarea indicilor şi a exponenţilor
<SUB> </SUB><SUP> </SUP>
exemplu: <P> H <SUB>2</SUB>O <P> E = mc <SUP>2</SUP>
• Efect c6.html
Utilizarea listelor
• Listele neordonate (Unordered List) sunt încadrate de etichetele <UL> si </UL>. Fiecare intrare in listă (List Item) este precedată de eticheta <LI> c7.html
• Crearea unei liste ordonate (Ordered List) se face încadrând intrările din listă între etichetele pereche <OL> şi </OL> c8.html
• Crearea unei liste de definiţii se realizează cu ajutorul etichetelor pereche <DL> şi </DL>, între care vor fi încadrate intrările în listă. În acest caz, o intrare în listă este constituită din două părţi: un termen (etichetat cu <dt> - Definition Term), care poate conţine doar elemente de formatare inline şi o definiţie (etichetată cu <DD> -Definition Description), care poate conţine elemente de formatare la nivel de bloc.
De exemplu: Descriere <DL><dt>monitor
<dd>Terminal al calculatorului pentru afișarea video a informațiilor prelucrate.
<dt>modem<dd>Dispozitiv periferic care permite calculatoarelor sărecepționeze semnalele.
<dt>tastatura<dd>Totalitatea butoanele care servesc la comanda mașinilor de scris, de calculat.
</DL>
Efect c9.html
Inserarea legăturilor în documente HTML
Limbajul HTML conţine multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web:
• A (realizează o legătură către o resursă Web într-un document HTML)
• LINK (specifică legături către resurse utile)• IMG (creează o legătură către o imagine)
Elementul AAtributele specifice elementului A sunt: • HREF=URL (Uniform Resource Locator) specifică
adresa resursei la care se face legătura. c10.html• NAME = şir-de-caractere, asociază un nume ancorei
curente, astfel încât să poată constitui ţinta unui alt link. c11.html c12.html
• TITLE = şir-de-caractere, asociază un nume resursei la care se face legătura. Browser-ul va afişa titlul resursei când utilizatorul deplasează mouse-ul deasupra legăturii.
• TARGET= indică in ce fereastră se va deschide fișierul destinație. Atributul target poate lua valorile:_blank pagina va fi incărcată intr-o nouă fereastră_parent pagina va fi incărcată in fereastra părinte_top pagina va fi incărcată in fereastra top a cadrului_self pagina va fi incărcată in aceeași fereastră
Elementul LINK
• Ca şi elementul A, elementul LINK permite specificarea unor legături către alte documente. Spre deosebire de A, elementul LINK poate fi plasat numai în antetul documentului (în secţiunea HEAD), deci prin urmare corespunzător acestui element nu se afişează nimic în pagina vizualizată de către browser.
• Din punct de vedere sintactic, elementul LINK admite aceleaşi atribute ca şi elementul A, dar nu admite etichetă de sfârşit.
Elementul BASE
• Specificarea adreselor resurselor Web la care se creează legături în documente HTML prin adresele URL specificate în mod relativ.
<BASE HREF=URL>c13.html
Inserarea imaginilor în documente HTML• Elementul IMG - atribute:SRC = URLALT = text - numele care inlocuieste imaginea
pana aceasta se incarca sau cand nu a fost gasita
HEIGHT = defineşte înălţimea imaginiiWIDTH = defineşte lăţimea imaginiiALIGN = valoare(TOP MIDDLE BOTTOM LEFT RIGHT ) c14.htmlBORDER
• Pentru a micșora timpul incărcării complete a paginii există programe care optimizează imaginile. Optimizarea constă in:
1. reducerea dimensiunii imaginii fără degradareamajoră a calității2. eliminarea informațiilor tip metadata asociateimaginii. Aceste date sunt asociate automat de programele de grafică (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
Inserarea unei legături pe o imagine
• Prin utilizarea elementului IMG drept conţinut al elementului ancoră <A> avem posibilitatea de a insera în document o legătură pe o imagine: prin acţionarea imaginii printr-un clic va fi accesată resursa destinaţie (cea la care am creat legătura).
• Descriere<A HREF="poza.htm"> <IMG SRC=“html.bmp"
HEIGHT=273 WIDTH=148 ALT=“html"> </A>• Efect c15.html
