Realizarea Unui Site

Realizarea Unui Site

Byadmin ianuarie 1, 2024

Ce este WORLD WIDE WEB ?

World Wide Web (sau Web) este cel mai mare rezervor de informatie electronica din lume. Cu alte cuvinte, Web este o colectie de milioane de documente legate intre ele, care se gasesc pe calculatoare raspindite in intreaga lume (Web = pinza de paianjen).

Cind se parcurg site-uri din Web cu ajutorul unui browser se pot vizualiza elemente de tip text, grafica, video sau audio (cunoscute sub numele de hipermedia).
Internetul este vehiculul care permite comunicarea intre calculatoarele din intreaga lume.

Web-ul este deci un sistem de comunicare global care permite calculatoarelor sa transfere date hipermedia in Internet. Altfel spus, Web-ul se poate considera un sistem de documente sau programe legate intre ele, asezate la nivelul superior al Internet-ului (hardware si software).

Nasterea Web-ului

Web-ul a fost creat pina in martie 1989. Tim Berners-Lee, creatorul Web-ului, pe cind lucra la Consiliul European pentru Cercetare Nucleara (CERN), Laboratorul european pentru fizica particulelor de la Geneva, a fost nevoit sa gaseasca o cale de a transmite informatii catre cercetatorii din domeniul fizicii energiilor inalte aflati în diverse zone geografice si o modalitate de a simplifica procesul de gasire a informnatiilor pe Internet.
In acest scop, el a propus un "sistem hipertext" de comunicatie intre calculatoare. Sistemul propus urma sa lege documentele prin intermediul unei retele de calculatoare, pentru utilizarea în comun a rezultatelor cercetarii stiintifice. CERN a promovat Web-ul, avind in vedere eventuala sa dezvoltare de la o retea locala la o retea globala, accesibila din intreaga lume.

Prima utilizare publica a Web-ului a avut loc in ianuarie 1992, la Geneva, Elvetia, unde cercetatorii au avut acces la date Web din site-urile Web ale CERN. Prin proiectul Web al lui Berns-Lee, au fost stocate documente pe unul sau mai multe calculatoare, numite servere Web. Cercetatorii au avut acces la aceste date utilizind un program special numit browser Web.

Astazi, utilizind Internet-ul, utilizatorii se conencteaza la un server Web si solicita anumite documente Web. Serverul Web ca raspuns, livreaza documentul utilizatorului, acesta putind sa-l parcurga si sa-l afiseze cu ajutorul unui program browser. Un server poate raspunde la cererile mai multor utilizatori in acelasi timp.

In aprilie 1993, dupa aproape un an si jumatate de la introducerea Web-ului, existau 60 de servere Web. Astazi se estimeaza numarul serverelor la peste un milion.

La ce foloseste Web-ul?

Web-ul este utilizat de catre browserul utilizatorului pentru a putea vizualiza paginile de pe acesta. Aceste pagini contin in principal informatii sub forma de text dar si sub forma video (imagini statice sau animatii) sau audio. Aceste informatii sint stocate pe Web sub un format special denumit HTML.

HTML (HyperText Markup Language) este limbajul cu care "comunica" Web-ul. Formatul HTML a aparut odata cu aparitia Web-ului, si este un format special, este lizibil, adica este inteligibil de catre om. Cind vizualizam o pagina Web aceasta este in format HTML, iar browser-ul o traduce in imagini, sunete, texte etc.

Pentru a crea pagini Web avem nevoie de un editor simplu de texte in care sa scriem pur si simplu ceea ce dorim in formatul HTML. Un singur inconvenient al realizarii paginilor Web cu ajutorul editoarelor de texte este faptul ca trebuie cunoscut limbajul HTML.

Un alt mod de creare a paginilor Web este folosirea unui program pentru crearea paginilor Web. Aceste programe difera de la unul la altul dar unul dintre cele mai raspindite este FrontPage, un program al firmei Microsoft care apartine, deja, de pachetul de programe Microsoft Office, si este de tipul WYSIWYG – What You See Is What You Get – ceea ce vezi este ceea ce vei obtine.

Pentru a putea face publice paginile Web este necesara utilizarea unui server de Web care sa stocheze pagina utilizatorului. Asemenea servere exista pe Web si pot fi gasite foarte usor.

Web este singura parte din Internet, in afara de e-mail, accesibila pentru majoritatea utilizatorilor. Multi nu vor vedea niciodata un meniu gropher si probabil nici nu vor simti nevoia. Nu vor avea niciodata placerea de a citi rezultatul unui WAIS. Toata atentia se indreapta spre Web. Siturile Web sint organizate similar cu sistemul help on-line din sistemul Windows '95.

Prima pagina a sistemului de asistenta, numita Contents (cuprins), va arata subiectele disponibile intr-un fisier help. Daca executati clic pe unul dintre aceste subiecte, veti avea un ecran plin cu informatii despre acel subiect. Tot astfel, majoritatea siturilor Web va ofera un ecran de deschidere numit pagina initiala (home page). Din pagina initiala puteti sa va mutati la alte pagini Web de pe acel server sau din orice colt al lumii – executati, pur si simplu clic pe o legatura.

O pagina Web este asemenea multor documente care le aveti pe calculatorul dumneavoastra. Insa nu incarcati pagina web de pe calculatorul propriu ci de pe un server Web. Un Sit Web este o alta denumire folosita pentru un anumit server Web. Este vorba despre un calculator conectat la Internet in asa fel incit sa puteti avea acces la paginile de Web pe care le contine. Fiecare pagina Web cotine text, imagini si scurtaturi la fel ca si sistemul de asistenta on-line, insa pagina Web poate fi mult mai complexa. O scurtatura catre o pagina Web poate sa transfere un fisier, sa afiseze o imagine, sa redea sunete sau sa prezinte un film. Numarul de lucruri catre care conduce o scurtatura intr-o pagina Web este practic nelimitat. Urmatorul paragraf va prezinta citeva dintre elementele pe care le gasiti intr-o pagina Web obisnuita.

Ce se poate gasi pe Web?

Divertisment.
Exista o multime de situri total nefolositoare, dar distractive, asemenea peretilor pe care oamenii scrijelesc diferite remarci.

Reviste.
Orice revista de pe un stand are o pagina Web. Majoritatea revistelor, cotidianelor si emisiunilor de stiri sunt prezentate in Web. Time Warner, Ziff-Daviss si CNN sunt exemple de de mass-media in Web.

Multimedia.
Acesta este un lucru cu adevarat remarcabil in Web. Veti gasi filme, sunete si imagini superbe.

Informatii despre produse.
Majoritatea firmelor de calculatoare ofera asistenta si informatii despre produsele lor prin Web. Microsoft, Hewlett Packard, Compaq, IBM sunt doar citeva exemple. Puteti gasi programe gratuite in unele dintre aceste situri.

Cercetare.
Studentii din intreaga lume pot folosi Web pentru cercetare in domenii ca literatura, matematica, chimie sau filozofie. Multe institutii de invatamint cum ar fi Universitatea Indiana, ofera informatii folositoare pentru studenti.

Servicii.
Exista o gama larga de servicii disponibile in Web. Puteti afla starea coletelor trimise prin FedEx sau UPS, sa cautati un prieten, sa aflati ultimele informatii despre starea vremii in zona dumneavoastra sau sa cautati numarul de telefon al unei firme.

Despre URL-uri

Pentru referirea la o resursa din Internet se foloseste termenul generic URI (Universal Resource Identifier) care specifica fie o locatie, caz in care vorbim de un URL (Uniform Resource Locator) fie un nume, caz in care avem un URN (Universal Resource Name). Un URL are urmatorul format:

protocol://nod : port/cale

unde:

protocol – reprezinta modul de acces la resursa;

nod – reprezinta adresa unei masini din Internet;

port – reprezinta portul pe care se realizeaza conexiunea cu calculatorul respectiv

cale – reprezinta calea cu specificarea directoarelor si eventual a fisierului si a unei sectiuni specificate din respectivul fisier aflat pe masina respectiva.

In continuare vom explica putin mai detaliat elementele din formatul mentionat.
1."Protocol" Descrie protocolul care se foloseste pentru accesarea informatiei. Cuvintul protocol poate fi unul din urmatoarele:

http (Hypertext Transfer Protocol)
Este metoda cea mai des utilizata pentru accesarea informatiilor in Internet care sunt pastrate pe servere WWW (World Wide Web). De fapt, http este protoclul "implicit" al WWW. Adica, daca un URL nu contine partea de protocol, aceasta se considera ca fiind http. Acesta presupune rularea unui program corespunzator pe calculatorul destinatie care intelege protocolul respectiv. Fisierul destinatie trebuie sa fie un document HTML (HyperText Markup Language), un fisier grafic, de sunet, de animatie, un program executabil pe server-ul respectiv sau un editor de texte.

ftp (File Transfer Protocol)
Descrie un transfer de fisiere normal sau anonim. FTP (Protocol de transfer al fisierelor) este o modalitate standard de a transfera fisierele binare din Internet. FTP nu necesita codarea fisierelor inainte de a fi incarcate, asa cum se intimpla in cazul fisierelor din e-mail sau de la grupuri de discutii

mailto
Permite transmiterea de mesaj electronic. Navigatorul prezinta o forma pentru introducerea si transmiterea mesajului. In acest caz ceea ce urmeaza dupa mailto: este chiar adresa electronica a destinatarului mesajului.

file
Permite accesarea unui fisier pe calculatorul local. Se foloseste pentru vizualizarea unui fisier HTML pe un calculator care are un navigator dar nu este un server. In cazul in care pe calculatorul local ruleaza un sistem de operare Microsoft (MS-DOS, Windows3.x, Windows 95/NT), caracterul ":" care urmeaza literei unitatii de disc se inlocuieste cu "|".
Exemplu:

file:///C|/Users/Radu/Carte/Internet/Cap1.txt

gopher
Permite accesarea unor fisiere pe servere Gopher.

telnet
Permite cuplarea la un nod, asemanator comenzii telnet.

WAIS (Wide Area Information Server)
Reprezinta un fisier pe un server WAIS.

news (USENET News)
Se refera la un server de grupuri de discutii sau la un grup de discutii situat pe un astfel de server. In acest caz nod reprezinta adresa server-ului, iar cale reprezinta numele grupului de discutii respectiv.

x-exec
Se refera la un program executabil.

2."Nod" Reprezinta adresa nodului de destinatie sau numele calculatorului respectiv.
Exemplu:

http://www.Edu.ro

este o adresa care se refera la masina cu numele "Edu" din domeniul "ro". In cazul transferului cu ftp se specifica si parola sub forma:

nume:parola@nod

La ftp anonim se specifica doar adresa server-ului ftp. In unele situatii se specifica si portul sub forma:

nod:port

3."Port" Reprezinta "canalul" prin care se realizeaza comunicarea dintre calculatoare.Unele servicii (programe server) au ca porturi valori prestabilite (Ex:HTTP – 80, FTP – 21, serverul de mail – 25). Daca folosim aceste valori, portul poate lipsi din schema URL -ului. Daca, insa, programul server "asculta" pe un port altul decat cel prestabilit, valoarea portului trebuie sa apara in adresarea corecta.
Exemplu:

http://localhost:8080

adreseaza serverul web instalat pe propriul calculator si care asculta la portul 8080. 4."Cale" Reprezinta calea obisnuita pentru accesarea unui fisier, pornind de la radacina server-ului respectiv. In unele cazuri ea poate sa contina chiar o referire la o anumita sectiune a unui document (Dar despre aceata, mai tarziu…).
In cazul in care aceasta parte a unui URL lipseste, serverul Web cauta fisierul radacina al sau, fisier care – de cele mai multe ori – poarta numele "index.html sau "default.html". Daca un asenea fisier nu exista, sau nu a fost definit ca fisier implicit in cadrul serverului (situatie foarte rar intalnita), acesta din urma poate sa intoarca utilizatorului care a cerut URL-ul respectiv un mesaj de eroare, o lista a fisierelor disponibile la adresa respectiva sau un alt raspuns, depinde de serverul Web folosit. Exemple de URL:

1. http://www.sandia.gov/sci_compute/htm_ref.html

Reprezinta documentul HTML cu numele html_ref.html in directorul sci_compute pe server-ul WWW cu adresa: www.sandia.gov.

2. ftp://ftp.sura.net/pub/nic/

Reprezinta directorul pub/nic pe server-ul ftp cu adresa ftp.sura.net, unde se gasesc informatii despre Internet.

