sâmbătă, 21 aprilie 2012

Introducere in CSS


Introducere - De ce folosim CSS

Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap, ajutandute in a mentine codul html cat mai simplu si mai ordonat.

Introducere - Ce este CSS - Generalitati

Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML..
In principiu HTML a fost conceput pentru a marca elementele unei pagini:
<html>
<head>
<title>......</title>
</head>
<body>
<h1>......</h1>
<p>........</p>
</body>
</html>
Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-urilor precum "font", "color" etc. A fost atunci cand limbajul de programare HTML a devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate proprietatile elementelor principale.
Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css".
In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele.
Si cam atat despre ce face si ce este CSS-ul. In capitolul urmator vom trece la lucruri mai practice si vom invata cum anume sa facem tot ce am spus ca se poate face folosind CSS.

miercuri, 18 aprilie 2012

Repară Windows-ul fără reinstalare


de Alexandra Groza |  1 mai 2008
Repară Windows-ul fără instalare
Una dintre cele mai râvnite funcţii din următorul sistem de operare ce va fi lansat de Microsoft, ce poartă acum numele de cod Seven, poate fi folosită chiar şi în Windows XP. Prezentată ca una dintre cele mai importante noutăţi, Recover Center-ul este o aplicaţie pe care viitorii utilizatori o vor găsi în Control Panel şi cu ajutorul căreia vor repara fişierele care nu mai funcţionează, fără a fi nevoie de o reinstalare completă a Windows-ului şi fără ca alte fişiere să fie afectate.

Funcţia, ceva mai rudimentară, e prezentă şi în Windows Vista, dar din Windows XP lipseşte cu desăvârşire, iar utilizatorii trebuie să apeleze încă la vechile metode. Dacă ceva se strică, sistemul de operare cere introducerea CD-ului de pe care a fost instalat, pentru ca fişierele să poată fi înlocuite sau reparate şi, cum de cele mai multe ori problemele sunt prea grave, se ajunge la o nouă instalare, dar în acelaşi timp se pierd şi date.

Dar toate aceste pot lua sfârşit cu instalarea unei aplicaţii numită Recovery Console. Astfel în momentul în care apar probleme, utilizatorul sistemului de operare are de ales în momentul în care deschide calculatorul dacă să pornească sistemul de operare sau să se treacă înainte prin consola respectivă, care îl va ghida prin paşii ce trebuie urmaţi pentru remedierea problemelor.

Pasul 1. Se introduce în unitate CD-ul de pe care a fost instalat sistemul de operare. Apoi se deschide opţiunea Run din meniul de Start şi se introduce următoarea comandă: d:\i386\winnt32.exe /cmdcons(înlocuiţi litera D de la început cu cea care desemnează unitatea CD/DVD). După câteva secunde, va începe instalarea, iar la final va apărea o fereastră care va confirma terminarea instalării.

Pasul 2. Prima dată când va porni calculatorul, utilizatorul va trebui să aleagă între sistemul de operare şi noul program instalat. Odată selectată a doua opţiune din meniu, utilizatorul va fi ghidat în funcţie de problemele găsite.

Virusi si Trojani

Cum te feresti de virusi si trojani


   Incep prin a va spune ca un studiu, american, a aratat ca un computer conectat la internet fara antivirus instalat, poate fi virusat in 5 minute de la conectare. De exemplu, un prieten si-a instalat windows-ul, iar pana a instalat driverele si antivirusul, deja se infectase cu un virus si asta pentru ca pana a terminat de instalat antivirusul el intrase pe Internet pentru a aceesa cateva informatii. De aceea va recomand ca pana nu instalati un program antivirus, sa nu va conectati la Internet pentru ca e posibil sa deveniti o victima.
Sfaturi pentru a avea o viata mai usoara cu PC-ul vostru:
- Daca instalati Windows XP, ar fi de preferabil sa aiba, cel putin, Service pack 2 inclus (SP2)
- Instaleaza un antivirus complet, care sa aiba spyware detector si protectie firewall pentru a te proteja de atacurile din retea sau de pe Internet. Va recomand Kaspersky Internet Security sauNod32 antivirus+ZoneAlarm Anti-Spyware. Da-ti un search pe Google si gasiti mai multe detalii.
- Nu este de ajuns doar sa ai antivirusul instalat. Trebuie sa fie activ tot timpul!
Actualizeaza antivirusul cat mai des posibil sau bifeaza optiunea sa se actualizeze automat
- Mare atentie cand cauti pe Internet crackuri sau seriale! De cele mai multe ori acestea contin fie virusi, fie spy-ware sau trojani. Oricum, un antivirus bun le depisteaza inainte sa te infectezi.
- Aveti, de asemenea, mare grija cand cautati cu programele de tip peer 2 peer, adica programe gendc++Kazaa, LimeWire, Ares, etc. Daca ati cautat de exemplu o melodie, nu o downloadati daca dimensiunea fisierului este suspect de mica (in loc de 3-7 mega cat este media, are 100 kb), sau daca"melodia" are de fapt extensia .exeSfatul este valabil atat pentru fisiere audio cat si pentru melodii. In mod sigur daca o melodie sau o poza are extensia .exe. aceleste un virus. De asemenea cand cautati crackuri, cel mai adesea le veti gasi arhivate in format .rar sau .zip. Scanati-le inainte de a le dezarhiva.
Urmati sfaturile prezentate mai sus si cu siguranta nu o sa aveti batai de cap cu virusii.

marți, 10 aprilie 2012

Computerul sa mearga mai bine si eficient


Eliberareza resursele calculatorului


Calculatorul trebuie sa ruleze mai repede si sa aiba un timp de bootare mult mai scazut.

