Sunteți pe pagina 1din 29

Tag-uri de baz n HTML

Noiuni generale
O pagin web are n componena dou elemente de baz.
<html>
<body>
Continutul paginii va fi aici
</body>
</html>
Primul tag se numeste <html> i este cel care i spune browser-ului c a nceput un cod n HTML. Cel deal doilea tag, <body>, spune browser-ului c aici ncepe partea vizibil sau coninutul paginii HTML.
Tag-urile </body> i </html> sunt tag-uri de nchidere. </body>, d de tire browser-ului, c s-a ncheiat
coninulul pagini, iar </html> c s-a ncheiat documentul HTML.
Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie respectiva funcie.
Deci <tag> este folosit pentru a ncepe o funcie, iar </tag> pentru a o ncheia.
Ordinea deschiderii i a nchiderii tag-urilor este foarte important. Dac un tag este deschis ntr-un
altul, de exemplu body este deschis n html atunci acel tag (body) este cel care trebuie nchis naintea
celui de-al doilea tag (html).
Am nchis mai nti body pentru c a fost cel care s-a deschis cel mai recent. Aceast regul i anume
deschiderea i nchiderea tag-urilor se aplic la toate celelalte taguri ale documentelor HTML.
<head>
Acest tag urmeaz imediat dup <html> i este folosit pentru a indica browser-ului, informaii utile
precum: titlul pagini, coninutul (folosit de motoarele de cutare vechi) i multe altele
<title>
Se pune ntre <head> i </head>. Acest tag este cel care d numele pagini. Numele va fi afiat n browser,
de obicei n partea stng sus.

Marcaje de baz

<HTML> </HTML>

Definete un fiier n format Web

<HEAD> </HEAD>

Antetul documentului

<TITLE> </TITLE>

Tilul documentului

<BODY> </BODY>

Corpul paginii HTML

BGCOLOR = culoare

Culoarea de fond a paginii

TEXT=culoare

Culoarea textului pe pagin

BACKGROUND = url

<P>

<Hn> <Hn>

<FONT> </FONT>

SIZE=n

FACE="a,b"

COLOR=s

Imaginea de fond pentru pagin

Paragraf

Nivel de subtitlu al documentului (n = 1-6)

Specific atribute ale textului ncadrat

Dimensiunea textului este 1-7

Specific fontul: a, dac este disponibil, sau b

Culoarea textului: fie un nume de culoare, fie o valoare RGB

<BR>

<PRE> </PRE>

<CENTER> </CENTER>

<HR>

SIZE=x

Linie nou

Informaie preformatat

Centreaz materialul n pagin

Rigl orizontal

nlimea riglei n pixeli

WIDTH=x

Limea riglei n pixeli sau n procente

ALIGN=x

Alinierea riglei orizontale n pagina (left, center, right)

COLOR=x

Culoarea riglei orizontale (numai pentru IE)

<A> </A>

Marcaj de tip ancor

HREF=url

Referin hipertext

HREF=#nume

Referin ctre o ancor intern

Name=nume

Definiia unei ancore interne

<sup></sup>

Text exponenial, superscript. Exp: 23 se scrie 2<sup>3</sup>

<sub></sub>

Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O

Marcaje pentru liste

<DD>

Descriere definiie

<DL> </DL>

Lista de tip definiie

<DT>

Termen de definiie

<LI>

Element de list

<OL>

List ordonat (numerotat)

TYPE=tip

Tipul numerotrii. Valori posibile: A, a, I, i, 1

START=x

Numrul de nceput al listei ordonate

<UL>

TYPE=form

List neordonat (marcat)

Forma marcajului. Valori posibile: circle, square, disc.

Formatarea caracterelor

<B> </B>

Afieaz text cu caractere aldine

<I> </I>

Afieaz text cu caractere cursive

<U> </U>

<BASEFONT SIZE = n>

Afieaz text subliniat

Specific dimensiunea implicit a fontului din pagin


4

Marcaje pentru tabele

<TABLE> </TABLE>

Tabel HTML

BORDER=x

Chenarul tabelului

CELLPADDING=x

Spaiul suplimentar n cadrul celulelor tabelului

CELLSPACING=x

