Tutorial HTML

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
ă
Ă
â
Â
î
Î
ş
Ş
ţ
Ţ
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>
<big>mare (big) </big>
<small>mic (small) </small>
<font color="red">font rou (detalii)

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

</font>
<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="#5">Fotografia 5 </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>
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>
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>
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
ă
Ă
â
Â
î
Î
Pentru fiecare din cele trei pagini, se va realiza n Paint o
ş
imagine sugestiv care va fi poziionat n partea dreapt a
Ş
strofelor. Spre exemplu, pentru primele dou strofe din poezie, se
ţ
Ţ
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

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><br>
</a>
</body>
</html>
legturi</title></head>
target=cadrul2> Balada unui greier mic Partea 1
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td rowspan=2><b>Sem. I</b></td>
<td rowspan=2><b>Sem. II</b></td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<tr>
<td>1.</td>
<td colspan=3> </td>
<td> </td>
<td>Religie</td>
<td>8,25</td>
<td>7,75</td>
<tr>
<td>2.</td>
<td colspan=3> </td>
<td> </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>
</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.
<html>
<head>
<title> Pagina mea </title>
</head>
<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.
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ţi</td><td>Miercuri</td><td>Joi</td
><td>Vineri</td>
<tr>
<td>Matematică</td><td
bgcolor="yellow">Informatică</td><td>Română
</td><td>TIC</td><td bgcolor="yellow"> Informatică</td>
<tr>
<td>Fizică</td><td
bgcolor="yellow">Informatică</td><td>Engleză</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>

Tutorial HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tag-uri de baz n HTML

Definete un fiier n format Web

Corpul paginii HTML

Culoarea de fond a paginii

Culoarea textului pe pagin

Imaginea de fond pentru pagin

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

Centreaz materialul n pagin

nlimea riglei n pixeli

Limea riglei n pixeli sau n procente

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

Culoarea riglei orizontale (numai pentru IE)

Marcaj de tip ancor

Referin ctre o ancor intern

Definiia unei ancore interne

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

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

Marcaje pentru liste

Lista de tip definiie

List ordonat (numerotat)

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

Numrul de nceput al listei ordonate

List neordonat (marcat)

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

Afieaz text cu caractere aldine

Afieaz text cu caractere cursive

<BASEFONT SIZE = n>

Afieaz text subliniat

Specific dimensiunea implicit a fontului din pagin

Marcaje pentru tabele

Spaiul suplimentar n cadrul celulelor tabelului

Spaiul suplimentar ntre celulele tabelului

Limea impus tabelului

Specific culoarea chenarului tabelului

Aliniaz tabelul la marginea din stnga a paginii, iar

Aliniaz tabelul la marginea din dreapta a paginii, iar

Spaiu suplimetar pe orizontal n jurul tabelului

Spaiu suplimetar pe vertical n jurul tabelului

Specific numrul de coloane ale unui tabel

Definete un set de definiii de coloane cu ajutorul

Definete limea unei coloane exprimat n pixeli

Definete titlul tabelului

Definete corpul tabelului

Specific culoarea de fond pentru ntreaga linie

Alinierea celulelor de pe linia curent (left, center,

Celula de date a tabelului

Specific culoarea de fond pentru celula de date

Numrul de coloane pe care se ntinde celula curent

Numrul de linii pe care se ntinde celula curent de

Alinierea materialului din cadrul celulei de date.Valori

Alinierea pe vertical a materialului din cadrul celulei

Specific imaginea de fond pentru celula tabelului

Nu permite desprirea textului pe linii n cadrul unei

Aliniaz celule de date cu linia de baz a textului

Aliniaz o coloan fa de un anumit carcater

Aliniaz att marginea din stnga ct i marginea din

Marcajul de introducere a imaginilor

Sursa fiierului grafic

Textul alternativ de afiat, dac este necesar

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