Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

19
Limbajul HTML Pagina 1 din 19 La crearea unei pagini WEB se parcurg paşii: 1. StartProgramsAccessoriesNOTEPAD. 2. Editarea codului sursă ( a tag-urilor) în editorul de texte NOTEPAD. 3. Salvarea codului sursă sub forma unui fişier cu extensia HTM sau HTML (obligatoriu). Fişierul va fi salvat în folderul dvs. 4. Localizarea fişierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fişier va avea pictograma următoare: . 5. Lansarea în execuţie a fişierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tag-urile scrise în Notepad pe Internet) – dublu click pe fişier şi astfel se va deschide programul Internet Explorer. 6. Modificarea codului sursă se va face în Notepad. Deschiderea fişierului pentru ai modifica sursa se poate face: a. NotepadFileOpen ... b. Direct din fereastra ce s-a deschis la pasul 5 ( fereastra Internet Explorer) astfel: ViewSource (va deschide automat Notepad-ul). Orice modificare adusă codului sursă trebuie salvată (FileSave). Pentru a vedea şi pe Internet modificarea făcută în Notepad trebuie, fie să repetăm paşii 4 şi 5, fie să revenim în fereastra Internet Explorer (ea este deja deschisă – vezi bara de START) şi să alegem din meniul ViewRefresh (sau apăsă tasta F5) Observaţie: Pentru o nouă modificare a codului sursa se va repeta pasul 6. TAG-uri UTILZATE Structura generală a unui fişier cu extensia HTM sau HTML este: Început şi sfărşit de document html Antetul documentului Corpul propriu-zis al documetului Titlul paginii

Transcript of Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Page 1: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 1 din 14

La crearea unei pagini WEB se parcurg paşii:

1. StartProgramsAccessoriesNOTEPAD.

2. Editarea codului sursă ( a tag-urilor) în editorul de texte NOTEPAD.

3. Salvarea codului sursă sub forma unui fişier cu extensia HTM sau HTML (obligatoriu). Fişierul va fi salvat în folderul dvs.

4. Localizarea fişierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fişier va avea

pictograma următoare: .

5. Lansarea în execuţie a fişierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tag-urile scrise în Notepad pe Internet) – dublu click pe fişier şi astfel se va deschide programul Internet Explorer.

6. Modificarea codului sursă se va face în Notepad. Deschiderea fişierului pentru ai modifica sursa se poate face:

a. NotepadFileOpen ...

b. Direct din fereastra ce s-a deschis la pasul 5 (fereastra Internet Explorer) astfel: ViewSource (va deschide automat Notepad-ul).

Orice modificare adusă codului sursă trebuie salvată (FileSave). Pentru a vedea şi pe Internet modificarea făcută în Notepad trebuie, fie să repetăm paşii 4 şi 5, fie să revenim în fereastra Internet Explorer (ea este deja deschisă – vezi bara de START) şi să alegem din meniul ViewRefresh (sau apăsă tasta F5)

Observaţie: Pentru o nouă modificare a codului sursa se va repeta pasul 6.

TAG-uri UTILZATE

Structura generală a unui fişier cu extensia HTM sau HTML este:

Observaţie: un tag se va scrie întotdeauna încadrat de semnele < >. Efectul unui tag este vizibil pâna când acesta este închis (Ex: <title> Prima pagina WEB</title> care permite scrierea pe bara de titlu a programului Internet Explorer a textului Prima pagina WEB).Tag-uri cu efect asupra întregii pagini web

Început şi sfărşit de document html

Antetul documentului

Corpul propriu-zis al documetului

Titlul paginii

Page 2: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 2 din 14

<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a paginii Web, culoarea implicită de scriere a textului, culoarea legăturilor, culoarea legăturilor vizitate, culoarea legăturilor de acţiune.

Atributul BGCOLOR stabileşte culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de fundal va fi albastră – sau <body bgcolor = 804050> (formatul de culoare este RRGGBB – roşu, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal))