Elibereaza spatiu prin stergerea programelor vechi. Du-te la Start>Control panel>Add/remove programs. Alege programele pe care vrei sa le dezinstalezi, programe vechi pe care nu le mai utilizezi.
Scapa de spyware si adware. Programe gratuite precum Spybot S&D si AdAware, te ajuta sa scapi de aceste amenintari.
Fa curatenie in meniul Startup. Cu timpul se pot strange foarte multe programe care vor rula odata cu pornirea calculatorului si astfel resursele se vor imputina. Pe langa indepartarea amenintarilor spyware, Spybot S&D va poate curata si lista de programe din Startup.
Curata registrii. Foloseste programul Easy Cleaner pentru a ordona si curata registrii din calculatorul tau.
Sterge fisierele temporare din calculator. Programul CCleaner va poate ajuta in acest sens.
Defragmentarea hard disk-ului este o alta solutie. Defragmentarea pune fisierele acolo unde ar fi trebuit sa fie si le ordoneaza.
Restarteaza-ti calculatorul. Vei observa o imbunatatire in viteza.
Atentie

Toate programele mentionate in articol pot fi descarcate de pe majorgeeks.com.
Ai grija sa faci o copie a registrilor inainte sa ii modifici


Cum sa faci sa mearga Windows-ul mai bine si eficient

Daca Windows-ul a inceput sa-ti mearga greoi (deschide greu aplicatiile, se misca in reluare desi ai un procesor si RAM suficient) iti vine sa-l arunci pe fereastra, ce sa mai!
In continuare iti prezint cateva sfaturi care sa-ti imbunatateasca performanta Windows XP-ului:
- Incearca sa schimbi calitatea culorilor trecand de la 32 de biti la 16 biti. Acest lucru il poti face urmand pasii: Click dreapta pe Desktop -> Properties -> Settings iar la Color Quality sa fie peMedium (16 bit).
- Defragmenteaza Harddisk-ul: Click dreapta pe partitia unde ai instalat Windows -> Tools ->Defragment Now... -> Defragment
Cick dreapta pe My Computer -> Properties -> Advanced -> Performance -> Settings si aici bifezi optiunea Adjust for best performanceOk -> Ok.
- Scoate imaginea de fundal (wallpaper-ul) de pe desktop pentru a mai elibera din memoria RAM.
- Vezi ce programe pornesc la startup si inlatura-le pe cele care sunt inutile.
- Incearca sa cureti registrii cu programe gen registry-cleaner, cauta pe Google: registry cleaner
- PC-ul poate functiona cu greutate si din pricina virusilor, asa ca scaneaza-ti calculatorul cu un antivirus (Kaspersky, Nod32, AVG, BitDefender, PC-Cillin, Norton, etc).
- Daca si dupa ce ai urmat sfaturile de mai sus calculatorul merge in continuare greoi, atunci e cazul sa reinstalezi Windows-ul.
Windows XP, spre deosebire de Linux nu este fiabil, astfel ca in timp acesta devine tot mai incarcatcu registrii inregistrati de programele instalate in timp si ca o cosecinta calculatorul va deveni mai lent, o reinstalare fiind necesara cu o frecventa de o data la 5-6 luni!

Programele (gratuite) și impactul lor asupra performanței


În general, ne aruncăm entuziasmați în descărcarea tuturor aplicațiilor și facem asta în mod special dacă este vorba de un program gratuit sau de un chilipir (promoții ale programelorcomerciale), indiferent dacă dispunem deja de o aplicație instalată în calculator care face același lucru. Asta se întâmplă deoarece omul, încă de la crearea lui, se pare că a fost “înzestrat” cu tendința de a aduna tot ce nu-l costă nimic… Nu-i așa că simțim cu toții o slăbiciune pentru cadouri și din acest motiv le acceptăm uitând de consecințe și de posibilele repercusiuni nedorite ?!? Păi vedeți!
În informatică se întâmplă același lucru deoarece creatorii de software, atunci când fac un program nou îl oferă gratis până când acesta își câștigă faima necesară pentru ca alte persoane să fie dispuse să plătească pentru a-l avea.
Dar există și fabricanți care dezvoltă software util pe care ni-l oferă gratuit cu o condiție: să acceptăm ca aplicația să instaleze un toolbar și / sau să afișeze anunțuri publicitare. Astfel, fabricantul câștigă cu programul pe care ni l-a oferit, bani și popularitate (popularitate deoarece dacă vom fi mulțumiți de program îl vom recomanda și cunoscuților, bani din câștigurile generate de click-urile pe care noi le facem pe anunțurile “interesante” din program; exemplu: Yahoo! Messenger).
Pe lângă aplicațiile create în scopurile precizate mai sus există și aplicații “Freeware“; aplicații gratuite finanțate în general din sponsorizări și donații. Dar asta nu vrea să spună că sunt bune sau rele; există de tot felul.

Ce programe instalăm în calculator


E important ca atunci când instalăm un program, indiferent de categoria din care face parte, să ne gândim dacă nu dispunem deja de un altul care să îndeplinească aceeași sarcină și dacă este așa să ne hotărâm pe care-l vom păstra; pe cel nou, sau pe cel vechi.
Vă recomand să instalați întotdeauna cât mai puține programe și mai mult de atât, vă recomand să optați pentru folosirea acelor aplicații ce realizează cât mai multe sarcini de care aveți nevoie. La fel de important este să nu instalați programe și jocuri doar fiindcă vi se oferă gratuit!
Concluzia: Un calculator foarte încărca cu programe vă fi mult mai lent decât un calculator care are exact programele de care utilizatorul are nevoie periodic. Cauza problemei e cât se poate de logică: consumul de resurse va fi mai ridicat decât cel necesar.
Sfat: Dezinstalați atât programele și jocurile pe care nu le mai folosiți cât și pe cele pe care le deschideți “din an în Paști”.

Cauze hardware frecvente datorită cărora calculatorul este lent

  • Procesorul este prea slab pentru a permite rularea programelor instalate în pc.
Soluție: Din păcate nu puteți face foarte multe în acest caz. În general, netbook-urile “suferă” de această problemă deoarece au procesoare cu viteze de calcul cuprinse între 900 Mhz și 1,6 Ghz. În cazul celorlalte calculatoare (laptop-uri, desktop-uri), un upgrade al procesorului ar rezolva rapid problema dar dacă sunteți posesorul /rea unui netbook vă recomand să vă descotorosiți cât mai repede de programele a căror cerințe hardware depășesc caracteristicile netbook-ului.
  • Calculatorul dispune de foarte puțină memorie RAM.
