38
1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de reţele de calculatoare interconectate, care înlesneşte serviciile de comunicare a datelor, cum ar fi: poşta electronică şi grupurile de discuţii. transferul de fișiere (FTP-File Transfer Protocol) conectarea la distanță (telnet) World Wide Web-ul (cunoscut și sub numele de WWW sau Web). Internet-ul este o cale de a conecta reţelele existente de calculatoare, care extinde mult posibilităţile fiecărui sistem participant. Această reţea nu numai că reprezintă o sursă inepuizabilă de informaţii, dar, în acelaşi timp, este o nouă formă de comunicare între oameni.

Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

  • Upload
    others

  • View
    23

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

1

Elemente de HTML (HyperText Markup Language)

Introducere

Internetul este un sistem mondial de reţele de calculatoare interconectate,

care înlesneşte serviciile de comunicare a datelor, cum ar fi:

• poşta electronică şi grupurile de discuţii.

• transferul de fișiere (FTP-File Transfer Protocol)

• conectarea la distanță (telnet)

• World Wide Web-ul (cunoscut și sub numele de WWW sau Web).

Internet-ul este o cale de a conecta reţelele existente de calculatoare, care extinde mult posibilităţile fiecărui sistem participant. Această reţea nu numai că reprezintă o sursă inepuizabilă de informaţii, dar, în acelaşi timp, este o nouă formă de comunicare între oameni.

Page 2: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

2

Internetul poartă o gamă largă de resurse de informare şi de servicii, cum ar

fi documente hipertext legate de World Wide Web (WWW) şi infrastructura

pentru a sprijini poşta electronica.

Comunicaţiile, telefonia, muzica, filmul, televiziunea sunt remodelate sau

redefinite de Internet, dând naştere la noi servicii, cum ar fi Voice over

Internet Protocol (VoIP) şi IPTV.

Ziare, carti şi publicarea de imprimare sunt alte adaptare la tehnologia Web

site-ul, sau sunt transformate în blogging şi fluxuri Web.

Apar noi forme de interacţiune umană prin mesaje instant, forumurile de pe

internet, şi de reţele sociale.

Page 3: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

3

Spaţiul World Wide Web a devenit în ultimii ani o lume complexă, agenţii

economici folosind resursele spaţiului www:

• Operaţii bacare (Internet banking)

• Comertul online(E-comerce)

• Rezervărea şi cumpararea online (rezervare hotel, bilet avion, etc.)

Fără îndoială, cel mai dinamic și de succes dintre serviciile Internet este

Word Wide Web-ul.

World Wide Web reprezintă un spațiu informațional alcătuit din resurse

situate în locații cunoscute sub numele de noduri, utilizate prin intermediul

Page 4: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

4

unui sistem hypertext, ele sunt organizate în pagini Web și livrate

utilizatorilor de către un program denumit server Web.Web-ul este structurat

conform unei arhitecturi client-server.

Aceasta înseamnă că un program client (navigator web, browser), rulând pe

un calculator local, conectat la Internet, solicită informaţii de la un program

server, aflat pe un alt calculator, conectat la rândul său la Internet.

Programul server răspunde solicitării, trimiţând datele prin intermediul

Internetului, date care sunt preluate de navigator, interpretate şi afişate.

Page 5: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

5

Unul din primele elemente fundamentale ale WWW (World Wide Web)

este HTML (Hypertext Markup Language), care descrie formatul primar

în care documentele sunt distribuite şi văzute pe Web. Se caracterizează

prin: independenta faţă de platformă, legături hipertext, etc.

Paginile web sunt accesate şi transportate cu Hypertext Transfer Protocol

(HTTP), care poate utiliza opţional criptare (Secure HTTP, HTTPS) pentru a

furniza securitate şi confidenţialitate pentru utilizatorul paginii web.

Paginile unui site pot fi accesate folosind Uniform Resource Locator (URL).

URL-urile paginilor structurate într-o ierarhie, link-urile transmit cititorului

structura site-ul şi îndrumă navigarea.

Page 6: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

6

