CATEGORII DOCUMENTE
Afaceri Calculatoare Casa masina Didactica pedagogie Diverse Educatie Finante Geografie Istorie & politica Legislatie Limba Management Sanatate Tehnologie

Access	Adobe photoshop	Algoritmi	Autocad	Baze de date	C	C sharp
Calculatoare	Corel draw	Dot net	Excel	Fox pro	Frontpage	Hardware
Html	Internet	Java	Linux	Matlab	Ms dos	Pascal
Php	Power point	Retele calculatoare	Sql	Tutorials	Webdesign	Windows
Word	Xml

HTML (Hyper Text Markup Language)

webdesign

+ Font mai mare | - Font mai mic

DOCUMENTE SIMILARE

Web design

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:

Descrierea structurii documentului;

Nu este descrisa aranjarea in pagina;

Permite fiecarui navigator sa aiba propria prezentare;

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:

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

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

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

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;

Sectiunea de antet delimitata de marcajele

<head> TEXT </head>;

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

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:

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:

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>

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

Se completeaza formularul care se transmite unui server;
O aplicatie dedicata de pe server analizeaza formularul completatsi eventual se stocheaza datele intr-o baza de date.
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:

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:

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:

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

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:

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

"coords" determina coordonatele zonei

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:

stilul implicit al navigatorului (browser default);

foi de stil externe (External style sheets);

foile de stil interne ( din interirul elementului head)

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.

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>

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

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

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.

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.

Reguli:

Regula care contine `! important` suprascrie o regulǎ obisnuitǎ.
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.

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>

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

Exemple

H1, H2, H3

Dimensiunile pentru font-size sunt specificatǎ prin:

marime absoluta, avem urmatoarele valori posibile:

xx-small

x-small

small

medium (valoarea prestabilita)

large

x-large

xx-large

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:

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.

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>

</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";

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:

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:

document . forms [0]. elements[0]

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>

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.

Nr crt	EVENTHANDLER	TAGURILE HTML PERMISE
	onAbort	img
	onBlur	a, area, button, input, label, select, textarea
	onChange	Input, select, textarea
	onClick	a., abbr, acronym, address, area, b, big, blockquote, body, button, caption, center, cite, col, colgrouzp, dd, del, dfn, dir, div, dl, dt, em, fieldset, form, hx, hr, I, img, input, ins, kbd, label, legend, li, link, map, menu, noframes, noscript, object, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var
	onDblClick	Vezi onClick
	onError	img
	onFocus	a, area, button, input, label, select, textarea
	onKeydown	Vezi onClick
	onKeypress	Vezi onClick
	onKeyup	Vezi onClick
	onLoad	body, frameset
	onMousedown	Vezi onClick
	onMousemove	Vezi onClick
	onMouseout	Vezi onClick
	onMouseout	Vezi onClick
	onMouseup	Vezi onClick
	onReset	form
	onSelect	Vezi onClick
	onSubmit	form
	onUnload	Frameset, body
	javascript	A , area

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:

Nr. crt.	PROPRIETATE	ACCES
	closed	read
	defaultStatus	read, write
	innerHeight	read, write
	innerWidth	read, write
	locationBar	read
	menuBar	read
	name	read, write
	outerHeight	read, write
	outerWidth	read, write
	pageXOffset	read
	pageYOffset	read
	personalBar	read
	scrollBar	read
	statbar	read
	status	read, write
	toolbar	read

Aplicatie_1:

Aplicatie_2

Metode prin care se poate apela obiectul window:

Nr. crt.	METODA	DESCRIERE
1	alert(s)	Returneaza Stringul s ca text intr-un dialog-box.
2	blur()	Face fereastra inactiva.
3	clearIntervall(p)	Termina un eveniment/proces infint, inceput cu setIntervall(). p este parametrul in care a fost salvat rezultatul din setIntervall().
4	clearTimeout(p)	Termina un Timeout care a fost inceput cu setTimeout().p este parametrul in care a fost salvat rezultatul din setTimeout().
5	close()	Inchide fereastra.
6	confirm(s)	Returneaza Stringul s ca text intr-un dialog-box., care este prevazut cu butoanele de ok si cancel.
7	moveBy(x,y)	Muta o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical (y)). Un nr. negativ muta fereastra inspre stanga-sus.
8	moveTo(x,y)	Muta fereastra la coordonatele x,y - pixeli.
9	open(p1,p2,p3)	Deschide o noua fereastra. Al 3-lea parametru e optional. p1: adresa (URL) unui fisier , care se vrea deschis in fereastra.(Un String gol deschide o fereastra goala) p2: Numele ferestrei p3: (optional) Date despre cum arata fereastra. Mai multe propietati se despart prin virgula
11	prompt(p1,p2)	Creeaza un dialogbox cu 2 butoane analog metodei confirm() si un camp de text (textfield), in care utilizatorul face propriile remarci. p1 e un String, care apare in dialogbox p2 este textul acre apare prima data in campul de text.
12	resizeBy(x,y)	Mareste fereastra cu x pixeli la dreapta si cu y pixeli in jos. La valori negative, fereastra se micsoreaza.
13	resizeTo(x,y)	Mareste fereastra la o marime de x pixeli in directie orizontala si cu y pixeli in directie verticala.
14	scrollTo(x,y)	Duce (scroll) fereastra la o anumita pozitie care e data de coord. x si y.
15	setIntervall(p1,p2)	Ruleaza o instructiune intr-un ritm dinainte dat pana cand e oprita de clearIntervall() p1: instructiune sau functie JavaScript care trebuie executata. p2: Valoare in milisecunde, pana cand se executa p1.
16	setTimeout(p1,p2)	Ruleaza o instructiune in functie de un anumit timeout. p1: instructiune sau functie JavaScript care trebuie executata. p2: Valoare in milisecunde, pana cand se executa p1.

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 https://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:

1	PROPRIETATE	DESCRIERE	ACCES
2	alinkColor	culoarea unui link pe care s-a dat click	read, write
3	bgColor	culoarea de fundal	read, write
4	cookie	posibilitatea de a citi si de a scrie cookie-uri	read, write
5	fgColor	culoarea textului (foreground)	read, write
6	lastModified	data si ora ultimei modificari	read
7	linkColor	culoarea linkurilor care nu au fost inca vizitate	read, write
8	referer	adresa URL de la care a fost chemata pagina curenta	read
9	title	titlul unui fisier HTML, asa cum apare el in tagul <title>	read
10	URL	adresa completa a documentului curent	read
11	vlinkColor	culoarea linkurilor care au fost vizitate	read, write

Metode care stau la dispozitie

Nr. Crt.	METODA	DESCRIERE
1	close()	Inchide un document care a fost deschis cu metoda open()
2	open()	Deschide un document pt scriere. Nu se desschide o noua fereastra, documentul actula se va suprascrie
3	write(s)	Scrie Stringul s in documentul actual
4	writenln(s)	Analog metodei write(), doar ca se trece la linie noua

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()

prin indexul formularului. Primul formular primeste 0 etc.

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

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

Acces : document.forms["FormNAME"].reset()

PROPRIETATE	DESCRIERE	ACCES
action	retine cuvantul/valoarea stabilit/a in atributul action din tagul <form>	read, write
encoding	retine cuvantul/valoarea stabilit/a in atributul encoding din tagul <form>	read, write
length	retine nr. formularelor dintr-un fisier	read
method	retine valoarea stabilit/a in atributul method din tagul <form>	read, write
name	retine cuvantul/valoarea stabilit/a in atributul name din tagul <form>	read, write
target	retine numele frame-ului care sa devina activ dupa trimiterea unui formular	read, write

	METODA	DESCRIERE
	reset()	Sterge toate datele introduse intr-un formular, si are aceeasi functie ca butonul care se introduce cu atributul type=reset
	submit()	Trimite un formular, si are aceeasi functie ca butonul care se introduce cu atributul type=submit

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:

Folosirea unui index. Prima imagine primeste nr. 0.

document.images[0].src

Prin numele imaginii din tagul img

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

document.BILD.src

N	PROPRIETATE	DESCRIERE	ACCES
1	Border	contine indicatii despre margine, asa cum se gasesc ele in tag-ul img	read
2	Complete	e true atunci cand imaginea e complet inacarcata	read
3	Height	contine indicatii despre inaltimea pozei	read
4	Hspace	contine indicatii despre distanta orizonatala fata de obiectele din jur	read
5	Length	retine nr. imaginilor dintr-un fisier	read
6	Lowsrc	retine lowsrc asa cum e in tagul img	read
7	Name	retine numele pozei asa cum e in tagul img	read
8	Src	retine numele intreg al fisierului asa cum e in atributul src	read
9	Vspace	contine indicatii despre distanta verticala fata de obiectele din jur	read
10	width	contine indicatii despre latimea pozei	read

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:

Function simpleDate()

</script>

Obiectul navigator

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

