Scribd
Încărcați
29 vizualizări

Lab3 4 HTML 2021

Documentul prezintă elementele de bază ale limbajului HTML și structura unei pagini web simple. Sunt explicate tag-urile și atributele HTML, cum ar fi <body>, <head>, <title>, <p>, <h1-6> și modul de a adăuga link-uri, imagini și liste. De asemenea, sunt prezentate opțiunile de formatare a textului și culorilor din HTML.

Încărcat de

Ana Maria Porime
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
29 vizualizări

Lab3 4 HTML 2021

Documentul prezintă elementele de bază ale limbajului HTML și structura unei pagini web simple. Sunt explicate tag-urile și atributele HTML, cum ar fi <body>, <head>, <title>, <p>, <h1-6> și modul de a adăuga link-uri, imagini și liste. De asemenea, sunt prezentate opțiunile de formatare a textului și culorilor din HTML.

Încărcat de

Ana Maria Porime
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 47

1.

Elemente fundamentale despre limbajului HTML

Limbajul HTML numit Hypertext Markup Language este destinat proiectării site-
urilor web pentru a fi accesate de către oricare din navigatoarele de pe Internet.
HTML este structura (“scheletul”) pe care se construieste intrega pagina web, prin
adaugare de paragrafe, rubrici (headings), imagini, link-uri etc.

HTML = HyperText Markup Language.

Un limbaj de tip “Markup” este folosit pentru a crea texte care pot returna imagini,
link-uri, liste, tabele etc.
Pe structura HTML se intervine, pentru design, cu alte programe – CSS Cascading
Style Sheets.
Prima linie <!DOCTYPE html> transmite browser-ului ce limbaj
citeste, anume HTML).

<html> incepe pagina html, la fel cum </html> o inchide.

Ca orice limbaj de programare, HTML-ul este constituit din


instrucţiuni (aproape toate in pereche) înscrise în paranteze
unghiulare sub forma unor tag-uri şi anume: <tag> … </tag>.

De fapt tag-urile sunt cuvinte cheie care definesc instrucţiunile


HTML. Sunt două modalităţi de scriere a programelor HTML :
• a). cu ajutorul editoarelor de text dintre care cel mai folosit
este Notepad sub Windows,
• b). cu ajutorul unor programe specializate în crearea
paginilor web cum este Front Page.
<!DOCTYPE html>
<html> antet
<head>
<title>……</title>
</head>

<body> corp
………..
</body>
</html>

Antetul (head) contine informatii despre fisierul HTML, ca de exemplu


titlul, adica ceea ce se vede in fereastra browser-ului, in bara.

Corpul cuprinde continutul: texte, imagini, linkuri etc. Aceasta parte se va


vedea, de fapt, in pagina..
Structura de baza a unei pagini HTML:
<html>
<head><title> Prima mea pagina web</title>

</head>
<body>
………

</body>
</html>

Creati doua paragrafe, folosind tag-urile <p>… </p>

Exemplu: <body> <p>Hello world!</p> </body>


<!DOCTYPE html>

<html>

<head>

<title>Prima mea pagina web</title>

</head>

<body>

<p>manual pentru incepatori</p>

<p> instructiuni de utilizare </p>

</body>

</html>
Elemente:

Un element HTML contine de obicei un tag de start tag si unul de


end tag, continutul fiind cuprins intre ele:

<tagname>Continutul...</tagname>

Elemente HTML “goale”:

<br> defineste o linie spatiu; nu are nevoie de tag de inchidere

Standardele HTML5 nu necesita scrierea speciala cu litere mici sau mari; se


recomanda scrierea cu litere mici
Atribute HTML

•Toate elementele HTML elements pot avea atribute


•Atributele ofera informatii suplimentare despre un element
•Sunt specificate intotdeauna un tag-ul de start
•Sunt de obicei in perechi nume/valoare

