Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  

CATEGORII DOCUMENTE





AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


HTML (Hyper Text Markup Language)

webdesign

+ Font mai mare | - Font mai mic







DOCUMENTE SIMILARE

Trimite pe Messenger
Web design
HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language)

Ultima versiune a HTML-ului foloseste unele idei si modificari propuse pentru HTML 3, care au fost abandonate la aparitia HTML 3.2.

HTML 4 propune separarea stilurilor fizice de marcarea continutului printr-o folosire mai intensa a foilor de stil. Elementul frame este acum definit oficial altundeva decat in produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru incorporarea foilor de stil.



Eticheta object este de asemenea extinsa, astfel sa includa practic orice fisier extern care se doreste introdus intr-o pagina Web. Sunt introduse etichetele ins si del, acronym, colgroup, fieldset, button.

HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = ”Limbaj Standard Generalizat de Marcare”) care este un standard international ce a fost aprobat in 1986 si care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale limbajului SGML sunt:

1.      Descrierea structurii documentului;

2.      Nu este descrisa aranjarea in pagina;

3.      Permite fiecarui navigator sa aiba propria prezentare;

4.      Un document HTML poate fi reutilizabil.

Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este afiliat la Internet Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. Fiecare din aceste standarde este mai mult sau mai putin suportat de catre toate sau o parte din browsere.

La ora actuala HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.

Limbajul HTML ofera proiectantilor de pagini Web urmatoarele posibilitati:

1.      Sa publice documente cu headere, texte, tabele, liste, fotografii, etc;

2.      Sa regaseasca on-line informatiile prin intermediul hiperlink-urilor printr-un simplu click de mouse;

3.      Sa proiecteze formulare pentru realizarea tranzactiilor cu servere aflate la distanta pentru cautari de informatii sau pentru activitati specifice comertului;

4.      Sa includa foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct in documente.

Elementul esential diferit adus de versiunea 4.0 si mai ales 4.01 fata de versiunea 3.2 este posibilitatea separarii structurii unui document de prezentarea lui prin introducerea “stilurilor de documente” (style sheet).

Prin utilizarea limbajului HTML pentru structurarea unui document si style sheet-urile pentru a stiliza prezentarea acestuia, se poate obtine mult mai usor independenta de periferic/computer/platforma hard-soft.

Limbajul HTML a fost preferat pentru publicatii pe Web in primul rand datorita simplitatii sale si in al doilea rand deoarece permite formatarea textului ASCII cu tag-uri in format ASCII.

Crearea unui document HTML

HTML = Hyper Text Markup Language este limbajul de baza al WWW si consta dintr-un set standard de coduri care specifica in ce mod documentele vor fi afisate pe ecran de catre navigatoare.

Caracteristica importanta a limbajului este :

portabilitatea ≡ adica orice document sursa HTML va arata identic pe orice tip de calculator si in orice sistem de operare, sarcina interpretarii sale revenind diverselor navigatoare.

Orice document HTML incepe cu marcajul (tag-ul) <html> si se termina cu marcajul (tag-ul(</html>.

Un marcaj poate avea unul sau mai multe atribute care se specifica prin perechi de forma: nume='valoare'. Se recomanda ca valorile atributelor sa fie plasate intre ghilimele (' ').

Marcajele dintre aceste paranteze unghiulare transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod.

Intre cele doua marcaje <html> si </html> apar doua sectiuni;

1.      Sectiunea de antet delimitata de marcajele

<head>   TEXT  </head>;

2.      Corpul documentului care este delimitat de marcajele

 <body>  CORPUL TEXTULUI  </body>.

Un marcaj poate fi scris atat cu litere mici, cat si cu litere mari. Deci limbajul HTML nu este CASE – sensitiv.

Comentariilor din cadrul documentelor HTML se realizeaza utilizậnd tag-ul urmator :

 <!—AICI APARE UN COMENTAR -->.

Orice sir de caractere incadrat de aceste elemente va fi ignorat de programele de navigare Web.

Structura de baza a unui document HTML este:

                           <html>

                                       <head>

                                                   Informatia

                                       </head>

                                       <body>

                                                   Corpul fisierului

                                       </body>

                           </html>

Un fisier HTML este creat cu orice editor de texte cu mentiunea ca fisierul trebuie salvat cu extensia html sau htm.

TAG-uri HTML

In limbajul de marcare a hipertextului totul se rezuma la structura. Un limbaj de marcare este folosit pentru a descrie care este rolul fiecarei parti din document in raport cu celelalte.

Terminologia HTML:

a)         atribut: furnizeaza instructiuni aditionale despre o eticheta. Informatiile variaza de la eticheta la eticheta si pot include subiecte cum ar fi locatia fisierelor, marimea, numele lor sau stiloul lor;

b)         browser: este un motor de parcurgere special care evalueaza etichetele si continutul unui fisier HTML, pe care il afiseaza in concordanta cu posibilitatile si regulile platformei si capacitatile sale;

c)         element: o componenta distinctiva a structurii unui document, cum ar fi titlul, un paragraf sau o lista. Cand ne referim la forma sa aplicata in cadrul unui document, un element se mai numeste eticheta (tag);

d)         eticheta: un cod care identifica un element pentru ca browserul sau alt program de parcurgere sa stie in ce mod sa afiseze continutul. Etichetele sunt incadrate de caractere de delimitare (paranteze ascutite) Ele sunt intotdeauna cuprinse intre paranteze unghiulare (<>) iar utilizarea literelor mici sau mari in scriere nu au importanta.

Documentele HTML sunt fisiere text (ASCII). In text sunt inserate o serie de coduri asa numitele tag-uri sau marcaje care stau la baza modurilor de afisare a documentului. Un document HTML este compus din tag-uri si text curat. Documentele au componente asemanatoare cum ar fi titluri, tabele, liste, paragrafe etc.

Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot contine text, grafica sau alte elemente. Tag-urile sunt de forma – pereche  inceput-sfarsit:


Scrierea perechilor de legaturi:

CORECT                                            INCORECT

 

Tag-uri din cadrul documentului HTML

Fiecare document HTML, inca de la creare are doua parti principale: un antet si un corp. Chiar daca nu sunt special delimitate, HTML presupune existenta lor. HTML ofera de asemenea sansa de a adauga si alte componente functionale paginii, sub forma foilor de stil, scripturilor si seturilor de cadre.

Desi fac parte din definirea unui document HTML, doua etichete exista in afara structurii documentului: doctype si html. Prima identifica versiunea de HTML folosita pentru pagina respectiva si regulile pe care acestea le respecta. A doua eticheta identifica un limbaj global si directia textului pentru documentul respectiv, in plus marcheaza inceputul si sfarsitul continutului HTML.

Documentul HTML se indica prin tag-ul HTML

            <HTML>.</HTML>

Vom prezenta numai o parte din tag-urile HTML, care sunt importante in realizarea unui design atragator.

Se considera ca limbajul HTML este stapinit de catre student, avindu-se in vedere ca au absolvit cursul de Tehnici multimedia.

Culori, fonturi, margini

O pagina Web poate fi setata prin:

- alegerea culorii de fond

- alegerea culorii textului si

- alegerea dimensiunilor paginii

Culoarea de fond

Culoarea se obtine din amestecul a celor trei culori fundamentale: rosu, verde si albastru.

Culoarea de fond a unei pagini Web se specifica utilizand :

·          nume de culoare. Astfel sunt disponibile cel putin 16 nume de culori, astfel avem urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal, white si yellow.

·          secventa hexazecimala “#rrggbb” unde r,g sau b sunt cifre hexazecimale si pot lua valorile din multime ;astfel  se pot defini 65536 de culori.

·          functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale

Culoare pentru tag-ul body

Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichete <body>.

Sintaxa:

<body bgcolor = culoare>,

unde culoare se stabileste dupa modelul precizat mai sus.

Exemplu a unei pagini Web cu fondul de culoare “cyan”:

Culoarea textului

Definirea culorii textului pentru o pagini Web se face prin intermediul atributului text al etichetei <body>

Sintaxei:

<body text = culoare>,

unde culoare se precizeaza la fel ca la exemplul precedent.

Pagina de Web urmatoare are textul de culoare rosie:

Atribute multiple

O eticheta poate sa aiba mai multe atribute.

O eticheta cu trei attribute are urmatoarea sintaxa:

Sintaxa:

<eticheta atribut1 = valoare1  atribut2 = valoare2   atribut3 = valoare3>

Exemplu: Pagina Web cu textul de culoare albastra si fondul de culoare galbena:

Textul de baza (basefont)

Atributele textului de baza dintr-o pagina Web sunt:

§          Marime (size)

§          Culoare (color)

§          Font (style)

Sintaxa:

<basefont size = numar color = culoare style = font>

unde:

numar  poate lua una dintre valorile din multimea

(valoarea 1 fiind pentru fontul cel mai mic si valoarea 7 – pentru fontul cel mai mare)

culoare se precizeaza prin nume sau prin RGB

font poate fi un font generic din multimea

Semantica:

Eticheta (Tag-ul) basefont este valabila pana la sfarsitul paginii sau pana apare urmatoarea eticheta <basefont>.

In cazul in care eticheta <basefont> lipseste , textul din pagina Web are atributele prestabilite si anume:

            size=3,

            color=”black”

            style=”Times New Roman”

Marginile paginii Web

Se face cu ajutorul a doua atribute ale etichetei <body>:

  • leftmargin – distanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a continutului paginii
  • topmargin – distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii

Valorile care se pot atribuii celor doua atribute sunt :

  • numere intregi pozitiv, care indica distanta dintre continutul ferestrei si fereastra browserului, distanta masurata in pixeli
  • un procent, ce reprezinta procent din latimea, respectiv, inaltimea ferestrei browserului

Stilurile blocurilor de text

Stiluri fizice

Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web.

Caractere: ingrosate (tag-ul b), cursive (tag-ul i)

Un bloc de text apare ingrosat in pagina daca este inclus intre <b>  text  </b> .

Un bloc de text inclus intre etichetele <i> text </i> este scris cu caractere cursive.

Caractere: marite (tag-ul big), micsorate( tag-ul small),

Un text inclus intre etichetele <big> text </big> este scris cu caractere mai mari cu o unitate decat dimensiunea curenta.

