Desarrollo Web HTML

7/25/2019 Desarrollo Web HTML

1/22

DESARROLLO WEB


2/22

HTML

El HTML (Hyper Text MarkupLanguage) es un lenguaje que sirepara es!ri"ir #ipertext$% es &e!ir%&$!u'ent$s &e text$ presenta&$ &e$r'a estru!tura&a% !$n enla!es(links) que !$n&u!en a $tr$s&$!u'ent$s $ a $tras uentes &ein$r'a!in (p$r eje'pl$ "ases &e

&at$s) que pue&en estar en tu pr$pia'*quina $ en '*quinas re'$tas &ela re&+ T$&$ ell$ se pue&e presentara!$'pa,a&$ &e !uant$s gr*-!$sest*ti!$s $ ani'a&$s y s$ni&$ssea'$s !apa!es &e i'aginar+


3/22

HTML

.$r supuest$% la est/ti!a &e l$s&$!u'ent$s es!rit$s en HTML n$ seli'ita a text$ &iga'$s n$r'al0!$nsigue t$&$s l$s ee!t$s que#a"itual'ente se pue&en pr$&u!ir!$n un '$&ern$ pr$!esa&$r &e

text$s1 negrita% !ursia% &istint$sta'a,$s y uentes% ta"las% p*rra$sta"ula&$s% sangr2as% in!lus$ text$ y$n&$ &e p*gina &e !$l$res% y'u!#$s '*s+


4/22

HTML

B*si!a'ente% la !$sa es si'ple1 la pie3a!lae es el 4"r$5ser4% 4naega&$r4%4isuali3a&$r4 $ 4!liente4 $ !$'$ quieraslla'arle% HTML+

T$&as las !$&i-!a!i$nes &e ee!t$s en eltext$ que $r'an el lenguaje HTML n$s$n '*s que instru!!i$nes para elisuali3a&$r+ .artien&$ &e est$% seentien&e el p$rqu/ n$ se e l$ 'is'$ !$nt$&$s l$s isuali3a&$res+ Depen&e &e!'$ est/n &ise,a&$s y para qu/ ersin&e lenguaje est/n &ise,a&$s+


5/22

HTML