•Exemple:
<p title=“acesta e un hint">Paragraf principal.</p>
<a href="http://www.google.com">acesta e un link</a>
<img src=“poza.jpg" width="104" height="142">
<img src=“poza.jpg" alt=“google.com" width="104"
height="142"> (indica un text alternativ atunci cand nu se
incarca imaginea)
Atentie la ghilimele atunci cand punem valoarea atributului!
Headings si paragrafe

Motoarele de cautare folosesc headings-urile pentru indexarea structurii


si continutului paginii web.

•Crearea de rubrici (headings) se realizeaza cu tag-ul <h1>…</h1>, intre


care se adauga continut
•Exista 6 heading-uri, de la h1 – cel mai mare, pana la h6 – cel mai mic
<br> defineste un spatiu in pagina HTML si se vizualizeaza pe pagina ca si
o linie orizontala; se foloseste ca sa separe continutul sau pentru a define
o schimbare
•<br> linie noua fara a folosi alt paragraf

Ex: <p>Acesta este<br>un paragraf<br>cu linii de spatiu</p>

Adaugati 3 rubrici (headings) si 5 paragrafe (in afara si in interiorul


rubricilor) si scrieti orice text intre ele.
Principala caracteristică a paginilor Web este prezenţa hipertextului şi chiar a
hipermedia. De fapt prin hipertext se asigură legături spre alte informaţii fie în
acelaşi site fie pe un alt site. Dacă legătura este în acelaşi site aceasta poate fi
realizată în trei moduri:

- într-o zonă de pe aceeaşi pagină;


- pe o altă pagină din acelaşi director;
- la un alt fişier de pe acelaşi disc (calculator, harddisc);

Instrucţiunea pentru introducerea unui “hipertext” este:


<a> ……… </a>
a = anchor (ancoră, legătură)
Această instrucţiune este însoţită de un atribut important şi anume:
href = referinţa pentru hipertext.
Valoarea atributului este un nume de legătură, o pagină html sub formă de
fişier, sau un site cu adresa Web exactă.
Vezi exemplu:

!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>

<body>

<a href="www.wikipedia.org">My favourite link </a>

</body>
</html>
Culori Linkuri in HTML

implicit, un link va aparea in felul urmator, in orice browser:

•Link nevizitat – albastru, subliniat


•Link vizitat violet si subliniat
•Link active – rosu si subliiat
•Culorile pot fi schimbate folosind elemente de stil specific, ca in exemplu:

<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Atribute de stil in HTML:

<tag style="proprietate:valoare;">

• Culoare fundal:
<body style="background-color:blue;">

• Culoare text:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

• Familii font-uri:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

• Marime text:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

• Aliniere text:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Adaugarea de imagini

• Pentru imagini se foloseste tag-ul <img>, fara tag de inchidere, doar cu


referinta, anume sursa de unde ca prelua poza “src” : <img src="url" />.

• Fiecare imagine de pe web are un URL, care trebuie copiat si introdus


intre ghilimele

• Adaugati doua imagini in pagina voastra

• Transformati una din imagini intr-un link, folosind tag-urile <a>, </a> si
atributul href
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<a href="http://eprofu.ro/electronica/diode-redresoare/">
<img src="http://......jpg" />
<img
src="http://upload.wikimedia.org/wikipedia/en/3/3b/Brother-bear.jpg" />

</a>
</body>
</html>
• Creati-va o pagina web cu heading, title, body, si folositi h1 pentru
nume. Folositi 3 paragrafe,
• Adaugati o poza, cu trimitere (ancora) la o pagina web, apoi mai
adaugati inca un link care sa indice o preferinta.
Crearea de liste

• lista se creează cu o instrucţiune proprie <ul> .. </ul> pentru listă


neordonată şi <ol> … </ol> pentru listă ordonată.

• Fiecare element din listă se introduce cu eticheta <li> ca instrucţiune


unică. Ea poate fi însoţită de atributul <li TYPE> a cărui valoare indică
modul de marcare respectiv de numerotare.

• Pentru inserarea listelor de informaţii se analizează tipul de listă


folosit. În practică sunt două tipuri frecvent folosite: liste neordonate şi
liste ordonate.
Exemplu de implementat