Spaiul suplimentar ntre celulele tabelului

WIDTH=x

Limea impus tabelului

BORDERCOLOR =
culoare

Specific culoarea chenarului tabelului

ALIGN=left

Aliniaz tabelul la marginea din stnga a paginii, iar


textul curge n partea dreapt

ALIGN=right

Aliniaz tabelul la marginea din dreapta a paginii, iar


textul curge n partea stng

HSPACE=x

Spaiu suplimetar pe orizontal n jurul tabelului

VSPACE=x

Spaiu suplimetar pe vertical n jurul tabelului

COLS=x

Specific numrul de coloane ale unui tabel

<COLGROUP>
</COLGROUP>

Definete un set de definiii de coloane cu ajutorul


marcajului <col>

<COL WIDTH=x>

Definete limea unei coloane exprimat n pixeli


5

<THEAD> </THEAD>

Definete titlul tabelului

<BODY> </TBODY>

Definete corpul tabelului

<TR> </TR>

Linie de tabel

BGCOLOR=culoare

Specific culoarea de fond pentru ntreaga linie

ALIGN=aliniere

Alinierea celulelor de pe linia curent (left, center,


right)

<TD> </TD>

Celula de date a tabelului

BGCOLOR=culoare

Specific culoarea de fond pentru celula de date

COLSPAN=x

Numrul de coloane pe care se ntinde celula curent


de date

ROWSPAN=x

Numrul de linii pe care se ntinde celula curent de


date

ALIGN=aliniere

Alinierea materialului din cadrul celulei de date.Valori


posibile: (left, right, center)

VALIGN=aliniere

Alinierea pe vertical a materialului din cadrul celulei


de date.Valori posibile: (top, bottom, middle)

BACKGROUND=url

Specific imaginea de fond pentru celula tabelului


6

NOWRAP

Nu permite desprirea textului pe linii n cadrul unei


celule

ALIGN=baseline

Aliniaz celule de date cu linia de baz a textului


adiacent

ALIGN=caracter

Aliniaz o coloan fa de un anumit carcater


(caracterul prestabilit este ".")

ALIGN=justify

Aliniaz att marginea din stnga ct i marginea din


dreapta a unui text

Adugarea imaginilor

<IMG >

Marcajul de introducere a imaginilor

SRC=url

Sursa fiierului grafic

ALT=text

Textul alternativ de afiat, dac este necesar

ALIGN=alinier
e

Alinierea imaginii n pagin. Valori posibile: top (sus), middle


(n mijloc), bottom (jos), left (n stnga), right (la dreapta)

HEIGHT=x

nlimea imaginii (n pixeli)

WIDTH=x

Limea imaginii

BORDER=x

Chenarul din jurul imaginii, atunci cnd aceasta este utilizat ca


hiperlegtur

HSPACE=x

Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli)


7

VSPACE=x

Spaiul suplimentar pe vertical din jurul imaginii (n pixeli)

Tabel diacritice
valoare

cod

&#259;

&#258;

&#226;

&#194;

&#238;

&#206;

&#351;

&#350;

&#355;

&#354;

Inserarea i formatarea unui text:


corp de liter, mrime, stil

Tag-ul <P>
- permite introducerea unui paragraf
Dac scriem un text ntre tag-urile <P> i </P>, atunci textul va fi ncadrat de cte un rnd liber.
Exemplu:
<html>
<body>
<p>Acesta este un paragraf obinuit.</p>
<p>Un rnd al unui paragraf are limea ferestrei afiata de browser. Dac micorm fereastra browserului acelai paragraf va ocupa mai multe rnduri.</p>
<p>Dac dou cuvinte ale unui paragraf sunt separate prin mai multe spaii browser-ul afieaz doar un
8

singur spaiu.</p>
</body>
</html>

Elementul &nbsp (non-breaking space)


