18365205 Tutorial HTML
-
Upload
anonymous-vss2gvaa -
Category
Documents
-
view
217 -
download
0
Transcript of 18365205 Tutorial HTML
-
8/22/2019 18365205 Tutorial HTML
1/15
Tutorial HTML
Notiuni de bazaHTML este prescurtarea de la Hyper Text Mark-up Language si este codul caresta la baza paginilor web.Paginile HTML sunt formate din etichete sau tag-uri si au extensia .htmlsau .htm.In marea lor majoritate aceste etichete sunt pereche, una de deschidere si alta de inchidere . browserul interpreteaza acesteetichete afisand rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nuface deosebirea intre litere mici si mari).
Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina estesetata a fi afisata automat la vizitarea unui domeniu.De exemplu la vizitarea domeniului www.nume.ro este afisata paginawww.nume.ro/index.html.
Unele etichete permit utilizarea de atribute care pot avea anumite valori: ...
Componenta unui document HTML este:1. versiunea HTML a documentului2. zona headcu etichetele 3. zona bodycu etichetele sau
Versiunea HTML poate fi:HTML 4.01 Strict
HTML 4.01 TrANSItionalHTML 4.01 Frameset
Toate paginile HTML incep si se termina cu etichetele si .In interiorul acestor etichete gasim perechile , si ,
.
headcontine titlul paginii intre etichetele si , descrieri de tip, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe(de exemplu scripturi, fisiere de tip CSS sau favicon).
1
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
2/15
Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor,informatii utile motoarelor de cautare si au urmatorul format:
Exemplu: link catre un fisier extern CSS:
bodygazduieste practic toate etichetele afisate de browser pe ecran.
Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina
Titlu
Continut pagina
Si in HTML poate fi introdus un comentariu, care bineinteles nu va fi afisat debrowser:
FormulareFolosind formularele webdesignerul sau administratorul site-ului poate colectadiverse informatii de la vizitatori.
Cele mai importante atribute ale etichetei sunt action si method.action metioneaza adresa scriptului (aflat pe server) care va interpretaformularul. Aceste scripturi pot fi scrise in limbajele PHP sau Pearl.methodindica metoda folosita de browserpentru transmiterea formularului.Poate lua valorile getsipost.get- datele sunt trimise prin adaugarea la adresa indicata de action. Permitetrimiterea unor mici cantitati de date.
post- datele sunt trimise separat si sunt permise cantitati mari de date.
2
http://www.drogoreanu.ro/tutorials/html/exemplu.htmlhttp://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu.htmlhttp://void%280%29/http://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
3/15
Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge
HTML Afisare
Nume:
Prenume:
Nume:Prenume:
Eticheta poate avea atributele:type - indica tipul datelor care vor fi introduse (text=text, submit=trimite,reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta devalidare, button=buton, radio=selectarea unui singur element dintr-un grup,file=fisier pentru upload)
name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor decatre scriptul mentionat in actionsize - numarul de caractere vizibile din campmaxlenght- numarul maxim de caractere introduse in campreadonly- datele prezente in camp nu pot fi modificate
Exemplu: formular continand toate valorile atributului
HTML Afisare
Nume:
Prenume:
Telefon:
Fax:
Email:
Sexul: Masculin FemininStudii: Scoala profesionalaLiceu Facultate
Accesati internetul de la:Serviciu
Nume:Prenume:
Telefon:Fax:Email:
Sexul: Masculin Feminin
Studii:
Accesati Internetul de la:ServiciuAcasa
Internet cafe
Fisier:
Observatii:
3
http://www.drogoreanu.ro/tutorials/html/exemplu9_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu9_2.htmlhttp://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu9_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu9_2.htmlhttp://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
4/15
AcasaInternet cafe
Fisier:
Observatii:
Constructia selectintroduce un meniu derulant (lista de selectie) la care valorilesunt declarate prin option.
In campul textarea se poate introduce text si are atributele cols (numar decoloane) si rows (numar de randuri).
CadreExemplele prezentate in capitolele anterioare incarcau o singura pagina HTML infereastra browserului.
Sunt si situatii in care imaginea afisata de browser este formata din mai multepagini HTML numite cadre. Caracteristic acestor pagini este ca perechea deetichete este inlocuita de iar ininteriorul lor cadrele sunt delimitate de si .
Atributele etichetei framesetsunt:cols imparte pagina in coloane si are valori exprimate in procente dindimensiunea ferestrei, numar de pixeli sau * adica spatiul ramasrows imparte pagina in randuri cu aceleasi valori ca la colsbordercolorculoarea tuturor chenarelor conform modelului #rrggbbframeborderinhibarea afisarii chenarelor cu valorile yes sau no
Cadrele sunt introduse prin pereche de etichete care suportaatributele:srcfisierul sau adresa fisierului introdusbordercolorculoarea chenarului cadrului curent conform modelului #rrggbbnoresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrulscrollingadauga cadrului bare de defilare cu valorile yesno si auto
4
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
5/15
Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimeatotala. Pagina de sus are chenarul rosu iar cea de jos are scroll.
Exemplul 8_1
Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimeatotala, fara posibilitatea de redimensionare a cadrelor
Exemplul 8_2
Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini
care se vor deschide in cadrul din stanga (se poate verifica functionareaatributului target al legaturii). Cadrul din stanga va avea scroll.
In situatia in care browserul folosit nu suporta pagini care contin cadre imagineaafisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de si intre etichetele si prin careinformam vizitatorul ca foloseste un browser care nu suporta cadre.
Browserul folosit nu suporta cadre
Cadre in-lineSunt blocuri care se introduc in pagina prin perechea de etichete si
5
http://www.drogoreanu.ro/tutorials/html/exemplu8_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu8_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu8_3.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu8_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu8_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu8_3.html -
8/22/2019 18365205 Tutorial HTML
6/15
si au atributele:srcfisierul sau adresa acestuiaheightinaltimea cadrulwidth latimea cadrulframebordergrosimea bordurii (chenarului)
scrollingadauga bare de defilare cu valorile yesno si autoalign aliniaza cadrul (left, right, center, top, bottom, middle)vspace distanta peste si sub cadruhspace distanta in stanga si in dreapta de cadru
Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poateintroduce un mesaj pentru browserele care nu suporta cadre in-line. Modul deafisare al exemplului poate diferi de la un browser la altul.
Exemplul 8_4Mai jos este un cadru in-line cu urmatori parametrii:
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"
Browserul folosit nu suporta cadre in-lineVideoclipuriFormatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau*.mpeg), QuickTime (*.mov), AVI (*.avi).
In pagini putem introduce:1. link-uri catre fisiere video2. videoclipuri care care sa fie vizionate direct din pagina web
Exemplu: Varianta 1 este un simplu link catre un fisier video
HTML Afisare
fisier video fisier video
A doua varianta este acceptata doar de browserul internet Explorer care permiteatribute speciale in eticheta :dynsrc- fisierul sursa video care va fi vizionatloop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si unnumar intreg care indica de cate ori va fi vizionat fisierul)start- indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost
6
http://www.drogoreanu.ro/tutorials/html/exemplu8_4.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu7.htmlhttp://www.drogoreanu.ro/tutorials/images/1.avihttp://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu8_4.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu7.htmlhttp://www.drogoreanu.ro/tutorials/images/1.avihttp://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
7/15
incarcata, mouseover=cand mose-ul este deasupra imaginii)controls - afiseaza butoanele de control
SuneteCateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau*.midi), WAVE (*.wav), AU (*.au).
In pagini putem introduce:1. link-uri catre fisiere de sunet2. sunete care care sa fie audiate direct din pagina web3. sunet de fond (fundal sonor)
Exemplu: Varianta 1 este un simplu link catre un fisier de sunet
HTML Afisare
fisier sunet fisier sunet
A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care potcontine si butoane de control de tip Play, Pause, Stop.
A treia varianta este acceptata doar de browserul internet Explorer si consta in inserarea in interiorulcorpului paginii a etichetei: care poate avea atributele:src- fisierul sursa de sunet care va fi audiatloop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cateori va fi audiat fisierul)
TabeleAceste etichete au o mare utilizare deoarece tabele constituie structura care stala baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).
Tabelul este format din linii si coloane impartind zona in celule. Fiecare celulapastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecarerand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vomintroduce un spatiu gol (space) sau codul echivalent .
Pentru inserarea unui tabel este folosita perechea de etichete si
, pentru un rand si iar pentru o celula si .
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px,coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor)
HTML Afisare
7
http://www.drogoreanu.ro/tutorials/html/exemplu6.htmlhttp://www.drogoreanu.ro/tutorials/images/1.midhttp://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu5_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu6.htmlhttp://www.drogoreanu.ro/tutorials/images/1.midhttp://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu5_1.html -
8/22/2019 18365205 Tutorial HTML
8/15
rosugalben albverde
rosu galben
alb verde
Atributele etichetei table sunt:border = bordura (0 = lipsa bordura)width = latimea tabeluluiheight = inaltimea tabeluluibgcolor = culoarea de fundalbackground = imaginea de fundalcellspacing = distanta intre celulecellpaddind = distanta dintre marginea celului si continut
Atributele etichetei tdsunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta,center=centru)valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)width = latimea celuleiheight = inaltimea celuleibgcolor = culoarea de fundalbackground = imaginea de fundalcolspan = uneste celula cu cea din dreapta eirowspan = uneste celula cu cea de sub ea
Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din
randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4
HTML Afisare
R1 C1 R1 C2 R1C3 R1 C4 R2 C1+C2 R2 C3 R2 C4 R3 C1 + R4C1 R3 C2 R3 C3 R3
C4 R4 C2 R4 C3 R4 C4
R1C1
R1C2
R1C3
R1C4
R2C1+C2
R2C3
R2C4
R3C1 +
R4C1
R3C2
R3C3
R3C4
R4C2 R4C3 R4C4
Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosiperechea de etichete si in locul etichetelor si . Astfelcontinutul celulei va fi afisat ingrosat si aliniat pe mijloc.
8
http://www.drogoreanu.ro/tutorials/html/exemplu5_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_2.html -
8/22/2019 18365205 Tutorial HTML
9/15
Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele si
HTML Afisare
Titlul 1 Titlul 2lt;/th> 1 2 3 4
Titlul 1 Titlul 2
1 2
3 4
Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc,deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriuimediat dupa tag-ul table dar inainte de prima eticheta tr.
Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
HTML Afisare
Necesar alimente Produse Cantitatelt;/th> Fructe1 kg Legume 5 kg Carne 1,5 kg
Necesar alimente
Produse Cantitate
Fructe 1 kg
Legume 5 kg
Carne 1,5 kg
ImaginiFolosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei
incarcari greoaie daca dimensiunile imaginii sunt mari.
Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau*.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).
Formatul gifeste recomadat pentru realizarea butoanelor si a icoanelor iarjpgpentru fotografii.
Eticheta folosita pentru inserarea unei imagini in pagina este si areurmatoarele atribute:src = sursa, locul unde se afla imaginea
width = latimea imaginiiheight = inaltimea imaginiialt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu afost gasitaborder = chenar (0 = lipsa bordura)
9
http://www.drogoreanu.ro/tutorials/html/exemplu5_3.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_4.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_3.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_4.html -
8/22/2019 18365205 Tutorial HTML
10/15
Dimensiunea imaginii afisate de browsereste stabilita de argumentele width siheightcare pot fi diferite de dimensiunile imaginii originale, caz in care imagineava fi redimensionata automat de catre browser.
Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca
o data cu border=1
HTML Afisare
Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza imaginile.Optimizarea consta in:1. reducerea dimensiunii imaginii fara degradarea majora a calitatii2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat deprogramele de grafica (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
Legaturi3.1 LegaturiLegatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera
utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul estesubliniat iar atunci cind suntem deasupra lui cursorul isi schimba forma.
Link-ul este definit cu etichetele si si are atributele:href- adresa fisierului destinatietarget- in ce fereastra se va deschide fisierul destinatietitle - mica descriere asociata legaturii afisata in momentul in care mouse-ul seafla deasupra legaturii
Adresa fisierului destinatie poate fi exprimata astfel:nume fisierdaca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi serversau disc, indicandu-se caleaadresa URL fiind adresa completa a paginii (de exemplu:http://www.proba.ro/pagina.html)
Atributul target poate lua valorile:_blankpagina va fi incarcata intr-o noua fereastra_parentpagina va fi incarcata in fereastra parinte
10
http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu4.htmlhttp://void%280%29/http://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu4.htmlhttp://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
11/15
_top pagina va fi incarcata in fereastra top a cadrului_selfpagina va fi incarcata in aceeasi fereastra
Exemplu: link catre pagina web Academia Online
HTML AfisareAcademiaOnline
Academia Online
Putem insera un link catre o adresa de e-mail putand asocia si un subiectprestabilit
HTML Afisare
Trimite e-mail Trimite e-mail
Trimite e-mail
Trimite e-mail
Culoarea linkurilor poate fi modificata introducand in eticheta bodyurmatoareleatribute:LINKlegatura nevisitata (default albatru)VLINKlegatura visitata (default rosu)
ALINKlegatura activa (nu prea se foloseste - default portocaliu)
3.2 AncoreSe pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazulunor pagini HTML lungi sau catre un loc anume aflat intr-o alta.
Ancora se defineste tot intre etichetele si dar cu atributul name. Pentru
a face trimitere catre ancora se introduce un link cu atributul hrefavand cavaloare denumirea ancorei.
Exemplu:
Ancora AncoraLink catre ancora aflata in aceeasipagina
Inapoi la ancora
Link catre ancora aflata in alta paginaInapoi laancora din pagina.html
Liste
11
http://www.drogoreanu.ro/tutorials/html/exemplu3_1.htmlhttp://www.academiaonline.ro/http://void%280%29/mailto:[email protected]:[email protected]?subject=%22subiect%20prestabilit%22http://www.drogoreanu.ro/tutorials/html/exemplu3_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu3_1.htmlhttp://www.academiaonline.ro/http://void%280%29/mailto:[email protected]:[email protected]?subject=%22subiect%20prestabilit%22http://www.drogoreanu.ro/tutorials/html/exemplu3_2.html -
8/22/2019 18365205 Tutorial HTML
12/15
Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate,ordonate si de definitii.
2.1 Liste neordonateAceste liste sunt delimitate de etichetele si iar elementele de si
.
Exemplu
HTML Afisare
Exemple de fructe:mereperestruguri
Exemple de fructe:
mere
pere
struguri
Elementele listei pot fi particularizate folosind atributul type care poate luavalorile square, c[hcXyISPtaFdoTqjjTLudh]le si disc.
Exemplu
HTML Afisare
Exemple de legume:rosii
cartofimorcovi
Exemple de legume:
rosii
o cartofi
morcovii
2.2 Liste ordonateAceste liste sunt delimitate de etichetele si iar elementele de si.
Exemplu
HTML Afisare
Exemple de combustibili:benzinamotorinagaz lichefiat
Exemple de combustibili:
1. benzina2. motorina
3. gaz lichefiat
12
http://www.drogoreanu.ro/tutorials/html/exemplu2_1.htmlhttp://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu2_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu2_3.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu2_1.htmlhttp://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu2_2.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu2_3.html -
8/22/2019 18365205 Tutorial HTML
13/15
Elementele listei pot fi particularizate folosind atributul type care poate luavalorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1(optiunea default):
Exemplu
HTML Afisare
Medii de stocare:HDD-uldischetaCD-ROM-ul
Medii de stocare:
I.HDD-ulII.discheta
III.CD-ROM-ul
2.3 Liste de definitiiAceste liste sunt delimitate de etichetele si .
Termenii listei sunt delimitati de etichetele si iar definitiile termenilor de si .
Exemplu
HTML Afisare
Legenda:HTMLHyper Text Mark-ul LanguageIP
internetprotocol
Legenda:HTML
Hyper Text Mark-ul LanguageIP
Formatare textIn HTML trecerea la un rand nou se face doar prin introducerea etichetei
iarpentru paragraf nou cu eticheta.
introduce o linie linie orizontala si trecerea la un rand nou.
Folosind etichete adecvate textul poate fi formatat.Spre exemplu fonturilorli se poate modifica: marimea, culoarea, forma (normal,bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sauverticala iartitlurile (header), de la 1 la 6, sunt diferite ca marime (1 cel maimare iar 6 cel mai mic).
13
http://www.drogoreanu.ro/tutorials/html/exemplu2_4.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu2_5.htmlhttp://void%280%29/http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu2_4.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu2_5.htmlhttp://void%280%29/http://void%280%29/ -
8/22/2019 18365205 Tutorial HTML
14/15
Etichetele si delimiteaza un bloc text in vederea formatarii. Unul dinatributele blocului diveste align care poate lua valorile:centeraliniere pe centruleftaliniere la stangarightaliniere la dreapta
In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fostintrodus (text preformatat) in fisierul sursa vom folosi pereche de etichete si .
Exemplu
HTML Afisare
text normal text normal
text bold text bold
text cursiv text cursiv
text subliniat text subliniattext taiat
exponent exponent
indice indice
caractere monospatiate caractere monospatiate
Citat Citat
evidentiat evidentiat
text scris la tastaturatext continand cod de
computer
text scris la tastatura text scris la tastatura
mostra de cod de computer mostra de cod de computertext ingrosat text ingrosat
mare mare
mic mic
font rosu font rosu
font Courier font Courier
font size=6 font size=6
text aliniat pe centru text aliniat pe centru
text aliniat la stanga text aliniat la stanga
text aliniat la dreapta text aliniat la dreapta
Titlu 1 Titlu 1Titlu 2 Titlu 2
Titlu 3 Titlu 3
Titlu 4 Titlu 4
Titlu 5 Titlu 5
Titlu 6 Titlu 6
14
http://www.drogoreanu.ro/tutorials/html/exemplu1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu1.html -
8/22/2019 18365205 Tutorial HTML
15/15
Harti de imaginiHartile de imagini permit declararea unor zone din imagine ca legaturi catre altepagini web si implica doua aspecte.
Imaginea este declarata ca fiind harta. Pentru aceasta eticheta a imaginiiare urmatoarele atribute:srcfisierul sau adresa fisierului imagineusemap are valoarea de genul #nume care este folosit un interiorul etichetei prezentate mai jos
Definirea hartii folosind perechea de etichete si cu atributulobligatoriu name, avand aceeasi valoare ca la usemap din img.Zona sau zonele continute de harta sunt introduse prin eticheta cuatributele obligatorii:
shape fiind forma ariei declarate cu valorile: rect=dreptunghiulara,circle=circulara,poly=poligonala, default=alte forme (diferite de cele anterioare)coords coordonatele zoneihrefadresa paginii destinatie a legaturii
Exemplu: o harta de imagini care contine 5 zone
Exemplul 10
Harti de imagini
15
http://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu10.htmlhttp://void%280%29/http://www.drogoreanu.ro/tutorials/html/exemplu10.html