• <html>
• <head><title> Pagina Web</title>
• </head>
• <body BACKGROUND=”image1.gif”>
• <ul>Produsele oferite de firma noastră sunt:
• <li>produs 1
• <li TYPE=”disk”> produs 2
• <li TYPE=”square”> produs 3
• </ul>
• <ol> Serviciile noastre sunt:
• <li> serviciul 1
• <li TYPE=”I” START=”2”> serviciul 2
• <li TYPE=”A” START=”3”> serviciul 3
• </ol>
• </body>
• </html>
Exemplu 2
creati-va o lista ordonata, cu 4 preferinte, marcate, printr-un heading 2 cu titlul ‘lista cu
lucrurile preferate’

• <!DOCTYPE html>
• <html>
• <head>
• <title>Lists</title>
• </head>
• <body>
• <h1>List of my favorite things</h1>
• <ol>
• <li>…</li>
• <li>…</li>
• <li> …</li>
• <li> … </li>
• </ol>
•
•
• </body>
• </html>
• Creati doua liste, una ordonata, cealalta neordonata, continand 3, respectiv 4
elemente, explicate, printr-un titlu sugestiv trecut intre <h2>…</h2>,
respectiv <h5>…</h5>.
• <!DOCTYPE html>
• <html>
• <head>
• <title></title>
• </head>
• <body>
• <h3> Cele mai frumoase flori </h3> Creati o lista neordonata
• <ol>
structurata astfel:
• <li> narcise </li>
FACULTATEA DE INGINERIE
• <li> margarete </li>
• <li> viorele </li>
ELECTRICA (h1)
• </ol> Sectia de…..
• Materii anul IV
• <h2> Cele mai frumoase luni </h2> Enumerati 4 materii
• <ol>
• <li> mai </li>
• <li> septembrie </li>
• <li> decembrie </li>
• </ol>
•
• </body>
• </html>
• Creati lista in lista, prin realizarea unei liste ordonate cu: 2 materii de
anul 2, fiecare continand in lista neordonata cate 3 cuvinte cheie si o
lista neordonata de 2 materii de anul 4, cu cate 3 cuvinte de descriere
aranjate iin lista ordonata
Fonturi, culori, fundal, familii de fonturi

•Comentariile incep cu <!– si se termina cu --> <!– acesta este un


comentariu! -->

•Putem da instructiuni care include atribute, tag-urilor. Un atribut este o


caracteristica sau o descriere a continutului elementului, ca la imagine –
src si la a - href <p> and </p> are opening and closing tags.

•Folosim atributul “style” caruia ii putem adauga: =font-size, =color,


=background-color, =family-font etc

•Exemplu
•<p style="font-size: 12px">
•<h2 style="color:red">; <h2 style="color: green; font-size:12px">
Fonturi, culori, fundal, familii de fonturi
Toate browserele suporta 140 de culori, apelate cu numele culorii, o valoare
hexa sau valoarea rgb, de ex: (255, 0,0)

Bisque #FFE4C4 Shades Mix


Black #000000 Shades Mix
BlanchedAlmond #FFEBCD Shades Mix
Blue #0000FF Shades Mix
BlueViolet #8A2BE2 Shades Mix
Brown #A52A2A Shades Mix
BurlyWood #DEB887 Shades Mix
CadetBlue #5F9EA0 Shades Mix

http://www.w3schools.com/colors/colors_names.asp
• Creati 3 paragrafe cu fonturi de 10px, 20px, 60 px
• Adaugati, la doua dintre ele, culorile “green” , respectiv “purple”
Familii de fonturi

Exemple:
<h1 style="font-family: Arial">Titlu</h1>
<li style="font-family: Arial">Hello!</li>

Aplicati cele invatate in exemplul personal:

Schimbati marimea fonturilor din lista ordonata la 16px, si adaugati


fontul Verdana
Schimbati marimea fonturilor din lista neordonata la 12px, si adaugati
fontul Impact

-o lista cu familii de fonturi existente:

http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
Alte elemente de editare (“Styling”)