Soluție: Încercați să măriți cantitatea de memorie RAM a calculatorului vostru iar pentru asta apelați la un service autorizat de fabricant (obligatoriu dacă pc-ul este încă în perioada de garanție). La fel puteți cere ajutorul unei persoane cu cunoștințe în domeniul IT, de încredere (nu toate calculatoarele permit upgradarea cantității memoriei RAM).
  • Hard Disk-ul e defect sau procesează datele foarte lent.

Soluție: E foarte puțin probabil ca pe un Hard Disk lent sistemul de operare să ruleze rapid. Cereți ajutorul unei persoane de încredere cu cunoștințe în domeniu pentru a afla dacă schimbarea Hard Disk-ului cu unul mai rapid vă va ajuta să rezolvați problema. Factorii de care trebuie să țineți cont:viteza de scriere a datelor pe HDD precum și viteza de citire a datelor de pe HDD.
  • Componentele se supraîncălzesc.
Soluție: Curățați periodic ventilatoarele pc-ului vostru de praf și asigurați-vă că funcționează corect. Mai mult de atât, încercați pe cât posibil ca orificiile prevăzute pentru întrarea aerului rece și eliminarea aerului cald să fie neastupate (am văzut persoane care folosesc laptop-ul / netbook-ul în brațe, pe covor, pe pătura, etc., astupându-i ventilatorul; evitați să faceți asta! Dacă dispuneți de un pc desktop, asigurați-vă că nu l-ați apropiat prea mult de birou și că aerul poate circula în voie pe lângă el.).

Cauze software frecvente datorită cărora  calculatorul este lent

  • Calculatorul este virusat.
Soluție: Realizați cât mai curând o scanare cu un antivirus actualizat. Nu contează că folosiți în acest scop o soluție gratuită sau una comercială. Soluții antivirus recomandate: avast! Antivirus,AVG Anti-Virus Free.
  • Regiștrii sistemului de operare conțin întrări nefolositoare.
Soluție: E foarte puțin probabil ca asta să fie problema deoarece noile versiuni ale sistemelor de operare Windows gestionează mult mai eficient regiștrii decât o făceau în versiunile precedente aXP. Dacă totuși considerați că aceasta ar putea fi problema, vă recomand să realizați o scanarea cu Wise Registry Cleaner Free.
  •  Prea multe aplicații configurate pentru a porni odată cu sistemul de operare.
Soluție: În momentul în care porniți calculatorul există o serie de aplicații care rulează automat iar consumul de resurse al acestora adăugat la consumul de resurse necesar pornirii sistemului de operare au ca efect advers pierderea de performanță. Pentru a afla mai multe detalii despre această problemă și despre cum o puteți rezolva, faceți click aici.
  • Driverele nu au fost instalate sau sunt la o versiune prea veche.
Soluție: Descărcați și instalați ultima versiune a driverelor calculatorului vostru disponibile pe site-ul fabricantului său, ori, chiar dacă nu vă recomand foarte convins să faceți asta, instalați driverele cu aplicația SlimDrivers sau orice altă aplicație asemănătoare.
  • Componente care nu pot lucra împreună:
Soluția: Vă puteți da seama foarte ușor dacă problema lentitudinii calculatorului vostru provine de la un conflict între componente: înainte ca sistemul să devină lent ați adăugat un nou component (placă video, Hard Disk, memorie RAM, etc). Pentru rezolvarea problemei deconectați componentul proaspăt conectat.

Alte recomandări…

Nu e neapărat ca sistemul să fie lent doar datorită uneia dintre cauzele de mai sus. Există și situații în care anumite configurații avansate îl pot revitaliza într-o clipită. Mai multe detalii pe marginea acestui subiect găsiți în articolele recomandate în continuare:

luni, 9 aprilie 2012

HTML - Cunoştinţe de Iniţiere


CURS utilizare HTML Incepãtori - Avansati
          Consortiul World Wide Web, W3, a definit si standardizat specificatiile HTML 4.0 si a versiunilor anterioare (1, 1.1, 2.0, 3.2); fiecare versiune a adus instructiuni (numite si controale, marcaje, tag - uri) noi fata de versiunea anterioara. La randul lor si producatorii browserelor realizeaza noi versiuni care sa "inteleaga" noile marcaje; ei introduc uneori si marcaje proprii, in plus fata de specificatiile standard, pe care le "intelege" doar browserul lor.
        Pentru a prinde curaj si a vedea modul de lucru, sa construim o pagina simpla.
Instructiuni, atribute, exemple :
a) Forma generala a unui fisier HTML
b) Formatarea textului si a caracterelor (1) | continuare (2)
c) Referinte (legaturi)
d) Tabele
e) Harti de imagini
f) Imagini
g) Cadre (frame-uri)
h) Caractere speciale
i) Culori specificate prin : nume sau valoare RGB ;
    este bine sa folosim asa - numitele culori sigure
j) Liste
k) Facilitarea gasirii paginii de catre motoarele de cautare
l) Stiluri de text - formatare avansata a textului

a) Forma generala a unei pagini Web este:

<html>- marcajul HTML de deschidere - indica faptul ca informatia care urmeaza este scrisa in limbajul HTML
<head>-marcajul HEAD de deschidere - de aici incepe antetul paginii
<title>Titlul paginii</title>- marcajele pereche TITLE - aici se scriu cateva cuvinte sugestive despre continutul paginii - aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr - o lista favorita, ele apar ca nume al paginii.
<meta name = "keywords"
content = "... o lista de cuvinte ...">
<meta name = "description"
content = "... o fraza sugestiva ...">
... alte instructiuni...
- ajuta motoarele de cautare la gasirea paginii, etc. - ne vom ocupa mai tarziu de ele;
!!! - valorile unor atribute, de exemplu "keywords", trebuie incadrate cu ghilimele duble, drepte ( " ) obtinute cu Shift + tasta de langa Enter, nu ( ' ) sau ( ` ).
</head>- marcajul HEAD de inchidere - aici se termina antetul paginii; tot ce este in antet nu apare in fereastra browserului
<body>- marcajul BODY de deschidere - incepe corpul documentului
...
...
- tot ceea ce apare aici va fi afisat in fereastra browserului, dar trebuie formatat cu HTML
</body>- marcajul BODY de inchidere - indica sfarsitul corpului documentului
</html>- marcajul HTML de inchidere
         Dupa cum puteti observa, instructiunile HTML (numite si controale, marcaje sau tag - uri) incep cu o paranteza unghiulara deschisa < urmata imediat de numele instructiunii, unul sau mai multe atribute ale instructiunii (optional), apoi de o paranteza unghiulara inchisa >.
         Majoritatea instructiunilor sunt perechi; cea de inceput se numeste marcaj de deschidere si este de forma:
<nume_instructiune atribut = valoare_atribut>
iar cea de sfarsit marcaj de inchidere si nu contine atribute sau spatii; este de forma:
</nume_instructiune>.
         NU sunt permise spatii decat intre nume_instructiune si atribut. Tot ce se gaseste intre marcajul de deschidere si cel de inchidere va avea caracteristicile marcajului respectiv.
         Browserul ignora marcajele pe care nu le intelege si pe cele scrise gresit.
Exemple :
daca simbolizam spatiul prin _ atunci:
GresitBineRezultat
<h3>text</_h3><h3> text </h3>

text

<_font_size = 5 _ color_=_blue> text <_/_font_><font_size = 5 _ color = blue> text </font>text

b1) Formatarea textului si a caracterelor

