Css inline II. Sintaxa CSS II. A. Tipuri de selectori

Suport curs WebDesign Nivel II

Acest suport de curs isi propune sa abordeze urmatoarele subiecte:

I. Moduri de aplicare a css-ului

1. CSS extern

2. CSS intern

3. CSS inline

II. Sintaxa CSS

II.A. Tipuri de selectori

1. Selectorul direct

2. Selectorul ID

3. Selectorul class

4. Pseudo-clase

5. Pseudo-elemente

6. Atribute ca selectori

7. Grupare de selectori

8. Nesting

II.B. Proprietati CSS

1. Pentru formatare de text;

2. Pentru formatare de liste;

3. Pentru link-uri;

4. Pentru fundal (background);

5. Pentru pozitionare;

III. Layout pentru diverse device-uri

IV. JavaScript

V. Implementarea unui layout din Photoshop

VI. Gazduire (hosting)

VII. Serach Engine Optimization

1. SEO on page

2. SEO off page


CSS – Cascading Style Sheets

CSS – ul este un limbaj prin care se pot atribui proprietati de formatare, pozitionare si accesibilitate limbajelor web bazate pe XML (XML, HTML, XHTML). Cel mai des este intalnit in cazul formatarii paginilor web. CSS-ul este format dintr-un set de instructiuni catre browser pentru a aplica

proprietati pentru formatare de text, fundaluri, contururi sau pozitionare de diviziuni ale paginii (
).

Poate fi folosit si pentru alte medii in afara afisarii pe ecran. Poate stabili formatarea pentru listare, sau poate introduce proprietati de recitare a continutului in cazul browserelor cu suport vocal. Similar limbajului HTML, CSS-ul nu necesita o platforma pe care sa poata rula. Este un limbaj independent ce poate fi creeat sau editat folosind orice editor simplu de text.

Sintaxa CSS selector {proprietate: valoare;}

I. Moduri de aplicare

Codul de tip CSS poate fi introdus in trei moduri:

1. CSS extern

2. CSS intern

3. CSS inline
1. CSS extern

Acet mod de aplicare a css-ului presupune doi pasi:

- creearea fisierului extern .css (style.css) care va contine codul css pentru intreg-ul site

- realizarea legaturii intre pagina html si fisierul .css (folosind tag-ul )

In broswser-ele moderne atributul type="text/css" poate fi omis. Astfel tag-ul va arata asa:

Un fisier css extern poate fi legat de oricate pagini html si formateaza toate paginile html de care este legat. De asemenea, css-ul extern este modul ideal de a adauga css pentru un site, avand in vedere ca poate formata oricate pagini html in acelasi timp (nu suntem nevoiti sa scriem codul css pentru fiecare pagina in parte) si ca nu ingreauneaza codul html (oricat de mult cod css am avea, in fisierul html ar fi doar tag-ul )
2. CSS intern

Se introduce in sectiunea de a documentului folosind tag-ul

Ca si in cazul tag-ului si pentru tag-ul style se poate omite atributul type. Astfel, pentru a insera css intern putem folosi doar tag-ul


Css-ul intern formateaza intreaga pagina in care este introdus. Totusi, nu este solutia cea mai buna pentru formatarea unui site pentru ca presupune scrierea codului css pentru fiecare pagina (chiar daca este comun). Totodata, un cod amplu, in css intern, ingreuneaza pagina html.
Prin urmare, modul css intern poate fi folosit pe exemple, layout-uri de o singura pagina...
3. CSS inline

Se aplica direct pe tag-ul dorit cu ajutorul atributului style

Lorem ipsum

Atributul style poate fi aplicat pe toate tagurile din sectiunea .

Acest mod de aplicare nu este foarte indicat pentru ca ingreuneaza foarte mult codul html si nu permite utilizarea selectorilor. Totusi, in cazul in care este folosit, el va avea prioritate fata de css intern si css extern.

Prioritatea aplicarii proprietatilor css:

browser < css extern =*css intern < css inline

- css inline este prioritar

- intre css extern si intern prioritatea este in functie de ordinea de scriere (ultimul introdus va avea prioritate)

- browser - orice ce mod de aplicare a css-ului are prioritate fata de regulile default ale browser-ului (ex: link-urile: subliniate, colorate, heading-urile: diverse dimensiuni, bold si margin, etc.)