• Folosind atributul background-color (se poate folosi in body,


head, p, h, liste etc

• Aplicatie: Schimbati culoarea de fundal in green, prin


adaugarea unui atribut in <body>

• Si schimbati culoarea de fundal al listei <ol> in yellow


Alinierea textului

•Din nou, se folosesc atribute de stil, in interiorul tag-urilor

•Exemplu style="text-align:left" (sau right, sau center) pentru a determina


pozitia textului

Ex <p style="text-align:center">
Exersati alinierea pe exemplul vostru

Sau
Sau

<!DOCTYPE html>
<html>
<head>
<title>Sportivi remarcabili<title>
</head>
<body>
<h3 style="text-align:center">…</h3>
<ol>
<li style="text-align:left">…</li>
<li style="text-align:center"> …</li>
<li style="text-align:right">… </li>
</ol>
</body>
</html>
Elemente de formatare a textului

• <BR> : Are ca efect forţarea afişării a ceea ce urmează pe rândul următor.


• <B>...</B> afişeaza bold (îngroşat) textul cuprins între cele două tag-uri ale sale. Un tag
sinonim este: <STRONG>...</STRONG>
• <I>...</I> : afişeaza italic (înclinat) textul cuprins între cele două tag-uri ale sale. Tag-uri
sinonime > sunt: <EM>...</EM>, <DFN>...</DFN>,<CITE>...</CITE>.
• <U>...</U> : Are rolul de a afişa subliniat textul cuprins între cele două tag-uri ale sale.
•<S>...</S> : Are rolul de a afişa tăiat (cu o linie orizontală) textul cuprins între cele două tag-uri ale
sale. Un tag sinonim al lui <S> este: <DEL>...</DEL>
• <BIG>...</BIG> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai mare
decât textul în care este cuprins.
• <SMALL>...</SMALL> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai
mic decât textul în care este cuprins.
• <SUP>...</SUP> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai sus
(ca o putere)
• <SUB>...</SUB> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai sus
(ca un indice)
• <TT>...</TT> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai sus
monospaţiat (toate caracterele ocupă aceeaşi lungime – practic, se foloseşte fontul Courier
New) ste: <INS>...</INS>
•<mark> defineste elemente sau text marcate
Linii de cod de programare:

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

<kbd> File | Open...</kbd>

<samp>

demo.example.com login: Apr 12 09:10:17


Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

</samp>

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>. – CE VA AFISA?


• Exersati in diverse paragrafe din aplicatia voastra, toate elementele de
editare text prezentate

• realizati-va o mica pagina de socializare in care sa creati:


Title- numele vostru
Body – o poza sugestiva
3 elemente descriptive scrise in paragraf(varsta, ocupatie,
hometown)
• Creati 3 liste neordonate, cu interese, filme preferate, actori preferati,
fiecare cu cate 3 elemente ordonate; aplicati la toate, cateva elemente
de “styling”: font, culoare, familii de fonturi, elemente de editare text
Tabele

•Tabelele reprezintă un element foarte important al unei pagini web. În


foarte multe cazuri,tabele cu chenare invizibile sunt folosite ca şi „schelet”
al paginii, pentru a putea realiza alinieri complexe ale elementelor
acesteia.
•Tag-ul pentru descrierea unui tabel este <TABLE>...</TABLE>. În cadrul
acestora trebuie descrise liniile (rândurile) tabelului, în cadrul fiecărui rând
trebuind descrise celulele acestuia.
•Descrierea unui rând se face între tag-urile <TR>...</TR>. La rândul lor,
celulele din cadrul rândului se descriu între <TD>...</TD>. Atît tag-ul
</TR> cât şi tag-ul </TD> pot fi omise.
•Un prim atribut al tag-ului <TABLE> este border=”grosime_pixeli”.
Dacă acest atribut este omis, tabelul va avea un chenar invizibil. Dacă se
specifică doar atributul, omiţând grosimea, aceasta va fi luată, implicit, ca
fiind 1.
Exemplu
•<html>
• <head>
• <title>Table Time</title>
• </head>
•
• <body>
•
• <table>
• <tr>…</tr>
• <!– mai adaugati doua coloane aici-->
• <tr>…</tr>
• <tr>…</tr>
• </table>
• </body>
•</html>
realizati un tabel cu 2 coloane si 3 linii, in care sa treceti 3 materii cu notele luate
•Tag-urile <thead> si <tbody> <thead>

•<tr>
<th> Name </th>
<th> Favorite Color </th>
</tr>

Creati elementele corespunzatoare tabelului vostru


Adaugarea de nume tabelului
- intr-o linie care sa se intinda pe tot tabelul
•Atributul colspan pantru tag-ul <th>
Exemplu: <th colspan="3">titlul se intinde pe 3 coloane</th>
Adaugati cateva elemente de styling
Exemplu:
<th style="font-size:12px; color:red"></th>
Sinteza informatiilor din laboratorul 1
• Structura de bază a unei pagini

• O pagină începe cu tag-ul <HTML> şi se termină cu tag-ul </HTML>;


• O pagină conţine un antet (HEAD) şi corpul propriu-zis (BODY);
• Antetul este cuprins între etichetele <HEAD> şi </HEAD>;
• Corpul este cuprins între etichetele <BODY> şi </BODY>;
• Opţional, antetul poate conţine titlul paginii, cuprins între tag-urile <TITLE> şi
</TITLE>. Titlul apare pe bara de titlu a ferestrei afişate în browser.
• Corpul poate conţine texte şi/sau imagini.
• Comentariile, care nu sunt afişate de către browser, pot fi scrise între tag-
urile <!-- şi -->.
• Numele tag-urilor nu sunt case sensitive, deci pot fi scrise atât cu litere mici cât
şi cu litere mari.
Paragrafe.Atribute

• Un atribut se specifică înainte de închiderea parantezei unghiulare


a tag-ului

• În cazul paragrafului, atributul align controlează alinierea textului


din cadrul paragrafului.

• Dacă acest atribut nu este prezent, alinierea este făcută în mod


implicit la stânga. Acest atribut poate lua una dintre valorile center,
left, right, justify prin nume_atribut=”valoare”.
Elemente care permit formatarea textului.
• <BR> : Are ca efect forţarea afişării a ceea ce urmează pe rândul următor. creează un nou
paragraf (să ne reamintim că între două paragrafe este automat lăsată o linie vidă)
• <B>...</B> : Are rolul de a afişa bold; sau <STRONG>...</STRONG>
• <I>...</I> : Are rolul de a afişa italic (înclinat) sau: <EM>...</EM>, <DFN>...</DFN>,<CITE>...</CITE>.
• <U>...</U> : Are rolul de a afişa subliniat textul cuprins între cele două tag-uri ale sale. sau:
<INS>...</INS>
• <S>...</S> : Are rolul de a afişa tăiat (cu o linie orizontală) textul cuprins între cele două
tag-uri ale sale. sau: <DEL>...</DEL>
• <BIG>...</BIG> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai
mare decât textul în care este cuprins.
• <SMALL>...</SMALL> : Are rolul de a afişa textul cuprins între cele două tag-uri ale sale mai mic
decât textul în care este cuprins.
•ETC
Liste
•Liste ordonate <OL>...</OL>, elementele introduse prin <LI>...</LI> Implicit,
numerotarea se face cu numere arabe (1, 2, 3, ...). Ea poate fi modificată
prin folosirea atributului type în cadrul tag-ului OL. Acesta poate lua una dintre
valorile:
•- a : numerotarea se va face cu litere mici (a, b, c, ...)
•- A : numerotarea se va face cu litere mari (A, B, C, ...)
•- i : numerotarea se va face cu numere romane mici (i, ii, iii, iv ...)
•- I : numerotarea se va face cu numere romane mari (I, II, III. IV, ...)
•- 1 : (impli
•Liste neordonate <UL>...</UL>, Implicit, marcarea lor se face prin cerculeţe
pline. Ea poate fi modificată prin folosirea atributului type în cadrul tag-ului
UL - disc : marcarea se face cu cerculeţe pline (implicit)
•- square : marcarea se face cu pătrăţele
•- circle : marcarea se face cu cerculeţe goale
Liste de definiţie (Definition Lists): au rolul de a descrie o
listă de definiţii.

Inserarea lor în cadrul documentului HTML se face prin tag-urile


<DL>...</DL>. Elementele lor sunt de două tipuri:

-Termenul care este definit: este introdus între tag-urile <DT>...</DT>


(tag-ul de sfârşit nefiind obligatoriu).

- Definiţia propriu-zisă: este introdusă între tag-urile <DD>...</DD> (tag-


ul de sfârşit nefiind obligatoriu).
Imagini
•atributele height şi width permit specificarea altor dimensiuni
pentru imagine, decât cele reale ale acesteia. Evident, dacă
dimensiunile nu sunt proporţionale cu cele reale, imaginea va fi
deformată. Totodată, dacă specificăm dimensiuni mai mari decât
cele reale, imaginea se va vedea
mai puţin clar. În realitate, imaginea este transferată de pe server
la dimensiunile sale originale,redimensionarea având loc doar la
nivelul calculatorului
•atributul border permite stabilirea grosimii unui chenar care va înconjura
poza. Implicit, valoarea acestui atribut este ”0”, ceea ce înseamnă că
imaginea nu este înconjurată de chenar

• <P>
•<br><IMG src="dog.jpg" border="10">
•</P>
Forma generală a acestui element este <IMG atribute>. Acest tag nu are şi
formă de închidere.
Atributele :
• src - sursa. Dacă imaginea se află în directorul curent, se specifică doar numele şi
extensia sa.
• align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se
află.
- right : imaginea se aliniază în dreapta, iar textul care urmează este scris în
locul rămas liber, în stânga acesteia;
- left : imaginea se aliniază în stânga, iar textul care urmează este scris în locul
rămas liber, în dreapta - top : doar latura de sus a imaginii se aliniază cu rândul
de text în cadrul căruia se află; următorul rând de text va fi afişat după
imagine,
- middle : rândul de text în cadrul căruia se află imaginea se aliniază la
jumătatea înăţimii acesteia;
- - bottom : doar latura de jos a imaginii se aliniază cu rândul de text în cadrul căruia se
află; următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime
a ecranului;
• Atribuitele TABELULUI , campuri text, frame-uri, butoane, campuri de
pasword sau de submitt etc - in laboratorul 2!
Aplicatia 3

<html>
<head><title> Pagina Web</title>
</head>
<body style="background-color:purple; font-size:30px; color:yellow;
font-family:Impact">
<b>Mixul de marketing este constituit din:</b><br>
<i> PRODUS</i><br>
<u> PRET</u><br>
<STRIKE> PLASARE </strike><br>
<b><u>PROMOVARE</b></u>
</font>
</body>
</html>
Aplicatie cu tabele

<html>
<head><title>Pagină cu tabele</title>
</head>
<body bgcolor=”blue”>
<font color=”white” size=”20”>
<b>
<u>
PRODUSELE FIRMEI NOASTRE SUNT:
</u>
</b>
</font>
<table>
<tr>
<td>Produs 1
<td>Produs 2
<td>Produs 3
<td>Produs 4
<tr>
<td>Serviciul 1
<td>Serviciul 2
<td>Serviciul 3
<td>Serviciul 4
<tr>
<td>Info 1
<td>Info 2
<td>Info 3
<td>Info 4
</table>
</body>
</html>
Aplicatie cu tabele continuare

<html>
…
<table border=”5” cellspadding=”3” cellspasing=”2”>
<tr>
<td align=”left”> Produs 1
<td align=”center”>Produs 2
<td align=”right”>Produs 3
<tr>
<td align=”top”>Serviciul 1
<td align=”middle”>Serviciul 2
<td align=”bottom”> Serviciul 3
</table>
</body>
</html>

S-ar putea să vă placă și