InstructiuneaAtributeDescriere / Exemple
<!-- comentariu -->-Comentariu in codul sursa; nu este afisat de browser
< b > < / b >-afiseaza textul cu litere aldine (ingrosate)
< i > < / i >-afiseaza textul cu litere italice (inclinate)
< u > < / u >-afiseaza textul subliniat
< sup > < / sup >-afiseaza textul ca indice superior
< sub > < / sub >-afiseaza textul ca indice inferior
< tt > < / tt >-text cu font monospatiu
< big > < / big >-text cu font marit + bold
< pre atribute >
< / pre >
-afiseaza pe linie noua textul preformatat, ca in codul sursa, dar ia in considerare instructiunile html
 t e x t u l     p r e f o r m a t a t ,
  < b >adica asa cum arata el in< /b >
  codul    sursa    din    Notepad
 
width =latimea liniilor cu text preformatat (numar caractere); se pare ca este ignorata; pentru width = 10 obtinem:
   e       l       r       r       a
 t   x   u       p   e   o   m   t   t
       t               f       a
 
cols =latimea liniilor cu text preformatat (cols=coloane=numar caractere); se pare ca este ignorata; pentru cols = 10 obtinem:
   e       l       r       r       a
 t   x   u       p   e   o   m   t   t
       t               f       a
 
wrapatributul wrap se pare ca este ignorat de unele browsere (ex. IE5.5)
 
< xmp >
< / xmp >
-afiseaza pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html
t e x t u l p r e f o r m a t a t , &amp;amp;amp;lt;b&amp;amp;amp;gt;adica asa cum arata el in&amp;amp;amp;lt;/b&amp;amp;amp;gt; codul sursa din Notepad
Cele de mai jos, pe fond gri, nu ne sunt de prea mult folos si / sau le putem obtine folosind instructiunile de mai sus
< strike > < / strike >-afiseaza textul taiat
< strong > < / strong >-evidentiere logica puternica
< em > < / em>-stil logic de evidentiere
< address >
< / address >
-informatii
despre adresa si autor
< cite > < / cite >-citare bibliografica
< dfn > < / dfn >-definitie de cuvant
< var > < / var >-program sau variabila
< code > < / code >-listing de program
< kbd > < / kbd >-text de la tastatura
< samp > < / samp >-exemplu de date introduse de utilizator
< q > < / q >-ar fi trebuit sa aiba un efect asemanator instructiunii BLOCKQUOTE
alte marcaje : font, paragraf, rigle, etc. |

b2) Formatarea textului si a caracterelor

InstructiuneaAtributeDescriere / Exemple
<!-- comentariu -->-Comentariu in codul sursa; nu este afisat de browser
< b > < / b >-afiseaza textul cu litere aldine (ingrosate)
< i > < / i >-afiseaza textul cu litere italice (inclinate)
< u > < / u >-afiseaza textul subliniat
< sup > < / sup >-afiseaza textul ca indice superior
< sub > < / sub >-afiseaza textul ca indice inferior
< tt > < / tt >-text cu font monospatiu
< big > < / big >-text cu font marit + bold
< pre atribute >
< / pre >
-afiseaza pe linie noua textul preformatat, ca in codul sursa, dar ia in considerare instructiunile html
 t e x t u l     p r e f o r m a t a t ,
  < b >adica asa cum arata el in< /b >
  codul    sursa    din    Notepad
 
width =latimea liniilor cu text preformatat (numar caractere); se pare ca este ignorata; pentru width = 10 obtinem:
   e       l       r       r       a
 t   x   u       p   e   o   m   t   t
       t               f       a
 
cols =latimea liniilor cu text preformatat (cols=coloane=numar caractere); se pare ca este ignorata; pentru cols = 10 obtinem:
   e       l       r       r       a
 t   x   u       p   e   o   m   t   t
       t               f       a
 
wrapatributul wrap se pare ca este ignorat de unele browsere (ex. IE5.5)
 
< xmp >
< / xmp >
-afiseaza pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html
t e x t u l p r e f o r m a t a t , &amp;amp;amp;lt;b&amp;amp;amp;gt;adica asa cum arata el in&amp;amp;amp;lt;/b&amp;amp;amp;gt; codul sursa din Notepad
Cele de mai jos, pe fond gri, nu ne sunt de prea mult folos si / sau le putem obtine folosind instructiunile de mai sus
< strike > < / strike >-afiseaza textul taiat
< strong > < / strong >-evidentiere logica puternica
< em > < / em>-stil logic de evidentiere
< address >
< / address >
-informatii
despre adresa si autor
< cite > < / cite >-citare bibliografica
< dfn > < / dfn >-definitie de cuvant
< var > < / var >-program sau variabila
< code > < / code >-listing de program
< kbd > < / kbd >-text de la tastatura
< samp > < / samp >-exemplu de date introduse de utilizator
< q > < / q >-ar fi trebuit sa aiba un efect asemanator instructiunii BLOCKQUOTE
alte marcaje : font, paragraf, rigle, etc. |

