Pagini Web In Html Si Css

Informatica

Pagini Web In Html Si Css

Byadmin ianuarie 1, 2024

Pagini Web în HTML și CSS

Cuprins

Introducere

1. Capitolul I – Introducerea în HTML

1.1. Principalele elemente HTML

1.2. Crearea și editarea paginii

1.3. Titluri, Paragrafe, Rând nou, Linie orizontală

1.4. Formatarea textului

1.5. Adaugarea Imagini

1.6. Link-uri

1.7. Div și SPAN

2. Capitolul II – Introducerea în CSS

2.1. Scrierea codului CSS

2.2. Crearea Foilor de Stil

2.3. Configurarea fonturilor

2.4. Configurări pentru culori și fundal

2.5. Afișarea elementelor

3. Capitolul III – Introducerea în JavaScript

3.1. Sintaxa JavaScript

3.2. Noțiuni de baza

3.3. Funcții

4. Capitolul IV – Partea Practică

5. Bibliografie

6. Anexe

Introducere

Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar în care documentele sunt distribuite și văzute pe Web. Multe din trăsăturile lui, cum ar fi independența față de platforma, structurarea formatării și legăturile hipertext, fac din el un foarte bun format pentru documentele Internet și Web.

HTML este o abreviere de la Hypertext Markup Language și reprezintă scheletul oricărei pagini de Web. HTML nu este un limbaj de programare ci un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum și aspectul pe care îl are pagina din punct de vedere grafic. în fond, HTML este modul în care îi comunicăm browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora.

Structurată în 10 capitole cărora li se adaugă trei anexe și bibliografia aferentă, prezenta lucrare reprezintă o scurtă prezentare a limbajului HTML.

în primul capitol („Introducere în limbajul HTML”) este prezentată structura unui document HTML, crearea și editarea paginii HTML, formatarea textului , link-uri , adaugarea unei imagini

Cel de-al doilea capitol („Introducerea în CSS”) prezintă scrierea codului CSS, crearea foilor de stil, configurarea fonturilor, afișarea elementelor și configurari pentru culori și fundal.

în capitolul al treilea („Introducerea în JavaScript”) este prezentată sintaxa JavaScript, noțiunile de baza și funcțile.

Capitolul al patrulea („Partea Practică”) prezintă o pagina Web creata cu ajutorul Html-ului Css-ului și JavaScript

Lucrarea se în cheie cu doua anexe care conțin o listă a tag-urilor și a atributelor lor prezentate în ordine alfabetică, precum și o listă cu numele și codurile culorilor sigure.

Capitolul I .

Introducere în HTML

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afișate intr-un browser (sau navigator).
HTML este folosit pentru prezentarea unui conținut (text, imagine) intr-o pagina web, furnizeaza mijloacele prin care conținutul unui document poate fi structurat și adnotat cu diverse tipuri de metadate și indicatii de redare și afisare. Aceste indicatiile pot varia de la decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, hărti de imagini, formulare și cod CSS sau scripturi JavaScript.
Metadatele pot include informatii despre titlul și autorul documentului, informatii structurale despre cum este imparțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit și editat utilizand un editor de text simplu, editarea și intelegerea paginilor în acest fel necesita cunostinte de HTML, pe care le puteți obține studiind lectiile din acest curs.
Exista și editoare grafice, de tip WYSIWYG (What You See Is What You Get – "ceea ce vezi este ceea ce obții"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word și genereaza ele cod HTML pentru conținutul paginii, dar aceste programe genereaza un cod HTML care este de multe ori prea incarcat și de proasta calitate.
HTML este de asemenea utilizat în e-mail. Majoritatea aplicatiilor de e-mail folosesc un editor HTML incorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip.

1.1 Principalele elemente HTML

Ce este HTML?

– Este un set de coduri logice care constituie apariția unui document web și a informatiilor pe care le deține. Codurile sunt scrise intre "<" (paranteza deschisa) și ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, așa se numesc și arata așa: < >.
Exemplu:

– Cele mai multe elemente (numite și tag-uri) au un element (tag) de deschidere și un element de în chidere distins prin "/" în interiorul parantezei deschise "<".
Exemplu:

– Primul cuvânt care apare în ăuntru "<" se numește element sau etichetă HTML și spune browser-ului sa facă ceva, precum <FONT>
– Cuvintele care urmeaza după element în interiorul "< >"se numesc atribute care descriu proprietățile elementului. Cum ar fi : culoarea, mărimea, etc.
– Atributele sunt separate prin spațiu și urmate de semnul egal "=", dupa care sunt scrise, intre ghilimele (" ") valorile atributelor.
– Astfel, o etichetă HTML poate conține elementul de identificare, atribute și valori.
– Exemplu elementul este FONT atributul COLOR și valoarea BLUE:

<FONT COLOR="BLUE">Acest text va fi albastru</FONT>

Structura HTML

– Un document (fișier) HTML este alcătuit din mai multe elemente și atributele lor.
– La în ceput un element HTML cuprinde ( în conjoară ) datele documentului. Acest element conține doua sub-elemente principale: HEAD și BODY. în HEAD se poate adauga titlul paginii web și alte elemente numite metatag-uri, precum și scripturi JavaScript și stil-uri CSS. în BODY se adauga conținutul documentului care va fi afișat în pagina web.
Exemplu:

<html>
<head>
<title>Denumirea pagini </title>
</head>
<body>
Ce sa contina pagina
</body>
</html>

Structura generala HTML

<HTML>
<HEAD> Acesta are și el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, și se în cheie cu </TITLE>
<BASE> Poate fi folosit pentru a în registra locația documentului în forma URL. (Necesar Dacă documentul nu este accesat în locația lui originala). Se în cheie cu </BASE>
  <LINK> Indica o relație dintre document și alte obiecte de pe WEB. Se în cheie cu </LINK>
  <META> Aici sunt scrise informații cum ar fi tastatura (limbaj) folosită, descrierea și cuvinte cheie care pot fi găsite de motoarele de căutare. Se în cheie cu </META>
  <SCRIPT> Conține oricare din JavaScript sau VB Script. Se în cheie cu </SCRIPT>
  <STYLE> Conține informații privind stilul, grafica informațiilor care vor apărea pe pagina. Se în cheie cu </STYLE>
Aici se în cheie elementele adaugate în HEAD
  </HEAD>
  <BODY> Etichetele HTML și conținutul documentului care va fi afișat în pagina web sunt incluse în acest element. Aici pot fi puse și elemente cum ar fi: <SCRIPT> </SCRIPT>
Se în cheie cu
  </BODY>
  </HTML>

1.2 Crearea și editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar fară a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, și cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din codurile invizibile ale limbajului HTML, astfel se creaza documente rapid și ușor, în plus ocupa foarte putin spațiu și resurse de memorie, acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad, care este folosit și pentru acest curs, dar poate fi utilizat orice editor de text. Pentru în cepatori și pentru usurinta cu care se lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++, dar cei avansați pot folosi și altele cum ar fi Dreamweaver.

Baza de în ceput a unui HTML

Sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.
Pentru în ceput deschideti aplicatia NotePad și scrieti structura de baza a unei pagini web. Aceasta este:

<html>
<head>
<title> Titlul dorit </title>
</head>
<body>
Conținut dorit
</body>
</html>

Acum pagina are HEAD și BODY în interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un text reprezentativ ca titlu al documentului dv.; și în BODY un text "Conținut".
Ceea ce scrieti la TITLE va apare în linia cea mai de sus a browseru-lui (deasupra meniurilor). La TITLE puteți pune orice text, dar este bine sa scrieti ceva care sa descrie cat mai bine obiectul și conținutul paginii deoarece este ceea ce cauta și indexeaza multe portaluri de cautare de pe internet, și indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugați intre tag-urile <body> </body> reprezinta conținutul paginii, care va fi afișat în browser.
Mai jos gasiți un exemplu cum ar putea fi completat tag-ul TITLE și un mic conținut în pagina:

<html>
<head>
<title>Licenta 2014-Ilie Alexandru daniel </title>
</head>
<body>
<h1>Pagina HTML</h1>
exemple și explicatii.
</body>
</html>

– <h1> </h1> este o etichetă HTML pentru afisare de text mare (ca un titlu) în pagina.
– Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad și apoi salvati fișierul cu extensia .html. Dacă nu stiti deja, pt. a-l salva alegeti la "Save as type" – All Files, apoi la "File name" ii scrieti numele și extensia (ex.: "pagina.html"). Dupa ce a fost salvat fișierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

Setarea proprietaților documentului

– Proprietațile documentului pot fi controlate de atributele elementului BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru text și diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu, verde și albastru; expresia folosită RGB (Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale și sunt scrise intre ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) și Albastru mai putin (11).

Elementul BODY

– Acestui element ii puteți adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii, textul și culoarea link-urilor.

– Dacă elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard, de obicei fondul este alb.

– Pentru a seta culoare fondului paginii adaugați în etichetă <BODY> atributul BGCOLOR.

– Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:

Culoarea textului

– Atributul TEXT controleaza culoarea textului normal din document.

– Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi link-ul.

– Culoarea standard pentru text este Negru.

– Iata un exemplu în care culoarea fondului va fi albastru și culoarea textului va fi rosu, atributul TEXT va fi adaugat astfel:

Link-uri (LINK, VLINK și ALINK)

– Aceste atribute controleaza culoarea link-ului în diferite stari
1. LINK – culoarea initiala a link-ului. Standard este albastru
2. VLINK – culoarea unui link vizitat. Standard este purpuriu.
3. ALINK – culoarea link-ului în momentul activarii. Standard este rosu.

– Modul de setare al acestor atribute este urmatorul:

Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avoarea textului va fi rosu, atributul TEXT va fi adaugat astfel:

Link-uri (LINK, VLINK și ALINK)

– Aceste atribute controleaza culoarea link-ului în diferite stari
1. LINK – culoarea initiala a link-ului. Standard este albastru
2. VLINK – culoarea unui link vizitat. Standard este purpuriu.
3. ALINK – culoarea link-ului în momentul activarii. Standard este rosu.

– Modul de setare al acestor atribute este urmatorul:

Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor în momentul activarii va fi galben.

Folosirea unei imagini ca fond pentru pagina (background)

– Elementul body ofera posibilitatea în locuiri fondului paginii cu o imagine (Background image). Dacă imaginea este mai mica decât dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi în treg cadru documentului. Este indicat ca imaginea sa fie în format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului.

– Un exemplu de cod HTML cu imagine pentru background este urmatorul:

In acest exemplu fondul pagini va fi dat de imaginea fișierului "imagine.gif" și de asemenea am setat BGCOLOR astfel incat în timpul procesului de în carcare a imaginii culoarea fondului va fi alba.

Dupa ce a-ti creat baza de în ceput a unui document și a-ti setat proprietațile, trebuie sa salvati fișierul. Salvarea trebuie facuta intr-un format pe care browser-ul îl poate recunoaste. Extensia standard pentru un fișier care reprezinta o pagina web este ".htm" sau ".html". De obicei folosesc (".html").
– Pentru a salva documentul ca sa arate ca o pagina web, în NotePad alegeti din meniul File comanda Save și salvati fișierul cu orice nume doriti dar cu extensia html (sau "htm") – (La File name: scrieti și numele și extensia ".html", exemplu: index.html). Dacă nu scrieti extensia, NotePad va salva documentul în format "txt".
– Pentru a vedea documentul ca o pagina web, duceti-va în directorul în care a-ti salvat fișierul și deschideti-l pur și simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau deschide-ti browser-ul și din comanda Open deschideti documentul pe care l-ati salvat.
– Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva în documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti aplicatia NotePad și din meniul File alegeti Open apoi gasiți fișierul pe care vreti sa-l modificati și dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel Dacă redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.

1.3 Titluri, Paragrafe, Rând nou, Linie orizontală

Titluri

– Pentru titluri din conținutul documentului HTML este indicat folosirea etichetelor <Hx>, (headings) unde 'x' este un numar intre 1 și 6.

– în cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai buna impartire a conținutului paginii.

– Mărimea textului în conjurat de elementul Heading variază de la foarte mare, în <H1> pana la foarte mic în <H6>.

Exemplu Cod HTML:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Primu 1</h1>
<h2>Al doilea 2</h2>
<h3>Al treiela 3</h3>
<h4>Al patrulea 4</h4>
<h5>Al cincilea 5</h5>
<h6>Al saselea 6</h6>
</body>
</html>

Cum apare în pagină:

Primu 1
Al doilea 2
Al treilea 3
Al patrulea 4
Al cincilea 5
Al saselea 6

Paragraf

– Paragrafele permit sa adaugi text în document astfel incat lungimea de afisare a textului va fi ajustata de mărimea deschiderii browser-ului și fiecare paragraf va în cepe un nou rând.

– Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afișeaza cu un rând gol intre ele

Exemplu Cod HTML:

<html>
<head>
<title>Titlu </title>
</head>
<body>
<p>Universitate </p>
<p>Student </p>
<p>Profesor</p>
<p>Angajat </p>
</body>
</html>

Cum apare în pagină:

Universitate

[anonimizat]

Rând nou

– Tag-ul <br> permite sa decizi unde textul va în cepe un nou rând, astfel se forteaza în ceperea unui nou rând.

– <br> este un Element Gol dar poate sa conțin atribut. <br> nu are și nu cere element de în chidere, nu se foloseste </br>

Exemplu Cod HTML:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Titlu 1</h1>
<p>Conținut 1<br>
Linie 2<br>
Linie 3<br>
<p>Conținut 2</p>
</body>
</html>

Cum apare în pagină:

Titlu 1

Conținut 1
Linie 2
Linie 3

Conținut 2

– Elementul <br> folosește un singur atribut – CLEAR care poate avea valoarea LEFT, RIGHT sau ALL, și sunt folosite Dacă este o imagine pe pagina. Atributul CLEAR forțează o linie în jos. Dacă o imagine este așezata în partea stanga a paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea stanga.

Linie orizontala

– “<hr>“ Acest element afișeaza o linie orizontala în document

– Acest element nu foloseste element de în chidere [</hr>]

– Elementul <hr> foloseste urmatoarele atribute:

– SIZE = Lațimea liniei, în pixeli (standard este 2)

– WIDTH = lungii liniei, în pixeli sau procente din lungimea afisarii paginii (standard 100%)

– NOSHADE = afișeaza linia fară a avea un aspect 3D

– ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)