Astfel, in cazul aplicarii acelorasi proprietati pentru un element, regulile de prioritate se vor respecta.

II. Sintaxa CSS
selector {proprietate:valoare;}
II.A. Tipuri de selectori
1. Selector direct

Orice tag poate reprezenta un selector direct. (in exemplul de mai jos avem

).

Denumirea selectorului este dat de numele tag-ului fara "<" si ">" (

tag -> p selector direct).
p {

color: #999999;

text-align: justify;

}
Selectorul direct formateaza toate tag-urile cu acelasi nume din pagina (exemplul de mai sus formateaza toate

)
2. Selector de tip ID

paragraf formatat de #abc

paragraf neformatat

paragraf neformatat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor, mi et viverra mollis, augue arcu porta orci, in tempor leo lorem at mauris. Mauris a urna id velit volutpat auctor. Curabitur fringilla. Vestibulum fermentum auctor leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada.

Aenean vehicular fringilla tortor. Nulla porta rutrum lorem. Phasellus pellentesque nulla a nisl. Fusce at est vitae nisl lobortis vulputate. Donec sem ante, posuere et,

venenatis at, sagittis vitae, turpis. Phasellus eu lectus. Maecenas est neque, euismod id, gravida vitae, lobortis vel, est. Mauris fermentum sodales lorem.

Un paragraf ca oricare altul

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor, mi et viverra

mollis, augue arcu porta orci, in tempor leo lorem at mauris. Mauris a urna id velit volutpat auctor.

Curabitur fringilla. Vestibulum fermentum auctor leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada. Aenean vehicula fringilla tortor. Nulla porta rutrum lorem. Phasellus pellentesque nulla a nisl. Fusce at est vitae nisl lobortis vulputate. Donec sem ante, posuere et, venenatis at, sagittis vitae, turpis. Phasellus eu lectus. Maecenas est neque, euismod id, gravida vitae, lobortis vel, est. Mauris fermentum sodales lorem.

Phasellus viverra, tortor non eleifend vehicula, leo leo pellentesque velit, accumsan porttitor tortor

tortor non eros. Aenean et purus. Fusce sed diam quis odio egestas fermentum. In dui. Maecenas lectus.

Aliquam erat volutpat. Nulla vitae lorem ac neque tincidunt varius. Nulla facilisi. In hac habitasse platea dictumst. Pellentesque malesuada enim ut ligula. Etiam massa. Suspendisse consectetur pellentesque enim. Phasellus ut arcu sit amet arcu iaculis fermentum. Sed lobortis bibendum augue. Fusce sit amet nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed libero ipsum. Mauris dictum porta ante sit amet aliquam. Aenean faucibus tempus semper. Vivamus mi orci, euismod quis posuere a, pulvinar a ante. Donec nec enim vel dui dictum sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sit amet tellus dui, ac blandit massa. Fusce vitae libero est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed libero ipsum. Mauris dictum porta ante sit amet aliquam. Aenean faucibus tempus semper. Vivamus mi orci, euismod quis posuere a, pulvinar a ante. Donec nec enim vel dui dictum sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sit amet tellus dui, ac blandit massa. Fusce vitae libero est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

TITLU

un paragraf

alt paragraf

alt paragraf

alt paragraf

alt paragraf

alt paragraf

un paragraf

un paragraf

un paragraf

un paragraf

un paragraf

.
Librariile javascript sunt fisiere externe cu extensia .js care contin mai multe functii predefinite. Ele se folosesc pentru a simplifica codul introdus. (se folosesc functii deja existente in loc sa se creeze unele noi)

Librarii javascript cunoscute ar fi: jQuery.js, scriptaculous.js, prototype.js, angular.js,node.js, etc.
V. Implementarea unui layout din Photoshop
Integrarea unui layout din Photoshop reprezinta o parte importanta din job description-ul unui web designer. In general, presupune decupare unor imagini din layout pe care sa le folosim ulterior in layout-ul din css.
Pentru ca implementarea sa fie una corecta, trebuie sa tinem cont de cateva principii:

- imaginile decupate nu trebuie sa contina text pentru ca text-ul din imagine nu este indexat de motorul de cautare ca text si pentru ca un astfel de text ar fi greu de editat