Un text inclus intre etichetele <small> text  </small> este scris cu caractere mai mici cu o unitate decat dimensiunea curente.

Caractere:„indice superior” si „ indice inferior”

Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele <sub> si </sub>.

Secventele de text aliniate ca indice superior (super-script) sunt incluse intre etichetele <sup> si </sup>.

Caractere: subliniate si  sectionate

Eticheta de tip bloc <u> text </u> insereaza un bloc de caractere subliniate.

Eticheta <strike> si </strike> sau <s> si </s> insereaza un bloc de caractere sectionate la mijloc cu o linie orizontala.

Stiluri logice

Stilurile logice sunt bazate pe cele fizice. Modul lor de actiune depinde de browserul utilizat.

Blocuri de caractere evidentiate

Urmatoarele doua etichete pun in evidenta  prin stilul cursiv fragmente de text:

<cite> text </cite> (“cite” = citat)

<em> text </em> (“emphasize” = a evidentia)

Aceste doua etichete sunt echivalente cu eticheta <i> …</i>.

Blocuri de caractere monospatiate

Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospatiate de tipul celor utilizate de o masina de scris.

<code> text </code> (“code” = cod sau sursa)

<kbd> text </kbd> (“keyboard” = tastatura)

<tt> text </tt> (“teletype” = teleprinter)

Configurarea fonturilor

Un font are urmatoarele atribute:

  • culoarea                       - se stabileste cu atributul “color”
  • tipul sau stilul    -           - se stabileste cu atributul “face”
  • marimea                       - se stabileste cu “size”
  • marimea in puncte tipografice (este stabilita prin atributul „point-size”)
  • grosimea                       - se defineste cu atributul “weight”

Culoarea fontului

Pentru a scrie un text cu o anumita culoare se incadreaza acest text intre delimitatorii

<font> text</font> in felul urmator:

Sintaxa:

<font color = culoare>text de culoarea specificata </font>

Familia fontului

Tipul de font se stabileste prin atributul “face”  al etichetei <font>.

Fonturile pot fi separate prin virgula.

Cele cinci familii generice de fonturi sunt:

  • serif
  • sans serif
  • cursive
  • monospace
  • fanatasy

Pot fi utilizate si alte fonduri specifice cum ar fi:

  • Times (tip particular de font serif)
  • Helvetica (tip particular de font sans serif)
  • Arial
  • Courier (tip particular de font monospace)
  • Western (tip particular de font fantasy) , etc.

Exemplu:

<font face=”Arial, serif, monospace”>.

Browserul va utilize primul font pe care il recunoaste.

Marimea fontului

Marimea fontului se indica cu atributul “size” al etichetei <font>.

Acest atribut poate lua urmatoarele valori:

  • 1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font);
  • -1, -2, -3, etc. pentru a micsora dimensiunea fontului cu -1, -2 … fata de dimensiunea curenta;
  • +1, +2, +3, etc. pentru a mari dimensiunea fontului cu +1,+2,.. fata de dimensiunea curenta;

O alta metoda de stabilire a marimii unui font este prin utilizarea atributului „point-size” al etichetei  <font> si reprezinta marimea fontului in puncte tipografice. Acest atribut poate lua ca si valori orice numar natural pozitiv.

Atributul “point – size” functioneaza numai cu Netscape Comunicator.

Grosimea unui font

Grosimea poate fi definita cu cu atributul “weight” al etichetei <font>.

Valorile pe care le poate lua atributul weight sunt: 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 – fontul cel mai subtire, 900 – fontul cel mai gros)

Blocuri de texte

a)      Inserarea unei adrese

Inserarea unei adrese se face cu ajutorul etichetei <address> … </address>. Textul este afisat cu caractere cursive.

b)      Indentarea unui bloc de text

Un bloc de text indentat este un bloc de text la care marginea din stanga a textului este deplasata la o anumita distanta de marginea paginii.

Blocuri <div>

Delimitarea si formatarea unui bloc de text se face cu delimitatorii <div> text</div>.

Blocul <div> are urmatoarele atribute :

  • “align” (aliniere).

Valorile atributului “align” sunt:

§          “left”                  – aliniere la stanga

§          “center”            – aliniere centrala

§          “right”               – aliniere la dreapta

Blocul <div>text </div> are posibilitatea sa includa si alte subblocuri.

Atributul “align” are efect asupra tuturor subblocurilor incluse in blocul <div>.

  • “nowrap” care permite intreruperea randurilor acolo unde este precizat acest lucru.

Blocul preformatat

Etichetele <pre> … </pre> permit pastrarea caracteristicilor textului asa cum a fost introdus in fisier, deci ia in considerare caracterele “spatiu”, “tab” si “CR/LF” (enter la sfarsit de linie).

Blocul <pre> </pre> poate fi folosit pentru a insera randuri vide.

Caracterul spatiu, pentru a putea fi luat in considerare trebuie precizat prin „&nbsp”.

Blocuri paragraf  (tag-ul <p>)

Trecerea la o linie noua se face cu eticheta <br>, (br de la break=pauza).

La fel si eticheta <p> face trecerea la o linie noua, dar eticheta <p> permite:

  • inserarea unui spatiu suplimentar inainte de blocul paragraf.
  • inserarea unui spatiu suplimentar dupa blocul paragraph;.
  • alinierea textului cu ajutorul atributului “align”, cu valorile “left”, “center” sau “right”

Blocuri de titlu

Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi introduce cu tag-ul <hx> text </hx> unde x poate lua valori din multimea

Exemplu:

<h3>…(bloc de text)…</h3>

Se accepta atributul align de catre aceste etichete  pentru alinierea titlului blocului de text la stanga (modul prestabilit), in centru  si la dreapta.

Tag-ul  <h1> scrie titlul cu caracterele cele mai mari si cele mai ingrosate.

Tag-ul  <h6> foloseste caracterele cele mai mici.

Linii orizontale

Se pot insera linii orizontale intr-o pagina web cu ajutorul etichetei <hr>.

Configurarea unei linii orizontale

Atribute ale etichetei <hr> sunt:

  • “align” - permite alinierea. Valori posibile: “left”, “center”, “right”.
  • “width” - permite alegerea lungimii liniei. Valori posibile:
        • numere intregi pozitive care reprezinta lungimea liniei, in pixeli;
        • numere intre 1 si 100 urmate de semnul %; reprezinta procentul din latimea paginii pe care se intinde linia;
  • “size” – permite alegerea grosimii liniei. Valorile posibile sunt numere intregi pozitive reprezentand grosimea liniei in pixeli (valoarea prestabilita este “2”);
  • „noshade” – defineste o linie fara umbra;
  • “color” – permite definirea culorii liniei

Tabele

Un table se insereaza intre etichetele <table> si </table>.

Pentru inserarea unui rand intr-un tabel se folosesc etichetele <tr> si </tr> (tr = “table row”)

Coloanele sunt introduce pe rand pe cite-o linie cu tag-ul <td>. si </td> ( td = “table data”).

Chenarul unui table se introduce cu atributul border din tag-ul table. In mod implicit un tabel nu are chenar. Titlul unui table se introduce cu tag-ul <caption> text </caption>.

Atribute  importante ale tag-ului <table>, astfel pentru a :

  • alinia un table se foloseste atributul align cu valorile posibile: “left” (valoarea prestabilita), “center” si “right”.
  • adauga chenar unui tabel se utilizeaza atributul “border” care ia ca valoare orice numar intreg (inclusiv zero) si reprezinta grosimea in pixeli a chenarului tabelului.

Observatii:

Valoarea prestabilita a grosimii chenarului tabelului este de 1 pixel.

Daca valoarea grosimii chenarului este egala cu 0, atunci nu avem chenar.

Chenarul are un aspect tridimensional.

Cateva exemple de creare a unor tabele:

  • Un tabel fara chenar

  • Un tabel cu chenar

Alinierea tabelului in pagina de Web

Precizarea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu atributul “bgcolor”.

Culoarea de fond poate fi atasata intregului tabel prin eticheta <table>.

Culoarea de fond poate fi atasata unei linii de  tabel prin eticheta <tr>.

Culoarea de fond poate fi atasata unei celule de  tabel prin eticheta <td>.

Atentie:

Daca avem definite mai multe atribute bgcolor, se vor lua in considerare in ordinea : <td>, <tr>, <table>. Tag-ul  <table> are prioritatea cea mai mica.

Culoarea textului din fiecare celula se indica in tag-ul < font > text </font>

<font color=”valoare”>…</font>

Dimensionarea celulelor unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului “cellspacing” al etichetei „table”. Valorile lui „cellspacing” pot fi numere intregi pozitive, inclusiv 0. Valoarea prestabilita este 2.

Distanta dintre marginea unei celule si continutul ei se definieste cu atributul “cellpadding” al etichetei <table>. Valorile lui „cellpadding” pot fi numere intregi pozitive. Valoarea prestabilita este 1.

Dimensionarea unui tabel

Dimensiunile unui tabel – latimea si inaltimea – se stabilesc cu atributele “width”, “height” ale etichetei <table>.

Aceste atribute pot lua valorile:

numere intregi pozitive, reprezinta latimea, respectiv inaltimea in pixeli a tabelului.

numere intregi intre 1 si 100, urmate de semnul %, reprezinta o fractiune din latimea, respectiv inaltimea, totala a paginii.

Imagini