Introducere în HTML

Paginile HTML contin elemente (etichete) si au extensia .html sau .htm.

Ele pot fi scrise în orice editor de texte, de exemplu Notepad, dar există şi

editoare specializate(Crimson Editor, Notepad++, etc.) care au facilităţi

specifice.

Elemetele sunt incadrate de simbolurile< şi > acestea numindu-se tag-uri.

Elementele sunt de obicei pereche, unul de deschidere <eticheta> si altul de

inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand

rezultatul pe ecran. HTML nu este un limbaj case sensitiv (nu face

deosebirea intre litere mici si mari).

Page 7: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

7

Un document HTML are structura:

<html>

<head>

<title>Titlu</title> <!Zona antetului (comentariu HTML) >

</head>

<body>

Continut pagina

</body>

</html>

Dacă introducem mai multe linii intr-o pagină browser-ul va afişa într-un

singur rînd, întrucît caracterele ”CR/LF” sunt ignorate de browser. Trecerea

pe o linie noua se face la întâlnirea marcajului <br> (line break).

Page 8: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

8

Pentru ca browser-ul să interpreteze corect caracterele ”spaţiu”, ”tab” şi

”CR/LF” ce apar în cadrul unui text, acest text trebuie inclus într-un bloc

<pre>...</pre>.

<html>

<head>

<title> Preformatat </title>

</head>

<body> <pre>

Luni

MARTI

Miercuri</pre>

</body>

</html>

Page 9: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

9

Culoarea fondului poate fi precizata în două moduri:

• Printr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori:

aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,

silver, teal, white şi yellow.

• Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt

cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b,

B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei

<body>, de exemplu: <body bgcolor = culoare>.

Culoarea textului se modifică prin intermediul atributului text al etichetei

<body> după sintaxa <body text = culoare>.

O eticheta poate avea mai multe atribute – culoarea fondului, textului, etc.

Page 10: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

10

<html>

<head>

<title> Culori </title>

</head>

<body bgcolor = red text = blue >

O pagina Web cu fondul roşu!

</body>

</html>

Page 11: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

11

Page 12: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

12

Textul este caracterizat de: Mărime (size), Culoare (color), Font (style).

Acestea sunt atribute ale etichetei <basefont>. Este o eticheta singulară (fără

delimitator de sfîrşit de bloc).

<basefont size = număr color = culoare style = font>

unde:

• număr – poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7

pentru fontul cel mai mare);

• culoare – este o culoare precizată prin nume sau printr-o construcţie

RGB;

• font – poate fi un font generic ca ”serif”, ”san serif”, ”cursive”,

”monospace”, ”fantasy” sau un font specific instalat pe calculatorului

Page 13: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

13

clientului, ca ”Times New Roman”, ”Helvetica” sau ”Arial”. Se acceptă

ca valoare şi o lista de fonturi separate prin virgula, de exemplu: ”Times

New Roman, serif, monospace”.

Domeniul de valabilitate al caracteristicelor precizate de această etichetă se

întinde de la locul în care apare eticheta pînă la sfîrşitul paginii sau pana la

următoarea eticheta <basefont>.

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului

se poate face cu ajutorul a două atribute ale etichetei <body>: leftmargin şi

topmargin

Page 14: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

14

<html>

<head>

<title> Textului şi margine </title>

</head>

<body leftmargin="100" topmargin="50">

A fost odata ca-n povesti<br>

<basefont style = "Arial" color = "Blue" size = "2">

A fost ca niciodata, <br>

<basefont style = "Helvetica" color = "Red" size = "3">

Din rude mari împaratesti, <br>

<basefont style = "serif" color = "Green" size = "4">

O prea frumoasa fata. <br>

<basefont style = "cursive" color = "FF0066" size = "5">

</body>

</html>

Page 15: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

15

Alte formatări:

Aldine (bold) <b>...</b>

Cursiv (italic) <i>...</i> sau <cite>...</cite> sau <em>...</em>

Indice inferior <sub>...</sub>,

Indice superior <sup>...</sup>.