c) Referinte ( legaturi )

InstructiuneAtributeDescriere
< a atribute >
< / a >
-marcaj tip ancora
href = " url "
referinta hipertext (legaturi spre alte pagini folosind un text sau o imagine); intre " si " nu trebuie sa existe spatii; daca dorim sa introducem legaturi spre fisiere sau directoare al caror nume contine spatii (adica sunt formate din cel putin 2 cuvinte) trebuie sa inlocuimspatiile cu %20
name = " nume-ancora "definirea unei ancore
href = " # nume-ancora "referinta catre o ancora interna (din acelasi fisier)
href = " url # nume-ancora "referinta catre o ancora externa (din alt fisier)
target = " nume_cadru "numele cadrului in care va fi afisata sursa definita cu HREF
valori speciale:
_top = incarca pagina intr - o fereastra noua, deasupra altor ferestre de pe ecran
_self = incarca pagina in cadrul curent; este valoarea implicita
_parent = incarca pagina in fereastra parinte
_blank = incarca pagina intr - o fereastra noua, fara nume
< base atribute >href = " alt-URL "
alt_URL " = " http://www.alte_servere.com/alt_site/ ": putem specifica legaturi relative spre fisiere situate pe alt site de pe alt server; este folositor daca in fisier avem majoritatea legaturilor relative spre celalalt site si site-ul este administrat tot de dvs. (altfel se poate schimba structura site-ului sau denumirea fisierelor sau directoarelor fara sa stiti si legaturile vor deveni invalide)
         Putem defini ancore si cu ajutorul instructiunii id = nume-ancora , care se poate atasa ca atribut aproape oricarei instructiuni.
         Mouse-ul plasat deasupra unei legaturi face sa apara pe bara de stare (deasupra butonului "Start") adresa/ directorul/ fisierul accesat de acea legatura; adesea nu ne facem o idee foarte clara despre subiectul acelei pagini.
         In functie de actiunea vizitatorului (plaseaza mouse-ul deasupra sau il ia de pe legatura) putem face sa apara altceva in acel loc (de exemplu subiectul sau titlul paginii); atentie la textul ales sa apara in cazul cand se ia mouse-ul de pe legatura deoarece ramane afisat pana cand este plasat deasupra unei alte legaturi. Exemplu
         Atunci cand dorim sa incarcam pagina principala a unui site, in general nu tastam si numele unui fisier; serverul ne trimite un fisier predefinit; de obicei numele lui este index.html (ori default.html sau welcome.html; cel mai sigur este sa intrebam administratorul serverului pentru a sti cum sa ne denumim fisierul paginii principale).
         Sa presupunem ca pe PC-ul de acasa, in directorul MySite, construim un site sau ca la adresa www.nume_server.com/nume_director/avem un site cu urmatoarea organizare:
Tabelul descrie imaginea din dreapta
nivelul 1nivelul 2nivelul 3
fisierul :
index.html
directorul :
A
directorul :
A1
fisiere :
a11.htm
a12.htm
directorul :
A2
fisiere :
a21.htm
a22.htm
fisierul :
a.htm
directorul :
B
fisierul :
b.htm

         Printr-o legatura plasata intr-un fisier putem accesa un alt fisier, prin intermediul referintelor.
         Referintele pot fi: interne (spre o ancora din acelasi fisier) sau externe (spre un alt fisier); in functie de modul cum specificam calea spre alt fisier pot fi absolute sau relative:
absolute :
- legatura <a href = "http: //www. alte_servere. com/ alt_site/ nume_fisier.html">, plasata in orice fisier din site - ul nostru, indica o legatura externa.
- legatura <a href = "http: //www.nume_server.com/ nume_director/ A/ A1/ a12.htm">, plasata in fisierul index.html, indica o legatura spre fisierul a12.htm din site - ul nostru.
relative :
- legatura <a href = ".. / .. / index.html">, plasata in orice fisier din directorul A1 sau A2, indica o legatura spre fisierul index.html din site - ul nostru.
- legatura <a href = ".. / A / a.htm">, plasata in fisierul b.htm din directorul B, indica o legatura spre fisierul a.htm din directorul A.
- legatura <a href = "A / A1 / a12.htm">, plasata in fisierul index.html, indica o legatura spre fisierul a12.htm din site - ul nostru.
         Referintele relative au cateva avantaje :
- avem mai putin de tastat in codul sursa: nu mai tastam http: //www. nume_server. com/ nume_director pentru fiecare legatura in parte;
- legaturile vor functiona si in timp ce construim site - ul intr - un director pe hard - disk;
- daca vom dori sa mutam site - ul pe un alt server, nu trebuie sa modificam nimic; daca am avea legaturi absolute, pentru fiecare ar trebui sa inlocuim http://www. nume_server.com cu http://www. nume_nou_server.com
         In cazul unui site de dimensiuni mici, care contine doar cateva pagini (fisiere), nu avem nevoie de o organizare mai complicata a site - ului (cu multe directoare); am putea plasa toate fisierele in acelasi director (pe hard - disk sau la adresa www.nume_server.com/nume_director/); o legatura relativa plasata in orice fisier, care apeleaza orice alt fisier, ar fi de forma <a href = "alt_fisier.htm">.

d) Tabele

        Instructiunile de mai jos sunt folosite aproape in orice site deoarece cu ajutorul lor:
- putem crea tabele propriu - zise (cum este cel de mai jos);
- putem controla mult mai bine aranjarea in pagina a elementelor (folosind tabele fara chenar, eventual introducem tabele in interiorul altui tabel).
        Liniile de tabel sunt orizontale; coloanele sunt cele verticale; intersectia unei linii cu o coloana defineste o celula.