Formatele acceptate de browsere pentru fisierele de imagini sunt:

  • GIF (Graphics Interchange Format) – extensia .gif
  • JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
  • BMP (BitMap) cu extensia  .bmp (este intalnita numai cu browserul Internet Explorer, etc.

Inserarea intr-o pagina Web a unei imagine se face utilizand eticheta <img> cu atributul “src”, iar valoarea acestui atribut este adresa URL a imaginii.

Daca se doreste adaugarea unui chenar in jurul imaginii se foloseste atributul border al etichetei <img> care poate lua valori numere intregi pozitive.

Dimensiunile unei imagini pot fi modificate prin intermediul atributelor “width” si “height” ale etichetei <img>.

Acestea pot avea ca si valori :

  • numere intregi positive ce reprezinta numarul de pixeli
  • numere de la 1 la 100 urmate de %, reprezinta procente din latimea, respectiv din inaltimea blocului  in care se afla imaginea.

Precizarea dimensiunilor spatiului ocupat de o imagine duce la la cresterea vitezei de incarcare a paginii.

Alinierea unei imagini in pagina Web

Alinierea se face prin intermediul atributului “align” al etichetei <img>, care ia valorile:

  • “left” – aliniere la stanga

§          “right” – aliniere la dreapta

§          “top” – aliniere deasupra .Partea de sus a imaginii se aliniaza cu partea de sus a

textului ce precede imaginea.

  • “middle” – aliniere la mijloc
  • “bottom” sau “baseline” – aliniere la baza

Alinierea textului in jurul unei imagini

Se face cu atributele “hspace” si “vspace” ale etichetei <img> care precizeaza distanta in pixeli pe orizontala si pe verticala, dintre imagine si elementele din pagina.

Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului “background” al etichetei <body> care ia ca valoare adresa URL a imaginii.

Imagini ca legaturi

Imaginea trebuie sa apara ca element de legatura in cadrul tagulul <a> imagine </a>

Legaturi(Link-uri)

Cu ajutorul legaturilor, un text obisnuit se transforma in hipertext  sau hipermedia.

Legaturile sunt zone active intr-o pagina Web.

Paginile Web sunt interactive deoarece au un raspuns la actiunile care sunt initiate de cei care le utilizeaza.

Legaturile in pagina html se insereaza cu ajutorul etichetei speciale <a> si a atributului „href” care ia ca valoare adresa URL a resursei solicitate.

Cand mouse-ul este deasupra unei zone active, el ia forma unei maini. Calculatorul client expediaza cererea , primeste resursa pe care a solicitat-o pe care o va incarca in browser.

In acelasi browser, pagina noua va fi inlocuita de cea veche.

Alegerea intre doua pagini

Link catre un site

Legatura catre o ancora din acelasi document.

Acest lucru se realizeaza utilizand perechea de tag-uri:

<a  href=”#eticheta”> SALT </a>

<a name = “etic> AICI am facut SALT</a>

Ancora aflata in alt document

O pagina noua intr-o fereastra noua

Stabilirea culorilor pentru legaturi

Se utilizeaza trei culori pentru legaturi:

  • o culoare pentru legaturile nevizitate
  • o culoare pentru legaturile vizitate
  • o culoare pentru legaturile active

Acestea se stabilesc cu atributele:

  • ”link” pentru legaturile nevizitate
  • „vlink” pentru legaturile vizitate
  • „alink” pentru legaturile active

Formulare

Despre formulare

Formularele HTML sunt cele mai frecvent utilizate pentru a colecta informatii de la persoane care viziteaza site-ul. Un formular este un ansamblu de zone active alcatuite din butoane de apasat, casete de selectie, campuri de editare si altele.

O sesiune de lucru cu cu o pagina Web ce contine un formular cuprinde urmatoarele etape:

  1. Se completeaza formularul care se transmite unui server;
  2. O aplicatie dedicata de pe server analizeaza formularul completatsi eventual se stocheaza datele intr-o baza de date.
  3. Eventual serverul expediaza un raspuns utilizatorului.

Tag-ul <form >

Un formular este delimitat de tag-ul <form>.descriere formular</form>.

Intre tag-ul de intrare si cel de iesire sunt inserate, in principal controalele formularului.

Principalele atribute ale tag-ului form sunt:

·          action

·          method

·          enctype

·          target

 

Form-ul are 2 atribute importante: action si method.

Sintaxa:

<form  action =  valoare_a   method = valoare_m> ……</form>

unde:

- valoare_a poate lua ca si valoare:

·          adresa URL a unui adresa URL a unui script aflat pe server, care primeste datele formularului , se face o prelucrare a datelor si expediaza un raspuns utilizatorului daca e cazul

·          adresa de mail , caz in care datele formularului sunt transmiseprin posta electronica

Exemplu: action =   www…/…”

                                                  

                                                 Script

Exemplu: action = “mailto: livia.sangeorzan@yahoo.com”

- valoare_m poate lua 2 valori:

·          get este valoare implicita(datele din formular se adauga la adresa URL specifcata in action);

·          post (datele sunt expediate separat; se foloseste cand sunt transmise cantitati mari de date ).

Tag-ul <input>:

Pentru a crea diferite butoane sau casete se foloseste tag-ul <input>

Sintaxa:

<input  type =           name =            value =        >

unde

type                  poate lua valorile urmatoare

·      text

·      radio ( atributul checked selecteaza la prima activare a paginii butonul);

·      checkbox;

·      submit – trimite

·      reset – sterge (reseteaza);

·      password – parola (cand scriem se vad asterixuri, dar la server(destinatar)se vede totusi parola decodificata).

name                este  numele atasat casetei sau butonului . Nu reprezinta continutul butonului

sau casetei. continutul

value                 ce apare scris pe buton sau continutul castei sau in cazul butoanelor radio

numele butoanelor care fac parte din aceiasi familie.(continutul);

Alte atribute ale tag-ului input: -size -     specifica latimea campului de editare;

                                                  -maxlenght -   specifica maximul de caractere.

Daca intr-un input lipseste atributul type, rezulta implicit type = text.

Limbajul JavaScript va recunoaste butoanele dupa name.

Liste de selectie <select>    <option >….     </select>

O lista de selectie permite alegerea unuia sau mai multor elemente dintr-o lista finita.

Are 2 atribute importante : name si size.

Elementele dintr-o lista se introduc cu tag-ul <option>.

Sintaxa:

<select name = nume  size =  numar>

<option value =  valoare_1 selected> Element_1

<option value = valoare_2 > Element_2.

<option value = valoare_3> Element_3

</select>.

unde:

            name -              numele listei de selectie

            size -                este un numar intreg pozitiv, precizeaza cate elemente din lista sunt

vizibile la un moment dat

            <option >         este tag-ul care include elementele listei. Server-ul primeste perechea

Continutul din value si valoarea dupa option

            selected            permite selectarea prestabilita a unui element al listei

Lista de selectie cu selectii multiple

Are aceiasi sintaxa cu lista de selectie descrisa mai sus, dar in plus are atributul multiple in tag-ul select.

Campuri de editare multiple

Se fac cu tag-ul <textarea >

Sintaxa:

<textarea liste de atribute> text </textarea>

Din lista de atribute enumeram:

·          cols (nr de caractere afisate intr-o linie),

·          rows (nr de linii afisate simultan),



·          name (permite atasarea unui nume),

·          wrap care determina comportamentul campului de editare fata de sfarsitul de linie. Atributul poate lua valorile: off, hard, soft..

 

 

Intre tag-ul de intrare si cel de iesire ale formularului sunt inserate, in principal, controalele formularului. Un control este o forma de interactiune a utilizatorului cu formularul. Putem prezenta conform tabelului de mai jos principalele controale intr-un formular HTML prezentate mai sus:

CONTROL

ACTIUNE A UTILIZATORULUI

TAG

text

Introducere a unui text de volum redus

Input

password

Introducere a unui text de volum redus, care apare, pe ecran, mascat cu '*'

Input

submit

Activare (pentru a transmite informatiile completate de utilizator)

Input

reset

Activare (pentru a restabili valorile initiale ale tuturor controalelor formularului)

Input

checkbox

Bifare

Input

radio

Bifare

Input

textarea

Introducere a unui volum mare de text

Textarea

menu

Alegere a unei optiuni dintr-un meniu

Select option

Harti de imagini

O imagine poate fi folosita ca si zona activa. In acest caz imaginea se insereaza in documentul HTML intre etichetele <a> si </a>.

Exista insa posibilitatea de a crea harti de imagini („image maps”) care permite ca diferite zone ale unei imagini sa fie definite drept legaturi catre diverse pagini WEB.

Crearea unei harti de imagini presupune trei etape:

  • Definirea unei imagini ca harta de imagini. Se v a utiliza tag-ul <img> cu atributele src si usemap. Numele dat pozei in usemap, precedat de semnul#, se  va regasi obligatoriu in tag-ul map, in atributul name..
  • Definirea hartii in interiorul unui bloc special definit cu tag-ul <map> si </map>. Tag-ul are un atribut obligatoriu si anume „name”, care primeste ca si valoare numele hartii ( numele din usemap);
  • Crearea zonelor pe harta. Fiecare zona se introduce cu eticheta <area>.

 Eticheta <area> are trei atribute obligatorii:

1.      „shape” care poate lua una din valorile:

·           „rect” (pentru zone de forma dreptunghiulare);

·          „circle” (pentru zone de forma circulara);

·          „poly” (pentru zone de forma poligonala);

·          default” (pentru portiunile imaginii care nu se incadreaza in nici una dintre categoriile anterioare)

2.      „coords” determina coordonatele zonei

3.      href primeste adresa URL a paginii indicate de legatura zonei respective.

Valorile atributului „shape”:

·           rect coords=”x1,y1,x2,y2” – dreptunghi unde (x1, y1) este coordonata coltului stanga sus si (x2, y2) este coordonata coltului dreapta jos.

·          circle coords=”x1, y1,r” – (x1,y1) este centrul cercului de raza r.

·          Poly coords=”x1,y1,x2,y2,xn,yn” – poligonul cu varfurile de coordonate (x1,y1), (x2,y2), (x3,y3),.

Pentru obtinerea automata a coordonatelor se poate folosi programul MAP This, program care defineste regulile pentru o imagine .gif sau .jpeg. Programul este freeware si se poate descarca de pe Internet.

Evenimentele „onfocus” si „onblur”

O pagina poate contine mai multe elemente prin care putem introduce date. Daca introducem un sir de caractere intr-un camp de editare spunem ca respectivul element primeste focusu-l.

  • Evenimentul onfocus are loc atunci cand un element primeste focus-ul;
  • Evenimentul onblur are loc cand elementul pierde focusul.

Elementele care primesc focus-ul au doua metode importante:

  • metoda onfocus() atribuie focus-ul elementului
  • metoda onblur() face ca elementul sa piarda focusul.

Exemplu :Intr-o caseta trebuie sa se introduca un text, in cazul in care se face click, fara a introduce ceva, apare un mesaj, prin care se cere reintroducerea unei valori. Nu putem pleca masi departe pina cand nu am introdus ceva.


Reguli CSS ( Foi de stil in cascada)

CSS este un acronim pentru Cascading Style Sheets (foi de stil in cascada). CSS este utilizat la imbunatatirea prezentarii unei pagini Web (adica a modului in care browser-ul o afiseaza). CSS permite stabilirea proprietatilor pentru elementele HTML utilizand o gama uriasa de valori. Avand la dispozitie mai mult de 100 de proprietati, CSS este un instrument avansat destinat proiectantilor Web pentru crearea de site-uri profesionale, care nu pot fi construite folosind atribute HTML obisnuite. In CSS exista posibilitatea sa se aseze elementele in pozitiile dorite (alta decat cea in cazul fluxului normal). 

In mod normal definitiile stilurilor sunt introduce in “foi de stil” (style sheet).

Stilurile au fost introduce in versiunea HTML 4.0.

Exista doua modalitati de a defini un stil prin:

·          sintaxa CSS (Cascading Style Sheets);

·          sintaxa limbajului JavaScript.

Una din caracteristicile fundamentale ale CSS este faptul cǎ autorul poate atasa un stil, iar cititorul paginii respective poate atasa altul, deci se obtine un set de reguli in cascada. In acest caz existǎ un set de reguli de prioritate care va decide care regulǎ se va aplica.

Exista 4 tipuri de stiluri CSS.

Ordinea de utilizare a stilurilor este urmatoarea:

1                    stilul implicit al navigatorului (browser default);

2                    foi de stil externe (External style sheets);

3                    foile de stil interne ( din interirul elementului head)

4                    stiluri specificate in marcajul de start al unui element HTML (inline style).

Structura unei reguli CSS

O regulǎ este formatǎ din douǎ pǎrti principale: selectorul si declaratia.

Declaratia se afla intre elementul “”, la randul ei, declaratia este formatǎ tot din douǎ pǎrti: proprietatea si valoarea.

H1

In exemplul anterior H1 este selectorul, declaratia cu proprietatea color si valoarea blue.

In blocul <style></style> avem regulile CSS definite ca mai sus.

Deci definim mai intai, clasa de stiluri in interiorul blocului <style>…</style> care se poate afla in blocul <head></head>.

Integrarea regulilor CSS intr-un fisier HTML 

<HTML>

<TITLE> Exemplu </TITLE>

<STYLE TYPE=”text/css”>

            H1

</STYLE>

<BODY>

<H1> Acest heading este verde datoritǎ unei reguli CSS </H1>

</BODY>

</HTML>

In exemplul anterior regula CSS este specificatǎ in interiorul fisierului HTML. Prin aceastǎ metodǎ modificarile in cazul fisierelor mari devin greoaie de aceea se recomandǎ scrierea regulilor intr-un fisier separat de unde sǎ fie importate in fisierul HTML. Pentru exemplificare editǎm un fisier pe care il denumim „reguli.css”. In acest fisier scriem H1 .Documentul HTML care importǎ acest regulile din acest fisier este de forma urmǎtoare:

<HTML>

<TITLE> Exemplu de import </TITLE>

<LINK REL=”stylesheet” HREF=”c:reguli.css” TYPE=”text/css”>

<BODY>

<H1> Acest heading este verde datoritǎ unei reguli importate </H1>

</BODY>

</HTML>

Gruparea selectorilor si a declaratiilor

Pentru a reduce dimensiunea fisierelor selectorii se pot grupa, separarea lor facandu-se prin virgulǎ.

H1, H2, H3, P

Asemanator se pot grupa si declaratiile:

H1

Class ca selector

O regulǎ de genul H1 se aplicǎ mereu cand apare selectorul H1 indiferent dacǎ vrem sau nu. Pentru a evita acest lucru se folosesc clasele.

Fie fisierul reguli.css, fisierul in care scriem regulile pe care le vom importa.

Sintaxa pentru definirea unei clase este urmatoarea: H1.clasa_noastrǎ

In fisierul HTML cand vrem sǎ aplicǎm regula respectivǎ scriem

 <H1 CLASS=”clasa_noastrǎ”> Heading rosu </H1>.

Dacǎ am scrie <H1> Heading obisnuit </H1> nu se va mai aplica regula CSS, deci textul „Heading obisnuit” nu va mai apare rosu.

Clasa definitǎ mai sus se poate aplica numai pentru H1.

Dacǎ am avea <P CLASS=”clasa_noastrǎ” nu se obtine nici un efect. Totusi se pot defini clase generale astfel: .clasa_doi . O astfel de clasa poate fi aplicatǎ oricarui selector care suportǎ specificarea unei culori.

ID ca selector

O constructie asemanatoare cu CLASS este ID.

Sintaxa pentru definirea unui element ID este urmatoarea:

H1#z98y .

Un astfel de ID se poate aplica numai pentru H1 in felul urmator:

<H1 ID=z98y>Wide text</H1>.

Pentru definirea unui ID care sǎ poata fi aplicat oricarui selector declaratia se face astfel: #z98y .Acest ID poate fi aplicat oricarui selector care suportǎ specificarea dimensiunii dintre litere.

Comentarii

Comentariile sunt asemanatoare cu cele din limbajul de programare C.

EM   /* un verde sǎ te doara ochii */

Pseudo-clase si pseudo-elemente

Au fost introduse pentru adaugarea unor facilitǎti suplimentare de formatare. Pseudo-clasele si pseudo-elementele sunt recunoscute in cadrul regulilor CSS, dar nu sunt recunoscute direct in fisierul HTML.

Pseudo-clasa anchor

Aceastǎ pseudo-clasǎ permite formatarea link-urilor din cadrul unui pagini web.

A:link        /* link nevizitat */

A:visited    /* link vizitat */

A:active     /* link activ */

Prin aceste reguli toate link-urile din pagina HTML vor lua culorile specificate. Pseudo-clasa anchor nu are efect decat asupra selectorului A, de aceea regula: A:link are acelasi efect ca si :link .De asemenea pseudo-clasele pot fi combinate cu clasele obisnuite astfel: A.clasa_mea:link .

Pseudo-elemente

first-line

Permite specificarea unui anumit stil pentru prima linie dintr-un paragraf.

<STYLE TYPE='text/css'>

  P:first-line

</STYLE>

<P>The first line of an article in Newsweek.

Presupunand ca prima linie se terminǎ dupǎ cuvantul „an” in pagina web acest text va apare sub forma:

THE FIRST LINE OF AN

article in Newsweek.

first-letter

Asemǎnǎtor cu first-line acest pseudo-element permite specificarea unui stil pentru prima literǎ dintr-un text.

Precedenta regulilor

De multe ori se intamplǎ ca intr-un punct in cadrul unui fisier HTML sǎ fie valabile mai multe reguli CSS.Pentru a rezolva astfel de situatii trebuie stabilite niste reguli de prioritate.

`important`

`Important` este un cuvant rezervat prin care i se dǎ unei reguli CSS o prioritate mai mare decat unei reguli obisnuite.

P 

Reguli:

  1. Regula care contine `! important` suprascrie o regulǎ obisnuitǎ.
  2. Specificitatea unui selector: selectorii mai specifici ii suprascriu pe cei mai generali. Specificitatea se obtine prin concatenarea a trei numere: numǎrul de atribute ID din cadrul selectorului (a), numǎrul de atribute CLASS (b) si numǎrul de tag-uri din selector (c).

LI              /* a=0 b=0 c=1 -> specificitate =   1 */

UL LI           /* a=0 b=0 c=2 -> specificitate =   2 */

UL OL LI        /* a=0 b=0 c=3 -> specificitate =   3 */

LI.red          /* a=0 b=1 c=1 -> specificitate =  11 */

UL OL LI.red    /* a=0 b=1 c=3 -> specificitate =  13 */

#x34y           /* a=1 b=0 c=0 -> specificitate = 100 */

Pseudo-clasele sunt numǎrate ca si clasele obisnuite, iar pseudo-elementele sunt numǎrate ca si elementele obisnuite.

  1. In cazul in care douǎ reguli ajung sǎ aibǎ aceasi specificitate se aplicǎ regula specificatǎ mai tarziu.Regulile importate se considerǎ a fi inaintea oricǎrei reguli din fisierul in care sunt importate.

Stiluri in-line

Sunt definite in eticheta in care dorim sa se aplice aceste stiluri.

Valoarea lui <style = “valoare”> este cuprinsa intre ghilimele.

Stiluri definite in fisiere externe

Stilurile definite in interiorul blocului <style>…</style> pot fi scrise intr-un fisier extern, pentru a putea fi utilizate in mai multe fisiere HTML.

Se creeaza un fisier care contine descrierea stilurilor si se salveaza cu extensia .css sau .html

In fisierul HTML care utilizeaza stilurile se include in blocul <head>…</head> o eticheta <link> cu atributele:

·          „rel” cu valoarea stylesheet

·          „href” cu valoarea adresa URL a fisierului creat , care contine regulile css.

Atribute CSS

Font

·          font-family   Valoarea: nume de font. Exemple: helvetica, serif, sans-serif, cursive, monospace, fantasy, etc

·          BODY

·          font-style   Valoarea: normal | italic | oblique 

·          font-variant   Valoarea: normal | small-caps

·          font-weight   Valoarea: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900. Valoarea: normal echivaleazǎ cu 400, iar bold cu 700.

·          font-size   Valoarea: <absolute-size>|<relative-size>|<length>|<percentage>

·          <absolute-size> poate lua una din valorile: xx-small | x-small | small | medium | large | x-large | xx-large

·          <relative-size> poate lua una din valorile: larger sau smaller

·          <percentage>

Exemple

P

H1, H2, H3

Dimensiunile pentru font-size sunt specificatǎ prin:

  1. marime absoluta, avem urmatoarele valori posibile:

·          xx-small

·          x-small

·          small

·          medium (valoarea prestabilita)

·          large

·          x-large

·          xx-large

  1. marime relativa fata de valoarea curenta, avem urmatoarele valori posibile:

·          larger

·          smaller

3.   numar intreg urmat de unitatea de masura

4.   procente din valoarea curenta.

Exemplu:

P

Dimensiunea fontului poate fi specificatǎ in centimetri(cm), milimetri(mm), pixeli(px), toli(in), puncte(pt 1pt=1/72in), etc.

1 in=72 pt=2.54 cm=6 pc

Background si culoare

·          color Valoarea culorii poate fi specificatǎ prin RGB(rosu,verde,albastru), parametrii luand valori intre 0 si 255, prin numele unei culori care este deja definitǎ (blue,green,black, etc) sau prin #nr1nr2nr3. Nr1,nr2,nr3 sunt numere de douǎ cifre in baza 16.

·          H2            H3     

·          background-color Valoarea: <color> | transparent.

·          background-image Valoarea: <url> | none

·          background-repeat Valoarea: repeat | repeat-x | repeat-y | no-repeat  Precizeazǎ dacǎ imaginea din fundal este repetatǎ sau nu.Pentru valoarea „repeat” imaginea este multiplicatǎ pe orizontalǎ si verticalǎ.Pentru valoarea „repeat-x” imaginea este multiplicatǎ numai pe orizontalǎ,iar pentru „repeat-y” imaginea este multiplicatǎ doar pe verticalǎ.

·          background-attachment Valoarea: scroll | fixed  Specificǎ dacǎ imaginea din fundal este derulatǎ odatǎ cu continutul sau nu.

Text

·          word-spacing Valoarea: normal | <lenght> (dimensiunea dintre cuvinte)

·          letter-spacing Valoarea: normal | <lenght> (dimensiunea dintre litere)

·          text-decoration Poate lua una din valorile: underline, overline, line-through, blink.

·          vertical-align Valoarea: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

·          text-transform Valoarea: capitalize | uppercase | lowercase | none

·          text-align Valoarea: left, right, center, justify

Distanta dintre randuri

Se foloseste atributul “line-height”. Valori posibile:

·          valoarea “normal”

·          factor de scala

·          prin lungime

·          prin procente din valoarea curenta a fontului

Stiluri pentru diferite medii

Se stie ca un text afisat pe monitor cu culoarea galbena se vede foarte slab cand este tiparit la o imprimanta alb-negru. Aceasta deficienta poate fi corectata daca se utilizeaza stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil este specificat prin atributul media al elementului <style>, care poate lua urmatoarele valori posibile:

·          “screen” (pentru monitoare)

·          “print” (pentru imprimante)

·          “projection” (pentru proiectoare video)

·          “braille” (pentru terminale destinate nevazatorilor)

·          “speech”  (pentru terminale audio)

·          “all” (pentru toate tipurile de medii)

Exemplu

<html><head><title> Exemplu MEDIA</title>

<style type-“text/css” media=”screen”>

p

</style>

<style type=”text/css” media=”print”>

p

</style>

</head><body>

<p> Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la imprimare.

</body></html>

Configurarea blocurilor de text

Dimensiunile unui bloc:

Un bloc este format din:

·          continut

·          distanta dintre continut si chenar

·          chenar

·          margini

Marginile blocului

Marginile unui bloc reprezinta distanta minima dintre chenarele a doua blocuri vecine. Pentru a stabli marginile unui bloc se utilizeaza atributul:

·          margin-left

·          margin-right

·          margin-top

·          margin-bottom

·          margin.

Daca sunt indicate valori separate prin spatiu acestea reprezinta dimensiunile in  ordinea urmatoare: sus, dreapta, jos, stanga.

Dimensiunile care lipsesc preiau valorile de la elementele opuse.

Daca este data o singura valoare aceasta va fi folosita pentru toate directiile.

Valorileposibile ale acestor atribute sunt:

·          “auto”

·          marime(numar urmat de o unitate de masura)

·          procent din latimea paginii(numar intreg intre 0 si 100, urmat de simbolul%)

Observatii: Valorile mentionate anterior pot fi si negative

Distanta dintre continut si chenar

Cu ajutorul atributelor de mai jos se stabileste distanta dintre continutul unui bloc(text, imagini, etc) si chenarul acestuia .

Atribute:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding

Valori posibile ale atributelor sunt:

Marimea (numar intreg pozitiv)

Procent din latimea paginii

Latimea chenarului

Atribute:

·          Border-top-width

·          Border-right-width

·          Border-bottom-width

·          Border-left-width

·          Border-width

Valori posibile:

·          “thin”, “medium” sau “thick”

·          Numere intregi pozitive urmate de o unitate de masura

Stilul chenarului

Cu ajutorul atributului “border-style”.

Valori posibile:

  • “none” (valoarea prestabilita)
  • “solid”  (continuu)
  • „double” (linie dubla)
  • “inset” (chenar 3D)
  • “outset” (chenar 3D) etc.

Culoarea chenarului

Cu ajutorul atributului “border-color”.

Valori posibile:

·          “none” (niciuna)

·          un nume de culoare (aqua, red, blue, etc.)

·          specificatie numerica de tip RGB

·          functia (r, g, b) cu valori intre 0 si 255

·          functia (r, g, b) cu procente  intre 0% si 100%


Exemplificam utilizarea regulilor CSS :

Stil definit in sectiunea head.

Stil definit in sectiunea head

Stiluri identificate“id”

Stil inline

Stil definit in fisier extern

Exemplu pentru font

Culoarea fontului pentru tag-urile p, b, h1

Culoarea fondului textului

Imagine cu stil

 

Distanta dintre randuri

Font-weight

Exemple cu chenare:


JavaScript

Limbajul JavaScript a fost realizat de firmele Netscape si Sun si a fost conceput ca un limbaj care extinde posibilitatile de lucru ale HTM-ului. Limbajul conlucreaza cu HTML-ul.

Carateristici ale limbajului JavaScript

·          In JavaScript se scriu secvente de program numite scripturi.Majoritatea acestor secvente sunt alcatuite din functii, care raspund anumitor evenimente.

·          In JavaScript NU se citesc si NU se scriu fisiere;

·          JavaScript este un limbaj interpretat. Asta inseamna ca browserul preia o instructiune , o executa , apoi preia o alta instructiune  o executa, s.a.m.d.

·          JavaScript este un limbaj care utilizeaza obiecte;

·          In JavaScript seface distinctie intre literele mari si literele micui, adica este case sensitive”. “

·          Erorile de sintaxa se depisteaza greu, drept urmare se poate folosi functia alert ( ).

·          Foloseste din sintaxa lui C++ si a limbajului Java

·          JavaScript lucreaza cu functii definite de programatori sau cu/si functii predefinite

 

Exista trei modalitati de a introduce intr-un document HTML , si anume:

·          Scriptul se scrie in head; .<script language=”JavaScript” > si</script>;

·          Scriptul se scrie in body; .<script language=”JavaScript” > si</script>;

·          Scriptul apare ca si fisier extern cu extensia js, deci “nume.js”;

<script src = “nume.js ”> si</script>

Limbajul JavaScript

Tipuri de date si variabile

In JavaScript exista urmatoarele tipuri de date : tip sir; tip numar intreg; numar intreg in baza 10, 8 sau 16.

O variabila se poate declara cu particular “var”.

O variabila poate primi orice valoare, nu se declara tipul ei.

Operatori aritmetici  : +, -, * /, %    

                                       ++ ,-- , + (operator unar), - (operator unar)

Operatori relationali : <, <=, >, >=

Operatori de egalitate  = = pentru test egalitate

                                       !=    pentru test inegalitate

Operatori logici              !   (negarea logica)

                                        ‌ ‌||  operatorul logic “sau” (este operator binar): daca cel putin unul

                                          din operanzi este true, rezulta  true, altfel rezultatul este false

                                         &&  operatorul logic “si”

Operatori logici pe biti << ,>> operatori de deplasare

                                         & -   “si” pe biti

                                          ‌|  -  “sau” pe biti

                                         ۸  - “sau exclusiv” pe biti        

                                         ~  - “negarea pe biti”- are rolul de a inversa continutul bitilor      

Operatorul ‘,’ (virgule)

Operatorul conditional : exp1 ? exp2:eexp3;

Operatorul de concatenare

Operatorul de concatenare pentru siruri este +

Instructiuni

Instructiunile urmatoare au aceiasi sintaxa si semantica ca si in limbajul Java:

·          IF

·          Compusa ( )




·          Switch;

·          While;

·          Do While

·          For

Functii predefinite

·          alert ( “mesaj”) – afiseaza o caseta  in care se afiseaza “mesaj”

·          confirm( “mesaj” – caseta afiseaza date de tip sir. Utilizatorul poate apasa butonul OK , caz in care se returneaza true , sau Cancel, caz in care se returneaza false

·          prompt ( sir_afisat, sir_asteptat) –caseta afiseaza sir_afisat si asteapta introducerea valorii in sir_asteptat. Sir_asteptat poate fi initializat cu zero.

·          escapes(s)

·          eval(s) - s e un String, care contine operatii matematice (d. ex.:.“2+4“). Functia returneaza rezultatul acestei operatii, in acest caz 6. Daca nu este vorba despre o expresie calculabila, atunci se returneaza un mesaj de eroare.

·          isFinite(n) - decide daca nr. n este finit

·          isNaN(x) - Verifica daca valoarea x este un nr. valabil (not-a-number). Functia returneaza valoarea true, daca x e un nr.

·          Number(x) - Converteste continutul obiectului x in nr. si il returneaza

·          parseInt (sir) – converteste un sir catre un intreg. Conversia se face pina cand este intilnit un character care nu este cifra;

·          parseFloat(sir) - converteste un sir catre o valoare reala. Conversia se face pina cand este intilnit un character care nu este cifra. Punctul este virgule zecimala.

In JavaScript putem introduce un text in mod dinamic.

In JavaScript putem introduce si tag-uri HTML.

De exemplu putem scrie: document.write(“<b>”+ text + “</b>”).

Exemplificari utilizand JavaScript:

Aplicatie_1:

           

Aplicatie_2:


Legatura intre limbajul JavaScript si elementele dintr-un formular

Pornim de la o aplicatie concreta, fie un formular care are structura conform imaginii de mai jos:

 

JavaScript recunoaste elementele din pagina WEB in doua moduri:

  • dupa atributul name al fiecarui tag, incepand cu tag-ul <form> si continuand cu elementele acestuia;
  • dupa numele implicit alocat elementelor din pagina. Elementele de acelasi fel sunt stocate intr-un vector (array [ i] ) a carui index incepe cu valoarea zero.

Pentru formularul de mai sus JavaScript creaza o structura arborescenta conform pozitiei ocupata de fiecare element in pagina. Pagina se numeste document.

Astfel structura arborescenta arata astfel:

                                   document

           ________________│_______________________________

                                                                                                 

images [0]                       forms[0]                  links[0]                images[1]

                        __________│_________

                                                              

                elements[0]  elements[1] elements[2]

Intr-un document HTML pot crea mai multe formulare, acestea se vor numi implicit forms[0], forms[1],…etc.

Elementele fiecarui formular vor fi denumite elements[0], elements[1],…etc.

Imaginile dintr-o pagina vor fi numerotate incepind cu prima imagine din pagina cu numele images[0], images[1],…etc.

Link-urile dintr-o pagina vor fi si ele numerotate incepand cu indexul 0 cu numele links[0], links[1],…etc.

Pentru a acesa primul element din formular vom scrie una din urmatoarele secventa in JavaScript:

1.        document . forms [0]. elements[0]           

2.        document.f1.nume – aceasta expresie se foloseste in cazul in care formularul este descries conform secventei de cod de mai jos:

<form name='f1'>

Imagine_1 <br><img src=c:CURS_WEB_ID_FINALs.jpg> <br>

Nume&nbsp&nbsp&nbsp&nbsp&nbsp:<input type ='text' name='nume' value=''><br>

Prenume :<input type ='text' name='prenume' value=''><br>

<input type='submit' value='   OK  ' ><br><br><br>

Imagine_2 <br><img src=c:CURS_WEB_ID_FINALs.jpg>

<br><br> <a href='l.html'> <i>WWW.GOOGLE.COM </i></a>

</form>


Eventhandler

Handler-ele de evenimente sunt introduse in <form> ca atribute suplimentare in tagurile HTML. Ca valoare pentru aceste atribute, sunt date instructiuni JavaScript, care trebuie executate. Handler-ele de evenimente se recunosc dupa numele lor. Acestea incep, de exemplu, cu onClick.

Fie urmatorul exemplu:

Sa se scrie un text „ANTETUL MEU” folosindu-se culoarea verde. Cand se trece cu mous-ul deasupra acestui cuvant acesta sa se transforme in cuvantul ANTET! scris cu negru.

Totodata sa se scrie un text in caseta care apare pe ecran, iar textul scris sa fie afisat intr-o casuta alert, atunci cand se face click in afara casetei , pe ecran.

Solutia este data in figura de mai jos.

 

Aplicatie folosind Eventhandler


Obiecte

In limbajul JavaScript sunt multe obiecte predefinite; acestea dispun de proprietati si metode specifice, care se pot folosi direct. In exemple sunt folosite obiectele window si document, impreuna cu metodele lor, fara ca acestea sa fie specificate explicit.

Obiectele sunt ordonate intr-o structura ierarhica, la varful ei afandu-se obiectul window. Si descrie fereastra actuala a browserului. Pe treapta urmatoare se afla obiectul document, care descrie continutul paginii. Pe treapta urmatoare se afla obiectul form. Pe langa aceste obiecte, exista o serie de alte obiecte.

Pentru a putea folosi un obiect, trebuie ca acesta sa fie mai intai creat cu ajutorul cuvantului cheie „new” (vezi limbajul Java). Astfel pot fi apelate ulterior diferite proprietati si metode.

Aplicatie:

Sa se creeze un obiect Data  si sa se foloseasca o metoda a acestui obiect (de ex. :getDate(), pt a se afla ziua curenta).

Codul sursa este si efectul pe ecran

 


Obiectul window

Obiectul Window corespunde ferestrei curente din browser si cu ajutorul lui se pot afla / modifica proprietatile ferestrei. Exista posibilitatea de a deschide ferestre noi.

Obiectul window este cela mai de sus obiect din ierarhia obiectelor JavaScript. Corespunde ferestrei curente din browserul web. Prin acest obiect se pot afla prorietatile ferestrei curente. Exista si posibiltatea de a deschide ferestre noi. Asa-numita „fereastra principala” a browserului web se poate apela prin numele rezervate „window” sau „self”.

Proprietati ale obiectului window:

Aplicatie_1:

Aplicatie_2

Metode prin care se poate apela obiectul window:

Direct din acest obiect sunt derivate obiectele document, event, history u. location.

Obiectul location

Obiectul location ne da adresa HTML-ului local. Cand o pagina este incarcata (de exemplu  http://www.xyz.com/page.html) atunci  location.href contine adresa . Pentru location.href ii putem atribui noi o adresa.

Acest buton  “button ” aduce o noua pagina in fereastra actuala (Window)

Aplicatie_3

Obiectul document

Acest obiect se refera la continutul unei ferestre dintr-un browser.

In tabelul urmator sunt metodele obiectului document:

Metode care stau la dispozitie

Obiecte derivate din obiectul document:  all, anchors, applets, areas, embeds, forms, images, layers, links, plugins.

Aplicatie:

 

Obiectul forms

Acest obiect pune la dispozitie metode si proprietati care permit accesul la un formular definit in interiorul unui fisier HTML

Accesul la un formular se poate face prin 3 metode:

1.   prin numele formularului - <form name=“FormNAME“>

                                                Acces : document.FormNAME.reset()

  1. prin indexul formularului. Primul formular primeste 0 etc.

Acces : document.forms[4].reset()

  1. Prin numele formularului ca indicator al indexului. Numele se da cu atributul name din tagul <form>

Acces : document.forms[„FormNAME“].reset()

Aplicatie complexa :

Obiectul image

Acest obiect se afla in ierarhie sub obiectul document. se refera la proprietatile imaginii introduse in HTML. Aceste proprietati pot fi modificate in interiorul unui fisier HTML.

Obiectele image se pot apela in felul urmator:

1.                  Folosirea unui index. Prima imagine primeste nr. 0.

document.images[0].src

2.                  Prin numele imaginii din tagul img

<img name=“BILD“ src=“t.jpg“>

document.BILD.src

Pe langa metoda handleEvent(), care este interpretata numai de Netscape Navigatorobiectul-image contine si alte metode proprii.

Obiectul date

Se foloseste pemtru calcularea datei si a orei/timpului. Un obiect date se poate face in felul urmator:

 <script language=“JavaScript“>

Function simpleDate()

</script>

Obiectul navigator

Contine informatii despre browser si se poate folosi pentru a adapta mai bine scriptul fiecarui browser in parte.

 

Obiectul navigator spune, prin metoda javaenabled(), daca in browser este activat Java, astfel incat sa se stie daca se pot folosi appleturi. Daca Java este acceptat, metoda returneaza true.

Obiectul layers – (all-)

Este valabil doar pentru browsere Netscape si contine informatii despre un nivelul/layer care este accesibil unui fisier HTML.  Nivelurile/layer-ele sunt baza positionarii dinamice a elementelor in pagina. Obiectul layers este sub obiectul document in ierarhia obiectelor..

Obiectul all este accesibil numai cu browsere Explorer . Acest obiect contine proprietatile si metodele realizarii acestui concept:

Apelarea layers:

1.                  prin index, care caracterizeaza straturile. Primul nivel are index 0.

document.layers[5].above

2.                  Referentierrea prin numele layer-ului

<layer name=“Layer0“>

document. Layer0.above

Metode pentru layere

Proprietati si metode pentru obiectul all

Apelare:

  1. prin numele tagului sau identificatorului tagului si un index care contine pozitia sa. 

de exemplu: pt tagul <title>, numele este “title”. Indexul spune al catela tag cu acest nume este referit.  Primul tag are indexul 0.

Fie 3 tilturi referite prin tagul <h2>. Accesul la tagul al doilea se face astfel:

document.all.tags(„h2“)[1].innerText

  1. prin numele dat cu atributul “name”

z.B : <h2 name=“Title2“>TITLE 2 </h2>

            document.all.Title2.innerText

Exemplu de cod complet pentru o metoda care este apelata prin proprietatile browserului si care tine cont de elementele specifice browserelor Netscape si Explorer:

Function checkBrowser()

}

if(browserName ==“Netscape“)

If(isMicrosoft)

}

window.document.write(“<br> VERSION :”+browserVersion);

window.document.write(“<br> NICKNAME :”+browserNickname);

window.document.write(“<br> userAgent :”+browserInfos);

if(isNetscape)

alert(“BROWSER :  “+browserName+”n”+” VERSION  :”+browserVersion);

return;

}