Subliniat <u>...</u>

Font mai mare cu o unitate <big> </big>

Font mai mic cu o unitate <small> </small>

Text tăiat <strike> </strike>

Font maşină de scris<code>...</code> , <kbd>...</kbd>, <tt>...</tt>

Page 16: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

16

Caracteristicile fontului pot fi modificate şi cu <font atribute>….</font>

<font color="red">font rosu</font>

<font face="Courier">font Courier</font>

<font size="6">font size=6</font>

Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nouă şi

permite:

• inserarea unui spaţiu suplimentar înainte de blocul paragraf;

• inserarea unui spaţiu suplimentar după blocul paragraf, daca se foloseşte

delimitatorul </p> (acesta fiind opţional);

• alinierea textului cu ajutorul atributului align, avînd valorile posibile

”left”, ”center” sau ”right”.

Page 17: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

17

<html>

<head>

<title> Paragraf </title>

</head>

<body>

Luceafarul

<p> A fost odata ca-n povesti<br>

A fost ca niciodata, <br>

<p align = "right"> Din rude mari împaratesti, <br>

<p align = "center"> O prea frumoasa fata <br>

</body>

</html>

Page 18: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

18

Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul

etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Tag-ul <h1> permite

scrierea unui titlu cu caractere mai mari şi aldine, pe cînd <h6> foloseşte

caracterele cele mai mici.

<html>

<head>

<title> Titluri </title>

</head>

<body>

<h1 align = "center"> Titlu 1 </h1>

<h2 align = "right"> Titlu 2 </h2>

<h4> Titlu 3 </h4>

</body>

</html>

Page 19: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

19

Într-o pagină Web se pot insera linii orizontale cu ajutorul etichetei <hr>.ce

are etributele:

• align (”left”, ”center”, ”right”) permite alinierea liniei

• width permite alegerea lungimii liniei;

• size permite alegerea grosimii liniei;

• noshade – cînd este prezent defineşte o linie fără umbră;

• color permite definirea culorii liniei.

<html>

<body>

<h1 align = "center"> Harap Alb </h1>

<hr align = "center" width = "705" size = "3" noshade>

</body>

</html>

Page 20: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

20

Alinierea se poate face şi cu ajutorul etichetelor

• <center>...</center> care aliniază centrat toate elementele pe care le

conţine.

• <nobr>...</nobr> afişează textul pe o singura linie.

• <div>...</div>. ce are atributul align (valori: ”left”, ”center”,”right”) şi

atributul ”nowrap” care interzice întreruperea rîndurilor de către browser.

<nobr> Amu cică era odată într-o țară un crai, care avea trei

feciori. Și craiul acela mai avea un frate mai mare, care era

împărat într-o altă țară, mai depărtată. Amu cică era odată

într-o țară un crai, care avea trei feciori. Și craiul acela

mai avea un frate mai mare, care era împărat într-o altă țară,

mai depărtată.

</nobr>

Page 21: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

21

<div align = "center">Amu cic&#259 era odat&#259 &icircntr-o

&#355ar&#259 un crai, care avea trei feciori. &#350i craiul

acela mai avea un frate mai mare, care era &icircmp&#259rat

&icircntr-o alt&#259 &#355ar&#259, mai dep&#259rtat&#259.

</div>

Pentru a scrie cu caractere româneşti (diacritice) trebuie folosite codurile de

mai jos:

Â; &Acirc; â; &acirc; Ă; &#258; ă; &#259; Î; &Icirc; î; &icirc; Ş; &#350; ş; &#351; ł; &#354; Ń; &#355;

Page 22: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

22

Formatele imaginilor acceptate de browsere sunt:

• GIF (Graphics Interchange Format) cu extensia .gif;

• JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;

• BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

• TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Cele mai răspîndite formate sunt GIF (dimensiune mica, calitate slabă) şi

JPEG (dimensiune mare, calitate foarte bună).

Pentru inserarea unei imagini intr-o pagină web, se foloseşte eticheta

<img> care are atributele:

src=sursa, locul unde se afla imaginea