- imaginile decupate trebuie sa fie optimizate pentru web (dimensiunea trebuie sa fie cat mai mica)

- orice element pe care il putem reface din css / html, nu il vom decupa din photoshop (numarul imaginilor trebuie sa fie cat mai mic)

In general, folosind o mica parte dintre instrumentele Photoshopului putem decupa cam orice tip de layout.
VI. Gazduire
Pentru a pune site-ul online dupa ce il realizam, trebuie sa tinem cont de cateva aspecte:
In primul rand, sa ne rezervam un domeniu (ex www.abc.ro). Domeniile pot avea extensia.ro (pe de-o parte) sau .com, .net... etc. (pe de alta parte) Cele cu .ro sunt gestionate de ROTLD.ro de unde puteti sa le si inchiriam si sa platim o taxa approx 50 euro sau anual o suma mai mica (ceea ce se intampla si la domeniile cu alte extensii).
Domeniul poate avea maxim 63 de caracter dar nu este indicat sa ne folosim de toate pentru ca denumirea unui domeniu trebuie sa fie succinta, usor de retinut si totodata sa fie sugestiva pentru continutul site-ului.
Urmatorul pas este sa apelam la un serviciu de gazduire (putem opta pentru inchirierea domeniul in acelasi timp cu serviciul de gazduire). Acest serviciu de gazduire presupune inchirierea unui spatiu pe un server. (locul unde va sta site-ul).
Apoi, cei de la gazduire ne vor pune la dispozitie un user si o parola cu ajutorul carora vom putea accesa o interfata de gestiune (ex: cpanel sau direct admin). Din aceasta interfata vom putea modifica urmatoarele:

1. Putem crea un cont de FTP cu ajutorul caruia sa putem incarca site-ul pe server prin intermediul unui client FTP (ex FileZilla)

2. Putem crea adrese de e-mail, sa cream o adresa default sau sa stabilim o adresa de forwarding.

3. Putem adauga mai multe domenii sau subdomenii in cazul in care ne permite gazduirea.

4. Putem crea si gestiona baze de date
Cateva criterii dupa care trebuie sa ne ghidam cand alegem un serviciu de gazduire ar fi: spatiul oferit, traficul lunar, numarul de domenii gazduite, numarul de adrese de e-mail si bineinteles costul. Suportul si calitatea serviciului cu clientii au, de asemenea, un rol important.
VII Search Engine optimization
In acest capitol vom aborda cateva metode pe care le putem aplica astfel incat sa ajungem pe o pozitie cat mai buna in rezultatele cautarii pe google sau pe orice alt motor de cautare.
In continuare ne vom axa pe Google pentru ca este motorul de cautare cel mai popular, de departe. Totusi o parte dintre metode sunt aplicabile si pentru alte motoare de cautare (Bing, Yahoo, Ask...)
1. SEO on page

2. SEO off page
1. SEO on page

Utilizarea corecta a tag-urilor precum si organizarea buna a continutului ne pot ajuta sa obtinem o pozitie mai buna in rezultatele cautarii.

Cateva tag-uri importante pentru SEO:

- - poate reprezenta link-ul de pe care se acceseaza site-ul din rezultatele cautarii

- - poate reprezenta snippet-ul din rezultatele cautarii (cele 2 randuri descriptive care ar trebui sa atraga accesari)

-

..

- este foarte important sa avem un continut organizat si sa avem titluri si subtitluri

- - pentru imaginile relevante din pagina este obligatoriu sa folosim alt

- alte tag-uri precum .., , dar si tag-urile semantice introduse in html 5, cum ar fi

,

,

sau

, sunt, de asemenea, foarte importante pentru ca motorul de cautare sa poata analiza cat mai corect continutul paginii.

Totodata, optimizarea imaginilor, codului css sau javascript ajuta la incarcarea mai rapida a paginii ceea ce este important pentru indexare.
2. SEO off page

Sunt cateva lucruri pe care le putem face si in afara codului care no vor ajuta pentru a obtine un loc mai bun in rezultatele cautarii. Din fericire Google ne pune la dispozitie o serie de instrumente care sa ne ajute in acest sens. (Google Analytics, Google Webmaster Tools...)