Documente Academic
Documente Profesional
Documente Cultură
com
1.Introducere
Am scris acest tutorial pentru ca stiu cat de mult va doriti unii dintre voi sa gasiti tutoriale
in limba romana si desigur pentru a-mi reimprospata cunostintele.
Nota:Acest ghid este destinat intregii clase de utilizatori,dar este special conceput pentru
incepatori.Pe parcursul ghidului veti exemple de pagini HTML,copiati ceea ce se afla intre
elementele de marcare <HTML> si </HTML> inclusiv aceste elemente si salvati totul intr-
un fisier cu extensia .htm sau .html.Daca lucrati in notepad in momentul in care salvati
fisierul puneti numele fisierului intre ghilimele : “fisier.htm” sau selectati la Save as type
modul all files si salvati asa fisierul dar de data aceasta fara ghilimele,deoarece Notepad-ul
are obiceiul de a adauga extensia .txt la fisierele care au fost editate cu el.Si un ultim lucru
inainte de a incepe,majoritatea exemplelor vor fi prezentate fara a fi cuprinse intre
elementele de marcare la inceputul unui fisier HTML,deci aceste elemente vor trebui scrise
de catre dumnevoastra.
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
by endy for TorrentsMD.com
Pe cind lucra la Consiliul European pentru Cercetare Nucleara (CERN), laboratorul
european pentru fizica particulelor de la Geneva, Tim Berners-Lee 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
informatiilor 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
conecteaza 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-ul 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. 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 Site 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 contine text,
by endy for TorrentsMD.com
imagini si scurtaturi.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.
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.
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
by endy for TorrentsMD.com
unde:
In continuare vom explica putin mai detaliat elementele din formatul mentionat.
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.
by endy for TorrentsMD.com
telnet
Permite cuplarea la un nod, asemanator comenzii telnet.
x-exec
Se refera la un program executabil.
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
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...).
by endy for TorrentsMD.com
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
2. ftp://ftp.sura.net/pub/nic/
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
documente 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 HTML
by endy for TorrentsMD.com
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. In continuare voi prezenta cateva editoare de acest gen.
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.
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.
by endy for TorrentsMD.com
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.
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.
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:
<BODY> si </BODY>
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:
Exemplu:
Formularea
sau
<option selected>
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:
® = ®
by endy for TorrentsMD.com
Comentarii
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:
Alinierea
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:
<P style="color:#ff00cc">
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:
Aqua #00ffff
Black #000000
Blue #0000ff
Fuchsia #ff00ff
Gray #808080
Green #00ff00
Lime #008000
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #ff0000
Silver #c0c0c0
by endy for TorrentsMD.com
Teal #008080
White #ffffff
Yellow #ffff00
Dimensiunile
1.Dimensiunea absoluta
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.
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
YYYY-MM-DDThh:mm:ssTZD
unde
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.
Exemplu:
1994-11-05T08:15:30-05:00
Coduri de limbaje
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
Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple:
en = limba engleza
fr = limba franceza
de = limba germana
it = limba italiana
es = limba spaniola
by endy for TorrentsMD.com
pt = limba portugheza
Corpul documentului
<html>
<head>
</head>
<body>
</body>
by endy for TorrentsMD.com
</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:
Antetul documentului
<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.
<META> si <LINK>
tipul documentului
ISO 8859-1 -(sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii
ale alfabetului latinsi este cel mai des intalnit
ISO 646 - codificarea ASCII restransa (pe 7 biti, adica 128 de caractere)
Exemplu:
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 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:
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.
Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc
atributele:
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
<html>
<head>
<title>Document cu imagine si sunet de fundal</title>
</head>
<body background=”pozamea.jpg” bgcolor=”#ff0000” text=”#800080”>
</body>
</html>
<html>
<head>
<title>Document cu culoare de fond</title>
</head>
Aceasta pagina are culoarea de fond "aqua". Textul va fi tiparit cu culoare albastra <br>
Marginile documentului au fost fixate la <b>"0"</b> prin setari care vor fi acceptate si de
Internet Explorer si de Netscape Navigator
</body>
</html>
by endy for TorrentsMD.com
In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o
recunoaste (o eticheta scrisa gresit, inexistenta sau o eticheta de sfarsit care nu are
eticheta de inceput corespunzatoare) el nu o va lua in considerare, tiparind doar eventualul
continut marcat de eticheta respectiva. Insa aceste etichete "scapate" in corpul
documentului pot provoca diferente semnificative intre forma dorita si cea obtinuta a
continutului afectat!
Generalitati
<head>
<title>Linii si paragrafe</title>
</head>
<body>
<p>
Paragraf1:
pe o singura linie.
<p>
Paragraf2:<br>
O linie de text<br>
<p>
<p>
<p>
<p>
<p>Paragraf3:<br>
<p>
Paragraf4:<br>
Intre cuvinte
exista
suficient spatiu
<p>Paragraf5:<br>
by endy for TorrentsMD.com
<nobr>bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla
bla-bla-bla- bla-bla- bla-bla- bla-bla- bla-bla-bla- bla pe o singura linie</nobr>
</body>
</html>
Antetele de sectiune
Exemplu:Antete de sectiune
<h1>Element H1</h1>
<H2>Element H2</H2>
<H3>Element H3</H3>
<h4>Element H4</h4>
<h5>Element H5</h5>
<H6>Element H6</H6>
Rigla orizontala
Exemplu:rigle orizontale
<hr noshade>
<p>
<p>
<p>
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.
<p>Bla-bla-bla...
<p>Bla-bla-bla...
by endy for TorrentsMD.com
<p>Bla-bla-bla...
<p align="right">
Cu drag, <b>Seful</b>!</p>
<hr>
<address>
invizibilii@nicaieri.com </address>
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.
<div style="font-size:14;color:blue;background
color:yellow">Elementul Div</div>
width="50%">
<div style="color:red">
by endy for TorrentsMD.com
Certificatul de deces consemneaza la rubrica "Profesia" - fermier. Daca ar fi fost numai
atat, azi nu s-ar mai vorbi nimic de <span style = "color:navy">Elementul Span</span>.
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:
unde
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.
Informatii tool-tip
6.Stiluri de text
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
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:
<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.
<STRIKE> 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.
by endy for TorrentsMD.com
Exemplu:Utilizarea controalelor pentru stilul fontului
etc….
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:
<FONT Face="Arial">
<FONT Face="Arial,Chicago">
Size
absoluta
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:
<body>
<basefont color=blue size=5>
...
</body>
by endy for TorrentsMD.com
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.
{<br>
for (i = 0;i!=10;i++)<br>
}</code>
7.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.
<ul>
<li>John Lennon</li>
by endy for TorrentsMD.com
<li>Paul Mccartney
<li>Ringo Star</li>
<li>George Harrison</li>
</ul>
<p>
<hr>
<b>Liste imbricate:</b>
<ul>
<li>element 1</li>
<ul>
<li>element 1.1</li>
<li>element 1.2</li>
<ul>
<li>element 1.2.1</li>
<li>element 1.2.2</li>
</ul>
<li>element 1.3</li>
</ul>
<li>element 2</li>
<li>element 3</li>
<ul>
<li>element 3.1</li>
</ul>
</ul>
<p>
by endy for TorrentsMD.com
<hr>
<ul type="square">
<li>Ianuarie</li>
<li>Februarie</li>
<LI>Martie</LI>
</ul>
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:
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:
<ol>
<li>element 1</li>
<li>element 2</li>
<ol>
<li>element 2.1</li>
<li>element 2.2</li>
</ol>
<li>element 3</li>
<ol>
<li>element 3.1
<ol>
<li>element 3.1.1</li>
<li>element 3.1.2</li>
</ol>
</ol>
</ol>
<hr>
by endy for TorrentsMD.com
<p>
<ol type="A">
<li>element 1</li>
<li>element 2</li>
<li>element 2.1</li>
<li>element 2.2</li>
</ol>
<li>element 3</li>
<ol type="i">
<li>element 3.1
<ol type="a">
<li>element 3.1.1</li>
<li>element 3.1.2</li>
</ol>
<li>element 3.2</li>
</ol>
</ol>
<hr>
<P>
<ol>
</ol>
</ol>
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
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
by endy for TorrentsMD.com
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
Exemplu:Lista de definitii
<dl>
<dt><b>mar</b></dt>
<dd>fruct rosu</dd>
</dl>
8.Legaturi si referinte
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
by endy for TorrentsMD.com
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.
URL-uri relative
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.
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:
alink - pentru culoarea textului referintei in momentul in care aceasta care este activata.
_blank - pentru a afisa documentul destinatie intr-o noua fereastra deschisa de programul
de explorare
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:
Pentru a creea in acelasi document o referinta catre tinta definita mai sus nu ramane decat
sa scriem corect atributul de referinta hipertext.
Exemplu:
Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care
contine tinta si numele de identificare a tintei. Exemplu:
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.
Elementul LINK este folosit in antetul documentului pentru a specifica o relatie intre
documentul curent si alte documente sau programe din Web. Elementul LINK nu are
continut si nu va fi afisat in interiorul documentului, dar el este folosit de catre programele
de navigare Web in diverse scopuri, depinzand de valoarea atributul rel, valoare ce
defineste relatia cu documentul referit. Iata cateva dintre valorile posibile ale acestui
atribut:
Alternate
by endy for TorrentsMD.com
defineste o alternativa la documentul curent si este folosita de obicei impreuna cu atributul
hreflang pentru a specifica limba in care este scris documentul. Exemplu:
<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="Manualul in limba engleza"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://Calculator.com/manual/franceza.html">
Stylesheet
defineste o legatura cu un document de tip "foaie de stil", despre care vom vorbi mai tarziu
Start
Next si Previous
definesc care sunt urmatorul si, respectiv, precedentul document intr-o ordonare liniara a
colectiei de documente
<HEAD>
<TITLE>Capitolul 4</TITLE>
<LINK rel="Contents" href="../toc.html">
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Capitolul5.html">
<LINK rel="Prev" href="Capitolul3.html">
</HEAD>
Modul in care informatia oferita de elementul Link este folosita depinde foarte mult de
programul de navigare si motoarele de cautare in Web.
9.Utilizarea imaginilor
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
by endy for TorrentsMD.com
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.
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
top
left
by endy for TorrentsMD.com
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.
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:
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
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:
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".
<object>
</object>
10.Tabele
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
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:
rules
determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile
posibile sunt:
groups - liniile dintre grupurile definite ale tabelului. Cum de defineste un grup vom vedea
putin mai tarziu.
cellspacing
stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre
marginile tabelului si celulele din apropiere.
cellpading
bgcolor
background
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.
<p>
<tr>
<td><b>Nume</b></td>
<td><b>Prenume</b></td>
<td><b>Varsta</b></td>
<td><b>Telefon</b></td>
</tr>
by endy for TorrentsMD.com
<tr>
<td>Popescu</td>
<td>Ioana</td>
<td>27</td>
<td>176238</td>
</tr>
<tr>
<td>Munteanu</td>
<td>Cornel</td>
<td>42</td>
<td>220022</td>
</tr>
</table>
<p>
<hr>
<p>
<p>
<tbody valign="top">
<tr>
<td >Internet</td>
</tr>
</tbody>
by endy for TorrentsMD.com
</table>
</p>
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
valign
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
rowspan
width si height
by endy for TorrentsMD.com
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.
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:
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.
by endy for TorrentsMD.com
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
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.
Pagina de cadre
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
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.
by endy for TorrentsMD.com
Exemplu:Cadre pe orizontala
</frameset>
<noframes>
</noframes>
Exemplu:Cadre pe verticala
<frameset rows="10%,*">
</frameset>
<noframes>
</noframes>
</frameset>
</noframes>
<frameset rows="64,*">
<frameset cols="150,*">
</frameset>
</frameset>
<noframes>
</noframes>
Elementul cadru
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
noresize
reprezinta un atribut e tip boolean care, prin prezenta sa, impune imposibilitatea de a
redimensiona cadrul.
scrolling
auto
determina aparitia barelor de defilare doar in momentul in care o parte din document nu
este vizibila in cadru (optiune implicita)
yes
no
frameborder
determina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente.
Optiunile posibile sunt:
by endy for TorrentsMD.com
1
marginwidth si marginheight
stabilesc spatiul pe orizontala si, respectiv, pe verticala lasat liber intre marginile cadrului
si continutul sau.
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 height
align
12.Formularele HTML
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
by endy for TorrentsMD.com
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
action
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.
enctype
name sau id
by endy for TorrentsMD.com
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.
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
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
Casute de validare
by endy for TorrentsMD.com
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
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
text
password
checkbox
radio
submit
reset
by endy for TorrentsMD.com
button
image
hidden
file
name
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:
size
maxlength
Determina numarul maxim de caractere pe care utilizatorul le poate introduce intr-o casuta
de text
checked
by endy for TorrentsMD.com
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
disabled
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
<h1>Formular de inregistrare:</h1>
<colgroup align="right">
by endy for TorrentsMD.com
<tr>
</tr>
<tr>
<td>Parola</td>
maxlength="20"></td>
</tr>
<tr>
<td>Sex:</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Pensionar</td>
</tr>
<tr>
</tr>
by endy for TorrentsMD.com
</table>
</form>
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.
<tr>
</tr>
</table>
</form>
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:
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.
<tr>
<td>Orasul:</td>
by endy for TorrentsMD.com
<td><input type="text" name="TextOras" size="20"></td>
</tr>
<tr>
<td>
<option>Alba
<option>Arad
<option>Arges
<option>Bacau
<option>Bihor
<option>Bistrita-Nasaud
<option>Brasov
<option>Braila
<option>Buzau
<option>Calarasi
<option>Cluj
<option>Altele...
</select></td>
</tr>
<tr>
</tr>
</table>
by endy for TorrentsMD.com
</form>
name sau id
size
Specifica numarul de linii vizibile in acelasi timp din cadrul listei oferite de meniu
multiple
disabled
style
tabindex
class
title
Un element de tip OPTION marcheaza o optiune din cadrul unei liste derulante. Principalele
atribute ale acestui element sunt:
selected
label
Ofera textul care va fi folosit pentru scrierea elementului in cadrul listei in locul continutului
elementului
value
by endy for TorrentsMD.com
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 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
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
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
by endy for TorrentsMD.com
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
disabled
class
style
title
lang
dir
acceskey
<tr>
<td>Adresa destinatarului:</td>
</tr>
<tr>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<button
onclick="alert('EXCEPTIONAL!')">Corecteaza</button>
</tr>
</table>
</form>
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.
by endy for TorrentsMD.com
<label for="TextNume">Nume:</label>
size="20">
</form>
13.Proprietati de stil
Cel mai important castig al variantei 4.0 a limbajului HTML este, fara discutie, folosirea
modelelor de stiluri. Definirea proprietatilor elementelor care apar intr-un document
HTML cu ajutorul modelelor de stiluri ofera o mult mai mare flexibilitate creatorilor de
pagini Web in a stabili aspectul final pe care pagina respectiva o va avea in fereastra
programului de navigare Web.
Modelele de stiluri nu reprezinta in mod practic o parte a limbajului HTML ci se prezinta ca
limbaj de sine statator. Exista diferite limbaje de modele de stiluri, cel mai cunoscut si
utilizat fiind Modelele de Stiluri in Cascada (Cascading Style Sheets - CSS) . Pentru a
stabili limbajul implicit de modele de stiluri pentru un document se foloseste elementul
META in antetul documentului. De exemplu, pentru a desemna limbajul implicit ca fiind
CSS se foloseste urmatoarea sintaxa:
prin creearea unui fisier de stiluri cu extensia "css" care poate fi aplicat mai multor
documente HTML.
Gruparea unuia sau mai multor modele de stil intr-un fisier extern sau in antetul unui
document HTML formeaza o asa numita foaie de stil
Pentru a specifica valori ale atributelor care reprezinta URL-uri ale unor fisiere se foloseste
sintaxa url(cale spre fisier), unde "cale spre fisier" reprezinta URL-ul relativ sau absolut al
fisierului referit.Exemplu:
unei submultimi de elemente ale documentului care pot fi de acelasi tip sau de tipuri
diferite
by endy for TorrentsMD.com
Pentru a aplica un model de stil unui singur element se foloseste atributul id de identificare
a elementului in cadrul documentului.
Exemplu:
<HEAD>
<STYLE >
#id1{font-size:18px ; text-align:center}
</STYLE>
</HEAD>
<BODY>
.....
<h1 id = "id1" >PARAGRAFUL 2 </h1>
.....
</BODY>
Deoarece valoarea atributului id este unica in interiorul unui document stilul se aplica cel
mult unui singur element din cadrul documentului in al carui antet este definit modelul de
stil.
Pentru a defini un model de stil ce urmeaza a se aplica tuturor elementelor de acelasi tip
se rescriu proprietatile care urmeaza a defini caracteristicile tipulului respectiv. De
exemplu, daca dorim ca toate elementele de antet h1 sa fie scrise cu culoare rosie pe fond
galben se foloseste sintaxa:
<STYLE>
H1{ background:Yellow ;color:Red}
</STYLE>
Pentru a aplica un model de stil mai multor elemente fara a fi nevoie ca acele elemente sa
fie de acelasi tip se definesc clase de stiluri aplicabile apoi unui element cu ajutorul
atributului class, atribut pe care il au toate elementele care compun corpul unui document
HTML. O clasa de stil poate fi aplicata obiectelor de acelasi tip sau poate fi aplicata unor
obiecte de tipuri diferite, lucrul acesta depinzand de modul de definire al clasei.
De exemplu, pentru a defini un stil aplicabil anumitor elemente antet H1, dar nu in mod
obligatoriu tuturor elementelor H1 se foloseste formularea:
<STYLE>
H1.special{ background:Yellow ;color:Red}
</STYLE>
<BODY>
.....
<h1 class="special" >PARAGRAFUL 2 </h1>
.....
<h1>PARAGRAFUL 3 </h1>
.....
</BODY>
by endy for TorrentsMD.com
Astfel, elementul h1 corespunzator paragrafului 2 va avea proprietatile definite de clasa de
stil "special", pe cand elementul h1 corespunzator paragrafului 3 nu va fi afectat de
declaratia de stil din antet.
Pentru a defini o clasa de stil aplicabila unor tipuri diferite de elemente se defineste clasa
de stil fara a specifica un anume tip de element HTML:
<STYLE>
.special{ background:Yellow ;color:Red}
</STYLE>
<BODY>
.....
<H1 class="special" >PARAGRAFUL 2 </H1>
.....
<P>Asa cum se specifica in <SPAN class = "special">paragraful 2 </SPAN> ... </P>
.....
</BODY>
Aceeasi clasa de stil este aplicata acum pentru a formata aspectul unui antet de tipul H1 si
a unui bloc de text marcat cu elementul SPAN.
Modalitatea care ofera creatorilor de documente HTML cea mai mare flexibilitate in crearea
si apoi intretinerea unuia sau mai multor documente legate intre ele si eventual prezentate
in cadrul aceluiasi "site" este definirea unor modele de stiluri in fisiere de sine statatoare -
asa numitele Foi de Stil Externe - si referirea lor din cadrul oricarui document care necesita
acest lucru. In acest fel, pentru a modifica aspectul unui document fara a modifica
continutul acestia, e suficient sa se modifice fisierul foii de stil externe, modificarea
afectand automat toate documentele care fac referire la foaia de stil respectiva.
Referirea unei foi de stil se face cu ajutorul elementului LINK din antetul documentului.
Atributul href al elementului va reprezenta URL-ul foii de stil externe, iar atributul rel va
lua valoarea "stylesheet". Optional mai pot fi prezente si atributul type pentru a desemna
limbajul de stil folosit, sau title pentru a identifica foaia de stil .
Exemplu:
Trebuie stiut ca folosirea foilor de stil externe mareste timpul necesar incarcarii
documentului in fereastra programului de navigare Web, metoda cea mai putin
pretentioasa din acest punct de vedere fiind definirea stilurilor la nivelul fiecarui element.
by endy for TorrentsMD.com
Concurenta stilurilor in interiorul documentului
In cazul in care un element cade in incidenta mai multor modele de stil definite in
interiorul sau in exteriorul documentului stilul final va fi format dintr-o suma a
proprietatilor care apar in fiecare dintre modelele de stil respective.
In cazul in care aceeasi proprietate ia valori diferite in modelele de stil care se aplica
aceluiasi element valoarea finala va fi data dupa urmatoarele reguli:
valorile din modelele de stil definite prin elementul STYLE au prioritate fata de valorile
prezente in modelele de stil externe si sunt, la randul lor, inlocuite de valorile aparute in
stilurile definite la nivel de element.
daca aceeasi proprietate apare in doua sau mai multe modele de stil inglobate in antetul
documentului atunci modelul de stil definit prin identificator are prioritate fata de clasa de
stil, care, la randul ei, are prioritate fata de stilul definit pe tipuri de elemente.
Exemplu:
<STYLE>
.special{ background:Yellow }
H1{ background:Red}
#id1{ background:Blue}
</STYLE>
<BODY>
.....
<H1 class="special" id = "id1" >PARAGRAFUL 2 </H1>
.....
</BODY>
In exemplul de mai sus toate cele trei modele de stil sunt aplicabile elementului H1 din
document, dar valoarea finala a proprietatii "background" va fi "Blue".
Deoarece firmele producatoare ale programelor de explorare Web si-au luat libertatea de
a implementa dupa cum au crezut ele de cuviinta limbajele de modele de stil, adaugand
fiecare dintre ele propriile proprietati de stil, este foarte dificil de prezentat lista tuturor
proprietatilor de stil pe care le puteti folosi in documentele pe care le veti creea. Ceea ce
va propun eu este un set de proprietati de stil pe care variantele 6.0 ale programelor
Netscape Navigator si Internet Explorer le recunosc. Pentru o documentatie completa
asupra acestui subiect vizitati site-urile oficiale ale celor doua companii producatoare.In
cazul in care vreti sa va asigurati ca documentul dumneavoastra va putea fi interpretat
fara erori de catre variantele mai vechi ale browserelor sau de catre browsere care nu
by endy for TorrentsMD.com
recunosc deloc modelele de stil, intercalati definitiile stilurilor intre marcajele de
comentariu:
<STYLE type="text/css">
<!--
H1 { color: blue }
P { color: green}
-->
</STYLE>
Pentru a specifica unele caracteristici care privesc fundalul unor elemente se folosesc
proprietatile:
repeat
no-repeat
repeat-x
repeat-y
fixed - imaginea din fundal ramane fixa atunci cand continutul elementului se deplaseaza
xx-small
x-small
small
medium
large
x-large
xx-large
normal
italic
normal
bold
text-indent pentru indentarea textului fata de marginea stanga sau deapta (in functie de
directia de scriere) a elementului "container" care contine textul
text-transform pentru realizarea optiunilor litere mari-litere mici asupra textului. Valorile
posibile sunt:
by endy for TorrentsMD.com
capitalize pentru a scrie primul caracter al fiecarui cuvant cu litera mare
text-decoration pentru a specifica unele efecte simple aplicate textului. Astfel, puteti folosi:
overline pentru a trasa o linie deasupra textului ( neimplementat in varianta Netscape 4.0)
block pentru a oferi textul sub forma de "bloc de text". In felul acesta browser-ul va trece
la linie noua inainte si dupa afisarea continutului blocului.
inline pentru afisa textul fara a trece la linie noua, asezarea sa in interiorul elementului
"container" fiind decisa doar de dimensiunea continutului sau (neimplementat in versiunea
Netscape 4.7).
In general, proprietatile de stil pentru formatarea textului raman valabile si pentru liste,
cu conditia de bun simt ca elementele acestor liste sa fie de tip text. In plus exista cateva
proprietati de stil specifice listelor si care se refera indeosebi la semnul de marcare al
itemilor unei liste:
list-style-tipe pentru a selecta tipul marcajului pentru item dintre cele prestabilite:
disc
circle
by endy for TorrentsMD.com
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Desi par numeroase, proprietatile de stil care vizeaza bordurile obiectelor se pot retine
usor deoarece ele stabilesc doar trei atribute care se aplica fie tuturor bordurilor, fie uneia
dintre cele 4 borduri posibile. Iata aceste proprietati:
border-style - determina stilul liniei de bordura. Acelasi stil se va aplica celor 4 borduri ale
obiectului. Optiunile posibile sunt:
groove
ridge
inset
outset
border - stabileste caracteristicile bordurii printr-un numar de 3 valori separate prin spatiu,
valori specificand, in ordine, dimensiunea, stilul si culoarea bordurii. Exemplu:
<H1 style="border:5 solid Blue">
border-top
border-right
border-bottom
border-left
Pozitionarea elementelor in cadrul documentului este una dintre sarcinile cele mai
delicate ale unui creator de pagini Web care doreste sa ofere un aspect atragator
documentului creat. Proprietatile de stil permit multa flexibilitate in aceasta privinta. Iata
Cateva dintre acestea:
relative - elementul este pozitionat relativ la pozitia pe care ar trebui in mod normal sa o
ocupe in document
by endy for TorrentsMD.com
top - determina pozitia elementului in functie de marginea de sus a elementului relativ la
care se face pozitionarea
left - determina pozitia elementului in functie de marginea din stanga a elementului relativ
la care se face pozitionarea
clip - determina afisarea doar a unei portiuni "decupata" din elementul respectiv.
Dreptunghiul decupat se exprima sub forma rect(sus,dreapta,jos,stanga), unde fiecare
dintre cele 4 valori poate fi inlocuita cu valoarea auto, care lasa marginea respectiva
nedecupata. Formularea clip:auto afisaza obiectul nedecupat.
Aceasta proprietate este aplicabila doar obiectelor care au atributul position:absolute.
clear - stabileste daca un bloc de text admite sau nu obiecte in stanga sau in dreapta sa.
Optiunile posibile sunt:
left - textul se deplaseaza in jos pozitionandu-se sub un eventaual obiect situat in stanga
sa
right - textul se deplaseaza in jos pozitionandu-se sub un eventual obiect situat in dreapta
sa
by endy for TorrentsMD.com
both - textul se deplaseaza in jos pozitionandu-se astfel incat sa nu existe obiecte nici in
stanga si nici in dreapta sa
doua valori - prima pentru marginile de sus si de jos, iar a doua pentru marginile din
stanga si dreapta
trei valori - prima pentru marginea de sus, a doua pentru marginile din stanga si dreapta si
a treia pentru marginea de jos
margin-top
margin-right
margin-bottom
margin-right
padding - determina spatiul lasat intre marginile (eventual bordura) unui obiect si
continutul sau. Numarul si semnificatia valorilor specificate sunt identice cu cele prezentate
la proprietatea "margin"
padding-top
padding-right
padding-bottom
padding-left
Un script este un program care poate insoti documentul HTML sau poate fi inclus in acesta
si care este executat pe calculatorul utilizatorului. Programul poate fi executat atunci cand
documentul este incarcat in fereastra programului de explorare Web, sau in momentul in
care utilizatorul interactioneaza cu un anumit element din cadrul documentului (de
exemplu apasarea unui buton).
Exista mai multe limbaje pentru scripturi, insa cel mai util si mai raspandit dintre ele este
JavaScript, acesta fiind implementat atat de Netscape Navigator cat si de Internet
by endy for TorrentsMD.com
Explorer. Cele doua programe pun la dispozitia limbajelor de script un set de obiecte
impreuna cu proprietatile si metodele lor, obiecte care sunt - in general - corespondente
ale elementelor HTML ale documentului. Acest set este cunoscut sub numele de Document
Object Model. Din nefericire, acesta este destul de voluminos si - ceea ce e mai neplacut -
difera de la un program la altul. Pentru a studia documentatia referitoare la Document
Object Model vizitati site-urile celor doua companii.
type
text/javascript
text/vbscript
langauage
Defineste varianta limbajului de script. Acest atribut nu mai este recomandat deoarece nu
exista o standardizare a valorilor sale posibile
charset
Daca blocul de comenzi script apare in corpul documentului si nu este incadrat intr-o
functie sau procedura, atunci comenzile se vor executa in momentul incarcarii
by endy for TorrentsMD.com
documentului de catre browser.
Daca blocul de comenzi este incadrat in functii sau proceduri, indiferent ca el apare in
antetul sau in corpul documentului, ele vor fi executate ca urmare a apelului functiei
respective. Exemplu:
<HEAD>
<SCRIPT>
function coloreaza()
{...}
</SCRIPT>
</HEAD>
<BODY>
...
<SPAN id = "s1" onclick = "coloreaza()">
...
</BODY>
Iata care sunt evenimentele care pot fi specificate ca atribute de comportament ale
elementelor HTML:
onload
Se produce atunci cand browserul a incarcat documentul sau toate cadrele unei pagini de
cadre. Acest eveniment se asociaza numai elementelor BODY si FRAMESET.
onunload
by endy for TorrentsMD.com
Se produce atunci cand browserul scoate documentul sau toate cadrele unei pagini de
cadre din fereastra sa. Acest eveniment se asociaza numai elementelor BODY si
FRAMESET.
onclick
ondblclick
onmousedown
Se produce atunci cand utilizatorul apasa butonul mouse-ului. Modul in care elementele
documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick"
onmousup
Se produce atunci cand utilizatorul ridica butonul mouse-ului. Modul in care elementele
documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick"
onmouseover
Se produce atunci cand utilizatorul pozitioneaza cursorul deasupra unui element. Modul in
care elementele documentului recunosc acest eveniment este explicat in cadrul
evenimentului "onclick"
onmousemove
Se produce atunci cand utilizatorul deplaseaza cursorul deasupra unui element. Modul in
care elementele documentului recunosc acest eveniment este explicat in cadrul
evenimentului "onclick"
onmouseout
by endy for TorrentsMD.com
Se produce atunci cand utilizatorul scoate cursorul de deasupra unui element. Modul in
care elementele documentului recunosc acest eveniment este explicat in cadrul
evenimentului "onclick"
onfocus
onblur
onkeypress
Se produce atunci cand o tasta este apasata si eliberata in timp ce elementul caruia i s-a
asociat acest eveniment este elementul activat
onkeydown
Se produce atunci cand o tasta este apasata in timp ce elementul caruia i s-a asociat acest
eveniment este elementul activat
onkeyup
Se produce atunci cand o tasta este eliberata in timp ce elementul respectiv este elementul
activat
onsubmit
Se produce atunci cand este actionat butonul de tip "submit" al unui formular. Se aplica
doar elementului FORM.
onreset
Se produce atunci cand este actionat butonul de tip "reset" al unui formular. Se aplica doar
elementului FORM.
onselect
onchange
Se produce atunci cand valoarea unui control al unui formular a fost modificata si controlul
nu mai este activat. Se aplica elementelor INPUT, SELECT si TEXTAREA
by endy for TorrentsMD.com
Trebuie stiut faptul ca implementarea limbajului JAVASCRIPT pe Internet Explorer si
Netscape Navigator este diferita. Netscape Navigator in versiunile 4.x s-a indepartat de
standardele propuse de W3C. Versiunea 6 a sa accepta o oarecare standardizare a DOM,
insa pastreaza diferente majore fata de Internet Explorer in ceea ce priveste posibilitatea
modificarii in-line a proprietatilor elementelor documentelor. In IE proprietatile unui obiect
sunt disponibile ca sub-proprietati a proprietatii "style". Pentru Navigator, singura
posibilitate de a modifica proprietatile unui element fara a reincarca documentul in browser
este aceea de a folosi etichetele <LAYER> si </LAYER> cu ajutorul carora se creeaza
straturi in document care pot fi afisate, ascunse sau suprapuse. Insa aceasta eticheta nu a
fost inclusa in lmbajul HTML standard si se pare ca Netscape nu o va sustine in continuare.
Pentru mai multe informatii privind modalitatea efectiva de lucru cu limbajul JAVASCRIPT
pe cele doua browsere consultati documentatia de specialitate.