1. prezentarea limbajului html (curs)

8/18/2019 1. Prezentarea Limbajului HTML (Curs)

1/59

Autori:Prof. dr. Bogdan IONESCUBogdan IONESCUConf. dr. Iuliana IONESCUIuliana IONESCUConf. dr. Florin MihaiFlorin MihaiCatedra deCatedra de Informatică de e!tiuneInformatică de e!tiune

A.S.E. Bucure"tiA.S.E. Bucure"ti

Acti#a$i %e r&ndActi#a$i %e r&nd'%rin clic( de mou!e)'%rin clic( de mou!e)

elementele lim*a+uluielementele lim*a+ului,-M,-M


2/59

Limbajul HTML (HHyper TText MMarkup LLanguage)

Limbajul HTML conţine o mare diversitate de comenzi, care poart denumirea speci!ic de

tag-uri sau marcatori"

Tag-uri cu atribute#

$nceput de tag s!%r&it de tag

< Nume tag> Text < /Nume tag>

< Nume tagNume tag atributatribut11=valoare1

atributatribut22=valoare2 ...

atributatributnn

=valoaren

> Text [< /Nume tagNume tag>]

Tag-uri pereche

Tag-uri singular e

$nceput de tag

< Nume tag> Text


3/59

Limbajul HTML (Hyper Text Markup Language)

Structura generală a unui document HTML #

!"#!" / $#L%#!" / "&"'()" / #T'#L)*#!"


4/59

Limbajul HTML# creare / +alvare / ,ncarcare / actualiare


5/59

LimbaulLimbaul HTMLHTML 0ormatarea ocumentelor 0ormatarea ocumentelor

/0 -e1t2comentariu/BB2text /3BB2/II2text /3II2

/UU2text /3UU2/S2text /3S2/Su*Su*2 text /3Su*Su*2/Su%Su%2text /3Su%Su%2

/B4 B42/Big2text /3Big2/Small2text /3Small2/,i567 8Align9l3r3c2text /3,i2

/PP 8Align9r3l3c3+2text [/P]/CenterCenter2text text /3CenterCenter2/;i#;i# 8Align9l3c3r3+2Text Text /3;i#;i#2

/,4 ,4 8Align9l3r3c 8NoShade 8Si


6/59

LimbaulLimbaul HTMLHTML 0ormatarea ocumentelor 0ormatarea ocumentelor

