Sergiu CORLAT

(',,,(/(&7521,&(
Í1)250$7+70/

  


  

       



CZU 004.738.5(075.8)
C 71

Sergiu CORLAT: (GLLL HOHFWURQLFH vQ IRUPDWXO +70/ 1RWH GH FXUV SHQWUX

VWXGHQLL IDFXOWLL GH -XUQDOLVP úL úWLLQH DOH FRPXQLFULL

Recenzent: dr. Igor Cialenco IDFXOWDWHD GH 0DWHPDWLF úL ,QIRUPDWLF 860

5HFRPDQGDW SHQWUX HGLWDUH GH FWUH &RQVLOLXO )DFXOWLL GH -XUQDOLVP úL

ùWLLQH DOH &RPXQLFULL 860 

3URFHVDUH FRPSXWHUL]DW Centrul Tehnologii InIRUPDLRQDOH DO )-ù&

CCRE „Presa”

 Sergiu CORLAT, 2002

'HVFULHUHD &,3 D &DPHUHL 1DLRQDOH D &ULL

Corlat, Sergiu
(GLLL HOHFWURQLFH vQ IRUPDW +70/

note de curs / Sergiu Corlat. – Ch.: Centrul editorial -

poligrafic al USM, 2002. - 68p.

ISBN 9975-70-110-8

004.738.5 (075.8)

ISBN: 9975-70-110-8

2
&835,16
,QWRUGXFHUH 

&DSLWROXO 

 
     

&DSLWROXO 
 

&DSLWROXO 
     
    

&DSLWROXO 
        

&DSLWROXO 
     

&DSLWROXO 
        !  

&DSLWROXO 
"  
    

&DSLWROXO 
!  

&DSLWROXO 
#  
    

&DSLWROXO 
$ 

$QH[
       

3
4
,QWURGXFHUH

AceVWH QRWH VXQW FRQFHSXWH FD ED]D XQXL FXUV GH OHFLL SHQWUX

FHL FH vQFHS VWXGLHUHD SRVLELOLWLORU GH FUHDUH úL SUHOXFUDUH D HGLLLORU
HOHFWURQLFH vQ UHHDXD ,QWHUQHW 'RFXPHQWHOH SODVDWH vQ 5HHD VXQW
DFFHVLELOH XQXL QXPU HQRUP GH XWLOL]DWRUL FRQIRUP GDWHORU VWDWLVWLFH
vQ  QXPUXO FDOFXODWRDUHORU FRQHFWDWH OD 5HHD D GHSúLW QXPUXO
de 10 mln, iar în 2000 s-a dubODW 1XPUXO XWLOL]DWRULORU 5HHOHL vQ
DFHHDúL DQL D IRVW GH DSUR[LPDWLY    úL    
respectiv).
3HQWUX SXEOLFDUHD HOHFWURQLF D XQHL HGLLL vQ FRQWLQXDUH YRP
IRORVL QRLXQHD GH GRFXPHQW – ILúLHU FDUH FRQLQH XQ DQXPLW WLS GH
date) este VXILFLHQW SODVDUHD HL OHJDO SH XQ VHUYHU LQIRUPDLRQDO
FRQHFWDW OD 5HHD FDSDELO V WUDQVPLW úL V UHFHSLRQH]H LQIRUPDLL vQ
formatul (protocolul) http (HyperText Transfer Protocol). Totalitatea
VHUYHUHORU LQIRUPDLRQDOH FDUH SRVHG DFHDVW SURSULHWate a primit
QXPHOH :RUOG :LGH :HE ZZZ  ´SDLQJHQLú JOREDO´ 
3ODVDUHD GRFXPHQWXOXL vQ UHHD SUH]LQW XOWLPD HWDS D
SXEOLFULL OXL 3UHSURFHVDUHD SRDWH IL UHDOL]DW LQLLDO OD RULFH
FDOFXODWRU LQGLIHUHQW GH IDSWXO HVWH HO FRQHFWDW OD 5HHD VDX QX
PrelXFUDUHD SULPDU D WH[WXOXL HVWH SRVLELO vQ RULFH SURFHVRU GH WH[WH
DSRL vQ GHSHQGHQ GH VWUXFWXUD GRFXPHQWXOXL SRDWH IL UHDOL]DW
trecerea în formatul HTML sau completarea documentului cu
HOHPHQWH VSHFLDOH vQ DSOLFDLLOH VSHFLDOL]DWH

Ce este HTML

Termenul HTML (HyperText Markup Language) se traduce

GLQ HQJOH] FD /LPEDMXO GH PDUFDUH D KLSHUWH[WXOXL 3ULPD YHUVLXQH
+70/ D IRVW UHDOL]DW GH FRODERUDWRUXO /DERUDWRUXOXL (XURSHDQ SHQWUX
fizica particulelor elementare Tim Berners-Ly. Ca orice alt limbaj,
H70/ D FXQRVFXW R GH]YROWDUH FRQWLQX $VWIHO DX DSUXW
VSHFLILFDLLOH    (VWH LPSRUWDQW F RULFH YHUVLXQH XOWHULRDU
VXVLQH SUHOXFUDUHD GRFXPHQWHORU FUHDWH vQ YHUVLXQLOH SUHFHGHQWH
6SHFLILFDUHD FXUHQW D OLPEDMXOXL SRDWH IL RELQXW RULFkQG Se serverul
http://www.w3.org/.

5
Ce este necesar pentru studierea HTML

ÌQ JHQHUDO VWXGLHUHD +70/ SUHVXSXQH R DQXPLW H[SHULHQ

GH XWLOL]DUH D FDOFXODWRUXOXL FHO SXLQ OD QLYHOXO SURFHVRDUHORU GH WH[W
(Notepad, WordPad, Microsoft Word etc.), procesoarelor grafice
$GREH 3KRWR6KRS &RUHO 3KRWR3DLQW FXQRúWLQH vQ FODVLILFDUHD
FDUDFWHUHORU GLJLWDOH D QRLXQLORU GH FRGLILFDUH ELQDU úL FRG ELQDU DO
caracterelor. Aparatul soft necesar este minim – un procesor de text în
caUH YHL SUHOXFUD VXUVD GRFXPHQWXOXL úL XQ SURJUDP EURZVHU vQ FDUH
YHL UHDOL]D FRQWUROXO DVXSUD UH]XOWDWHORU SURJUDPULL vQ FDOLWDWH GH
browser standard poate fi folosit Microsoft Internet Explorer sau
1HWVFDSH &RPPXQLFDWRU $FHVWH GRX VLVWHPH GH QDYLJDUe sunt
IRORVLWH GH FLUFD  D XWLOL]DWRULORU GH UHHD 6XSOLPHQWDU GXS
DFXPXODUHD H[SHULHQHL GH FUHDUH D GRFXPHQWHORU HOHFWURQLFH YHL
SXWHD vQVXúL úL XQ VRIW VSHFLDOL]DW SHQWUX SURJUDPDUH +70/ FXP DU IL
de exemplu, Macromedia Flash.
În calitate dH LQVWUXPHQW KDUG SXWHL XWLOL]D RULFH FDOFXODWRU FX
VLVWHP RSHUDLRQDO :LQGRZV  VDX VXSHULRU GRWDW FX PRQLWRU FRORU
FDUH IXQFLRQHD] vQ UHJLP GH  FXORUL +LJKFRORU VDX 7UXHFRORU

7LSRORJLD SURLHFWULL SURFHVRDUHORU +70/

([LVW GRX SULQFLSLL de creare a documentelor HTML:

1. 7HKQRORJLD vQFKLV 6H XWLOL]HD] VLVWHPH GH WLSXO
WYSIWYG (Wtat You See Is What You Get) – ce
YH]L DFHHD úL YHL SULPL 0LFURVRIW )URQW SDJH :RUG
Netscape Editor). Utilizatorul nu are acces la sursa
documentului, - el vede doar rezultatul.
2. 7HKQRORJLD GHVFKLV  3URFHVRDUH +70/ SURSULX-zise.
8WLOL]DWRUXO vQGHSOLQHúWH UROXO GH SURJUDPDWRU –
FUHDUHD GRFXPHQWXOXL HVWH UHDOL]DW GLUHFW SULQ
PRGHODUHD VXUVHL úL XWLOL]DUHD LQVWUXFLXQLORU
limbajului.

6
&DSLWROXO 
6WUXFWXUD XQXL GRFXPHQW +70/ VLPSOX
'RFXPHQWHOH +70/ VXQW ILúLHUH WH[W RELúQXLWH FX H[WHQVLD KWPO
(în
sistemul UNIX *.htmll, iar în DOS – *.htm). Cel mai simplu


  
 



<HTML>
<HEAD>

Antet

</HEAD>

<BODY>

Corp

</BODY>

</HTML>
Un exemplu de document HTML cu struct 
 

prezentat mai jos:

Exemplul 1.1






   


   




7




 


       !  ! !"





#  !
# ! ! $%  & !
  '
 ( &' %
!
  !   )    "








Fig. 1 Exemplul 1.1 vizualizat în Internet Explorer


 -semne speciale utilizate pentru
formatarea documentului) sunt separate pe linii aparte doar pentru
        
         

          




   








 


       !  ! !"


8


# !*
# ! ! $%  & !
  '
 ( &' %
!
  !   )    "






!   "       

     -       # 
  
       $

  %   &'&  &(& )  
multe ori tagurile sunt par *     ' (  %
    % '+ (   *    &+&

       #*     –
  " HOHJH vQ DFHODúL IHO ([HPSOX ERG\! %2'<! úL
<Body> sunt identice.
0DL PXOWH WDJXUL FRQLQ vQ DIDU GH QXPHOH VX DWULEXWH –
HOHPHQWH FDUH SRDUW LQIRUPDLL VXSOLPHQWDUH GHVSUH DFHHD FXP
WUHEXLH V ILH SUHOXFUDW WDJXO ÌQ H[HPSOXO SURSXV DVHPHQHD DWULEXWH
lipsesc, dar vor fi introduse în compartimentelH XUPWRDUH

Taguri obligatorii

<html> ... </html> Tagul <html> deschide orice document HTML.

La fel, tagul </html> închide un document HTML.

<head> ... </head> $FHDVW SHUHFKH GH WDJXUL PDUFKHD] vQFHSXWXO úL

VIkUúLWXO ÄSULL GH VHUYLFLX´ D GRFXPentului. De cele mai multe ori
DFHVW FRPSDUWLPHQW FRQLQH SH OkQJ WLWOXO YH]L GHVFULHUHD WDJXOXL
<title>) documentului mai multe date de serviciu, despre care vom
YRUEL vQ FDSLWROHOH XUPWRDUH

<title> ... </title> 7RDW LQIRUPDLD SODVDW vQWUH WDJXULOH WLWOH! úL

WLWOH! YD IL LQWHUSUHWDW FD WLWOXO GRFXPHQWXOXL 0DMRULWDWHD
sistemelor browser vor include titlul în titlul ferestrei la deschiderea
documentului, iar în cazul tiparului vor plasa acest titlu pe fiecare
SDJLQ D GRFXPHQWXOXL WLSULW ÌQ JHQHUDO SHQWUX WLWOX VH UHFRPDQG R
VHFYHQ GLQ QX PDL PXOW GH  VLPEROXUL

9
<body> ... </body> $FHDVW SHUHFKH LQGLF vQFHSXWXO úL UHVSHFWLY
VIkUúLWXO FRUSXOXL FRQLQXWXOXL GRFXPHQWXOXL +70/

<H1> ... </H1> — <H6> ... </H6> Tagurile de tip <Hi> (i — R FLIU
GH OD  OD  GHVFULX VXEWLWOXUL GH  QLYHOH GLIHULWH GXS GLPHQVLXQHD
caracterelor). Subtitlul de nivel H1 este cel mai mare, respectiv de
nivel H6 – FHO PDL PUXQW