Obiectul Math.

Contine constante si metode pentru a putea folosi functii matematice

Constante: PI ( numarul pi=3,14..)  E (e=2,71..).

Metode:

§          abs(x) – modulul

§          cos(x)

§          tan(x)

§          sin(x)

§          acos(x)

§          asin(x)

§          atan(x)

§          floor(x):-cel mai mare intreg mai mic  sau egal cu x. Exemplu : Math.floor(-3,73), returneaza -4.

(reprezentarea unui numar real sub forma de o suma dintre  parte intreaga si parte fractionara  x=[x]+; 0<=<1; -2,63= -3+0,37)

§          random(x):- nr aleator in intervalul [0,1]

§          round(x): cel mai apropiat intreg de x

§          sqrt(x) –radical din x

§          pow(x,y) -x la puterea y

§          log(x)->ln x

§          exp(x) e la puterea x

Exemplu : Math.floor(1+100*Math.random()); va returna un nr aleator cuprins intre[1,101].

Obiectul Array

In JavaScript se pot declara numai vectori . Vectorii sunt de tip obiect . Un vector se declara cu Array() iar elementele se acceseaza cu nume[indice];

Obiecte si metode ale obiectului Array:

  • proprietatea length ;
  • metoda sort() – sorteaza in ordine lexicograficaelementele unui tablou;
  • metoda reverse() inverseaza pozitiile elementelor unui vector;