/BO;>BO;> 8Bgcolor9c 8-e1t9t 8in(9l 8?lin(9# 8Alin(9a2.....

/3BO;>BO;>2

O*!.O*!. Toate valorile atributelor din tag-ul Body se specifică după modelul 4 4 BB (#rrggbb)

# ! negru #FFFF ! ro"u #FFFF ! albastru

#FFFFFFFFFFFF ! alb #FFFF ! verde #FFFFFFFF ! violet

/MA4@UEEMA4@UEE 8Bgcolor9c 8;irection9l3r8Beha#ior9!croll3!lide3alternate2 text /3MA4@UEEMA4@UEE2

/FON-FON- Color9c Si


7/59

LimbaulLimbaul HTMLHTML 0ormatarea ocumentelor0ormatarea ocumentelor


8/59

LimbaulLimbaul HTMLHTML 0ormatarea ocumentelor0ormatarea ocumentelor'ulori accesate prin nume


9/59

Limbaul HTMLLimbaul HTML 0ormatarea ocumentelor0ormatarea ocumentelor'oduri de culori


10/59


11/59

LimbaulLimbaul HTMLHTML elemente multimeiaelemente multimeia

/BO;>BO;> BACD4OUN;BACD4OUN;9Nume3adre!a fi"ierului carecon$ine imaginea.$%& 'P& T$%%& BP& *%& P+ etc,

/IMIM S4CS4C9Nume3adre!a fi"ierului grafic 8,EI,-9m8=I;-,9n 8AIN9r3l3c2

/BSOUN; S4CBSOUN; S4C9Nume3adre!a fi"ierului care con$inefundalul !onor.$.& *0& P1& etc,

/ IMIM ;>NS4C;>NS4C9NNume3adre!a fi"ierului animat.20& 0$&P& etc 8,EI,-9m 8=I;-,9n 2


12/59

Tem#


13/59

Limbajul HTML# legturi 345ertext

3yperlin4-urile permit ca& prin e5ecutarea unui clic4 pe un "ir decaractere sau pe o imagine& să se vi6uali6e6e con7inutul altor

fi"iere 3T8 sau a altor 6one apar7in9nd fi"ierului curent :nraport de loca7ia fi"ierului destina7ie& către care se face legătura&e5istă mai multe tipuri de legături ;iperte5t& "i anume<

= legăturilegături interneinterne care se stabilesc >ntre 6one diferite

apar7in9nd aceluia"i fi"ier?= legături legături localelocale& >ntre fi"iere diferite plasate pe acela"i server?

= legături legături externeexterne& >ntre fi"iere plasate pe servere diferite

Pentru reali6area legăturilor ;iperte5t se folose"te tag-ul ANCO4GANCO4G&

stfel& la sursă& >n fi"ierul din care se va genera cone5iunea& tag-ulncoră va con7ine un atribut (,4EF,4EF ! 3yperte5t @eference) caresă permită specificarea A@8-ului (Aniform @esource 8ocator)fi"ierului destina7ie& >n spe7ă& a adresei acestuia


14/59

Limbajul HTML# legturi 345ertext interne

8a sursă<

/A ,ref9Hcu#&nt6cheieH2-e1t 'Imagine) de conectare /3A2

8a destina7ie</A Name9Hcu#&nt6cheieH2 8Paragraf $intă /3A2

...ocatie de Jnce%ut...

= FABBV

= CI

= Ec. en

= 4EI

...ocatie FABB?...FABB?

-e1t ce de!crie FABB?Imagine.IFImagine.IF

/U t%e9di!c2/I2/A ,ref9KocatieFABB?H2FABBV /3A2...../3U2...../A Name9KocatieFABB?H2FABB?/3A2......

/A Name9Kocatie ince%utH2/3A2

/A ,4EF9Kocatie ince%utH2/IM S4C9KImagine.gif 2/3A2


15/59

Limbajul HTML# legturi 345ertext localelocale

8a sursă</A ,ref9HNume3adre!a fi"ier ,-MH2-e1t de conectare /3A2/A ,ref9HNume3adre!a fi"ier ,-Mcu#&nt6cheieH2-e1t de conectare /3A28a destina7ie</A Name9Hcu#&nt6cheieH2 Paragraf $intă /3A2 ......

/U t%e9di!c2

/I2/A ,ref9KFABB?.,-MH2FABBV /3A2

....

....

..../I2 2/A ,ref9KCI.,-MocatieCIH2CIG /3A2

.....

FABB?.,-M

......

-e1t ce de!crieFABB?

.......

CI.,-M

......

-e1t ce de!crieCI

...oca$ieCI...

ASE.,-M

= FABBV

= CIG

/A NAME9KocatieCIocatieCIH2/3A2

Li b j l HTML l t i 3 t t t


16/59

Limbajul HTML# legturi 345ertext externe

8a sursă</A ,ref9HU4H2 -e1t 3 'Imagine) de conectare /3A2/A ,ref9HMail-o:nume.utilinregistrată pe un calculator cuadresa www.www.asease . .roro >n @om9nia (domeniul ro)& un fi"ier index index .htm .htm aflat >n folderul

catalogcatalog din

editurăeditură

Nume calculator conectatla Internet


17/59

Limbajul HTML#legturi 345ertext 5rotocolul HTT6

Pe $nternet& datele circulă prin %achete de date%achete de date de dimensiune fi5ă

%iecare pac;et de date con7ine >n plus un antetantet (3eader) de c97iva bytescest antet depinde de tipul de resursă informaională ce este ve;iculată pe $nternet "i con7ine informa7ii cum ar fi numărul pac;etului& adresae5peditorului& destinatarului& volumul informa7iei& etc

Potrivit tipului de resursă informa7ională (*B& +*& %TP& ) naturaantetului este specifică fiecărui protocol de transport (C;ttpC pentru Deb&CftpC pentru transferul fi"ierelor )2 adresă Deb poate fi specificată >n mod direct& fără obligativitatea preci6ării protocolului cesta este determinat direct& după tipul resursei

informa7ionale

Protocolul decomunica$ie

,--P

define"te formatul de tran!%ort aldatelor Jntre o !ur!ă "i o de!tina$ie


18/59

Limbajul HTML# legturi 345ertext domenii domenii

Pentru a putea accede la un calculator distant& acesta trebuie să posede o adre!ăadre!ă unică >n

lume ceastă adresă este dată de numele calculatoruluinumele calculatorului (3ost-ului) conectat la $nternetcest nume este constituit din mai multe domeniidomenii separate prin caracterul punct +umele calculatorului conectat la $nternet DDDasero este constituit din trei domenii (care secitesc de la dreapta la st9nga& de la cel mai cuprin6ător la cel mai precis<

;omeniul de $ară;omeniul de $ară (ro) repre6intă ansamblul calculatoarelor ce suntconectate la $nternet >n 7ara respectivă (@om9nia)5 .ro 3 .ca 3 .u! 3 .fr 3 .it 3 .!% 3 .gr 3 .%t 3 .u(

Nume calculator %e Internet

.a!e.ro

@e7eaua $nternet

IN- COM O? E;U

ASE

MI NE-

PUB CCS BCUB

CI FAB

.....UNIBUC

.....

.....4EI

4O

;omeniu %rinci%al

;omeniu'nii) !ecundar'e)

;omeniul%rinci%al

.c.ca E provincia FuGbec din Hanada

Pentru 7ările mari& codul de 7ară este precedat de codul de regiune

;omenii mari de acti#itate;omenii mari de acti#itate5 .int 3 .edu 3 .org 3 .com 3 .mil 3 .go# 3 .net


19/59

Limbajul HTML#legturi 345ertext domenii domenii

9 numele !er#iciului Internet

a!e E numele calculatorului ce are rol de !er#er =EB conectat la $+T@+Tun ansamblu de calculatoare conectate >ntr-o re7ea locală de tip intranet

cest nume este atribuit de administratorul reelei +umele este >nregistrat la $H$

;omeniu'nii) !ecundar'e)

An domeniu secundar poate avea mai multe subdomenii (ierar;ic inferioare) :nfapt numele subdomeniilor sunt numele calculatoarelor ga6dă ale subdomeniilorrespective

5 a!ea!e..roro are cig.a!e.ro sau finfin..a!ea!e..roro

oca$ie re!ur!ă informa$ională'document ,-M P;F etc.)

editura/catalog/Pdf/finantepdf

.acă se dore"te accesarea unui anumitfi"ier aflat pe un server *eb din re7ea&

după domeniu& trebuie specificată caleacătre acel fi"ier 3T8/P.%& utili69nd caseparator caracterul I/J


20/59

Acti#a$i %e r&nd'%rin clic( de mou!e)


21/59

on reactiv pentru transmiterea unui mesaj prin email


22/59

on reactiv ce permite conexiunea cu !i&ierul*storic"HTML

I ! t o r i c. ,

- M

I ! t o r i c. ,

- M

ti it i !i i l


23/59

on reactiv ce permite conexiunea cu !i&ierul+agina '*"HTML

P a g i n

a C I . ,

- M

P a g i n

a C I . ,

- M

Li b j l


24/59

Limbajul HTML# )magini reactive

I!toric.html

Pagina cig.html

e6mail

decanatLcig.a!e.ro


25/59

Limbajul HTML" )magini reactiveooronate ecranooronate imagine

Coordonatele


26/59

Limbajul HTML")magini reactive 7orm !ectangular

/Area !ha%e9K4ectH coord!9K> -H ,ref9 Kmailto:decanatLcig.a!e.roT2

Coordonatele ')

= i d t h 9 P

' R V

O )

Li b j l HTML ) i i ti


27/59

C i r c l

e

Limbajul HTML" )magini reactive erc

/Area !ha%e9KCircleH coord!9K>4H ,ref9 KI!toric.,-MT2

,eight9> '5)

=idth9P'WOO)

I ! t o r i c . , -

M

I ! t o r i c

. , - M

4 a


28/59

P o l A

Limbajul HTML" )magini reactive 6oligon

/Area !ha%e9KPolH

coord!9KAB C; EF , IXH

,ref9 KPagina CI.,-MT2

,eight9B 'WR)

= i d t h 9 A ' R R O )

; 'W7)

C'RVO)

F 'R5)

E'RVO)

' R 5 O

)

, 'R5)

I ' R 5 O )

X 'W7)

P a g i n a

P

a g i n a

C I . , - M

C I . , - M

Li b j l HTML ) i i i