Atributul TEXT permite stabilirea culorii implicite de scriere pe întreaga pagină Web (Ex: <body Text = red> – tot textul pe pagina de Web va scris cu roşu)

Atributul LINK permite stabilirea culorii unei legături (vezi tag-urile de la legături). Implicit aceasta este albastră. (Ex: <body link = green> - legăturile vor avea culoarea verde)

Atributul Vlink permite stabilirea culorii unei legături vizitate (Ex: <body vlink = red> – un link vizitat va avea culoarea roşie)

Atributul ALINK permite stabilirea culorii unei legături de acţiune, adică pâna la realizarea conexiunii stabilite de legătură (vezi tag-urile de la legături) link-ul va avea culoarea stabilită prin ALINK, iar după realizarea conexiunii acesta culoare va devenii automat cea specificată cu VLINK (Ex: <body alink = yellow> - un link în acţiune va avea culoarea galbenă)

OBS. Un tag poate folosii toate atributele de care dispune sau numai o parte din acestea (Ex: <body bgcolor = red text = yellow link = gray> Dacă dorim ca pe o pagină Web să avem ca fundal o poză, atunci în locul atributului BGCOLOR din cadrul tag-ului <body bgcolor = a ......> vom folosii atributul BACKGROUND urmând a specifica adresa pozei respective (Ex: <body background = “c:\student\poza.gif” text = red ……>

Tag-uri pentru formatarea caracterelor şi aranjarea textului

<b> - permite scrierea caracterelor îngroşat (bold)

<i> - permite scrierea caracterelor înclinat (italic)

<u> - permite scrierea caracterelor subliniat (underline)

<center> - permite alinierea pe centru a textului pe pagină

<p align = left/right/center>permite alinierea la stânga/dreapta/centru a textului pe pagină

<hr size = a color = b width = c align = left/right/center > - plasează o linie orizontală în document.Atributul SIZE defineşte grosimea liniei orizontale (Ex: <hr size = 3> – linia va avea o grosime de

aproximativ 1 mm)Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va avea culoarea roşie -

sau color = 804050 (formatul de culoare este RRGGBB – roşu, verde, albastru) sau color = 15%85%95% sau color = aaffcc (formatul hexazecimal))

Atributul WIDTH specifică lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontală o să ocupe numai 45% din suprafaţa paginii web)

Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stânga/dreapta/centru)

<br> - întrerupe linia curentă şi trece textul sau imaginea pe următoarea linie

<p> - întrerupe linia curentă şi trece textul sau imaginea la paragraful următorObs. <p> este echivalentul lui <br><br> (de două ori <br>).

<font color = a size = b face = c> - permite stabilirea culorii de scriere a caracterelor, stabilirea dimensiunii acestora, precum şi stilul de scriere (Ex: Times New Roman, sau Arial)

Page 3: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 3 din 14

Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> – textul va fi scris cu albastru. Observaţie: Acest parametru are prioritate faţă de acelaşi atribut din tag-ul <body text = b>. Aşadar, dacă se stabileşte o culoarea a textului pe întreaga pagină Web pe roşu - <body text=red> - şi doresc să scriu un cuvânt cu ablastru atunci voi folosi tag-ul <font color=blue> înaintea cuvântului pe care doresc să-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul <font color=blue> are prioritate faţă de tag-ul <body text=red>.

Atributul SIZE stabileşte dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existând un echivalent al acestora cu dimensiunile caracterelor din WORD – 1 = 8pt / 2 = 10pt / 5 = 18pt / 7 = 36pt – (Ex: <font size = 1> – scrie la o dimensiune a caracterelor de 8pt)

Atributul FACE permite specificarea stilului de scriere (Ex: <font face = Arial> - scrie pe stilul Arial)

<sup> - permite scrierea unor cuvinte la putere (Ex: 9<sup>50 – are ca efect - 950)

<sub> - permite scrierea unor cuvinte ca indice (Ex: X<sub>i – are ca efect – Xi)