Exemplu : vv=new Array(4); vv[2]=6; alert(vv[2]);

Declararea unei matrici de 4 linii si 3 coloane se face astfel:

vv=new Array(4);

for (i=0;i<4;i++) vv[i]=new Array(3);

Fiecare element al  vectorului este privit ca un vector.

Obiectul String

Cu acest obiect se pot manipula siruri de caractere.

Crearea unui string se poate crea in doua moduri :

§          utilizand  new : var a = new String (“Ana”) ;

§          atribuid variabilei direct sirul :a = “Ana”;

Obiectul String are propritatea length.

Metode. Exista o serie de metode ale acestui obiect , enumeram cateva dintre acestea:

§          search(s) – cauta caracterul de inceput al sirului “s” in obiect. Daca sirul “s”  nu exista se returneaza -1.

§          charAt(index) – returneaza caracterul aflat pe pozitia index;

§          slice (i1, i2) – returneaza substring-ul cuprins intre i1 inclusiv si i2 exclusiv.

§          substr(i1,lung) – returneaza subsirul care incepe cu i1 si are lungime lung;

§          toUpperCase () – returneaza sirul scris cu litere mari;

§          toLowerCase() - returneaza sirul scris cu litere mici;

§          replace(sir1, sir2) – returneaza sirul in care s-a inlocuit prima aparitie a lui sir1 cu sir2;