29/59

Limbajul HTML# )magini reactive

.... /Ma% name9KhartaT2 /Area !ha%e9K%ătrat%ătratT coord!9K> -T ,ref9Tmailto:decanatLcig.a!e.roT2 /Area !ha%e9KcerccercT coord!9K>4T ,ref9Ti!toric.htmlT2 /Area !ha%e9K%oligon%oligonT coord!9KAB C; EF , IXT ,ref9TPagina cig.htmlT2

/3Ma%2 !I"G #$%"A&'()harta( $*C'+ nume fişier în format grafic( ,eight'nr.pixeli înălţime

idth'nr. pixeli lungime

Border'nr.puncte....

ASE.gif

one reacti#e identificate

generic !u* numele KhartahartaH


30/59

Limbaul HTMLLimbaul HTML

COS9KRRR5YZRZH


31/59

Limbajul HTML# are 87rame+9are 87rame+9

/,-M2/Frame!etFrame!et 4O=S4O=S 3 COS3 COS9K9K#5 #W .... #n#5 #W .... #nKK

8frame*order9Ke!3noH8*ordercolor9KculoareH22

/Frame !rc9KFrame !rc9KU4 document $intăU4 document $intăKK8name9Knume frameH8!crolling9Ke!3noH8nore!i


32/59

Limbajul HTML# are 87rame+9are 87rame+9

F r a m

e W

Limbaj l HTML


33/59

/,-M2

/3,-M2

Limbajul HTML#

are 87rame+9are 87rame+9

/3Frame!et2

/Frame!et 4O=S9TZWZT2/Frame !rc9TI!toric.,-MT 2

/Frame!et COS9/Frame!et COS9TZWZT2T2

/Frame !rc9Tfi!ier ,-M.htmlT name9TframeWT2

/Frame !rc9Tta*el =e*.htmlT name9Tframe5T2

F r a m

e 5

F r a m

e W

/3Frame!et2/3Frame!et2


34/59

K ;refEC!tructura.html!tructura.htmlC target9TframeWTLtructura organi6atoricaK/LK ;refECtabelM;tmlC target9TframeWTLHursuri de 6iK/LK ;refECtabelN;tmlC target9TframeWTLHursuri distantaK/LK ;refECcola*orari.htmlcola*orari.htmlC target9TframeWCLHolaborari internationaleK/L

K ;refECinfoge!t.htmlinfoge!t.htmlC target9TframeWTLHatedra de informaticaK/L

F r a m e W

i ti t 88))7 97 9


