HTML

Clasa a XII-a
HTML
LIMBAJUL HTML
HTML (HyperText Markup Language) este
limbajul utilizat n World Wide Web pentru descrierea
hipertextelor. HTML nu este un limbaj de programare
propriu-zis, ci doar un limbaj de descriere, coninnd
elemente ce permit construirea paginilor Web.
Limbajul HTML este derivat din SGML (Standard
Generalized Markup Language limbaj standard
generalizat de marcare) dar este mult mai simplu fiind
destinat numai paginilor web, avnd caracteristici specifice
limbajelor descriptive:
- documentele HTML sunt de tip text (ASCII)
putnd fi create cu orice editor de texte (Notepad,
Wordpad);
- documentele HTML pot fi vizualizate cu diferite
browser-e i sunt independente de platforma de lucru;
- HTML utilizeaz pentru descrierea documentelor
web tag-uri (etichete sau marcaje) specifice pentru fiecare
element descris, tag-urile stabilesc att structura
documentului ct i aspectul acestuia.
Un tag este un identificator care furnizeaz browserului instruciuni de formatare a documentului.
Etichetele HTML sunt ncadrate ntre paranteze
unghiulare < >, <tag> eticheta de nceput i </tag>
eticheta de sfrit. Efectul corespunztor etichetei este
aplicat textului dintre eticheta de nceput i cea de sfrit.
Unele elemente admit atribute ce conin informaii
suplimentare despre coninutul elementelor. Atributele se
precizeaz n cadrul tag-ului de nceput, se separa prin
spaii i se precizeaz sub forma:
atribut=valoare.
1
Clasa a XII-a
HTML
Structura unui document HTML

Un document HTML este delimitat de perechea de
etichete <HTML> i </HTML> i este constituit din:
A.
antetul documentului delimitat de tagurile <HEAD> i </HEAD>, conine informaii generale
despre document cum ar fi:
- titlul documentului cel care va fi afiat n bara
de titlu a ferestrei browser-ului i este delimitat
de tag-urile <TITLE> i </TITLE>;
- pentru alte informaii suplimentare se utilizeaz
eticheta <META> admite atributele:
o NAME conine un ir de caractere ce
reprezint
numele
proprietii
(Author, Keywords, Description)
o CONTENT conine valoarea asociat
proprietii respective (ntre )
corpul documentului delimitat de tag-urile
<BODY> i </BODY> sau <FRAMESET>
i
</FRAMESET>,
conine
textul
propriu-zis
al
documentului i elementele de formatare ale acestuia.
Elementul BODY admite urmtoarele atribute:
BACKGROUND=URL URL este un ir de
caractere ce reprezint adresa Web a unei imagini care va fi
utilizat de browser ca fundal (background) pentru
document.
BGCOLOR=culoare color stabilete culoarea
fundalului documentului (BackGround Color).
n HTML culorile se pot specifica n dou moduri:
B.
Clasa a XII-a
HTML
- utiliznd denumirile predefinite, cele mai uzuale sunt:

red, maroon, yellow, green, lime, teal, olive,
aqua, blue, navy, purple, fuchsia, black (este
culoarea implicita), gray, silver, white;
- utiliznd codul culorii ( #rrggbb ) dat n formatul
hexazecimal RGB: rr reprezint rou (de la 00 la FF);
gg reprezint verde (de la 00 la FF); bb reprezint
albastru (de la 00 la FF); aceste valori reprezentnd
contribuia fiecrei culori de baz la culoarea creat.
TEXT=culoare stabilete culoarea textului.
LINK=culoare stabilete culoarea cu care vor
fi marcate n text link-urile nevizitate.
VLINK=culoare stabilete culoarea cu care
vor fi marcate n text link-urile vizitate.
ALINK=culoare stabilete culoarea cu care va
fi marcat n text link-ul activ.
LANG=cod-limba lang specific limba n
care este redactat documentul (pentru motoarele de cutare,
sintetizatoare de voce etc.) cum ar fi: en, fr, el, ro etc.
DIR=LTR RTL specific direcia de scriere a
textului: LTR de la stnga la dreapta (Left To Right) sau
RTL de la dreapta la stnga (Right to Left).
Comentariile HTML sunt texte pe care browser-ul
nu le va afia. Acestea ncep cu <! i se termin cu ->.
<!Acesta este un comentariu. Browser-ul nu il vede->
Clasa a XII-a
HTML
Laborator 1
a) prima.html
<HTML>
<HEAD>
<TITLE> Prima mea pagina Web </TITLE>
<META NAME="Author"
CONTENT="numele meu">
<META NAME="Description"
CONTENT="Proiectarea paginilor
Web">
<META NAME="Keywords"
CONTENT="HTML, CSS">
</HEAD>
<BODY BGCOLOR=GRAY TEXT=NAVY>
<I> <B> Aceasta este prima mea pagina Web
</B> </I>
</BODY>
</HTML>
b)culori.html
<HTML>
<HEAD>
<TITLE> Test de culoare </TITLE>
</HEAD>
<BODY BGCOLOR=#777777>
<FONT COLOR=#000000> Test de culoare
</FONT>
<BR><FONT COLOR=#111111> Test de culoare
</FONT>
4
Clasa a XII-a
HTML

