Elemente de Web design
Saptamana13 Colocviu Proba scrisa Saptamana 14 Colocviu Proba laborator Evaluare 15% Tema 45% Proba Laborator 40% Proba scrisa http://staff.fmi.uvt.ro/~victoria.iordan/
Curs1 HTML liste Curs4 CSS Curs7 JavaScript Obiecte evenimente Curs10 PHP fisiere MySQL Curs2 HTML Tabele Formuare Curs5 JavaScript Instructiuni Curs8 PHP tipuri de date operatori instructiuni Curs11 Php si MySQL Curs3 CSS Curs6 JavaScript functii Curs9 PHP Functii 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 Buraga, Sabin Proiectarea siturilor Web Design şi funcţionalitate, Ed. Polirom, 2002
REALIZAREA PAGINILOR WEB- limbajul HTML Hypertext Markup Language
Caracteristici documentele HTML sunt exclusiv de tip text (ASCII); documentele descrise în HTML pot fi vizualizate cu ajutorul unor aplicaţii speciale denumite browsere; 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. Cele mai cunoscute sunt Macromedia DreamWeaver, FrontPage şi Netscape Composer.
Tipuri de site-uri Web 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 clientserver ş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ă.
HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web Standardizare W3C https://www.w3.org/tr/html5/
<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> DOCTYPE - Declarația Tipului de Document - HTML5 UTF-8 - Universal Transformation Format 8-biți c0.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
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 JUSTIFY c2.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 = valoare COLOR = culoare FACE = 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> <SUP> </SUB> </SUP> exemplu: <P> H <SUB>2</SUB>O <P> E = mc <SUP>2</SUP> Efect c6.html
Comentarii HTML <! şi se termină cu ->. Exemplu: <! Acesta e un comentariu. Browser-ul nu îl "vede"! ->
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 afisarea video a informatiilor prelucrate. <dt>modem <dd>dispozitiv periferic care permite calculatoarelor sa receptioneze semnalele. <dt>tastatura <dd>totalitatea butoanele care servesc la comanda masinilor 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 (creează 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 A Atributele 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 = URL ALT = text - numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita HEIGHT = defineşte înălţimea imaginii WIDTH = defineşte lăţimea imaginii ALIGN = valoare (TOP MIDDLE BOTTOM LEFT RIGHT ) c14.html BORDER
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ă degradarea majoră a calității 2. eliminarea informațiilor tip metadata asociate imaginii. 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