Seminar 1: Introducere in HTML

Introducere: aplicaii HTML5 (HTML / CSS / JS), doar partea de client, accent pe partea de multimedia (imagine / animaie / sunet / video) componente (web browser, web server) i protocoale de comunicaie (HTTP over TCP/IP) exemplificare folosind IE9 Developer Tools -> Network componentele unei pagini web: o HTML -> DOM o CSS -> modificare proprieti obiecte DOM pe baz de selectori o JS -> execuie de cod pe client pentru modificare proprieti / tratare evenimente o DOM -rendering-> imaginea afiat de ctre browser instrumentele utilizate: Visual Studio 2010 (empty ASP.Net project), browser - IE9 / Chrome, jQuery introducere n limbajul HTML o definete CE trebuie afiate sub forma unui arbore construit intermediul tag-urilor o sintaxa (tag-uri, nchidere, atribute, caractere speciale: < > &) o structura unui document HTML: DOCTYPE, html, head, body tipuri de elemente: o block: definesc n general structura documentului, ncep de pe o linie nou i de ntind pe toat limea documentului (p, div, h1-6, ul, ol, li, table, pre, form, ) o inline: n interiorul elementelor de tip bloc, nu foreaz linie nou i ocup exact atta spaiu ct au nevoie (span, a, strong, em, img, input) prezentare si exemplificare elemente de baza HTML: o text: h1-6, p + em, strong, br o liste: ul, ol, li o imagini: img o legturi: a o tabele: table, thead, tbody, tfoot, tr, td o formulare: form, input vizualizare DOM rezultat n browser

n mare parte urmrete structura de aici: http://www.w3.org/community/webed/wiki/Main_Page#HTML_beginnings + The HTML body

Seminar 2: CSS
modific modul de afiare pentru elementele HTML definite prin intermediul HTML un set de reguli de forma: selector { proprietate 1 : valoare 1; proprietate 1 : valoare 1; . } selectorii identific elementele din DOM care trebuie modificate prin intermediul unei condiii iar elementele dintre acolade descriu modul n care trebuie modificate proprietile tuturor elementelor care corespund selectorului; exemple modaliti de includere: o inline: atribut style o embedded: tag <style> o fiier extern: tag link tipuri de selectori de baz: element, .clasa, #id grupare (selectori separai prin virgul) i combinare selectori (elem.clasa, elem#id) motenire (propagarea de la printe la copil n DOM) i cascadare (nlnuirea i suprapunerea regulilor definite n CSS n funcie de specificitate / importan / ordinea n surs) + urmrire folosind developer tools uniti de msur (%, em, px) tipuri de proprieti o formatare text (font-*) o setare margini (border, margin / padding) o setare dimensiuni (width, height, min/max-width/height, overflow) o control layout (display, float) o poziionare (position:static / relative / absolute / fixed, z-index) o formatare link i pseudo-classes o formatare tabel / liste

Materiale: http://www.w3.org/community/webed/wiki/Main_Page#CSS