Crearea Unei Pagini Web

Informatica

Crearea Unei Pagini Web

Byadmin ianuarie 1, 2024

Lucrare de Licență

Crearea unei pagini Web

Cuprins

Introducere

1. Capitolul I – HTML

1.1. Principalele elemente HTML

1.2. Crearea și editarea paginii HTML

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

1.4. Formatarea textului

1.5. Adaugarea Imagini

1.6. Link-uri

1.7. Tag-ul Div

2. Capitolul II – CSS

2.1. Scrierea codului CSS

2.2. Crearea paginilor de Stil

2.3. Configurarea fonturilor

2.4. Configurări pentru culori și fundal

2.5. Afișarea elementelor

3. Capitolul III – 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 internetului este Hypertext Markup Language – HTML, care descrie limbajul primar în care documentele sunt văzute pe internet. 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. [1]

HTML este o abreviere de la Hypertext Markup Language și reprezintă baza oricărei pagini de internet. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini. HTML este modul în care îi comunicăm browserului ce elemente dorim să introducem în pagină Web și care este aspectul acestora.

Structurată în 4 capitole cărora li se adaugă trei anexe și bibliografia aferentă, prezenta lucrare reprezintă o scurtă prezentare a limbajului HTML, CSS si JavaScript pentru crearea unei pagini Web.

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

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

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

Capitolul al patrulea („Partea Practică”) prezintă o pagină 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

HTML

HTML este un limbaj utilizat pentru crearea paginilor web ce pot fi afișate intr-un browser.
HTML este folosit pentru prezentarea unui conținut text sau imagine intr-o pagină web, furnizeaza mijloacele prin care conținutul unui document poate fi structurat și adoptat cu diverse tipuri de date ș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 complicate, tabele, hărti de imagini, formulare și cod CSS sau scripturi JavaScript.
Datele pot include Informații despre titlul și autorul documentului, Informații despre cum este imparțit documentul în diferite segmente, paragrafe, liste, titluri și Informații 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.

1.1 Principalele elemente HTML

Ce este HTML?

– Este un set de coduri logice care constituie apariția unui document web și a Informațiilor pe care le deține. Codurile sunt scrise intre paranteza deschisa "<" și paranteza inchisa">" .
Exemplu:

– Cele mai multe elemente numite și ”tag-uri” au un element ”tag” de deschidere și un element de închidere "/" î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. [3]
– Astfel, o etichetă HTML poate conține elementul de identificare, atribute și valori.

Exemplu elementul este FONT atributul COLOR și valoarea BLUE:

Structura HTML

– Un document HTML conține mai multe elemente și atributele lor.
– La început un element HTML cuprinde 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 pagină web. [2]

Exemplu:

Structura generala HTML

<HTML>
<HEAD> Are mai multe sub- elemente:
<TITLE> </TITLE> Titlul documentului
  <LINK> </LINK> Conectiunea dintre document si alt document de tip Web
  <META> </META> Cuvintele cheie ce pot fi gasite de motoarele de cautare
  <SCRIPT> </SCRIPT> Conține JavaScript
  <STYLE> </STYLE> Conține stilul si grafica pagini CSS
  </HEAD>
  <BODY>

Continutul pagini Html ce va fi afisat in pagină Web
</BODY>
</HTML>

1.2 Crearea și editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web. Editoarele de text sunt programele de baza, și cele mai folosite, pentru editarea paginii web. Exemplu: NotePat, Notepad ++ , EmEditor DreamWiwer, Oxygen. Dintre editoarele de text cunoscute cel mai folosit este NotePad

Baza de în ceput a unui HTML

Acum pagină are HEAD și BODY în interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE.
Ceea ce scrieti la TITLE va apare în linia cea mai de sus a browseru-lui.
Tag-urile <body> </body> reprezinta conținutul paginii, care va fi afișat în browser.

Exemplu:

– <h1> </h1> este o etichetă HTML pentru afisare de text mare (ca un titlu) în pagină.
– Ca sa vedeti rezultatul, copiati acest cod intr-o pagină 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.: "pagină.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 hexazecimale, la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitați 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 Informații care sa defineasca culoarea sau imaginea din fondul paginii, textul și culoarea link-urilor.

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

Exemplu:

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.

Exemplu :

Link-uri (LINK, VLINK și ALINK) [4]