– COLOR = seteaza culoarea liniei

Exemplu Cod HTML:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Titlu 1</h1>
<p>conținut 1<br>
Linie 2<br>
Linie 3<br>
<hr>
<hr color="#blue" size="4" width="50%">
<p>conținut 2</p>
</body>
</html>

Cum apare în pagină:

Titlu 1

Conținut 1
Linie 2
Linie 3

Conținut 2

1.4 Formatarea textului

HTML conține mai multe elemente, tag-uri și atribute, pentru Afișarea textului în mai multe formate cu aspecte grafice diferite.

Tag-ul <FONT> </FONT>

Cu acest element, <FONT>, puteți modifica aspectul textului, cum sunt tipul fontului folosit, mărimea și culoarea textului.

– Mărimea textului poate fi modificata cu elementul FONT și atributul SIZE. Atributul SIZE poate lua valorile numerice de la 1 la 7 și pe langa acestea poate folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (Dacă nu este specificat acest atribut) are valoarea 3.

Exemplu :

<font size="+3">Trei mărimi mai mare</font>

– Tipul fontului poate fi modificat cu elementul FONT și atributul FACE.

Exemplu :

<font face="Arial Black">Acesta este tipul de font Arial Black</font>

– Culoarea textului poate fi modificata cu elementul FONT și atributul COLOR.

Exemplu :

<font color="red">Acest text are culoarea verde</font>

Bold, Italic, Underline și alte elemente

Elemente des folosite pentru formatul textului sunt:

– Bold (ingrosat) <b> … </b>

– Italic (inclinat) <i> … </i>

– Underline (subliniat) <u> … </u>

Exemplu:

<b> Bold </b>
<i> Italic </i>
<u> Underline </u>

Alte elemente folosite pentru formatul textului sunt:

– <pre> Performated </pre> – Textul incadrat de elementul PRE este prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi și liniile necesare sunt prezentate așa cum sunt scrise în NotePad, ne mai fiind nevoie de alte elemente adiționale, cum ar fi <br> pentru o noua linie și     pentru mai mult spațiu intre cuvinte.

– <em> Accentuare (Emphasis) </em> – Browser-ul de obicei arata aces element ca italic

– <strong> Strong </strong> – Browser-ul de obicei arata aces element ca bold

– <tt> Teletype </tt> – Ca și PRE, browser-ul prezinta acesta intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, în interiorul elementului FONT

– <cite> Citatie </cite> – Reprezinta o citatie din document.

Exemplu:

<html>
<head>
<title>titlu </title>
</head>
<body>
<p><font size="+2">Doua mariri</font>- normal –
<font size="-2">Doua micsorarie</font><br>
<b>Bold</b>- <i> Italic </i> – <u> Subliniat </u> –
<font color="green "> Verde </font><br>
<em>Accentuat </em> – <strong> strong </strong> –
<tt>Tipul</tt><br>
<cite> Citatie </cite></p>
</body>
</html>

– în browser va fi afișat asa:

Doua mariri- normal – Doua micsorari
Bold- Italic – Subliniat – Colorat
Accentuat – strong – Tipul
Citatie

Alinierea

Câteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> , Paragraful <p>…</p> și Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt: LEFT, RIGHT și CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:

– <div align="valoare"> … </div> Poate conține cele mai multe elemente. Tot ce este poziționat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent Dacă în acel loc se afla și alt ceva (Imagine, Text, …).

– <center> … </center> Va centra elementele

Alte etichete HTML pentru formatul textului

– <strike> Text taiat </strike>

– <big> Prezinta textul intr-un font mare </big>

– <small> Prezinta textul intr-un font mic </small>

– <sub> Afisaza textul în pozitia subscript </sub>

– <sup> Aseaza textul în pozitia superscript </sup>

Exemplu:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul în pozitia subscript </sub> normal
<sup> Aseaza textul în pozitia superscript </sup><br>
</p>
</body>
</html>

– în browser va fi afișat asa:

Text taiat
Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul în pozitia subscript normal Aseaza textul în pozitia superscript