§          bold() – returneaza sirul scris cu bold;

§          italics() - returneaza sirul scris cu italic;

§          fontcolor(“nume_culoare”) – returneaza sirul scris cu “nume_culoare”

§          fontsize(“marime”) - returneaza sirul scris cu “marime”

§          link(“adresa_http”) – creaza o ancora catre adresa_http

Aplicatie utilizand metode ale obiectului String

Animatii

Prin afisarea in aceiasi pozitie a mai multor imagini, fiecare imagine “stand” un anumit interval de timp duce la animatie. Exista anumite functii predefinite si functii utilizatorcare rezolva aceasta problema.

Functia setTimeout

Sintaxa :

setTimeout(“nume_functie”, nr_milisecunde)

Semantica :

            nume_functie este functia care urmeaza a se executa dupa nr_milisecunde;

            nr_milisecunde – un numar intreg care milisecunde

Functia clearTimeout

Sintaxa :

clearTimeout(“variabila”)

Semantica :

            “variabila” contine o valoare returnata de functia setTimeout. Dupa executarea ei procesul se suspenda;


Aplicatie complexe  utilizand limbajul JavaScript

Aplicatie_1

 



Codul sursa  al aplicatiei_1 de mai sus:

<html>

<head>

<script language='JavaScript'>

function suma()

      