Aceste atribute controleaza culoarea link
1. LINK – culoarea initiala a link-ului
2. VLINK – culoarea unui link vizitat
3. ALINK – culoarea link-ului în momentul activarii

Folosirea unei imagini ca fond pentru pagină (background)

-Elementul body ofera posibilitatea în locuiri fondului paginii cu o imagine . Dacă imaginea este mai mica decât dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi toata pagină . Imaginea sa fie în format *.gif sau *.jpg.

Exemplu:

Dupa ce am creat documentul și am setat Proprietațile, trebuie salvat fisierul cu extensia .html
– In NotePad -> meniul File – > comanda Save și salvati fișierul cu orice nume doriti dar cu extensia .html

Exemplu: PaginăMeaWeb.html

– Pentru a vedea documentul ca o pagină web, duceti-va în directorul în care a-ti salvat fișierul și deschideti-l cu un browser de internet (Internet Explorer, Google Chrome, Mozila Fierfox)
– Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva în documentul HTML, deschideti documentul cu NotePad.

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>. [5]

Exemplu:

Paragraf

Paragrafele permit adaugarea de text în document astfel încat lungimea de afisare a textului va fi ajustata de mărimea deschiderii browser-ului și fiecare paragraf va începe un nou rand nou.

Distanta intre doua paragrafe este de un rand gol.

Exemplu:

Rând nou

Tag-ul <br> introdus in codul html langa un text forteaza un rand nou

<br> nu trebuie inchis prin </br>

Exemplu:

– <br> folosește atributul – CLEAR care poate avea valoarea LEFT, RIGHT sau ALL

Linie orizontala

<hr> afișeaza o linie orizontala în pagină

<hr> nu trebuie inchis prin </hr>

<hr> foloseste urmatoarele atribute:

SIZE

WIDTH

NOSHADE

ALIGN

COLOR

Exemplu:

1.4 Formatarea textului

Tag-ul <FONT> </FONT>

Putem modifica aspectul textului, 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 si + sau -.

Exemplu :

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

Atributul FACE.

Exemplu :

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

Atributul COLOR.

Exemplu :

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

Bold, Italic, Underline și alte elemente

Elemente des folosite pentru formatul textului sunt:

Bold <b> </b>

Italic <i> </i>

Underline <u> </u>

Exemplu:

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

Alte elemente folosite pentru formatul textului sunt:

– <pre> </pre> un singur foont

– <em> </em> – italic

– <strong> Strong </strong> – bold

– <tt> </tt> – un singur font

– <cite> </cite> – un citat din document

Exemplu:

Alinierea

Elementele <hx> </hx>, <p> </p>, <hr> </hr> pot avea atributul <ALIGN> . Valorile atributului ALIGN sunt: LEFT, RIGHT și CENTER.

Alte etichete HTML pentru formatul textului

<strike> </strike> Text taiat

<big> </big> Format mare

<small> </small> Format mic

<sub> </sub> Textul in pozitie subscript

<sup> </sup> Textul in pozitie superscript

Exemplu:

– Alte elemente pentru formatul textului:

<q> </q> Folosit pentru citate scurte

<blockquote> </blockquote> Creaza spațiu pentru text

<address> </address> Folosit pentru Informați, Contact

Exemplu:

1.5 Adaugare Imagini

Formatul imaginilor care pot fi folosite [6]

Cele mai folosite formate pentru imagini sunt GIF și JPEG
Alte tipuri de formate sunt PNG, BMP, TIFF, PCX

Adaugarea unei imagini intr-o pagină web

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

src – locatia fisierului Imagine

alt – in caz ca imaginea nu este afisata va aparea textul scris in atributul alt

align – locul unde va fi pozitionata imaginea

width – lungimea imagini in pixeli

height – inaltimea imagini in pixeli Contact

Exemplu:

1.5 Adaugare Imagini

Formatul imaginilor care pot fi folosite [6]

Cele mai folosite formate pentru imagini sunt GIF și JPEG
Alte tipuri de formate sunt PNG, BMP, TIFF, PCX

Adaugarea unei imagini intr-o pagină web

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

src – locatia fisierului Imagine

alt – in caz ca imaginea nu este afisata va aparea textul scris in atributul alt

align – locul unde va fi pozitionata imaginea

width – lungimea imagini in pixeli

height – inaltimea imagini in pixeli