3. ftp://rtfm.mit.edu/usenet/news.answers/ftp-list/faq

Reprta documentul HTML cu numele html_ref.html in directorul sci_compute pe server-ul WWW cu adresa: www.sandia.gov.

2. ftp://ftp.sura.net/pub/nic/

Reprezinta directorul pub/nic pe server-ul ftp cu adresa ftp.sura.net, unde se gasesc informatii despre Internet.

3. ftp://rtfm.mit.edu/usenet/news.answers/ftp-list/faq

Reprezinta un document cu numele faq care contine cele mai frecvente intrebari si raspunsuri despre ftp. Documentul se gaseste pe server-ul ftp cu adresa rtfm.mit.edu in directorul usenet/news.answers.

Browsere

Un program cu ajutorul caruia se poate "naviga" prin Web – adica se pot vizualiza documnte plasate pe diferite calculatoare conectate prin Internet la reteaua World Wide Web – se numeste browser. De fapt un browser este alcatuit dintr-un set de programe care permite manevrarea innformatiilor bazate pe text si elemente de grafica si rularea unor programe pe care documentele le pot include (appleturi, scripturi).

Fiecare browser are o caseta de text unde utilizatorul introduce adresa documentului dorit. In cazul in care utilizatorul nu cunoaste adresa exacta de identificare a documentului, acesta poate introduce un text semnificativ pe care documentul ar trebui sa il contina. Browserul transmite acest text unor programe speciale existente in Web, programe numite motoare de cautare. Acestea cauta in multitudinea de documente existente respectivul text, oferind apoi ca rezultat o lista de adrese a unor documente care contin respectiva "cheie" de cautare. Utilizatorului nu ii ramane decat sa aleaga – eventual prin incercari – locatia corecta.

Exista mai multe astfel de programe de navigare Web, dar cele mai cunoscute sunt Internet Explorer si Netscape Navigator.

Editoare pentru HTML

Daca v-ati hotarat sa creati un site web, in afara de spatiu de stocare mai aveti nevoie de ceva, si anume de editoare HTML sau utilitare si aplicatii pentru crearea de butoane si meniuri.

Adobe GoLive!5.0
Realizat de compania Adobe, a carei experienta in domeniul graficii este bine cunoscuta, editorul GoLive dispune de o cantitate mare de obiecte, atat HTML standard cat si proprii. De asemenea, lucrul cu frame este foarte accesibil, acestea putand fi adaugate sau sterse foarte usor. Datorita interfetei asemanatoare Photoshop-ului, utilizatorii familiarizati cu acest program de grafica nu vor avea probleme la crearea unui site nou.

Cool Page 2.7
Programul este destinat in primul rand celor care nu au cunostinte si timp pentru crearea graficii unui site web. Aceasta deoarece este livrat cu o multime de animatii GIF sau Flash, imagini si icon-uri gata de folosit in cadrul paginilor. De asemenea, datorita posibilitatilor de editare drag & drop, o pagina web poate fi construita in cateva minute.

Macromedia Dreamweaver 4.01
Atunci cand vine vorba despre realizarea unei pagini HTML nu se poate sa nu aducem in discutie si Dreamweaver de la Macromedia. Cu toate ca orientarea sa este mai degraba spre un nivel mediu spre inalt de cunostinte in domeniu, el poate fi folosit cu succes si de un incepator. Dispune de un mare numar de template-uri care simplifica semnificativ munca de "schitare" a site-ului. Si pentru paginile web aveti la dispozitie mai multe modele pe care le puteti prelua, modificand doar informatia prezentata. Pagina web: www.macromedia.com

HotDog PageWiz 1.04
Desi la prima vedere poate parea un program complicat, PageWiz este un instrument util pentru un utiilizator cu mai putina experienta, din cel putin doua puncte de vedere. In primul rand este o modalitate utila de invatare, pentru ca include o documentatie a limbajului HTML bine pusa la punct si care ajuta in timp real utilizatorul. In al doilea rand pentru ca include un "editor-vrajitor" foarte rapid care permite construirea unei pagini web intr-un timp foarte scurt.

NetObjects Fusion
NetObjects Fusion este potrivit pentru titi webdesignerii, care doresc sa obtina o pagina de internet cat mai repede si fara prea mare efort. Gama de functii oferite de Fusion este absolut satisfacatoare – daca nu ai pretentii prea mari. Tocmai multitudinea de functii de help face ca si novicii si utilizatorii mai putini versati sa obtina extrem de repede rezultate reprezentative. Fusion lucreaza cu obiecte, pe care le imbinati prin drag&drop, realizand astfel un site. Se poate spune, deci, ca incepatorii si designerii, care sunt presati de timp, vor fii cu adevarat incantati de NetObjects Fusion. Interfata simpla si intuitiva face ca erorile de utilizator sa fie excluse din start. Pagina web: www.netobjects.com

HomeSite
Editorul HomeSite produs anterior de compania Allaire (acum membra a Macromedia) se adreseaza in primul rand webdesignerilor, care dispun deja de tehnicii de programare si HTML. In ciuda unui cuprins imens de functii, datorita interfetei deosebit de reusite, utilizatorul va putea avea in permanenta o privire de ansamblu asupra intregului proiect. HomeSite este practic opusul lui NetObjects Fusion sau a lui GoLive!: de aceasta data nu veti lucra cu obiecte grafice, ci direct in codul sursa al paginii web si trebuie sa stiti in permanenta ce pas parcurgeti. Acestea fiind spuse, este clar ca HomeSite nu prea este potrivit pentru incepatori si pentru adeptii Wysiwyg, in schimb este un editor absolut recomandabil tuturor celorlalti webdesigneri. Unul dintre avantajele programului il reprezinta codul sursa "curat", pe care il creeaza.

CoffeCup Free HTML
Free HTML este un program destinat in primul rand incepatorilor fara cunostinte HTML si programare web. Paginiile web pot fi realizate foarte usor, prin intermediul unor vrajitorii care va ofera posibilitatea de a plasa elementele paginii prin drag&drop.Stabilirea aspectului unitar al paginilor se poate face la fel de usor, prin aplicarea de diverse teme asupra acestora. Cam acestea ar fi optiunile pe care le ofera programul si de aceea incepatorii vor fi incantati de el, dar cei care dispun de cunostinte avansate vor cauta o alternativa. Totusi, faptul ca se pot crea rapid pagini web nu foarte complicate si mai ales gratuitatea, vor fii factori care vor determina alegerea acestui program.

Dream Weaver
Se castiga acces simultan la vizualizarea de design si sursa HTML. Se pot deschide documente create in alte editoare fara a modifica marcajele create de utilizator. Codarea de mana este la fel de confortabila ca si design-ul. Se vor putea autoindenta elementele de cod, balansa simbolurile de punctuatie, indenta linii multiple simultan prin selectie. Exista functii java-script predefinite accesibile prin butoanele din ferestrele de asistenta. Pentru cod se aplica highligh de sintaxa, evidentiidu-se portiunile de cod unde este java-script sau alte script-uri. Pentru depanarea codului de java-script este prevazut un depanator care permite introspectia in executia care poate fi in Internet Explorer sau Netscape Navigator permitand astfel intelegerea functionarii fiecarui browser.

Front Page
Microsoft FontPage va ofera puterea de a adauga continut dinamic cu ajutorul unei componente de galerie foto, serviciul de componente Web din Microsoft MSN, Expedia, bCentral. Chiar daca sunteti un expert in pagini web sau un novice, veti gasi ca FrontPage este usor de invatat si se poate utiliza rapid.

Ce este limbajul HTML?

Problema schimbului de informatie intre doua sau mai multe calculatoare este o problema extrem de complexa. Rezolvarea acestei probleme implica existenta unor "reguli de comunicare" pe care calculatoarele sa le respecte. O comunicare reala intre doua parti – fie ele calculatoare sau nu – se bazeaza pe faptul ca informatia oferita de una dintre parti poate fi preluata si mai apoi inteleasa de catre cealalta.
Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica sunt stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara acestor reguli mai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW acesta este limbajul HTML.

Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor de HTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia cu alte fisiere.

Elemente de marcare

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (sub forma <nume-element>) si in cel de sfarsit (sub forma </nume-element>). Exemplu:

Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat si este partea de document asupra caruia actioneaza respectivul mod de formatare.
Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au un continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (Ex: BODY).
Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceea formularile <BR>, <br> sau <Br> desemneaza acelasi control.

Atribute

Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume si valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu:

Prezenta ghilimelelor la valorile atributelor este optionala.

Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatorul documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpul interactiunii cu utilizatorul, cu ajutorul scripturilor. Dar despre ele, mai tarziu…
Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul urmator:

absenta lor in eticheta de inceput a marcajului echivaleaza cu valoarea false presetata

prezenta lor echivaleaza cu setarea valorii true

Exemplu:
Formularea

sau

marcheaza atribuirea valorii true atributului selected, atribut al elementului option.

Daca valoarea unui atribut nu este una valida ea va fi ignorata.

Referinte de entitati

Pentru a introduce in continutul documentelor HTML unele caractere care nu fac parte din alfabetul limbii engleze, numite si caractere speciale, (cum ar fi è, ß sau ®) se folosesc marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care am vorbit in sectiunile anterioare, referintele de entitate nu sunt incadrate de caracterele "<" si ">". Ele incep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa legatura cu caracterul pe care il reprezinta sau un cod numeric si se termina cu caracterul ";".
De asemenea, caracterele folosite in marcajele HTML (<, >, &) se pot insera in cadrul documentului numai cu ajutorul referintelor de entitate.
Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta:

Comentariile

Reprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisier sursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt incadrate de marcajele "<!–" si "–>". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "–" deoarece aceasta genereaza confuzie.
Exemplu:

<– Acesta este un comentariu
care ocupa doua linii de text. –>

Cateva precizari despre atribute

In incheierea capitolului de fata vom discuta despre prezentarea atributelor elementelor HTML. Nu vom studia aici toate atributele care se pot referi la un anumit element, ci mai degraba modul in care unele din ele – cele intalnite la majoritatea elementelor – trebuiesc redactate pentru a fi corect interpretate de catre programul de navigare Web.

Alinierea pe orizontala si pe verticala

Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi:

left – pentru alinierea la stanga

center – pentru pentru pozitionarea centrata

right – pentru alinierea la dreapta

Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este la dreapta.

Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile:

middle – pentru pozitionarea centrata

top – pentru alinierea la partea de sus a containerului

bottom – pentru alinierea la partea de jos a containerului

Culorile

Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adica acele culori care vor fi recunoscute si afisate de majoritatea calculatoarelor.
Exprimarea numerica se realizeaza prin codul RGB ( adica RED-GREEN-BLUE ) al culorii.Codul este alcatuit din 3 numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimand prezenta cantitativa a uneia dintre cele trei nuante care definesc codul culorii respective.
Exemplu:

Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata un tabel cu numele si codul lor:

Dimensiunile

Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri:

1.Dimensiunea absoluta

este referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli

2.Dimensiunea relativa (procentuala)

este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in care este incadrat.

3.Dimensiunea proportionala (multidimensiunea)

este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. Ea se exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.

Valori data-ora

Formatul pentru scrierea acestor valori este :

YYYY-MM-DDThh:mm:ssTZD

unde

YYYY – reprezinta anul scris cu 4 cifre

MM – reprezinta luna (Ianuarie = 01, .., Decembrie = 11)

DD – reprezinta ziua din luna, cu valori de la 01 la 31

T – ramane caracter scris cu litera mare pentru a marca inceputul scrierii orei

hh – repreinta ora scrisa cu doua cifre, de la 00 la 23. Nu se admit formulari care contin AM sau PM.

mm – reprezinta minutele cu valori intre 00 si 59.

ss – reprezinta secundele cu valori intre 00 si 59.

TZD – reprezinta precizarea fusului orar si poate lua urmatoarele valori:

"Z" pentru Coordinated Universal Time (UTC)

+hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de UTC.

-hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de UTC.

Exemplu:

1994-11-05T08:15:30-05:00

Coduri de limabje

Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoare este codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti:

Cod principal – cu ajutorul caruia se identifica tara in care limbaujul este folosit

Subcod (optional) – specifica o versiune a limbajului respectiv

Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple:

en = limba engleza

en-US = limba engleza -varianta americana

fr = limba franceza

de = limba germana

it = limba italiana

es = limba spaniola

pt = limba portugheza

Sectiunile unui document HTML

Un document HTML este impartit in trei sectiuni:

Sectiunea de informatii HTML

Sectiunea de antet a documentului

