Unidad III Lenguaje de Presentación

8/16/2019 Unidad III Lenguaje de Presentación

1/14

Programación WEB

UNIDAD III LENGUAJE DEPRESENTACIÓN

3.1. INTRODUCCION

3.2. SINTAXIS DEL LENGUAJE DE PRESENTACIÓN3.3. SELECTORES3.4. TIPOS DE MEDIOS3.5. MODELOS DE CAJA3.6. APLICACIÓN EN DOCUMENTO WEB

L.I Vicente de León Castrejón Página 1


2/14

Programación WEB

3.1 INTRODUCCIÓN

Un len!"#e $e %&e'en(")*+n $e,*ne !n )-n#!n(- $e e(*!e("' / "(&*0!(-' l*$-' /!e -,&e)en !n '*n*,*)"$- *'!"l %"&" )"$" eleen(- $el len!"#e '*n- !e -,&e)e!n ne&- $e &el"' '*n()(*)"' %"&" %-$e& )&e"& $-)!en(-'. Un- $e l-' len!"#e'

' )-!ne' %"&" %&e'en("& *n,-&")*+n e0 e' 7TML.

3.2 SINTAXIS DEL LENGUAJE DE PRESENTACIÓN

El 7TML e' !n len!"#e $e "&)"' !e 0"'" '! '*n("8*' en !n eleen(- $e 0"'e "l!e ll""-' e(*!e(". A (&"9' $e l"' e(*!e("' "-' $e,*n*en$- l-' eleen(-'$el $-)!en(- )-- enl")e' %&&",-' *ene' e(). A': %!e' !n $-)!en(-7TML e'("& )-n'(*(!*$- %-& (e8(- / !n )-n#!n(- $e e(*!e("' %"&" $e,*n*& l" ,-&")-n l" !e 'e (en$& !e %&e'en("& el (e8(- / -(&-' eleen(-' en l" %*n".

L" e(*!e(" %&e'en(" ,&e)!en(een(e $-' %"&(e'; Un" "%e&(!&" $e ,-&" ene&"l


3/14

Programación WEB

7-l" e'("-' en el %&&",- 1

A@-&" @e-' )"0*"$- $e %&&",-

A$e' $e (-$- e'(- !n $-)!en(- 7TML @" $e e'("& $el**("$- %-& l" e(*!e("


4/14

Programación WEB

0-$/=

@(l=

L"' "/')!l"' - *n')!l"' '-n *n$*,e&en(e' "l e')&*0*& e(*!e("'. A n-("& !e l"'e(*!e("' %!e$en 'e& e')&*("' )-n )!"l!*e& (*%- $e )-0*n")*+n $e "/')!l"' /*n')!l"'.


5/14

Programación WEB

!n" $e n!e'(&"' %*n"'. KH!9 '!)e$e '* en )*e&(-' )"'-' !e&e-' !'"& !n %&&",-)-n )"&")(e&:'(*)"' $*,e&en)*"$"'

Se!e"tores #e "!ses

L" )!e'(*+n %l"n(e"$" en el %!n(- "n(e&*-& 'e &e'!ele )&e"n$- !n" n!e" )l"'e $e

%&&",-. El 'ele)(-& $e )l"'e' )-n'(" $e !n %!n(- . 'e!*$- %-& el n-0&e $e l")l"'e !e @"/"-' )&e"$- el n-0&e l- ele*-' n-'-(&-'. S!%-n"-' !e %"&"%!0l*)"& !n &e%-&("#e !e&e-' )-n("& )-n !n %&&",- e'%e)*"l !e $en-*n"&e-'%&e!n(";P.%&e!n(" ,-n(Fe*@(; 0-l$ ,-n(F'(/le; *("l*)A@-&" " l-' %&&",-' !e )-&&e'%-n$en " l"' %&e!n("' $el en(&e*'("$-& en el'!%!e'(- &e%-&("#e le' "&e"-' el "(&*0!(- CLASS $en(&- $e l" "&)" $e l"%*n" 7TML;


6/14

Programación WEB

-l"n(" ,-n(F'(/le; *("l*)En el %&*e& )"'- "!el eleen(- 71 )-n ID(*(!l-1 $e l" %*n" 'e& )en(&"$-.En el 'e!n$- )!"l!*e& eleen(- !e (en" "'*n"$- el "(&*0!(- ID-l"n(" *&en *(l*)"'.L-' 'ele)(-&e' $e ID n- (*enen el &"$- $e ,le8*0*l*$"$ $e l-' 'ele)(-&e' $e )l"'e'

%-& e#e%l- %e&- '-n !n" -%)*+n %"&" "!ell-' )"'-' en !e 'e ne)e'*(e *$en(*,*)"&$e -$- e8)l!'*- !n $e(e&*n"$- eleen(- $e l" %*n".

Se!e"tores #e tri%&tos

L-' 'ele)(-&e' $e "(&*0!(-' %e&*(en 'ele))*-n"& eleen(-' $e l" %*n" 'en '!'%&-%*e$"$e' - el "l-& "'*n"$- " e'("' %&-%*e$"$e'. S!%-n"-' !e @e-')&e"$- "&*"' )l"'e' $e %&&",-' / !e&e-' *$en(*,*)"& " (-$-' "!ell-' !e (en"ne'%e)*,*)"$- el "(&*0!(- CLASS )!"l!*e&" 'e" el "l-& $e e'e "(&*0!(- %"&" $"&le!n "&en *?!*e&$- $e 1 );PCLASS "&*nFle,(; 1) A@-&" '* !e&e-' 'ele))*-n"& '-l"en(e "!ell-' %&&",-' !e (en"n el "(&*0!(-CLASS%&e!n(" $e0e-' !'"&;PCLASS%&e!n(" "&*nFle,(; 1) P-$e-' !'"& "&*-' 'ele)(-&e' $e "(&*0!(-' %"&" @")e& "n ' e'%e):,*)" l" &el".S!%-n"-' !e " )*e&(-' %&&",-' )-n )l"''%&e!n(" ("0*9n le @e-'"'*n"$- el "(&*0!(- WIDT7 / !e&e-' $"&le !n "&en *?!*e&$- $e 2 ).PCLASS%&e!n("WIDT7 "&*nFle,(; 2) 7e-' *'(- $-' ,-&"' !e %!e$en (-"& e'(-' 'ele)(-&e'; "(&*0!(- /"(&*0!(-"l-&. A$*)*-n"len(e e8*'(en $-' ,+&!l"' %"&" e'(e (*%- $e 'ele)(-&e'!e 'e !(*l*?"n )!"n$- " !n $e(e&*n"$- eleen(- 'e le @"n "'*n"$- !n" l*'(" $e"l-&e' en e? $e !n '-l- "l-& ' "$el"n(e en e'(" !:" e&e-' l-' )"'-'e'%e):,*)-'."(&*0!(-V"l-& 'e !'" %"&" 'ele))*-n"& l-' eleen(-' !e (*enen )-- "(&*0!(-!n" l*'(" $e %"l"0&"' 'e%"&"$"' %-& e'%")*-' !n" $e l"' )!"le' e' e8")("en(e"l-&."(&*0!(-"l-& 'e !'" %"&" 'ele))*-n"& l-' eleen(-' !e (*enen )-- "(&*0!(-!n" l*'(" $e %"l"0&"' 'e%"&"$"' %-& !*-ne' )-en?"n$- %-& "l-&.e"-' !n e#e%l- $e l-' $-' )"'-';IMGALTVl--(*%- 0-&$e&; '-l*$

PLANGen ,-n(F,"*l/; T*e' Ne R-"n Se&*,

El %&*e&- 'ele))*-n" l"' *ene' )!/- "(&*0!(- ALT (*ene en '! "l-& l" %"l"0&"l--(*%- )-- en ALTl--(*%- $e l" )-%":" - ALT9'(e e' n!e'(&- l--(*%-.El 'e!n$- 'ele))*-n" l-' %&&",-' !e (*enen "'*n"$- )-- "l-& $el "(&*0!(-LANG %"l"0&"' !e )-*en?"n )-n en )-- enFUS - enF)-)ne/.H!*?' (-$- e'(- le' %"&e?)" !n" )-%l*)")*+n e8)e'*" %e&- $e0e )-n'*$e&"&'e!e el len!"#e $e l"' CSS e' "0"&)"(*- e *n(en(" '"(*',")e& ne)e'*$"$e' !e!*?' n-'-(&-' *n-&"-' )-- %!e$e 'e& el @e)@- $e (ene& $e e?)l"& $*'(*n(-'

len!"#e' en n!e'(&-' $-)!en(-' / %-$e& "%l*)"& " )"$" !n- !n e'(*l- %"&(*)!l"&.T"0*9n 'e $e0e (-"& en )!en(" !e l"' 7-#"' $e E'(*l- e'(n %en'"$" n-



7/14

Programación WEB

'-l"en(e %"&" 7TML '*n- %"&" -(&- len!"#e' )-- XML %"&" l-' )!"le' )*e&(-''ele)(-&e' %!e$en &e'!l("& $e "/-& !(*l*$"$ !e en 7TML.

Se!e"tor &ni'ers!

El 'ele)(-& !n*e&'"l 'e e')&*0e )-n !n "'(e&*')- / &e%&e'en(" " )!"l!*e&

eleen(- $e l" %*n". P-& e#e%l- )-n; )-l-&; &e$ T-$-' l-' eleen(-' $e l" %*n" (en$&n )-- )-l-& $e %&*e& %l"n- el &-#-. S*nen)*-n"&l- /" @e-' !'"$- en l-' e#e%l-' "n(e&*-&e' $e e'(" %*n" "l!n-''ele)(-&e' !n*e&'"le' %-&!e )!"n$- 9'(e " ")-%""$- $e -(&- 'ele)(-& 'e%!e$e -*(*&. P-& e'- l-' '*!*en(e' $-' 'ele)(-&e' '-n e8")("en(e *!"le';-l"n(" ,-n(F'(/le; *("l*)-l"n(" ,-n(F'(/le; *("l*) > el "'(e&*')- 'e @" -*(*$- >Re'!l(" $e !(*l*$"$ )!"n$- !e&e-' *n*)*"l*?"& (-$-' l-' eleen(-' $e n!e'(&"%*n" )-n $e(e&*n"$"' %&-%*e$"$e' ene&"le'.

Agr&$(iento

C!"n$- (ene-' "&*-' 'ele)(-&e' !e )-%"&(en l"' *'"' $e)l"&")*-ne' %!e$en"&!%"&'e en !n" l*'(" 'e%"&"$" %-& )-"' . N- 'e (&"(" $e !n (*%- $e 'ele)(-&e'%e)*"l '*n- $e !n" ,+&!l" "0&e*"$" %"&" "%l*)"& l"' *'"' %&-%*e$"$e' "$*'(*n(-' 'ele)(-&e' en !n '-l- %"'-. P-& e#e%l- '* (ene-';71 ,-n(F,"*l/; A&*"l S"n'F'e&*,P ,-n(F,"*l/; A&*"l S"n'F'e&*,TABLE ,-n(F,"*l/; A&*"l S"n'F'e&*,-l"n(" ,-n(F,"*l/; A&*"l S"n'F'e&*,

P-$e-' '*%l*,*)"&l- $e e'(e -$-;71 P TABLE -l"n(" ,-n(F,"*l/; A&*"l S"n'F'e&*,

3.4. TIPOS DE MEDIOS

7TML %e&*(e " l-' "!(-&e' $*'e"& $-)!en(-' !e '"!en %"&(*$- $e l"')"&")(e&:'(*)"' $e l-' e$*-' en l-' !e el $-)!en(- "/" " 'e& &e%&e'en("$-%.e#. %"n("ll"' &,*)"' %"n("ll"' $e (ele*'*+n $*'%-'*(*-' $e "n- n"e"$-&e'0"'"$-' en -? $*'%-'*(*-' ()(*le' B&"*lle e().. Al e'%e)*,*)"& el "(&*0!(- e$*"l-' "!(-&e' %e&*(en " l-' "en(e' $e !'!"&*- )"&"& / "%l*)"& l"' @-#"' $e e'(*l- $e

"ne&" 'ele)(*".L"' '*!*en(e' $e)l"&")*-ne' $e e#e%l- 'e "%l*)"n " eleen(-' 71. C!"n$- 'e%&-/e)(en en !n" &e!n*+n $e ne-)*-' (-$-' ell-' "%"&e)e&n en "?!l. C!"n$- 'e*%&*"n "%"&e)e&n )en(&"$-'.


8/14

Programación WEB

E'(e e#e%l- ""$e e,e)(-' $e '-n*$- " l-' :n)!l-' %"&" '! !'- en '"l*$"' %-& -?;)'' e$*""!&"l= A )!eF0e,-&e; !&*0ell."*,, )!eF",(e&; !&*$-n."STLE=

7EAD= El )-n(&-l $e e$*-' e' %"&(*)!l"&en(e *n(e&e'"n(e )!"n$- 'e "%l*)" " @-#"' $ee'(*l- e8(e&n"' /" !e l-' "en(e' $e !'!"&*- %!e$en "@-&&"& (*e%- '* -0(*enen $el" &e$ n*)"en(e "!ell"' @-#"' $e e'(*l- !e 'e "%l*!en el $*'%-'*(*- ")(!"l. P-&e#e%l- l-' n"e"$-&e' 0"'"$-' en -? %!e$en e*("& l" $e')"&" $e @-#"' $ee'(*l- $*'e"$"' %"&" l" &e%&e'en(")*+n *'!"l.7"/ $-' "ne&"' $e e'%e)*,*)"& l"' @-#"' $e e'(*l-' $e%en$*en(e' $e l-' e$*-';

• • De'$e !n" @-#" $e e'(*l- )-n l"' &el"'; Y*%-&( - Ye$*"

Y*%-&( !&l"&)@*-.)'' (*%- $e e$*-

Ye$*" (*%- $e e$*-> l" @-#" $e e'(*l- %"&" el (*%- $e e$*- " "!: >

• • E'%e)*,*)"n$- el e$*- $e $e'(*n- $en(&- $el len!"#e $el $-)!en(-


9/14

Programación WEB

print Para documentos paginados y mostrados en vista de impresin.

projection Dispositivos de proyeccin de presentaciones.

screen Pantallas a color de equipos in!ormáticos.

speech Para sinteti"adores de vo".

tty Dispositivos de visuali"acin con capacidades limitadas.

tv Televisores.

3.5. MODELO DE CAJA

El modelo de caja describe las cajas que se generan a partir de los elementosHTML. El modelo de caja también contiene opciones detalladas en lo referente alajuste de márgenes, bordes, relleno (padding) contenido de cada elemento. Lasiguiente imagen muestra c!mo se construe el modelo de caja"

En &e"l*$"$ (-$-' l-' eleen(-' $e !n" e0 %&&",-' enl")e' *ene' ("0l"'e(). '-n )"#"' &e)("n!l"&e'. L-' n"e"$-&e' '*("n e'("' )"#"' $e l" ,-&" !en-'-(&-' le' @"/"-' *n$*)"$- %"&" "!e("& l" %*n".

7"/ $-' (*%-' $e )"#"'; 0l-) e *nl*ne. L-' eleen(-' 0l-) &-%en el ,l!#- $e"!e(")*+n. E'(- e' "%"&e)en '-l-' *n'e&("n$- ['"l(-' $e l:ne"\. L-' eleen(-'*nl*ne '*!en el ,l!#- / e'(n )-n(en*$-' $en(&- $e eleen(-' $e 0l-!e.

#or ejemplo, un párrafo ser$a un elemento bloc% (no podemos tener un párrafo allado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En

cambio, un enlace es un elemento inline, a que no &corta' el teto donde estámetido

L.I Vicente de León Castrejón Página "


10/14

Programación WEB

Estas dos diferencias son importantes, pero a que tener en mente que ambostipos comparten el modelo de caja, que es el que aparece en la siguiente figura"

L"' %&-%*e$"$e' ' *%-&("n(e' $e !n" )"#" '-n; *$(@ "n)@- @e*@( "l(-%"$$*n &ellen- 0-&$e& 0-&$e / "&*n "&en.

An)@- / "l(-

)i#t* &e%&e'en(" el n"*o #e ! "+. Pe&- e' el n"*o interior e' $e)*& '*0-&$e' &ene' n*$##ing. P-$e-' *n$*)"& e'(e "n)@- en e$*$"' "0'-l!("'n-&"len(e %:8ele' - &el"(*"' n-&"len(e ].

A!n!e l-' eleen(-' in!ine (*enen ,i#t* '* l" -$*,*)"-' )-n CSS n- e&e-'n*nn &e'!l("$- *'!"l. E'(- e' %-&!e el "n)@- $e e'(-' eleen(-' 'e e'("0le)e"!(-(*)"en(e %"&" !e 'e "#!'(e " l"' $*en'*-ne' $el eleen(- in!ine.

P-& e#e%l- '* (ene-' !n enl")e !e )-n'*'(e en !n (e8(- $e )*n)- )"&")(e&e' el"n)@- ,i#t* $e e'(e eleen(- 'e& l- !e -)!%en e'-' )*n)- )"&")(e&e'.

S-0&e el !to $e l" )"#" 'e )-n(&-l" )-n l" %&-%*e$"$ *eig*t / (-$- l- !e @e-'$*)@- "n(e' '-0&e el "n)@- ("0*9n 'e "%l*)" "!:.

L.I Vicente de León Castrejón Página 1#


11/14

Programación WEB

P"$$*n

C-n $##ing e'("0le)e-' l" $*'("n)*" $e [re!!eno\ en(&e el l:*(e *n(e&*-& $e l")"#" / el e8(e&*-& 0-&$e.

S* !e&e-' %-ne& !n %"$$*n $e 2 %:8ele' %"&" (-$" l" )"#" l- @"&:"-' "':;

%"$$*n ; 2 %8

P-$e-' e'("0le)e& !n %"$$*n $*'(*n(- %"&" )"$" l"$- !'"n$- l-' '!,*#-' -top '!%e&*-& -bottom*n,e&*-& left *?!*e&$" / right $e&e)@";

%"$$*nF(-%; 1%8

%"$$*nF0-((-; 5%8

%"$$*nFle,(; 3%8

%"$$*nF&*@(; 2%8

P-$e-' "0&e*"& l- "n(e&*-& en !n" '-l" l:ne" *n$*)"n$- %&*e&- el %"$$*n'!%e&*-& / l!e- '*!*en$- el -&$en $e l"' "!#"' $el &el-#. E' $e)*& n-' !e$"&:";"&&*0" $e&e)@" "0"#- *?!*e&$". El e#e%l- "n(e&*-& 'e ")-&("&:" "':;

padding: 10px 20px 5px 30px;

O(&- "("#- (*l e' e'%e)*,*)"& '+l- $-' e$*$"'; !n" )-&&e'%-n$e&:"n "l %"$$*n'!%e&*-& e *n,e&*-& / l" -(&" "l l"(e&"l. S* !e&e-' !e l-' %"$$*n' '!%e&*-& e*n,e&*-& 'e"n $e 1 %:8ele' / l-' l"(e&"le' *?!*e&$- / $e&e)@- $e 2 %:8ele'e')&*0*-';

padding: 10px 20px;

B-&$e'

S* !e&e-' !e n!e'(&" )"#" (en" bordes l- )-n'e!*-' )-n l" %&-%*e$"$0-&$e&. T*ene l" '*!*en(e '*n("8*';

border: width | style | color

C-- @"0&' '!%!e'(- ,i#t* e'%e)*,*)" el &-'-& $el 0-&$e. N-&"len(e e' !n"e$*$" en %:8ele' %e&- ("0*9n %-$e-' !(*l*?"& l"' %"l"0&"' (@*n ,*n- e$*!



12/14

Programación WEB

n-&"l / (@*) &!e'-. P-& '!%!e'(- )+- $e -&$- e' (@*) !e$" "*n(e&%&e(")*+n $el n"e"$-&.

En )!"n(- " '(/le e' el tipo $e 0-&$e. 7"/ 0"'("n(e' %e&- l-' ' )-!ne''-n; so!i# l:ne" )-n(*n!" #s*e#l:ne" $*')-n(*n!" #otte# l:ne" $e %!n(-'

/ #o&%!e l:ne" )-n(*n!" $-0le.

P-& l(*- )-l-& *n$*)" el "o!or $el 0-&$e.

P-$e-' e')-e& !n (*%- $e 0-&$e $*,e&en(e %"&" )"$" l"$- )-n l-' '!,*#-' -to$-%otto( -!e/t / -rig*t. P-& e#e%l- %"&" %-ne& !e "l- (en" el 0-&$e *n,e&*-&$e 1 %:8el " %!n(*(-' &-#-';

border-bottom: 1px dotted #f00;

P"&" e!i(inr e! %or#e '*%leen(e %-ne-' !e (*ene $e &-'-& %:8ele' - !eel e'(*l- $el 0-&$e e' n-ne. E'(- e' !/ *%-&("n(e )-n l"' *ene' /" !e '*(ene-' !n" *"en enl"?"n$- " "l- l-' n"e"$-&e' l" %-nen )-n !n &e0-&$e!/ ,e-. A': !e e'(- 'e @" )-ne&(*$- /" en !n ,*#- $e l"' @-#"' $e e'(*l-';

img border: none; !

M&ene'

L-' (árgenes 'e )-n(&-l"n )-n l" %&-%*e$"$ "&*n / e' l" $*'("n)*" en(&e el0-&$e $e l" )"#" / l-' eleen(-' !e l" &-$e"n.

En )!"n(- " l" ,-&" $e !'"&l" e' *!"l !e )-n l" %&-%*e$"$ %"$$*n "': !e l",-&" $e e')&*0*& / l-' "("#-' e' e8")("en(e l" *'". P-& e#e%l- '* !e&e-'&ene' '!%e&*-& e *n,e&*-& $e 2 %:8ele' / l"(e&"le' $e 5 %:8ele';

margin: 20px 5px;

Para centrar un elemento de bloque, podemos hacer uso de auto:

margin: 0px a"to;



13/14

Programación WEB

C"%"'

"-' " @"0l"& $e !n" e(*!e(" X7TML !e n-' !e$+ %-& e& / e'(e'(&e)@"en(e l*"$" )-n CSS;


14/14

Programación WEB

%-& en)*" $el %*e $e %*n" en l!"& $e !e$"& el %*e "l ,*n"l $e (-$-. E'(- 'e'!ele "&&el"& "':;

#footer

clear: both;

!

3.6. APLICACIÓN EN DOCUMENTO WEB

C-n'*'(e en "%l*)"& l-' (e"' "n(e&*-&e' en !n $-)!en(- e0 !n" %&")(*)" )-n l-'(e"';3.2 S*n("8*' Len!"#e $e %&e'en(")*-n.3.3 Sele)(-&e' Len!"#e $e %&e'en(")*-n.3.4 T*%-' $e e$*-' Len!"#e $e %&e'en(")*-n.3.5 M-$el- $e )"#" Len!"#e $e %&e'en(")*-n Se %-$&:" $*'e"& !n" %&)(*)" $-n$e 'e e%leen l-' )-n)e%(-' / lle!en ";


Unidad III Lenguaje de Presentación

Documents

Transcript of Unidad III Lenguaje de Presentación