width = latimea imaginii

height = inaltimea imaginii

Page 23: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

23

alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a

fost gasita

border = chenar (0 = lipsa bordura) (de la ”image” = imagine).

align = care poate lua următoarele valori:

• ”left” – aliniere la stînga; celelalte componente sunt dispuse în partea

dreapta;

• ”right” – aliniere la dreapta; celelalte componente sunt dispuse în partea

stînga;

• ”top” – aliniere deasupra; partea de sus a imaginii se aliniază cu partea

de sus a textului ce precede imaginea;

• ”middle” – aliniere la mijloc; mijlocul imaginii se aliniază cu linia de

baza a textului ce precede imaginea;

Page 24: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

24

• ”bottom” – aliniere la baza; partea de jos a imaginii se aliniază cu linia

de baza a textului.

hspace şi vspace = precizează distanţa în pixeli pe orizontală, respectiv pe

verticală, dintre imagine şi restul elementelor din pagină.

<img src = "pacala.jpg" border= "5" width = "350" height =

"25%" align="center" alt = "Pacala" hspace="20"> Basme

romanesti.

Page 25: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

25

Pentru organizarea informatiei se pot folosi listele ce pot fi neordonate sau

ordonate.

Listele neordonate sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>. <ul> <li type="square">Tuica</li> <li type="circle">Whisky</li> <li type="disc">Coniac</li> </ul>

Listele ordonate sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>. Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default)

<ol> <li type="a">Bere Ursus</li> <li type="a">Bere Ciuc</li> <li type="a">Bere Bergenbier</li> </ol>

Page 26: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

26

Listele pot fi imbricate

<ol> <li>Atletism <ul> <li>Saritura cu prajina</li> <li>Aruncarea greutatii</li> </ul> </li> <li>Sporturi individuale <ul> <li>Tir</li> <li>Box</li> </ul> </li> </ol>

.

Page 27: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

27

Legăturile (link-urile) reprezintă partea cea mai importantă a unei pagini

Web. Ele transformă un text obişnuit în hipertext sau hiperlegatură, care

permite trecerea rapida de la o informaţie aflată pe un anumit server la alta

informaţie memorata pe un alt server aflat oriunde în lume. Legăturile sunt

zone active într-o pagina Web, adică zone de pe ecran sensibile la apăsarea

butonului stîng al mouse-ului.

Link-ul este definit cu etichetele <a> si </a> si are atributele:

• href - adresa fisierului destinatie(nume fişier sau URL)

• target (blank, parent, top, self)- in ce fereastra se va deschide fisierul

destinatie

• title - mica descriere asociata legaturii afisata in momentul in care

mouse-ul se afla deasupra legaturii

Page 28: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

28

<a href="http://www.google.ro" target="_blank">Cautare</a>

Pentru o navigare mai uşoară in cazul unor pagini HTML lungi sau catre un

loc anume aflat intr-o alta pagina se poate folosi eticheta ancora definita cu

etichetele <a> si </a> dar cu atributul name. Pentru a face trimitere catre

ancora se introduce un link cu atributul href avand ca valoare denumirea

ancorei.

<a name="ancora">Sus</a>

<a href="#ancora">Inapoi sus</a>

<a href="ex1.html#nume">Inapoi la ancora din ex1.html</a>

O imagine poate fi folosită de asemenea ca link:

<a href="http://www.google.ro"><img src="pacala.jpg" width="100" height="75" alt="poza"></a>

Page 29: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

29

Tabelele ne permit să cream o reţea dreptunghiulara de domenii, fiecare

domeniu avînd propriile opţiuni pentru culoarea fondului, culoarea textului,

alinierea textului etc.

Pentru a insera un tabel se folosesc etichetele corespondente

<table>...</table>. Un tabel este format din rînduri. Pentru a insera un rînd

într-un tabel se folosesc etichetele <tr>...</tr> )Folosirea etichetei de sfîrşit

</tr> este opţională.=

Un rînd este format din mai multe celule ce conţin date. O celula de date se