Corpul documentului

Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard. Prezenta acestor etichete in document este optionala.

Exemplu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
     <!–Sectiunea de antet a documentului cuprinde titlul documentului
     si definirea tipului si a setului de caractere folosit –>
     <title>Structura Documentului HTML</title>
     <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<!–Acesta este corpul documentului. Aici va fi plasat
continutul paginii pe care o creati–>
Salut. Aceasta este o pagina Web cat se poate de simpla.

</body>
</html>

Sectiunea de informatii

Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit. Multe editoare de HTML insereaza automat textul necesar la inceputul documentului
Exemplu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Antetul documentului

Sectiunea de antet a documentului este incadrata de controalele <HEAD> si </HEAD>. Prezenta celor doua controale in document este optionala, insa ea ajuta la o impartire mai clara a documentului pe sectiuni.
Antetul documentului cuprinde, in general, informatii precum titlul documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de navigare sau pentru ca documentul sa poata fi mai usor identificat de catre utilizator), cuvinte-cheie care folosesc motoarelor de cautare de documente, precum si alte informatii legate de documentul creat. Informatiile folosite in aceasta sectiune nu sunt afisate de catre browser, ele avand doar rol informativ. Astfel:

<TITLE>

indica titlul documentului. Textul aflat aici va fi – de obicei- afisat pe bara de titlu al programului de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele specifice ale acestui program.

ofera asa-numitele meta-informatii despre document declarand anumite proprietati impreuna cu valorile acelor proprietati. Daca valoarea unei proprietati este definita intern se va folosi controlul <META>, iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi controlul <LINK>. Succesul folosirii acestor doua controale depinde in mare masura de interpretorul de HTML utilizat de catre utilizator.
De exemplu, cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in "header-ul" documentului, adica informatii specifice protocolului HTTP si pe care browserul le "citeste" pentru a pregati afisarea documentului.Se folosesc formularile:

http-equiv= pentru numele informatiei meta

content= pentru continutul (valoarea) informatiei respective.

In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:

tipul documentului

setul de caractere folosit

Tipul documentului este – pentru un document HTML – "text/html".
Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi, caractere identificate printr-un numar de cod. De aceea, pentru ca browserul sa poata descifra corect informatia pe care o primeste este recomandabil ca acest atribut sa fie specificat in antetul fiecarui document.
Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia Internationala pentru Standardizare) si reprezinta reguli de codificare a caracterelor.
Printre cele mai folosite astfel de seturi aminitim:

ISO 8859-1 – ( sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale alfabetului latinsi este cel mai des intalnit

ISO 8859-5 – alfabetul chirilic

ISO 8859-6 – alfabetul arab

ISO 646 – codificarea ASCII restransa (pe 7 biti, adica 128 de caractere)

Exemplu:

Pentru alte tipuri de informatii meta cuprinse in antet se va utiliza formularea
<META name="[nume proprietate]" content="[valoare proprietate]">
In acest mod se pot specifica informnatii privind autorul paginii respective, sau informatii in scopuri de indexare a paginii de catre paianjeni sau motoare de cautare Web.
Exemplu:

Corpul documentului

Corpul documentului este locul unde se plaseaza continutul efectiv al documentului si este incadrat de controalele <BODY> si </BODY>. Chiar daca marcarea corpului documentului cu cele doua etichete este optionala, folosirea lor va determina o mai mare claritate in impartirea documentului pe sectiuni.
Controlul <BODY> poate sa contina atribute referitoare la fondul si marginile documentului sau culoarea textului. Astfel:

background = "Imagini/fond.jpeg" seteaza imaginea de fond a documentului.

bgcolor = "#0000ff" seteaza culoare fondului documentului (Aqua).

In cazul in care ambele sunt prezente, browserul cauta fisierul mentionat ca imagine de fond. Daca acesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului, culoarea de fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul documentului va fi dat de culoarea setata de catre bgcolor.

text = "#ff0000" seteaza culoarea textului existent in document.

Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc atributele:

Pentru Internet Explorer:

topmargin – pentru marginea de sus

leftmargin – pentru marginea din stanga

Pentru Netscape Navigator:

marginheight – pentrtu marginea de sus

marginwidth – pentru marginea din stanga

Pentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. Aceasta se poate realiza prin folosirea in antetul documentului a elementului BGSOUND. Doua dintre atributele acestuia sunt foarte importante:

src – determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastra

loop – determina de cate ori va fi repetata secventa de sunet respectiva. O valoare egala cu -1 determina repetarea continua a sunetului

Despre Aspectul Unui Document HTML

Generalitati

In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit. Exemplul oferit aici incearca sa surprinda toate elementele ce urmeaza a fi mentionate

Impartirea documentului in linii si paragrafe

Programele de explorare Web ignora caracterele Enter, taburile si spatiile multiple. Astfel, aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa.

Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare, se folosesc controalele de separare <BR> si <P> care determina desfasurarea continutului pe linii si paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul <P>, iar pentru a marca trecerea la o linie noua folositi controlul <BR>. Aceste doua controale nu necesita marcaj de inchidere (terminare).

Pentru a insera in document un numar oarecare de spatii libere se foloseste caracterul special   (NonBreakingSpace). Spatiile astfel inserate au proprietatea de a nu permite browserului trecerea la linie noua.
Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai pot folosi controalele <NOBR> si </NOBR> cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe o singura linie. Nu toate browserele recunosc aceste controale, asa ca – daca se poate – evitati sa le folositi!

Antetele de sectiune

In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni, alegerea cea mai naturala este folosirea marcajelor de formatare a subtitlurilor.
Titlurile si subtitlurile sectiunilor documentului se vor marca folosind elementele de la H1 la H6, in ordine descrescatoare a importantei, dimensiunea fontului folosit descrescand si ea. La afisare, programul de navigare va lasa linii goale inainte si dupa fiecare marcaj pentru titlu si subtitlu.

Rigla orizontala

Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata cu controlul <HR>. Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata latimea documentului.
Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care seteaza dimensiunile pe orizontala si, respectiv, pe vericala a liniei in pagina. Pentru a elimina aspectul tridimensiunal al riglei se poate utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.

Controlul <Address>

Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii utile utilizatorului pentru a contacta autorul paginii sau informatii de copyright.

Controalele <DIV> si <SPAN>

Controlul <DIV> este folosit in document pentru a grupa intr-un bloc "logic" o parte din continutul documentului in vederea atribuirii unitare a caracteristicilor legate de stilul de prezentare, sau pentru a identifica respectivul bloc de continut in vederea utilizarii lui de catre scripturile prezente in document. Browserul va trece la line noua inainte si dupa terminarea acestui marcaj.
De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale documentului, suprapuse, ascunse sau expuse, in functie de necesitatile designer-ului.

Controlul <SPAN>are rolul de a "extrage" o portiune de document – de obicei inclusa intr-un bloc marcat de controale HTML si care, eventual, are specificate un anumit numar de atribute – pentru a o identifica sau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte.

Folosirea atributului style

Ultimele versiuni ale limbajului HTML au optat in mod categorig pentru despartirea continutului unui document HTML de forma in care este el prezentat. Acest lucru este posibil prin utilizarea foilor de stil, a stilurilor definite in antetele documentului, sau prin gruparea proprietatilor legate de forma de prezentare in cadrul unui singur atribut: style.
Utilizarea acestuia in interiorul unui control HTML – aproape toate care se pot gasi in interiorul corpului documentului, cu putine exceptii (<Script> sau <Basefont>) se face respectand urmatorul tipar de scriere:

<element style ="proprietate:valoare ; proprietate:valoare;…"

unde

element

este numele elementului folosit (ex: H1, Img,Table)

proprietate

este numele unei proprietati de stil. Aceste nume nu coincid in totalitate cu numele proprietatilor marcajelor HTML. De exemplu proprietatea face a morcajului Font devine font-family ca proprietate de stil. Cele mai utilizate proprietati de stil vor fi prezentate in lectia consacrata modelelor de stil.

valoare

este valoarea acordata proprietatii respective. Ea trebuie sa corespunda valorilor posibile ale acestei proprietati.

Creatorii de documente HTML sunt puternic incurajati sa foloseasca proprietatile de stil in locul setarii individuale a fiecarii proprietati in cadrul marcajelor. Trebuie stiut, insa, ca versiunile mai vechi ale programelor de explorare Web nu recunosc nici atributul style, nici marcajul STYLE si nici referintele catre modelele de stil. De aceea, inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul exact al avantajelor si dezavantajelor pe care fiecare le implica.

Despre proprietati de stil vom discuta pe larg in capitolul dedicat lor.

Informatii "tool-tip"

Cea mai simpla forma de interactiune a documentului cu utilizatorul o reprezinta afisarea unor informatii foarte scurte despre elementele documentului atunci cand utilizatorul pozitioneaza mouse-ul in spatiul ocupat de elementele respective.
Pentru a realiza acest lucru se foloseste proprietatea de stil title, valoarea ecestei proprietati fiind textul informativ afisat in dreptul cursorului odata cu pozitionarea mouse-ului pe elementul care are setata aceasta proprietate.

Stiluri De Text

Introducere

In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita (citate, nume, etc). Pentru aceasta veti specifica explicit valori pentru unele din atributele ale unui font:

corpul de litera

culoare fontului

stilul fontului

dimensiunea fontului

Controale pentru stilul fontului

Cel mai usor mod de a marca un anumit stil corespunzator unui text in documentul dumneavoastra este de a folosi controalele care modifica stilul fontului dupa cum urmeaza:

<B>

se foloseste pentru scrierea cu caractere ingrosate (Bold).

<I>

se folooseste pentru scrierea cu caractere inclinate (Italics).

<U>

este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat.

<TT>

indica folosirea fontului monospatiu, adica acea forma de scriere in care fiecare caracter ocupa pe latime acelasi spatiu. Acest tip de font este asemanator cu cel utilizat se catre masinile de scris.

<SUB>

se foloseste pentru scrierea indicilor inferiori.

<SUP>

se foloseste pentru scrierea indicilor superiori.

este folosit pentru scriere unui text "taiat" cu o linie orizontala.

Este obligatorie prezenta etichetelor de sfarsit a controalelor mai sus mentionate pentru a putea delimita portiunea de text asaupra careia se aplica stilul de font dorit.

Controlul <FONT>

Acest control permite specificare atributelor care privesc tipul caracterelor, dimensiunea si culoarea lor. El se aplica pentru a formata un bloc de text in vedrea afisarii lui cu anumite caracteristici dorite de catre creatorul documentului. Atributele pe care le avem la indemana sunt:

Face

folosit pentru alegerea corpului de litera utilizat. Valoarea atribuita acestei proprietati trebuie sa fie un nume de font valid. Este recomandabil sa folositi fonturile "clasice" pentru a va asigura ca browserul va rcunoaste tipul de font specificat.
Exemplu:

Deoarece diferitele sisteme (Windows, Machintosh, etc) nu recunosc aceleasi fonturi, se pot atribui proprietatii Face una sau mai multe valori separate prin virgula. Astfel sistemul va alege primul font valid gasit in lista.

Size

folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7. Valoare atribuita dimensiunii fontului poate fi de doua tipuri:

absoluta

– specifica dimensiunea exacta a fontului.
Exemplu:

relativa

– specifica dimensiunea fontului fata de cea a fontului actual.
Exemplu:

In exemplul de mai sus dimensiunea fontului este majorata cu o unitate.

In cazul in care valoarea specificata este mai mica decat 1 sau mai mare decat 7, interpretorul HTML va va lua ca dimensiune valida pe 1, respectiv 7.
Valoarea imlicita a dimensiunii fontului este, de obicei, 3.

Color

este atributul cu ajutorul caruia se poate stabili culoarea textului marcat. Valorile acestei proprietati se pot scrie fie cu ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui celor 16 culori de baza.
Exemplu:

Utilizarea culorilor in text nu trebuie sa genereze situatii ambigue. Astfel, un text afisat cu culoare albastra va avea acelasi aspect cu cel al unei legaturi catre un alt fisier. De asemenea, folosirea in exces culorilor poate da documentului un aspect neplacut si obositor

Controlul <BASEFONT>

Daca dorim sa alegem un anumit tip de font, o anumita dimensiune sau culoare a fontului care sa fie valabile pe intreg continutul documentului, se va utiliza marcajul BASEFONT.
Exemplu:

Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea dimensiunea de 5 unitati. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de formatare a textului care impun alte atribute de afisare.

Observatie!
Controalele <Font> si <Basefont> nu mai sunt necesare in versiunea HTML 4.0. Setarea optiunilor de afisare a textului se face cu ajutorul atributului style corespunzator elementului vizat. Versiunile mai vechi ale programelor de explorare nu recunosc, insa, acest atribut. De aceea decizia de a folosi una sau alta dintre variante trebuie sa ia in considerare toate avantajele si dezavantajele posibile.

Stiluri logice de formatare a textului

Exista cateva stiluri predefinite de punere in evidenta a unui text:

– pentru evidentiere puternica

<Em>

– pentru scriere cu caractere italice

<Cite>

– pentru inserare de citate

<Code>

– pentru listing de program

<Dfn>

– pentru definitie de cuvant

– pentru a pune in evidenta un bloc de text. Blocul de textul va fi indentat spre dreapta fata de marginea stanga a elementului care il contine.

<Pre>

– folosit pentru afisarea textului "preformatat". Textul marcat de etichetele de inceput si sfarsit ale acestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a fost scris in sursa documentului HTML. Astfel, se vor respecta spatiile libere si trecerea la linie noua, dar caracterele vor fi afisate cu font de tip monospatiu.

Mai trebuie sa amintim aici si posibilitatea de a marca modificarile aparute in versiunile ulterioare ale documentului cu ajutorul controalelor <Ins> si <Del>. Dar despre ele nu putem spune ca aplica un stil predefinit textului pe care il marcheaza, deoarece modalitatea in care acesta este afisat in fereastra programului de explorare Web difera foarte mult de la program la program. De obicei aceste marcaje contin atributul datetime pentru a informa despre data de la care sunt valabile modificarile pe care aceste controale le notifica.

Liste

Introducere

De multe ori, in redactarea unor documente ajungem in punctul in care trebuie sa enumeram un set de elemente care formeaza, din punct de vedere logic, o multime. Prezentarea acestora trebuie realizata in asa fel incat relatiile dintre ele, sau dintre ele si eventualiele "subelemente" sa fie cat mai clar exprimate din punct de vedere vizual. Pentru aceasta se folosesc diferitele tipuri de liste.

Liste neordonate

Probabil cele mai intalnite liste in cadrul documentelor HTML sunt cele neordonate. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste elementul UL. Fiecare lista contine un set de elemente numite "itemi", prezenta unui item in cadrul unei liste marcandu-se cu ajutorul elementului LI.

Exemplu de liste neordonate

Componentii trupei The Beatles au fost:

John Lennon

Paul Mccartney

Ringo Star

George Harrison

Liste imbricate:

element 1

element 1.1

element 1.2

element 1.2.1

element 1.2.2

element 1.3

element 2

element 3

element 3.1

Folosirea atributului "type":

Ianuarie

Februarie

Martie

Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta, daca directia de scriere este de la drapta la stanga) listei; astfel, prezentarea ei devine foarte clara si atractiva. Mai mult, ficare item al listei va avea un marcaj in fata sa, corespunzator nivelului de subordonare al listei. Acest marcaj poate fi ales cu ajutorul atributului Type, iar valorile posibile sunt:

disc

– pentru un cerculet plin

circle

– pentru un cerculet gol

square

– pentru un patratel plin

Implicit, prgramele de explorare Web folosesc tipul disc pentru primul nivel de subordonare (si, respectiv, de indentare), circle pentru al doilea nivel si square pentru urmatoarele nivele.

Eticheta de sfarsit a unui element al listei(</li>) nu este obligatorie, elementul respectiv considerandu-se incheiat in momentul aparitiei unei noi etichete <li> sau a etichetei care incheie lista.

Elementul UL inlocuieste elementele DIR si MENU din versiunile mai vechi ale limbajului HTML

Liste ordonate

Listele ordonate se aseamana foarte mult cu cele neordonate, diferenta majora constand in faptul ca listele ordonate atribuie ca marcaj fiecarui item un element (numar, litera) prin care se evidentiaza ordinea sa in cadrul listei. Listele ordonate sunt marcate in interiorul documentului cu ajutorul elementului OL.
Pentru a stabili care va fi marcajul de ordonare in lista al fiecarui item se foloseste atributul Type. Valorile acestuia pot fi:

1

pentru cire arabe: 1,2,3,… (valoare implicita)

a

pentru litere mici: a,b,c,…

A

pentru litere mari: A,B,C,…

i

pentru cifre romane tiparite cu litere mici: i,ii,iii,iv,…

I

pentru cifre romane tiparite cu litere mari: I,II,III,IV,…

Exemplu: Liste ordonate

Lista ordonata implicita:

element 1

element 2

element 2.1

element 2.2

element 3

element 3.1

element 3.1.1

element 3.1.2

Folosirea atributului "type":

element 1

element 2

element 2.1

element 2.2

element 3

element 3.1

element 3.1.1

element 3.1.2

element 3.2

Folosirea atributului "value"

Element 1

Element 2

Element 2.1

Element 2.2

Element 3

Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in felul acesta notiunea de "lista ordonata" isi pierde sensul.
In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cu o unitate la fiecare item adaugat. Pentru a modifica valoarea de start a numerotarii elementelor listei se foloseste atributul Start asociat elementului OL. Astfel, formularea

are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b", "ii",etc), celelalte continuand in mod normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte valoari in dreptul unui item se foloseste atributul Value asociat elementului LI. Valoarea acordata acestui atribut va fi numarul (sau ordinea caracterului) scris in fata elementului respectiv.
Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenta itemilor din listele subordonate, numerotarea facandu-se separat pe fiecare nivel de subordonare

Liste de definitii

Asa cum foarte clar este sugerat prin numele sau, lista de definitii este folosita pentru a prezenta si "defini" (a da informatii despre) un anumit numar de elemente numite termenii listei.
Prezenta listei de definitii este marcata prin perechea de controale <DL> si </DL>.
In cadrul listei, o definitie este alcatuita din doua parti:

Termenul definit

marcat de controalele <DT> si </DT>

Descrierea definitiei

marcata de controalele <DD> si </DD>

Termenii definiti vor avea definitiile indentate uniform fata de marginea stanga (dreapta) a elementului container pentru o cat mai clara oferta a informatiei. De obicei stilul de scriere a termenilor definiti va trebui sa scoata in evidenta (de exemplu prin folosirea caracterelor ingrosate) importanta acestor elemente. Implicit browserele nu realizeaza acest lucru, de aceea este de datoria realizatorului documentului sa ia in considerare si acest aspect.
Este posibil ca enumerarea termenilor impreuna cu definitiile corespunzatoare sa se realizeze si fara a fi incadrate intre controalele de marcare a listei de definitii (<DL>), dar in acest caz prezentarea vizuala a corpului definitiei poate sa nu mai fie cea pe care o doriti. De aceea este preferabil sa folositi marcajele de inceput si sfarsit ale listei.
De asemenea, in absenta etichetei </dt> se considera ca elementul dt se incheie acolo unde apare eticheta <dd>.

O alta utilizare a listei de definitii este cea de introducere a dialogurilor in pagini. Astfel, termenul definit marcheaza personajul care se exprima, iar descriere definitiei prezinta spusele acestuia.

Exemplu: Liste de definitii

Va prezentam cateva dintre formele si genurile muzicale intalnite:

ADAGIO

indica tempoul linistit, rar al unei piese muzicale. Acest termen este precizat de compozitor la inceputul unei lucrari sau pe parcurs. Uneori apare insotit de un alt termen, cantabile sau sostenuto etc., care maniera (expresia) in care trebuie interpretata muzica.
In ciclul de sonata clasica, adagio reprezinta partea lenta (de obicei a doua) ce realizeaza contrastul cu partile extreme, de regula repezi.

ALEGRIAS

dans popular spaniol in masura de 3/4, unul dintre cele mai vechi din repertoriul de cantece si dansuri flamengo, specifice Andaluziei (sudului Spaniei).

ALLEMANDA

dans popular de origine germana, cunoscut inca din sec. XVI care a suferit in decursul timpului transformari de ordin melodic, ritmic si mai ales de structura, atingand cea mai evoluata forma in suitele instrumentale si orchestrale ale lui Johann Sebastian Bach.(…)

Legaturi si referinte

Introducere

Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta proprietati de formatare si structurare care sa permita prezentarea informatiei de tip text intr-o forma cat mai logica si reusita din punct de vedere vizual-estetic.Insa caracteristica cea mai importanta a documentelor HTML este aceea de a putea contine in interiorul lor legaturi catre alte documente (sau programe) care se pot gasi pe acelasi calculator sau pe unul dintre calculatoarele din imensa retea a Web-ului. Mai mult, exista posibilitatea ca un anumit element din continutul documentului sa contina o legatura catre un alt element din cadrul aceluiasi document. Despre toate acestea in cele ce urmeaza.

Referinte externe

Sunt sigur ca ati intilnit situatii in care, intr-o carte, atunci cand autorul face referire la un citat sa o informatie dintr-o alta carte sau un dintr-un alt document acesta insereaza intr-o paranteza numele lucrarii referite, eventual pagina sau sectiunea referita. Daca informatia respectiva prezinta interes pentru utilizator, acesta nu are decat sa caute in rafturile bibliotecii sale (in cazul cel mai fericit) sau ale altor biblioteci, materialul amintit. Aceasta maniera fragmentata de a primi informatia este singura posibila in cazul textelor obisnuite a caror expunere se realizeaza pe cele doua dimensiuni ale suprafetei plane reprezentate de foaia de hartie.

Limbajul HTML rezolva aceasta problema prin introducerea notiunii de hipertext. Hiper-textul difera de textul obisnuit prin introducere in interiorul documentului a unor elemente de legatura cu alte documente existente in Web. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se realizeaza trecerea instantanee de la documentul initial (documentul sursa) la cel vizat (documentul destinatie), fiind oricand posibila revenirea la documentul initial. Orice legatura are doua capete numite ancore si un sens. Primul capat (elementul care refera) este ancora sursa, iar al doilea capat (elementul referit) este ancora destinatie. Ancora sursa se numeste referinta si ea poate fi externa sau interna, dupa cum ancora destinatie se gaseste in afara sau in interiorul documentului care contine referinta.

Prezenta unei referinte in interiorul documentului se marcheaza cu ajutorul perechii de controale HTML <A> si </A>. Pentru ca marcajul de referinta sa fie functional, acesta trebuie sa contina atributul Href, numit atribut de referinta hipertext. Valoarea acestuia este un URL care localizeaza documentul referit.
Exemplu:

<A href = "http://www.msn.com/">Legatura cu..</A>

Legaturile unui document nu sunt limitate la legaturi cu alte documente. El poate sa contina legaturi de tip "mail" sau legaturi catre fisiere de tip "program" care vor fi executate atunci cand utilizatorul activeaza referinta de legatura corespunzatoare.

URL-uri relative

Despre URL-uri am vorbit in introducerea acestei documentatii. Insa acum, inainte de a trece la cateva exemple simple, e cazul sa vorbim despre URL-uri relative.

Daca informatia pe care o puneti la dispozitia utilizatorilor in Web este alcatuita din mai multe documente corelate, ea trebuie structurata corespunzator intr-o formula de directoare si subdirectoare care sa va ofere o distribuire cat mai logica a materialelor. Aceasta structura formeaza un "site".
Sa presupunem ca directorul radacina al site-ului se numeste "Radacina". El contine directoarele "Produse" si "Informatii" si documentul "index.html". In interiorul directorului "Produse" se gasesc documentele "Carti.html" si "Muzica.html", iar in directorul "Informatii" se gaseste documentul "Preturi.html". Un URL relativ este URL-ul in care nu se trece decat calea de la fisierul curent la fisierul destinatie. Calculatorul va completa automat calea catre documentul curent, construind astfel URL-ul complet. In cazul trecerii catre directorul parinte se foloseste expresia "..". Exemplu:
Daca fisierul curent este "index.html", pentru a referii documentul "Carti.html" se foloseste expresia "Produse/Carti.html".
Daca fisierul curent este "Carti.html", pentru a referi documentul "Muzica.html" de foloseste expresia "Muzica.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul "index.html" de foloseste expresia "../index.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul "Preturi.html" de foloseste expresia "../Informatii/Preturi.html"

Iata schema site-ului. Alegeti documentul pe care il doriti prezentat ca exemplu in folosirea ancorelor si a URL-urilor relative:

  |   Radacina   |
        –––––
                      |
          ––––––––––––––
          |                            |                     |
     ––––        ––––              ––––
    | index.html |  |  Produse  |          |  Informatii  |
     ––––        ––––              ––––
                                     |                             |
                             ––––                    –––––
                             |               |                |  Preturi.html  |
                   ––––      ––––           ––––
                  | Carti.html |  | Muzica.html |
                   ––––      ––––

Folosirea URL-urilor relative este foarte convenabila deoarece, atunci cand site-ul este publicat, locatia sa pe server poate fi schimbata de catre administratorul calculatorului, aceasta modificare afectand doar calea catre radacina site-ului, si nicidecum relatiile si legaturile din interiorul site-ului. Exista posibilitatea de a fixa un URL de baza relativ la care sa se calculeze toate URL-urile relative intr-un document. Acest lucru este posibil prin folosirea in sectiunea de antet a documentului a controlului de marcaj <Base>, al carui atribut href fixeaza baza de formare a documentului. De exemplu, daca in in documentul "Carti.html" se fixeaza

inseamna ca toate URL-urile relative se calculeaza fata de documentul "index.html", o referinta catre documentul "Preturi.html" avind forma:

<A href = "Informatii/Preturi.html">Preturile</A> sunt urmatoarele…

Folosirea acestei optiuni trebuie facuta doar daca dumneavoastra controlati schimbarile efectuate in amplasarea site-ului pe server. Altfel, documentele referite nu vor mai fi gasite, iar in fereastra va fi afisata o pagina continand mesajul de eroare corespunzator.

Inapoi la referinte

In interiorul documentului, textul elementului referinta (interna sau externa) este scris de obicei cu culoare albastra si subliniat. Pentru a alege culoarea de prezentare a referintelor intr-o pagina se folosesc urmatoarele atribute ale elementului Body:

link – pentru culoare textului referintelor nevizitate

vlink – pentru culoarea textului referintelor care au fost deja vizitate

alink – pentru culoarea textului referintei in momentul in care aceasta care este activata.

In momentul in care activam o referinta catre un document HTML, acesta va fi afisat in fereastra programului de explorare Web, in locul documentului initial.
Daca vrem sa controlam fereastra in care va fi afisat noul document putem sa folosim atributul target a elementului ancora. Valorile posibile ale acestui atribut sunt:

_self – pentru a afisa documentul destinatie in fereastra documentului sursa (valoare implicita)

_blank – pentru a afisa documentul destinatie intr-o noua fereastra deschisa de programul de explorare

_parent – folosita la cadre de ferestre

_top – folosita, de asemenea, la cadre de frestre.

Referinte interne

Activarea unei referinte catre un documet face ca acel document sa fie afisat in fereastra programului de explorare. Dar daca apare situatia in care din documentul referit ne intereseaza un anumit element si vrem ca acesta sa fie afisat incepand cu prima linie a ferestrei? In acest caz trebuie sa definim in acel document o ancora destinatie numit "tinta".
O tinta se marcheaza cu ajutorul elementului ancora (A) caruia i se atribuie un nume de identificare cu ajutorul atributului Name sau Id.
Exemplu:

<A name = "intro"><H2>Introducere</H2></A>

Pentru a creea in acelasi document o referinta catre tinta definita mai sus nu ramane decat sa scriem corect atributul de referinta hipertext.
Exemplu:

<A href = "#intro">Partea 1.Introducere </A>

Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care contine tinta si numele de identificare a tintei. Exemplu:

<A href = "www.Calculator.com/Documente/Document1.html#intro">Partea 1.Introducere </A>

Este foarte important ca numele de identificare a unei tinte sa fie unic in cadrul unui document. In caz contrar destinatia referintei nu mai este valida.

Utilizarea Imaginilor

Introducere

In lectia precedenta ati invatat cum sa folositi elementul esential al unui document HTML: legatura cu alte documente sau programe. Insa va lipseste posibilitatea de a da documentului un aspect cat mai atractiv pentru cei ce il viziteaza. Pentru a realiza acest lucru va trebui sa "impodobiti" documentul cu imagini, fie ele statice sau dinamice. Trebuie stiut insa faptul ca incarcarea imaginilor in document este o operatiune care costa timp – fara sa mai vorbim ca exista programe de explorare Web care nu lucreaza cu imagini! – si de aceea va trebui sa faceti o alegere echilibrata intre numarul si dimensiunea imaginilor -pe de o parte – si timpul de incarcare a documentului – pe de-alta parte.

Inserarea unei imagini

Pentru a marca prezenta unei imagini in document se foloseste elementul IMG, al carui atribut Src este URL-ul fisierului imagine. Tipurile de fisiere-imagine compatibile cu HTML sunt GIF, JPEG si PNG.
Exemplu:

Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa.

Ar fi bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care va fi afisat in locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care utilizatorul decide sa renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web). Daca imaginea este afisata, valoarea atributului Alt va fi folosita ca mesaj "tool-tip" .

In cazul in care doriti sa prezentati in cadrul documentului un anumit numar de imagini a caror dimensiune ar afecta dramatic timpul de incarcare al documentului in fereastra programului de explorare se poate aplica urmatoarea tehnica:
Se creeaza copii de dimensiuni mici ale acestor imagini. Aceste copii vor fi incarcate in document si vor avea rolul unor legaturi catre fisierele ce contin imaginile in dimensiunea lor initiala. Atunci cand utilizatorul va activa una dintre aceste legaturi in fereastra se va incarca fisierul imagine dorit

Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align. Valorile posibile sunt:

bottom

pentru alinierea textului la baza inferioara a imaginii (valoare implicita)

middle sau center

pentru alinierea textului pe centrul imaginii

top

pentru alinerea textului la baza superioara a imaginii

left

pentru a plasa imaginea in extremitatea stanga a elementului container, iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea.

right

pentru a plasa imaginea in extremitatea dreapta a elementului container, iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea.

In cazul ultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe prima linie de sub imagine. In acest caz se foloseste atributul clear al elementului BR care apare inaintea blocului de text pe care vrem sa il translatam. Valorile acestui atribut pot fi:

left

pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este libera

right

pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este libera

all

pentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt libere

Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se folosesc atributele vspace si hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginea de elementele adiacente ei in cadrul documentului

Atributele width si height stabilesc dimensiunile suprafetei din document care va fi ocupata de imagine. Precizarea acestor atribute determina o mai rapida incarcare a documentului in fereastra programului de explorare, dar in cazul precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata pentu a acoperii exact suprafata precizata.

Folosirea atributului border determina afisarea unui chenar care va incadra imaginea. Valoarea acestui atribut va reprezenta grosimea chenarului, o valoare egala cu 0 (valoare implicita) determinand afisarea imaginii fara chenar

Folosirea imaginilor ca elemente "ancora"

In documentele HTML se folosesc frecvent imaginile pe post de ancore, adica legaturi catre alte documente sau programe. Acest lucru se poate realiza foarte usor prin plasarea imaginii in interiorul unui element ancora (A). Exemplu:

Observati introducerea textului alternativ care devine obligatoriu in cazul in care imaginea nu poate fi afisata de catre browser.
In momentul incadrarii elementului imagine intre controalele <a> si </a>, browserele adauga imaginii o bordura. Pentru a evita aparitia ei folositi atributul border cu o valoare atribuita egala cu 0.

Exista insa si posibilitatea ca aceea si imagine sa fie ancora pentru mai multe legaturi prin definirea unei harti de imagine.

O harta de imagine este un element grafic (imagine) care dispune de una sau mai multe regiuni reprezentand legaturi cu alte document sau programe din Web. Daca vreti, se poate spune ca o harta de imagine aste asemanatoare unei liste in care fiecare item reprezinta o legatura hipertext.
Exista doua tipuri de harti de imagine. Primul, harta de imagine pe server, este veche si neconvenabila datorita necesitatii schimbului de informatii cu serverul, procedura care trebuie – pe cat posibil- evitata.
Al doilea tip de harta este harta de imagine la client, denumita astfel deoarece legaturile hartii cu alte documente sau programe sunt expuse in cadrul documentului si gestionate de catre programul de explorare Web utilizat de client. Despre aceasta ne vom ocupa in cele ce urmeaza.

Pentru ca o imagine sa devina harta de imagine, ea trebuie pusa in legatura cu un element de marcaj HTML numit MAP.
Acest element va contine, de fapt, lista regiunilor senzitive din cadrul imaginii. Fiecarea regiune este marcata la randul ei de marcajul AREA.

Folosirea clipurilor video in Internet Explorer

Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri video) in acelasi mod in care se insereaza o imagine statica. Astfel, pentru elementul IMG se folosesc atributele:

dynsrc – pentru a determina URL-ul fisierului imagine

loop – pentru a determina de cate ori va fi rulat clipul respectiv. Valoare implicita este "1". O valoare egala cu 0 sau -1 determina rularea continua a clipului

start – determina momentul de start al clipului. Acesta poate fi "fileopen" ( valoare implicita) pentru pornirea clipului odata cu incarcarea paginii in browser, sau "mouseover" pentru pornirea lui atunci cand cursorul mouse-ului este pozitionat deasupra sa.

Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poate folosi elementul embed cu atributele:

src – pentru a preciza sursa fisierului audio sau video folosit

width si height – pentru a preciza dimensiunea ocupata de obiectul respectiv in document.

Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea browserului. Pentru fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" , iar pentru cele audio formatul "mp3".

TABELE

Introducere

In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a prezenta in interiorul documentului informatia structurata. Insa folosirea listelor este utila doar atunci cand structura informatiei nu prezinta un grad mare de complexitate. De aceea apare necesitatea unui instrument care sa poata rezolva aceasta problema. Insa, asa cum veti vedea in cadrul acestui capitol, tabelele au si alte utilizari, jucand un rol foarte important printre instrumentele pe care le au la indemana relizatorii paginilor Web.

Marcarea unui tabel

Un tabel este marcat in document de perechea de controale <TABLE> si </TABLE>.
Pentru a specifica principalele proprietati ale tabelului se folosesc urmatoarele atribute:

width si height

Stabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ. Dimensiunile pe care tabelul le va avea in cadrul documentului vor fi calculate de catre programul de explorare Web tinand cont de optiunile specificate prin cele doua atribute, dar si de dimensiunile elementelor din interiorul tabelului in asa fel incat acestea sa fie vizibile.

align

Determina pozitionarea pe orizontala a tabelului in cadrul documentului. Optiunile posibile au fost prezentate in capitolul al II-lea

border

Stabileste grosimea in pixeli a chenarului care inconjoara tabelul. In cazul in care s-a ales valoarea 0 tabelul nu va afisa nici chenar, nici linii de demarcare in interiorul sau.

frame

Stabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Optiunile posibile sunt:

void – nici o latura

above – latura de sus

below – latura de jos

hsides – laturile de sus si de jos

vsides – laturile din stanga si din dreapta

lhs – latura din stanga

rhs – latura din dreapta

box – toate laturile

border – toate laturile

rules

determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile posibile sunt:

none – nici o linie

groups – liniile dintre grupurile definite ale tabelului. Cum de defineste un grup vom vedea putin mai tarziu.

rows – liniile orizontale

cols – liniile vericale

all – toate liniile

cellspacing

stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre marginile tabelului si celulele din apropiere.

cellpading

stabileste spatiul dintre marginile unei celule si continutul acesteia.

bgcolor

stabileste culoarea de fond a tabelului.

background

stabileste imaginea de fond a tabelului.

Elementele care constitue un tabel sunt:

eticheta de tabel

antetul tabelului

corpul tabelului

subsolul tabelului

Corpul tabelului

Corpul tabelului este partea cea mai importanta, el continand informatia propriu-zisa afisata in tabel. Se marcheaza cu ajutorul controalelor <TBODY> si </TBODY>. Pentru a avea consistenta, acesta trebuie sa contina cel putin o linie din tabel.
Marcarea corpului tabelului nu este obligatorie, prezenta sa fiind implicita in cadrul tabelului in momentul marcarii primei linii a lui.
O linie in tabel se marcheaza cu ajutorul controalelor <TR> si </TR>. Ea contine una sau mai mule celule marcate prin controalele <TD> si </TD>. Nu este obligatoriu ca toate liniile sa contina acelasi numar de celule. Numarul de coloane ale unui tabel se considera a fi numarul maxim de celule a liniilor tabelului. Pe o linie celulule sunt dispuse de la stanga la dreapta in ordinea in care au fost introduse in codul sursa al documentului, exceptie facand cazul in care directia de scriere in tabel a fost stabilita de la dreapta la stanga cu ajutorul atributului dir, caz in care dispunerea lor se va face de la dreapta la stanga.
Intr-un tabel pot exista mai multe corpuri de tabel, aceasta optiune putandu-se pune in practica atunci cand se doreste gruparea liniilor unui tabel conform unor regului stabilite.