PROPRIETATE	DESCRIERE	ACCES
appCodeName	Contine nicknameul browserului(d.ex., Netscape uraste nickname-ul "Mozilla")	read
appName	Retine numele browserului in care ruleaza scriptul	read
appVersion	Retine nr. versiunii browserului in care ruleaza scriptul	read
language	Contine limbajul in care este instalat scriptul(doa Netscape)	read
platform	Retine numele sistemului de operare pe care este instalat scriptul (doar Netscape)	read
userAgent	Retine informatii de browser, aceleasi pe care le transmite browserulul si la o apelare http	read

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:

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

document.layers[5].above

Referentierrea prin numele layer-ului

<layer name="Layer0">

document. Layer0.above

PROPRIETATE	DESCRIERE	ACCES
above	Contine obiectul layer care se afla deasupra niivelului actual	read
background	background-ul layer-ului	read, write
bgcolor	culoarea fundaluilui layer-ului	read, write
below	opusul lui above	read, write
clip	care parte/taietura a layerului este aratata	read, write
document	Pt fiecare nivel exista un obiect document, care ii contine caracteristicile	read,
left	Contine pozitia coltului din stanga sus a layerulului (in pixeli), raportata la documentul de deasupra.	read, write
length	Nr. layer-elor dintr-un fisier HTML	read,
name	Numele layerului	read, write
pageX	Pozitia pe axa X a coltului din stanga sus a layer-ului, raportata la intreg documentul.	read, write
pageY	Pozitia pe axa Y a coltului din stanga sus a layer-ului, raportata la intreg documentul.	read, write
parentLayer	Retune obiectul-parinte al layerului, adica documentul de deasupra	read,
src	Contine numele unui document extern, introdus in layer	read, write
top	Contine pozitia pe axa Y a coltului din stanga sus a layerulului (in pixeli), raportata la documentul de deasupra.	read, write
visibility	informatii despre visibilitatea unui layer. Valori posibile: hide, show, inherit	read, write

Metode pentru layere

	METODE	DESCRIERE
	captureEvents()	Supravegheaza evenimentele din layer-ul actual.
	handleEvent()	Da mai departe evenimentul unui element care se poate ocupa de el.
	load(p1,p2)	Incarca un fisier extern in layer. p1-numele fisierului p2-latimea vizibila din layer (pixeli)
	moveAbove(p1)	Muta layer-ul deasupra layer-ului dat de parametrul p1.
	moveBelow(p1)	Muta layer-ul sub layer-ul dat de parametrul p1.
	moveBy(p1,p2)	Muta layerul curent cu p1 pixeli la stanga/dreapta si cu p2 pixeli mai sus sau mai jos.
	moveTo(p1,p2)	Muta layer-ul la o noua pozitie data de p1 si p2. Aceasta este positia coltului din stanga sus al layer-ului.
	releaseEvents()	Termina supravegherea de evenimente.
	resizeBy(p1,p2)	Schimba marimea layerului cu: p1-marimea in directia de pe axa x p2-marimea in directia pe axa y
	resizeTo(p1,p2)	O noua marime pt layer. p1-marimea in directia de pe axa x p2-marimea in directia pe axa y
	routeEvent()	Da evenimentul mai departe obiectului document. De acolo ajunge la un eventhandler care ii este subordonat.

Proprietati si metode pentru obiectul all

Apelare:

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

prin numele dat cu atributul "name"

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

document.all.Title2.innerText

Nr.crt	PRPRIETATE	DESCRIERE	ACCES
	className	Numele clasei style-sheet, careia ii apartine un element.	read, write
	dataFld	Numele unui camp de date.	read, write
	dataFormatrAs	Tipul unui camp de date.	read, write
	dataPageSize	Numarul datapage-urilor care trebuie returnate simultan	read, write
	dataSrc	Referinta la obiectul cu care s-a realizat conexiunea	read, write
	id	Numele unui element	read,
	innerHTML	Continutul unui element GHtml	read, write
	innerText	Continutul textual al unui elemnt GHtml.	read, write
	isTextEdit	true-daca elementul este editabil, false daca nu	read,
	lang	Limbajul elementului, atata timp cat acesta a fost mentionat in atributul lang.	read, write
	language	Numele limbajului script	read,
	length	Nr tagurilor HTML dintr-un fisier.	read,
	offsetHeight	Inaltimea elementului in pixeli.	read,
	offsetLeft	Distanta elementului pana la marginea stanga a ferestrei.	read
	offsetParent	O referinta la obiectul parinte.	read,
	offsetTop	Distanta elementului pana la marginea de sus a ferestrei.	read,
	offsetWidth	Latimea unui element in pixeli	read
	outerHTML	Continutul unui tag HTML, incusiv al celor de inceput si sfarsit.	read, write