border – imaginea va fi afisata cu un ghenar

hspace – spațiu orizontal pe ambele parti ale imagini in pixeli

vspace – spațiu vertical pe ambele parti ale imagini in pixeli

Exemplu:

1.6 Link-uri

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. [7]

Exemplu:

– a este elementul specific pentru crearea link-urilor
– href este atributul care marcheaza indicarea adresei link-ului
– url adresa link-ului
– title titlu link-ului care apare cand pozitionam cursorul deasupra linkului
– Titlu link este textul ascuns care apare cand este poziționat cursorul 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 pagină 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

Pentru a ne conecta la un alt document .html din interiorul pagini folosim urmatoarea comanda:

Pentru a ne conecta din interiorul pagini la o alta pagină Web folosim urmatoarea comanda:

2. Link-uri interne

Se marcheaza locatia unde se va face saltul in interiorul pagini

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

– atributul "name" indica tinta pentru link.

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

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

Link-urile interne și externe pot fi combinate.

Exemplu:

1.7 Tag-ul DIV

Tag-ul DIV creaza sectiuni de blocuri în pagină, al caror forma și grafica de conținut pot fi manipulate pentru fiecare separat. Are un singur atribut HTML, align care poate avea urmatoarele valori: left, right, center, justify [8]

Tagul DIV nu au nici un efect major, în combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style 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, lungime, înalțime și margini cu diferite linii.

Exemplu:

– în atributul "style" sunt Proprietațile ale CSS care stabilesc aspectul grafic al fiecarui DIV: lungime în pixeli, fundal și bordura.
Putem a poziționa conținutul din interiorul tag-ului <div> </div> oriunde în pagină, folosind proprietați CSS :

position – care are valorile: static, relative, fixed sau absolute

margin – stabileste distanta elementelor din juru lui

Capitolul 2

CSS

CSS “Cascading Style Sheets” este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> </style>. [16]

2.1 Scrierea codului CSS

Codul CSS este alcatuit din: clasa care va fi formatata, Proprietațile acestuia și valoarea fiecarei proprietați.
In HTML, CSS trebuie scris în cadrul unui tag <style> în sectiunea HEAD a documentului HTML

Exemplu:

Obiect_css sau „clasa” pe urma trebuie scrise „:” iar proprietatea si valoarea se scrie intre doua acolade „{}” si la sfarsit se pune punct si virgula „;”

Codul CSS se poate scrie si in afara documentului HTML si se renunta la sectiunea <style> </style> din Head-ul HTML-ului si se scrie comanda de legatura a fisierului extern CSS

Exemplu:

Obiectele CSS

– Selectorul HTML

Se foloseste pentru a schimba modul de afisare a conținutului HTML.
Un selector HTML indica navigatorului tipul de etichetă.

Exemplu:

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

h1-„ selector”
Definirea unui selector HTML folosind CSS rezulta redefinirea etichetei HTML.

– Clasa

Clasa se aplica orcarui element HTML.

O clasa trebuie creata în interiorul HTML – ului inainte de a fi definită intr-un cod CSS. Crearea clasei în interiorul HTML – ului se face prin specificarea cuvantului „class” și numele clasei

Exemplu:

– "nume_clasa" – numele pe care dorim sa il atribuim clasei
– In interiorul CSS-ului clasa este atribuita cu ajutorul unui punct „.”

Exemplu:

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

– Identificator

Se aseamana cu clasele si pot fi aplicate oricarei etichete HTML, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagină, pentru alta etichetă se adauga un ID nou cu nume diferit.
Identificatoru trebuie intai creat în interiorul HTML-ului. Se creaza prin specificarea cuvantului id și numele clasei.

Exemplu:

– "nume_id", numele pe care dorim sa il atribuim id-ului
In interiorul CSS-ului, identificatorul se face prin adaugarea unui caracter diez „#” inaintea numelui.

Exemplu:

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

Componentele unui obiect CSS

Selectorii – selecteaza un element din interiorul HTM-ului, pot fi clase sau identificatori.

Proprietațile – schimba aspectul unui element HTML

Valorile – sunt atributele unui element pot fi ( procente, pixeli, culoare, etc)

Exemplu:

.selector {proprietate: valoare; }

2.2 Crearea paginilor de Stil

Elemente HTML și stiluri CSS