introduce cu eticheta <td> ..</td>.

html>

<head>

<title>Exemplu</title>

Page 30: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

30

</head>

<html>

<body> <h1 align = center> Un tabel simplu </h1> <hr>

<table>

<tr> <td> ABC…

<tr> <td> ABC… <td> ABC…

<tr> <td> ABC… <td> ABC… <td> ABC…

<tr> <td> ABC… <td> ABC… <td> ABC…<td> ABC…

</table>

</body>

</html>

Atributele etichetei table sunt:

border = bordura (0 = lipsa bordura)

width = latimea tabelului

Page 31: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

31

height = inaltimea tabelului

bgcolor = culoarea de fundal

cellspacing = distanta intre celule

cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt: align = aliniere pe orizontala a continutului (left, right, center)

valign = aliniere pe verticalala a continutului (top, bottom, middle)

width = latimea celulei

height = inaltimea celulei

bgcolor = culoarea de fundal

Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> (de la

”table caption” = titlu tabel).

Page 32: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

32

Aceasta eticheta trebuie plasată în interiorul etichetelor <table>...</table>,

dar nu în interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi

aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una

dintre valorile:

• ”bottom” (sub tabel);

• ”top” (deasupra tabelului);

• ”left” (la stînga tabelului);

• ”right” (la dreapta tabelului).

Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule

sunt introduse de eticheta <th> (de la ”tabel header” = cap de tabel) în loc de

<td>.

Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate

Page 33: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

33

etichetei <th>. Conţinutul celulelor definite cu <th> este scris cu caractere

aldine şi centrat.

<table border="3"><caption><h1> Orar</h1>, </caption> <tr> <th width="120">Luni</th> <th width="120">Marti</th> <th width="120">Miercuri</th> <th width="120">Joi</th> <th width="120">Vineri</th> </tr> <tr> <td bgcolor="red">Matematica</td> <td>Fizica</td> <td>Romana</td> <td>Engleza</td> <td>Ed. Fizica</td> </tr> <tr> <td>Fizica</td> <td bgcolor="red">Matematica</td> <td>Romana</td> <td>Ed. Fizica</td> <td>Engleza</td>

Page 34: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

34

</tr> </table>

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre(frame-uri). Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de<frame> si </frame>.

Atributele etichetei frameset sunt:

• cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas

• rows imparte pagina in randuri cu aceleasi valori ca la cols • bordercolor culoarea tuturor chenarelor conform modelului #rrggbb • frameborder inhibarea afisarii chenarelor cu valorile yes sau no

Page 35: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

35

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:

• src fisierul sau adresa fisierului introdus • bordercolor culoarea chenarului cadrului curent conform modelului

#rrggbb • noresize dezactiveaza posibilitatea vizitatorului de a redimensiona

cadrul • scrolling adauga cadrului bare de defilare cu valorile yes no si auto

Page 36: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

36

Exemplu

Am construit fişierele index.html, left.html, right.html, HarapAlb.html şi Luceafarul.html

index.html

<html> <head> <title>Lecturi obligatorii</title> </head> <frameset cols="25%, 75%"> <frame src="Left.html" name="left"> <frame src="Right.html" name="right" scrolling="yes"> </frameset> </html>

Page 37: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

37

right.html

<html> <body> <b>Lectura </b><p> </body> </html> left.html

<html> <head> <title>L</title> </head> <body> <b>Lecturi obligatorii</b><p> <a href="HarapAlb.html" target="right">Harap Alb</a><br> <a href="Luceafarul.html" target="right">Luceafarul</a><br> </body> </html>

Page 38: Elemente de HTML (HyperText Markup Language)math.ubbcluj.ro/~tgrosan/EdFiz6.pdf · 1 Elemente de HTML (HyperText Markup Language) Introducere Internetul este un sistem mondial de

38

Tema de laborator

Creaţi o pagina simpla in HTML. Pagina va conţine:

- Text formatat– 3p

- Liste– 2p

- Tabele - 2p

- Link-uri interne şi externe– 2p

- Frame-uri(optional).– 1p