Elementul &nbsp previne trecerea unui cuvnt pe linia urmtoare, prin scrierea sa naintea cuvntului
respectiv. Dac cuvntul nu ncape pe linie, se coboar i cuvntul precedent pe linia urmtoare.
Tag-ul BR
Atunci cnd vrem ca textul din cadrul paginii noastre web s fie afiat pe mai multe rnduri vom folosi
unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de ncheiere, n timp ce tag-ul <P> are tag de
ncheiere, ns nu este obligatoriu.
Tag-ul <BR> vine de la line break (ntrerupere de linie).
Tag-ul B
Are rolul de a determina browser-ul s afieze ngroat (bold) textul cuprins ntre cele dou tag-uri ale
sale: <b> i </b>.
Tag-ul I
Are rolul de a determina browser-ul s afieze nclinat (italic) textul cuprins ntre cele dou tag-uri ale
sale: <i> i </i>.
Tag-ul U
Are rolul de a determina browser-ul s afieze subliniat (underline) textul cuprins ntre cele dou tag-uri
ale sale: <u> i </u>.

Exemple:
<del>text tiat (deleted) </del>

<div align="left">text aliniat la


stnga</div>

<sup>exponent (superscript) </sup>

<div align="right">text aliniat la


dreapta</div>

<sub>indice (subscript) </sub>

<h1> titlu de nivel 1 </h1>

<strong>text ngroat (strong) </strong>

<h2> titlu de nivel 2 </h2>

<big>mare (big) </big>

<h3> titlu de nivel 3 </h3>

<small>mic (small) </small>

<h4> titlu de nivel 4 </h4>

<font color="red">font rou (detalii)


</font>

<h5> titlu de nivel 5 </h5>

<font face="Courier">font Courier (detalii)


</font>

<h6> titlu de nivel 6 </h6>

<font size="6">font size=6 (detalii)


</font>
<div align="center">text aliniat pe
centru</div>

Inserarea unei imagini


modificarea proprietilor imaginii: poziionare, dimensiuni, ncadrare n text

Folosind imagini pagina capta un plus de atractivitate dar putei plti preul unei ncrcri greoaie dac
dimensiunile imaginii sunt mari.
Cteva din formatele de imagini utilizate n paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP
(*.bmp), PNG (*.png).
10