</FONT>
</FONT>
</FONT>
</FONT>
</FONT>
</FONT>
</FONT>
</FONT>
<BR><FONT COLOR=#AAAAAA> Test de
culoare </FONT>
<BR><FONT COLOR=#BBBBBB> Test de
culoare </FONT>
<BR><FONT COLOR=#CCCCCC> Test de
culoare </FONT>
<BR><FONT COLOR=#DDDDDD> Test de
culoare </FONT>
<BR><FONT COLOR=#EEEEEE> Test de
culoare </FONT>
<BR><FONT COLOR=#FFFFFF> Test de
culoare </FONT>
</BODY>
</HTML>
Clasa a XII-a
HTML
Formatarea textului
Formatarea textului care apare ntr-un documente
HTML se poate face:
- la nivel de bloc (bloc-level) pot conine i alte
elemente de formatare i ncep de la linie nou;
- la nivel de caracter conin doar text sau alte
elemente de formatare la nivel de caracter.
Gruparea mai multor elemente HTML la nivel de
bloc se realizeaz cu ajutorul tag-urilor <DIV> i </DIV>.
Pentru gruparea mai multor elemente dintr-un bloc la nivel
de caracter (inline) se utilizeaz tag-urile <SPAN> i
</SPAN>.
Formatarea paragrafelor
n HTML delimitarea paragrafelor se realizeaz cu
ajutorul tag-urilor <P> i </P>, eticheta de sfrit fiind
opional.
Tag-ul <P> admite atributele:
ALIGN = LEFT RIGHT CENTER JUSTIFY
TITLE
LANG
DIR
Pentru a stabili acelai mod de grupare pentru mai
multe paragrafe, trebuie s le grupm ntr-un singur bloc cu
ajutorul tag-ului <DIV>.
Pentru a insera n document o linie vid se utilizeaz
tag-ul <BR>.
Clasa a XII-a
HTML
Utilizarea paragrafelor titlu

Fiecare element structural al unui document, de
obicei, este precedat de un paragraf titlu (heading).
Documentele HTML pot fi structurate pe ase
niveluri, n funcie de importana lor, existnd ase etichete
care definesc nivelul paragrafului titlu n structura
documentului: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
Etichetele de sfrit sunt obligatorii.
Tag-urile pentru paragrafe admit atributele: LANG,
DIR, TITLE, ALIGN.
Formatarea la nivel de caracter
Precizarea informaiilor referitoare la fontul utilizat
de browser pentru vizualizarea textului se realizeaz cu
ajutorul tag-urilor <FONT> i </FONT>.
Atributele admise de eticheta <FONT> sunt:
SIZE = valoare
- stabilete dimensiunea
caracterelor. Valoarea dimensiunii poate fi specificat:
- n mod absolut valori naturale ntre 1 i 7;
- relativ la dimensiunea curent a caracterelor
cu +n sau n mai mari sau mai mici.
COLOR = culoare
FACE = lista_fonturi definete o list de
fonturi separate prin virgul, dintre care browser-ul l va
alege pe primul disponibil n ordinea preferinelor (altfel va
utiliza fontul implicit).
Dimensiunea implicit a fontului se poate modifica
utiliznd tag-ul <BASEFONT> sub forma:
<BASEFONT SIZE=4>
7
Clasa a XII-a
HTML
Laborator 2
a)
generalitati.html
<html>
<head>
<title>Limbajul HTML - Generalitati</title>
<meta name="Author" content="Cerasela Grigoras">
<meta name="Description" content="Manual de HTML.
Generalitati">
<meta name="Keywords" content="HTML, generalitati,
invata"></head>
<body>
<p><b>HTML</b> (<i>HyperText Markup Language</i>) este
limbajul utilizat in <i>World Wide Web</i> pentru
descrierea hipertextelor. <b>HTML</b> nu este un limbaj de
programare propriu-zis, ci doar un limbaj de descriere,
continand elemente ce permit construirea paginilor
<i>Web</i>. </p>
<p>Limbajul HTML este derivat din <b>SGML</b> (<i>Standard
Generalized Markup Language</i> - limbaj standard
generalizat de marcare) dar este mult mai simplu fiind
destinat numai paginilor <i>web</i>, avand caracteristici
specifice limbajelor descriptive: </p>
<ul>
<li>documentele <b>HTML</b> sunt de tip text (ASCII)
putand fi create cu orice editor de texte (<i>Notepad,
Wordpad</i>); </li>
<li>documentele HTML pot fi vizualizate cu diferite
browser-e si sunt independente de platforma de lucru;
</li>
<li>HTML utilizeaza pentru descrierea documentelor web
<i>tag</i>-uri (etichete sau marcaje) specifice pentru
fiecare element descris, tag-urile stabilesc atat
stabilesc atat structura documentului cat si aspectul
acestuia. </li>
</ul>
<p>Un tag este un identificator care furnizeaza browser-ului
instructiuni de formatare a documentului. Etichetele
<b>HTML</b> sunt incadrate intre paranteze unghiulare
<b>< ></b>, <b><tag></b> - eticheta de inceput
si <b></tag></b> - eticheta de sfarsit. Efectul
corespunzator etichetei este aplicat textului dintre
eticheta de inceput si cea de sfarsit. Unele elemente
admit atribute ce contin informatii suplimentare despre
continutul elementelor. Atributele se precizeaza in cadrul
tag-ului de inceput, se separa prin spatii si se
precizeaza sub forma: </p>
<p align="center"><b>atribut=valoare</b></p>
Clasa a XII-a
HTML
</body>
</html>
b)
index.html
<html>
<head>
<title>Limbajul HTML</title>
<meta name="Author" content="Cerasela Grigoras">
<meta name="Description" content="Manual de HTML">
<meta name="Keywords" content="HTML, CSS, invata">
</head>
<body bgcolor="#C0C0C0" link="#006699" vlink="#0066FF"
alink="#CC3399">
<h1 align="center"><a href="html_generalitati.htm"><font
face="Arial" color="#003366">Limbajul HTML</font></a></h1>
<hr>
<h2 align="left">Structura unui document HTML</h2>
<h4 align="left">Laborator 1</h4>
<hr>
<h2 align="left">Formatarea textului</h2>
<h3 align="left">Formatarea paragrafelor</h3>
<h3 align="left">Utilizarea paragrafelor titlu</h3>
<h3 align="left">Formatarea la nivel de caracter</h3>
<h3 align="left">Utilizarea seturilor de
caractere</h3>
<h3 align="left">Aplicarea unor efecte asupra
textului</h3>
<h3 align="left">Utilizarea citatelor </h3>
<h3 align="left">Utilizarea indicilor si
exponenetilor</h3>
<h3 align="left">Utilizarea textului preformatat</h3>
<h3 align="left">Utilizarea listelor</h3>
<hr>
<h2 align="left">Inserarea legaturilor in documente
HTML</h2>
<hr>
<h2 align="left">Inserarea imaginilor in documente
HTML</h2>
</body>
</html>
Clasa a XII-a
HTML
Utilizarea seturilor de caractere

Codul ASCII s-a dovedit a fi insuficient pentru
reprezentarea informaiilor pe Web. Prin urmare au fost
standardizate i alte seturi de caractere.
Specificarea setului de caractere utilizat de un
document HTML se poate face cu ajutorul etichetei
<META>. De exemplu pentru a specifica faptul c
documentul utilizeaz diacritice se specific n antetul
documentului urmtoarea declaraie:
<meta http-equiv="Content-Language"
content="ro">
<meta http-equiv="Content-Type"
content="text/html;
charset=windows-1250">
prin atributul HTTP-EQUIV se pot specifica informaii
asociate cmpurilor din antetul protocolului HTTP. n cazul
de mai sus valoarea asociat cmpului numit ContentType este "text/html; charset=windows1250"
Specificarea caracterelor care nu au corespondent pe
tastatur se poarte face n dou moduri:
a) Prin intermediul codului numeric asociat astfel:
&#D unde D reprezint codul Unicode al caracterului.
Exemple:
â
Â
î
Î
10
reprezint
reprezint
reprezint
reprezint
Clasa a XII-a
HTML
b) Prin intermediul unor referine speciale, asociate