<tt> - permite scrierea unui text monospaţiat (Ex: <tt>Este cel mai bine</tt>

<address> - permite scrierea pe un anumit stil aunei adrese poştale, a unui telefon

Tag-uri pentru includerea unei imagini în cadrul paginii Web

<img src = “ “ border = a width = c height = d align = left/right/center alt = “ “> - acest tag permite amplasare unei imagini în cadrul paginii Web

Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web (Ex: <img src=”c:\student\poza.gif”> - va plasa pe pagina de Web fişierul poza.gif existent în folderul c:\student

Atributul BORDER permite stabilirea grosimii liniei ce va înconjura poza (Ex: <img src=”c:\student\poza.gif” border = 3> - linia ce va înconjura poza va avea o grosime de aproximativ 1 mm)

Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontală (lungimea pozei pe orizontală) (Ex: <img src=”c:\student\poza.gif” width = 150> - poza va avea o lungime pe orizontală de aproximativ 5 cm)

Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe verticală (lungimea pozei pe verticală) (Ex: <img src=”c:\student\poza.gif” height = 300> - poza va avea o lungime pe orizontală de aproximativ 10 cm)

Atributul ALIGN permite alinierea imaginii respective în cadrul paginii Web (Ex: <img src=”c:\student\poza.gif” align = left> - poza va fi aliniată la stânga)

Atributul ALT permite scrierea unui text care va apare numai atunci când utilizatorul este poziţionat cu mouse-ul pe imaginea respectivă (Ex: <img src=”c:\student\poza.gif” align = left alt = ”Poza aceasta este din secolul trecut”>)

Tag-uri pentru realizarea de liste

<ol type = a start = b><li>Primul element din listă<li>Al doilea element din listă<li>Al treilea element din listă

</ol>- permite realizarea unei liste ordonate. O lista este ordonată dacă elementele ei au o numerotare în faţă

(ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specifică de la cât să înceapă numerotarea în lista

Ex: <ol type = a start =1><li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ol>Ex: <ol type = A start =3>

<li> Primul element din listă

Page 4: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 4 din 14

<li> Al doilea element din listă<li> Al treilea element din listă

</ol>Ex: <ol type = 1 start =5>

<li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ol>Ex: <ol type = I start =3>

<li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ol>

<ul type = a><li>Primul element din listă<li>Al doilea element din listă<li>Al treilea element din listă

</ul>

- permite realizarea unei liste neordonate. O lista este neordonată dacă elementele ei nu au o numerotare în faţă (sunt neordonate), ci doar semne care să identifice elementul din listă

Atributul TYPE permite specificarea tipului de semn al elementului din listă

Ex: <ul type = Square><li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ul>Ex: <ul type = Disc>

<li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ul>Ex: <ul type = Circle>

<li> Primul element din listă <li> Al doilea element din listă<li> Al treilea element din listă

</ul>

<dl><dt>Student

<dd>O persoană înscrisă la o instituţie de învăţământ superior<dt>Profesor universitar

<dd>Cadru didactic la o instituţie de învăţământ superior</dl>

- permite realizarea unei liste cu definiţii. Tag-ul <dt> precizează termenul pe care vrem să-l definim în cadrul listei cu definiţii, iar tag-ul <dd> defineşte termenul pe care vrem să-l definim.Ex:

Page 5: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 5 din 14

Tag-uri pentru realizarea legăturilor

A. Legătură internă - permite realizarea unei legături în cadrul aceluiaşi fişier (de exemplu de la cuprinsul unei cărţi ce cuprinde capitolele existente în cartea respectivă să se relizeze o conexsiune către conţinutul unui capitol)

<A href = a>textul sau imaginea de legătură</a>

- permite realizarea unei conexiuni către adresa specificată în atributul HREF dacă execut click stânga de mouse pe textul sau imaginea de legătură

Atributul HREF – permite specificarea adresei conexiunii (unde anume să mă pozitioneze în cadrul fişierului respective).

Atributul textul sau imaginea de legătură permite specificarea textului sau imaginii pe care o să dau click stânga de mouse pentru a ajunge la o altă pagină în cadrul aceluiaşi fişier.

Ex: presupunem că avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se află pe pagina 1) doresc a fi o punte de legătură între el şi conţinutul fiecărui capitol (adică dacă dau click stânga de mouse pe capitolul 3 să mă poziţioneze direct pe conţinutul capitolului 3 care se află, de exemplu la pagina 185. Cum voi proceda ?

1. Realizarea cuprinsului ca punte de legătură între el şi conţinutul fiecărui capitol (pe pagina 1).2. Deplasare la pagina 185 şi realizarea unui semn de carte pentru a ştii unde anume să-mi poziţioneze

cursorul atunci când execut click stânga de mouse pe textul de legătură

Ex:

Suntem pe pagina 1 şi realizăm curpinsul. <A href=“#Continutul capitolului 1”>Capitolul 1</a> <A href=“#Continutul capitolului 2”>Capitolul 2</a> <A href=“#Continutul capitolului 3”>Capitolul 3</a> <A href=“#Continutul capitolului 4”>Capitolul 4</a> <A href=“#Continutul capitolului 5”>Capitolul 5</a>

După cum se observă Capitolul 3 a fost trecut ca text de legătură (vezi sintaxa tag-ului <A href = …. >…..</A>) pentru a putea executa click stânga de mouse şi a ne trimite apoi la pagina 185(conform enunţ exemplu).

“#Continutul capitolului 3” este numele semnului de carte de la pagina 185. Aşa am vrut să numesc semnul de carte (puteam să-i dau orice alt nume cu spaţii sau fără spaţii, dar dacă are spaţii atunci acest nume de semn de carte trebuie pus între ghilimele)

Deplasare la pagina 185 în cadrul cărţii respective. Această deplasare o realizăm cu bara de defilare sau cu tasta PageDown, deoarece acesta este locul în care vreau să mă poziţioneze cu mouse-ul după ce dau click pe textul de legătură.La această pagină vom crea un semn de carte cu numele “#Continutul capitolului 3” astfel: <A name = “#Continutul capitolului 3”>

După ce am definit semnul de carte la pagina 185 putem să ne deplasăm de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legătură şi numai este nevoie de tasta PageDown sau de bara de defilare.Obs: Fişierul HTML trebuie să aibă cel puţin 185 de pagini.

B. Legătură locală – permite realizarea unei conexiuni cu un fişier existent pe calculatorul local

<A href = a>text sau imagine de legătură</a>

Page 6: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 6 din 14

Ex: <A href = “c:\student\fisier.doc”>Click aici</a> - dacă executaţi click stânga de mouse pe textul Click aici atunci se va realiza o conexiune cu fişierul fişier.doc existent pe c:\student. Observaţie: de data aceasta nu mai este nevoie de un semn de carte.

Dacă însă avem două fişiere cu extensia htm (fisierul1.htm şi fisierul2.htm) şi dorim să ne deplasăm din fişierul1.htm în fişierul2.htm la pagina 200, atunci în fişierul1.htm vom scrie:

<A href = “c:\student\fisierul2.htm#Semnul de carte de la pagina 200”>Către fişierul 2</a>

Observaţie: La pagina 200 din fişierul2.htm voi merge şi voi definii un semn de carte cu numele Semnul de carte de la pagina 200. Astfel am realizat o legătură localo-internă.

C. Legătură externă – permite realizarea unei conexiuni cu exteriorul (un site, un e-mail)

Ex: Legătură către un site

<A href = http: //www.ase.ro >Vizitaţi site-ul A.S.E.</a> - permite realizarea unei conexiuni cu site-ul Academiei de Studii Economice.

Ex: Legătură de transmitere a unui mesaj

<A href=mailto:[email protected]> Georgescu Nicolae </A> - permite transmiterea unei mesaj către căsuţa poştală a lui Georgescu Nicolae (numele este chiar text de legătură).

Observaţie generală: Până acum tot ce am făcut nu ne permite ca pe o pagină de Web să tastăm ceva, ci doar să citim

conţinutul paginii respective. Cum vom proceda atunci când utilizatorul doreşte de exemplu să scrie un mesaj, sau

doreşte să completeze un formular electronic în care trebuie să-şi tasteze numele şi prenumele, data naşterii,

domiciliu, .... etc direct de pe Internet fără a mai fi nevoie să se deplaseze la sediul unei firme? Răspuns: utilizând

tag-uri care să permită realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obţin cu tag-urile

de realizare a formularelor.

Tag-uri pentru realizarea formularelor

<form method = post/get action = “adresa unde vor fi trimise datele scrise spre analiză”> …..…..…..

</form>- permite realizarea de casete speciale pentru a putea scrie pe o pagina Web.

Atributul METHOD specifică modalitatea de transmitere a datelor către server pentru a putea fi analizate.Atributul ACTION permite specificarea adresei server-ului care va primii datele scrise de utilizator pe internet.

Tag-urie efective de realizare a casetelor speciale se scriu între <form> ..şi ...</form>.

Casetă de tip text: <input type = text name = a size = b maxlength = c value = d>- permite realizarea de casete de tip text

Atributul Type permite specificarea tipului de casetă utilizată (text)Atributul Name permite specificarea numelui casetei de tip text

Page 7: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 7 din 14

Atributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile în caseta detip text)Atributul Maxlength permite specificarea numărului maxim de caractere ce poate fi scris în caseta de tip textAtributul Value permite specificarea textului implicit ce va apărea scris în caseta de tip text. Ex: Introduceţi numele şi prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = “Popescu Ion>

Observaţie. Caseta de tip text nu permite scrierea pe mai multe rânduri, ci doar pe unul singur.

Casetă de tip parolă: <input type = Password name = a size = b maxlength = c value = d>- permite realizarea de casete de tip parolă

Ex: Introduceţi parola<input type=password name=caseta2 size=15 maxlength=12 value="Popescu Ion">

Casetă de tip checkbox <input type=checkbox name = a>

Ex: Care sunt limbile străine cunoscute: <input type=checkbox name = a>Engleză <input type=checkbox name = b>Franceză <input type=checkbox name = c>Germană

Casetă de tip Radio buton <input type=radio name = a>

Ex: Care este ţara de origine: <input type = radio name = a>România <input type=radio name = a>SUA<input type=radio name = a>Germania

Observaţie. Numele radio butoanelor trebuie să fie acelaşi, deoarece ţara de origine este numai una singură ori dacă butoanele radio nu au acelşi nume se pot selecta toate ţările.

Buton de trimitere a datelor către server <input type=Submit name=a value = “Trimite datele”>Atributul VALUE permite scrierea unui text pe buton.

Ex: <input type=Submit name=a value=”Trimite datele”>

Buton de ştergere a datelor <input type=Reset name=a value = “Sterge datele”>

Ex: <input type=Reset name=a value=”Şterge datele”>

Buton obişnuit < input type=button name=a value=”Calculeaza valoare din coş”>

Casetă de tip multilinie

<textarea rows=a cols=b> …….</textarea> permite scrierea pe mai multe rânduri

Page 8: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 8 din 14

Atributul Rows permite precizarea numărului de linii vizibile în cadrul acestei casete de tip multilinie. Numărul liniilor ce poate fi scris în această casetă este cu mult mai mare, dar vizibile pe ecran sunt cele precizate în Rows, pentru restul liniilor ne vom deplasa cu bare de defilare care va apare automat dacă numărul de linii este mai mare decât cel precizat cu Rows.

Atributul Cols permite precizarea numărului de caractere de pe coloană (un caracter = o coloană).

Ex: <Textarea rows=6 cols=15>Tastaţi mesajul dvs.</textarea>

Observaţie. Verificaţi numărul liniilor precizate cu Rows şi numărul caracterelor pe coloană precizate cu Cols.

Casetă de tip combobox <select>

<option>Elementul 1<option>Elementul 2<option selected>Elementul 3<option>Elementul 4<option>Elementul 5

</select>- permite realizarea unui combobox (listă derulantă)

Ex:

Observaţie. Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizează o selectie implicită a acestei opţiuni.

Casetă de tip listă derulantă cu selectie multiplă<select multiple size = a>

<option>Elementul 1<option>Elementul 2<option selected>Elementul 3<option>Elementul 4<option>Elementul 5

</select>

Atributul SIZE permite specificarea numărului de opţiuni vizibile în cadrul listei respective.

Page 9: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 9 din 14

Ex:

Observaţie. În listă avem 5 ţări dar vizibile avem numai 4 dintre ele datorită atributului SIZE=4. Pentru a vedea şi cea de-a 5-a ţară ne deplasăm cu bare de defilare verticală. Pentru a selecta mai multe ţări trebuie să ţinem şi tasta CTRL apasătă.

Tag-uri pentru realizarea tabelelor

La realizarea tabelelor folosim următoarele tag-uri:<table border=a cellspacing=b cellpading=c width=d bordercolor=e> <tr bgcolor=a align=left/right/center valign=top/middle/bottom>

<td bgcolor=a align=left/right/center valign=top/middle/bottom width=b>Atributul BORDER permite stabilirea grosimii liniilor tabeluluiAtributul CELLSPACING permite stabilirea spaţiului dintre celulele unui tableAtributul CELLPADING permite stabilirea spaţiului dintre textul din interiorul unei celule şi liniile acesteia.Atributul WIDTH stabileşte suprafaţa pe care să o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule.Atributul BORDERCOLOR permite stabilirea culorii liniilor tabeluluiAtributul BGCOLOR permite stabilirea culorii de fundal a liniei (în tag-ul TR) sau celulei (în tag-ul TD). Dacă nu dorim pe fundal o culoare ci o poză atunci folosim în loc de BGCOLOR atributul BACKGROUND urmând a preciza care este adresa pozei de fundal.Atributul ALIGN permite alinierea pe orizontală a textului în linia/celula respectivăAtributul VALIGN permite alinierea pe verticală a textului în linia/celula respectivăTAG-ul TR – creează o linie în cadrul tabelului respectiv. Deci câte linii are tabelul atâtea TR trebuie să avem (cheie de control). Atributele din TR au efect asupra întregii linii.TAG-ul TD – creează o celulă pe linia respectivă. Deci câte celule are tabelul respectiv atâtea TD trebuie să avem (cheie de control). Atributele din TD au efect asupra celulei curente.

Ex:

Page 10: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 10 din 14

Observaţie. Atributele folosite în cadrul tag-ul TD au prioritate faţă de cele folosite în cadrul tag-ului TR. În cadrul tag-ului TD se poate folosii simultan şi atributul ROWSPAN şi COLSPAN semnificând faptul că celula respectivă este unită peste X linii şi Y coloane.ATENŢIE: urmăriţi culorile liniilor pentru a înţelege cum se realizează un tabel. Anumitor celule le-am schimbat culoare pentru a vedea prioritatea dintre TR şi TD.

Tag-uri pentru realizarea de Frame-uri (cadre)

Tag-urile pentru realizarea frame-urilor sunt:

<frameset rows = a frameborder = yes/no> <frameset cols=b frameborder = yes/no> <frame name=a noresize src=b>.

Se va folosii <frameset rows = a frameborder = yes/no> atunci când vrem ca ecranul monitorului să fie împărţit plecând de la crearea mai întâi a liniilor frame-urilor şi pe urmă a coloanelor frame-urilor de pe un monitor.

Page 11: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 11 din 14

Această alegere o facem în fucţie de liniile sau coloanele pe care vrrem să le avem ca despărţitoare de frame-uri (cadre) de pe monitor şi anume Ce avem dintr-un capăt în altul al monitorului? – linie despărţitoare sau coloană despărţitoare. Dacă avem linii, obligatoriu trebuie să pornim cu tag-ul <frameset rows = a frameborder = yes/no>, iar dacă avem coloană cu tag- ul <frameset cols = a frameborder = yes/no>. Dacă avem şi linii şi coloane care unesc capetele monitorului (pe orizontală şi pe verticală) atunci începem crearea frame-urilor de la linii sau de la coloane.Presupunem ca vrem să împărţim ecranul astfel:

Observaţie. Dintr-un capăt la ecranului în altul nu ajunge decât o linie. Aşadar ecranul este împărţit în două linii dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori cât prima (3*). Deci pornim cu tag-ul <frameset rows =”*,3*” frameborder = yes>

<html><head>

<title>Realizare frame-uri</title></head>

<frameset rows="*,3*" frameborder=yes><frameset cols="*,*,*">

<frame name=f1 src=1.htm noresize><frame name=f2 src=2.htm noresize><frame name=f3 src=3.htm noresize>

</frameset><frameset cols="*,*">

<frame name=f4 src=4.htm noresize><frame name=f5 src=5.htm noresize>

</frameset></frameset>

</html>

Prima linie este împărţită şi în trei coloane egale. deci trebuie să creăm coloanele respective <frameset cols="*,*,*">. Odată ce am creat coloanele respective, deoarece aceasta este forma finală a primei linii, trebuie să precizăm care este sursa pentru fiecare coloană în parte de pe prima linie. Pentru că doresc să nu aibe posibilitatea redimensionării frame-urilor voi folosi şi atributul NORESIZE atunci când precizez sursa fiecărui cadru în parte.

<frame name=f1 src=1.htm noresize><frame name=f2 src=2.htm noresize><frame name=f3 src=3.htm noresize>

Odată cu precizarea surselor coloanelor acesta trebuie închis (</frameset>)Deci cu prima linie am terminat. Urmează a doua linie.

Page 12: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 12 din 14

Aceasta este şi ea împărţită în 2 coloane egale, deci trebuie să le creăm: <frameset cols="*,*">. Aceasta fiind forma finală trebuie acum să precizez care este sursa pentru cele 2 noi coloane create.

<frame name=f4 src=4.htm noresize><frame name=f5 src=5.htm noresize>

Odată cu precizarea surselor coloanelor acesta trebuie închis (</frameset>)Totodată am terminat cu ambele linii, deci trebuie să închid frame-urile (</frameset>)

Observaţie: în fişierul ce conţine frame-uri nu trebuie să avem tag-ul BODY, deci nu trebuie să avem nimic în corpul documentului. Fişierele precizate ca sursă a coloanelor trebuie măcar să existe, chiar dacă nu avem nimic scris în ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm – trebuie să existe).

Model de subiect

Scrieţi codul sursa pentru realizarea următoarei pagini de WEB:

Observaţie. Conţinutul existent în partea din stânga, partea centrala şi partea de jos apare numai după ce aţi executat click pe textul aici situat în partea de sus.

Rezolvare:

Fişierul de creare al frame-urilor (Frame.htm) conţine următorul cod sursă:

Page 13: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 13 din 14

Observaţie. Frame-urile din stânga nu au nici o sursă, deoarece acestea vor fi completate numai după ce execut click stânga pe textul aici din fişierul sursă SUS.htm. Fişierul SUS.htm conţine următorul cod sursă:

Observaţie. Atributul TARGET din cadrul tag-ului <A href = ……> …..</A> are ca obiectiv afişarea conexiunii în frame-ul cu numele precizat în TARGET şi nu în cadrul aceluiaşi frame (vezi ce nume am dat frame-urilor (name) în fişierul FRAME.htm şi localizează locul cadranului în care este precizat <A href= …..>…..</A> ce conţine atributul TARGET – fişierul Sus.htm este ca sursă pentr cadranul din partea de sus.).

Fişierul STÂNGA.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde:

Fişierul Central.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde:

Page 14: Limbajul HTML - TEORIE+Exemple+Bilet Examen HTML

Limbajul HTML Pagina 14 din 14

Fişierul Jos.HTM (vezi SUS.HTM – este precizast aici ca referinţa (href)) curpinde: