curs ziua 1 - html

32
CURS DE WEB DESIGN INTRO FOR BEGINNERS 25-28 MAI 2015 ORELE: 09:30 – 14:00 MĂNESCU CLAUDIA ANA-MAR IA CLAUDIA.MANESCUA!ANCONSULTING.RO

Upload: laurian-wolfy

Post on 17-Feb-2018

249 views

Category:

Documents


2 download

TRANSCRIPT

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 1/35

CURS DE WEB DESIGNINTRO FOR BEGINNERS25-28 MAI 2015

ORELE: 09:30 – 14:00

MĂNESCU CLAUDIA ANA-

CLAUDIA.MANESCUA!ANCONSULTI

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 2/35

"IUA 1: #TML

1. Introducere în HTML2. Link-uri și atribute3. Atributul <style> și eticete de stili!are". #o$entarii și %or$atare&. Tabele'. Liste(. )le$ente bloc*. #lase și introducere în #++,. Layout-ul unui ebsite utili!nd HTML1/.0esonsie ele$ents și utili!area ootstra

11.)ticeta <i%ra$e>12.#ulori și alori13.)le$ente 4aa+crit1".)ntit56i și si$boluri în HTML1&.HTML 7or$s

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 3/35

1. I8T09:;#)0) 8 HTML