– Urmatoarele elemente pentru format sunt folosite mai rar și sunt pentru documente cu aplicatii tehnice

– <dfn> Defineste exemplu de termen inchis </dfn>

– <code> Folosit pentru extragerea unui cod de program </code>

– <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>

– <kbd> Folosit pentru text care va fi scris de utilizator </kbd>

– <var> Folosit pentru variabile sau argumente de comenzi </var>

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>

– în browser va fi afișat asa:

Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi

– Alte elemente pentru formatul textului:

– <q> … </q> – Folosit pentru citate scurte.

– <blockquote> … </blockquote> – Folosit pentru incadrarea de citate mai lungi, creaza spațiu pentru text. Pentru a crea mai mult spațiu puteți adauga de mai multe ori acest element.

– <address> … </address> – Cu acest element se specifica informatii cum ar fi autorul documentului și detalii pentru contact.

Exemplu:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<q>Dacă vrei și crezi, orice este posibil.</q>
<blockquote>Txt Txt Txt Txt Txt Txt Txt Txt Txt Txt Txt. <br>

txt2 txt2 txt2 txt2 txt2 txt2 txt2.
</blockquote>
<center>
<address>str.Timisoara.130 Romania 2</address>
</center>
</p>
</body>
</html>

– în browser va fi afișat asa:

Txt Txt Txt Txt Txt Txt Txt Txt Txt Txt Txt.
txt2 txt2 txt2 txt2 txt2 txt2 txt2.

Str.Timisoara.130
Romania
2

1.5 Adaugare Imagini

HTML conține și elemente pentru adaugarea de imagini în pagina web.

Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF și JPEG (JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes), avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:

PNG, BMP, TIFF, PCX

Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se folosește elementul <img> … </img> împreuna cu urmatoarele atribute :

– src – Valoarea acestui atribut determina locatia fișierului care conține imaginea.

– alt – La acest atribut se scrie textul care va aparea Dacă imaginea nu e afișata (de unele browsere) sau cand utilizatorul va poziționa, în browser, mouse-ul peste imagine.

– align – Acest atribut permite asezarea imagini în locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni:

Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom

– width – Valoarea acestui atribut reprezinta lungimea imaginii, în pixeli. Dacă nu este scris imaginea va fi prezentata cu lungimea originala.

– height – Valoarea acestui atribut reprezinta înalțimea (Lațimea) imaginii, în pixeli. Dacă nu este scris imaginea va fi prezentata cu înalțimea originala.

– border – Prin adaugarea acestui atribut imaginea va aparea în conjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, în pixeli.

– hspace – Acest atribut este pentru spațiu orizontal pe ambele parti ale imaginii, specificat în pixeli. De exemplu o valoare de 5 va pune un spațiu invizibil, de 5 pixel, în pârtile orizontale ale imaginii.

– vspace – Acest atribut este pentru spațiu vertical pe ambele parti ale imaginii, specificat în pixeli. De exemplu o valoare de 5 va pune un spațiu invizibil, de 5 pixel, în pârtile verticale ale imaginii.

Exemplu introducerea unei imagini pe o pagina web și cum pot fi folosite atributele :

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="imagine.jpg" alt="puteți adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>

– în pagina web va aparea:

1.6 Link-uri

Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante în crearea de pagini web.
Forma generala pentru crearea unui link este urmatoarea:

– a este elementul specific pentru crearea link-urilor
– href este atributul care marcheaza indicarea adresei link-ului
– url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net)
– title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este poziționat mouse-ul deasupra link-ului)
– Titlu link este textul ascuns care apare cand este poziționat mouse-ul deasupra link-ului
– Nume este textul care va aparea în browser și pe care trebuie dat click cu mouse-ul. în loc de acest text se poate folosi și o imagine, astfel "Nume" va fi inlocuit cu <img src="nume_imagine.extensie">

Culoarea link-urilor poate fi schimbata de următoarele atribute, care trebuie scrise în interiorul elementului <BODY>

link="#0000ff – reprezinta culoarea link-ului în browser.

vlink="#00ffff – reprezinta culoarea link-ului când pagina respectiva a fost / este vizitata.

alink="#ff0000 – reprezinta culoarea link-ului când acesta este activat.

Exemplu:

Link-urile sunt de doua feluri:

1. Link-uri externe – (sunt cele mai utilizate), care sunt și ele de doua feluri:
a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa și domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale în directoare, numele și extensia documentului la care se face saltul.
De exemplu:

– Dacă documentul tinta se afla în acelasi director cu fișierul în care se scrie link-ul, codul va fi scris asa:

– Dacă documentul tinta se afla intr-un director anterior celui în care se afla fișierul în care se scrie link-ul, codul va fi scris asa:

– Dacă documentul tinta se afla intr-un director din cel care se afla fișierul în care se scrie link-ul, codul va fi scris asa:

b) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa contina și domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:

2. Link-uri interne – sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc când pagina respectiva este lunga și e nevoie sa se sara spre anumite texte din pagina.
– Pentru creare de link-uri interne trebuie urmati urmatorii pasi:

1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul și se afla în aceeasi pagina cu linkul

<a name="cuvant">Textul tinta</a>

– atributul "name" indica tinta pentru link, e un fel de semn care indica locatia.

– "cuvant" poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.

– "Textul tinta" este textul unde se face saltul.

2. în locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales), se scrie urmatorul cod:

– aici "cuvant" este acelasi text scris la pasul 1.

Link-urile interne și externe pot fi combinate. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. în pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar în pagina în care va fi link-ul se scrie:

1.7 DIV și SPAN

Tag-urile <div></div> și <span></span> nu au efecte importante Dacă sunt folosite singure.

– Tag-ul DIV creaza sectiuni de blocuri în pagina, al caror forma și grafica de conținut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru), justify (distanta textului fata de margini egala).

– Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context, putand fi folosit și ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu și nu foloseste nici un atribut HTML special.

Chiar Dacă folosite singure, DIV și SPAN nu au nici un efect major, în combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietați CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

Tag-ul DIV

Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece în combinatie cu proprietați CSS poate crea efecte grafice deosebite, iar în interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul în care acestea sunt adaugate poate avea propriul fundal (background), lungime, înalțime și margini cu diferite linii.
Iata un exemplu în care avem 2 div-uri, unul conține un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite și margini diferite.

<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>

– în atributul "style" sunt specificate proprietațile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime în pixeli, fundal și bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

Top of Form

Nume:
E-mail:

Bottom of Form

Alt DIV

Linie 1

Linie 2

Linie 3

Putem poziționa conținutul din interiorul tag-ului <div> </div> oriunde în pagina, folosind proprietați CSS precum:

position – care poate lua valorile: static, relative, fixed sau absolute

margin – care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV și elementele din jurul lui

Tag-ul SPAN

Cu tag-ul <span></span> puteți adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru aceasta trebuie folosit impreuna cu proprietați CSS care pot fi adaugate printr-un atribut "style" în interiorul etichetei "<span>" (sau în foi de stil).
Exemplu în care se scoate în evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietațile dorite, ca în exemplul urmator.

Aceasta este o lectie <span style="background:#88fe88; font-weight:bold;"> Despre HTML</span> și CSS

– Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietațile grafice dorite și care nu afecteaza restul conținutului.
– Astfel, prin proprietațile adaugate în "style" (background:#88fe88; și font-weight:bold;), în pagina web va fi afișat textul în felul urmator:

Aceasta este o lectie Despre HTML și CSS

Tag-ul SPAN poate fi folosit și ca o classa pentru CSS. Astfel, proprietațile adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate în tag-uri "<span></span>".
Exemplu:

<html>
<head>
<title>Titlul</title>
<style type="text/css">
    span {
      border:2px solid red;
      padding:1px;
      color:#1111fe;
    }
</style>
</head>
<body>
<h4>Exemplu de <span>text cu etichetă SPAN</span> în interiorul frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, în span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, în span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>

– elementul "span" în tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din document și le transmite aceleași proprietați.
– Acest cod va afisa intr-o pagina web urmatorul rezultat:

Exemplu de text cu etichetă SPAN în interiorul frazei.

Linia 1

Linie 2, în span

Linia 3

Linie 4, în span

Linia 5

Diferenta dintre DIV și SPAN

– Diferenta dintre DIV și SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Exemplu: atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV și unui tag SPAN.'

<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
– Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</span>

– în pagina web va apare

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

– Acum cu SPAN:

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

– Diferenta, modul în care este afișata bordura. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afișata pe fiecare linie.
– De aceea este indicata folosirea tag-ului "<span></span>" pentru conținut din interiorul unei linii

Capitolul 2

Introducere în CSS

Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML și crearea unor imagini ducand la realizarea de pagini web de o complexitate medie. Odata cu dezvoltarea internetului, site-urile au devenit din ce în ce mai complexe, cu un numar mai mare de pagini, cerintele privind grafica și elementele din pagina au devenit mai pretentioase și astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila.

O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem anumite schimbari în elementele pagini: fondul, grafica sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), în traducere "foi de stil în cascada", acest lucru nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor elemente în codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din pagina.