Corpul unui tabel poata sa contina atribute care determina formatarea elementelor pe care acesta le contine:

bgcolor

seteaza culoarea de fond a celulelor din interiorul sau. Acest atribut nu este implementat in varianta 4.7 a lui Netscape Navigator

align

determina pozitionarea pe orizontala a continutului in cadrul unei celule

valign

determina pozitionarea pe vericala a continutului unei celule. Optiunile posibile sunt:

top – alinierea se face la baza superioara a celulei.

middle – pozitionare centrata in celula.

bottom – alinierea se face la baza inferioara a celulei.

Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul container al celulelor care contin informatia propriu-zisa a tabelului. Lui i se pot atasa, de asemenea, atributele care se refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea elementelor in interiorul acestor celule.

Celulele unui tabel pot sa contina in interiorul lor text, imagini, ancore de legaturi, sau chiar alte tabele. In afara proprietatilor mentionate la liniile tabelului, celulele au doua atribute foarte importante care permit formatarea si structurarea informatiei in interiorul tabelului:

colspan

determina numarul de coloane ocupate de celula. Valoarea implicita este "1".

rowspan

determina numarul de linii ocupate de celula. Valoarea implicita este "1".
Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane trebuie avut in vedere ca nu cumva doua celule diferite sa pretinda spatiul unei aceleasi celule.

width si height

recomanda programului de explorare web dimensiunile celulei. Nu uitati ca dimensiunile afisate ale celulelor se fac atat in functie de optiunile exprimate prin atributele specifice, cat si tinand seama de dimensiunile elementelor care constitue continutul acestor celule.

Aceste atribute sunt folosite si atunci cand tabelul este folosit pentru pozitionarea elementelor in cadrul documentului.

Eticheta de tabel

Eticheta de tabel este folosita pentru a afisa deasupra tabelului un text scurt care – de obicei – informeaza despre datele continute in tabel. Ea se marcheaza cu ajutorul controalelor <CAPTION> si </CAPTION>. Ecest element trebuie sa apara imediat dupa controlul de inceput care marcheaza tabelul. Un tabel nu poate avea decat o singura eticheta.
Cel mai important atribut al etichetei de tabel este align. Acesta determina pozitionarea etichetei fata de tabel si are urmatoarele valori posibile:

top – determina pozitionarea etichetei in centru, deasupra tabelului (valoare implicita)

bottom – determina pozitionarea etichetei sub tabel

left – determina pozitionarea etichetei deasupra tabelului, aliniata la stanga

right – determina pozitionarea etichetei deasupra tabelului, aliniata la dreapta

Antetul si subsoulul tabelului

Antetul si subsolul tabelului sunt componente ale tabelului care contin in general informatii despre datele prezentate, spre deosebire de corpul tabelului care contine respectivele date. Antetul si subsolul sunt formate din una sau mai multe linii, linii care, la randul lor, contin una sau mai multe celule.

Antetul este marcat de controalele <THEAD> si </THEAD>, iar subsolul tabelului este marcat de controalele <TFOOT> si </TFOOT>. Aceste controale trebuie sa apara inaintea controlului de inceput care marcheaza corpul tabelului.(In Netscape 4.7 subsoloul tabelului trebuie pozitionat dupa corpul acelui tabel.)
In mod normal, THEAD, TBODY si TFOOT contin acelasi numar de coloane.

Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul elementului TR. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de obicei cu controalele <TH> si </TH>, dar este posibila si folosirea marcajelor pentru celulele folosite in corpul tabelului, deoarece, in mare masura, cele doua elemente sunt echivalente.

Atributele cele mai importante ale antetului si subsolului tabelului sunt cele legate de pozitionare, dimensionare sau fond si au fost prezentate in sectiunea dedicata corpului tabelului.

Grupuri de coloane

Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe orizontala informatia prezentata intr-un tabel. Exista si posibilitatea de a grupa coloanele unui tabel prin definirea unuia sau mai multor grupuri de coloane. Un grup de coloane se marcheaza prin controalele <COLGROUP> si </COLGROUP> , marcajul de inchidere putand sa lipseasca. Pentru a specifica numarul de coloane incluse in grup se pot folosi doua modalitati:

prin folosirea atributului span a carui valoare determina numarul de coloane continute de grup

prin specificarea explicita a coloanelor din grup cu ajutorul elementului COL. astfel, numarul de coloane al grupului va fi egal cu nmarul de elemente COL care urmeaza unui element COLGROUP.

In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloane contine o singura coloana.

Grupurile de coloane se introduc in document inaintea antetului sau a corpului tabelului si ele pot contine atribute referitoare la pozitionarea continutului in interiorul celulelor sau la dimensiunea coloanelor pe care acestea le contin. Astfel, atributul width recomanda latimea pe care ar trebui sa o aiba toate coloanele grupului. Valoarea "0*" determina alocarea fiecarei coloane a grupului a unui spatiu minim pe orizontala astfel incat continutul celulelor sa fie vizibil.
De asemenea, in cazul in care grupul de coloane se construieste prin specificarea separata a elementului COL pentru fiecare coloana acest element poate sa contina atributele referitoare la dimensionarea fiecarei coloane in parte sau la pozitionarea continutului in interiorul celulelor. Trebuie stiut ca, in mod implicit, programul de explorare calculeaza dimensiunile coloanelor la valori minime necesare pentru ca elementele din interiorul celulelor sa fie vizibile.

Pagina de Cadre si Cadre in Pagina

Introducere

In lectia dedicata referintelor si legaturilor am vazut ca atunci cand se activeaza o ancora de legatura cu un alt document, acesta din urma (documentul destinatie) este incarcat de catre programul de explorare Web in fereastra documentului sursa sau intr-o fereastra noua. Ambele optiuni prezinta neajunsul de a nu putea avea ambele documente deschise simultan in aceeasi fereastra pentru a putea avea acces cu usurinta la fiecare dintre ele.
Elementele introduse in aceasta lectie rezolva in mod foarte elegant aceasta problema.

Pagina de cadre

O pagina de cadre este un document HTML care va permite sa vizualizati in ceeasi fereastra mai multe documente, fiecare asezat in propriul cadru, cadru care este de fapt o fereastra de sine-statatoare si care permite derularea documentului sau incarcarea unui alt document. Intr-o pagina de cadre lipseste elementul BODY, continutul paginii fiind marcat cu ajutorul controalelor <FRAMESET> si </FRAMESET>.
Ficare cadru din interiorul documentului este marcat cu ajutorul controalelor <FRAME> si </FRAME>.

Pozitionarea si dimensionarea cadrelor

Pentru a da informatii despre asezarea si dimensiunea cadrelor continute se folosesc urmatoarele atribute ale elementului FRAMESET:

rows

determina spatiul pe verticala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolute, relative sau proportionale ale inaltimii fiecarui cadru. Caracterul "*" in cadrul listei acorda cadrului corespunzator spatiul liber ramas.
De exemplu, formularea

determina impartirea documentului pe vericala in doua cadre, primul avind inaltimea de 60% din spatiul vertical disponibil in fereastra, iar al doilea de 40% din acelasi spatiu.

cols

determina spatiul pe orizontala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolute, relative sau proportionale ale latimii fiecarui cadru.

Numarul valorilor separate de virgula trebuie sa fie acelasi cu numarul cadrelor care impart pe verticala sau pe orizontala documentul. In cazul in care se specifica valori pentru ambele atribute documentul va fi impartit atat pe orizontala cat si pe verticala, ordinea in care vor fi asezate cadrele in pagina fiind determinata de ordinea atributelor rows si cols si de ordinea elementelor FRAME in cadrul elementului FRAMESET.

In cazul in care se doreste structurarea mai pretentioasa a cadrelor in document se pot folosi cadrele imbricate, adica acele cadre care contin la randul lor alte cadre.

Iata si codul sursa al paginii de "cuprins", pagina ce continea tintele definite ale legaturilor din exemplul precedent:

Deoarece cadrele sunt elemente relativ noi in limbajul HTML, exista posibilitatea ca unele programe de explorare Web sa nu le poata afisa. De aceea e bine ca o pagina cu cadre sa contina si informatie alternativa, informatie care va fi afisata de aceste programe. Pentru aceasta se folosesc marcajele <NOFRAMES> si </NOFRAMES>, dupa modelul prezentat in exemplele anterioare.

Elementul cadru

Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele <FRAME> si </FRAME>. Atributele care specifica modul de afisare a unui cadru sunt:

name

identifica un cadru pentru a putea fi folosit ca valoare a atributului target a unei ancore sursa.
Exista si posibilitatea de a predefini tintele referintelor la nivel de document cu ajutorul aceluiasi atribut aplicat elementului BASE. Astfel, o formulare de genul:

face ca toate ancorele prezente in documentul respectiv sa aiba ca tinta cadrul "cadruA", cu exceptia celor care specifica ele insele o alta tinta.
Pentru a afisa un document in fereastra mare, nedivizata in cadre, folositi valorile "_parent" sau _top pentru atributul target al elementului ancora.

src

specifica URL-ul documentului care va fi afisat in cadru la incarcarea paginii de cadre in fereastra.

noresize

reprezinta un atribut e tip boolean care, prin prezenta sa, impune imposibilitatea de a redimensiona cadrul.

scrolling

determina afisarea sau nefisarea barelor de defilare pe mariginea cadrului. Urmatoarele optiuni sunt posibile:

auto

determina aparitia barelor de defilare doar in momentul in care o parte din document nu este vizibila in cadru (optiune implicita)

yes

determina afisarea cadrului cu bare de defilare, indiferent de dimensiune documentului continut

no

determina afisarea cadrului fara bare de defilare, indiferent de dimensiune documentului continut

frameborder

determina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente. Optiunile posibile sunt:

1

determina afisarea bordurii (valoare implicita).

0

determina neafisarea bordurii.

marginwidth si marginheight

stabilesc spatiul pe orizontala si, respectiv, pe verticala lasat liber intre marginile cadrului si continutul sau.

Cadre in interiorul unui document obisnuit

Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care sa contina un alt document. Acest lucru se realizeaza prin folosirea elementului numit "fereastra interna" si marcat cu ajutorul controalelor <IFRAME> si </IFRAME>.

In afara atributelor prezentate in paragraful precedent, elementul IFRAME mai dispune de cateva specifice:

width si heiht

determina dimensiunile pe orizontala si verticala ale ferestrei.

align

determina pozitionarea ferestrei in document in raport cu elementele adiacente . Valorile si modul de pozitionare sunt analoage celor descrise la alinierea imaginilor.

Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul noresize.

O alta modalitate de a insera un document HTML sau un alt tip de document, o imagine sau un applet intr-o pagina Web este folosirea elementului OBJECT.
Atributul data reprezinta URL-ul fisierului de incarcat in cazul documentelor sau al imaginilor, iar width si height determina dimensiunile alocate obiectului in pagina.

Formularele HTML

Introducere

Sunt sigur ca ati intalnit in Web pagini in care nu vi se ofera ci vi se cere informatie. Pagini in care ati fost rugati politicos sa va introduceti numele, varsta, adresa sau o parola. Toate aceste date erau "colectionate" de catre un calculator numit "server" si mai apoi procesate, utilizatorul primind ca raspuns – in general – o pagina de confirmare sau una care semnaleaza prezenta erorilor in receptionarea acestor date sau erori legate de valorile introduse de utilizator.

Deoarece folosirea acestui tip de comunicare necesita publicarea documentelor pe un server Web si folosirea unor tipuri de programe care depasesc scopul acestei documentatii, exemplele prezentate nu sunt functionale. Ele se pot folosi doar pentru studierea documentului sursa si pentru a avea o imagine generala asupra folosirii formularelor.

Formulare HTML

Formularele reprezint un "container" in interiorul caruia se gasesc elemente numite controale, elemente cu ajutorul caruia utilizatorul specifica informatia care urmeaza a fi trimisa serverulului. Formularele sunt marcate cu ajutorul controalelor <FORM> si </FORM>. Ele prezinta doua atribute esentiale pentru comunicarea cu serverul:

action

reprezinta un URL al unui fisier ce urmeaza a procesa informatia trimisa de utilizator. Acesta poate fi un program de tip CGI (programe care creeaza dinamic pagini HTML) sau asa numitele programe de script pe server cum sunt fisierele de tip asp sau jsp.

method