InstructiuneAtributeDescriere
< table atribute >
< / table>
-inceput de tabel HTML
border =chenarul tabelului (in pixeli sau %)
bgcolor =culoarea fondului pentru tabel (valoare RGB sau nume culoare)
background = " url "imaginea de fond pentru tabel;
probleme: fond inchis-text deschis sau fond inadecvat (ca marime sau model)
cellpadding =spatiu intre continutul celulelor tabelului si continutul lor (in pixeli)
cellspacing =spatiu intre celulele tabelului (in pixeli)
width =latimea tabelului (in pixeli sau % din spatiul disponibil)
bordercolor =culoarea chenarului (nume culoare sau valoare RGB)
bordercolorlight =culoarea mai deschisa a chenarului (stanga + sus) (nume culoare sau valoare RGB)
bordercolordark =culoarea mai inchisa a chenarului (dreapta + jos) (nume culoare sau valoare RGB)
align =aliniaza tabelul in dreapta (right) sau stanga (left) paginii; textul din jurul tabelului curge pe partea opusa
hspace =spatiu pe orizontala in jurul tabelului (in pixeli)
vspace =spatiu pe verticala in jurul tabelului (in pixeli)
cols =numarul de coloane ale unui tabel
frame =ajustarea cadrelor in tabel - doar in IE
rules =ajustarea riglelor in tabel - doar in IE
< tr atribute >
< / tr >
-linie de tabel
bgcolor =culoarea fondului pentru intreaga linie (valoare RGB sau nume culoare)
align =alinierea continutului celulelor (left, center, right); implicit left
height =inaltimea liniei (in pixeli); in unele browsere nu functioneaza, dar puteti folosi height in TD
< td atribute >
< / td >
-celula de tabel
height =inaltimea celulei; daca pe aceeasi linie (TR) dati din greseala 2 valori diferite pentru height in TD, va lua maximul pentru toate celulele liniei
width =latimea celulei
bgcolor =culoarea fondului pentru intreaga celula (valoare RGB sau nume culoare)
background = " url "imaginea de fond pentru celula
align =alinierea continutului celulei pe orizontala (left, center, right); implicit left
valign =alinierea continutului celulei pe verticala: top (sus), middle (mijloc), bottom (jos); implicit middle
align = baselinealiniaza celulele cu linia de baza a textului adiacent
align = caracteraliniaza coloana fata de un anumit caracter (implicit caracterul " . ")
align = justifyaliniaza marginile din stg. si dr. ale textului
colspan =numarul de coloane pe care se intinde celula
rowspan =numarul de linii pe care se intinde celula
nowrapnu permite despartirea textului pe linii in celula
< th > < / th >-poate fi folosit :
- in loc de TD, dar continutul va fi centrat si ingrosat (bold);
- impreuna cu TD pe aceeasi linie (TR)
< caption atribute >
< / caption >
-text explicativ asociat tabelului
align =alinierea textului (top = implicit, bottom, left, right)
< colgroup >
< / colgroup>
-impreuna cu marcajul < col > defineste un set de definitii de coloane
bgcolor =culoarea de fond
< col atribute >-fara atribute: aceeasi latime pentru toate coloanele
width =latimea coloanei, in pixeli, % sau " * "
align =alinierea textului pentru intreaga coloana (se pare ca nu functioneaza in Netscape 4.51)
char =alinierea textului fata de un anumit caracter
bgcolor =culoarea de fond
< thead >
< / thead >
-defineste titlul tabelului
bgcolor =culoarea de fond
< tbody >
< / tbody >
-corpul tabelului
bgcolor =culoarea de fond
< tfoot >
< / tfoot >
-
pentru liniile de sfarsit ale tabelului; COLGROUP, THEAD, TBODY, TFOOT nu sunt neaparat necesare intr-un tabel, dar uneori demarcarea facuta de ele este folosita de alte marcaje, de ex. <TABLE RULES = GROUPS>
bgcolor =culoarea de fond

e) Harti de imagini

         Sunt imagini care sunt "impartite" in mai multe zone, in functie de zona pe care se executa click, browserul afiseaza o alta pagina.
         De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click in zona Brasov se incarca o pagina care descrie diverse obiective turistice din judet si/sau contine o imagine a hartii judetului, pe care definim alte zone in jurul localitatilor, iar un click pe o localitate ar duce la alta pagina care descrie obiectivele turistice din localitate.
         O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate se poate folosi o imagine care reprezinta toate butoanele - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.
         Pana aici numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va intelege mai nimic (putem totusi folosi marcajul alt de specificare a textului alternativ pentru imagini).
InstructiuneAtributeDescriere
< img atribute >-marcaj de includere a imaginilor
ismapspecifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
usemap = " nume_harta "specifica harta de imagine la client
lowscr = " url "imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
< map atribute >
< / map >
-specifica regiunile unei harti de imagine la client
name = " nume_harta "numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)
< area atribute >-defineste o regiune a unei harti de imagine
shape = " forma "forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
!!! Netscape 4.51 nu a "inteles" decat circle, nu si circ
coords = " coordonate "coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele colturilor din stg. sus si dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele centrului cercului si raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele colturilor poligonului
href = " url "URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
alt = " text "textul alternativ asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
!!! Netscape 4.51 nu a afisat decat primul text dat cu alt

f) Imagini

InstructiuneaAtributeDescriere
< img atribute >-marcajul de includere a imaginii
src = " url "adresa fisierului grafic (url absolut sau relativ)
alt = " text "textul alternativ care este afisat celor care navigheaza fara imagini
align =alinierea imaginii in pagina: right (dreapta), left (stanga = implicit)
alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
height =inaltimea imaginii (in pixeli sau %)
width =latimea imaginii (in pixeli sau %)
border =marimea chenarului din jurul imaginii (in pixeli)
hspace =spatiu pe orizontala in jurul imaginii (in pixeli)
vspace =spatiu pe verticala in jurul imaginii (in pixeli)
         Folositi intotdeauna atributele width si height (exprimate in pixeli): ele rezerva in pagina un spatiu cu latimea si inaltimea specificate si permit afisarea paginii si a textului inainte de receptionarea imaginii de la server.

g) Cadre

         Cu ajutorul cadrelor putem imparti ecranul in mai multe zone si alegem ce fisier sa apara in fiecare zona. Cel mai folosita este impartirea in 2 coloane: in coloana din stanga, mai ingusta, sunt legaturile, iar in zona din dreapta se afiseaza fisierele accesate.