CSS se ocupa în general cu aspectul și controlul grafic al elementelor din pagina, cum ar fi: textul, imaginile, fondul, culorile și asezarea acestora în cadrul ferestrei paginii.
CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document.
CSS funcționeaza cu HTML, insa nu este HTML. El extinde funcționalitatile HTML, permitand redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui intreg site web.
Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afișate ca și cum CSS n-ar exista, dar cele mai cunoscute și utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, și altele, sunt compatibile CSS.

2.1 Scrierea codului CSS

Codurile CSS pot fi scrise în interiorul paginii sau intr-un fișier extern cu extensia".css".
Codul CSS, ca forma generala, este alcătuit din: obiectul care va fi formatat. proprietațile acestuia și valoarea (sau atributele) fiecarei proprietați.
Cand este adaugat în documentul HTML, trebuie scris în cadrul unui tag <style> în sectiunea HEAD a documentului HTML, dupa cum se vede în formula generala de mai jos;

<html>
<head>
<title>Titlul</title>

</head>
<body>
… Conținut …
</body>
</html>

– Sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele obiectului CSS pe care-l definesc, intre "proprietate" și "valoare" trebuie sa fie un caracter doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;)
– Cand este adaugat intr-un fișier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga tag-ul <style>.

Obiectele (regulile) CSS

Exista trei tipuri principale de obiecte CSS: selector, clasa și identificator.

– Selectorul HTML

Selectorul HTML se foloseste pentru a redefini modul de afisare a conținutului etichetei HTML.
Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de etichetă.
Exemplu:

h1 { font-family:"Arial"; font-size:15px; }

– Aici selectorul este "h1".
Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML. Selectorul și etichetă desi par identice, totusi nu sunt.

– Clasa

Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
O clasa trebuie creata în interiorul etichetei HTML inainte de a fi definită intr-un cod CSS. Crearea clasei în interiorul etichetei se face simplu, prin specificarea cuvantului class și numele clasei

Exemplu:

– "nume_clasa", poate fi orice nume dorim.
– Apoi în interiorul codului CSS, clasa trebuie definită prin adaugarea unui caracter punct (.) inaintea numelui clasei, ca în exemplu urmator:

.nume_clasa { font-family:"Arial"; font-size:15px; }

Numele aceleași clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, și toate vor prelua acelasi stil css.

– Identificator

Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta etichetă se adauga un ID cu nume diferit.
Ca și clasa, identificatoru trebuie intai creat în interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvantului id și numele clasei.

Exemplu:

– "nume_id", poate fi orice nume dorim.
In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#) inaintea numelui, ca în exemplu urmator:

#nume_id { font-family:"Arial"; font-size:15px; }

Componentele unui obiect CSS

Obiectele CSS, indiferent de tipul lor, au în componenta urmatoarele elemente:

Selectorii – identifica un obiect; pot fi selectori de etichete HTML, clase sau identificatori.

Proprietațile – identifica o proprietate a obiectului; se refera în special la aspect.

Valorile – sunt atributele unei proprietați; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzand de proprietate.

Sintaxa generala a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }

Proprietațile și valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub forma de perechi,despartite de caracterul doua puncte ”:”, fiecare pereche se termina cu un caracter punct și virgula ";". Etichetele HTML nu sunt sensibile la diferenta intre majuscule și litere mici. Dar odata cu aparitia limbajului XHTML, acesta face distinctie intre majuscule și minuscule, astfel ca toate etichetele și toti selectorii trebuie scrisi cu litere mici.

2.2 Crearea Foilor de Stil

Etichete HTML și stiluri CSS

CSS ofera posibilitatea de a schimba aspectul fiecarei etichete în parte, prin stabilirea unui anume stil în interiorul ei, cu atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective.
Sintaxa pentru definirea stilurilor în interiorul unei etichete HTML este urmatoarea:

<etichetă style="proprietate:valoare;"> text … </etichetă>

CSS permite și definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris în sectiunea de antet (head) a documentului, în cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, în interiorul etichetei <head> </head>, este urmatoarea:

– Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.
Exemplu de cod css practic:

Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci și la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fișier separat, de preferat cu extensia ".css", care poate fi inclus în pagina HTML prin doua procedee: legatura sau import.
Crearea unei foaie de stil externe se face scriind codul CSS intr-un fișier text cu ajutorul unui editor de texte simplu (de exemplu Notepad în Windows), sau specializat în acest sens (precum Notepad++). în fișierul extern creat se adauga reguli CSS, fară insa ca aceste reguli sa fie incadrate în etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosită de un document HTML utilizand urmatoarea Sintaxa, în interiorul tag-ului <head> </head>:

– Etichetă LINK apare în antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura ("rel" – legatura cu o foaie de stil, "type" – tipul codului din fișier) și locatia inspre fișierul ce conține codul CSS ("href" – calea și numele complet al fișierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:

Pentru a importa un fișier CSS extern se foloseste în cadrul sectiunii HEAD a documentului HTML etichetă STYLE. în cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fișier.css" reprezinta calea și numele fișierului ce conține regulile CSS definite.
Alaturi de instructiunea "@import", în cadrul etichetei STYLE, pot fi adaugate definiti și selectori suplimentari.
Legatura la un fișier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca și cum stilurile incluse ar fi fost definire direct în etichetă STYLE din sectiunea HEAD a documentului HTML.

Definirea selectorilor

– Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu etichetă HTML la care se refera, avand urmatoarea forma generala:

selector_HTML { proprietate1:valoare1; proprietate2:valoare2; … }

Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietațile prestabilite existente nu sunt anulate, ci se adauga altele noi.

Utilizarea selectorilor de tip clasa ofera posibilitatea Configurării unor stiluri care se pot aplica doar acelor elemente care sunt etichetăte cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este:

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; … }

Exista cazul în care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosită doar cu etichetă HTML respectiva. Pentru a defini o clasa care sa afecteze în mod direct un anume selector HTML, se foloseste urmatoarea Sintaxa:

selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; … }

Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de cuvantele rezervate JavaScript.

– Asemanator cu selectorii de clasa se definesc și identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:

#identificator { proprietate1:valoare1; proprietate2:valoare2; … }

Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singură data în cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat și cu ajutorul Funcțiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.

Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietați prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri în care se doreste crearea unor etichete personalizate, pornind de la zero. în acest caz se folosesc etichetele <span> și <div>.
Etichetă <span> nu are proprietați mostenite. Ea reprezinta doar o locatie vida care creaza o etichetă în linie.
Pentru a configura o etichetă în linie trebuie definită o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, în care selectori sunt precedati de etichetă <span> :

…
<span class="nume_clasa"> … </span>
…
<span id="span1"> … </span>
…
<span class="clasa_span"> … </span>
…

Exemplu în interiorul unei foi de stil:

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; … }
#span1 { proprietate1:valoare1; proprietate2:valoare2; … }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; … }

In momentul în care se doreste configurarea unui bloc separat de restul conținutului unui document HTML, solutia este etichetă <div>. Aceasta creaza o zona proprie în pagina, cu linie noua atat deasupra sa cat și dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca și în cazul etichetelor în linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>.
Exemplu de aplicare a unei etichete <div> intr-o pagina HTML :

…
<div class="nume_clasa"> … </div>
…
<div id="div1"> … </div>
…

Definirea acestor etichete <div> intr-un cod CSS se face astfel:

div { proprietate1:valoare1; proprietate2:valoare2; … }
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; … }
#div1 { proprietate1:valoare1; proprietate2:valoare2; … }

Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca și celelalte tipuri de selectoare, în sectiunea "head" a documentului în interiorul etichetei "style", sau intr-un fișier extern carev ulterior este legat sau importat în documentul HTML.

Definirea de reguli similare

Dacă mai multi selectori folosesc aceleași definitii css, acestia pot avea aceeasi lista de elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea:

selector1, selector2, … { proprietate1:valoare1; proprietate2:valoare2; … }

Impreuna cu selectorii pot fi de asemenea definiti identificatorii și clasele. Dezavantajul ar fi ca în momentul în care este modificata o valoare a unei proprietați incluse în definiție, valoarea respectiva se va modifica în toate etichetele reprezentate de acesti selectori.

Definirea etichetelor în context (imbricate)

Cand o etichetă este inconjurata de alte etichete (aflandu-se astfel una în interiorul alteia), spunem ca aceste etichete sunt imbricate. Etichetă exterioara se numeste, în acest caz, etichetă parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil, Sintaxa generala a unei astfel de reguli fiind:

selector1 selector2 … { proprietate1:valoare1; proprietate2:valoare2; … }

– Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse în regula și în plus le mosteneste și pe cele ale parintilor.
Ca și selectorii singuri, selectorii imbricati pot include în lista clase, identificatori sau selectori HTML.
Toate etichetele HTML, cu excepția etichetei BODY, au cel putin o etichetă parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri în care proprietațile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor.
Prin redefinirea unui selector, etichetă nu-si pierde proprietațile prestabilite, doar în cazul în care acestea sunt modificate. Astfel proprietațile mostenite pot fi anulate prin redefinirea acestora în lista de definitii a etichetei imbricate.

Cresterea prioritatii unei definitii

Valoarea !important adaugata unei definitii atribuie maximum de prioritate în determinarea ordinii unei executii.
Valoarea !important trebuie plasata inaintea caracterului ’;’, ca în exempul urmator:

selector { proprietate1:valoare1; proprietate2:valoare2 !important; … }

Determinarea ordinii executiei

Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii în care unei etichete sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultam, pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita și cascada), acestea sunt:

1. Regulile CSS scrise în interiorul paginii HTML, în cadrul etichetei "style" din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fișier extern, iar regulile scrise în interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei "style" din sectiunea "head".
2. Existenta atributului !important – confera prioritate maxima la afisare definiției în care este utilizat.
3. Sursa regulilor – exista numeroase navigatoare care permit utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului Dacă acestea din urma nu au valoarea "!important".
4. Specificitate – cu cat o regula dispune de mai multi selectori HTML, de clasa și de identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1.
5. Momentul aparitiei – cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare și anuleaza toate stilurile precedente cu care intra în conflict.

Adaugarea comentariilor la CSS

Este bine ca uneori sa fie adaugate comentarii în codul CSS, mai ales în cazul fișierelor externe. Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai tarziu, rolu anumitor elemente din codul CSS.
Comentariile nu au nici un efect și pot fi plasate în jurul regulilor, fiind utile și în cazul navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii în regulile de stil avem la dispoziție doua modalitati:

In cazul în care comentariul se intinde pe un singur rand este suficienta folosirea perechii de caractere ’//’ urmata de comentariu.

In cazul în care comentariul conține mai multe linie, trebuie plasat intre ’/*’ care deschide zona de comentariu și ’*/’ care indica sfarsitul comentariului.

In cazul folosirii comentariilor cu ’//’ se pot adauga oricate slash-uri, minimul fiind de doua.
Exemplu în care puteți vedea cum pot fi adaugate comentariile:

/* Comentariu,
pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; … }

// Comentariu pe o singură linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; … }

2.3 Configurarea fonturilor

Alegerea potrivita a fonturilor și folosirea acestora în cadrul paginilor web este importanta, poate atrage critici și comentarii din partea vizitatorilor, mai ales Dacă formatarea clasica prin scris normal, aldin sau cursiv nu este folosită corespunzator. CSS include facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele ingrosat și inclinat, dimensiunea literelor precum și spațiul dintre linii.
Exista cinci familii de fonturi de baza:

serif – au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala. Sunt folosite pentru tiparire, chiar Dacă textele sunt mai mari sau mai mici. Nu sunt indicate pentru Afișarea textelor pe ecran.

sans serif – sunt fonturi care nu folosesc serife, fiind indicate pentru conținut text general.

monospace – fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca fiecare litera ocupa aceeasi cantitate de spațiu. Sunt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program.

cursive – imita scrisul de mana, intr-o maniera stilizata. Sunt indicate în scopuri decorative, nefiind recomandate pentru scrierea unor texte mai lungi.

fantasy – nu se incadreaza în nici una dintre categoriile de mai sus, fiind fonturi care au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).

Stabilirea fontului

Fontul folosit pentru Afișarea unui text poate fi stabilit prin proprietatea "font".
Pentru definirea fontului în cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble, mai ales Dacă numele acestora conține spatii.
Forma generala fiind urmatoarea:

selector { font-family:"nume_font1", "nume_font2", …, nume_generic }

– Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa recomandata.
Iata un exemplu practic:

h1 { font-family:"Arial", "Helvetica", sans-serif }

Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din lista, Dacă nu este gasit parcurge lista pana în momentul în care intalneste un font instalat. Dacă nu exista fonturi echivalente, textul va fi afișat cu fontul prestabilit de browser. Dacă este specificat un nume generic, textul va fi afișat cu un font apartinand aceluiasi stil, în cazul în care fonturile specificate în lista nu sunt disponibile.
Exista posibilitatea folosirii unei palete largi de fonturi în crearea paginilor web, nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta în inglobarea fontului în cadrul paginii și trimiterea lui în mod automat în calculatorul vizitatorului, adica, descarcarea și folosirea lui automata.
Pentru a ingloba un font intr-o pagina și a-l descarca, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului și apoi trebuie indicata locatia pe server de unde poate fi descarcat fontul respectiv.
Codul CSS este urmatorul:

@font-face { font-family:nume_font src: url(locatie_font); }

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet Explorer foloseste fonturi în format "eof" (obținute cu ajutorul unui program numit WEFT), iar Mozilla foloseste un format "otf".

Stabilirea dimensiunii fontului

Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate în diferite unitati de masura: pixeli, centimetri), procentuale, sau chiar relative.
Pentru a defini dimensiunea fontului în cadrul unei reguli trebuie specificata proprietatea font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de valori:

– unitate de masura – exprimata în pixeli, puncte, inci sau centimetri

– expresie absoluta – xx-small, x-small, small, medium, large, x-large și xx-large

– expresiile smaller sau larger, ca raport cu elementul parinte

– procent – un numar exprimat în procente (cu %), care indica mărimea textului în raport cu dimensiunea elementului parinte

Forma generala a codului CSS pentru stabilirea dimensiunii fontului:

selector { font-size:valoare }

Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca unitati de masura punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru Afișarea pe ecran, constituie o masura mai sigura decat dimensiunea în puncte.
Exemplu practic exprimat în pixeli:

h1 { font-size:15px; }

Text inclinat

Atributul "font-style" permite scrierea textelor inclinate în doua moduri: "cursiv" și "oblic". Noțiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta.
Pentru a crea caractere cursive în cadrul unei reguli trebuie precizata proprietatea font-style, astfel:

selector { font-style:valoare }

Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique
Iata un exemplu:

h1 { font-style:italic; }

Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita.

Grosimea fontului

Ingrosarea este una dintre metodele utilizate des pentru scoaterea în evidenta a unui text. CSS confera mai multa flexibilitate în utilizarea textului ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori proprietații font-weight, dupa cum urmeaza:

bold – scrie fontul folosind caractere ingrosate

bolder – mareste grosimea fontului relativ la grosimea curenta

lighter – micsoreaza grosimea fontului fata de grosimea curenta

– o valoare cuprinsa intre 100 și 900 (multiplu de 100) – reprezinta valoarea ingrosarii, bazata pe versiunile alternative disponibile ale fontului

normal – elimina formatarea cu caractere aldine (ingrosate)

In cazul folosiri valorii cuprinse intre 100 și 900, 400 reprezinta valoarea corespunzatoare textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu dispun de noua ponderi, astfel ca Dacă este specificata o valoare care nu este disponibila, va fi folosită o alta pondere.
Forma generala pentru stabilirea grosimii fontului este urmatoarea:

selector { font-weight:valoare }

Exemplu practic:

h1 { font- weight:bold; }

Majuscule mici

Majusculele mici sunt folosite de obicei în cadrul titlurilor, ele fiind obținute prin convertirea literelor mici în majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se obțin cuvinte în care toate literele sunt scrise cu majuscule insa prima litera este mai înalta decat celelalte.
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietații font-variant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori mostenite ale proprietațiifont-variant.
Forma generala este urmatoarea:

selector { font-variant:valoare }

Formatarea unui text dintr-o etichetă "h1" cu valoarea "small-caps":

h1 { font-variant:small-caps; }

Valori multiple pentru font

Deseori este util sa fie precizate toate elementele fontului intr-o singură definiție.
Pentru a se realiza acest lucru este folosită proprietatea "font" urmata de valorile pentru celelalte proprietați, separate prin spațiu.
Sintaxa generala este urmatoarea:

selector { font:val_font-family val_font-style val_font-variant val_font-weight val_font-size val_height }

Dacă o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.
Exemplu practic de folosire a mai multor valori în aceeasi definiție:

h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

2.4 Configurări pentru culori și fundal

Dacă HTML permitea configurarea unor culori și elemente grafice de fundal doar pentru anumite elemente, CSS permite definirea culorii și a fundalului pentru orice element din pagina web.

Configurarea fundalului

Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular.

a) Culoarea fundalului

Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata în cod hexa.
Sintaxa generala este:

selector {background-color:valoare }

Dacă se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Exemplu în care culoarea de fundal a paginii este schimbata în albastru:

body { background-color:#0000ff; }

b) Imaginea de fundal

Puteți utiliza pentru fundal și o imagine, pentru aceasta se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii.
Sintaxa generala este:

selector { background-image:url('adresa_URL'); }

Unde "adresa_URL" este calea și numele imaginii care va fi folosită
Dacă în locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine.
Exemplu în care pentru fundalul paginii este folosită o imagine:

body { background-image:url('cale/imagine.gif'); }

c) Repetarea imaginii de fundal

Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera și un mod de repetare a acestuia.
Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni:

repeat – pentru a repeta imaginea pe toata suprafata elementului respectiv;

repeat-x – pentru a repeta imaginea numai pe orizontala;

repeat-y – pentru a repeta imaginea numai pe verticala;

no-repeat – pentru a afisa imaginea o singură data, fară repetare.

Forma generala este:

selector { background-repeat:valoare }

Exemplu de cod în care imaginea folosită pentru fundalul paginii se va repeta pe verticala pe toata înalțimea documentului:

body { background-repeat:repeat-y; }

d) Controlul imaginii de fundal

CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.
Sintaxa generala este:

selector { background-attachment:valoare }

Exemplu practic aplicat imaginii folosită pentru fundalul paginii:

body { background-attachment:scroll; }

e) Pozitia imaginii de fundal

Pentru a poziționa imaginii de fundal în funcție de coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate x și y) separate prin spațiu, 'x' pentru pozitia orizontala și 'y' pentru cea verticala.
Forma generala a acestei proprietați este:

selector { background-position:valoare }

Coordonatele x și y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi și cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center" sau "bottom" pentru coordonata y.
Exemplu în care imaginea de fundal a paginii este poziționata la 10 pixeli (x și y) relativ la coltul din stanga-sus:

body { background-position:10px 10px; }

f) Stabilirea simultama a proprietaților fundalului

Toate proprietațile fundalului pot fi configurate cu ajutorul proprietații background. Se poate stabili simultam printr-o lista de valori proprietațile fundalului, enumerate în orice ordine și separate prin spațiu.
Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietațile, cele nespecificate fiind stabilite la valoare lor implicita.
Sintaxa generala este:

selector {background:val_bg-color val_bg-img val_bg-repet val_bg-attach val_bg-position }

Valoarea implicita a proprietații background-color este "transparent".
Valoarea implicita a proprietații background-image este "none".
Valoarea implicita a proprietații background-attachment este "scroll".
Valoarea implicita a proprietații background-position este "top left".
Exemplu în care sunt aplicate mai multe proprietați pentru background, în aceeasi definiție:

div { background:#e8e8fe url('imagine.jpg') 50% repeat }

– DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine poziționata la jumatatea distantei X, Y și care se repeta.

Stabilirea culorii din prim-plan

Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau element de tip formular.
Sintaxa generala pentru utilizarea acestei proprietați este:

selector { color:valoare }

Valoarea culorii poate fi:

numele culorii – una din cele 16 culori predefinite (red, green, blue, white, silver, …)

valoare în hexa – sub forma #rrggbb

valoare RGB – sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin numere intregi cuprinse intre 0 și 255 sau procente de rosu, verde și albastru cu valori intre 0% și 100%.

Exemplu de cod CSS în care culoarea textului din etichetă "h3" este definită verde:

h3 { color:green; }

2.5 Afișarea elementelor

Indiferent Dacă o etichetă este de sine statatoare sau imbricata în alte etichete, aceasta poate fi tratata ca un element distinct pe ecran și poate fi controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat în propriul lui cadru.
Notiunea de element se refera la componentele unui document HTML, configurate prin intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietați, intre care se numara: marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), Lațimea și înalțimea, care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos și stanga) la care se pot aplica proprietațile CSS specifice, restul proprietaților CSS (font, text, culoare, fundal) se aplica în conținutului casetei. Conținutul poate include texte, liste, formulare sau imagini.

Lațimea și înalțimea unui element

Lațimea și înalțimea elementelor pot fi specificate cu ajutorul proprietaților width și height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului conținut. Pentru definirea latimii și înaltimii se folosesc urmatoarele tipuri de valori:

– o valoare de tip numeric, de obicei în pixeli;

– un procent, care stabileste o valoare proportională în funcție de cea a elementului parinte;

– valoarea auto, care foloseste Lațimea și înalțimea calculata de navigator, și care reprezinta cantitatea de spațiu maxim pe care o poate ocupa elementul pentru Afișarea intregului conținut.

Sintaxa generala pentru configurarea latimii și înaltimii este:

selector { width:valoare; height:valoare }

Exemplu în care elementul cu id="un_id" va avea Lațimea de 300 pixeli și înalțimea de 500 pixeli:

#un_id { width:300px; height:500px; }

Marginile unui element

Proprietatea margin permite stabilirea distantei dintre un element și alte elemente alaturăte, prin specificarea unei valor pentru marginea din fiecare latură (sus, dreapta, jos, stanga).
Dacă specificati cele 4 valori în aceeasi definiție, acestea reprezinta marginile elementului în urmatoarea ordine: sus, dreapta, jos, stanga.
Dacă specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
In cazu în care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:

selector { margin:valoare/valori; }

Tipul de valoare folosit poate avea urmatoarele optiuni:

– o valoare de tip lungime (numerica) – care poate fi și negativa;

– o valoare procentuală (procent) – creaza o margine proportională cu Lațimea elementului parinte;

– valoarea auto – lasa controlul marginilor la decizia navigatorului.

Exemplu în care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli și în stanga 15 pixeli:

div { margin:10px 5px 8px 15px; }

Exista posibilitatea de a stabili valoarea marginii doar pentru o singură latură, fară a ține cont de celelalte margini. Pentru aceasta sunt folosite proprietațile margin-top, margin-bottom, margin-left și margin-right cu aceleași valori ca și în cazul proprietații margin, dupa cum puteți vedea mai jos.

selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
selector { margin-left:valoare; }
selector { margin-right:valoare; }

Chenarul unui element

Proprietatea border permite stabilirea simultama a atributelor chenarului pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura Lațimea (grosimea), stilul și culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:

selector { border:val_grosime val_stil val_culoare; }

unde

– prima valoare (val_grosime) reprezinta grosimea chenarului și poate fi una din urmatoarele tipuri:

– o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
– un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa.

– a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza Afișarea chenarului);

– ultima valoare (val_culoare) reprezinta culoarea, exprimata în cod hexa sau valoare RGB.

Exemplu în care div-urile vor avea o bordura groasa de 1 pixel, solid și culoare albastra:

div { border:1px solid blue; }

– Pot fi folosite și proprietați separate pentru fiecare: "border-width", "border-style" și "border-color";

Un atribut care poate fi folosit în configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete.
Sintaxa generala este:

selector { border-width:valoare; }

Dacă specificati toate cele patru valori, ele sunt aplicate în ordinea: sus, dreapta, jos, stanga.
Dacă specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Dacă folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor în caseta.

Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru margini și este definit astfel:

selector { border-style:valoare; }

Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:

Ultimele patru valori sunt reprezentate tridimensional, iar în cazul în care ele nu sunt acceptate de catre navigator, în locul lor se va folosi valoarea cu linie plina.

Un alt atribut care poate fi utilizat în configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului și foloseste pentru valoarea ei un singur cuvant cheie exprimat în cod hexa, valoare RGB sau numele culorii.
Sintaxa generala este:

selector { border-color:valoare; }

Puteți stabili culoarea fiecarei margini și separat, folosind proprietațile:

border-top-color, border-right-color, border-bottom-color și border-left-color

Fiecare latură a chenarului poate avea valori configurate în mod separat (prin care se stabilesc stilul și culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:

selector { border-top:grosime stil culoare; }
selector { border-bottom:grosime stil culoare; }
selector { border-left:grosime stil culoare; }
selector { border-right:grosime stil culoare; }

Adaugarea spațiului în interior, în jurul elementului

Proprietatea padding adauga o cantitate de spațiu suplimentar în jurul conținutului elementului, în interiorul chenarului, intre bordura și conținut.
Forma generala pentru utilizarea acestei proprietați este:

selector { padding: valoare/valori; }

Valoarea pentru completarea spațiului poate fi una din urmatoarele:

– o valoare de tip lungime

– o valoare procentuală – creaza umplerea în raport cu Lațimea elementului parinte.

Cand specificati toate cele patru valori, ele sunt aplicate în ordinea: sus, dreapta, jos, stanga.
Dacă specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Dacă specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse.
Exemplu în care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli și în stanga 2 pixeli:

div { padding:4px 2px 3px 2px; }

Fiecare latură a chenarului poate avea proprietatea padding configurata separat:

selector { padding-top:valoare; }
selector { padding-bottom:valoare; }
selector { padding-left:valoare; }
selector { pading-right:valoare; }

Elemente float

CSS ofera posibilitatea de a "infasura" anumite elemente în jurul altora. Acest lucru se face prin intermediul proprietații float, care determina o mutare fortata a elementului în directia data de valoarea mentionata, lasand loc liber în spațiul opus directiei, care va fi ocupat de urmatorul element din codul HTML.
Sintaxa generala pentru utilizarea acestei proprietați este:

selector { float:valoare; }

Unde "vaoare" poate fi" left, right și none
Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului în stanga sau în dreapta ecranului, textul din exteriorul etichetei HTML respective va fi plasat în partea opusa, în jurul elementului.
Exemplu în care elementul cu id="un_id" va fi fortat sa fie poziționat în dreapta celorlaltor elemente:

#un_id { float:right; }

Anularea plasarii unui element în spațiul eliberat de "float"

Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o preced, este și proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spațiu care a fost lasat liber de un element care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietați clear:

selector { clear:valoare; }

Unde "valoare" specifica latură în jurul careia este interzisa infasurarea textului și poate lua valoarea: left, right sau both. Se poate folosi și valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietații clear.
Exemplu, Dacă aveti un DIV poziționat fortat în dreapta, un paragraful care urmeaza dupa el va fi afișat în stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afișat sub DIV, se foloseste proprietatea "clear", precum în exemplul urmator:

#un_div { float:right; }
p { clear:both; }

Afișarea și ascunderea elementelor

Proprietatea display poate stabili Dacă un element va fi de tip block, incluzand linii noi deasupra și dedesubtul sau, Dacă este inclus în linie, Dacă este tratat sub forma de lista sau Dacă elementul este afișat sau nu.
Sintaxa generala pentru aceasta proprietate este:

selector { display:valoare; }

Unde "valoare" poate fi una din urmatoarele optiuni:

list-item – plaseaza în prima linie a textului un indicator pentru articole de tip lista, dar și un salt deasupra și dedesubtul articolului;

block – defineste etichetă ca fiind de tip bloc și plaseaza un salt la linie noua deasupra și dedesubtul ei;

inline – defineste etichetă ca o etichetă în linie și elimina caracterele de salt la linie noua;

none – determina ascunderea elementului și neAfișarea lui de catre navigator; codul acestuia este incarcat insa conținutul sau nu e afișat în pagina.

Exemplu în care elementele <li> sunt asezate în linie, iar un element cu id="un_id" va fi ascuns în pagina:

li { display:inline; }
#un_id { display:none; }

Capitolul III

Introducere în JavaScript

JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitatile HTML, ofera o alternativa partiala la utilizarea unui numar mare de scripturi CGI pentru prelucrarea informatiilor din formulare și care adauga dinamism în paginile web.
Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu firma Sun, cu scopul de a crea un limbaj de script cu o Sintaxa și semantica asemanatoare cu a limbajului Java, și din motive de marketing numele noului limbaj de script a fost schimbat în "JavaScript".
Java Script a aparut din nevoia ca logica și inteligenta sa fie și pe partea de client , nu doar pe partea de server. Dacă toata logica este pe partea de server, intreaga prelucrare este facuta la server, chiar și pentru lucruri simple, asa cum este validarea datelor. Astfel, Java Script il inzestreaza pe client și face ca relatia sa fie un adevarat sistem client-server.
Limbajul HTML ofera autorilor de pagini Web o anumita flexibilitate, dar statica. Documentele HTML nu pot interactiona cu utilizatorul în alt mod mai dinamic, decât pune la dispozitia acestuia legaturi la alte resurse (URL-uri). Crearea de CGI-uri (Common Graphics Interface) – [programe care ruleaza pe serverul Web și care accepta informatii primite din pagina de web și returneaza cod HTML] – a dus la imbogatirea posibilitatilor de lucru. Astfel, un pas important spre interactivizare a fost realizat de JavaScript, care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel și traficul dintre server și client. De exemplu, în tr-o pagina pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii și apoi pentru a trimite serverului doar date corecte spre procesare.
JavaScript conține o lista destul de ampla de Funcții și comenzi menite sa ajute la operatii matematice, manipulari de siruri, sunete, imagini, obiecte și ferestre ale browser-ului, link-urile URL și verificari de introduceri ale datelor în formulare. Codul necesar acestor actiuni poate fi inserat în pagina web și executat pe calculatorul vizitatorului.
Dupa lansarea sa, în decembrie 1995, JavaScript si-a atras sprijinul principalilor distribuitori din domeniu, cum sunt Apple, Borland, Informix, Oracle, Sybase, HP sau IBM. S-a dezvoltat în continuare, obținand recunoastere majoritatii browserelor. Intelegand importanta scripting-ului web, Microsoft s-a dorit sa ofere suport și pentru JavaScript. Netscape a preferat sa acorde licenta de tehnologie companiei Microsoft în loc sa o vanda, astfel Microsoft a analizat JavaScript, și bazandu-se pe documentatia publica a creat propria sa implementare, "Jscript", care este recunoscuta de Microsoft Internet Explorer.
Jscript 1.0 este aproximativ compatibil cu JavaScript 1.1, care este recunoscut de Netscape Navigator. Totusi, versiunile ulterioare de JavaScript și diversele diferente specifice platformelor de operare au inceput sa dea destule probleme programatorilor web și astfel Netscape, Microsoft și alti distribuitori au fost de acord sa predea limbajul unei organizatii internationale de standardizare – ECMA ; aceasta a fînalizat o specificatie de limbaj, cunoscuta ca ECMAScript, recunoscuta de toti distribuitorii. Desi standardul ECMA este util, atat Netscape cat și Microsoft au propriile lor implementari ale limbajului și continua sa extinda limbajul dincolo de standardul de baza.
Pe langa Jscript, Microsoft a introdus și un concurent pentru JavaScript, numit VBScript, realizat pentru a usura patrunderea pe web a programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea JavaScript a devenit cunoscut ca limbajul de scripting standard pentru web.

3.1 Sintaxa JavaScript

Adaugarea JavaScript intr-o pagina HTML

Pentru a insera JavaScript în tr-un document HTML deja existent, este necesara introducerea în fișier a etichetei <script> și </script>. Aceasta etichetă necesita aributul "type", sau atributul "language" (acesta din urma este depreciat în standardul XHTML) care va specifica browser-ului limbajul folosit pentru interpretarea codului inclus.
In interiorul etichetei <script> … </script> vom scrie codul nostru.
Pentru scrierea și executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi Notepad pentru Windows sau emacs pentru Unix) și un browser (ex. Mozilla Firefox, Internet Explorer).
– Atributul "language" (care insa nu este folosit în XHTML, ci doar în paginile web standard HTML) – va avea urmatoarea Sintaxa: language="JavaScript", aceasta specifica browser-ului ce limbaj este folosit
– Atributul "type" – inlocuitorul lui "language" – va avea urmatoarea Sintaxa: type="text/javascript", aceasta spune browser-ului ca scriptul este scris în format plaintext.
Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fișier, extern, care va avea extensia ".js", pentru editarea acestui fișier este nevoie la fel de un editor simplu de texte. Avantajul fiind ca putem folosi acelasi cod în mai multe pagini HTML și în cazul necesitatii unei modificari în codul JavaScript, modificam doar datele dintr-un singur fișier (cel cu extensia ".js"), dezavantajul acestei metode este faptul ca intr-un fișier extern ".js" nu putem folosi etichete HTML, ci numi instructiuni JavaScript.
In cazul în care codul JavaScript se afla intr-un fișier extern, etichetă <script> din pagina HTML va trebui sa contina atributul "src" a carui valoare determina locatia fișierului în care se afla codul JavaScript.
In fișierul extern cu extensia "js" nu trebuie sa scriem etichetă "<script>", scriem direct instructiunile scriptului.
Exemplu de script JavaScript scris în interiorul unei pagini web (XHTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cod JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("Textul care va fi afișat pe ecran");
</script>
</body>
</html>

Si pentrut HTML:

<html>
<head>
<title>Cod JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("Textul care va fi afișat pe ecran");
</script>
</body>
</html>

Comanda document.write este folosită pentru a tipari ceva în pagina.
Rezultatul acestui script, afișat în pagina web (XHTML și HTML) va fi urmatorul:

Textul care va fi afișat pe ecran

Dacă dorim sa incarcam scriptul dintr-un fișier extern (de exemplu "cod.js"), codul nostru în documentul HTML va arata astfel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cod JavaScript</title>
</head>
<body>
<script src="cod.js" type="text/javascript"> </script>
</body>
</html>

3.2 Noțiuni de baza

Folosirea variabilelor

Intr-un script (sau program) se folosesc date constante dar și date variabile care isi schimba valorile în timpul executei programului. Aceste date se numesc variabile.

Variabila = numele unei locatii din memoria calculatorului, folosită pentru a memora date.

Modul cel mai simplu de a folosi și a face referire la o astfel de data variabila este de a o denumi. Numele variabilei permite accesul la valoarea ei precum și schimbarea valorii Dacă este necesar.
Se poate crea o variabila și sa-i atribuim o valoare prin doua metode:
– Cu declaratia var

var nume = valoare

– Fară declaratia var

nume = valoare

– Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim.

Tipuri de variabile – Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu are tipuri fixe de date, adica permite schimbarea tipului unei variabile în cadrul scriptului, acesta poate recunoaste singur cand datele sunt de tip "sir", numerice sau alt tip.
De exemplu:

var x = "xyz";
x = 8;

– Valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele 'numerice' pot fi scrise și fară ghilimele.

Durata de viata a unei variabile – O variabila scrisa în cadrul unei Funcții este o variabila locala, valoarea ei fiind recunoscuta numai în cadrul acelei Funcții, cand se iese din funcție variabila este distrusa. Astfel, o alta funcție poate declara și folosi o variabila cu acelasi nume, JS (Java Script) trateaza cele doua variabile ca fiind diferite.
Se pot declara și variabile, în afară oricarei Funcții, care sa fie folosite de toate Funcțiile, acestea se numesc variabile globale și sunt valabile de la incarcarea paginii web pana la inchidere, în orice script JS.

Operatori

Pentru a lucra cu datele introduse intr-un script și a manipula valorile variabilelor se folosesc operatori
Operatorii sunt simboluri și identificatori care determina felul în care sunt modificate datele și modul în care este evaluata o combinatie de expresii și variabile.
JavaScript recunoaste :

– operatori binari – care necesita existenta a doi operanzi în expresie.

– operatori unari – care au nevoie doar de un operand.

Operatori sunt de mai multe tipuri:

– Operatori aritmetici
– Operatori de atribuire
– Operatori de comparare
– Operatori logici (numiti și booleeni)
– Operatori pentru siruri
– Operatori typeof
– Operator conditional ?
– Operatori pentru Funcții
– Operatori pentru structuri de date

3.3 Funcții

Funcțiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.
O funcție poate conține mai multe instructiuni și comenzi care ulterior pot fi utilizate usor și de mai multe ori prin apelarea funcției care le conține.
Dacă un program necesita multe linii de cod, folosind Funcțiile putem imparti codul în parti mai mici pe care le putem utiliza separat acolo unde este nevoie.
Pot fi doua feluri de Funcții:

predefinite – cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", …

Create de programator

– care returneaza o valoare

– care nu returneaza o valoare

Crearea (definirea) Funcțiilor

O funcție se defineste la inceputul fișierului, în sectiunea head și poate fi folosită în cadrul paginii prin apelarea ei. Scriptul care conține definirea unei Funcții se adauga în sectiunea "head" pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata.
Pentru crearea unei Funcții se foloseste cuvantul funcțion urmat de numele pe care vrem sa-l dam funcției dupa care putem adauga intre paranteze rotunde argumentele (numite siatribute) funcției (separate prin virgula Dacă sunt mai multe) și intre acolade corpul funcției care conține codul care trebuie executat.
Forma generala a unei Funcții este urmatoarea:

funcțion nume_funcție(argument1, argument, …) {
codul care va fi executat
}

Argumentele sunt variabile folosite de funcție și a caror valoare este preluata la apelarea funcției.
Atributele nu sun obligatorii, o funcție poate fi definită și fară argumente, dar se pastreaza parantezele rotunde, astfel Sintaxa unei Funcții fară argumente este urmatoarea:

funcțion nume_funcție() {
codul care va fi executat
}

Instructiunea return

O funcție care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta specifica valoarea pe care o returneaza funcția cand este apelata.
Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:

funcțion suma(x, y) {
z = x+y;
return z
}

– "suma" reprezinta numele funcției (puteți da orice nume care respecta regulile limbajuli și nu sunt identice cu cele rezervate, cum ar fi "funcțion"), "x, y" reprezinta argumentele funcției a caror valoare este data cand funcția este apelata. Intre acolade avem codul care trebuie executat și care, prin instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" și "y". Astfel valoarea returnata de funcția "suma()" va fi valoarea pe care o are "z".

Apelarea Funcțiilor

Dupa ce am creat o funcție, pentru a fi folosită, fuctia trebuie apelata.
– O funcție care conține argumente se apeleaza în felul urmator:

nume_funcție(argument1, argument, …)

– O funcție fară argumente se apeleaza în felul urmator:

nume_funcție()

Observati ca la apelul funcției nu se mai folosesc cuvantul "funcțion" și acoladele
In locul în care am apelat astfel o funcție va fi executat corpul acelei Funcții.

Exemple de scripturi cu Funcții

In continuare studiati exemplele de mai jos, care folosesc Funcții simple, astfel veti intelege mai bine modul de lucru și executie a unei Funcții.

– Exemplu – funcție fară argument
Exemplu prezinta un script care afișeaza un text:

<html>
<head>
<script type="text/javascript">
<!–
funcțion exemplu1() {
return document.write("Bine ati venit!")
}
//–>
</script>
</head>
<body>
<script type="text/javascript">
exemplu1()
</script>
</body>
</htm>

Capitolul IV

Partea Practică

Crearea uni Dcument HTML,CSS și JavaScript.

Pentru a creea un document HTML CSS și JavaScript urmărim următoarea procedură :

Start -> notepad -> File -> Save As -> pagina1.html

Start -> notepad -> File -> Save As -> pagina2.css

Start -> notepad -> File -> Save As -> lightbox.js

Scrierea codului HTML în fișierul notepad pagina1.html și afișarea lui în Browserul de internet:

Fișierul HTML în Notepad

Fișierul HTML fară CSS în Browser după ce am scris Notepad-ul

Scrierea codului CSS în fișierul notepad pagina2.css, legarea la pagina1 prin comanda <link rel="stylesheet" href="pagina2.css" type="text/css" /> din sectiunea <head></head> a HTML-ului, pentru a schimba infațisarea pagini noastre Web și afișarea ei în Browserul de internet:

Pagina Web după ce am terminat de scris fișierul CSS

Comanda care ne ajută să accesam pagina Web de pe telefonul mobil , tabletă etc. Se scrie în fișierul css la sfârsit @media only screen and (min-width: 150px) and (max-width:600px) și se selectează classele care vrem sa le modificăm.

După ce am introdus în fișierul css @media only screen and (min-width: 150px) and (max-width:600px) și am minimizat pagina Web.

Crearea unui fișier JavaScript pentu a selecta o poză din meniul poze HTML și să o aducă în față iar fundalul să îl umbrească “lightbox effect”, legarea la abe.html prin comanda <script type="text/javascript" src="lightbox.js"></script> din sectiunea <head></head> a HTML-ului

Bibliografie selectivă

[1] Buraga, Sabin, Proiectare situri Web: design și funcționalitate, Editura Polirom, 2002.

[2] idem, Tehnologii Web, Editura Matrix Rom, București, 2001.

[3] Castro, , Html pentru world wide web, Editura Corint, 2003.

[4] Darnel, Rick, Totul despre HTML 4, Editura Teora, 2000

[5] Drăghici, Margareta Dina, Situri Web în HTML 4, Editura Tehnică, 2003.

[6] Evans, Tim, HTML… în lecții de 10 minute, Editura Teora, 1996

[7] Mavrodin, Horațiu, Inițiere rapidă în : Windows, Word, Excel, Access, PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006.

[8] Mitchell, Scott, Cum să creezi un site WEB, Editura Teora, București, 2008.

[9] Phillips, Lee Anne, Utilizare HTML 4, Teora, Bucuresti, 2000.

[10] Stamate, Eugenia Lucia, Crearea și publicarea unui site web. Limbajul html și elemente de web design, Editura Paralela 45, 2005

[11] Taylor, Dave, Crearea paginilor WEB cu HTML 4, Teora, Bucuresti, 1998.

http://www.marplo.net/javascript/

Anexe

Anexa 1.

Tag-uri și atributele lor

– ordine alfabetică –

\

Anexa 2.

Nume și coduri de culori sigure

DECLARAȚIE DE AUTENTICITATE

A

LUCRĂRII DE FÎNALIZARE A STUDIILOR

Titlul lucrării__________________________________________________

________________________________________________________________________________________________________________________________

Autorul lucrării _____________________________________________

Lucrarea de fînalizare a studiilor este elaborată în vederea susținerii examenului de fînalizare a studiilor organizat de către Facultatea _________________________________________ din cadrul Universității din Oradea, sesiunea_______________________ a anului universitar___________.

Prin prezenta, subsemnatul (nume, prenume, CNP)_______________ _______________________________________________________________________________________________________________________________,

declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

Data Semnătura

Bibliografie selectivă

[1] Buraga, Sabin, Proiectare situri Web: design și funcționalitate, Editura Polirom, 2002.

[2] idem, Tehnologii Web, Editura Matrix Rom, București, 2001.

[3] Castro, , Html pentru world wide web, Editura Corint, 2003.

[4] Darnel, Rick, Totul despre HTML 4, Editura Teora, 2000

[5] Drăghici, Margareta Dina, Situri Web în HTML 4, Editura Tehnică, 2003.

[6] Evans, Tim, HTML… în lecții de 10 minute, Editura Teora, 1996

[7] Mavrodin, Horațiu, Inițiere rapidă în : Windows, Word, Excel, Access, PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006.

[8] Mitchell, Scott, Cum să creezi un site WEB, Editura Teora, București, 2008.

[9] Phillips, Lee Anne, Utilizare HTML 4, Teora, Bucuresti, 2000.

[10] Stamate, Eugenia Lucia, Crearea și publicarea unui site web. Limbajul html și elemente de web design, Editura Paralela 45, 2005

[11] Taylor, Dave, Crearea paginilor WEB cu HTML 4, Teora, Bucuresti, 1998.

http://www.marplo.net/javascript/

Anexe

Anexa 1.

Tag-uri și atributele lor

– ordine alfabetică –

\

Anexa 2.

Nume și coduri de culori sigure

DECLARAȚIE DE AUTENTICITATE

A

LUCRĂRII DE FÎNALIZARE A STUDIILOR

Titlul lucrării__________________________________________________

________________________________________________________________________________________________________________________________

Autorul lucrării _____________________________________________

Lucrarea de fînalizare a studiilor este elaborată în vederea susținerii examenului de fînalizare a studiilor organizat de către Facultatea _________________________________________ din cadrul Universității din Oradea, sesiunea_______________________ a anului universitar___________.

Prin prezenta, subsemnatul (nume, prenume, CNP)_______________ _______________________________________________________________________________________________________________________________,

declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

Data Semnătura

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Pagini Web In Html Si Css (ID: 150095)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Pagini Web In Html Si Css

Copyright Notice

Calcul Stiintific de Inalta Performanta pe Procesoare Grafice

. Comunicarea Intr O Retea Moderna Prin Voip

Proiectarea Unei Aplicatii Informatice a Unei Activitati Bancare Privind Sistemul de Plati

Subsistem Informatic Privind Gestiunea Operatiunilor Hoteliere

Baza de Date cu Anunturi Publicitare

Aplicatie Pentru Predictie de Date

Copyright Notice

Similar Posts