reprezinta metoda HTTP prin care se realizeaza trimiterea datelor catre programele de procesare. Valorile aproape unanim folosite sunt "get" si "post". Trebuie stiut ca datele introduse in formular sunt "expediate" ca perechi de forma nume=valoare, numarul perechilor fiind egal cu numarul datelor din formular trimise spre procesare. Diferenta intre cele doua metode este urmatoarea:
Metoda get adauga aceste perechi la sfarsitul URL-ului de destinatie, despartite de acesta prin caracterul "?", pe cand metoda post lasa URL-ul de destinatie intact, informatia trimisa fiind inglobata in asa numitul "corp al formularului".
Aceste amanunte sunt necesare celor care scriu programele ce urmeaza a primi datele utilizatorului pentru a sti in ce mod sa extraga din "pachetul" receptionat aceste date.

Alte atribute folosite sunt:

enctype

specifica metoda de compactare utilizata pentru informatiiile continute in corpul formularului (daca metoda aleasa e "post"). Valoarea implicita e "application/x-www-form-urlencoded". In cazul in care informatia trimisa este de tipul "file" valoarea acestui atribut ar trebui sa fie "multipart/form-data".

name sau id

Identifica formularul in vederea folosirii lui in scripturi. Este de preferat folosirea celei de-a doua variante, ea prezentand avatajul posibilitatii folosirii formularului in eventualele scripturi prezente in document.

target, title, style, lang si dir

Aceste atribute au fost prezentate in lectiile anterioare.

Controalele unui formular

Exista mai multe tipuri de controale cu ajutorul carora utilizatorul introduce date sau alege variante ale unor valori oferite. Iata lista controalelor pe care le puteti folosi in interiorul unui formular:

Butoane

Exista trei tipuri de butoane care pot aparea intr-un formular:

SUBMIT (buton de transmitere) – este butonul a carui activare declansaza operatiunea de trimitere a datelor catre server

RESET (buton de resetare) – este butonul a carui activare readuce controalele din formular la valorile lor initiale

BUTTON (buton fara actiune predefinita) – este butonul folosit de catre designer pentru a declansa operatiuni controlate de catre acesta, de obicei cu ajutorul scripturilor

Imagini

Imaginile folosite pe post de controale in formular sunt folosite ca alternativa mai atragatoare din punct de vedere estetic pentru butonul de tip "SUBMIT".

Campuri de introducere a textului

Exista trei tipuri de casete de introducere a textului:

TEXT – este caseta care permite introducerea textului pe o singura linie

PASSWORD – este similara controlului TEXT, diferente constand in faptul ca datele introduse de utilizator vor fi afisate printr-un caracter "masca" (ex: "*") pentru a oferi un anumit grad de confidentialitate. Este folosit de obicei la introducerea unor parole

TEXTAREA – este caseta de introducere a textului pe linii multiple

Casute de validare

Sunt controalele prin care se confirma sau se infirma o optiune prezentata utilizatorului

Butoane radio

Sunt asemanatoare casutelor de validare, insa sunt grupate in mod logic cu ajutorul numelui. Toate butoanele radio avand acelasi nume apartin unui aceluiasi grup, iar intr-un asemenea grup doar un singur buton poate fi selectat la un moment dat.

Meniuri derulante

Reprezinta liste de valori din care utilizatorul poate selecta una sau mai multe valori, in functie de tipul meniului

Selectoare de fisiere

Sunt controalele care dau posibilitatea utilizatorului sa selecteze un fisier care urmeaza a fi trimis serverului

Controale ascunse

Reprezinta posibilitatea de a transmite serverului date utile, fara ca utilizatorul sa le vada pe ecran

Elementul INPUT

Cea mai mare parte a controalelor unui formular se poate marca cu ajutorul unui singur element de marcare HTML: INPUT. De aceea numarul atributelor acestui element este destul de mare, iar semnificatia lor poate sa varieze de la un control la altul. Iata cateva dintre ele:

type

Specifica tipul controlului folosit. Valorile posibile sunt:

text

password

checkbox

radio

submit

reset

button

image

hidden

file

name

Specifica numele controlului respectiv. Numele controlului va fi trimis impreuna cu valoarea introdusa de utilizator catre programul de procesare a datelor de pe server. In cazul butoanelor radio, fiecare buton al unui grup trebuie sa aiba aceeasi valoare pentru acest atribut.

value

Specifica valoarea initiala a controlului respectiv. Acest atribut este optional, exceptie facand butoanele radio si casutele de validare pentru care setarea acestui atribut este obligatorie. In cazul butoanelor ea reprezinta eticheta butonului respectiv.
Valoarea finala a controalelor este valoarea pe care acestea o au in momentul in care s-a actionat butonul de tip "SUBMIT". Transmisia valorilor catre programul de procesare de pe server se face conform urmatoarelor reguli:

campurile de editare de text transmit ca valoare textul continut

butoanele radio si casutele de validare transmit doar valorile controalelor selectate

selectorul de fisiere transmite ca valoare continutul fisierului codificat conform metodei de compactare specificate de atributul enctypes

controalele dezactivate nu transmit valori

size

Determina numarul de caractere ocupat ca dimensiune pe orizontala de casetele de introducere a textului. In cazul in care utilizatorul introduce un numar mai mare de caractere are loc o delpasare a textului spre stanga, oferindu-se vizibilitate pozitiei curente a cursorului.

maxlength

Determina numarul maxim de caractere pe care utilizatorul le poate introduce intr-o casuta de text

checked

Determina selectarea implicita a unui control de tip buton radio sau casuta de validare

src

Este folosit pentru a localiza fisierul sursa a unei imagini atunci cand controlul este de tip "image"

tabindex

Determina numarul de ordine al unui control in parcurgerea controalelor formularului cu ajutorul tastei "tab"

disabled

Atribut de tip "marcaj" a carui aparitie duce la aparitia dezactivata a controlului in formular, deci utilizatorul nu va avea posibilitatea interactiunii cu controlul respectiv

accept

Specifica tipul de fisiere acceptate pentru incarcare de catre un control input de tip file. Valorea acestui atribut este o lista de tipuri MIME separate prin virgula(Ex:"image/jpg, text/plain"). Mai trebuie specificat faptul ca pentru a utiliza un contrrol de tip file, formularul container trebuie sa aiba valoarea proprietatii enctype egala cu "multipart/form-date", iar metoda formularului trebuie sa fie post.

id

class

style

title

Elementul BUTTON

Elementul BUTTON este folosit pentru a introduce in formular un buton care ofera posibilitati de a fi afisat intr-o maniera ceva mai pretentioasa. Si asta deoarece, spre deosebire de elementul INPUT, acesta are un continut care poate sa cuprinda text sau imagine. E bine ca imaginile sa fie insotite de un text alternativ pentru ca afisarea butoanelor in fereastra programului de explorare Web sa poat fi concludenta si in cazul in care imaginile nu vor fi afisate. Marcarea acestui element necesita atat eticheta de inceput cat si eticheta de sfarsit a controlului corespunzator.

Cateva din atributele specifice acestui element vor fi enumerate in cele ce urmeaza, ele avand – in marea lor majoritate – aceeasi seminficatie ca in cazul elementului INPUT:

type – avind optiuni posibile:

SUBMIT

RESET

BUTTON

name

value

disabled

tabindex

acceskey

id

class

title

Meniuri derulante

Un meniu derulant este o lista de optiuni prestabilite din care utilizatorul poate sa aleaga una sau mai multe valori, in functie de modul in care meniul respectiv a fost declarat in interiorul formularului. Marcarea meniului se realizeaza cu ajutorul elementului SELECT. Fiecare optiune a meniului respectiv se marcheaza cu ajutorul elementului OPTION. Un meniu trebuie sa contina cel putin un element OPTION.
In cazul in care lista contine un numar mare de optiuni, acestea se pot grupa cu ajutorul elementului OPTGROUP.

Atributele specifice elementului SELECT sunt:

name sau id

Specifica numele sau identificatorul meniului

size

Specifica numarul de linii vizibile in acelasi timp din cadrul listei oferite de meniu

multiple

Prezenta sa determina posibilitatea selectiei multiple in cadrul listei. In mod implicit un meniu permite selectia a unui singur element.

disabled

Determina afisarea controlului in forma dezactivata, deci fara posibilitatea ca utilizatorul sa interactioneze cu acesta

style

tabindex

class

title

Atribute care au fost prezentate in sectiunile anterioare

Un element de tip OPTION marcheaza o optiune din cadrul unei liste derulante. Principalele atribute ale acestui element sunt:

selected

Aparitia acestui atribut determina ca elementul respectiv sa devina optiunea preselectata a listei

label

Ofera textul care va fi folosit pentru scrierea elementului in cadrul listei in locul continutului elementului

value

Determina valoarea initiala a elementului. In caz ca acest atribut nu apare, valoare initiala se considera a fi continutul elementului

id

class

style

title

lang

dir

Casuta de text multilinie

Casuta de text multilinie este folosita atunci cand utilizatorul trebuie sa introduca text a carui asezare necesita scrierea pe mai multe linii. Marcarea acestui control se face cu ajutorul elementului TEXTAREA care trebuie sa aiba atat eticheta de inceput cat si cea de sfarsit. Continutul cuprins intre cele doua etichete reprezinta valoarea initiala a acestui element.
Atributele folosite pentru specificarea proprietatilor casutei de text multilinie sunt:

name sau id

Specifica numele sau identificatorul elementului

rows

Determina numarul liniilor de text vizibile. In cazul in care utilizatorul introduce mai multe linii de text caseta de text va fi prevazuta cu bare de defilare verticale

cols

Specifica numarul de "coloane" a casetei de text. O coloana reprezinta latimea medie a unui caracter.

wrap

Determina modul de trecere la linie noua in caseta de text. Valorile posibile sunt:

on – determina trecerea pe linia urmatoare atunci cand textul atinge marginea din dreapta a casetei de text

off – trecerea pe linie noua nu se face decat atunci cand utilizatorul apasa tasta "CR". In cazul in care latimea liniei o depaseste pe cea a casutei de text aceasta din urma va avea o bara de defilare pe orizontala

readonly

Determina afisarea controlului fara posibilitatea ca textul continut sa poata fi modificat de utilizator. Textul, insa, va fi trimis programului de procesare de pe server ca valoare a acestui element.

disabled

class

style

title

lang

dir

acceskey

Etichetele controalelor

Unele controale din formulare au o eticheta automata (ex: butoanele), in timp ce altele nu dispun de asa ceva, limbajul HTML urmarind numai "legarea" controlului de valoarea pe care o are nu si de semnificatia sa pentru utilizator. De aceea s-au introdus etichetele afisate cu ajutorul elementului LABEL. Pentru marcarea acestui element sunt necesare atat eticheta de inceput cat si cea de sfarsit. Proprietatea cea mai importanta a controlului este for, proprietate care leaga explicit eticheta de un control din formular identificat cu ajutorul atributului id sau name.

CODUL SURSA AL SITEULUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>BASKETBALL</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<tr>

<td background="1.jpg">         Categ 1 </td>

</tr>

<tr>

<td><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="Exemplehtml.htm">Exemple Html</a></td>

</tr>

</table> <p> </p>

<td width="83%" valign="top" class="tabelMARE style1"><div align="justify"><font class="fsx05" face="Times New Roman CE"><b><u>Baschetul, sau cosurile cu surprize</u><br>

«lnitiativa libera nu este decat o meditatie intre functiunea care defineste pe fiecare echipier ca «individ comun» si echipa. Daca initiativa individuala ar lua-o inaintea acestei organizari colective si ar tinde sa se afirme pentru ea insasi, "spiritul de echipa" ar fi pierdut. »<br>

</b></font></div>

<p><font class="fsx05" face="Times New Roman CE"><b><i>J.P.Sartre..</i></b></font></p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

PAGINA 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Istoric Baschet</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

.style2 {

font-family: "Times New Roman", Times, serif;

font-weight: bold;

}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<!– meniu inceput –>

<tr>

<td background="1.jpg" >         Categ 1 </td>

</tr>

<tr>

<td ><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="exemple.html" target="_self">Exemple</a><a href="#" target="_blank">#</a></td>

</tr>

</table>

<!– meniu sfarsit –>

<p class="style2"><u>ISTORICUL BASCHETULUI</u><br>