<P> ... </P> Descrie un paragrag. Totul ce este inclus între o pereche
3! úL 3! YD IL FRQVLGHUDW FD XQ VLQJXU SDUDJUDI

7DJXULOH +L! úL 3! SRW FRQLQH DWULEXWXO DX[LOLDU $/,*1

(aliniere), de exemplu:

<H1 ALIGN=CENTER> alinierea subtitlului pe centru </H1>

sau
3 $/,*1 5,*+7! 3DUDJUDI DOLQLDW GXS PDUJLQHD GUHDSW P>
9RP WRWDOL]D DFXP FHOH VWXGLDWH PDL VXV vQ XUPWRUXO H[HPSOX

Exemplul 1.2






   


  
! "    ! ! 






#
$

  % 


 &      ! !  
! "


' !   ! ( !     )       &*

'

' 
+ (  !+
'

' &    +
+ 
'

#
$



10
 $FXP FXQRDúWHL VXILFLHQW SHQWUX D Frea documente cu o
VWUXFWXU HOHPHQWDU FH FRQLQ WH[W vQ IRUPDWXO +70/ ÌQ FHOH FH
XUPHD] YRP GH]YROWD DFHVWH FXQRúWLQH 9RP vQFHSH FX SUHOXFUDUHD
paragrafelor.

Fig. 2 Exemplul 1.2 vizualizat în browserul Intermet Explorer

11



 
Taguri unitare (neperechi)

Acest compartiment este destinat studierii tagurilor care nu se

 
 
 
   
 
  

 -numitele &-  
   
 

  

 

minuscule.

<BR> 
 
    

 
  

 
 

! 


  
 

 " #     



versurilor, notelor etc. (vezi exemplul 2.1)




  






 

   
  

+ DOLJQ ULJKW! )HPHLD" 0U GH FHDUW +!
3! )HPHLD" &H PDL HVWH úL DFHVW PU GH FHDUW %5! &X PDVFD HL
GH FHDU úL PLQWHD HL GHúDUW%5! &XQIULFRúDWH SDWLPL vQ ILUH GH
FRSLO%5! &X IDSWD IU QRLP FkQG FUXG FkQG FX PLO %5! $
YLVXULORU SURSULL HWHUQ MXFULH"  3!
ERG\! KWPO>

Fig. 3 Exemplul 2.1

vizualizat în browserul
Internet Explorer

12
<HR>
 
    

Tagul poate avea atribute auxiliare

SIZE -     
WIDTH -         
sau, în lipsa semnului % - în pixeli. Exemplul 2.2  e o
   
KWPO! KHDG!
WLWOH!([HPSOXO WLWOH!
KHDG! ERG\!
+!2 FROHFLH GH OLQLL RUL]RQWDOH +!
+5 6,=(  :,'7+ !%5! +5 6,=(  :,'7+ !%5!
+5 6,=(  :,'7+ !%5! +5 6,=(  :,'7+ !%5!
+5 6,=(  :,'7+ !%5! +5 6,=(  :,'7+ !%5!
ERG\! KWPO!

Fig. 4
Linii în
documentele
HTML.
:5
exemplul 2.2

13
&-FRQVHFXWLYLWL

              

      -    !  
  "      #
În limbajul HTML aceasta se poate realiza cu ajutorul &-
 $ %           -
 $&
'(    $    )
"<" - &lt;
">" - &gt;
"&" (ampersand) &amp;
Ghilimelele(") se codific - &quot;

Pentru escape- $       )

1. Fiecare consecutivitate se scrie numai cu minuscule
2.
      $    ;

*   !      $ (     cu


+,,     -./ $      $  
       0 

'(           

      +      
     1-conse$)

 - &#258;  - &#259; Î - &Icirc; î - &icirc;

ù - &#350; ú - &#351;  - &#354; - &#355;
 - &Acirc; â - &acirc;

Exemplul 2.3:

 




   
     
  
!
!


14

"
   
     
  
!"

"
#
! $  "#
!"

"
%
! $  "%
!"

"
 &
! $  "&
!"

"
 
! $  "
!"

"
 '
! $  "'
!"

"
 
! $  "
!"

"
 (
! $  "(
!"

"
 
! $  "
!"

"
 )
! $  ")
!"

"
 
! $  " 
!"

!
*
!

Alte metode de codificare a semnelor diacritice române, utilizate

pentru documentele cu un volum mare de text vor fi studiate în
capitolul 6.

Comentarii


 



 

 
situat între <!--  --     

introducerea în textul documentului HTML a unor comentarii,
FH QX IRU IL DILúDWH SH HFUDQ

<!--Acesta e un comentariu -->

Formatarea caracterelor

 
   

         
Primul tip – direct: Pentru un careva fragment se ind
  



  
  

 

 
K  al doilea tip – prin stiluri  
 

  



fragmentelor de text. Vom exemplifica aceste metode.

Stiluri fizice


 
 

   

 
 
  
modificare caracterelor dintr-un anumit fragment.
15
!  "      
 

 
  #$% 
#$% 
 
   
 &  
 
 #'% 
#'%
va fi înclinat.
Un sens    
 #% 
#%  

  
  
  
 


 
 
 


de scris –   

 

         

perechea de taguri <FONT> ... </FONT>  




  
 
    
  
(  #&)*%   
  
 

principalele dintre ele fiind:
FACE=”[nume caracter]” – 
    
 + ,
utilizat în fragment 


 
 
  
  
    


    



  
  

  -  .    

 
 
 
 
   le vor fi
înlocuite de caracterele standard pentru sistemul local (de obicei
Times, Verdana sau Arial pentru Windows, Helvetica pentru UNIX.)
COLOR=[numele sau codul culorii] – 
  
 
 

  
  

  te în
capitolul 5.
SIZE=[indicele dimensiunii sau +|- ] – dimensiunea
  /
  0 
1 -     




  
   2 +    



 03 , !  

 


 4|- are loc

5
      

  

precedent.
-       

 

 


 + 
    
    
   
deci nu poate fi garantat rezultatul

  


  

diferite medii)

Formatarea Tagurile Comentarii

Semigras <B> </B>
Italic <I> </I>
Subliniat <U> </U> Deseori nu este


16
Taiat <STRIKE> </STRIKE> Deseori nu este


Taiat <S> </S>
Indice superior <SUP> </SUP>
Indice inferior <SUB> </SUB>
Masina de tapat <TT> </TT> Caracter de
masina
Formatat <PRE> </PRE> pastreaza
formatarea cum
este
Latime (caractere) <PRE WIDTH=?> </PRE> latimea in
simboluri
Centrarea <CENTER> </CENTER> si pentru grafica
Licaritor <BLINK> </BLINK> nu se recomanda
Dimensiunea <FONT SIZE=?> de la 1 la 7
caracterelor </FONT>
Modificarea <FONT SIZE=”+|-?”>
dimensiunii </FONT>
caracterului
Dimensiunea de <BASEFONT SIZE=?> de la 1 la 7 (de
baza  2,
Selectarea <FONT FACE=”***”>
caracterului </FONT>
Culoarea <FONT
caracterului COLOR=”#$$$$$$”>
</FONT>

Stiluri logice

-  





   
     

   
      
  

 lui. Diferite

   
  

  

 6  
.    


  
     
       
!
  


 

 
  

  "
17
<EM> ... </EM> text accentuat

<STRONG> ... </STRONG> text puternic accentuat

<CODE> ... </CODE>     

   
surselor documentelor

<SAMP> ... </SAMP> -     +, 6   

   

  
    
<KBD> ... </KBD> de la keyboard (eng.) —  6  
 

     

    
<VAR> ... </VAR> de la variable — 

 6   
a scrie numele variabilelor.

Exemplul 2.3. / 

  
  

 

 

logice cu ajutorul exemplului de mai jos:




  






        
  


!  "   
     #
 

$% %
$ "
&%#
& % 
' % 
'
( %   
%      
   

))*   

  +
))
 

   %  % ,
 


 -
  .  %% / 

$0

1)0234 1)0234 -
  . %  %% / 

1)0234
$0

52(52( -   
 

52(
$0

1! 1! -
  . %  /  
1! 
$0

6$(6$( /
  . 7 
-  % 
6$(
$0

8!08!0 /
  . #   / #  
8!0
 





18





   
  
Limbajul HTML Y SHUPLWH V VWUXFWXUDL SDUDJUDIHOH GH WH[W
incluzând în ele liste cX QXPHURWDUH VDX IU HD VDX GHSODVkQG
PDUJLQHD VWkQJ D SDUDJUDIXOXL ID GH OLQLD VWkQJ GH ED] D
documentului.

 
  
  

Textul inclus între tagurile <UL> úL </UL>, este perceput ca o
OLVW IU QXPHURWDUH Fiecare element al listei începe cu tagul
nepereche <LI>. 'H H[HPSOX SHQWUX D RELQH OLVWD:
• Jurnalistica;
• Comunicare;
• Biblioteconomie

9D IL QHYRLH GH XUPWRDUHD VHFYHQ HTML:

<UL>
<LI>Jurnalistica;
<LI>Comunicare;
<LI>Biblioteconomie
</UL>
Pentru o amplasare PDL FRPSDFW D HOHPHQWHORU OLVWHL IU QXPHURWDUH
vom folosi în tagul <UL> atributul COMPACT:

<UL COMPACT> </UL>

6FKLPEDUHD HOHPHQWXOXL SHQWUX PDUFDUH VH UHDOL]HD] SULQ
atributul TYPE= DISC | CIRCLE | SQUARE la tagul <UL> (pentru
WRDW OLVWD úL OD WDJXl <LI> pentru elementele, începând cu cel curent
<UL TYPE=DISC> ... </UL> <UL TYPE=DISC> ... <LI
TYPE=SQUARE> </UL>

Liste numerotate: <OL> ... </OL>

/LVWHOH QXPHURWDWH VH RELQ H[DFW OD IHO FD FHOH IU
QXPHURWDUH DWkW F vQ ORFXO PDUFKHULORU OD vQFHSXWXO ILHFUXL HOHPHQW
DO OLVWHL YD DSDUH FLIUD FRUHVSXQ]WRDUH

19
 $VWIHO VHFYHQD
<OL>
<LI>Jurnalistica;
<LI>Comunicare;
<LI>Biblioteconomie
</OL>
YD JHQHUD XUPWRUXO IUDJPHQW +70/
1. Jurnalistica;
2. Comunicare;
3. Biblioteconomie

&D úL vQ FD]XO OLVWHORU IU QXPHURWDUH YRP RELQH R

DPSODVDUH PDL FRPSDFW D HOHPHQWHORU SULQ DWULEXWXO &203$&7 vQ
tagul <OL>. Tipul de numerotare poate fi indicat prin atributul <OL
7<3( $ _ D _ , _ L _  ! SHQWUX WRDW OLVWD úL /, 7<3( $ _ D _ , _ L _  !
pentru elementele vQFHSkQG FX FHO FXUHQW ([LVW FLQFL WLSXUL GH
QXPHURWDUH SULQ HOHPHQWH DOH DOIDEHWXOXL 0DMXVFXOH úL PLQXVFXOH FX
QXPHUH URPDQH XWLOL]kQG OLWHUH PDUL úL PLFL FX QXPHUH DUDEH
Numerotarea listei poate starta automat (de la A, a, I, i, 1) sau de la un
QXPU VSHFLILFDW GH QRL SULQ DWULEXWXO 2/ 67$57 "! SHQWUX WRDW
lista) sau <LI VALUE=?> (pentru elementele, începând cu cel curent)

    
  


/LVWHOH GH GHILQLLL DX R VWUXFWXU GHRVHELW GH FHOHODOWH WLSXUL
de liste. PenttrX PDUFDUHD HOHPHQWHORU OLVWHORU GH GHILQLL VH YRU IRORVL
tagurile <DT> (de la definition term — QRLXQH GHILQLW úL <DD>
(de la definition definition — GHILQLLD QRLXQLL 9RP FHUFHWD XQ
exemplu )LH F QH HVWH GDW XUPWRUXO IUDJPHQW GH WH[W HTML:
<DL>
<DT>HTML
''!1RLXQHD +70/ +\SHU7H[W 0DUNXS /DQJXDJH VH GHVFLIUHD]
ca “Limbaj de marcare a hipertextelor. Prima versiune a limbajului
HTML D IRVW HODERUDW GH FRODERUDWRUXO /DERUDWRUXOXL (XURSHDQ GH
)L]LF D SDUWLFXOHORU (OHPHQWDUH 7LP %HUQHUV-Ly.
<DT>Document HTML

20
<DD>)LúLHU WH[W FX H[WHQVLH KWPO ÌQ DOWH VLVWHPH RSHUDLRQDOH
GHQXPLUHD ILúLHUXOXL H vQVRLW GH H[WHQVLD KWPOO VDX KWP
</DL>

)UDJPHQWXO YD DSDUH SH PRQLWRU vQ PRGXO XUPWRU

HTML
1RLXQHD +70/ +\SHU7H[W 0DUNXS /DQJXDJH VH
GHVFLIUHD] FD ³/LPEDM GH PDUFDUH D KLSHUWH[WHORU Prima
versiune a limbajului HTML D IRVW HODERUDW GH FRODERUDWRUXO
/DERUDWRUXOXL (XURSHDQ GH )L]LF D SDUWLFXOHORU (OHPHQWDUH
Tim Berners-Ly.
Document HTML
)LúLHU WH[W FX H[WHQVLH *.html (În alte sistemH RSHUDLRQDOH
GHQXPLUHD ILúLHUXOXL H vQVRLW GH H[WHQVLD KWPOO VDX KWP

La fel ca tagul <LI>, tagurile <DT> úL <DD> sunt nepereche.

ÌQ FD]XO FkQG QRLXQHD GHILQLW HVWH VXILFLHQW GH VFXUW SRDWH IL XWLOL]DW
formatul listei de definire <DL COMPAC7! FDUH PLFúRUHD]
GHSODVDUHD WH[WXOXL GHILQLLHLID GH PDUJLQHD VWkQJ.

Liste incluse

2ULFH HOHPHQW DO XQHL OLVWH SRDWH FRQLQH vQ VLQH OLVWH LQWHJUDOH

VXERUGRQDWH 1XPUXO GH QLYHOH SHQWUX OLVWHOH VXERUGRQDWH QX HVWH
OLPLWDW GDU WUHEXLH V LQHL cont de dimensiunile fizice ale paginilor.
Acest tip de liste este des utilizat pentru generarea cuprinsurilor,
planurilor etc.
3HQWUX D JHQHUDOL]D FXQRúWLQHOH QRDVWUH GHVSUH OLVWH YRP JHQHUD
exemplul 3.1:




  







      
 





! " # 
!

#  " #   
# $ #

   
  % # #  &
21

'

(# 

(# )

(# 

'


!  # 
!

#   #     $ #
  
 #* % # #&

+

(# 

(# )

(# 

+


!

"#
!

, 
      
 
#-
 #
"     .# 

/  " # # .#  -
 # "  $
  
 

/

/'# #     ##      * " 0# 
 $    .#
#  % $
 #*
/

 






Textul preformatat: <PRE> ... </PRE>

ÌQ XQXO GLQ FDSLWROHOH SUHFHGHQWH DP YRUELW GHVSUH DFHHD F OLPEDMXO
+70/ LJQRU VSDLLOH H[FHVLYH úL VHPQHOH GH VIkUúLW D UkQGXOXL ([LVW
WRWXúL R H[FHS LHtextul marcat de tagurile <PRE> úL </PRE> (de la
preformatted — formatat prealabil), va fi expus de browser pe monitor
— H[DFW DúD FXP D IRVW VFULV FX WRDWH VSDLLOH VHPQHOH GH WDEXODUH úL
de trecere din un rând în altul.De cele mai multe ori acest stil se
XWLOL]HD] SHQWUX FUHDUHD WDEHOHORU VLPSOH.

Text deplasat: <BLOCKQUOTE> ... </BLOCKQUOTE>

Textul amplasat între tagurile <BLOCKQUOTE> úL

</BLOCKQUOTE> YD IL GHSODVDW VSUH GUHDSWD ID GH OLQLD VWkQJ GH
ED] D SDUDJUDIXOXL

22



      
Lincajul

În capitolele precedente am vorbit destul de mult despre

SRVLELOLWLOH GH PDUFDUH D WH[WXOXL vQ ILúLHUHOH +70/ 6 QX XLWP
vQV úL GH SRVLELOLWLOH OLPEDMXOXL GH SUHOXFUDUH D KLSHUWH[WXOXL

Ce este hypertextul? Este un text, care, spre deosebire de

WH[WXO FODVLF FDUH VH FLWHúWH FRQVHFXWLY SHUPLWH WUHFHUHD úL FLWLUHD
VHFYHQ LDO 'XS DFHVW SULQFLSLX VXQW RUJDQL]DWH VLVWHPHOH +(/3
SHQWUX PDMRULWDWHD SURGXVHORU VRIW úL GHVLJXU GRFXPHQWHOH +70/ FX
VWUXFWXU GHVIúXUDW.

În documentele HTML trecerea de la un fragment al textului

OD DOWXO VH UHDOL]HD] SULQ WDJXULOH :

<A HREF="[adresa de trecere]"> IUDJPHQW GH WH[W HYLGHQLDW </A>

Parametrul [adresa de trecere] poate fi de câteva tipuri. Cel mai

simplu tip — numele altui document HTML la care se face
trecerea.

)RUPD JHQHUDO $ +5() QXPH ILúLHU!Comentariu</A>

Exemplu: <A HREF="index.html">Trecere la index</A>

Acest fragment de HTML WH[W YD JHQHUD DSDULLD vQ GRFXPHQW
D XQXL IUDJPHQW PDUFDW GH UHJXO - albastru,subliniat ex: Trecere la
index). /D DSVDUHD EXWRQXOXL VWkQJ PRXVH SH DFHVW IUDJPHQW VH YD
UHDOL]D WUHFHUHD OD ILúLHUXO index.html.
5HPDUF 'DF vQ DGUHVD GH WUHFHUH QX HVWH LQGLFDW FDOHD OD
ILúLHU FXWDUHD DGUHVHL VH YD IDFH GRDU vQ GRVDUXO FXUHQW 'DF vQ
DGUHVD GH WUHFHUH QX HVWH LQGLFDW VHUYHUXO FXWDUHD VH YD UHDOL]D SH
VHUYHUXO FXUHQW 8UPHD] R FRQFOX]LH LPSRUWDQW 'DF DL SUHJWLW
SHQWUX SXEOLFDLH XQ JUXS GH GRFXPHQWH +70/ FX OLQFDMH UHFLSURFH

23
QXPDL GXS QXPH úL FDUH VXQW VWRFDWH vQ DFHODúL GRVDU – YH L RELQH
DFHODúL PRG GH OXFUX D ORU OD FRSLHUHD GRVDUXOXL SH RULFH DOW FDOFXODWRU
vQ UH HD ORFDO VDX ,QWHUQHW 'H DLFL UH]XOW úL SULQFLSLXO GH ED] DO
SUHJWLULL FROHF LLORU GH GRFXPHQWH +70/ pentru publicare în Internet:
HODERUDUHD úL DMXVWDUHD GRFXPHQWHORU úL OHJWXULORU VH YD UHDOL]D  IU
5H HD &ROHFLD SRDWH IL DPSODVDW SH ,QWHUQHW GRDU GXS ILQDOL]DUHD
etapei de elaborare.
Un DOW WLS GH DGUHVDUH HVWH R SR]LLH LQWHULRDU VSHFLILFDW
(fie în documentul curen, fie în alt document HTML). Pentru a realiza
DFHVW WLS GH WUHFHUH SR]LLD GH DGUHVDUH WUHEXLH PDUFDW SULQ R DQFRU 
SXQFW GH UHSHU $QFRUD VH GHFODU vQ IHOXO XUPWRU

$ 1$0( QXPH DQFRU!Comentariu</A>

iar trecerea:
<A HREF=QXPH ILúLHUQXPH DQFRU!Comentariu</A>

Vom cerceta un exemplu.

)LH F GLQ ILúLHUXO WUHEXLH V UHDOL] P WUHFHUH 1.html la fragmentul
Ä6IkUúLWXO WUHFHULL´ GLQ ILúLHUXO 2.html ()LúLHUHOH VH DIO vQ DFHODúL
catalog). 0DL vQWkL VH FUHD] DQFRUD vQ ILúLHUXO 2.html:
<A NAME="AAA">6IkUúLWXO WUHFHULL$! /D DFHDVW HWDS vQ
documentul 2.html fragmentul “6IkUúLWXO WUHFHULL´ QX HVWH HYLGHQLDW vQ
raport cu restul textului
/D XUPWRUXO SDV vQ ILúLHUXO 1.html (sau oricare altul) vom defini
adresarea la ancora din 2.html:
<A HREF="2.html#AAA">Trecerea la ancora din 2.html AAA</A>
Pentru trecerea la un loc fix în LQWHULRUXO DFHOXLDúL GRFXPHQW HVWH
VXILFLHQW V GHILQLP DQFRUD OD HO vQ PRGXO XUPWRU:

$ 1$0( QXPH DQFRU!Comentariu</A>

Trecerea:
$ +5() QXPH DQFRU">Comentariu</A>
Exemplu:
<A HREF="#AAA">Trecerea la ancora AAA</A>

24
 Utilizarea trecerilor în interiorul documentelor este foarte
FRPRG vQ FD]XO FUHULL GRFXPHQWHORU GH YROXP PDUH /D vQFHSXWXO
SDJLQLL VH FUHD] FXSULQVXO HL IRUPDW GLQ WUHFHUL OD DQXPLW e ancore
SODVDWH OD vQFHSXWXO ILHFUHL VHFLL D GRFXPHQWXOXL
Note: 8WLOL]DL SHQWUX GHQXPLULOH DQFRUHORU GRDU OLWHUH DOH DOIDEHWXOXL
HQJOH] UHVSHFWkQG SHQWUX WRDWH DSDULLLOH QXPHOXL DQFRUHL DFHODúL PRG
de scriere a lui: majoritatea sistemelor browser diIHUHQLD]
PDMXVFXOHOH úL PLQXVFXOHOH GLQ QXPHOH DQFKRUHORU
ÌQ DIDU GH DGUHVULOH OD GRFXPHQWHOH +70/ VXQW DFFHSWDWH úL
DGUHVUL OD DOWH WLSXUL GH GRFXPHQWH 'DF GH H[HPSOX FROHF LD GH
GRFXPHQWH FRQLQH R ELEOLRWHF GH ILúLHUH DUKLYH LPDJLQL HWF S entru
care e permis transferul la cererea clientului pe discul lui, activarea
WUDQVIHUXOXL R SXWHL UHDOL]D SULQ

<A HREF="ftp://<nume server>/<cale directory>/ <nume

ILúLHU!! Comentariu</A>
Exemplu
$ +5() IWSVHUYHUGLUHFWRU\ QXPH ILúLHU!! CopiDL
ILúLHUXO</A>

$FHDVW FRQVHFXWLYLWDWH LQFOXV vQ GRFXPHQWXO +70/ YD DFWLYD

SURWRFROXO GH WUDQVIHU DO ILúLHUHORU úL YD UHDOL]D FRSLHUHD ILúLHUXOXL
QXPH ILúLHU! GLQ GRVDUXO FDOH GLUHFWRU\! SODVDW SH VHUYHUXO QXPH
server> pe discul local al clientului
.
<A HREF="mailto:user@mail.box">Comentariu</A>

'DF YD IL DFWLYDW R DVHPHQHD DGUHVDUH SH FDOFXODWRUXO ORFDO DO

FOLHQWXOXL VH YD DFWLYD SURJUDPXO OXL SRúWDO VHFLD GH WULPLWHUH D
PHVDMHORU ÌQ FRPSDUWLPHQWXO 7R &XL YD IL LQFOXV DGUHVD
user@mail.box.
Vom JHQHUDOL]D FXQRúWLQHOH GHVSUH OHJWXUL FX DMXWRUXO
exemplului 4.1.





   
25

 











! "#$ %&$ $" ' "(" &" " " %$&

)%  "
*+,-.,  &%

 /
 

 0 $12"" 1 "1'" '3 )% 4

*+,'5666$7"&$ 11%889%', :.% %
("  $7" 889 ; '$"
+
 /  $$&$
+ 
 

   & 1   1"# )% 4

*+,"$51&$"<"%, "$
 /
 

  0 " & %$&

*+= *0 " &
 /
 

 




26



   

Gama de culori în documentele HTML

/D IHO FD PDMRULWDWHD DOWRU VLVWHPH OLPEDMXO +70/ Y SHUPLWH

V SUHOXFUDL FXORULOH HOHPHQWHORU GRFXPHQWXOXL SHQWUX D-i atribui un
aspect elegant. PHQWUX DWULEXLUHD úL SUHOXFUDUHD FXORULORU VH IRORVHúWH
XQ VHW VSHFLDO GH DWULEXWH DSOLFDWH OD WDJXULOH GH ED] 'H FHOH PDL
PXOWH RUL vQV QX SXWHL IL VLJXUL GH UH]XOWDWXO DILúULL FXORULORU SH
PRQLWRUXO XWLOL]DWRUXOXL GLQ PRWLYXO F HOH SRW IL PRGLILFDWe de
SUHVHWULOH VLVWHPXOXL EURZVHU LQVWDODW SH FDOFXODWRUXO OXL
$WULEXWHOH GH VWDELOLUH D FXORULL VXQW XUPWRDUHOH
Bgcolor - GHWHUPLQ FXORDUHD IRQXOXL GRFXPHQWXOXL.
Text –culoarea textului
link - culoarea fragmentului de text, care corespunde unei treceri în
document sau în afara lui.
Vlink - culoarea fragmentului de text, care corespunde unei treceri în
GRFXPHQW VDX vQ DIDUD OXL FDUH D IRVW GHMD SUHOXFUDW.
alink - culoarea fragmentului de text, care corespunde unei treceri în
document sau în DIDUD OXL vQ PRPHQWXO WUHFHULL FXUVRUXOXL SH VXSUDIDD
ei.
&XORDUHD VH LQGLF SULQ QXPHOH VX SHQWUX FXORULOH GH ED]
Red, Blue, Green, etc.) sau prin un cod din 6 simboluri câte 2 pentru
ILHFDUH GLQ FXORULOH SULPDUH DOH VWDQGDUGXOXL 5*% URúX YHUGH
aOEDVWUX PDUFkQG JUDGXO LQWHQVLWLL FXORULL GH OD   OD ))  ÌQ
JHQHUDO SHQWUX LQGLFDUHD LQWHQVLWLL FXORULL SULPDUH VH XWLOL]HD] FRGXO
KH[D]HFLPDO DO XQXL QXPU ]HFLPDO vQWUH  úL  &XORULOH PL[WH VH
IRUPHD] SULQ ÄDPHVWHFXO´ FXORULORU SULPDUH 1XDQHOH GRULWH SRW IL
RELQXWH SULQ PRGLILFDUHD LQWHQVLWLORU FXORULORU SULPDUH 2 PHWRG
VLPSO GH GHWHUPLQDUH D LQWHQVLWLL GRULWH D FXORULL HVWH RELQHUHD
QXDQHL vQ XQXO GLQ VLVWHPHOH JUDILFH $GREH 3KRWR 6KRS &RUHO 3KRWR
3DLQW úL VWDELOLUHD gradului de intensitate a culorilor primare în acest

27
VLVWHP 'XS VWDELOLUHD LQWHQVLWLL SHQWUX FXORULOH SULPDUH FDOFXODL
FRGXO KH[D]HFLPDO DO LQWHQVLWLORU úL XWLOL]DL-l în documentul HTML.
ÌQ XQHOH FD]XUL SXWHL XWLOL]D QXPHOH FXORULL GH ED] SUHIL[ate
de light sau dark SHQWUX D RELQH QXDQHOH PDL GHVFKLVH VDX PDL
vQWXQHFDWH DOH FXORULL IU D H[HFXWD H[SHULPHQWDUHD SULQ FRGXUL
hexazecimale.

Atributele de gestionare a culorilor se includ în tagul <BODY>:

<BODY bgcolor=#FFFFFF >
Culoarea fonului. ,QWHQVLWDWHD FXORULL URúLL YHU]L DOEDVWUH HVWH
DFHHDúL — FF (255). Rezultatul — FXORDUHD DOE.
<BODY text=#000000 >
Culoarea textului. ,QWHQVLWDWHD FXORULL URúLL YHU]L DOEDVWUH HVWH DFHHDúL
— 00 (0). Rezultatul — FXORDUHD QHDJU.
<BODY link=#0000FF >
Culoarea unui link. Pentru culoarea DOEDVWU LQWHQVLWDWHD HVWH — FF
(255), SHQWUX YHUGH úL URúX — 00 (0). Rezultat — FXORDUHD DOEDVWU.

ÌQ XQHOH FD]XUL vQ DIDU GH FXORULOH XQLIRUPH GHILQLWH GLUHFW

SRDWH IL IRORVLW úL XQ IRQ ED]DW SH LPDJLQH tapet). Imaginea este de
RELFHL GH GLPHQVLXQL PLFL úL HVWH PXOWLSOLFDW GH VLVWHPXO EURZVHU SH
WRDW VXSUDIDD GRFXPHQWXOXL 3HQWUX D HYLWD ³UXSWXULOH´ GH IRQ
XUPHD] V VHOHFWDL LPDJLQL FDUH DX R VWUXFWXU VLPHWULF )RUPDWXO
grafic recomandat pentru imaginile tapet este GIF sau JPG. Anexarea
tapetului se va realiza prin atributul background="nume fisier
imagine" în tagul <BODY>.
(VWH LPSRUWDQW IDSWXO F IRQXO XQLIRUP VDX WDSHW QX VH
LPSULP vQ FD]XO WLSDUXOXL SH KkUWLH 'LQ DFHVW PRWLY XUPHD] V
evitaL XWLOL]DUHD WH[WXOXL GH FXORDUH DOE
ÌQ FDOLWDWH GH H[HPSOH SHQWUX DFHVW FDSLWRO SXWHL XWLOL]D
GRFXPHQWHOH SURSXVH vQ FDSLWROXO  DO DFHVWHL OXFUUL

28

 
       
ÌQ JHQHUDO DQWHWXO GRFXPHQWXOXL QX HVWH Y]XW GH utilizator,
GDU FRQLQH XQHOH HOHPHQWH XWLOH SHQWUX GRFXPHQWXO SURSULX-zis.
$QWHWXO FRQLQH XQ VHW YROXPXO OXL QX HVWH OLPLWDW GH
PHWDLQVWUXFLXQL
<META NAME="description" CONTENT="Documentul contine
informatii din domeniul istoriei ">

Aceast 0(7$ LQVWUXFLXQH GHWHUPLQ YDULDELOD description, care

FRQLQH R GHVFULHUH VXFFLQW D GRFXPHQWXOXL 0DMRULWDWHD VLVWHPHORU GH
FXWDUH VFDQHD] UHVXUVHOH ,17(51(7 FXWkQG vQ GRFXPHQWH DFHDVW
YDULDELO R SOVDHD] vQ ED]HOH VDOH GH GDWH úL WUDQVPLW LQIRUPDLD
GHVSUH VXUVD UHVSHFWLY OD DSDULLD FHUHULORU GH FXWDUH Astfel se
UHDOL]HD] SURFHVXO GH FXWDUH SH VHUYHUHOH google.com, rambler.ru,
altavista.com, yandex.com etc.

<META NAME="keywords" CONTENT="Internet, HTML,

WWW, hipertext, manual">

META-LQVWUXFLXQHD GHILQHúWH YDULDELOD keywords, FH FRQLQH

FXYLQWHOH FKHLH FDUH GHVFULX GRFXPHQWXO 3URFHVXO GH FXWDUH vQ
VLVWHPHOH VSHFLDOL]DWH VH UHDOL]HD] GXS FRQLQXWXO DFHVWHL YDULDELOH
Alt grup de META-LQVWUXFLXQL GHWHUPLQ HFKLYDOHQWHOH
protocolului de transmitere a hipertextului. De exemplu:

<META HTTP-EQUIV="Content-type" CONTENT="text/html;

charset=windows-1251">

%URZVHUXO YD LQWHUSUHWD GDWHOH UHFHSLRQDWH FD WH[W HTML în

codificare Windows/1251.

<META HTTP-EQUIV="Content-type" CONTENT="text/html;

charset=koi8-r">

29
%URZVHUXO YD LQWHUSUHWD GDWHOH UHFHSLRQDWH FD WH[W HTML în
codificare koi8-r.

<META HTTP-EQUIV="Refresh" CONTENT="[timp];

URL=[DGUHV GRFXPHQW]">

META-LQVWUXFLXQHD VH LQWHUSUHWHD] DVWIHO GDF OD H[SLUDUHD

intervalului de timp [timp] vQ VHFXQGH GXS vQFUFDUHD GRFXPHQWXOXL
curent utilizatorul nu trece la alt document HTML, va începe
vQFUFDUHD DXWRPDW D GRFXPHQWXOXL GDW GH [DGUHV GRFXPHQW].
Exemplu

<META HTTP-EQUIV="Refresh" CONTENT="30;

URL=http://www.usm.md>

'DF vQ  VHFXQGH GXS vQFUFDUHD GRFXPHQWXOXL FXUHQW QX

YD DSDUH QLFL R DFLXQH GLQ SDUWHD XWLOL]DWRUXOXL YD vQFHSH vQ PRG
DXWRPDW vQFUFDUHD SDJLQLL http://www.usm.md
META-instrucLXQHD Refresh SRDWH IL IRORVLW vQ FD]XULOH
FkQG DL GHSODVDW SDJLQD GH SH XQ VHUYHU SH DOWXO 3HQWUX D QX SVWUD R
FRSLH D SDJLQLL SH VHUYHUXO YHFKL SXWHL OVD XQ PHVDM VFXUW GHVSUH
UHDGUHVDUH FDUH YD FRQLQH LQVWUXFLXQHD Refresh úL QRXD DGUHV D
documentului.
'DF vQ FDOLWDWH GH [QXPH ILúLHU] YRP LQGLFD XQ ILúLHU GH VXQHW
peste [timp] VHFXQGH GXS vQFUFDUHD GRFXPHQWXOXL HTML va începe
pomparea , iar apoi derularea pe calculatorul utilizatorului (FX FRQGLLD
F VLVWHPXO EURZVHU XWLOL]DW GH HO VXVLQH DFHVW IRUPDW GH VXQHW) a
ILúLHUXOXL FX GDWH VRQRUH. Este comod de utilizat în calitate de apeluri
de salut.
Exemplul care va urma (exemplul 6.1) este format din mai
PXOWH FLQFL ILúLHUH +70/ 9RP RUJDQL]D XQ VOLGH-show al acestor
ILúLHUH XWLOL]kQG PHWD LQVWUXFLXQHD 5HIUHVK ILúLHUHOH VH YRU QXPL
e0009.html, e0009a.html e0009b.html, eFKWPO úL e0009d.html),
VWRSDUHD SURFHVXOXL GHPR SRDWH IL UHDOL]DW IRORVLQG RULFDUH GLQ
OLQFXULOH GH WUHFHUH VSUH ILúLHUXO GH VWDUW VDX ILQDO.

