Programare Web Front End - itee.elth.pub.roitee.elth.pub.ro/~vbucata/ia/cursuri/curs3.pdf ·...

Programare Web Front EndPartea a II-a

Victor BUCATA

Facultatea de Inginerie Electrica - U.P.B.

Proiect programare web

I Cunos, tint,ele de programare web vor fi testate printr-un proiect webcare valoreaza 20 de puncte.

I Proiectul se va afla ın contul vostru de la laborator ın folderulpublic html.

I Tema proiectului este la alegerea voastra (din domeniul inginerieielectrice) s, i va rog sa o trimitet,i pe mailul meu ([email protected])pana pe data de 4 noiembrie 2018. Nu sunt necesare cunos, tint,eavansate. (Pot fi 4 fis, iere HTML s, i unul CSS)

I Proiectul trebuie terminat pana pe 14 decembrie 2018, data pana lacare sa mi-l trimitet,i arhivat la adresa [email protected]

Cuprins

1 Introducere

2 Limbajul CSSTipuri de utilizare CSSSintaxa CSSSelectarea elementelorUnitat,i de masuraFundaluriFormatarea textuluiModelul dreptunghiular/Pozit,ionare

3 Limbajul JavaScriptMotivat,ieElementele limbajului

Ce sunt CSS s, i JavaScript?

Ce este CSS?

I CSS este acronimul de la Cascading Style Sheets (Foi de Stil ınCascada).

I CSS descrie modul ın care sunt afis, ate elementele HTML peecran, hartie sau alte suporturi.

I CSS cres, te eficient,a. Poate controla aspectul mai multor paginiWeb foarte us, or.

I Foile de stil externe sunt stocate ın fis, iere CSS.

Ce este JavaScript?

I JavaScript este un limbaj de programare de script (codul estevizibil utilizatorului), interpretat ın browser, dezvoltat de Netscape s, iSun s, i cu care pot fi create pagini web interactive.

I HTML 5 cont,ine s, i descrierea unor funct,ii API (ApplicationProgramming Interface) JavaScript care interact,ioneaza cudocumentul HTML prin intermediul arborelui DOM (DocumentObject Model).

I Limbajul JavaScript nu are nicio legatura cu limbajul Java, este doaro coincident,a de nume

Limbajul CSS

Tipuri de utilizare CSS

Exista mai multe tipuri de utilizare CSS:

1 intern

2 extern

3 ın linie

CSS intern

Codul CSS se plaseaza ın cadrul elementului head ıntre tagurile<style> s, i </style>, ca mai jos:

1 <head>2 <title></title>3 <style type="text/css">4 Continutul CSS se plaseaza aici5 </style>6 </head>7 <body>8 ...9 </body>

CSS intern

I Folosind aceasta metoda, fiecare fis, ier HTML cont,ine codul CSSnecesar pentru pagina respectiva.

I Daca se face o modificare, ea trebuie repetata ın toate fis, iereleHTML.

I Aceasta metoda este potrivita ın cazul unei singure pagini web saudaca fiecare pagina are un stil separat.

CSS extern

I Un fis, ier CSS extern este un fis, ier text simplu.

I Fis, ierul nu cont,ine decat cod CSS. Se salveaza cu extensia .css iarlegatura din fis, ierul HTML se plaseaza ın elementul head ca mai jos:

1 <head>2 <title></title>3 <link rel="stylesheet" type="text/css" href="Cale catre4 foaiadestil.css" />5 </head>

I Sau poate fi folosita metoda @import ca mai jos:

1 <head>2 <title></title>3 <style type="text/css">@import url("Cale URL catre4 foaiadestil.css")5 </style>6 </head>

CSS extern

I Folosind un fis, ier CSS extern, toate fis, ierele HTML trimit catre unsingur fis, ier CSS pentru modul de prezentare a paginilor.

I Daca trebuie modificat stilul pentru toate paginile din site, estesuficienta editarea unui singur fis, ier .css.

I Intret, inere mai us, oara

I Dimensiunea mai mica a fis, ierelor

I In consecint,a consum de trafic mai mic

I FlexibilitateI Se pot folosi ımpreuna cele doua metode, de fapt mai exista s, i o a