unor caractere folosite frecvent. Exemple:
â
Â
<
>
&amp
&quot
reprezint
reprezint
reprezint
reprezint
reprezint
reprezint
<
>
&
Aplicarea unor efecte asupra textului

Pentru a aplica unei zone de text un anumit efect, se
ncadreaz textul ntre eticheta de nceput i cea de sfrit,
corespunztoare efectului respectiv.
Formatarea textului se poate face la nivel fizic
utiliznd urmtoarele tag-uri:
<B> text </B>
<I> text </I>
<U> text </U>
<STRIKE>text</STRIKE>
<TT>text</TT>
11
aplic stilul bold textului.

aplic stilul nclinat textului.
aplic stilul subliniat textului.
produce "tierea" cu o linie a
textului coninut
afieaz textul n fontul
teletype (neproporional), nu
este cunoscut de toate
browser-ele
Clasa a XII-a
HTML
n HTML se pot aplica i efecte logice, n

concordan cu semnificaia textului respectiv:
afieaz textul cu
dimensiune mai mare dect
fontul de baz
afieaz textul cu dimensiune
< SMALL>text</ SMALL > mai mic dect fontul de baz
identific un termen de
definiie i-l scrie cu caractere
<DFN>text</DFN>
diferite de textul nconjurtor
evideniaz textul specificat,
<EM>text</EM>
de obicei prin scrierea italic
aplic unul dintre cele ase
<Hn>text</Hn>
formate predefinite de antet
aplic textului menionat un
font similar intrrii de la
<KBD>text</KBD>
tastatur, deci un font
neproporional
aplic textului din container
un font asemntor ieirii de
<SAMP>text</SAMP>
calculator (neproporional).
produce o evideniere
<STRONG>text</STRONG> pronunat a textului
mut textul selectat mai jos
dect linia de baza a textului
precedent si aplic un font
<SUB>text</SUB>
mai mic (face trecerea n
indice inferior)
mut textul selectat mai sus
dect linia de baz a textului
precedent si aplic un font
<SUP>text</SUP>
mai mic (face trecerea n
indice superior)
<BIG>text</BIG>
12
Clasa a XII-a
HTML
Formatarea la nivel de comunicare se face cu

ajutorul tag-urilor:
<ADDRESS [ALIGN=left|
center|right]>
text
</ADDRESS>
<CITE>text</CITE>
<CODE>text</CODE>
<LISTING>text</LISTING>
<VAR>text</VAR>
permite vizualizarea unei

informatii de adres, uzual o
adres de e-mail
indic o referin, cum ar fi un
nume de carte, articol, numele
unui autor. Referin este
difereniat fat de textul
curent
aplic textului un font
neproporional precum cel de
calculator (clasic)
aplic textului un font similar
ieirilor de calculator, este
utilizat pentru compatibilitate
cu versiuni mai vechi
produce o evideniere a
textului, uzual prin trecerea n
italice.
Utilizarea citatelor n documente HTML

Pentru inserarea de citate exist dou etichete:
<BLOCKQUOTE> utilizate pentru citate lungi i
<Q> utilizate pentru citate scurte care nu conin mai
multe paragrafe.
Ambele necesit etichet de sfrit, textul cuprins ntre cele
dou etichete fiind un citat.
13
Clasa a XII-a
HTML
Utilizarea textului preformatat

Prin utilizarea elementului PRE se specific
browser-ului faptul c textul scris ntre eticheta de nceput
i cea de sfrit este preformatat adic browser-ul va
respecta ntocmai modul de spaiere, de identare, structura
liniilor i dimensiunea fontului.
Prin intermediul atributului WIDTH se specific
numrul maxim de caractere pe linie.
Laborator 3
ncadrai n documente HTML elementele prezentate mai
sus i vizualizai-le n browser.
<P>H<SUB>2</SUB>O
<HR>
<P>E=mc<SUP>2</SUP>
<HR>
<STRIKE>Textul este scris
taiat.</STRIKE>
<HR>
<EM>Textul este accentuat.</EM>
<HR>
<PRE WIDTH=25>
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
</PRE>
<HR>
14
Clasa a XII-a
HTML
<BLOCKQUOTE>
<p><STRONG>CREDINŢA</STRONG>
</p>
<pre>
Cnd teama vede zidul
Credinta vede calea;
Cnd teama simte bezna
Credinta simte zarea;
Cnd teama trege n jos
Credinta n sus - mereu;
Cnd teama ntreaba: "Cine?
"
Credinta spune: "EU!".
</pre>
</BLOCKQUOTE>
15
Clasa a XII-a
HTML
Utilizarea listelor
Utilizarea listelor este necesar pentru prezentarea
informaiilor n mod structurat. Se pot utiliza trei tipuri de
liste:
1. Listele neordonate (Unordered List) sunt
utilizate atunci cnd exist o legtur ntre elementele listei
dar nu se impune o anumit ordine a lor. Aceste liste sunt
ncadrate ntre tag-urile <UL> i </UL>, fiecare element al
listei fiind precedat de tag-ul <LI> (List Item) care
introduce naintea elementului o bulin.
La imbricarea listelor neordonate introduse prin UL,
nivelele diferite vor fi difereniate prin buline de tipuri
diferite. Selectarea simbolului care preced fiecare intrare
n list se realizeaz cu ajutorul atributului TYPE care
poate avea valorile: disc, circle i square.
Atributul COMPACT arat c distana dintre bulin
i text poate fi redus (este posibil ca aceast opiune s nu
funcioneze pe orice browser).
2. Listele ordonate (Ordered List) sunt utilizate
atunci cnd elementele listei trebuie prezentate ntr-o
anumit ordine. Aceste liste sunt ncadrate ntre tag-urile
<OL> i </OL>, fiecare element al listei fiind precedat de
tag-ul <LI>. Atributele acceptate de tag-ul OL sunt:
- TYPE=1|a|A|i|I care determin modul de
numerotare a intrrilor n list i poate avea valorile: 1
(pentru numerotare cu cifre arabe: 1, 2, 3,), a (intrrile n
list vor fi precedate de literele mici ale alfabetului latin: a,
b, c , ), A (intrrile n list vor fi precedate de literele
mari ale alfabetului latin: A, B, C,), i (numerotarea se
16
Clasa a XII-a
HTML
face cu cifre romane mici: i, ii, iii,), I (numerotarea se

face cu cifre romane mari: I, II, III,).
- START=numr stabilete numrul de la care
s se nceap numerotarea listei. Valoarea implicit este 1|a|
A|i|I.
Pentru a modifica valoarea cu care este automat
numerotat a intrrii n list se include n tag-ul <LI>
corespunztore intrrii respective atributul:
- VALUE=numr unde numr reprezint
valoarea de etichetare a intrrii n lista respectiv.
3. Listele de definiii (Definition List) sunt cele n
care intrrile sunt formate din dou paragrafe: primul
corespunztor termenului iar al doilea, identat,
corespunztor definiiei termenului. Crearea unei astfel de
liste este marcat cu tag-urile <DL> i </DL>. Prin
urmare o intrare n list va avea dou componente:
- termenul marcat cu tag-ul <DT> (Definition
Term) care poate conine doar elemente de formatare inline.
- definiia termenului marcat cu tag-ul <DD>
(Definition Description) care poate conine i elemente de
formatare la nivel de bloc.
17
Clasa a XII-a
HTML
Laborator 4
ncadrai n documente HTML
prezentate mai sus i vizualizai-le n browser.
<UL COMPACT TYPE=disk>
<LI>element principal
<UL COMPACT TYPE=square>
<LI>element secundar
</UL>
</UL>
<OL COMPACT START=1 TYPE=1>
<LI>primul element
<UL COMPACT TYPE=square>
</UL>
<LI>al doilea element
<LI>al treilea element
<LI>al patrulea element
</OL>
18
elementele
Clasa a XII-a
HTML
<DL COMPACT>
<DT>habaner</DT>
<DD>dans popular cubanez, cu miscare
moderat</DD>
<DT>habitaclu</DT>
<DD><OL>
<LI>locas special al compasului pe o
nav
<LI>spatiu ntr-un avion, ntr-o
main pentru echipaj, cltori
etc.
</OL>
.....
<DT>happy-end</DT>
<DD>sfrit fericit</DD>
</DL>
19
Clasa a XII-a
HTML
Inserarea tabelelor in documente HTML

Tabelele permit organizarea informaiilor ntr-un
document HTML. Inserarea unui tabel se face prin
intermediul tag-urilor <TABLE> i </TABLE>.
Tag-ul TABLE admite urmtoarele atribute:
SUMARRY = text specific o descriere a
rolului i structurii tabelului, aceste informaii nu sunt
vizualizate n pagina Web;
ALIGN = LEFT RIGHT CENTER
specific alinierea tabelului n document;
WIDTH = valoare specific limea ntregului
tabel; valoarea poate fi specificat n numr de pixeli sau n
procente;
HEIGHT = valoare specific nlimea
ntregului tabel; valoarea poate fi specificat n numr de
pixeli sau n procente;
BORDER = valoare specific n numr de
pixeli grosimea liniei chenarului din jurul tabel;
COLS = valoare specific numrul de coloane
ale tabelului;
CELLSPACING = valoare specific spaiul
dintre celule i spaiul dintre celule i marginea tabelului;
CELLPADING = valoare specific spaiul
dintre chenarul celulei i spaiul coninutul ei; valoarea
poate fi specificat n numr de pixeli sau n procente;
Coninutul elementului TABLE este constituit din
liniile tabelului. Specificarea unei linii se realizeaz cu
ajutorul elementului TR (Table Row), ntre eticheta de
20
Clasa a XII-a
HTML
nceput <TR> i cea de sfrit </TR> (opional) fiind

descrise celulele de pe linia respectiv.
Exemplu:
<TABLE>
<TR> continutul primei linii
<TR> continutul celei de a doua linii </TR>
</TABLE>
Specificarea celulelor care constituie o linie se

realizeaz prin intermediul elementelor TH (Table Header),
pentru celulele care constituie antetul tabelului (capul de
tabel), respectiv TD (Table Data) pentru celulele care
conin informaiile din tabel.
Elementele TH i TD admit urmtoarele atribute:
ROWSPAN = numr_de_linii specific
numrul de linii acoperite de celula respectiv; valoarea
implicit este 1; valoarea 0 semnific faptul c aceast
celul acoper toate liniile ncepnd cu cea curent;
COLSPAN = numr_de_coloane specific
numrul de coloane acoperite de celula respectiv; valoarea
implicit este 1; valoarea 0 semnific faptul c aceast
celul acoper toate coloanele ncepnd cu cea curent;
WIDTH = valoare specific limea celulei
n numr de pixeli;
HEIGHT = valoare specific nlimea
celulei n numr de pixeli;
21
Clasa a XII-a
HTML
Laborator 5
<html>
<head>
<meta name="Description" content="Inserarea tabelelor">
<title>Laborator 5</title>
</head>
<body>
<table border="2" width="50%" align="center">
<tr>
<th colspan="5" bgcolor="#AAFFFF"><b>ORAR</b></th>
</tr>
<tr>
<th>Luni</th>
<th>Marti</th>
<th>Miercuri</th>
<th>Joi</th>
<th>Vineri</th>
</tr>
<tr>
<td>Matematica</td>
<td>E</td>
<td>Geografie</td>
<td>Desen Tehnic</td>
<td rowspan="2">Informatica-TAC</td>
</tr>
<tr>
<td>Fizica</td>
<td rowspan="2">LB. Romana</td>
<td>B</td>
<td>D</td>
</tr>
<tr>
<td>M</td>
<td>I</td>
<td>E</td>
<td>B</td>
</tr>
<tr>
<td>L</td>
<td>C</td>
<td>B</td>
<td>I</td>
<td>B</td>
</tr>
</table>
</body>
</html>
22
Clasa a XII-a
23
HTML
Clasa a XII-a
HTML
Inserarea legaturilor in documente HTML

Principala caracteristic a hipertextelor o constituie
utilizarea legturilor (links). Un link este o conexiune ctre
o alt resurs Web (un alt hipertext sau o imagine, o
secven video sau audio, un program etc.), resurs care
poate fi accesat din fereastra browser-ului printr-un
simplu clic.
Limbajul HTML conine multiple elemente prin
intermediul crora se poate crea o legtur ctre resurse
Web:
- IMG creeaz o legtur ctre o imagine;
- LINK specific legturi ctre resurse utile;
- A creeaz o legtur ctre o resurs Web ntr-un
document HTML;
- APPLET creeaz o legtur ctre un program
executabil pe calculatorul utilizatorului.
Elementul A
Pentru a crea un link ntr-un document HTML se
utilizeaz tag-ul A (anchor - ancor). textul scris ntre tagul de nceput <A> i cel de sfrit </A> va aprea
evideniat n fereastra browser-ului: subliniat, colorat n
funcie de valorile atributelor LINK, VLINK, ALINK.
Atributele specifice elementului A sunt:
HREF = URL specific adresa resursei la care se
face legtura;
NAME = ir_de_caractere asociaz un nume unic
ancorei curente, astfel nct s poat constitui inta unui
alt link;
24
Clasa a XII-a
HTML
TITLE = ir_de_caractere asociaz un nume