Cu ajutorul CSS-ului putem schimba fiecare element din interiorul HTML-ului, prin stabilirea stilului cu atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a oferi aspecte grafice de stil doar elementului respectiv.

Exemplu:

Cu ajutorul CSS-ului putem permite definirea unor reguli de stil intr-o pagină web. Acest set de reguli se scriu în sectiunea de HEAD a documentului, în cadrul tag-ului <style>.

Exemplu:

Stilurile definite intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.

Exemplu:

Foile de stil pot fi utilizate la intregul site, astfel trebuie creata o foaie de stil externa intr-un fișier separat, cu extensia ".css", care poate fi inclus în pagină HTML prin legatura sau import.
Crearea unei foaie de stil externe se face printr-un fișier text cu ajutorul unui editor de texte”Notepad, Notepad++” .
Dupa ce a fost creata foaia de stil externa, se face legatura cu un document HTML, în interiorul tag-ului <head> </head>

Exemplu:

-LINK apare în sectiunea HEAD a documentului iar atributele folosite transmit navigatorului tipul de legatura "rel", "type" – tipul codului din fișier și locatia fișierul ce conține codul CSS "href" – calea și numele complet al fișierului plus extensia.
A doua metoda este cea de import a foilor de stil externe intr-un document HTML folosind comanda @import.

Exemplu:

Pentru importarea fisierului Extern CSS se foloseste în sectiunea HEAD a documentului HTML etichetă STYLE unde se adauga "@import" iar "nume_fișier.css" reprezinta calea și numele fișierului .

Pe langa instructiunea "@import", din interiorul STYLE, pot fi adaugate definiti și selectori suplimentari.

Definirea selectorilor

Selectorii HTML sunt definiti prin adaugarea unui numar de definitii compatibilie cu etichetă HTML la care se refera, avand urmatoarea forma

Exemplu:

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

Dupa redefinirea etichetei HTML, stilurile din documentul HTML vor fi modificate automat..

Selectori de tip clasa ofera posibilitatea configurării unor stiluri care se pot aplica doar acelor elemente care sunt etichetăte cu clasa respectiva.

Exemplu:

.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.

Exemplu:

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

Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase trebuie sa fie diferit de cuvintele rezervate pentru JavaScript.

Identificatori sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagină.

Exemplu:

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

Identificatorii pot defini un element sub forma unui obiect, sunt folositidoar o singură data în cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi folosit și cu ajutorul Funcțiilor JavaScript.
Numele unui identificator trebuie sa fie diferit de cuvintele rezervate pentru JavaScript.

Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietați prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Pentru a crea etichete personalizate se foloseste etichetele <div> si <span> Etichetă <span> 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 unei etichete <span>.

Exemplu in HTML:

Exemplu în CSS:

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

Cand se doreste configurarea unui bloc separat de restul conținutului unui document HTML, se foloseste etichetă <div>. Aceasta creaza o zona proprie în pagină, cu linie noua atat deasupra sa cat și dedesubt.
Pentru crearea etichetelor DIV se defineste o eticheta de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>.

Exemplu in HTML:

Exemplu in CSS:

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

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.

Exemplu:

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 (imbrăcate)

Cand o etichetă se afla in interiorul altei etichete spunem ca aceste etichete sunt imbrăcate. Eticheta exterioara se numeste, etichetă parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil.

Exemplu:

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

– "selector1" este selectorul parinte

-"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. 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 imbrăcate.

Cresterea prioritatii unei definitii

Valoarea !important acorda prioritate ordinii de executie.
Valoarea !important trebuie plasata inaintea caracterului ’;’,.

Exemplu:

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 in stil 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 afisarea 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

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:

/* 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. [13]

Exemplu:

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 pagină ș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 unitați de măsură: 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 măsură – 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 imprimantă sa se foloseasca ca unitați de măsură punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizată unitate de măsură pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o măsură foarte sigura, dar, de obicei, pentru Afișarea pe ecran, constituie o măsură 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 precizată 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.

Exemplu:

selector { font-weight:valoare }

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ții font-variant.

Exemplu

selector { font-variant:valoare }

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.

Exemplu:

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

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

2.4 Configurări pentru culori și fundal

Configurarea fundalului

Se poate schimba fundalul intregii pagini, sau pentru un anumit element din pagină, fie el de tip DIV, paragraf, imagine, tabel sau formular. [18]

– Culoarea fundalului

Cu proprietatea “backround-color” putem schimba culoarea fundalului, urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata în cod hexa.

Exemplu:

selector {background-color:valoare }

Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".

Exemplu:

body { background-color:#0000ff; }

– Imaginea de fundal

Pentru a insera pe fundal o imagine folosim proprietatea background-image, urmata de adresa URL numele si extensia imagini.

Exemplu:

selector { background-image:url('imagine.JPG'); }

– Repetarea imaginii de fundal

Pentru a repeta imaginea de fundal folosim 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.

Exemplu:

selector { background-repeat:valoare }

– 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 pagină.

Exemplu:

selector { background-attachment:valoare }

– Pozitia imaginii de fundal

Pentru a poziționa imaginii de fundal folosim proprietatea background-position urmata de coordonate x și y separate prin spațiu, 'x' pentru pozitia orizontala și 'y' pentru cea verticala.

Exemplu:

selector { background-position:valoare }

– 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.

Exemplu:

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".

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:

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. [17]

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.

Exemplu:

selector { width:valoare; height:valoare }

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

#un_id { width:200px; height:400px; }

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.

Exemplu:

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.

Exemplu:

selector { border:val_grosime val_stil val_culoare; }

– 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.

Exemplu:

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.

Exemplu:

selector { border-style:valoare; }

Tipuri de valori: (none, dashed, solid, double, grove, ridge, inset, outset”)

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. [11]

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.

Exemplu:

selector { border-color:valoare; }

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

border-top-color

border-right-color

border-bottom-color

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.

Exemplu:

selector { padding: valoare/valori; }

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

– o valoare de tip lungime

– o valoare procentuală

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:

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

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.

Exemplu:

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".

Exemplu:

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, inclus în linie,sub forma de lista sau dacă elementul este afișat sau nu.

Exemplu:

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 pagină.

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

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

Capitolul III

JavaScript

JavaScript “extensie .js” este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru acesul la embedded objects în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

3.1 Sintaxa JavaScript

Adaugarea JavaScript intr-o pagină HTML

Pentru a face legatura unui document JavaScript “.js” cu un document HTML, introducem în fișier eticheta <script> </script>. Aceasta etichetă necesita aributul "type", care va specifica browser-ului limbajul folosit pentru a putea citi codul inclus.
In interiorul etichetei <script> </script> vom scrie codul nostru.
Pentru scrierea codului JS avem nevoie de un editor de TEXT exemplu : “Notepad, Emeditor, Oxygen etc.”.

– "type"– va avea urmatoarea Sintaxa: type="text/javascript", aceasta spune browser-ului ca scriptul este scris în format plain text.
JavaScript poate fi introdus intr-un fisier extern , cu extensia ".js", pentru editarea pentru editarea lui este necesar de un editor Text “Notepad, Oxygen etc.”. Acest lucru ne ajuta sa folosim acelasi cod în mai multe pagini HTML și în cazul unei modificari în codul JavaScript, mod ificam doar datele dintr-un singur fișier .
In cazul în care codul JavaScript se afla intr-un fișier extern, etichetă <script> din pagină 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:

Dacă dorim sa incarcam scriptul dintr-un fișier extern (de exemplu "cod.js").

Exemplu:

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. [19]

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. [12]
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 -> pagină1.html

Start -> notepad -> File -> Save As -> pagină2.css

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

Scrierea codului HTML în fișierul notepad pagină1.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 pagină2.css, legarea la pagină1 prin comanda <link rel="stylesheet" href="pagină2.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:

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

Comanda care ne ajută să accesam pagină 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 pagină 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

[20]

Bibliografie

[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] Flanagan, David; , Paula (2006). JavaScript: The Definitive Guide (ed. 5th)

[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.

[12] http://www.marplo.net/javascript/

[13] http://www.marplo.net/Css/

[14] http://ro.wikipedia.org/wiki/HyperText_Markup_Language

[15] http://www.w3schools.com/html/DEFAULT.asp

[16] Jeffrey Zeldman (2009): Designing With Web Standards, New Riders

[17] Dan Cederholm (2009): Web Standards Solutions, The Markup and Style Handbook

[18] http://www.w3schools.com/css/css_intro.asp

[19] http://www.w3schools.com/js/js_intro.asp

[20] http://lokeshdhakar.com/projects/lightbox/

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