Formatul gif este recomadat pentru realizarea butoanelor i a icoanelor iar jpg pentru fotografii.
GIF (Graphics Interchange Format)
Formatul GIF poate reda un numr de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni
mici: butoane, icon-uri, animaii.
JPEG (Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori i de aceea este folosit pentru fotografii. Imaginile
care aparin acestui format au extensia .jpg sau .jpeg.

poza.jpg
mrime: 54,6 Kb

poza.gif
mrime: 58,5 Kb

Eticheta folosit pentru inserarea unei imagini n pagin este <img> i are urmtoarele atribute:
src = sursa, locul unde se afl imaginea
width = limea imaginii
height = nlimea imaginii
alt = numele care nlocuiete imaginea pn aceasta se ncarc sau cnd nu a fost gsit
border = chenar (0 = lips bordur)
Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg">
"src" este prescurtarea pentru "source" (sursa). Acest atribut se folosete pentru a indica locaia
fotografiei.
Sursa Local

Descriere

src="poza.jpg"

fotografia este situat pe


acelai nivel cu fiierul .html

src="../poza.jpg"

fotografia este situat pe un


nivel anterior fiierului .html

fotografia este situat n


src="../imagini/poza
folderul "imagini" pe nivelui
.jpg"
anterior fiierului .html

Dimensiunea imaginii afiate de browser este stabilit de argumentele width i height care pot fi diferite
de dimensiunile imaginii originale, caz n care imaginea va fi redimensionat automat de ctre browser.

11

Pentru a micora timpul ncrcrii complete a paginii exist programe care optimizeaz imaginile.
Optimizarea const n:
1. reducerea dimensiunii imaginii fr degradarea major a calitii
2. eliminarea informaiilor tip metadat asociate imaginii. Aceste date sunt asociate automat de
programele de grafic (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
Alinierea orizontal i vertical a unei imagini

n acest sens, sunt folosite atributele align i valign. Opiunile oferite de aceste atribute sunt:
1. Align (orizontal)
- right
- left
- center
2.Valign (vertical)
- top
- bottom
- center
Dac dorii ca textul sa ncadreze imaginea adugai etichetei img atributul align.
Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red
flower jpg" align="left">

Fundaluri n HTML (HTML Background)


Backgrounds (Fundaluri)

Tag-ul <body> are dou atribute prin care i se poate specifica folosirea unui fundal. Fundalul poate fi att
o imagine ct i o culoare.
Bgcolor
12

Atributul bgcolor specific o culoare de fundal a unei pagini HTML. Valoarea acestui atribut poate fi un
numr hexazecimal, o valoare RGB sau numele unei culori.
Exemplu de folosire a atributului bgcolor cruia i se atrbuie culoarea negru n cele trei moduri enumerate
mai sus:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Background
Atributul background specific o imagine drept fundal pentru o pagin HTML. Valoarea acestui atribut
este URL-ul imaginii care se dorete a se folosi. Dac imaginea este mai mic dect fereastra browserului atunci ea se va repeta de oricte ori va fi nevoie pentru a umple fereastra browser-ului.
Exemplu de utilizare al atributului background:
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
URL-ul poate fi relativ (ca n primul exemplu) sau absolut (ca n al doilea).

Ce este un link (hyperlink)?


Definiie Link

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


href - adresa fiierului destinaie
target - n ce fereastr se va deschide fiierul destinaie
title - o mic descriere asociat legturii afiat n momentul n care mouse-ul se afl deasupra legturii
13

Adresa fiierului destinaie (href) poate fi exprimat astfel:


nume fiier - dac se afl n acelai folder cu pagina curent
adres relativ- dac se afl pe acelai server sau disc, indicndu-se calea
adres URL - fiind adresa complet a paginii (de exemplu: http://www.cnfb.ro/index.php?
option=profesori)
Atributul href (Hypertext REFerence) numete legatura ctre o alt pagina web. De fapt este locul unde
va fi dus user-ul care va executa un click pe linkul respectiv.
Linkurile pot fi de trei tipuri:
1. interne - ctre locuri specifice din pagin (anchors)
2. locale - ctre alte pagini dar pe acelai domeniu
3. globale - ctre alte domeni n afara site-ului

Intern - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"
Link-ul n paginile Internet

Ca reprezentare grafic un link este un text (de obicei subliniat i / sau prezentat cu o culoare diferit),
care poate fi identificat ntr-o pagin web i pe care se poate face clic pentru a accesa pagina sau
documentul spre care puncteaz. Un link poate puncta att ctre o pagin exterioar, ct i n aceeai
pagin spre o anumit sub-seciune a paginii.
n format HTML (pagin web), un link este reprezentat n forma urmtoare:
<a title=Titlu, care apare ca info cnd se trece cu mouse-ul peste href=URL
target=unde va fi deschis noua pagin class=clasaStilizareLink>Text vizibil
link</a>

Pentru a seta nceputul i sfritul unei anchor-e se folosesc tag-urile <a> </a>.
Un exemplu de link, care puncteaz ctre aceast pagin, ar fi:
<a title=Tutorial HTML href=http://www.competentedigitale.ro/HTML/>Tutorial HTML </a>

Legtur spre e-mail:

<a href=mailto:maria@yahoo.com>Legatura spre e-mail-ul Mariei</a>


Cum se realizeaz o legtur pe o imagine?

O legtur pe o imagine se realizeaz exact ca i o legtur pe text cu diferena c url-ul imaginii va lua
locul textului. De exemplu:
<html>
<body>
14

<p>Legtur pe o imagine:
<a href="http://www.competentedigitale.ro/HTML/">
<img src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>Imagine legtur fr bordur:
<a href="http://www.competentedigitale.ro/HTML/">
<img border="0" src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>

Anchors (ancore)

Ancorele sunt folosite pentru a lega dou sau mai multe seciuni ale aceleiai pagini. n acest sens va
trebui s dm un nume seciunilor, dar pentru aceasta cel mai indicat ar fi s aruncm o privire pe
exemplul urmtor.
<h1 align="center" id="primus">Fotografii Israel </h1>
<ol>
<li><a href="#1">Fotografia 1 </a></li>
<li><a href="#2">Fotografia 2 </a></li>
<li><a href="#3">Fotografia 3 </a></li>
<li><a href="#4">Fotografia 4 </a></li>
<li><a href="#5">Fotografia 5 </a> </li>
<li><a href="#6">Fotografia 6 </a></li>
<li><a href="#7">Fotografia 7 </a> </li>
</ol>
<a name=1><center><img src="f1.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=2><center><img src="f2.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=3><center><img src="f3.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=4><center><img src="f4.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=5><center><img src="f5.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=6><center><img src="f6.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>
<a name=7><center><img src="f7.JPG" width=70% height=60% ></center></a>
<a href="#primus">napoi</a>

Realizarea tabelelor n HTML


15

Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe lng crearea
propriu-zis a tabelelor, putem controla mult mai bine poziionarea elementelelor n cadrul paginilor web.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> i </TABLE>. Tot ce va fi scris ntre
aceste tag-uri va forma un tabel. Dup tag-ul <TABLE> urmeaz tag-ul <TR> care vine de la "Table
Row" (rndul tabelului) i reprezint introducerea unui rnd n cadrul tabelului. Tot ce va fi scris ntre tagurile <TR> i </TR> va forma un rnd al tabelului. Dup crearea unui rnd, trebuie s adugm n cadrul
acestuia, cteva celule, cu ajutorul tag-urilor <TD> i </TD>.
Exemplu:
<table border="1">
<tr>
<td>mere</td>
<td>1,5 RON</td>
</tr>
<tr>
<td>banane</td>
<td>5 RON</td>
</tr>
</table>
Tabelul va arta astfel:
mere

1,5 RON

banane

5 RON

Proprietile tabelelor
Pentru ca liniile unui tabel s fie vizibile tag-ul <TABLE> trebuie sa fie nsoit de atributul BORDER
avnd valoarea egal cu cel puin 1.
Dup cum observai, liniile tabelului sunt linii duble. Pentru a avea dect o singur linie vom folosi
atributul CELLSPACING cu valoarea "0". Acest atribut specific distana dintre celulele unui tabel.
Alturi de acest atribut putem folosi i atributul CELLPADING care indic distana dintre marginile
celulelor i textul din cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rnd sau a unei celule, folosim atributele WIDTH pentru
lime i / sau HEIGHT pentru nlime. Pentru alinierea datelor din cadrul tabelului folosim atributul
ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele tabelului pe vertical
folosim atributul VALIGN nsoit de una dintre valorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rnd sau chiar a ntregului tabel folosim atributul
BGCOLOR mpreun cu codul culorii alese.
Tabele asimetrice
Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a uni mai mute linii i "colspan" pentru a
uni mai multe coloane. De asemenea, dac vrem ca prima linie s conin titluri pentru toate coloanele
vom folosi tagul <th>. Acestea vor fi scrise cu litere ngroate ca n exemplul urmtor:
16

Exemplu:
<TABLE BORDER=10>
<tr>
<th colspan=2>Vegetables</th>
<TR> <TD>carrots</TD> <TD>garlic</TD>
</TR>
<TR> <TD>celery</TD> <TD>onions</TD>
</TR>
</TABLE>
Tabelul va arta astfel:
Vegetables
carrots

garlic

celery

onions

Atributul "bgcolor" este folosit pentru a stabilii fondul de culoare al unui paragraf, tabel sau alte
componente ale HTML.
Exemplu:
<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00"
align="right">Garlic</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD"
align="right">Celery</font></td>
<td><font color="#FFFFFF">20</font></td></tr>
</table>
Tabelul va arta astfel:
Garlic
Celery

27
20

Aplicaii HTML

17

Aplicaia 1
Realizai 3 pagini html care s conin fiecare cte 2 strofe
din poezia Balada unui greier mic de George Toprceanu i cte o
imagine sugestiv. Titlul poeziei i autorul se vor regsi pe toate
cele trei pagini, titlul va fi centrat i scris cu H1 (heading 1) iar
numele autorului va fi scris cu caractere obinuite dar nclinate i
va fi aliniat la dreapta.

valoare
cod

&#259;

&#258;

&#226;

&#194;

&#238;

&#206;
Pentru fiecare din cele trei pagini, se va realiza n Paint o
&#351;
imagine sugestiv care va fi poziionat n partea dreapt a
&#350;
strofelor. Spre exemplu, pentru primele dou strofe din poezie, se
&#355;
&#354;
va desena un peisaj de toamn. Pentru urmtoarele dou strofe, n
peisajul de toamn realizat anterior va fi desenat i un greiere. n final, pentru ultimele
dou strofe ale poeziei, imaginea va conine i o furnic.
Textul poeziei va conine diacritice - lipsa diacriticelor ntr-un text romnesc denot o
grav lips de profesionalism. A scrie fr diacritice poate duce la exprimri ambigue ca de
exemplu un tanc de 12 ani, un roman nascut la Roma, zece paturi etc.
(http://ro.wikipedia.org/wiki/Wikipedia:Diacritice)
n partea dreapt a paginii avei tabelul cu diacritice n HTML. Cele trei pagini se vor intitula
partea1.html, partea2.html i partea3.html.

Indicaie ! Pentru a putea alinia cu uurin strofele i imaginea n pagin, folosii un tabel
fr borduri, cu o linie i dou coloane. n prima coloan vor fi cele dou strofe, iar n cea
de-a doua coloan imaginea.
Balada unui greier mic
George Toprceanu
Peste dealuri zgribulite,
Peste arini zdrenuite,
A venit aa, deodat,
Toamna cea ntunecat.
Lung, slab i zlud,
Boteznd natura ud
C-un mnunchi de ciumafai,
Cnd se scutur de ciud,
mprejurul ei departe
Risipete-n evantai
Ploi mrunte,
Frunze moarte,
Stropi de tin,
Guturai...

18

i cum vine de la munte,


Blestemnd
i lcrimnd,
Toi ciulinii de pe vale
Se pitesc prin vguni,
Iar mceii de pe cmpuri
O ntmpin n cale
Cu grbite plecciuni...
Doar pe coast, la urcu,
Din csua lui de hum
A ieit un greieru,
Negru, mic, muiat n tu
i pe-aripi pudrat cu brum:
- Cri-cri-cri,
Toamn gri,
Nu credeam c-o s mai vii
nainte de Crciun,
C puteam i eu s-adun
O grun ct de mic,
Ca s nu cer mprumut
La vecina mea furnic,
Fi'ndc nu-mi d niciodat,
i-apoi umple lumea toat
C m-am dus i i-am cerut...
Dar de-acu,
Zise el cu glas sfrit
Ridicnd un picioru,
Dar de-acu s-a isprvit...
Cri-cri-cri,
Toamn gri,
Tare-s mic i necjit!

19

Aplicaia 2
Realizai o pagin html cu titlul poezie_de_toamn.html care s conin dou
cadre. Primul dintre ele conine trei link-uri ctre cele 3 pagini create la aplicaia 1.
Al doilea, iniial, afieaz pagina partea1.html creat la exerciiul anterior. La
comanda vizitatorului paginii respective, se pot afia, n al doilea cadru oricare din
cele trei pri ale poeziei Balada unui greier mic de George Toprceanu.

Indicaie !
Pagina poezie_de_toamn.html va arta astfel:

Balada unui greier mic


George Toprceanu

Balada unui greier mic Partea 1


Balada unui greier mic Partea 2
Balada unui greier mic Partea 3

Peste dealuri zgribulite,


Peste arini zdrenuite,
A venit aa, deodat,
Toamna cea ntunecat.
Lung, slab i zlud,
Boteznd natura ud
C-un mnunchi de ciumafai,
Cnd se scutur de ciud,
mprejurul ei departe
Risipete-n evantai
Ploi mrunte,
Frunze moarte,
Stropi de tin,
Guturai...

Fiierul HTML iniial, cel care creeaz cadrele este:

<html>
<head><title>Fiier cu cadre</title></head>
<frameset cols=30%,70%>

<frame src=link_uri.html>
<frame name=cadrul2 src=partea1.html>
</frameset>
</html>
Primul cadru afieaz urmtorul fiier (link_uri.html) care conine legturile ctre
cele trei pagini html (parte1.html, partea2.html i partea3.html):

<html>
<head><title>Fiier cu
<body>
<a href=partea1.html
</a><br>
<a href=partea1.html
</a><br>
<a href=partea1.html
</a>
</body>
</html>

legturi</title></head>
target=cadrul2> Balada unui greier mic Partea 1
target=cadrul2> Balada unui greier mic Partea 2
target=cadrul2> Balada unui greier mic Partea 3

Test 1

HTML
1. Creai un folder / director numit HTML
2. n folderul / directorul creat aducei de pe pagina de concurs imaginea ghiocei.jpg
3. n folderul / directorul HTML, creai un fiier numit index.html pe care l deschidei n
Notepad spre editare, iar pentru vizualizare n Internet Explorer.
4. S se adauge n index.html o etichet (tag) astfel nct fiierul index.html, vizualizat n
Internet Explorer s aib pe bara de titlu textul Primavara
5. Punei documentului un fundal galben
6. Pe pagin, centrat, avnd dimensiunea maxim posibil dat de eticheta < h > punei textul,
scris cu rou A venit primavara!
7. Lsai dou linii libere
8. Inserai textul scris cu negru, A venit, n sfarsit primavara. Au aparut ghioceii.
9. Pe rndul urmtor inserai imaginea ghiocei.jpg, impunnd dimensiunea: lime = 200,
nlime = 156
10. Imaginea va permite afiarea textului GHIOCEI atunci cnd ne aflm cu mouse-ul pe ea.

11. Pe rndul urmtor afiai textul: Pentru a vedea imaginea cu ghioceii la dimensiunea
reala, apasati aici. Cuvntul aici va constitui link ctre pagina doi.html.
Pagina doi.html va permite afiarea imaginii ghiocei.jpg la dimensiunea real
Pagina doi.html se va deschide ntr-o fereastr nou.
Rezultat final:

Aplicaia 3

Realizai n HTML urmtorul tabel:


Nr.
Crt.

Nume

Prenume

Discipline

Medii

Sem. I

Sem. II

1.

Religie

8,25

7,75

2.

Istorie

7,60

9,60

<html>
<table border=1>
<tr>
<th>Nr.<br>Crt.</th>
<th colspan=3> Nume</th>
<th> Prenume</th>
<th> Discipline</th>
<th colspan=2> Medii</th>
<tr>
<td rowspan=3>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan=2>&nbsp;</td>
<td rowspan=2>&nbsp;</td>
<td rowspan=2><b>Sem. I</b></td>
<td rowspan=2><b>Sem. II</b></td>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr>
<td>1.</td>
<td colspan=3>&nbsp;</td>
<td>&nbsp;</td>
<td>Religie</td>

<td>8,25</td>
<td>7,75</td>
<tr>
<td>2.</td>
<td colspan=3>&nbsp;</td>
<td>&nbsp;</td>
<td>Istorie</td>
<td>7,60</td>
<td>9,60</td>
</table>
</html>
Aplicaia 4

1. Lansai n execuie editorul de texte Notepad i definii structura unui


document HTML cruia i vei da titlul Pagina mea.
2. Aplicai un fundal de pagin exprimat n cod culoare de tipul #408080
(Grass Green).
Rezolvarea punctelor 1 i 2:
<html>
<head>
<title> Pagina mea </title>
</head>
<body bgcolor="#408080">
</body>
</html>

3. Salvai fiierul cu numele Orar.html (File Save As Orar.html).


4. Afiai nainte i dup titlul de la nceputul paginii cte o linie de grosime
egal cu 15 pe 50% din pagin, culoare roz.
5. Textul Orarul meu pe care l vei introduce va avea stilul Heading 1, culoare
albastr, aliniat la centru.
Rezolvarea punctelor 4 i 5:

<html>
<head>
<title> Pagina mea </title>
</head>
<body bgcolor="#408080">
<hr width="50%" size="15"
align="center" color="#FF00FF">
<h1 align="center"><font
color="#0000FF">ORARUL
MEU</font></h1>
<hr width="50%" size="15"
align="center" color="#FF00FF">
</body>
</html>
Rezultatul este
6. Creai un tabel cu 5 coloane i 3 linii care va conine pe
prima linie zilele lucrtoare ale sptmnii, iar pe
urmtoarele dou linii primele dou ore din fiecare zi.
7. Aplicai celulelor cu Informatic un fundal de culoare
galben.
Rezolvarea punctelor 6 i 7:
Pentru a scrie cu diacritice, folosii codurile din tabelul alturat:

<html>
........
<hr width="50%" size="15" align="center" color="#FF00FF">
<table border="1" width="70%" align="center">
<tr>
<td>Luni</td><td>Mar&#355;i</td><td>Miercuri</td><td>Joi</td
><td>Vineri</td>
<tr>
<td>Matematic&#259;</td><td
bgcolor="yellow">Informatic&#259;</td><td>Rom&#226;n&#259;
</td><td>TIC</td><td bgcolor="yellow"> Informatic&#259;</td>
<tr>
<td>Fizic&#259;</td><td
bgcolor="yellow">Informatic&#259;</td><td>Englez&#259;</td><
td>Sport</td><td>Desen</td>
</table>
</body>
</html>

Test 2
1. Lansai n execuie editorul de texte Notepad i definii structura unui document
HTML cruia i vei da titlul EVALUARE IN EDUCATIE TIC XI_1_2010
2. Aplicai un fundal de pagin exprimat n cod culoare de tipul #0000FF
(albastru)
3. Salvai fiierul cu numele Orar.html
4. Realizai o captur a imaginii n browser pe care o salvai ntr-un document Word,
sub numele captura_1.doc
5. Afiai nainte i dup titlul de la nceputul paginii cte o linie de grosime egal cu
15 pe 50% din pagin, culoare galben
6. Textul Orarul meu pe care l vei introduce va avea stilul Heading1, culoare
roie, aliniat la centru
7. Creai un tabel cu 5 coloane i 3 linii
8. Coninutul celulelor este cel corespunztor modelului dat
9. Aplicai celulelor cu coninutul TIC un fundal de culoare galben
10. Realizai o captur a imaginii n browser pe care o salvai ntr-un document
Word, sub numele captura_2.doc

Aplicaia 5

Organizai, utiliznd tabele HTML, orarul clasei voastre.


Personalizai pagina, n funcie de materiile preferate, sau de
profesorii preferai. De exemplu, dac materia preferat este
Informatica, adugai o imagine de fundal celulei care conine
aceast materie.
Exemplu de orar (parial)

<html><title>ORAR</title>
<body>
<table border="5">
<caption>ORAR-ul clasei XII A</caption>
<tr>
<th width=100>Luni</th>
<th width=100>Marti</th>
<th width=100>Miercuri</th>
<th width=100>Joi</th>
<th width=100>Vineri</th>
</tr>
<tr>
<td background="rai.jpg" height=100 align=center><font
color=white>Informatica</td>
<td align=center>Romana</td>
<td bgcolor=green align=center>Matematica</td>
<td align=center><font color=red size=20pt><b><i>Fizica</i></b></td>
<td align=right><font face="Monotype Corsiva" size=3pt
color=magenta>Geografie</td>

</tr> </table></html>
Aplicaia 6

Aplicaie HTML
Realizai o pagina Web ca n figura de mai sus.
Indicaie
<html>
<head>
<style>
.stil1{font-size:30pt;color:#8B008B;font-style:italic;}
.stil2{font-size:15pt;color:#9932CC}
.stil3{font-size:10pt;color:#FF8C00}
</style>
</head>

<body>
<table border="5" cellpadding="50">
<tr BGCOLOR="#FFFFCC" ><td ><img src="fruits.jpg" height=100 width=200>
<p class="stil1"><b>Cuprinsul cursului</b></p>
<ol type="I" class="stil2">
<li><b>Tehnici de programare</b>
<ul type="circle" class="stil3">
<li><b>Backtracking</b>
<li><b>Greedy</b>
<li><b>Divide et impera</b>
<li><b>Programare dinamica</b>
<li><b>Branch and Bound</b>
</ul>
<li><b>Metode de sortare</b>
<ul type="circle" class="stil3">
<li><b>Sortarea prin selectarea minimului (maximului)</b>
<li><b>Sortarea prin interschimbare</b>
<li><b>Sortarea prin insertie</b>
</ul>
</ol>
</td></tr>
</table>
</body>
</html>