30



 
  



        !" 

#$% 
& 
! !    # ' (   ) 
!  !* ' +  

 ) ,  - ) , &
+ ./)  0 1/2
 2(   3+
#$%
45  
  
  

45
 
  



4 +678/21
2 9$::/2;< 71/
' 2

#$%
( !"  !) ! 4 #1
=  4  )  1
 

! =/>
+'?  ' #  ,=  @ ' 
  ,
@ +

! 
+0 1/2
 21,  ) A
 1/2
 2( 
 3+
#$%
45

 
  

45
 
'  


'
4 +678/21
2 9$::/2;< 71/
) 2

#$%
( !"  !) ! 4 #1
=  4  )  1
 

! =/>
+'?  &' )  ) @ '   ,=  @'

  ,
+

31

! 
+0 1/2
 21,  ) A
 1/2
 2( 
 3+
#$%
45

 
'  

45
 
)  


)
4 +678/21
2 9$::/2;< 71/
 2

#$%
( !"  !) ! 4 #1
=  4  )  1
 

! =/>
+'?  @' 9
'  
!  #%   # '
#%  )! 
)  '!B  # . +

! 
+0 1/2
 21,  ) A
 1/2
 2( 
 3+
#$%
45

 
)  

4 5
 
  



   !"


#$% 
& ./)          ! 7:7 # '
44$1% $81$C 11$15 &
#$%
45  
  
  

SemQHOH GLDFULWLFH URPkQHúWL vQ 0(7$ LQVWUXFLXQL

În unul din capitolele precedente am vorbit deja despre


 

    


  -
 


  


 
  
  
  

     


utilizate pentru documentul dat:
32
<meta http-equiv=Content-Type content="text/html;
charset=windows-1250">

Acest tip de codificare este util în cazul documentelor de volum mare,


   
     


 
 

volumul codului total al documentului.

Exemplul 6.2:

 



     

 !"
 
#  
  $% & ' (
)*+
 




#  
  $% & ' ( )*+



'
'  


'
'  



' ,
'  ,


' &
'  &



' -
'  -


' %
'  %



' 
'  


'
' 



' .
'  .


'$
'  $


'



Nu ui

 
  



  
  



  
 

 

   

   
 
 Central European ISO sau
Windows).



  


   
  


   


   
   
fragmentelor respective în procesorul de text WORD cu memorizare


 

 !"  


     


   
  


  !" 

generat de procesorul de text.

33



    

#
  
 
  
     

 
  

        


 


 
  
   

  
  

 

 

 " 
 




 
  

  !"    
 $%& 
'($ 

 

 
   
   
Standardul de culoare a imaginii nu este primordial, dar vom
recomanda (pentru imaginile color) standardul RGB. Majoritatea

  
 
     
 
 

  
 
) 
 


  

 

folosit pentru reproducerea culorilor la monitor (pentru monitoarele cu

 

 
) 

    
   

*
 
  

 
 

  

&

  
  

  picture.gif,

  
  cu documentul HTML. Vom folosi în acest
caz tagul:
<IMG SRC="picture.gif">
Tagul <IMG SRC="[
  
]">
   

   ALT="[text]", de exemplu:
<IMG SRC="picture.gif" ALT="Se transmite…">
Întâlninn în documentul HTML un asemenea tag sistemul browser va
      
 
  
 

  
    
 picture.gif. Acest atribut este comod în special când
  
   
  

   

 
vizualizarea imaginilor s    

  
  
 

  
   !.
"     
 –         

   


       
   #

*
ÌQ SURFHVXO GH UHDOL]DUH D H[HPSOHORU XOWHULRDUH vQ FDUH VH XWLOL]HD] LPDJLQL YHL
înlocui numele imaginilor din exemple prin numele imaginilor reale, prezente pe
VWDLD GH OXFUX ÌQ FD]XO OLSVHL LPDJLQLORU SH SDJLQ YD DSDUH XQ GUHSWXQJKL FDUH YD
PDUFD ORFXO LSRWHWLF DO DPSDOVULL LPDJLQLL

34

 
   


Exemplu: <IMG SRC="C:\Album\Cars\v2108.jpg" >

Urmtorul exemplu (7.1) YD LOXVWUD SODVDUHD VLPSO D LPDJLQLL vQ

document.




  










      !"!#



 
 


    !"  # ! #$ % 
# #   &  '   (



 ) *+ 
 
  




,-./
)01

În cea de a doua parte a exemplulXL VH LOXVWUHD] FXP

LPDJLQHD GHYLQH ÄGH IDFWR´ XQ EXWRQ OD DSVDUHD FUXLD VH UHDOL]HD]
WUHFHUHD GXS OHJWXUD VWDELOLW 3HQWUX DFHDVWD WUHFHUHD YD IL SODVDW
între tagurile <A HREF="..."> úL </A>.
Dac GLPHQVLXQLOH LPDJLQLL VXQW SUHD PDUL SXWHP IL[D IRUDW
vQOLPHD úL OLPHD VSDLXOXL RFXSDW GH LPDJLQH SH VXSUDIDD
GRFXPHQWXOXL +70/ (VWH VXILFLHQW V LQGLFP vQ WDJXO ,0* 65&!
DWULEXWHOH :,'7+ " úL +(,*+7 " FDUH YRU IL[D OLPHD úL
FRUHVSXQ]WRU vQOLPHD LPDJLQLL vQ SL[HOL 8Q H[HPSOX GH XWLOL]are a
DFHVWRU DWULEXWH vO YHL vQWkOQL vQ FDSLWROXO XUPWRU OD FUHDUHD JDOHULLORU
de imagini cu ajutorul tabelelor.
$OLQLHUHD LPDJLQLL ID GH PDUJLQLOH GRFXPHQWXOXL VH
UHDOL]HD] OD IHO FD úL SHQWUX WH[W FX DMXWRUXO DWULEXWXOXL
ALIGN=LEFT | CENTER | RIGHT.
8WLOL]DUHD UHIHULQHORU JUDILFH SHUPLWH RSWLPL]DUHD vQFUFULL
SDJLQLL FH FRQLQH LPDJLQL 3H SDJLQD GH ED] VH LQFOXG FRSLL GH
GLPHQVLXQL PLFL úL UH]ROXLH MRDV DOH LPDJLQLORU HOH VH YRU WUDQVPLWH
PXOW PDL UHSHGH GHFkW RULJLQDOHOH úL SULQ LQWHUPHdiul lor se fac
UHIHULQH OD LPDJLQLOH RULJLQDOH )LH F DYHP LPDJLQHD FDOLWDWLY 1.jpg
úL FRSLD HL GH UH]ROXLH MRDV 1a.jpg. Vom folosi referirea:
35


 ) *+23 
 
 23 


3H SDJLQ YD IL DILúDW FRSLD GH UH]ROXLH MRDV GDU Lmediat ce pe
DFHDVW FRSLH VH UHDOL]HD] XQ FOLFN SH R SDJLQ DSDUWH VH vQFDUF
originalul imaginii.
$PSODVDUHD FRPXQ D LPDJLQLL úL WH[WXOXL GHSLQGH vQ
JHQHUDO GH DOLQLHUHD WH[WXOXL úL D LPDJLQLL 'DF GXS DPSODVDUHD
imaginii este suficient loc în partHD SDJLQLL GXS FDUH VH DOLQLD]
WH[WXO HO VH YD SODVD DOWXUL GH LPDJLQH ÌQ FD] FRQWUDU VH YD SODVD VXE
HD 5HDOL]DL XUPWRUXO H[HPSOX XUPULL UH]XOWDWXO DSRL H[FOXGHL
DOLQLHUHD LPDJLQLL GXS SDUWHD GUHDSW 2EVHUYDL FDUH YD IL HIHFWXO
DPSODVULL elementelor paginii:

Exemplul 7.2

)01
)*.
)2  # 4
)2

56 5$67
)*.

,-./

)2
# $  !$
 $
 ,' 89 :2;<

)2

 
=2>3  

 

 


  
   
 
     
  


  
 
  
 
 
 




    
 

  !




 

 

 
 " 

 



   
   
 
    
  

 
 # $%

%& '
  ( ) #