19	outerText	idem innerText	read, write
20	parentElement	Elementul parinte al elementului curent.	read,
21	parentTextEdit	Elementul urmator care este editabil.	read
	recordNumber	Numarul data page-ului aratat	read,
	sourceIndex	Spune despre care element din interiorul unui fisier HTML este vorba in actualul element/document???.	read,
	tagName	Numele unui tag	read,
25	title	Continutul atributului title al elementului HTML.	read, write

Nr.crt	METODA	DESCRIERE
1	Click()	Cauzeaza click-ul unui element, ca si cand acesta ar fi fost click-enit de utilizator.
2	Contains(p1)	Verifica daca elemntul contine si un alt element, al carui nume (id) este dat de p1. Returneaza true, daca exista un astfel de element.
3	getAttribute(p1,p2)	Verifica daca exista in tagul HTML un atribut dat prin p1. p2 este pus pe true, daca se ia in seama daca se scrie cu litere mari sau sau mici. Functia returneaza valoarea atributului sau un String gol.
4	insertAdjacentHTML(p1,p2)	Introduce cod HTML suplimentar, inainte sau dupa elementul HTML. p1-pozitia unde trebuie introdus. Valori posibile: BeforBegin, AfterBegin, BeforEnd, AfterEnd. p2-codul care trebuie introdus.
5	insertAdjacentText(p1,p2)	idem insertAjacentHTML, cu diferenta ca se introduce text.
6	removeAttribute(p1,p2)	Indeparteaza un atribut dintr-un tag HTML. p1-numele atributului in tag. p2-true-daca e case sensitive.
7	scrollIntoView(p1)	Poziioneaza continutul astfel in fereastra, incat sa poata fi vizibil. p1-true-daca elementul trebuie sa apara sus in fereastra. p1-false- daca elementul trebuie sa apara jos in fereastra.
8	setAttribute(p1,p2,p3)	Introduce intr-un tag html un nou atribut. p1-numele atributului. p2-valoarea acestui atribut p3-true-daca e case sensitive.

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>

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>

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>

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

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

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

</form></li>

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

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>

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

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>

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>

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>

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>

</td></tr>

</td></tr>

</table>

</td></tr>

</td></tr>

</td></tr>

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

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>

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

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

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

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

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

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

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>

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

</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:

display_errors=Off se schimba in display_errors=On
activati extensiile de care avetm nevoie stergand punct si virgule ; din fata extensiei si verificand daca extensia
;extension=php_gd2.dll .. devine extension=php_gd2.dll (fara ;)
;extension=php_mbstring.dll devine extension=php_mbstring.dll (fara ;)
;extension=php_mime_magic.dll devine extension=php_mime_magic.dll(fara ;)
;extension=php_mysql.dll devine extension=php_mysql.dll(fara ;)
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 https://localhost/my.php

Pe ecran se va afisa

Notiuni introductive

Orice script PHP se incadreaza intre marcajele

<?php

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

functia echo" TEXT "

functia printf()

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

Limbajul PHP

Orice variabila in PHP incepe cu particular $.
Constantele se introduce cu functia define ("nume_constanta, valoare_constanta);
Operatorul de concatenare siruri este punctul (.);
Operatorii PHP sunt la fel ca si cei din limbajul JavaScript, Java sau C++;
Instructiunile PHP sunt la fel ca si cele din limbajul JavaScript, Java sau C++;
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 x^y 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 :

formular.html

formular.php

Executia si codul celor doua fiere este dat mai jos.

Aplicatie 3 : Validare camp NUME

BIBLIOGRAFIE

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

"HTML prin exemple", Tudor Gugoiu, Ed. Teora, 2001, ISBN 973 20 0455 X

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

"BASIC COMPUTER SCIENCE and ENGLISH for CHEMESTRY TEACHERS", L.Sangeorzan , Oana Tatu, Editura Univ. Transilvania, 2002, ISBN : 973-635-066-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

"Optimizarea paginilor WEB", Calin Ioan Acu , Ed.Polirim, 2003.

'Initiere in Design", Robin Williams, Ed. Corint, 2003

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

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

"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

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

Politica de confidentialitate | Termeni si conditii de utilizare

DISTRIBUIE DOCUMENTUL

Vizualizari: 3349
Importanta:

Comenteaza documentul:

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

Creaza cont nou

Distribuie URL
https://www.scrigroup.com/calculatoare/webdesign/HTML-Hyper-Text-Markup-Languag65946.php

Adauga cod HTML in site
<a href="https://www.scrigroup.com/calculatoare/webdesign/HTML-Hyper-Text-Markup-Languag65946.php" target="_blank" title=" - https://www.scrigroup.com/calculatoare/webdesign/HTML-Hyper-Text-Markup-Languag65946.php">HTML (Hyper Text Markup Language)</a>