1. C$ %&'$()&* #TML +, ( $ /'$+$2. S( (6,&,, +, 7$((,( DOCT;<E=3. E7,($ #TML4. A&$ +, )$(-(,>$$5. E$)$&$$ 7$ >(?* 7,& >7@=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 4/35

1.1 C$ %&'$()&* #TML +, ( $ /'$+$

• #TML $'$ $'($( 7$ ( H@$ T$ M( L(&

• I& ($ ,&$ #TML $$?,&( $,$ 7$ $,$$,)>( 7$ )(($ ($ '( ( >(?( $(,, &, ',$ J

• F,$($ 7,&$ ($'$ $,$$ 7$',$ & &,& 7$7)$&.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 5/35

1.2 S( (6,&,, +, 7$((,( DOCT;<E=• O,$ (6,&( J$> $>,$ '( &,&( (&$ ', (6,&,, K$(7 ', >7@. I& (&$ '&

,$(,$ ($ & '$ (7 $) ', ',,$ (,($ ', $6(,$ 7)$&$$ $$

>7@ '$ ( $6(', &,& ,?( ( (6,&,, J$>

• A$('( 7$((,$ DOCT;<E= (( >J'$ '( ,&$$$?$ ', '( $7( ,& )7 &,& (6,&,,

• #TML5:

DOCT;<E )=

• #TML 4.01:

DOCT;<E #TML <UBLIC -W3CDTD #TML 4.01 T(&',,&(EN:JJJ.J3.6TR)4'$.77=

• #TML 1.0:

DOCT;<E ) <UBLIC -W3CDTD #TML 1.0 T(&',,&(EN:JJJ.J3.6TR)1DTD)1-(&',,&(.77=

• E$) L(@

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 6/35

1.3 E7,($ #TML

• A7>$ D$()J$($

• M,'/ E$'',& W$>

• CP$$C #TML E7,

S>,)$ T$ E7, • N$(7

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 7/35

1.4 A&$ +, )$(-(,>$$

• A&$ $'$ ?&( ,& ($ 7$H&$', , (6,&,, ', $$)$&$$7$',,$.

• A$('( ?&( & $'$ 7$ >,$, ,?,>,( 7( ,)( '( $',)(& ,& $$( $ ,$'$ SEO KS$( E&6,&$ O,),?(

• M$(-(,>$$ 7$H&,$ ,& $(7=$(7= &,& ,&/)($& SEO

• E$) (&$

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 8/35

1.5 E$)$&$$ 7$ >(?* 7,& >7@=

• E$)$&$$ 7$ >(?( 7,& B7@ '& $,$$$ ', (,>$$.

• E,$$$ '& 7$ /)( $,$(=Q$,$(=

• A,>$$ '& 7$ /)( $,$( &)$(,> (($ (,>=$,$(=

• I& &,&($ ) /', )(,, $)$&,:• Tag sau Eticheta - /', $& ( '$,H( $6,&, ($ 7)$&, HTML

,&$$( $, >J'$-. Tag-urile  ($( ($('( ,&/(,'($: <eticeta>- Element  - $'$ & tag complet  ((&7 & < eticeta > 7$ 7$',7$$ ', &,&,7$$ <= eticeta >.- Atribut  - $'$ /', $& ( )7,H( (($( &, $$)$& ,& HTML. D$ >element are mai multe atribute.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 9/35

2. LI8-;0I ?I AT0I;T)

1. I)(6,&,2. A&$3. A,>$$

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 10/35

2.1 I)(6,&,

• I)(6,&,$ '& $,$$ )(, (($ H&( 7$ $,$( H,&7 ,&' ,& $ 7$ 7$',7$$

• A,> '  $>,$ '( &,&( (7$'( H?,( ( ,)(6,&,,

• E$) ,)(6,&$

• D$ $$) 7(( ,)(6,&$( '$ (V( ,& ($(', /7$ (6,&( ) 7 ( ((( ,& /$

DOCT;<E )=

)=

>7@=

,)6 '),&.&6=

>7@=

)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 11/35

2.2 A&$

A&$$ '& $6(,$ ,&$ (6,&, '( ?&$ 7,& (6,&,• L,&- $'$ 7$H&, $,$$$ (= ', (= ', ($ (,>$$:

href  - (7$'( H',$, 7$',&(,$target  - ,& $ /$$('( '$ ( 7$',7$ H',$ 7$',&(,$title - ),( 7$',$$ (',(( $6(,, (H'(( ,& ))$& ,& ($ )'$- '$ (V( 7$('

• E$) (&( ,&$&(.

9DOCT;<E G)=

9G)=

9>07@=

9( G$/SM(7$'(-H',$M (6$SMR>(&M ,$SM,M=N)$ ($ '$ 70$'$

(H'( 9(=

9>07@=

9G)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 12/35

2.3 A,>$$

• A,>$$ '& (($,',, K,$(, ($ $,$$

• E$)$ 7$ (,>$: ( 7,'(>$7 $/ ,7 ' '@$ ($ (6$

• A,>$$ '$ & &)(, ,& $,$( 7$ ,&$

• D(( & (6 & ($ &,, & (,> (&, >J'$- &',7$($ (,$ ,),,$ ($ $,$$, $'$,$.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 13/35

3. AT0I;T;L <+T@L)> ?I )TI#H)T) :)+TILIA0)

•A,> '@$ $'$ ,,?( $& /)(($( (,7( ( $,$$ ,,?($ ,

• D$', ,& ?,$$ &('$ '$ $/$( ,,?($( CSS KC('(7,&6 S@$ S$$' $&(,($( ',, ('( $$)$&$ $'$ $)(&7(( ,&$$6$$( ($'($ $'$ & ,&')$& ( ,&7$)(&(

• S$ $$) /)(($( &, > 7$ , $ '$ ($ /($ ,& /$ )(9DOCT;<E G)=

9G)=

9>07@=

9G1 '@$SM$B-(,6&:$&$M=A$'( $'$ & G$(7,&6 $&(9G1=

9 '@$SM00: $7M=A$'( $'$ & ((6(/.9=

9>07@=

9G)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 14/35

". #9M)8TA0II ?I 790MATA0)

1. C)$&(,, ,& #TML2. F)(($ #TML3. C,($ (7$'$ (>$,$,4. E$)$&$ ?($ 7$ /)(($

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 15/35

4.1 C)$&(,, ,& #TML

C)$&(,,$ ,& ,$ ,)>( 7$ 6()($ ',($ '( )(($ ( 7$ ( (( 7$?(&, (&7 ,', $,?,$'$ 7

• A$'$ )$&(,, ('&7$ ,&(& >(, 7$ 7 '( ((6(/$ $ &$, ,,&',&,.

-- A$'( $'$ & )$&(,--=

-- ,& (7 ($', )$&(, $( '( ('&7 (&),$ ,&/)(,, $) ,)(6,&$()(($

,)6 >7$0 ',)&(,&.6 (M&(,&=

--=

--,/ IE 8X=

  .... (,, ,&7$ $ #TML. A$'( ( H ,&$$( 7( 7$ ($ & >J'$ IE....

$&7,/X--=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 16/35

4.2 F)(($ #TML

• F)(($( '$ /($ (&,$ 7$ $$)$& '(6, 7$ $$)$&$

• R$$?,&( & 6$' 7$

( $$( $ () (? ((,> '@$

• D$ 7(( ($('( ),,?( $,$( '@$.

9DOCT;<E G)=

9G)=

9G$(7=

9'@$=

>07@ Y>(6304&7-003:,6G63$@Z

G1 Y003:>4$Z

5 Y003:63$$&Z

9N'@$=

9NG$(7=

9>07@=

9G1=A$'( $'$ 4& G$(7,&69NG1=

95=A$'( $'$ 4& 5(3(63(/.9N5=

9N>07@=

9NG)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 17/35

4.3 C,($ (7$'$ (>$,$,

• C,($: [=[= >[$=>[$=,$=,$=

• A7$'$: (77$''=(77$''= 7/&=7/&=

• A>$,$,: (>>=(>>=.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 18/35

4.4 E$)$&$ ?($ 7$ /)(($

•A&, (7 7,'() 7$'$ /)(($( $$)$&$ & $'$ &$(((('( 7$H&,) ', $ ($ 7,) '( , (,()

• E,'( ($( $,$$ $7$H&,$ ($ ,& ,& ( &') (&, '( /)(() ((6(/$$: >= $)= ,= ')(= '&6= '>'= ,&'= 7$= )(=.

7, (''$()$ '@$/&-',?$:120\=

>=A$' $ $'$ >7-,.>=>=>=

,=A$' $ $'$ ,& ' ,(,,=>=>=

A$' $ $'$ 7$ /)('=$&$&,((.'=>=

7,=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 19/35

&. TA)L)

1. D$H&,$2. A,>$

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 20/35

5.1 D$H&,$

• T(>$$$ '& 7$H&,$ 7$ $,$( (>$=(>$=

• R(&7,$ K,&,,$ (>$$ '& 7$H&,$ 7$ $,$(==

• D($$ (&7, K$$( $ 7$ >,$, &',7$() (

'& 7$H&,$ ( 7=7=

• U& (? '$,( 7$ 7($ 7$ (>$ $$?,&( ($$$ 7$7$H&,$ ( ==.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 21/35

5.2 A,>$

• '(& - $& ( &, )(, )$ (&$

• J'(&- $& ( &, )(, )$ (&7,

• >7$ – $& ( '$( 6',)$( )(6,&, &, (>$

• (,&= - $'$ $,$( ,,?(( $& ( $(,?(7$',$$( (>$,.

• E$) (>$

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 22/35

'. LI+T)

1. L,'$ &$7&($2. L,'$ 7&($3. L,'$ ,?&($ ', ,'$ 7$',,$

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 23/35

].1 L,'$ &$7&($

• L,'$$ '& & )7 ',) 7$ 6(&,?($ ( ,&/)(,$, ', H &$7&($ 7$ 7$H&,,,

• A$'$ ,'$ '& 7$,),($ 7$ $,$$$ = ', = ,( $$)$&$$ 7$

• E$)$&$$ ,'$, H (,(,?($ /',&7 (,> @$ ($ ($ ( '[($ ,$ ', 7,'.

9 '@$SM,'-'@$-@$:'[($M=

  9,=C(/$(9,=

  9,=C$(,9,=

 9,=L($9,=

9=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 24/35

].2 L,'$ 7&($

• A$'$ ,'$ '& 7$,),($ 7$ $,$$$ = ', = ,( $$)$&$$', ,=

• E$)$&$$ ,'$, H (,(,?($ /',&7 (,> @$ ($ ((,$ A K,$$ )(, ( K,$$ ),, I K,/$ )(&$ )(, , K,/$ )1 K,&$( 7$/(.

@$I=

  ,=C(/$(,=

 ,=C$(,,=

 ,=L($,=

=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 25/35

].3 L,'$ ,?&($ ', ,'$ 7$',,$• L,'$ 7$',,$

•A$'$ ,'$ '& 7$,),($ 7$ $,$$$ 7= ', 7=

• T$)$&,, ,'$, '& 7$,),(, 7$ $,$$$ 7= ', 7= ,( 7$H&,,,$ $)$&, 7$ 77= ', 77=.

• L,'$ ,?&($:

• ,,?() ,$($( 7,'(@: ,&,&$

• E$) L,'( ,?&((

• E$) 7$ L,'$ ,)>,($

97=

 97=C(/$(97=

 977=->(( H$>,&$977=

 97=L($97=

 977=->(( $$977=

97=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 26/35

(. )L)M)8T) L9#

• E)$&$$ > ,&$ ', '$ $),&( K,& )7 >,'&, ,&,$ (&, (&7 '& (H'($ ,& >J'$

• D$ $$): 1= = = (>$=

• E,'( ', ', $$)$&$ (H'($ $ ($$(', ,&,$ $

7= (= ,)6=• U& $$)$& > 7$ &,$ 6$&$( $'$ 7,=7,=

• U& $$)$& > ,& ,&,$ $'$ '(&='(&=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 27/35

*. #LA+) ?I I8T09:;#)0) 8 #++DOCT;<E G)=

G)=

G$(7=

'@$=

.,,$' Y

  >(634&7-3:>(

  3:JG,$

  )(36,&:20B

  (77,&6:20B

Z

N'@$=

NG$(7=

>7@=

7, (''S,,$'=

G2=WG( ,' L3$) I'4)NG2=

=

L3$) I'4) ,' ',)@ 74))@ $B / G$ 3,&,&6 (&7 @$'$,&6 ,&74'3@. L3$) I'4) G(' >$$& G$ ,&74'3@̂' '(&

$B $$3 ',&$ G$ 1500'F JG$& (& 4&&J& 3,&$3 ( 6($@ / @$ (&7 '3()>$7 , )($ ( @$ '$,)$&

'43,$7 & &@ H$ $&43,$'F >4 (' G$ $( ,& $$3&, @$'$,&6F 3$)(,&,&6 $''$&,(@ 4&G(&6$7. I J('

G$ 19]0' J,G G$ 3$$('$ / L$3('$ 'G$$' &(,&,&6 L3$) I'4) (''(6$'F (&7 )3$ 3$$&@ J,G 7$' 4>,'G

,$ A74' <(6$M($3 ,&47,&6 $3',&' / L3$) I'4).

N=

N7,=

N>7@=

NG)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 28/35

,. LA@9;T-;L ;8;I B)+IT) ;TILIC8:HTML

• <$& ( 7$H&$ (@- &$, (6,&, $ )(, ,&7,( $,,?() $$)$&$ 7$ , 7,=

• A$'$( H ,7$&,H($ 7$ )(($$:

7, ,7$(7$=7,=

7, ,7&(=7,=7, ,7'$,&=7,=

7, ,7/$=7,=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 29/35

1/. 0)+D98+IE) )L)M)8T+ ?I ;TILIA099T+T0AD

• <$& ( ,,?( ,,$ $$)$&$ $'&',$ ($'$($>, 7$H&,$ ( CSS ,&$ $,$$$ 7,& $(7$ 7$ '@$=

• A$&(, '$ ($ ($( B'( ,& /$ )(:9G$(7=

 9)$( G('$SM/-8M=

 9)$( &()$SM,$J0M 0&$&SMJ,7GS7$,$-J,7GF ,&,,(-'($S1M=

 9,& $SM'@$'G$$M

G$/SMG:)(B7&.>00'(7&.0)>00'(3.3.4''>00'(.),&.''M=

9G$(7=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 30/35

11. )TI#H)TA <I70AM)>

E,$( ,/()$= $'$ ,,?(( $& ( ,&(( (( (6,&( ,& ,&$'( $& ( ,&(( >,$$.

9DOCT;<E G)=

9G)=

9>07@=

9,/()$ 'SM7$)0R,/()$.G)M '@$SM>07$:5B 70$7 $7M=9,/()$=

9>07@=

9G)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 31/35

12. #;L90I ?I EAL90I

• C,$ ,& >J'$ H )>,&(,, 7$ &)$$ &7$ 0 ( H (,, &$6$ ,( / K15 ,& $(?$,)( ( H (>.

• D$ $$):

• <$& ,'( )$( 7$ , &'(,

:)--7$'.,&/

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 32/35

13. )L)M)8T) 4AEA+#0IDT

E$)$&$$ 7$ , _S K_((S, '& ,,?($ $& ,&$(,&$( ,,?(,,• E$) _S.

',=

7)$&.6$E$)$&B@I7K7$).,&&$#TML #$ _((S,

',=

&',=D,& (($ >J'$- ( & ,&$$$(?( _((S,&',=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 33/35

1". )8TITFGI ?I +IM9L;0I 8 HT

• E&,(,$ H 7$ /)(:`entity_name

'(

`aentity_number 

• S,)>,$ $7$ ,& 7 ',)>, )($)(,$'(,, ',)>, $& )&$?, '.(.).7.

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 34/35

1&. HTML 790M+Folosind formularele webdesignerul sau administratorul site-ului poate colecta diverse informatvizitatori.Cele mai importante atribute ale etichetei <form> sunt action si method.action metioneaza adresa scriptului care va interpreta formularul. Aceste scripturi pot fi scrise PP sau Pearl.method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mde date. post - datele sunt trimise separat si sunt permise cantitati mari de date.

E$) /)(.9/03) (''M/03)-,&,&$M=

 97, (''M/03)-63045M=

  9(>$ /03M$B()5$I&541N()$2M=N()$9(>$=

  9,&541 1@5$M1$B1M (''M/03)-0&130M ,7M$B()5$I&541N()$2M 5($G07$3M_(&$

 97,=

 97, (''M/03)-63045M=

  9(>$ /03M$B()5$I&541E)(,2M=E)(,9(>$=

  9,&541 1@5$M$)(,M (''M/03)-0&130M ,7M$B()5$I&541E)(,2M

5($G07$3M(&$.70$$B()5$.0)M=

 97,=

 9>4110& 1@5$M'4>),1M (''M>1& >1&-7$/(41M=S$&7 ,&,1(1,0&9>4110&=

9/03)=

7/23/2019 Curs Ziua 1 - HTML

http://slidepdf.com/reader/full/curs-ziua-1-html 35/35

!A MULTUMESC

C

C(7,( A&(-M(,( M

C(7,(.M(&$'((&&'b40.c2c.