treia: CSS ın linie (inline)

CSS ın linie (inline)

Stilurile CSS ın linie sunt definite chiar ın cadrul elementului pe caredorim sa-l prezentam, ca mai jos:

1 <body>2 <p style="color: #ff0000;">Text scris cu rosu</p>3 </body>

Propagarea ın cascada

I In cazul folosirii ın acelas, i timp a tuturor celor 3 variante, prioritateaeste urmatoarea:

1 Stilurile ın linie (ın cadrul elementului HTML)2 CSS intern3 CSS extern

I CSS extern poate necesita put, in mai mult timp pentru afis, are.

I Browserele nu afis, eaza ıntotdeauna ın acelas, i fel stilurile.

I Pentru anumite clase de utilizatori, eliminarea stilurilor de pepagina este preferata.

Sintaxa CSS

Exemplu de fisier CSS

1 /* Acesta este un comentariu */2 h1,h2,h3 {font-family: Arial, sans-serif;} /* utilizeaza primul

font disponibil */3 p, table, li, address { /* se aplica asupra tuturor tag-urilor*/4 font-family: "Courier New"; /* se cuprind intre " " valorile cu

spatii */5 margin-left: 15pt; /* specifica indentarea */6 }7 p, li, th, td {font-size: 80\%;} /* dimensiunea fontului este de

80% */8 th {background-color:#FAEBD7;} /* culorile se pot specifica in

hexa */9 body { background-color: #ffffff;}

10 h1,h2,h3,hr {color:red;} /* se pot specifica culori si prin nume*/11 a:link {color:darkred;} /* un link nevizitat */12 a:visited {color:darkred;} /* un link vizitat*/13 a:active {color:red;} /* un link activ */14 a:hover {color:red;} /* cand mouse-ul este peste el */

Sintaxa CSS

Sintaxa CSS consta numai din 3 part,i: selector, proprietate s, i valoare.

1 selector {proprietate: valoare}

I Selectorul reprezinta identificarea elementului (elementelor) HTMLcaruia dorim sa-i aplicam un stil.

I Proprietatea reprezinta un aspect al stilului pe care dorim sa-lmodificam.

I Valoarea reprezinta ceea ce atribuim proprietat,ii respective.

I CSS este case-insensitive cu except,ia numelor claselor s, i aID-urilor.

Sintaxa CSS

I Exista s, i proprietat,i cu valori multiple separate prin virgule.

I Daca o valoare individuala cont,ine mai mult de un singur cuvant, sefolosesc ghilimelele ca mai jos:

1 body {2 background: #eeeeee;3 font-family: "Trebuchet MS", Verdana, Arial, serif;4 }

Introducerea comentariilor

I Exemple de comentarii:

1 /* Acesta este un comentariu */23 /* Acesta este un4 comentariu pe mai multe5 linii*/

Selectarea elementelor

Mos, tenirea

I Atunci cand un element este cuprins ın altul, elementul cuprins vamos, teni ın general proprietat,ile elementului parinte.

I Exemplu:

1 body {font-family: Verdana, serif;}

I Acum tot textul din fis, ierul HTML va avea fontul Verdana (daca nuexista Verdana, se va alege alt font serif). Daca se dores, te un altfont pentru titlurile h1 sau pentru paragrafe - exemplu:

1 h1 {font-family: Georgia, sans-serif;}2 p {font-family: Tahoma, serif;}

I Exista s, i proprietat, i care nu se mos, tenesc, exemplu:

1 body {margin: 20px;}

Obs: Serifele sunt liniut,ele, mai mult sau mai put,in subt,iri/fine, cu care setermina unele din trasaturile principale ale unor caractere de litera.

Clasele CSS

I Selectorul de clasa permite asocierea stilurilor diferit pentru diverseelemente.

I Se comporta asemanator cu CSS inline.

I Un selector de clasa se poate folosi de oricate ori dorim.

I Un selector de clasa ıncepe cu caracterul punct (.)

I Este bine sa se foloseasca nume de clase descriptive s, i nudenumiri legate de aspect, de exemplu: buton, textimportant etc.

Clasele CSS

I Exemplu de selector de tip:

1 p {2 font-size: small;3 color: #3333334 }

I Cuvantul ”propozit,ia” sa fie verde s, i bold. Codul HTML:

1 <p>Pe scurt, <span class="textimportant">propozitia</span>2 pe care o cititi este reprezentata in fisierul CSS ca mai jos:3 </p>

I Codul CSS (selector de clasa):

1 .textimportant {2 font-size: small;3 color: #008080;4 font-weight: bold;}

ID-uri CSS

I ID-urile sunt similare cu clasele dar odata ce ID-ul a fost desemnat,el nu poate fi desemnat din nou ın acelas, i fis, ier HTML.

I Un selector ID se foloses, te pentru a stabili stilul unui element uniciar selectorii clasa se folosesc pentru mai multe elemente.

I De exemplu containerul principal al paginii este ca mai jos:

1 <div id="container">2 Tot ceea ce se afla in document este inclus in acest div.3 </div>

I Codul CSS (se foloses, te simbolul # s, i nu punctul):

1 #container{2 width: 80%;3 margin: auto;4 padding: 20px;5 border: 1px solid #666;6 background: #ffffff;}

Pseudoclasele

Exemple:

1 #continut a:link {color: #009900;}2 #continut a:visited {color: #999999;}3 #continut a:hover {color: #333333;}4 #continut a:focus {color: #333333;}5 #continut a:active {color: #009900;}

Pseudoclasele

Alt exemplu:

1 a.column:link {color: #009900;}2 a.column:visited {color: #999999;}3 a.column:hover {color: #333333;}4 a.column:focus {color: #333333;}5 a.column:active {color: #009900;}

In fis, ierul HTML:

1 <a class="column" href="" title="">textul legaturii</a>

Pseudoclasele

Sau mai us, or:

1 .column a:link {color: #009900;}2 .column a:visited {color: #999999;}3 .column a:hover {color: #333333;}4 .column a:focus {color: #333333;}5 .column a:active {color: #009900;}

In fis, ierul HTML:

1 <div class="column">2 <a href="" title="">textul legaturii</a>3 </div>

Tipuri de selectori

I universal (orice element) Exemplu:

* {font: 10px Arial;}

I de tip (orice element de un acel tip) Exemplu:

h1 {text-decoration: underline;}

I de grup (elemente de mai multe tipuri) Exemplu:

h1, h2, h3 {font-family: Verdana;}

I de clasa (elemente de mai multe tipuri atunci cand nu se dores, teafectarea tuturor instant,elor ale tipurilor respective) Exemplu:

.numeclasa {text-decoration: underline;}

I ID (un singur element atunci cand nu se dores, te afectarea tuturorinstant,elor anui anumit tip) Exemplu:

#numeid{text-decoration: underline;}

Tipuri de selectori

I descendent (un element cuprins ın altul pe un anumit nivel)Exemplu:

#continut h1 {text-decoration: underline;}

I copil (un element cuprins imediat ın altul) Exemplu:

#continut > p {font-weight: bold;}

I frat, i alaturat, i (elemente alaturate ce au acelas, i parinte) Exemplu:

h1 + p {font: 10px Arial;}

I frat, i general (elemente ce au acelas, i parinte) Exemplu:

h1 ˜ p {font: 10px Arial;}

Selectorul de atribut

Selector de atribut (un element ce se potrives, te cu atributul listat)(Obs.: Atributele sunt proprietat,i ce se afla ın interiorul tagurilor HTML.)

I un atribut avand orice valoare

Element[atribut]

I un atribut cu o anumita valoare

Element[atribut="val"]

I un atribut cu o anumita valoare dintr-o lista separata prin spat,ii

Element[rel˜="next"]

1 a[target] {2 background-color: yellow;3 }

sau

1 a[target="_blank"] {2 background-color: yellow;3 }

Selectorul de atribut (continuare)

I valoarea atributului este ”val” sau ıncepe cu ”val” urmat imediatde ”-”

*[lang|="val"]

I un atribut cu valoarea ıncepand cu prefixul ”val”

Element[atributˆ="val"]

I un atribut cu valoarea terminata cu sufixul ”val”

Element[atribut$="val"]

I un atribut ce cont,ine cel put, in o instant, a a substringului ”val”

Element[atribut*="val"]

Unitat,i de masura CSS

Unitat,i de masura absolute

I cm - centimetri

I in - inci

I mm - milimetri

I pc - pica (1pc = 12 puncte)

I pt - punct (1pt = 1/72 inci)

Unitat,i de masura relative

I % - procent

I ch - lat,imea caracterului ”0” pentru fontul utilizat

I em - (1em = marimea fontului pentru elementul curent)

I ex - dimensiunea x a fontului elementului

I gd - dimensiunea celulei definite prin grila ”layout-grid”

I px - dimensiunea pixelului pentru dispozitivul curent

I rem - marimea fontului elementului radacina

I vh - ınalt,imea ecranului dispozitivului curent

I vw - lat,imea ecranului dispozitivului curent

I vm - minimul dintre vh s, i vw

Unitat,i de masura pentru unghiuri

I deg - grade

I grad - 100grad = 90deg

I rad - radiani

I turn - rotiri (1turn = 360deg)

Unitat,i de masura pentru timp s, i frecvent,a

Timp:

I ms - milisecunde

I s - secunde

Frecvent,a:

I HzI kHz

Unitat,i de masura - culori

I numele culorii - red, blue, green, dark green

I rgb(x,y,z) - red = rgb(255,0,0)

I rgb(x%,y%,z%) - red = rgb(100%,0,0)

I rgba(x,y,z,alpha) - red = rgba(255,0,0,1)

I #rrggbb - ın hexazecimal - red = #ff0000 (sau prescurtat #f00)

I hsl(hue, saturation, lightness) - red = hsl(0,100%,50%)

I hsla(hue, saturation, lightness, alpha) - red = hsl(0,100%,50%,1)

I flavor - o culoare de accentuare (de obicei aleasa de utilizator).

I currentColor - valoarea calculata a proprietat,ii color.

Fundaluri CSS

Fundaluri CSS

I Nu se mos, tenesc.

I Exemplu:

1 background: #ffffff url(path_to_image) top left no-repeatfixed;

I Subproprietat,i:I attachmentI colorI imageI positionI repeat

Fundaluri CSS - Attachment

Exemplu:

1 background-attachment: valoare;

Valoare poate fi:

I fixed

I scroll

Fundaluri CSS - Color

Exemplu:

1 background-color: valoare;

Valoare poate fi:

I numele culorii

I numar hexazecimal

I cod de culoare RGB

I transparent

Fundaluri CSS - Image

Exemplu:

1 background-image: url(cale_la_imagine);

Valori posibile:

I url

I none

Fundaluri CSS - Position

1 background-position: valoare;

Valoare poate fi:

I top left

I top center

I top right

I center left

I center center

I center right

I bottom left

I bottom center

I bottom right

I x-% y-%

I x-poz y-poz

Fundaluri CSS - Repeat

Exemplu:

1 background-repeat: valoare;

Valori posibile:

I repeat

I repeat-x

I repeat-y

Formatarea textului

Proprietatea font

I Se pot stabili valorile pentru stil, pondere, varianta, marime,marimea randului s, i familia fontului:

I font-family

I font-size

I font-style

I font-variant

I font-weight

Proprietatea font-family

I Se pot adauga doua valori: numele familiei fontului s, i numelegeneric al familiei de fonturi.

I Exemplu:

1 font-family: Verdana, sans-serif;

Proprietatea font-size

Exemplu:

1 font-size: valoare;

I xx-large

I x-large

I larger

I large

I medium

I small

I smaller

I x-small

I xx-small

I marime

I % (procent)

Proprietatea font-style

Exemplu:

1 font-style: valoare;

Valoare poate fi:

I normal

I italic

I oblic

Proprietatea font-variant

Exemplu:

1 font-variant: valoare;

Valoare poate fi:

I normal

I small-caps

Proprietatea font-weight

Exemplu:

1 font-weight: valoare;

Valoare poate fi:

I lighter

I normal

I 100

I 200

I ...

I 900

I bold

I bolder

Proprietat,i legate de grafica textului - culoarea

I Culoarea textului se stabiles, te astfel:

1 color: valoare;

I Valorile posibile sunt:I numele culorii - exemplu: red, black etc.I numar hexazecimal - exemplu: #ff0000, #000000 etc.I cod de culoare RGB - exemplu: rgb(255,0,0), rgb(0,0,0) etc.

Grafica textului - spat,ierea ıntre caractere

I Valoarea 0 ımpiedica alinierea justify a textului.

I Se foloses, te astfel:

1 letter-spacing: valoare;

I Valorile posibile sunt:I normalI lungime

Grafica textului - alinierea textului


1 text-align: valoare;

I Valorile posibile sunt:I leftI rightI centerI justify

Grafica textului - decorarea textului


1 text-decoration: valoare;

I Valorile posibile sunt:I noneI underlineI overlineI line-throughI blink

Grafica textului - indentarea textului

I Prima linie dintr-un element HTML poate fi indentata.


1 text-indent: valoare;

I Valorile posibile sunt:I lungimeI procentaj

Grafica textului - transformarea textului

I Textul poate scris cu litere mari sau mici indiferent de ceea ce eraoriginal.


1 text-transform: valoare;

I Valorile posibile sunt:I noneI capitalizeI lowercaseI uppercase

Grafica textului - tratarea spat,iilor

I Spat,iile albe pot fi controlate.


1 white-space: valoare;

I Valorile posibile sunt:I normal - spat,iile multiple sunt ignorateI pre - spat,iile multiple nu sunt ignorateI nowrap - nu se face saltul la o linie noua decat daca este ıntalnit

elementul <br>

Grafica textului - spat,iul dintre cuvinte

I Spat,iul dintre cuvinte poate fi controlat. Pot fi folosite s, i valorinegative.


1 word-spacing: valoare;

I Valorile posibile sunt:I normalI length - se da dimensiunea cu care sa fie spat,iate cuvintele.

Liste ordonate s, i neordonate

I Exemplu cu o singura declarat,ie pentru listele ordonate s, i celeneordonate:

1 list-style: valoare valoare valoare;

I Subproprietat,i:I typeI positionI image

Liste ordonate s, i neordonate - image

I Exemplu:

1 list-style-image: url(cale_catre_imagine.gif, jpg sau png);

I Este bine sa fie declarata s, i list-style-type ın cazul ın care utilizatorulnu afis, eaza imaginile.

Liste ordonate s, i neordonate - position

I Exemplu:

1 list-style-position: valoare;

I Valori:I insideI outside

Liste ordonate s, i neordonate - type

I Exemplu:

1 list-style-type: valoare;

I Valori:I discI circleI squareI decimalI lower-romanI upper-romanI lower-alphaI upper-alphaI none

Linkuri formatate CSS

I Culoarea linkului fara nicio act,iune produsa:

a:link {color: #009900;}

I Culoarea unui link deja vizitat:

a:visited {color: #999999;}

I Culoarea cand pointerul este plasat pe link:

a:hover {color: #333333;}

I Asemanator cu hover dar atunci cand linkul a fost accesat printastatura:

a:focus {color: #333333;}

I Culoarea cand linkul este apasat:

a:active {color: #009900;}

I Obs: a:link s, i a:visited trebuie declarate ınainte de a:hover iar acestaınainte de a:active.

Modelul dreptunghiular

Elementele HTML de bloc s, i de linie

Elementele bloc:

I Au valori definite pentru dimensiunile spat,iului ocupat.

I De obicei ıncep pe o linie noua cu except,ia cazului cand suntflotante s, i sunt alaturate altor elemente bloc flotante.

I Pot cont,ine la randul lor alte elemente bloc sau de linie.

I Sunt folosite de obicei pentru port,iuni mai mari de cont,inut (imagini,paragrafe etc.).

I Se foloses, te proprietatea display:

1 display: block;

Elementele HTML de bloc s, i de linie

Elementele de linie:

I Nu au valori definite pentru dimensiunile spat,iului ocupat.

I Ocupa lat,imea necesara afis, arii cont,inutului.

I Nu este obligatoriu sa ınceapa pe o linie noua.

I Nu pot cont,ine elemente bloc.

I Pot cont,ine alte elemente de linie.

I Sunt folosite de obicei pentru port,iuni mai mici de cont,inut (catevacuvinte).

I Se foloses, te proprietatea display:

1 display: inline;

Elementele HTML linie-bloc (inline-block)

Elementele inline-block:

I Au valori definite pentru dimensiunile spat,iului ocupat.

I Nu este obligatoriu sa ınceapa pe o linie noua.

I Pot cont,ine alte elemente bloc.

I Pot cont,ine alte elemente de linie.

I Exemplu proprietatea display:

1 display: inline-block;

Elementele Div

I Elementele Div sunt elemente bloc HTML. Un element Div poatecont,ine orice element.

I Exemplu (cod HTML):

1 <div id="container">2 Aici se afla continutul siteului3 </div>

I Exemplu (cod CSS):

1 #container{2 width: 70%;3 margin: auto;4 padding: 20px;5 border: 1px solid #666;6 background: #ffffff;7 }

Elementele Span

I Elementele Span sunt similare cu elementele Div dar sunt de linie s, inu de bloc, nu este obligatoriu sa ınceapa pe linie noua. Pot cont,ineport,iuni de text.

I Exemplu (cod HTML):

1 <span class="italic">Acest text este italic</span>

I Exemplu (cod CSS):

1 .italic{2 font-style: italic;3 }

Modelul dreptunghiular (”Box Model”)

I Modelul dreptunghiular genereaza cele mai multe probleme pentruıncepatori, dar o data ınt,eles, este foarte puternic.

I RET, INET, I: ORICE ELEMENT BLOC DE PE O PAGINACORESPUNDE UNEI CUTII DREPTUNGHIULARE!

Width : 492px = 20px +6px +20px +400px +20px +6px +20px

Height : 192px = 20px +6px +20px +100px +20px +6px +20px

Modelul dreptunghiular (”Box Model”)

I content = cont,inut

I padding = margine interioara

I border = chenar

I margin = margine exterioara

Obs: Pentru elementele de linie nu se iau ın considerat, iedimensiunile.

Proprietat,ile CSS Width s, i Height


I Exemplu pentru ınalt,ime (height):

1 height: valoare;

I Valori:I autoI lungimeI procentaj

I Similar pentru proprietatea lat,ime (width)

Proprietat,ile CSS Width s, i Height - ınalt,imea randurilor

I Exemplu pentru ınalt,imea randurilor:

1 line-height: valoare;

I Valori:I normalI numarI marimeI procentaj

Proprietat,ile CSS Width s, i Height - ınalt,imea maxima

I Exemplu pentru ınalt,imea maxima:

1 max-height: valoare;

I Valori:I noneI lungimeI procentaj

I Similar pentru proprietatea lat,ime maxima (max-width)

Proprietat,ile CSS Width s, i Height - ınalt,imea minima

I Exemplu pentru ınalt,imea minima:

1 min-height: valoare;

I Valori:I lungimeI procentaj

I Similar pentru proprietatea lat,ime minima (min-width)

Proprietatea Margin

I Proprietatea margin nu se mos, tenes, te.

I Proprietatea margin declara spat,iul dintre un element HTML s, ielementele din jurul sau.

I Poate fi stabilita pentru toate cele patru part,i:

1 margin-top: lungime, procentaj sau auto;2 margin-left: lungime, procentaj sau auto;3 margin-right: lungime, procentaj sau auto;4 margin-bottom: lungime, procentaj sau auto;

I Dupa cum vedet,i exista trei tipuri de valori posibile: lungime (unitat,iabsolute), procentaj (unitat,i relative) sau auto.

Proprietatea Margin ın varianta cu 4 sau mai put,ine valori

I Exista posibilitatea de a declara proprietatea margin ın varianta 4valori (ın ordinea sus, dreapta, jos, stanga):

1 margin: 10px 10px 10px 10px;

I Proprietatea margin ın varianta 3 sau 2 valori (valorile nedeclaraterezulta din partea opusa existenta):

1 margin: 10px 10px 10px;

I Proprietatea margin ın varianta o valoare (aceeas, i valoare pentrutoate part,ile):

1 margin: 10px;

I Daca nu este declarata, proprietatea margin ia valoarea 0.

I Proprietatea margin poate avea valori negative

Proprietatea Padding

I Proprietatea padding nu se mos, tenes, te.

I Proprietatea padding (margine interioara) declara spat,iul dintrechenarul (border) unui element s, i cont,inutul din el.

I Poate fi stabilita pentru toate cele patru part,i:

1 padding-top: lungime sau procent;2 padding-left: lungime sau procent;3 padding-right: lungime sau procent;4 padding-bottom: lungime sau procent;

I Nu poate fi folosita valoarea auto s, i nici valori negative.

I Poate fi declarata cu 4, 3 , 2 sau o valoare la fel ca ın cazulproprietat,ii margin.

I Valoarea implicita pentru padding este 0.

Chenare (border) CSS


I Exemplu:

1 border: 1px solid #333333;

I Valori:I culoareI stilI grosime

Chenare (border) CSS - culoare

Exemplu:

1 border-color: valoare;

Valoare poate fi:

I numele culorii

I numar hexazecimal

I cod de culoare RGB

I transparent

Chenare (border) CSS - stil

1 border-style: valoare;

Valoare poate fi:

I dashed

I dotted

I double

I groove

I hidden

I inset

I none

I outset

I ridge

I solid

Chenare (border) CSS - grosime

1 border-width: valoare;

Valoare poate fi:

I grosime

I Thin

I Medium

I Thick

Chenare CSS (border) - pentru o singura parte

I Exemplu:

1 border-bottom: 1px solid #333333;

I Valori:I culoareI stilI grosime

I Alte exemple:

1 border-bottom-color: valoare;2 border-bottom-style: valoare;3 border-bottom-width: valoare;

Chenare CSS (border) - raza chenarului

I Exemplu:

1 border-top-right-radius: lungime;2 border-bottom-right-radius: lungime;3 border-bottom-left-radius: lungime;4 border-top-left-radius: lungime;

I Alt exemplu:

1 border-radius: 2em 1em 4em / 0.5em 3em;

este achivalent cu:

1 border-top-left-radius: 2em 0.5em;2 border-top-right-radius: 1em 3em;3 border-bottom-right-radius: 4em 0.5em;4 border-bottom-left-radius: 1em 3em;

Elemente flotante - proprietatea display

I Proprietatea display modifica modul ın care este afis, at un element(opt,iunile principale: bloc sau de linie).

1 display: valoare;

I Valori:I block - elementul este de tip blocI inline - elementul este de tip linieI inline-block - elementul este de tip linie-blocI list-item - elementul este afis, at ca un item de listaI none - elementul nu este afis, at deloc.

Elemente flotante - proprietatea float

I Proprietatea float modifica modul ın care este afis, at un element.

1 float: valoare;

I Valori:I left - elementul este afis, at ın partea stanga a elementului parinteI right - elementul este afis, at ın partea dreapta a elementului parinteI none - nu se face nicio modificare a afis, arii

Elemente flotante - proprietatea clear

I Proprietatea clear specifica daca se permite pozit,ionarea altorelemente flotante lateral.

1 clear: valoare;

I Valori:I none - pot fi elemente flotante pe orice parteI both - nu permite niciun element flotantI left - nu pot fi elemente flotante ın stangaI right - nu pot fi elemente flotante ın dreapta

Proprietatea clip

I Proprietatea clip specifica cat din element este vizibil.

1 clip: valoare;

I Valori:I autoI shape

I Exemplu:

1 clip: rect(10px, 10px, 10px, 10px);

Proprietatea overflow

I Proprietatea overflow controleaza ceea ce se face atunci candcont,inutul depas, es, te cadrul.

1 overflow: valoare;

I Valori:I autoI hiddenI visibleI scroll

I Exemplu:

1 #overflow_box {width:200px; height:200px; border-top: 1pxsolid

2 #eee; border-left: 1px solid #eee; border-bottom: 1px solid3 #eee; padding: 10px; overflow: auto;}

Proprietatea visibility

I Proprietatea visibility permite ascunderea unui element. Spredeosebire de display:none, visibility:hidden ocupa spat,iulelementului pe pagina.

1 visibility: valoare;

I Valori:I hiddenI visible

Proprietatea z-index

I Proprietatea z-index defines, te ordinea de suprapunere aelementelor.

1 z-index: valoare;

I Valori:I autoI number

Proprietatea position

I Proprietatea position determina modul ın care sunt pozit,ionateelementele.

1 position: valoare;

I Valori:I static - implicitI relativ - ıl pozit,ioneaza relativ la pozit,ia normalaI absolute - la marginea din stanga sus a elementului parinte (a paginii)I fixed -fixat la scroll

Proprietatea position

I Proprietatea position lucreaza cu urmatoarele proprietat,i:I topI leftI rightI bottom

I Exemplu:

1 position: absolute; top: 10px; right: 10px;

Proprietatea box-sizing

I Proprietatea box-sizing (CSS3) modifica modul de calcul aldimensiunilor reale ale cadrului unui element.

I Exemplu:

1 box-sizing: border-box;

I content-box (implicita)I padding-boxI border-box (cea mai utila)I inheritI initial

Concluzie s, i resurse suplimentare

I Aceasta sect,iune a avut drept scop numai prezentarea generala aCSS.

I Multe lucruri nu le-am acoperit (pseudoelementele, transformarile,tranzit,iile, limbaje de preprocesare a CSS) dar sper ca v-am oferit oprivire de ansamblu.

I Este util s, i rezumatul pe care ıl putet,i gasi aici: http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

I Sau putet,i cauta cu Google ”CSS cheatsheets”

I Un alt ghid util: http://www.cssbasics.com/full.pdf

http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf



http://www.cssbasics.com/full.pdf

Limbajul JavaScript

De ce sa ınvat, JavaScript?

JavaScript este unul din cele 3 limbaje pe care trebuie sa le cunoascaorice programator web:

I HTML pentru a defini cont,inutul paginilor web

I CSS pentru a specifica aspectul paginilor

I JavaScript pentru a programa comportarea paginilor

Observat,ii importante!

I JavaScript s, i Java sunt limbaje complet diferite atat din punct devedere conceptual cat s, i din cel al proiectarii.

I JavaScript a fost inventat de Brendan Eich ın 1995 s, i care a devenitstandard ECMA ın 1997.

I ECMA-262 este numele oficial. ECMAScript 2016 (Iunie 2016) esteultima versiune JavaScript.

Scripturi HTML - JavaScript

Folosind JavaScript, paginile web devin mai interactive.Scriptul de mai jos scrie Salut JavaScript! ıntr-un element HTML cuid=”demo”:

1 <body>2 <p id="demo"></p>3 <script>4 document.getElementById("demo").innerHTML = "Salut JavaScript!";5 </script>6 </body>

Tagul <script>este folosit pentru a defini un script pe partea de client cade exemplu cod JavaScript.Daca browserul nu suporta JavaScript:

1 <noscript>Din pacate browserul dumneavoastra nu suporta JavaScript!</noscript>

23 <p>Un browser ce nu suporta JavaScript va afisa textul din cadrul

elementului noscript.</p>

JavaScript - Exemple

Elementul <script>cont,ine fie instruct,iuni de script fie face o trimiterecatre un fis, ier script extern prin intermediul atributului src.JavaScript este folosit uzual pentru manipularea imaginilor, validareaformularelor s, i modificari dinamice de cont,inut.Exemple de ce poate face JavaScript:Poate modifica cont,inutul HTML:

1 document.getElementById("demo").innerHTML = "Hello JavaScript!";

JavaScript poate modifica stilurile CSS:

1 document.getElementById("demo").style.fontSize = "25px";

JavaScript poate modifica atributele HTML:

1 document.getElementById("image").src = "picture.gif";

Elementele limbajului

Exemplele pentru sintaxa de baza le gasiti la adresahttp://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-javascript/index.php

http://itee.elth.pub.ro/~vbucata/ia/cursuri/ex-javascript/index.php

http://itee.elth.pub.ro/~vbucata/ia/cursuri/ex-javascript/index.php

Va mult,umesc pentru atent,ie!

Date post:	29-Aug-2019
Category:	Documents
Upload:	dohanh
View:	237 times
Download:	3 times

Programare Web Front End - itee.elth.pub.roitee.elth.pub.ro/~vbucata/ia/cursuri/curs3.pdf ·...

Documents