function diferenta()

      

function produs()

      

function cat_rest()

      

function calc_invers()

      

          document.form2.invers.value=inv;

       }

function test()

      

          if (n_init==inv) document.form2.palindrom.value='da'

              else document.form2.palindrom.value='nu';

       }

function transf_dinbaza10()

           

                                    }

                                    sir[i] = cifra;

                        i++;

                                    n=Math.floor(n/b);

                        }

                        while(n);

                        for (j=i-1;j>=0;j--) a= a+sir[j];

                        document.form3.transf.value=a;

            }

function calc_modulul()

           

function inlocuire_litera()

           

function sortare_alfabetica()

       

                   

                a.sort();

                for(i=0;i<k;i++)

                  alfabetic=alfabetic+a[i];

                document.form6.output.value=alfabetic;

        }

</script>

</head>

<body>

<ul>

<li><i> Suma, diferenta, produsul, si catul a doua numere <b>a</b> si <b>b</b> </i><br>

<form name='form1'>

a:  <input type='text' name='inputa' size='14'> <br>

b:  <input type='text' name='inputb' size='14'> <br>

Suma: <input type='text' name='s' size='14'> <input type='button' value='Aduna' onClick='suma()'> <br>

Diferenta: <input type='text' name='d' size='14'><input type='button' value='Scade' onClick='diferenta()'> <br>

Produsul: <input type='text' name='p' size='14'><input type='button' value='Inmulteste' onClick='produs()'> <br>

Catul : <input type='text' name='c' size='14'> <input type='button' value='Imparte' onClick='cat_rest()'> <br>

Restul: <input type='text' name='r' size='14'> <br>

</form></li>

<li><i>Inversul unui numar si se testarea daca este palindrom</i>

<form name='form2'>

Numarul: <input type='text' name='input' size='14'> <br>

Inversul: <input type='text' name='invers' size='14'>

<input type='button' value='Calculeaza' onClick='calc_invers()'> <br>

Palindrom? <input type='text' name='palindrom' size='14'> 

<input type='button' value='Testeaza' onClick='test()'> <br>

</form></li>

<li><i> Transformare din baza 10 in baza 2, 8 sau 16</b></i>

<form name='form3'>

Numarul: <input type='text' name='input' size='14'> <br>

Baza: <input type='text' name='baza' size='14'> <input type='button' value='Calculeaza' onClick='transf_dinbaza10()'> <br>

Numarul este: <input type='text' name='transf' size='14'> <br>

</form></li>

<li><i> Modulul unui numar complex</i><br>

<form name='form4'>

z1: &nbsp; <input type='text' name='re' size='14'> <input type='text' name='img' size='14'>

<input type='button' value='Calculeaza' onClick='calc_modulul()'><br>

Modulul: <input type='text' name='modul' size='14'> <br>

</form></li>

<li><i> Inlocuirea literei 'u' cu litera 'a' intr-un sir de caractere </i><br>

<form name='form5'>

Sirul: <input type='text' name='input' size='14'> <input type='button' value='Inlocuieste' onClick='inlocuire_litera()'> <br>

Dupa inlocuire: <input type='text' name='output' size='14'> <br>

</form></li>

<li><i> Ordonarea alfabetica a unui cuvant </i> <br>

<form name='form6'>

Sirul: <input type='text' name='input' size='14'> <input type='button' value='Sorteaza' onClick='sortare_alfabetica()'> <br>

Alfabetic: <input type='text' name='output' size='14'> <br>

</form></li>

</ul>

</body>

</html>


Aplicatie_2 : Realizarea unui minicalculator de buzunar cu JavaScript

Codul sursa pentru aplicatia_2

<html>

<head>

<script language='JavaScript'>

var str='', operator='',str2='';

function input(val)

     

function add()

     

      }  

function sub()

     

      }

function mult()

     

      }

function div()

     

      } 

function resolve()

     

         operator=''; str=''; str2='';  

        

      }

 

function clearall()

       

</script>

</head>

<body>

<br><br><br><br>

<center>

<table border='1' bgcolor='lightblue'>

<form name='form1'>

<tr><td>

  <input type='text' name='text1' style='color:navy;font-weight: bold' size='20'>

</td></tr>

<tr><td>

&nbsp;

</td></tr>

</table>

<table border='3' bgcolor='lightblue'>

<tr><td align='center'>

  <input type='button' value='  1  ' style='color:navy;font-weight: bold' onClick='input(1)'>

  <input type='button' value='  2  ' style='color:navy;font-weight: bold' onClick='input(2)'>

  <input type='button' value='  3  ' style='color:navy;font-weight: bold' onClick='input(3)'>

  <input type='button' value='  +  ' style='color:navy;font-weight: bold' onClick='add()'>

</td></tr>

<tr><td align='center'>

  <input type='button' value='  4  ' style='color:navy;font-weight: bold' onClick='input(4)'>

  <input type='button' value='  5  ' style='color:navy;font-weight: bold' onClick='input(5)'>

  <input type='button' value='  6  ' style='color:navy;font-weight: bold' onClick='input(6)'>

  <input type='button' value='  -   ' style='color:navy;font-weight: bold' onClick='sub()'>

</td></tr>

<tr><td align='center'>

  <input type='button' value='  7  ' style='color:navy;font-weight: bold' onClick='input(7)'>

  <input type='button' value='  8  ' style='color:navy;font-weight: bold' onClick='input(8)'>

  <input type='button' value='  9  ' style='color:navy;font-weight: bold' onClick='input(9)'>

  <input type='button' value='  *   ' style='color:navy;font-weight: bold' onClick='mult()'>

</td></tr>

<tr><td align='center'>

  <input type='button' value='  C  ' style='color:navy;font-weight: bold' onClick='clearall()'>

  <input type='button' value='  0  ' style='color:navy;font-weight: bold' onClick='input(0)'>

  <input type='button' value='  =  ' style='color:navy;font-weight: bold' onClick='resolve()'>

  <input type='button' value='  /   ' style='color:navy;font-weight: bold' onClick='div()'>

</td></tr>

</form></table>

</body>

</html>

Aplicatia_3

Se se introduca intr-un ele,ment al unui formular o valoare si apasand pe tasta OK15% sa se calculeze 15% din acea valoare

 

Aplicatia 4 : Operatii cu numere complexe si afisarea unor rezultate in caseta de alert. Se va introduce un numar complex intr-un formular de forma z1 = a+b*I, iar al doilea numar va fi z2 = b+a*i

Codul sursa pentru aplicatia 4:

<html>

<head>

<script language='JavaScript'>

function complex(x,y)

z=new complex(0,0);

function getDataR(a)

function getDataI(b)

function add(z)

function mult(z)

function div(z)

function calcul(a,b)

</script>

</head>

<body>

<form name='f1'>

Real(z) :<input type ='text' name='Input1' value='0'> &nbsp &nbsp  

Imaginar(z):<input type ='text' name='Input2' value='0'><br>

<input type='button' value='OK-REAL' onClick='getDataR(document.f1.Input1.value)'>

&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp

<input type='button' value='OK-Imaginar' onClick='getDataI(document.f1.Input2.value)'><br>

Afisez Real(z):<input type='text' name='rez1'>&nbsp &nbsp

Afisez Imaginar(z):<input type='text' name='rez2'><br><br><br><br>

<input type='button' value='OK - alert( )' onClick='calcul(document.f1.Input1.value,document.f1.Input2.value)'>

</form>

</body>

</html>


Aplicatia 5 : Sa se scrie un text care isi schimba culoarea si cand mousul ramane pe imaginea de pe display, aceasta se mareste pina cand mous-ul este luat de pe imagine.

Codul sursa pentru aplicatia 5

<html>

<head>

<style>

#Titlu

</style>

<script language='JavaScript'>

var t=0,inalt=0, latime=0;

function move()

foto.width++;

foto.height++;}

function out()

i=255;

tt=0;

function lumina()

while(i>0)

}

</script>

</head>

<body onload='lumina()'>

<img id='foto' src='t1.jpg' onmouseout='out()' onmousemove='move()' width='80' height='80'>

<h1 id='Titlu'> ID - INVATAMANT LA DISTANTA </h1>