35/59

Limbajul HTML# areare interneinterne 88))7rame+97rame+9

/Iframe !rc9KASE.htmlTname9Tframe5T idth9TQT

height9TW5Tframe*order9T5T

/3Iframe2

/Iframe !rc9KFormular.htmlTname9TframeWT

idth9TQTheight9T5VT

frame*order9T5Talign9TrightT

!crolling9e!2 /3Iframe2

/Iframe !rc9KU4 document $intăT8name9TframeWK

idth9TQTheight9T5VT8frame*order9KnK8align9Kl3c3rK8!crolling9e!3no2

/3Iframe2

T b l :";


36/59

Tabele :";Tabele :";

-itlul ta*elului

'CAP-IONCAP-ION6-o%)

-itlul ta*elului'CAP-IONCAP-ION6Bottom)

-a*el

'-ABE)Ca% deta*el'-,)

4&ndta*el'-4)

Celulăta*el

'-;)

Celule fu


37/59


/-ABE 8BO4;E49n5 8BCOO49denumire6culoare 8CESPACIN9nW 8CEPA;IN9nR

8=I;-,9nQY8AIN9left[center[right

8F4AME9a*o#e[*elo[h!ide![#!ide![lh![rh![*o12

/CAP-ION 8AIN9to%[*ottom[left[right2 Titlu ta/el Titlu ta/el /3CAP-ION2

/-, 8?AIN9to%[middle[*ottom8AIN9left[center[right

8COSPAN9n 84O=SPAN9m8=I;-,9l 8,EI,-9h8BCOO49denumire\culoare8NO=4AP2Text ce define0te intrarea 1ntr-o celulă a antetului

/3-,2

.......


38/59


......./-4 8AIN9left[center[right 8?AIN9to%[*ottom[middle 8BCOO49denumire\culoare2......./3-4 2

/-; 8?AIN9to%[middle[*ottom 8AIN9left[center[right8COSPAN9n 84O=SPAN9m8=I;-,9l 8,EI,-9h8BCOO49denumire\culoare

8NO=4AP2Text ce define0te intrarea 1ntr-o celulăText ce define0te intrarea 1ntr-o celulă/3-;2......./3-ABE2


39/59


40/59


41/59

Se trimit datele %e !er#er6ul =EB

Se confirmă modul de tran!mitere adatelor 'Jn ace!t ca


42/59

-ormulare ./0" Tipuri de controale

Ca!etă -E-

MU-IINIE

IS-G;E4UAN-G

BU-OANE ;EOP^IUNI 'radio)

CASE-E ;E ?AI;A4E

IS-G ;E4UAN-G MU-IOP^IUNI

Ca!etă -E-

Ca!etă -E-

Buton

-4ANSMI-E4E ;A-E

Buton

_-E4E4E ;A-E

Ca!etă -E-\ASCUNS


43/59

7ormulare :";. $intaxa general

/,-M2/FO4MFO4M ME-,O;9KPo!t3etH

AC-ION9KU4 !cri%t\CI 3 adre!ă e6mailH

NAME9Knume formularH 8-A4E-9Knume frameH2... .../3FO4M3FO4M2

/3,-M2

7ormulare :"; a+ete e text


44/59

7ormulare :";. a+ete e text

/INPU- ->PE9Ttext text T NAME9Tnume\controlT

8?AUE9K#al.im%licită te1tH8SIE9Klungime afi"areK8MAEN-,9Knr.ma1im de car.admi!eH2

7 l :";


45/59

7ormulare :";.a+ete 8multilinie / inviibile9 e text

/-E-A4EA NAME9Tnume\controlT84O=S9Knr.linii de afi"areH8COS9Knr.coloane de afi"areK

/3-E-A4EA2

/INPU- ->PE9KhiddenhiddenT NAME9Tnume\controlT8?AUE9Kte1t cu atri*ut de #i


46/59

7ormulare :";. a+ete e o5iuni

/INPU- ->PE9Kchec2/ox chec2/ox H NAME9Knume\controlH8C,ECDE; 8;ISABE;2 etichetă text

/INPU- ->PE9KradioradioH NAME9Knume\controlH

8C,ECDE; 8;ISABE;2 etichetă text

7ormulare :"; Li+te erulante


47/59

7ormulare :";. Li+te erulante

/SEEC- NAME9Knume\controlH8SIE9K!H8MU-IPE2

/OP-ION 8SEEC-E;2opt opt 33 ... /OP-ION 8SEEC-E;2opt opt nn

/3SEEC-2

Afi"area

unei !ingureo%$iuni

'Si


48/59

7ormulare :";. ;utoane e coman/INPU- ->PE9K $u/mit $u/mit H Name9KNume controlH

?AUE9Ketichetă *utonH 8;ISABE;2

/INPU- ->PE9K *eset *eset H Name9KNume controlH

?AUE9Ketichetă *utonH ;ISABE;2/INPU- ->PE9K Image ImageH Name9KNume controlH

S4C9K!%ecificator fi"ier graficH

8,eight9n 8=idth9m 8;ISABE;2

7ormulare :"; Tem


49/59

7ormulare :";. Tem


50/59


51/59

Acti#a$iActi#a$ilin(6ullin(6ul


52/59

e0inirea 5ro5rietilor e +til ,nH"# ?i a5elarea lor ,n ;@A

/SStletle --%e9Tte1t3c!!%e9Tte1t3c!!T2

/3Stle3Stle2Se define!c %ro%rietă$ile de !til Jn antetSe define!c %ro%rietă$ile de !til Jn antet

Se a%elea


53/59

7oi e +til e0inirea 5ro5rietilor e +til ,n antetul ocumentului

-ag %ro%rietate5:#aloare5`%ro%rietateW:#aloareW %ro%rietaten:#aloaren

-ag5...-agn %ro%rietate5:#aloare5` ...

-ag:atri/ut %ro%rietate5:#aloare5` ...

-ag5.nume3 %ro%rietate5:#aloare5` .....-ag5.nume4 %ro%rietate5:#aloare5` .....

.nume5 %ro%rietate5:#aloare5` .....

,R font6famil:ArialTArial Blac(T`font6!tle:italic` font6!i


54/59

7oi e +til a5elarea ,n cor5ul e text ;@A a 5ro5rietilor e +til

/P CASS9Tmo#T2Paragraf !cri! cu mo# /3P2/P CASS9Tro!uT2Paragraf !cri! cu ro!u /3P2/P CASS9TformatareT2Paragraf cu a%licarea unui !til generic /3P2

/,R2E1em%lu de ,R %entruArialitalicro!u/3,R2

/P2/I2E1em%lu/3I2/3P2

/A ,ref9T


55/59

e0inirea 5ro5rietilor e

+til in-line 8,n ;o49

SeSe define!cdefine!c "i !e a%elea


56/59

o e +t e ea 5 o5 et o e +t e 8 tag u @ 9

/BO;>2

/-ag Stle9K%ro%rietStle9K%ro%riet55:#aloare:#aloare55`̀ ...... %ro%riet%ro%rietnn:#aloare:#aloarenn HH2-e1t /3-ag2

...../3BO;>2E1em%lu:/,5 S->E9KS->E9KFFont6famil:ont6famil:!!cri%t`cri%t` CColor:magenta`olor:magenta` FFont6ont6eighteight:*old`:*old` FFont6!i


57/59

''!e declară !tilurile!e declară !tilurile))

..... .....` .....` .......... .....` .....` .....

..... .....` .....` .......... .....` .....` ...../in( 4el9..... 2/in( 4el9..... 2

Se reali


58/59

5ro5rietilor e+til ,ntr-un 0i?ierextern $$

/,-M2

/,EA;2/IND 4el9!tle!heet -%e9Hte1t3c!!H ,ref9Hnume3adre!a fi"ier.CSSH2/IND 4el9!tle!heet -%e9Hte1t3c!!H ,ref9Hnume3adre!a fi"ier.CSSH2 /3,EA;2

/BO;>2

/A NAME9T


59/59

5 5 5 5 g

font6famil: font5 fontW...font6famil: font5 fontW... sta/ilirea unei liste de fonturi disponi/ile8 separate prin caracterul 9irgulă

font6!i

1. prezentarea limbajului html (curs)

Documents