Si se est* !$ne!ta&$ a 6nternet% !$n un naega&$r% a&e'*s &e er &$!u'ese pue&e re!i"ir y eniar !$rre$ ele!trni!$% re!i"ir y eniar 7EWS (n$ti!l$s seri&$res 8T. (seri&$res &e -!#er$s) tant$ en entra&a !$'$ en sali&!$n el 'is'$ pr$gra'a+ Ta'"i/n% !$'$ n$% se pue&en i'pri'ir l$s &

isuali3a&$s+ 9asi t$&$s suelen ser 4W:SW:;4% es &e!ir% que l$ iexa!ta'ente !$'$ l$ es en pantalla+++Sie'pre que tu i'pres$ra est/ &!lar$+


6/22

HTML

La i&ea es sen!illa1 sl$ tienes que !rear un &$!u'ent$ !$n tu e&it$r preedocumentoenten&ere'$s el !$njunt$ &e -!#er$s% tant$ &e text$ !$'$ &eque $r'an las &istintas p*ginas)% guar&arl$ !$n la extensin .htm $ .h!$n tu naega&$r preeri&$% y ya tienes un #ipertext$ en 'ar!#a+ Las&$!u'ent$s !rea&$s pue&en resi&ir en el &is!$ &ur$ &e tu $r&ena&$r pers

9D


7/22

HTML

As2 pues% en esen!ia% una p*gina es!rita en HTML n$ es '*s que text$ n$r'!$n !ualquier e&it$r% y al que% !uan&$ se le quiere &ar alg=n aspe!t$ espp$r eje'pl$ el ta'a,$ &e la letra% #a"r* que a!$'pa,ar &e !iert$s !

in&i!ar el ee!t$ &esea&$+ A est$s !&ig$s se les lla'a elementos&el leng


8/22

HTML

Las instru!!i$nes que $r'an ellenguaje HTML les lla'are'$selementos+ Otr$s aut$res ta'"i/n las&en$'inan 4TA;S4% $ 4ET6>?ETAS4+ Lan$ta!in &e l$s ele'ent$s !$nsiste enl$s s2'"$l$s @ y >que en!ierran &entr$

una instru!!in+

L$s ele'ent$s pue&en ser llen$s $a!2$s+


9/22

HTML

Elementos con argumento

Se $r'an es!ri"ien&$ la instru!!in !$rresp$n&iente segui&a &el text$quiere apli!ar la instru!!in y se ter'ina repitien&$ la instru!!in per$ !$in!lina&a in'e&iata'ente antes &e la 'is'a+

.$r eje'pl$% el ele'ent$ H1 que sire para &ar el '*xi'$ ta'a,$ aes!ri"ir*1

@H Text$ &e prue"a @CH+

y este ser2a el resulta&$1

Texto de prueba

Si $li&as p$ner @CH t$&$ el rest$ &e la p*gina ten&r* el 'is'$ ta'a,$%


10/22

HTML

Elementos vacos

L$s ele'ent$s a!2$s se es!ri"en !$'$ l$s llen$s% per$ n$ es ne!esarinstru!!in repeti&a al -nal !$n una "arra+ Est$ se &e"e a que est$s elepr$&u!en un ee!t$ s$"re el text$+ ;eneral'ente se utili3an para separar text$% y p$r tant$ n$ es ne!esari$ in&i!ar su -n+ E'pie3an y ter'inan epunt$+

.$r eje'pl$% el ele'ent$ que sire para &i"ujar una l2nea #$ri3

pantalla% se es!ri"ir*1

@HR

y este ser2a el resulta&$1


11/22

HTML

Elementos con argumento

Algun$s ele'ent$s se es!ri"en !$n argu'ent$+ Es !$'$ pasarle par*'instru!!in% y se lla'an atributos&el ele'ent$+

.$r eje'pl$% el ele'ent$ que sire para #a!er un link (enla!e&$!u'ent$ $ !$n $tra p*gina &el a!tual% se es!ri"ir*1


12/22

HTML

L$s ele'ent$s pue&en es!ri"irse tant$ en 'ay=s!ulas !$'$ en 'in=s!ulas

preeri"le la pri'era $p!in ya que ap$rta !lari&a& al &$!u'ent$ uentagra&e!e a la #$ra &e #a!er !$rre!!i$nes% per$ 9?6DADO% el al$r atri"ut$s #ay que es!ri"irl$s EFA9TAME7TE !$'$ &e"en ser+ En el eje'pl$un!i$nar2a el link si es!ri"i/ra'$s www.miservidor.es en 'ay=s!ulas% n$'"re &e '*quina y ser2a interpreta&$ !$'$ OTRA '*quina+

L$s ele'ent$s pue&en ani&arse un$s !$n $tr$s% tenien&$ !ui&a&$ &e p$neen el lugar a&e!ua&$+ .$r eje'pl$% el ele'ent$ !$'"ina&$ !$n


13/22

HTML

Estructura de una p$gina HT%L

Las p*ginas HTML est*n estru!tura&as en &$s partes &ieren!ia&as(!a"e!era) y el '(&)(!uerp$)+

E*emplo de p$gina

Si es!ri"es1@HTML

@T6TLE D$!u'ent$ &e prue"a @CT6TLE@CHEAD@G@H Est$ es una 4&e'$4 &e &$!u'ent$ HTML @CHEst$ es el '*s sen!ill$ &e l$s &$!u'ent$s HTML+@CBOD:

@CHTML


14/22

HTML

Estructura de una p$gina HT%L


15/22

HTML

El tipo de documenton$ es $"ligat$ri$ a ee!t$s pr*!ti!$s% es &e!ir que ler* igual tant$ si l$ es!ri"es !$'$ si n$+ Sl$ sire !$'$ i&enti-!a!in !$nteni&$ &el -!#er$ a l$s ee!t$s &e !u'plir las espe!i-!a!i$nes &re!$'en&a&as p$r el !$ns$r!i$ W9% que es el $rganis'$ que regula el leeje'pl$1

@GDO9T:.E HTML .?BL69 4


16/22

HTML

En el HTML I+J se !$nsi&eran &esa!$nseja"les

aquell$s ele'ent$s que% a=n sien&$ s$p$rta&$s% #ansi&$ sustitui&$s p$r $tr$s y% p$r ell$% es p$si"le quesean eli'ina&$s en el utur$+ En !ualquier !as$% elque un ele'ent$ es!rit$ en tus p*ginas se ea $ n$%&epen&er* sie'pre &el naega&$r utili3a&$ yC$ &e suersin% n$ &e l$ que &iga el est*n&ar+

.ara es!ri"ir !$'entari$s en la p*gina (que sl$ se

en en el text$ uente% per$ n$ en el isuali3a&$r) seutili3ar* el ele'ent$+

cuidado1 el que n$ se ea &e $r'an$r'al en el naega&$r% n$ signi-!a que n$ pue&aerse el !&ig$ uente+ 7un!a es!ri"as !$'entari$s!$n !laes &e a!!es$ $ &at$s !$n-&en!iales+


17/22

HTML

Esuema de tipos de un documento HT%L

9uan&$ un isuali3a&$r re!i"e un -!#er$% antes &e'$strarl$ ne!esita sa"er el tip$ &e !$nteni&$ que/ste tiene% a -n &e pr$!esarl$ a&e!ua&a'ente+ 7$es l$ 'is'$ re!i"ir un &$!u'ent$ &e text$ que una$t$gra2a en $r'at$ ;68% $ un 2&e$ en $r'at$M.;% $ si l$ que esta'$s intentan&$ es transerir un-!#er$+

En !a&a !as$% el isuali3a&$r p$n&r* en jueg$

&istintas #a"ili&a&es% &e las 'u!#as que p$see+Si el -!#er$ pr$!e&e &e un seri&$r httpre'$t$% (es&e!ir un seri&$r 5e"0 http es el n$'"re &elpr$t$!$l$ que utili3ar* el seri!i$ in$!a&$)% /ste seen!argar* &e &e!irle al isuali3a&$r !uant$ ne!esitesa"er% per$ si l$ que #ay que pr$!esar es un -!#er$l$!al% la =ni!a $r'a &e sa"erl$ es p$r la extensi/n&el -!#er$+


18/22

HTML

La extensin &e un -!#er$ s$n las tres $!uatr$ letras (&epen&e &el siste'a $perati$!$n el que se tra"aje) que #ay &espu/s &eln$'"re &el -!#er$ y que est*n separa&as &el'is'$ p$r un punt$+

.$r eje'pl$% estru!+htm+ Las tres letras que

#ay &espu/s &el punt$ (#t') s$n laextensi/n &el -!#er$+ Las $tras% las queest*n &elante &el punt$% s$n el nombre &el-!#er$+


19/22

HTML

Las extensi$nes &e I $ '*s letras s$n t2pi!as &e siste'as $perati$s !$L67?F y las &e $ 'en$s &e Win&$5s% que #a 'anteni&$ esta !$stu'"re p&e l$s tie'p$s &el DOS% ya que pue&e tra"ajar pere!ta'ente !$n extensi$

&e letras+ .$r eje'pl$% la extensin .htmlun!i$na en Win&$5s igual que


20/22

HTML

Estas s$n algunas &e las extensi$nes st*n&ar& '*s !$'unes y sus !$nteni&$s

&e ellas suele utili3arse en siste'as ?76F


21/22

HTML

L$s &$!u'ent$s HTML l$s pue&es es!ri"ir !$nl$ que quieras+++ Sie'pre que l$s sales en'$&$ 0olo Texto+ Es &e!ir% que si utili3as% p$reje'pl$% W$r& &e Win&$5s $ &e MA9% p$r&ee!t$ est$s pr$gra'as salan en $r'at$W$r&+ : aunque lueg$ l$s ren$'"res !$'$&$!u'ent$s .htm $ .html% el $r'at$ intern$sigue sien&$ W$r&+

Ta'p$!$ ale &ejarl$s !$n la extensin .txtque les &ejan la 'ay$r2a &e e&it$res al

salarl$s en '$&$ S$l$ Text$+ 7$ ser2aninterpreta&$s !$rre!ta'ente+ .$r l$ tant$ sitienen extensin .txt(y p$r supuest$ son+txt)%ent$n!es pue&es ren$'"rarl$s a +#t'% $ "ienen el '$'ent$ &e guar&arl$s en $r'at$ 0oloTexton$ &ejar la extensin p$r &ee!t$ +txt y&arle ya &ire!ta'ente la extensin .htm+


22/22

HTML

Algun$s pr$!esa&$res &e text$ ya in!luyen entre sus tip$s el .htm+ Si es#a!en es eli'inar la !$&i-!a!in pr$pia% y !$nertirla a ele'ent$s &e eje'pl$% si tienes un text$ en it*li!a% aut$'*ti!a'ente es !$nerti&$ a@6% et!++ El pr$"le'a &e l$s e&it$res aan3a&$s &e text$ y &e la 'pr$gra'as asistentes para es!ri"ir HTML es que generan un !&ig$ "asta

&i2!il &e !$rregir $ '$&i-!ar &espu/s+ 7$ es que n$ un!i$ne% per$ !$'$ en$ sa"e !ual es la -nali&a& &el text$ es!rit$% p$r &ee!t$ le p$ne t$&$ l$ qusi a!as$% apli!an&$ el &i!#$ &e 4'ej$r que s$"re+++4

Desarrollo Web HTML

Documents

Transcript of Desarrollo Web HTML