InstructiuneAtributeDescriere
< frameset atribute >
< / frameset >
-definirea impartirii paginii in cadre
cols =numarul si marimea relativa a coloanelor
rows =numarul si marimea relativa a liniilor
border =
marimea chenarului (pixeli); in general nu dorim chenar si folosim border =0 impreuna cu framespacing =0 si frameborder =no, pentru ca nu stim ce browser (cu ce valori setate ca implicite) foloseste vizitatorul, deci mai bine le specificati dvs.
frameborder =specifica daca cadrul definit cu FRAMESET are sau nu chenar : yes sau no; implicit yes
framespacing =
marimea spatiului dintre cadre (pixeli); daca il folositi impreuna cu border, dar cu valori diferite, pentru unele browsere primeaza valoarea lui framespacing (ex. IE.5) iar pentru altele valoarea lui border (ex. Netscape 4.51)
< frame atribute >-definitia unui cadru
src = " url "sursa cadrului
name =numele cadrului, utilizat de marcajul < a href = "url" target = nume >
scrolling =optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit "auto"
noresizepentru a nu redimensiona tragand de chenar (doar daca are)
marginheight =spatiu deasupra si sub un cadru (pixeli)
marginwidth =spatiu la stanga si la dreapta unui cadru (pixeli)
< noframes >
< / noframes >
-sectiunea de pagina afisata browserelor care nu pot interpreta cadre
< iframe atribute >
< / iframe >
-cadru intern (doar IE)
src = " url "sursa cadrului
name =numele cadrului, utilizat de marcajul < a href = "url" target = nume >
height =inaltimea cadrului inglobat (pixeli sau %)
width =latimea cadrului inglobat (pixeli sau %)
frameborder =specifica daca cadrul definit cu IFRAME are sau nu chenar (yes sau no; implicit yes)
scrolling =optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit "auto"


h) Caractere speciale

Pentru a face sã aparã în browser caracterul din coloana Caracter, in codul sursã trebuie sã avem Cod HTML
CaracterCod HTMLSemnificatie
&&amp;ampensand
<&lt;mai mic (less than)
>&gt;mai mare (greater than)
Pentru a obtine majuscule, le folosim in codul sursa in locul literelor mici . Ex. : &Acirc; = Â
á&aacute;a mic cu accent ascutit (acute)
à&agrave;a mic cu accent grav
â&acirc;a mic cu accent circumflex
ã&atilde;a mic cu tildã
ä&auml;a mic cu doua puncte (umblaut)
å&aring;a mic cu inel (ring)
ç&ccedil;c mic cu sedilã
ñ&ntilde;n mic cu tildã
ø&oslash;o mic barat (slash)
ß&szlig;s-z mic ligaturat
¿&iquest;semnul de întrebare invers
£&pound;lira sterlinã
¢&cent;cent
©&copy;simbolul de copyright
®&reg;simbolul de marcã înregistratã
&nbsp;forteazã spatii multiple; chiar dacã în codul sursã avem mai multe spatii, browserul afiseazã unul singur; se poate folosi pentru a scrie un paragraf cu aliniat
"&quot;ghilimele
&scedil;&scedil;nu am obtinut s cu sedilã; afiseazã exact codul sursã
&tcedil;&tcedil;nu am obtinut t cu sedilã; afiseazã codul sursã

i) Culori : date prin nume

Culori ce pot fi apelate prin nume (in engleza), prin comparatie puteti afla echivalentul lor RGB.
albastru marin
aqua
#00FFFF
negru
black
#000000
albastru
blue
#0000FF
violet deschis
fuchsia
gri
gray
aprox. #999999
verde
green
#00FF00
verde citron
lime
maro
maroon
bleumarin
navy
oliv
olive
violet
purple
#FF00FF
rosu
red
#FF0000
argintiu
silver
aprox. #CCCCCC
verde inchis
teal
alb
white
#FFFFFF
galben
yellow
#FFFF00

aici puteti testa size, color, face - cu ajutorul unui formular cu reactie instantanee + alte 139 culori exprimate prin nume

i) Culori : exprimate prin valoarea RGB

            Exista instructiuni care au atribute prin care se pot specifica culori (ex.: COLOR, BGCOLOR, BORDERCOLOR, etc.). Culorile se pot specifica prin numele lor (in engleza, de ex.: red, white, etc.) sau prin valoarea RGB. Culorile se obtin prin combinarea culorilor de baza Red, Green, Blue si rezulta un grup de 6 cifre hexazecimale precedate de semnul # (de ex.: BODY BGCOLOR = # FF0000 are ca rezultat un fond al paginii de culoare rosie). R, G, B sunt initialele culorilor de baza: R (Red = rosu), G (Green = verde), B (Blue = albastru). Primele 2 cifre din cele 6 reprezinta valoarea lui R, urmatoarele 2 valoarea lui G iar ultimele 2 pentru B. Pentru a obtine culori care sunt afisate la fel pe orice sistem (Windows, Macintosh) este bine sa folosim asa - numitele culori sigure Internet.
             Baza 10 are ca cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
             Baza 16 are ca cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a (= 10), b (= 11), c (= 12), d (= 13), e (= 14) f (= 15).
             Urmatorul tabel nu cuprinde toate nuantele care se pot obtine pentru R = 00; deoarece ele sunt valori exprimate in baza 16, intre B = 00 si B = 11 exista valorile: 01, 02, 03, 04, 05, 06, 07, 08, 09, 0a, 0b, 0c, 0d, 0e, 0f, 10. Idem pentru G.
