Documente Academic
Documente Profesional
Documente Cultură
Ghid de Initiere in Limbajul HTML
Ghid de Initiere in Limbajul HTML
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.
Nasterea Web-ului
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, 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.
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. Cuvantul 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
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
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.
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
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>
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:
<H1 id = "Paragraful 1" color = "blue">
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
<option selected = "selected">
sau
<option selected>
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:
& sau   = &
< sau < = <
> sau > = >
" sau &@34 = "
® =
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:
<!-- Acesta este un comentariu
care ocupa doua linii de text. -->
Alinierea
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
codulRGB ( 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
Teal #008080
White #ffffff
Yellow #ffff00
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 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
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
</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.
<META> si <LINK>
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.
content="Superman">
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 = "imagine.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 - pentru 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
elementuluiBGSOUND. Doua dintre atributele acestuia sunt foarte importante:
src - determina fisierul audio care va fi rulat de catre browser la incarcarea
documentului in fereastra
Antetele de sectiune
In cazul in care informatia prezentata trebuie impartita in sectiuni si subsectiuni, alegerea cea mai naturala este folosirea marcajelor de formatare a
subtitlurilor.Titlurile si subtitlurile sectiunilor documentului se vor marca folosind
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.
Exemplu:rigle orizontale
<hr noshade>
<hr align="center" width="30%">
<hr align="center" width="50%">
<hr align="center" width="70%">
<hr align="center" width="90%">
<p>
<p>
<p>
<hr align="left" width="50%" size="20" color="#0000FF"></p>
<hr align="right" width="50%" size="20" color="#0000FF" ></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.
Exemplu:Folosirea elementului Address
<H1 align="center">Draga cititorule,</H1>
<p>Bla-bla-bla...
<p>Bla-bla-bla...
<p>Bla-bla-bla...
<p align="right">
Cu drag, <b>Seful</b>!</p>
<hr>
<address>
Pentru recalmatii contactati-ne la<br>
invizibilii@nicaieri.com </address>
inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul exact al
avantajelor si dezavantajelor pe care fiecare le implica.
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.
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
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
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>
7.Liste
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:Prezentarea informatiei sub forma de lista neordonata
<ul>
<li>John Lennon</li>
<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>
<hr>
<b>Folosirea atributului <i>"type"</i>:</b>
<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:
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
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:Folosirea listelor ordonate
<h2>Lista ordonata implicita:</h2>
<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>
<p>
<h2>Folosirea atributului <b>"type":</b></h2>
<ol type="A">
<li>element 1</li>
<li>element 2</li>
<ol type = "i">
<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>
<h2>Folosirea atributului "value"</h2>
<ol>
<li value="10">Element 1</li>
<li value = "100">Element 2</li>
<ol type="i">
<li value="5">Element 2.1</li>
<li value = "10">Element 2.2</li>
</ol>
<li >Element 3</li>
</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
<OL start = "2" >
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
<OL start = "2" >
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
Exemplu:Lista de definitii
<dl>
<dt><b>mar</b></dt>
<dd>fruct rosu</dd>
</dl>
8.Legaturi si referinte
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 Webului. 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
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.
Next si Previous
definesc care sunt urmatorul si, respectiv, precedentul document intr-o ordonare
liniara a colectiei de documente
Contents, Index, si Glosary
definsesc
documente
de
tipul
"Cuprins"
,
"Index"
si
"Glosar".
Exemplu:
<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 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.
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".
Exemplu:folosirea a doua fisiere video
<img border="0" dynsrc="film.avi" loop="-1" start="fileopen" alt="acest videoclip
poate fi vizualizat doar daca folositi Internet Explorer">
<h1>Folosirea elementului <b>OBJECT</b></h1>
<object>
<embed src="film.mpg" width=200, height=200 >
</embed>
</object>
10.Tabele
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.
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 propriuzisa 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.
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
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
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>.
<frame
name="a1"
src="IndexSusStanga.html"
marginwidth="10"
marginheight="10" scrolling="auto" frameborder="1">
<frame name="a2" src="Blank.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0">
<frame name="b1" src="Blank.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0">
<frame name="b2" src="Blank.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0">
</frameset>
<noframes> Aceasta este o pagina de cadre. Din pacate...
</noframes>
Exemplu:Pagina cu cadre imbricate
<frameset rows="64,*">
<frame src="Titlu.html" name="banner" id="banner" scrolling="No" noresize>
<frameset cols="150,*">
<frame
src="IndexStangaImbri.html"
name="contents"
id="contents"
scrolling="Auto">
<frame name="main" src="Blank.html">
</frameset>
</frameset>
<noframes>
Acest document contine cadre, dar....
</noframes>
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:
<BASE target = "cadruA">
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.
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 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-wwwform-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.
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
<tr>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td><input type="radio" name="OptionSex" value="masc">Masculin</td>
<td>Pensionar</td>
<td><input type="checkbox" name="CheckPensi" value="pensionar"></td>
<td
align
=
"center"><input
type="submit"
name="SubButon"
value="Terminat" ></td>
<td align = "center"><input type="reset" value="Sterge"></td>
</tr>
</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.
Exemplu:Folosirea elementului BUTTON
<form action="program2.exe" name="form2" id="form2">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Introduceti numele cautat</td>
<td><input type="Text" size= "40"></td>
<td><button
name="Cauta"
type="submit">Cauta</button></td>
</tr>
value="cauta"
</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:
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.
Exemplu:Folosirea meniurilor derulante
<form action="prog3.exe" name="form3" id="form3">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Orasul:</td>
<td><input type="text" name="TextOras" size="20"></td>
</tr>
<tr>
<td valign = "top">Judetul</td>
<td>
<select name="JudetSelect" id="JudetSelect">
<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>
<td><button type = "submit" value = "gata">O.K</button></td>
<td><button type = "reset" value = "sterge">Sterge</button></td>
</tr>
</table>
</form>
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
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.
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:
<META http-equiv="Content-Style-Type" content="text/css">
Oricum, in caz ca in antetul sau in header-ul HTTP al documentului nu se specifica un
limbaj de modele de stiluri aplicat, limbajul implicit se considera a fi CSS.
Prezentarea proprietatilor de stil se poate face in 3 moduri:
la nivel de element, prin folosirea atributului style
la nivel de document, prin folosirea elementului STYLE definit in antetul
documentului
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
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".
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).
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
Se produce atunci cand se executa un "click" cu mouse-ul pe un element. In Internet
Explorer aproape toate elementele uni document recunosc acest eveniment. In
Netscape Navigator numai butoanele, butoanele radio, casutele de validare si
ancorele sursa recunosc evenimentul. Pentru a aplica eveniemntul unui alt obiect (de
exemplu o imagine) incadrati obiectul respecyiv intre etichetele de marcare ale unei
ancore
si
atribuiti
evenimentul
acele
ancore.
Exemplu:
<a href="javascript:void(0)" onclick="coloreaza()"><img src="imagine1.gif"></a>
Observati forma pe care o are valoarea atributului href. "javascript" reprezinta
protocolul care determina rularea uni script ca actiune asupra obiectului ancora, iar
"void(0)" reprezinta functia a carei apelare nu produce nici un efect. Ea a fost folosita
deoarece actiunea dorita a fost plasata in cadrul expresiei "onclick".
ondblclick
Se produce atunci cand se executa un "dublu click" cu mouse-ul pe un element.
Modul in care elementele documentului recunosc acest eveniment este explicat in
cadrul evenimentului "onclick".
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
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
Se produce atunci cand un element devine elementul activat al documentului. Acest
eveniment se poate asocia elementelor : A, AREA, LABEL, INPUT, ELECT, TEXTAREA,
si BUTTON.
onblur
Se produce atunci cand un element a pierdut proprietatea de element activat al
documentului. Se aplica elementelor enumerate la evenimentul onfocus
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
Se produce atunci cand utilizatorul selecteaza o portiune de text dintr-o caseta de
introducere a textului. Se aplica elementelor INPUT si TEXTAREA
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
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.
Acest tutorial este destinat incepatorilor HTML,dar si celor cu cunostinte medii.Orice
nelamurire,greseala sau sugestie este bine venita la adresa j00@myway.com
Ghid de initiere in limbajul HTML
Autor: j00
contact: j00@myway.com
Referinte:
Ghid de initiere in limbajul HTML de la OKKO <http://www.okko.ro>
HTML By Example, by Todd Stauffer