resursei la care se face legtura. Browser-ul va afia
titlul resursei cnd utilizatorul deplaseaz mouse-ul
deasupra legturii.
Exemplu:
<a href="html_generalitati.htm">Limbajul HTML</a>
Observaii:
- se poate defini o ancor vid;
Exemplu:
<a name=Inceput></a>
<a href="#inceput">De la inceput</a>
- pentru a specifica drept int o ancor dintr-un alt

document se utilizeaz notaia:
adresa#nume_ancor;
Exemplu:
<a href="Linkuri.htm#element_A">Elementul A</a>
- nu este permis utilizarea imbricat a legturilor;

- protocolul care permite trimiterea unui mesaj e-mail
dintr-un program de navigare este mailto:
mailto:adres-destinatar .
Elementul LINK
Spre deosebire de A elementul LINK poate fi plasat
numai n antetul documentului (n seciunea HEAD).
Elementul LINK admite aceleai atribute ca i elementul A
dar nu are etichet de sfrit.
Elementul LINK permite furnizarea diferitor
informaii cum ar fi cele despre autor, versiunile n alte
limbi ale documentului, versiuni anterioare etc.
25
Clasa a XII-a
HTML
Elementul BASE
Specificarea adreselor resurselor Web la care se
creeaz legturi n documente HTML se poate face att n
mod absolut ct i n mod relativ.
n cazul specificrii relative a adreselor se consider
implicit c adresa de baz este locaia curent. Prin
intermediul elementului BASE exist posibilitatea de a
specifica explicit adresa de baz a URL-urilor specificate
n mod relativ.
<BASE HREF=URL>
Url-ul trebuie s fie specificat n mod absolut (calea
lung). Elementul BASE este plasat n antetul
documentului i nu are tag de sfrit.
26
Clasa a XII-a
HTML
Laborator 6
<html>
<head>
<title>Limbajul HTML</title>
<meta name="Description" content="Index">
</head>
<body bgcolor="#C0C0C0" link="#006699" vlink="#0066FF"
link="#CC3399">
<h1 align="center"><a href="html_generalitati.htm"><font
face="Arial" color="#003366">Limbajul HTML</font></a></h1>
<hr>
<h2 align="left"><a href="Structura.htm">Structura unui
document HTML</a></h2>
<h4 align="left"><a href="lab 1.htm">Laborator 1</a></h4>
<hr>
<h2 align="left"><a href="Formatare_text.htm">Formatarea
textului</a></h2>
<ul>
<li><h3 align="left"><a
href="Formatare_text.htm#format_paragraf">Formatarea
paragrafelor</a></h3> </li>
href="Formatare_text.htm#paragraf_titlu">Utilizarea
paragrafelor titlu</a></h3></li>
<li> <h3 align="left"><a
href="Formatare_text.htm#format_caracter">Formatarea la
nivel de caracter</a></h3></li></ul>
<ul>
href="Formatare_text.htm#set_caracter">Utilizarea
seturilor de caractere</a></h3> </li>
href="Formatare_text.htm#aplic_efect">Aplicarea unor
efecte asupra textului</a></h3> </li>
href="Formatare_text.htm#utiliz_citat">Utilizarea
citatelor</a> </h3> </li>
href="Formatare_text.htm#text_preformatat">Utilizarea
textului preformatat</a></h3> </li></ul>
<ul>
href="Formatare_text.htm#utiliz_liste">Utilizarea
listelor</a></h3> </li></ul>
<h4 align="left"><a href="lab%204.htm">Laborator 4</a></h4>
<hr>
..
</body></html>
27
Clasa a XII-a
HTML
Inserarea imaginilor in documente HTML