R=00B =
00112233445566778899aabbccddee ff
G =00
11
22
33
44
55
66
77
88
99
aa
bb
cc
dd
ee
ff
            Se pot realiza si alte tabele cu nuantele culorilor obtinute pentru diferite valori ale lui R deoarece intre R = 00 si R = 33 exista o multime de valori pe care le poate lua R (01, 02, ... , 0f, 10, 11, 12, ... , 1f, 20, 21, 22 , ... 2f, 30, 31, 32) dar diferentele sunt relativ mici; le puteti realiza singur inlocuind in codul sursa (folosind functia REPLACE a editorului de texte: inlocuiti #XX (primele doua cifre din toate sirurile #xxxxxx ce apar in cadrul unui singur tabel) cu valoarea dorita (de ex. #0f)); in continuare apar numai tabelele construite pentru R = 33, 66, 99, cc, ff.
        Este posibil ca browserul sa nu poata afisa anumite culori specificate prin valoarea RGB, insa va incerca sa genereze o culoare apropiata (prin dithering = difuzie) sau un fond texturat format din doua culori apropiate celei specificate; se poate ajunge astfel la un fond care poate face textul ilizibil.
        Pentru a evita aceasta situatie, este bine sa folosim asa - numitele culori sigure Internet, care sunt afisate la fel pe orice sistem (Windows, Macintosh). Pentru fiecare dintre culorile de baza, R (Red = rosu), G (Green = verde), B (Blue = albastru) trebuie sa alegem una din valorile : 00, 33, 66, 99, CC sau FF.

R=00B =
00336699cc ff 
G =00
33
66
99
cc
ff
R=33B =
00336699cc ff 
G =00
33
66
99
cc
ff
R=66B =
00336699cc ff 
G =00
33
66
99
cc
ff
R=99B =
00336699cc ff 
G =00
33
66
99
cc
ff
R=ccB =
00336699cc ff 
G =00
33
66
99
cc
ff
R=ffB =
00336699cc ff 
G =00
33
66
99
cc
ff

aici puteti testa size, color, face - cu ajutorul unui formular cu reactie instantanee + alte 139 culori exprimate prin nume

j) Liste

InstructiuneAtributeDescriere
liste de tip definitie
<dl>
</dl>
-lista de tip definitie
<dt>-termen de definitie
<dd>-descriere de definitie
liste neordonate ( marcate )
<ul atribute>
</ul>
-lista neordonata (marcata)
type=forma marcajului: circle, square, disc (implicit)
<li>-element de lista
liste ordonate ( numerotate )
<ol atribute>
</ol>
-lista ordonata (numerotata)
type=tipul numerotarii: A, a, I, i, 1 (implicit)
start=cu a cat-a valoare incepe (implicit cu prima)
<li>-element de lista
combinatii de liste |

k) Facilitarea gasirii paginii de catre motoarele de cautare

InstructiuneAtributeDescriere
<title>
</title>
-- marcajele pereche TITLE - aici dam titlul: cateva cuvinte sugestive despre continutul paginii - aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita sau listata ca rezultat al unei cautari, ele apar ca nume al paginii.
<meta atribute>name =keywords, description, author, ...
content =descrie valoarea lui name
         In general in antetul unei pagini web, intre marcajele <HEAD> si </HEAD>, exista mai multe marcaje META, cu atribute name - content perechi. Exemplu:
<html><head><title>Titlul dorit</title>
<meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
indica browserului ca este un fisier HTML;
charset stabileste tipul de caractere (in general windows-1252), dar exista si altele
<meta name=keywords content="o lista de cuvinte, separate prin virgula">
pagina va fi listata de un motor de cautare (la care ati inscris deja site-ul) in cazul unei cautari in care s-au folosit cuvinte din aceasta lista
<meta name=description content="O fraza care descrie pe scurt continutul paginii">
in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la name=description content="o fraza care descrie ..."); daca nu avem in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o eventuala cautare
<meta name=author content="numele dvs., e-mail, etc">
nu este neaparat necesara
</head><body> .... </body></html>

l) Modele de stiluri

         In specificatiile HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Pana la acea data forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size".
        Modelele de stiluri pot fi aplicate aproape oricarei instructiuni, folosind atributele din tabelul de mai jos.
        Modelele de stiluri pot fi aplicate in mai multe moduri:
         a) intern: atributele din tabelul de mai jos sunt specificate in interiorul marcajului de deschidere al fiecarei instructiuni; este cel mai neeconomic mod.
         b) specificate in antetul fisierului: specificam la inceputul unui fisier diverse atribute pentru mai multe stiluri de text; acele stiluri le putem folosi de mai multe ori in corpul acelui fisier fara a mai specifica si atributele.
         c) extern: atributele pentru diverse stiluri sunt specificate intr-un fisier special (pe care il putem construi cu un editor de texte (Notepad) si il salvam ca fisier de tip text cu extensia .css ) astfel incat pot fi apelate de orice alt fisier de pe site. Este modul cel mai recomandat, mai ales pentru site-uri mari.
         Putem face chiar ca un anumit stil sa poata fi aplicat numai cu o anumita instructiune, iar altele sa poata fi aplicate cu mai multe instructiuni. Unele atribute din tabelul de mai jos pot fi specificate si sub o forma prescurtata; se poate intampla ca unele caracteristici specificate de dvs. sub forma prescurtata sa nu functioneze - folositi forma explicita, neprescurtata.
    Atribut    DescriereValori
backgroundimagini sau culori de fundalURL-ul (imaginii) sau culori date prin nume sau valoare RGB
colorculoarea textuluinume sau valoare RGB
font-familytipul fontuluinumele fontului sau al familiei de fonturi
font-sizedimensiunea fontuluidata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
font-styletext cursivnormal, italic
font-weightgrosimea fontuluiextra-light, light, demi-light, medium, demi-bold, bold, extra-bold
line-heightdistanta dintre liniile de baza ale randurilordata in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)
margin-leftdistanta fata de marginea din stanga a paginiidata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-rightdistanta fata de marginea din dreapta a paginiidata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-topdistanta fata de textul precedent sau fata de marginea de sus a paginiidata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
text-alignalinierea textuluileft(stanga), center(centru), right(dreapta), justify
text-decorationevidentierea textuluinone(nimic), underline(subliniat), italic(cursiv), line-through(taiat)
text-indentdistanta primului rand fata de marginea din stangadata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-styletipul chenaruluinone, groove, dotted, dashed, solid, double, ridge, inset, outset
border-widthgrosimea chenaruluidata in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-colorculoarea chenaruluinume sau valoare RGB
72 pt=1 inch = 25,4 mm;
un font de dimensiunea 14pt inseamna ca sunt 14 puncte intre partea superioara a literei M sau h si partea inferioara a literei g sau y


Se folosesc si instructiunile:
InstructiuneAtributeDescriere
< style >
< / style >
-specifica in antet caracteristicile stilurilor
type=in general Cascading Style Sheets: "text/css"
< span >
< / span >
-marcaj generic, numai pentru stiluri
class=specifica un anumit stil
id=specifica un anumit stil