Unul dintre cele mai raspandite jocuri sportive in lume, baschetul, se caracterizeaza prin finetea, precizia si fantezia exercitiilor tehnice si tactice, prin talia inalta si calitatile fizice deosebite ale sportivilor, toate acestea implicate intr-o lupta sportiva care pretinde spirit de echipa si de sacrificiu, inteligenta si rezistenta nervoasa. Jocuri cu mingea, asemanatoare baschetului pe care-l cunoastem noi astazi, au tost practicate cu multe secole in urma in diferite zone ale lumii. Vechile populatii incase, maia si aztece practicau un joc in care mingea era aruncata intr-un inel de piatra, suspendat orizontal pe un zid. Bastinasii din Florida aveau o tinta formata dintr-un cos de nuiele iar indienii din America plasau un fel de cos in trunchiuri de copac …</p>

<p class="style2"><a href="istoric1.html" target="_self">detalii ></a> </p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

PAGINA 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Istoric Baschet</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

.style2 {

font-family: "Times New Roman", Times, serif;

font-weight: bold;

}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<!– meniu inceput –>

<tr>

<td background="1.jpg" >         Categ 1 </td>

</tr>

<tr>

<td ><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="exemple.html" target="_self">Exemple</a><a href="#" target="_blank">#</a></td>

</tr>

</table>

<!– meniu sfarsit –>

<p class="style2"><u>ISTORIC</u><br>

Unul dintre cele mai raspandite jocuri sportive in lume, baschetul, se caracterizeaza prin finetea, precizia si fantezia exercitiilor tehnice si tactice, prin talia inalta si calitatile fizice deosebite ale sportivilor, toate acestea implicate intr-o lupta sportiva care pretinde spirit de echipa si de sacrificiu, inteligenta si rezistenta nervoasa.<br>

Jocuri cu mingea, asemanatoare baschetului pe care-l cunoastem noi astazi, au tost practicate cu multe secole in urma in diferite zone ale lumii. Vechile populatii incase, maia si aztece practicau un joc in care mingea era aruncata intr-un inel de piatra, suspendat orizontal pe un zid. Bastinasii din Florida aveau o tinta formata dintr-un cos de nuiele iar indienii din America plasau un fel de cos in trunchiuri de copac.<br>

In anul 1891, un tanar asistent de la colegiul Spring-field, din statul Massachusetts (S.U.A.), pe numele sau James A. Naismith, incercand sa faca mai variate lectiile de educatie fizica ale studentilor, cu un continut mai atractiv si mai dinamic, fara conditii materiale deosebite, a combinat unele reguli din jocul de fotbal cu 13 reguli noi si a inlocuit poarta cu un cos suspendat pe un perete. Astfel a luat nastere sportuli caruia i s-a spus apoi baschet ball (basket = cos, ball = minge).<br>

La inceput echipele erau alcatuite din cate 50 de jucatori, apoi numarul s-a redus treptat pentru a se ajunge la echipe formate din 5 jucatori pe teren. Jocul se raspandeste in Europa, fiind prezentat demonstrativ la Jocurile Olimpice din 1904 (de la St. Louis). In 1932 se constituie Federatia Internationala de Baschet Amator (F.I.B.A.) si din 1935 se disputa campionatele europene (la care a participat si tara noastra). Este de mentionat ca baschetul a fost primul joc pe echipe in care au aparut fetele pe terenurile sportive.<br>

La noi in tara, primele demonstratii de baschet au fost efectuate in 1920. Pina in 1923, baschetul se practica in special in liceele din capitala, organizindu-se sporadic competitii interscolare. Din 1928 se constituie diferite echipe (masculine), la cluburile Sportul Studentesc, Juventus, T.C.R. etc.<br>

Federatia Romana de Baschet si Volei ia fiinta in 1931, fiind initiat atunci primul campionat regional masculin. In aceasta perioada nu existau mai mult de 150-200 sportivi legitimati, baschetul traind mai ales din insistentele si pasiunea unor animatori. Dupa 23 august 1944 acest frumos si spectaculos sport incepe sa aiba caracter de masa; sunt organizate campionate republicane (din 1947), se participa la primele Jocuri Balcanice (1946), sunt organizate anual campionate scolare si universitare precum si festivaluri de minibaschet pentru copii.<br>

Pe plan international, mentionam clasarea de 3 ori pe locul IV la campionatele feminine europene (1964,1966, 1968) si de 2 ori pe locul V la cele masculine (1957,1967), precum si unele succese ale echipelor de club Steaua, Dinamo, Politehnica Bucuresti, Rapid etc. In 1981, la Campionatele Mondiale Universitare echipa de fete a Romaniei s-a clasat pe locul III, cucerind medalia de bronz, iar echipa masculina a ocupat locul IV.</p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

PAGINA 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Istoric Baschet</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

.style2 {

font-family: "Times New Roman", Times, serif;

font-weight: bold;

}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<!– meniu inceput –>

<tr>

<td background="1.jpg" >         Categ 1 </td>

</tr>

<tr>

<td ><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="exemple.html" target="_self">Exemple</a><a href="#" target="_blank">#</a></td>

</tr>

</table>

<!– meniu sfarsit –>

<a href="http://www.eurobasket.com/" target="_blank">http://www.eurobasket.com/</a></p>

<p class="style2"><strong> <a href="http://www.telebasket.com/" target="_blank">http://www.telebasket.com/</a></strong></p>

<p><strong><a href="http://www.yubac.com/" target="_parent">http://www.yubac.com/</a> </strong></p>

<p><strong><a href="http://www.knicksonline.tk/" target="_blank">http://www.knicksonline.tk/</a></strong></p>

<p><strong><a href="http://www.frbaschet.ro/" target="_blank">http://www.frbaschet.ro/</a></strong></p>

<p><strong><a href="http://www.baschet.as.ro/" target="_blank">http://www.baschet.as.ro/</a></strong></p>

<p><strong> Cluburi:</strong></p>

<p><strong><a href="http://www.csuasesoft.ro/" target="_blank">http://www.csuasesoft.ro/</a><br>

</strong></p>

</strong></p>

<p><strong><a href="http://www.magicsibiu.go.ro/" target="_blank">http://www.magicsibiu.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://csusibiu.go.ro/" target="_blank">http://csusibiu.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://www.magic4basket.go.ro/" target="_blank">http://www.magic4basket.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://www.westpetrom.ro/" target="_blank">http://www.westpetrom.ro/</a></strong></p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

PAGINA 5:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Istoric Baschet</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

.style2 {

font-family: "Times New Roman", Times, serif;

font-weight: bold;

}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<!– meniu inceput –>

<tr>

<td background="1.jpg" >         Categ 1 </td>

</tr>

<tr>

<td ><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="exemple.html" target="_self">Exemple</a><a href="#" target="_blank">#</a></td>

</tr>

</table>

<!– meniu sfarsit –>

<a href="http://www.eurobasket.com/" target="_blank">http://www.eurobasket.com/</a></p>

<p class="style2"><strong> <a href="http://www.telebasket.com/" target="_blank">http://www.telebasket.com/</a></strong></p>

<p><strong><a href="http://www.yubac.com/" target="_parent">http://www.yubac.com/</a> </strong></p>

<p><strong><a href="http://www.knicksonline.tk/" target="_blank">http://www.knicksonline.tk/</a></strong></p>

<p><strong><a href="http://www.frbaschet.ro/" target="_blank">http://www.frbaschet.ro/</a></strong></p>

<p><strong><a href="http://www.baschet.as.ro/" target="_blank">http://www.baschet.as.ro/</a></strong></p>

<p><strong> Cluburi:</strong></p>

<p><strong><a href="http://www.csuasesoft.ro/" target="_blank">http://www.csuasesoft.ro/</a><br>

</strong></p>

</strong></p>

<p><strong><a href="http://www.magicsibiu.go.ro/" target="_blank">http://www.magicsibiu.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://csusibiu.go.ro/" target="_blank">http://csusibiu.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://www.magic4basket.go.ro/" target="_blank">http://www.magic4basket.go.ro/</a><br>

</strong></p>

<p><strong><a href="http://www.westpetrom.ro/" target="_blank">http://www.westpetrom.ro/</a></strong></p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

PAGINA 6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Istoric Baschet</title>

<!–

body {

}

.fsx05 {font-size: 16px;}

.style1 {color: #0033FF}

–>

</style></head>

<body>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<!– meniu inceput –>

<tr>

<td background="1.jpg" >         Categ 1 </td>

</tr>

<tr>

<td ><a href="istoric.html" target="_self">Istoric Baschet </a></td>

</tr>

<tr>

<td><a href="reguli.html" target="_self">Reguli de joc </a></td>

</tr>

<tr>

<td><a href="links.html" target="_self">Links</a></td>

</tr>

<tr>

<td background="1.jpg">        Categ2</td>

</tr>

<tr>

<td><a href="despre.html" target="_self">Despre Html </a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="exemple.html" target="_self">Exemple</a><a href="#" target="_blank">#</a></td>

</tr>

</table>

<!– meniu sfarsit –>

<p><strong>Vom folosi, în paginile urmatoare, termenul de sit si nu cel de site, din urmatoarele motive:</strong></p>

<p><strong> 1. Etimonul sau este latinescul situs, care desemna un loc geografic.<br>

2. Varianta sit e prima aparuta în limba româna. Figureaza, de exemplu, în cartea "Omul sau natura?" de Edouard Bonnefous ( Editura Politica, Bucuresti, 1976, traducator Adrian Costa, ), iar în anii '80, era vehiculata în presa culturala din România. Circulatia sa era, asadar, restrânsa la mediile cultivate, în timp ce varianta site e folosita azi pe scara larga. </strong></p>

<p><strong>Intr-un fisier html, se pot include:</strong></p>

<p><strong> * programe în JavaScript<br>

* scripturi CSS<br>

* tag-uri care sa seteze parametrii unui applet ( program scris în Java si care rezida pe retea ) </strong></p>

<p><strong>Un fisier html se poate realiza:</strong></p>

<p><strong> * manual, scriind tag dupã tag în Notepad<br>

* cu ajutorul editoarelor HTML precum Homesite, Adobe Golive, Microsoft Frontpage '98 sau 2000, Macromedia Dreamweaver ( aplicatia cea mai apreciata de profesionisti ), CoffeeCup HTML Editor , Netscape Composer ( recomandat doar începatorilor ), NoteTab Light sau 1st Page 2000 . Ultimile trei sunt distribuite freeware ( gratuit ). Dealtfel, de pe siturile de download puteti descãrca un mare numãr de editoare HTML, unele în regim freeware, altele în regim shareware. Editoarele vã usureazã munca, dar nu vã învatã HTML, asã cã e de dorit sã le evitati la începutul activitãtii dvs. de webdesigner. </strong></p>

<p><strong> Cum realizãm prima paginã web ?</strong></p>

<p><strong> * Alocati un director sitului pe care intentionati sã-l realizati.<br>

* Click pe butonul Start, apoi pe Programs, Accessories, Noteped.<br>

* Introduceti textul si etichetele.<br>

* Salvati fisierul cu extensia .htm sau .html în directorul dedicat. Fisierul va apãrea ca, sã zicem, istoric.htm.<br>

* Deschideti fisierul istoric.htm în Microsoft Internet Explorer. Pentru a aduce modificari fisierului, executati click-dreapta pe suprafata acestuia si veti obþine codul-sursa. Dupa modificarea fisierului, salvati-l. </strong></p>

<p><strong>Douã ultime observatii:</strong></p>

<p><strong> 1. HTML-ul e independent de platformã.<br>

2. HTML-ul nu e un limbaj case-sensitive, asa cã putem scrie la fel de bine <BODY>, <body>, <BOdy> sau <boDy> etc., pentru ca în HTML nu se face distinctia între literele mari si cele mici. </strong></p>

</div>

</td>

</tr>

</table>

</tr>

</table>

</body>

</html>

BIBLIOGRAFIE

[01] Andrew Tannenbaum – Web Design , ediția a-III-a ;

[02] Elizabeth Castro –„HTML pt World Wide Web”

[03] Stamate Eugenia Lucia-„Crearea si publicare unui site web,Limbajul HTML”

[04] www.moicane.com

[05] www.w3.org

[06] www.basketball.com

[07] Colecția revistelor „Design Web” – 2001

Copyright Notice

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

Acest articol: Realizarea Unui Site (ID: 149172)

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

Realizarea Unui Site

Copyright Notice

Extinderea Interoperabilitatii Aplicatiilor Software

Agenti Inteligenti In Comertul Electronic

Dezvoltarea Aplicatiilor Windows In C

Aplicatii Hibride

Aplicatie de Management Si Colaborare Intr Un Ong

Implementarea Unui Sistem Administrativ Pentru Un Camin de Studenti

Copyright Notice

Similar Posts