Elementul IMG permite inserarea imaginilor,
APPLET permite inserarea de applet-uri scrise n limbajul
Java iar elementul OBJECT permite inserarea elementelor
multimedia ntr-un document HTML.
Elementul IMG
Elementul IMG permite inserarea imaginilor. Acesta
nu are coninut i nu admite tag de sfrit. Specificarea
imaginii ce urmeaz a fi inserat se face prin intermediul
atributului:
SRC = URL care specific adresa fiierului care
conine imaginea. Cele ma utilizate formate de imagini
pentru pagini web sunt: .gif i .jpeg;
ALT = text specific un text alternativ care va fi afiat
n locul imaginii de browser-ele care nu pot vizualiza
imagini;
HEIGHT = dimensiune nlimea imaginii;
WIDTH = dimensiune limea imaginii;
Dimensiunea poate fi exprimat n numr de pixeli sau
procente (referitoare la spaiul disponibil i nu la
dimensiunea imaginii);
ALIGN = valoare specific modul de aliniere a
imaginii n raport cu textul. Valoare pote fi: TOP,
MIDDLE, BOTTOM, LEFT, RIGHT;
BORDER = numar_pixeli specific grosimea
chenarului n care va fi ncadrat imaginea;
28
Clasa a XII-a
HTML
HSPACE = dimensiune specific spaiul inserat n

stnga i n dreapta imaginii;
VSPACE = dimensiune specific spaiul inserat n
partea de sus i n partea de jos a imaginii.
Inserarea unei legaturi pe o imagine
Prin utilizarea elementului IMG drept coninut al
elementului ancor <A> se poate insera n document o
legtur pe o imagine adic prin acionarea imaginii printrun clic va fi accesat resursa destinaie.
29
Clasa a XII-a
HTML
Laborator 7
a) Lab 7 end.html
<html>
<head>
<title>The End</title>
</head>
<body>
<p><img src="Cat1.jpg" width="475"
height="356"></p>
<p align="left"><b><font size="5">The
End</font></b></p>
</body>
</html>
b) Lab 7.html
<html>
<head>
<title>Mouse</title>
</head>
<body>
<p align="center"><a href="lab
%207%20end.htm"><img border="1"
src="mouseaero.jpg" width="500"
height="360"></a></p>
<p align="center"> </p>
<p align="center"><font
size="5"><b><i>Mouse-ul
zburator</i></b></font></p>
</body>
</html>
Observaie:
%20 spaiu
30
Clasa a XII-a
HTML
CUPRINS
LIMBAJUL HTML .........................................................................1
Structura unui document HTML....................................................2
Laborator 1.................................................................................4
Formatarea textului..........................................................................6
Formatarea paragrafelor..................................................................6
Utilizarea paragrafelor titlu.............................................................7
Formatarea la nivel de caracter.......................................................7
Laborator 2.................................................................................8
Utilizarea seturilor de caractere.....................................................10
Aplicarea unor efecte asupra textului............................................11
Utilizarea citatelor n documente HTML......................................13
Utilizarea textului preformatat......................................................14
Laborator 3...............................................................................14
Utilizarea listelor...........................................................................16
Laborator 4...............................................................................18
Inserarea tabelelor in documente HTML.....................................20
Laborator 5...............................................................................22
Inserarea legaturilor in documente HTML..................................23
Elementul A...................................................................................23
Elementul LINK............................................................................24
Elementul BASE...........................................................................25
Laborator 6...............................................................................26
Inserarea imaginilor in documente HTML...................................27
Elementul IMG..............................................................................27
Inserarea unei legaturi pe o imagine.............................................28
Laborator 7...............................................................................29
CUPRINS.........................................................................................30
31

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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Clasa a XII-a

Structura unui document HTML

- utiliznd denumirile predefinite, cele mai uzuale sunt:

<BR><FONT COLOR=#222222> Test de culoare

Utilizarea paragrafelor titlu

Utilizarea seturilor de caractere

b) Prin intermediul unor referine speciale, asociate

Aplicarea unor efecte asupra textului

aplic stilul bold textului.

n HTML se pot aplica i efecte logice, n

Formatarea la nivel de comunicare se face cu

permite vizualizarea unei

Utilizarea citatelor n documente HTML

Utilizarea textului preformatat

face cu cifre romane mici: i, ii, iii,), I (numerotarea se

Inserarea tabelelor in documente HTML

nceput <TR> i cea de sfrit </TR> (opional) fiind

Specificarea celulelor care constituie o linie se

Inserarea legaturilor in documente HTML

TITLE = ir_de_caractere asociaz un nume

<a href="#inceput">De la inceput</a>

- pentru a specifica drept int o ancor dintr-un alt

- nu este permis utilizarea imbricat a legturilor;

Inserarea imaginilor in documente HTML

HSPACE = dimensiune specific spaiul inserat n

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