%& $
( 

%& *
  +
 ( ), -#

%& ' 
 ( .  # ) -

%& / 
( 0

%& 1  ( 2, -

%& 3 
  (  4

# #5637 #

36

  ([HPSOXO  YL]XDOL]DW vQ EURZVHUXO ,QWHUQHW ([SORUHU

37



 
Tabelele sunt elemente pseudografice (sau grafice, în



 


 
 


        

     
 
     
 
   

caracteristicile sale proprii(dimensiunile, culoarea, formatul textului, ).
 
   
 
 –     
    
      
   


   
              



    
  !    e – 
  
fragmente de text sau crearea în celulele tabelului a unei galerii
fotografice.
" # 
       
    
interiorul liniilor – 
    
   
    

dirijare pentru tabele: tagurile <TR> ... </TR> pentru marcarea

      
   $%  $&%  

  
     
  

Structura tabelului

Exemplul 8.1

+70/!
+($'!
7,7/(!([HPSOXO 7,7/(!
+($'!
+!8Q WDEHO HOHPHQWDU+!

 
 
 


 
    

!


 



 
   

!

"#$%&  



  '
   '
38

!

"#$%&  '

!
"#$%&  


  '



   
 '  

!

 "#$%&  



   '
 '  '

!

 "#$%&  '

!
 "#$%&  '

!
 "#$%& 

!
(

!)*

<TABLE> ...</TABLE>. - PDUFKHD] vQFHSXWXO úL VIkUúLWXO

tabelului. Tagul <TABLE> SRDWH IL vQVRLW GH FkWHYD DWULEXWH

ALIGN – )L[HD] DUDQMDUHD WDEHOXOXL ID GH PDUJLQLOH SDJLQLL

documentului. Permite alinierea la stânga (ALIGN=LEFT) centru
(ALIGN=CENTER) úL GUHDSWD ALIGN=RIGHT)

WIDTH - OLPHD WDEHOXOXL 3RDWH IL LQGLFDW vQ SXQFWH SL[HOL VDX vQ

SURFHQWH GH OD OLPHD SDJLQLL :,'7+  – OLPHD GH  SXQFWH
(WIDTH=60% -  GLQ OLPHD SDJLQLL

BORDER – IL[HD] O LPHD OLQLLORU GH VHSDUDUH vQWUH HOHPHQWHOH

 
WDEHOXOXL úL SH SHULPHWUXO OXL 'DF DWULEXWXO %25'(5 QX HVWH LQGLFDW


WDEHOXO YD DSDUH I U OLQLL GH VHSDUDUH

 

CELLSPACING – )L[HD] GLVWDQ D vQWUH IURQWLHUHOH D GRX FHOXOH

  

DO WXUDWH vQ SXQFWH Exemplu



(CELLSPACING=2).

CELLPADDING )L[HD] GLVWDQD GLQWUH IURQWLHUD FHOXOHL úL WH[WXO GLQ

ea în puncte. Exemplu
(CELLPADDING=10).

39
Tabelul poate avea un antet (este marcat de perechea de taguri
<CAPTION> ... </CAPTION>). Tagul <CAPTION> permite
utilizarea atributului ALIGN. Valori admisibile: <CAPTION
ALIGN=TOP> (de asupra tabelului úL &$37,21
ALIGN=BOTTOM> (sub tabel).

ÌQFHSXWXO XQHL OLQLL D WDEHOXOXL HVWH PDUFDW GH WDJXO <TR> LDU VIkUúLWXO


– de tagul </TR>. Tagul <TR> SHUPLWH XWLOL]DUHD XUP WRarelor 

atribute:

ALIGN – IL[HD] DOLQLHUHD WH[WXOXL VDX DOWRU HOHPHQWH vQ FHOXOHOH

tabelului. Variante: ALIGN=LEFT (la stânga), ALIGN=CENTER (la
centru), ALIGN=RIGHT (spre dreapta).

VALIGN – )L[HD] DOLQLHUHD YHUWLFDO D WH[WXOXL VDX DOWRU HOHPHQWH

în celulele rândului. Variante: VALIGN=TOP (GXS PDUJLQHD GH VXV),
VALIGN=MIDDLE (GXS PLMORF), VALIGN=BOTTOM (GXS SDUWHD
de jos).

&HOXOHOH WDEHOXOXL VH PDUFKHD] SULQ SHUHFKHD GH WDJXUL <TD>

...</TD>. Pentru tagul <TD> SRW IL XWLOL]DWH XUPWRDUHOH DWULbute:

NOWRAP – WRW FRQ LQXWXO FHOXOHL YD IL SODVDW I U UXSHUL vQWU-un

  
singur rând.
COLSPAN - IL[HD] H[WLQGHUHD FHOXOHL SH RUL]RQWDO FvWH FHOXOH
 

YHFLQH YRU IL ÄDVLPLODWH´ GH FHOXOD FXUHQW  ([HPSOX, COLSPAN=4 -



celula se va extinde pe 4 coloane.

ROWSPAN - IL[HD] H[WLQGHUHD FHOXOHL SH YHUWLFDO FvWH UkQGXUL

 

YHFLQH YRU IL ÄDVLPLODWH´ GH FHOXOD FXUHQW ([HPSOX ROWSPAN=2 –


FHOXOD RFXS GRX OLQLL
 

ALIGN – IL[HD] DOLQLHUHD WH[WXOXL vQ FHOXO 9DULDQWH

ALIGN=LEFT (spre stânga), ALIGN=CENTER (dXS FHQWUX),
ALIGN=RIGHT (spre dreapta).

40
VALIGN - )L[HD] DOLQLHUHD YHUWLFDO D WH[WXOXL VDX DOWRU HOHPHQWH
vQ FHOXO . Variante: VALIGN=TOP (GXS PDUJLQHD GH VXV),
VALIGN=MIDDLE (GXS PLMORF), VALIGN=BOTTOM (GXS SDUWHD
de jos).

WIDTH – IL[HD] O LPea

 celulei în puncte (pixeli). Exemplu
(WIDTH=200).

HEIGHT - IL[HD] vQ O LPHD FHOXOHL vQ SXQFWH SL[HOL ([HPSOX

 

(HEIGHT=40).

'DF vQ FHOXO QX HVWH LQIRUPD LH vQ MXUXO HL QX DSDUH FRQWXU 3HQWUX D

  
HYLWD VLWXD LLOH GH ÄDVLPHWULH´ vQ FD]XO XWLOL] ULi celulelor libere,
 

LQWURGXFH L vQ FDOLWDWH GH LQIRUPD LH VLPEROXO &nbsp (non-breaking

 

space — VSD LX IL[ &HOXOD YD U PkQH OLEHU  GDU FRQWXUXO HL YD IL

  

prezent.

1RW Tabelele pot fi incluse - LQ RULFH FHOXO D WDEHOXOXL SXWH L LQVHUD

 

un alt tabel.

Exemplul 8.2 Tabele formatate

)*
)

 +, -
!
!)


) .  ,%  , / #%,%
!)

 
 ' 0/12--

 3,      4 4 

!




3
 

  
  



 

 


 

  


 

 

   ! 
 
 

    
 

   ! 


 

 "#!$%% 

 &
'## (
 
41
  )       *

 
  )       *

 
  )       *

 

 
!  "

+ "#!$%%  ( ,-.
/01
.
' .
/01
. "#!$%% !!$%%  (
 $222   + 3%%    % %%%    2
%% 
  $ +%%    4 3%%   %% 

 
!
 %%%   5 %%    4 $%%   
$% $% 
  $ 5%    2 5%%   2% 

 
!
 %%$   $ %%    2 %%   
$$ 4% 
  $ %%    $% %%   $ +% 

(6-
78
,6

Exemplul 8.3. Utilizarea tabelelor pentru crearea galeriilor de

imagini.

,6 ,-(
*6--9'
 $%*6-
,-(
,$('  
,$
(6- 7-$ "#! %%
 

    ! .'
:$01
. '
.'
:$01
. !!$%% "#!3 
  !.'
:01
. '  .'
:01
. !!$%%
"#!3 
  !.'
:+01
. '  .'
:+01
. !!$%%
"#!3 
  !.'
:501
. '  .'
:501
. !!3
"#!$%% 

42
  !.'
:01
. '  .'
:01
. !!3
"#!$%% 

 

 
  !.'
:401
. '  .'
:401
. !!3
"#!$%% 
  !.'
:301
. '  .'
:301
. !!$%%
"#!3 
  !.'
: 01
. '  .'
: 01
. !!$%%
"#!3 
  !.'
:201
. '  .'
:201
. !!3
"#!$%% 
  !.'
:$%01
. '  .'
:$%01
. !!3
"#!$%% 

 

 
  !.'
:$$01
. '  .'
:$$01
. !!$%%
"#!3 
  !.'
:$01
. '  .'
:$01
. !!$%%
"#!3 
  !.'
:$+01
. '  .'
:$+01
. !!3
"#!$%% 
  !.'
:$501
. '  .'
:$501
. !!3
"#!$%% 
  !.'
:$01
. '  .'
:$01
. !!$%%
"#!3 

(6-
78
,6

De multe ori tabelele sunt folosite pentru a cadra pagina, divizând-o în

 

 

    
   perametrii celulelor.
                 
permite divizarea paginii în cadrul unui singur document:

Exemplul 8.4 


     
   


!' #; 

 # "#! % !! % #/
 #
43
# "#! % !! % !;" #
# "#! % !! % #/
 #
# "#! % !! % !;" # 
 # "#! % !! % !;" #
# "#! % !! % #/
 #
# "#! % !! % !;" #
# "#! % !! % #/
 # 
 # "#! % !! % #/
 #
# "#! % !! % !;" #
# "#! % !! % #/
 #
# "#! % !! % !;" # 
 # "#! % !! % !;" #
# "#! % !! % #/
 #
# "#! % !! % !;" #
# "#! % !! % #/
 # 
#;!'

Fig. 6.
Exemplul 8.4
vizualizat în
browserul IE

44



   

 
   
      
procesul l          
  
 
     
   
 
    
  
     
 
  
(compartimente) poate fi utilizat tagul frameset.
Cel mai simplu mod de utilizare al acestui tag este
  
     
   


 
  
  !     

"

<FRAMESET COLS="x%, y%"

<FRAME SRC="fisier 1">
<FRAME SRC="fisier 2" NAME="titlu">
</FRAMESET>
<NOFRAMES>

    

     #  
diviza în 2 casete –      ¼ din l•       – cu
   ¾ din fereastr•. În prima caset• fa fi plasat con

documentului fisier 1, în cea de a doua – 

  
    $

Atributele tagului <frameset>

cols –  %           

& 
   
  
 % '
  
 &(
rows –  %    
 )
   
   
& 

   
   
 
 % '

lipsa semnului %)

Exemplul 9.1:
*   
   
+  
 "
1. main.html –    
  
 aginii
2. frame1.html –    
      

3. frame2.html -    
    
  

  

45



   

  !"# $!" 

 
 %

 
 

&

'

&
 (
)
   



 
 % 

*



       
 


 




 !!" ! 

 #  !


$


  %  &  
$

' ( &

) *

'
 "
+,% -  ,


'
 "
+, *&   ,)


'
 "
+*. %# % *-'


'
 "
+*. / !% *'


'


 

"

) *

 # ,%
 -  ,


(
(

#! &#%012(! 3 "44 " !" 054

6   "   ( ! 7    %    8%&# &
/   *#%1
%   # #% #% 7 #!
7   &  
 1  . 
   &% ( 9   % :

%

  (    

 ,&&;,  .& 6 

%

 "
+ ! /(  (%


"

 # ,
 *&   ,)

46

(
(

#! &#012(! 3 "44 " !" 054

6    &  7 &
  *#% 1
%   # #% #% 7 #!
7   &  
 1  . 
   &% ( 9   % :

%

 *#% &  % 

%

 "
+ ! /(  (%


"

 # *.
 %# % *-'


(
(

#! &.012(! 3 "44 " !" 054

6   "   2%& 7 &
  8%&#1
%   # #% #% 7 #!
7   &  
 1  . 
   &% ( 9   % :

%

 8%&#  . & ! 

%

 "
+ ! /(  (%


"

 # * 
 / !% *'


(
(

#! & 012(! 3 "44 " !" 054

6 /
% *  %%  "! 
#   %   
8%&# & /   *#%1
%     &  
 7 #% 1  .     &%
( 9   % :

%

 %#     
# ,'

 /& #  

  &!%   &&

%

 "
+ ! /(  (%



 

 

,'
<;;&
=> %
> %%
# 01" # ;;

47

,'
<;;
> %
# 1" # ;;





        
%  


 




 !!" 3

$


  *#( #    
$

' ( &

) *

'
 6 &


' 

'
 "
& 1" # /& #  


'
 "
 &1" #  &!%   &&


'

'
8%&# -


'
 8%&# 


'
 *#%


' 

'
 "

?,'1" # %#     

# ,'


'

'
 !


'


 
 

,' 
<;;&
=> %
> %%
# 1" # ;;

1RW 3DJLQLOH FX HOHPHQWH )UDPHVHW! QX FRQ LQ WDJXUL <H'<!



)5$0( 65& EKWPO 1$0? PDLQ!

ÌQ DFHVW IUDJPHQW VH LQGLF QXPHOH FDVHWHL NAME=”nume” úL ILúLHUXO

FDUH XUPHD] V ILH SODVDW vQ DFHDVW FDVHW 65& ´QXPH ILúLHU KWPO´
3HQWUX D UHDOL]D R SDJLQ vQ FDUH UHIHULQHOH OD FDUHYD GRFXPHQWH
HTML (cuprinsul) apar într-R FDVHW vQ WLPS FH GRFXPHQWHOH SURSULX-
]LVH DSDU vQ DOW FDVHW D DFHOHLDúL SDJLQL FRQLQXWXO YRP DGXJD OD
UHIHULQH DWULEXWXO L:
numele casetei în care va apare
documentul” (în exemplul de mai sus TARG?L PDLQ În cazul,
FkQG VH DFWLYHD] R DOW UHIHULQ FDUH DSDUH vQ DFHHDúL FDVHW
FRQLQXWXO FDVHWHL VH vQORFXLHúWH DXWRPDW
48
Atributele tagului 
:F?

:F? GHILQHúWH QXPHOH casetei. Pentru a plasa un document HTML în

DFHDVW FDVHW YHL LQGLFD vQ UHIHULQD OD GRFXPHQW DWULEXWXO
TARGET=”numele casetei”
F:
 = este un atribut analogic atributului CELLPADDING=.
SHQWUX WDEHOH )L[HD] VSDLXO vQWUH IURQWLHUHOH ODWHUDOH DOH FDVHWHL úL
FRQLQXWXO HL
F:
 )L[HD] VSDLXO vQWUH IURQWLHUHOH YHUWLFDOH DOH FDVHWHL
úL FRQLQXWXO HL
SCROLLING DFWLYHD]  GH]DFWLYHD] EHQ]LOH GH UXODUH vQ FDVHW
2SLXQLOH 6&52//,1* <(6
SCROLLING =YES – SUH]HQD SHUPDQHQW D EHQ]LORU GH rulare, indiferent
de necesitatea lor.
6&52//,1* 1H – OLSVD EHQ]LORU GH UXODUH 'DF YROXPXO GRFXPHQWXOXL
HVWH PDL PDUH GHFkW VSDLXO UH]HUYDW SHQWUX FDVHW HO YD IL SUH]HQWDW GRDU
SDULDO
6&52//,1* :8LH VLVWHPXO EURZVHU YD GHWHUPLQD DXWRPDW GDF HVte
QHFHVDU VDX QX DSOLFDUHD EHQ]LORU GH UXODUH vQ FDVHW
NORESIZE – interzice utilizatorului modificarea dimensiunilor casetei.

K= - LQGLF ILúLHUXO VXUV FDUH YD IL SODVDW vQ FDVHW
Exemplul 9.2:
main.htm

autori.ht opere.ht continut.html

op_em.ht vers1.htm

op_al.ht vers2.htm

vers3.htm

vers4.htm
49
)LúLHUXO main.html FRQLQH WUHL FDVHWH GHVWLQDWH SUH]HQWULL OLVWHL GH
autori (autori.html OLVWHL HGLLLORU LQFOXVH cuprins.html  úL D
FRQLQXWXOXL RSHUHORU VHOHFWDWH continut.html). Lista de opere a
DXWRUXOXL VHOHFWDW DSDUH vQ FDVHWD GLQ PLMORF LDU FRQLQXWXO RSHUHL
selectate – în casetD GLQ GUHDSWD 8UPHD] VXUVHOH ILúLHUHORU FDUH ILLQG
UHFRQVWUXLWH Y YRU SHUPLWH V RELQHL XUPWRDUHD VWUXFWXU

 
+70/!


   

 


 
 !" #  !"

 
!! #  $$

%

%&

 
 



'() '* *)$+

 ,
% 

%'()

%
50

  



'() '* -..


#/#0
% 

%'()

%

  

&

'() '* *'$ 


10/
%'
% 

 

 
 $2  3$ *$  !" /#
0
%

 
 $2  3 *$  !" 4"$ 
#5/
%

%

%'()
%&

 
 



'() '* *)$+

 ,
% 

 ) $ "6$


 $2 7$"8 *$  $$

9:-;<=/ 5
0
:-;<=/ 
%
%


 $2 7$" *$  $$
5/#
%
%

%

%'()
%

 
 



'() '* *)$+

 ,
% 

 ) $ "6$


 $2 7$"; *$  $$
#5// ,,
%
%


 $2 7$"< *$  $$
0
%
%

%

%'()
%

51

  



'() '* -..






$9:-;= ($" $ :-;=$ ($ :=!$
'

:-;<= $ ($ * :-;= $ ($ (>
'
1:-;=$$ !$7"$  ($ :-?=$
'
 $9:-;= $ $ 7@
'
':-?= 7!9!  $ " $*$ 
'
5:-?= 29:-;= :=!( "$ $ !$"=
'

:-?= :-?=:=!$ ":=! ($:-;8= $ 7

' 5$ :=!$ " :-;=9 ($"
'
:!'"
'
4" ($ :-?=A'!$ !$*  :=!
'
 (  ($ ":=!*$ (:-;8=! 2$*:=!(
'
:-;8= ($"  ($ 2$  7:=!
'
4" :-?= ($ * 2! 2:=!(
'
 !:-?=  *$ "$* $
'
 !:-?= $9   $ :=!$"
'

:=!( "9 !($ " !((9 7:=$
'

5$ :=!$ " :-;=9 ($"
% 
%



%
% 
%'()
%

  



'() '* -..




5$  #" !B  "
'  ! !"99"9
'

 !  $ "'$
' 5$9 "!$
'

5! &! " !B  $
' 4! " ($9 $
'
5$  $  &!
' $$ $ !$9 !=
'
5! 1!  495!
'    ( !
'
 "! $  "$
' 5$ ! $   !"$=
'
"  !$ C" $ 7$
' 9 2 ("! $
'
5!  !9! $$
' # 7(  $$
'
4 ($ '$ ! "@
' /!(  (  
'
#  $*$ ! "$9!($!
' #  $"$ ! !
'
# $ 7 7 
' 9 "! !  

% 
%
52



%
% 
%'()
%

  



'() '* -..





!$ $$ 4$ 
'

 !*$ 2 $
'
  $  ($A7$>
' !( ,  $ 7$"
'
:!'"
' $ $ !  7!$
'
9 ' C ($ (!$
'   ( !$9!$
'
!( ,   ''@
% 
%



%
% 
%'()
%

  



'() '* -..



  $ !$9 
'  $ "!*$9 2

'
 $ " 
' # $  $$ 
'

 $ $ "2!$ $*$@
' 5$ 7 ( $"$ $
'

# A ! "9 $*$
'  $  $@

% 
%



%
% 
%'()
%

53
&DSLWROXO 
)RUPXODUH
Utilizarea formularelor


  
       
  
    
     

  

              
 
 

             
automat de programe soft speciale)

          
                     !
!         "    
 

  #   

    relucrare a datelor transmise
    $      
     



     %     


Limbajele PERL, JAVA, C. Programele de acest tip sunt numite CGI-
scripturi, de la (Common Gateways Interface), ce se traduce ca
"     ". De cele mai multe ori scrierea
programelor "&   !       
  ! 
   

     '() *   

de prelucrare a formularelor e
     
    
specializat PHP/FI, care se includ direct în documentele HTML. În

       
  +, sau *.php.

  
     

        
perechi
[nume v  ]=[    ]. Numele variabilelor sunt date
cu litere ale alfabetului englez. Valorile variabilelor, indiferent de
  
   

         !  
caractere (string).

Structura formularelor

Formularele sunt marcate de perechea de taguri <FORM> ...

-.
*/0 1
  
        -un
54
singur document HTML, dar nu sunt permise formularele incluse
  % 2     
  

utilizarea fragmentelor de text HTML, inclusiv taguri.

Tagul <FORM> poate fi completat cu trei atribute, unul dintre ele

fiind obligatoriu:

ACTION
3       

      
METHOD
$      
     transmitere a
hipertextului) a datelor din formular la sistemul de prelucrare. Valori
permise: METHOD=POST ! METHOD=GET.
 
    
  METHOD=GET.
ENCTYPE
$   
          
   

      $     
  


    
ENCTYPE=application/x-www-form-urlencoded.

Formulare elementare.

Procesul de completare a datelor din formular este logic urmat de


      izare a transmiterii datelor:

<INPUT TYPE=submit>

1     
 
        
  
   Submit („subscrie”),       
datele din formular vor fi transmise sistemei de prelucrare, indicate în
<FORM>.


                  
atributului VALUE="[text]" (valoare), de exemplu:

<INPUT TYPE=submit VALUE="Hopa Hop!">

55
Folosind datele acumulate, putem forma un formular elementar

Exemplul 10.1
+70/! +($'!
7,7/(!([HPSOXO 7,7/(!
+($'!
+!8Q IRUPXODU HOHPHQWDU +!
)250 $&7,21 WDEHOKWPO! LQFHSXW !
,1387 7<3( VXEPLW 9$/8( /D WDEHOH OD WDEHOH!
)250! VILUVLW!
%2'<!
+70/!

In
   
     

      
descrierea butonului a atributului NAME=[nume], de exemplu:

<INPUT TYPE=submit NAME=button VALUE="Apasa repede">

         !      

Astfel, sistemul de prelucrare a formelor poate realiza unele sau alte
                



  

  
    
 <INPUT>. Fiecare element
<INPUT>
   

  NAME=[nume], care det   

elementului       
  
      
sistemului de prelucrare).  
     




     . Un alt atribut al tagului
<INPUT> este VALUE="[valoare]", care dete  
    
  
   
   Acest atribut nu este obligatoriu
 

  !
"#  
TYPE=password>, deoarece în aceste cazuri vizualizarea nu se

  .
Atribute utilizate cu tagul <INPUT>:
56
TYPE=text $           
 
     
  %&
"'  ( 
    
    ) 
*  +,-.
/ 0"'  ( 

   1
 
).
Exemplu: <INPUT TYPE=text SIZE=20 NAME=user
VALUE="Scrie textul aici">

$     
  23 
     

 . 
     )    
4% 
textul aici", care mai apoi poate fe redactatUlterior textul (redactat sau
predefinit) va fi transmis la sistemul de prelucrare prin variabila user.

TYPE=password $           




 
         )


simbolurilor introduse apar (*). Exemplu:

<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>
$           
  
  23

  
 
 )  
    53  

      
   
   prin variabila pw.
TYPE=radio $         

suplimentar checked (   

 
). În un grup de
butoane radio cu nume identice poate fi doar un buton selectat

Exemplu:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked>
9600 bit/s
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400
bit/s
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800
bit/s

$            9600 bit/s, 14400

bit/s 26633 7 .    
       
   
 
 $ 

  
 
  
57
sistemului de prelucrare i se va transmite variabila modem cu valoarea
8933 $  
 
  
 
  
transmite valoarea c     
 


TYPE=checkbox $        :    

   *     

 
 checked (bifarea
apriori a boxului). Spre deosebire de butoanele radio, în grupul de
boxuri pot exista mai multe elemente bifate apriori.

Exemplu:
 !
";< ,+
" =,.
"4:4# %
terminale
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked>
Statii de lucru
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Server al

  
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked>
Servere Internet

$     

 %    

 2  >
$     
       
 2  >
sistemul de prelucrare va primi variabila "?% 
comp=IS.

TYPE=hidden
  
  
 
 


    
 
   
  
     
  

 
  
   
     mei se


       



Exemplu:
<INPUT TYPE=hidden NAME=version VALUE="1.1">





 version, care se transmite sistemei de
prelucrare valoarea 1.1.

58
TYPE=reset
  




  


  

 
      
  
 

de alte atribute, se poate lipsi de atributul name.

Exemplu:   ! "#$ !%&


  


formei">

'

     ( mai pot fi utilizate elementele


 $ )(   *#& #(

Meniul <SELECT> din n elemente are forma:

<SELECT NAME="[nume]">
<OPTION VALUE="[valoare 1]">[text 1]
<OPTION VALUE="[valoare 2]">[text 2]
...
<OPTION VALUE="[valoare n]">[text n]
</SELECT>

Meniul începe cu tagul <SELECT>  +  </SELECT>. Tagul

<SELECT> 
  ,
 NAME, 
 



,
  .
Tagul<SELECT> 
   
 MULTIPLE, care permite


 


+
 mente din meniu. Majoritatea


   
,
    $ ) -$$ ( +



  .+ 
 +   
 
  
atributul suplimentar SIZE=[ ]). Meniul <SELECT> apare ca un


meniu derulant vertical.

Tagul <OPTION>    

 . Atributul
obligatoriu VALUE



, 

 
     
 



   
 . Tagul <OPTION>

 
 checked,

 /
      

.

59
Vom cerceta exemplul.

<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Variantul 1
<OPTION VALUE="option2"> Variantul 2
<OPTION VALUE="option3"> Variantul 3
</SELECT>

0
,    i elemente: Variantul 1,
"

 1  "

 2 Este preselectat elementul Variantul 1.
sistemei de prelucrare i se va transmite variabila selection cu valoarea
3 . 4 1 
 2


Destul de simpl    



,  <TEXTAREA>

 *#& # #- !
 &56!7 )5$!78( 

 

adresa... </TEXTAREA>

Atributele sunt obligatorii.

NAME   

   
 

 

sistemului de prelucrare, (address).
ROWS  + 
restrei în linii (5).
COLS  
 +   (50).

Textul plasat între <TEXTAREA>  </TEXTAREA>, este inclus


 + 

 / 
  

 
 9
   


utilizator.

Exemplul 10.2:













  
 
    

 !"# $
!%&' (
(

  (  
 



('

#!& 

60

  )*(

+
   , +

+%-.) .) .) 
%+ /+& 0
1&2

%#&3"

+- 
%+ /+& 0
1&2 %#&

3"

0- 
%+ /+& %#&* 4&'

'

(5(6(



%+ /+& %#&*

4&'
'3"
4- 
%+ /+& 0
1&7 %#&* 3"


%+ /+&) 4&' 


' +

 !"#

3!/

#



  

  
 
 
     
     



        

   vedere, un






 
 
 
 
 
  



 
   


 
   


  
  
      
 





   
 

 
 

     

manual.

<FORM ACTION=mailto:user@mail.box
ENCTYPE=text/plain>

Crearea formelor este un pas spre trecerea le elementele de DHTML

(Dynamic HTML) – limbaj, care permite prelucrarea datelor direct în


  


 
 

  

utilizat pentru generarea diferitor tipuri de teste.

61
 Anex

 
   
Elemente bazice
Tipul <HTML> </HTML>

  

documentului 
rului
Numele <TITLE> </TITLE> Se include în antet
Antetul <HEAD> </HEAD> Descrierea
documentului
Corpul <BODY> </BODY>  

7DJXUL GH VWUXFWXU
Subtitlu <H?> </H?> ? –     
   
dimensiune
Aliniere <... ALIGN= LEFT | CENTER | Atribut suplimentar
RIGHT> ...>   
sau text de paragraf

 <DIV> </DIV> Un bloc separat de
text
Citat <BLOCKQUOTE> 6H HYLGHQLD] SULQ
</BLOCKQUOTE> GHSODVDUH ID GH
marginea liniei
  <EM> </EM> De obicei – cursiv
  <STRONG> </STRONG> De obicei – semigras
  
Trimitere, citat <CITE> </CITE> De obicei cursiv. Se
GHRVHEHúWH GH Citat
prin dimensiune
Cod <CODE> </CODE> Pentru surese
program
Exemple rezultat <SAMP> </SAMP>
Input de la <KBD> </KBD>
   
Variabile <VAR> </VAR>
 <DFN> </DFN> Unele sisteme nu
VXVLQ WDJXO UHVSHFWLY
Adrese <ADDRESS> </ADDRESS> De obicei adresa
autorului
Caractere mari <BIG> </BIG>
Caractere mici <SMALL> </SMALL>

62
 Elemente de design
Semigras <B> </B>
Cursiv <I> </I>
Subliniat <U> </U> Nu întotdeauna este
VXVLQXW
 <STRIKE> </STRIKE> sau <S> </S> Nu întotdeauna este
VXVLQXW
Indice superior <SUP> </SUP>
Indice inferior <SUB> </SUB>
Caracterul de <TT> </TT> CaracWHUH GH OLPH
 IL[
Caracter <PRE> </PRE> 3VWUHD] IRUPDWDUHD
preformatat LQLLDO D WH[WXOXL
 <PRE WIDTH=?> </PRE> ? – QXPUXO GH
simboluri
Centrare <CENTER> </CENTER> ùL SHQWUX HOHPHQWH
grafice
Clipirea textului <BLINK> </BLINK> A nu fi folosit!
Dimensiunea <FONT SIZE=?> </FONT> )L[VHD]
caracterului dimensiunea
caracterului 1 – 7
Schimbarea <FONT SIZE=”+ | - ?”> </FONT> 0UHúWH VDX
dimensiunii PLFúRUHD]
dimensiunea
caracterului cu ?
Dimensiunea <BASEFONT SIZE = ?> De la 1 la 7. DDF QX
standard VH IL[VHD] HVWH 
Culoarea <FONT COLOR = „#******”> „#******” – numele
caracterelor </FONT> FXORULL vQ HQJOH]
Selectaea fontului <FONT FACE = „#*******”> „#******” – numele
</FONT> fontului

   
  
  <A HREF=´UHIHULQ´! ÄFRPHQW´</A> 7UHFHUH OD UHIHULQ
  <A NAME=”nume”> „coment” </A> Definirea unei
ancore
   $ +5() ´UHIHULQDQFRU´! 7UHFHUHD OD SR]LLD
  „coment” </A> GHILQLW GH DQFRU
 <A REL=”****”> </A> Nu întotdeauna este
VXVLQXW

63
   <A REV=”****”> </A> Nu întotdeauna este
VXVLQXW
Plasrea imaginii <IMG SRC=”nume fisier”> Se va indica numele
sau calea
Aranjarea <IMG SRC=”nume fisier” ALIGN=
imaginii TOP | BOTTOM | MIDDLE | LEFT |
RIGHT>
    <IMG SRC=”nume” ALT=”text”> 'DF QX VH vQFDU
imaginea apare
textul
Dimensiunile <IMG SRC=”nume” WIDTH=? ? – în pixeli
imaginii HEIGTH=?>
Frontiera <IMG SRC=”nume” BORDER=?> ? – în pixeli
Deplasare <IMG SRC=”nume” HSPACE=? ? – în pixeli
VSPACE=?>
Preimagine <IMG SRC=”nume” Pentru Netscape
LOWSRC=”nume”> Communicator

Separatori
Paragraf <P> </P>
Aliniere în <P ALIGN= LEFT | CENTER |
paragraf RIGHT> </P>
Rupere rând <BR> </BR>
Anularea alinierii <BR CLEAR= LEFT | > CENTER |
RIGHT | ALL>
Separator <HR>
orizontal
Aliniere <HR ALIGN= LEFT | RIGHT |
separator CENTER>
Grosime <HR SIZE=?> ? – în pixeli
 <HR WIDTH=?> ? – în pixeli
  <HR WIDTH=”%”> în procente
  <HR NOSHADE>

Liste
      <UL> <LI> </UL> Tagul <LI> se pune
vQ IDD ILHFUXL
element
Compact <UL COMPACT> </UL>
Tip marcher <UL TYPE= DISC | CIRCLE | 3HQWUX WRDW OLVWD
64
 SQUARE>
Tip marcher <LI TYPE= DISC | CIRCLE | Pentru elementele,
SQUARE> începând cu cel
curent
Cu numerotare <OL> <LI> </OL> Tagul <LI> se pune
vQ IDD ILHFUXL
element
Compact <OL COMPACT> </OL>
Tip numerotare <OL TYPE= A | a | I | i | 1 > 3HQWUX WRDW OLVWD
Tip numerotare <LI TYPE= A | a | I | i | 1 > Pentru elementele,
începând cu cel
curent
Începutul <OL START=?> ? – QXPUXO FX FDUH
    începem
Începutul <LI VALUE=?> ? – QXPUXO GH OD
    care pornim cu
elementul curent
    <DL> <DT> <DD> </DL> DT – QRLXQHD '' –
GHILQLLD
  <DL COMPACT> <DT> <DD> DT – QRLXQHD '' –
</DL> GHILQLLD
Meniu <MENU> <LI> <MENU> LI – la fiecare
element
Compact <MENU COMPACT> <LI> <MENU> LI – la fiecare
element
Catalog <DIR> <LI> </DIR> LI – la fiecare
element
Compact <DIR COMPACT> <LI> </DIR> LI – la fiecare
element

   
Desen Fon <BODY BACKGROUND=”nume
ILúLHU´!
Culoare FON <BODY BGCOLOR=”culoare”>
Culoare Text <BODY TEXT=”culoare”>
Culoare link <BODY LINK=”culoare”>
Culoare link <BODY VLINK=”culoare”>
cercetat
Culoare link activ <BODY ALINK=”culoare”>

65
 Simboluri speciale
Simbol special &#? ? – codul simbolului
< &lt;
> &gt;
& &amp;
„ &quot;
® &reg;
© &copy;

  &nbsp;
§ &sect
± &plusmn
1/4 &fract14
3/4 &fract34
× &times
| &brvbar
1/2 &fract12
° &deg

Formulare
Definirea <Form ACTION=”nume fisier”
formularului METHOD= GET | POST> </FORM>
Câmpul de <INPUT TYPE= „TEXT |
introducere PASSWORD | CHECKBOX | RADIO
| IMAGE | HIDDEN |SUBMIT
|RESET” >
Numele câmpului <INPUT NAME=”nume”>
Valoarea <INPUT VALUE=”valoare”>
câmpului
Marcat <INPUT CHECKED> Pentru boxurile tip
checkbox, radio
Dimensiunea <INPUT SIZE=?> ? – în simboluri
câmpului
  <INPUT MAXLENGTH=?> ? – în simboluri
Lista de variante <SELECT> </SELECT>
Numele listei <SELECT NAME=”nume”>
</SELECT>
   <SELECT SIZE=?> </SELECT>
variante

66

     <SELECT MULTIPLE>
 <OPTION>
 <OPTION SELECTED>
pre  
Regiune text <TEXTAREA ROWS=? COLS=?>
(dimensiune) </TEXTAREA>
Titlul regiunii <TEXTAREA NAME=”nume”>
text <TEXTAREA>

Tabele
Definirea tabelei <TABLE> </TABLE>
Frontiera <TABLE BORDER=?> </TABLE>
   <TABLECELLSPACING=?>
Complementare <TABLECELLPADDING=?>
 !  
<TABLE WIDTH=?> În pixeli
 
<TABLE WIDTH= „%”> În procente
Linie de tabel <TR> </TR>
Aliniere <TR ALIGN= LEFT | RIGHT |
CENTER | MIDDLE | BOTTOM>

 <TD> </TD> În interiorul rândului

  <TD ALIGN= LEFT | RIGHT |
CENTER | MIDDLE | BOTTOM>
Interzicerea <TD NOWARP>
ruperii
  <TD COLSPAN=?>

  <TD ROWSPAN=?>
linie

  <TD BGCOLOR=”culoarea”>

  <TD WIDTH=?> În puncte
Titlul tabelei <TH> </TH>
Aliniere titlu <TH ALIGN= LEFT | RIGHT |
CENTER | MIDDLE | BOTTOM>
Interzicerea <TH NOWARP>
ruperii
  <TH COLSPAN=?>

  <TH ROWSPAN=?>
linie
Avantitlu tabel <CAPITON> </CAPITON>
Aliniere <CAPITON ALIGN=TOP |
BOTTOM> </CAPITON>

67
 Casete /Freim-uri/
Document cu <FRAMESET> </FRAMESET>

  
blocuri
 <FRAMESET ROWS= ?,?,?,?> ? – puncte
rândurilor </FRAMESET>
 <FRAMESET ROWS= ?> ? – dimensiunea
rândurilor </FRAMESET> 


 <FRAMESET COLS= ?,?,?,?> ? – puncte

coloanelor </FRAMESET>
 <FRAMESET COLS= ?> ? – dimensiune
coloanelor </FRAMESET> 


 <FRAMESET BORDER= ?> ? – puncte

frontierei </FRAMESET>
Frontiera <FRAMESET FRAMEBORDER=
“yes | no”> </FRAMESET>
Culoarea <FRAMESET BORDERCOLOR=
Frontierei “culoare”> </FRAMESET>
 <FRAME MARGINWIDTH=?> 
  
 

frontierei dreapta
 <FRAME MARGINHEIGHT=?> 
   
frontierei jos
Benzi scrolloing <FRAME SCROLLING= “yes | no |
auto”>
Demarcarea <FRAME FRAMEBORDER= “yes |
frontierei no”> </FRAMESET>

   <NOFRAMES> </NOFRAMES>

blocurilor
Definirea blocului <FRAME>
Definirea blocului <FRAME SRC= “cale”>
document
Nume bloc <FRAME NAME=”nume” | _blank |
_self | _parent | _top>

68