<br><br>

</body>

</html>


Limbajul PHP

Limbajul PHP se aseamana cu C++. Este un limbaj de scriptare care se utilizeaza pe partea de server. Nu toate site-urile accepta PHP. Cand scriem un script in PHP vom rula direct de pe site. Exista insa posibilitatea de a test ape propriul calculator, acest lucru necesita instalari speciale.

Codul PHP este interpretat pe serverul WEB si genereaza un cod HTML care va fi vazut de

uilizator (clientului (browserului) fiindu-i transmis numai cod interpretat ca si HTML).

PHP a fost conceput in anul 1994 si a fost initial munca unui singur om, Rasmus Lerdorf.

In octombrie 2002, era folosit de mai mult de noua milioane de domenii din lumea intreaga.

PHP este un produs Open Source, cu acces la codul sursa. Il putem folosi, modifica si redistribui, toate acestea in mod gratuit.

PHP a fost initial  acronimul de la Personal Home Page.

Primii pasi

Pentru a putea lucra cu baze de date pe server trebuie sa instalam serverul de Apache si MySql.

Existe programe care instaleaza automat aceste servere, de exemplu WinLAMP si se poate descarca de pe Google.

In continuare, trebuie sa editam fisierul de configurare al PHP-ului, si anume php.ini.

Deschidem Edit php.ini si efectuam modificarile urmatoare:

  1. display_errors=Off se schimba in display_errors=On
  2. activati extensiile de care avetm nevoie stergand punct si virgule ; din fata extensiei si verificand daca extensia
  3. ;extension=php_gd2.dll .. devine extension=php_gd2.dll (fara ;)
  4. ;extension=php_mbstring.dll devine extension=php_mbstring.dll (fara ;)
  5. ;extension=php_mime_magic.dll   devine   extension=php_mime_magic.dll(fara ;)
  6. ;extension=php_mysql.dll     devine    extension=php_mysql.dll(fara ;)
  7. register_globals = off     devine   register_globals = on (se schimba off in on)

Prin lasarea in executie a lui winLamp se creaza server-ul cu numele “localhost”, numai din acest server se pot lansa fiserele php sau fisiere html ce contin secvente de cod php.

In directorul C: se creaza un director cu numele Apache2. In acest director se afla subdirectorul htdocs unde se vor stoca toate fisierele cu extensia php sau html. Acesta este localhost-ul nostru.

Pentru a putea vedea configuratia php, realizam un fisier cu extensia *.php, in care punem codul:

<?php

phpinfo();

?>

Lansam fisierul din browser astfel: http://localhost/my.php

Pe ecran se va afisa 

Notiuni introductive

Orice script PHP se incadreaza intre marcajele

<?

?>

sau

<?php

?>

Tiparirea pe display se poate face in doua moduri si anume folosind :

1.        functia echo“  TEXT “

2.        functia printf()

Script-ul PHP poate fi introdus intr-un fisier html sau se poate crea un fisier direct cu extensia php.

Limbajul PHP

  1. Orice variabila in PHP incepe cu particular $.
  2. Constantele se introduce cu functia define (“nume_constanta, valoare_constanta);
  3. Operatorul de concatenare siruri este punctul (.);
  4. Operatorii PHP sunt la fel ca si cei din limbajul JavaScript, Java sau C++;
  5. Instructiunile PHP sunt la fel ca si cele din limbajul JavaScript, Java sau C++;
  6. Legatura in fisierul HTML cu un fisier PHP se face prin atributul action din tag-ul form;

Functiile matematice

Ca si in celelate limbaje exista o serie de functii matematice. Enumeram cateva dintre acestea:

  • abs(numar) returneaza modulul numarului
  • sin(x), cos(x), tan(x) – argumentul x este in radiani
  • pow(x,y) – returneaza xy   cu observatia ca x trebuie sa fie un real pozitiv
  • log10(x), log(x) – returneaza logarithm in baza 10, respective logarithm in baza e
  • max(x1, x2,…,xn) , min(x1, x2, x3….xn) returneaza maximul respective mminimul dintr-un sir de numere;
  • ceil(x) – returneaza cel mai mare intreg  mai mare sau egal cu x
  • round(x) – returneaza intregul rezultat prin rotunjirea lui x
  • floor(x) – returneaza cel mai mare intreg mai mic sau egal cu x
  • rand(min, max)- returneaza o valoare aleatoare intre valorile intregi min si max
  • pi() – returneaza numarul pi;
  • sqrt() – returneaza radacina patrata a lui x

Functiile pentru prelucrarea sirurilor de caractere

Ca si in celelate limbaje exista o serie de functii pentru prelucrarea sirurilor. Enumeram cateva dintre acestea:

  • strlen(sir) – returneaza lungimea sirului;
  • strops(sir1, sir2, [poz_start]) – verifica daca sir1 este subsir a lui sir2, daca da afiseaza pozitia de inceput a acestuia.
  • [poz_start] este optional si verifica de unde sa incedapa cautarea, implicit are valoarea zero;
  • Strstr([sir1, sir2]) – returneaza sir1  din pozitia in care  a fost gasit sir2;
  • Strcmp(sir1, sir2) – comparare lexicografica (alfabetica) si returneaza valoarea zero, daca sir1=sir2, returneaza valoarea >o daca sir 1>sir2, returneaza valoarea <o daca  sir 1 < sir2

Declararea de vectori

In PHP vectorii nu se declara. Se lucreaza cu vectorii la fel ca si in JavaScript . Exista insa aici posibilitatea de a utilize indici sir de caractere.

Instructiuni si functii pentru lucrul cu vectori

  • Instructiunea foreach (n_vector as n_indice=>n_variabila) – permite parcurgerea unui vector cu numele n_vector, cu variabila de ciclare n_indice, in care citirea se face in variavila n_variabila.
  • functia current(vector) – returneaza valoarea retinuta de elemental din vector asyupra caruia se gaseste pointer-ul;
  • functia key(vector) – returneaza indicele elementului din vector asupra caruia se gaseste pointer-ul;
  • functia next(vector) – deplaseaza pointer-ul pe elemental urmator din vector si returneaza valoarea retinuta de acesta;
  • functia prev(vector) - deplaseaza pointer-ul pe elemental anterior al vector si returneaza valoarea retinuta de acesta;


Aplicatie complexe  utilizand limbajul PHP, JavaScript, si HTML

Aplicatia 1

Codul sursa pentru aplicatia 1

<html>

<body>

SALUT <br><br>

<?php

echo'test test test REZULTAT  ';

$a=3;

$b=6;

$rezultat=$a+$b;

echo ('<br> rezultat='.$rezultat.'<br>');

echo ($rezultat.'<br>');

$nume='informatica';

echo ($nume);

?>

<br><b><font color='red'>DEFINIREA DE CONSTANTE CU FUNCTIA DEFINE</font></b>

<br>

<?

define('const1', 3.675);

echo ('const1 = '.const1) ;

?>

<br><br> <font color='green'> SIR CARACTERE </font><br>

<?

$x=5;

echo (' x = '.$x.'<br>');

$y='SIRUL MEU <bR>';

echo strlen($y);

echo '<br><br> POZITIE ME =';

echo (strpos($y,'ME'));

echo '<br> COMPARARE <br>';

echo strcmp('mama','mama');

$x=$y;

echo (' <br>x = '.$x.'<br>');

echo (' y = '.$y);

echo '<br><br> CARACTERE MICI =';

echo strtolower($y);

?>

<br><br><font color='green'> CONVERSII </font><br>

<?

$y=11.7;

echo (' y = '.$y.'<br>');

$x=(int) $y;

echo (' x = '.$x.'<br>');

?>

<br> <font color='red'> FACTORIAL</font><br>

<?

function fact($n)

echo ('FACT(7)='.fact(7).'<br>');

print ('FACT3= '.fact(3));

$a=65;

$b=78;

print (' <br>a ='.$a.' <br> b='.$b);

?>

</body>

</html>


Aplicatia 2: Aplicatia este formata din doua fisiere :

1.        formular.html

2.        formular.php

Executia si codul celor doua fiere este dat mai jos.

Aplicatie 3 : Validare camp NUME


BIBLIOGRAFIE

1.                  ” JAVA, aplicatii “, L.Sangeorzan, C-tin Lucian Aldea, Mihai R. Dumitru, Ed. Infomarket, Brasov, 2001, ISBN 973-8204-14-3.

2.                  “HTML  prin exemple”, Tudor Gugoiu, Ed. Teora, 2001, ISBN 973 20 0455 X

3.                  “Tehnologii WEB”, Sabin Corneliu Buraga, Matrix Rom, Bucuresti 2001,nr. Pg. 662, ISBN 973 685 28

4.                  “BASIC COMPUTER SCIENCE and ENGLISH for CHEMESTRY TEACHERS”, L.Sangeorzan , Oana Tatu, Editura Univ. Transilvania, 2002, ISBN : 973-635-066-5.

5.                  “Web Resources for Teaching and Studying English; An Introduction to HTML 4.0”, L.Sangeorzan, Oana Tatu, Adrian Tatu, Commenius Programme, 87160-CP-1_2000-1-RO.COMENIUS – C31, Ed. Univ.Transilvania,2003 , ISBN 973-635-208-0

6.                  “Optimizarea paginilor WEB”, Calin Ioan Acu , Ed.Polirim, 2003.

7.                  ‘Initiere in Design”, Robin Williams, Ed. Corint, 2003

8.                  “Tehnologii internet”, L.Sangeorzan, C-tin Lucian Aldea, Ed. Univ. Transilvania, 2003, ISBN 973-635-176-9.

9.                  “Design pentru WEB”, Robin Williams, Ed. Corint, 2003, ISBN 973 653 421 9.

10.              “Grafica pe calculator :JAVA - teorie si aplicatii “`, L.Sangeorzan, Jakab Kinga,, Ed. Univ Transilvania, 2006, ISBN –973-635-713-9, ISBN – 978-973-535-713-8

11.              “Crearea si programarea paginilor WEB”, Tudor Sorin, Vlad Hutanu, ed. L&S SOFT, 2006, ISBN 973 86022 2 X.









Politica de confidentialitate

DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 1615
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2019 . All rights reserved

Distribuie URL

Adauga cod HTML in site