Programación Web

7/17/2019 Programación Web

http://slidepdf.com/reader/full/programacion-web-56916a74e33e9 1/319

PROGRAMACIÓN WEB



Internet, la red de redes, nacea mediados de la década de

los setenta, bajo los auspiciosde DARPA, la Agencia deProyectos avanzados para la

Defensa de Estados Unidos

Introducci!n a las aplicaciones "eb



DARPA inici! un programa deinvestigaci!n de técnicas y

tecnolog#as para unir diversasredes de conmutaci!n depa$uetes



Permitiendo as# a losordenadores conectados

a estas redescomunicarse entre s# de

forma f%cil ytransparente



De estos proyectos naci! unprotocolo de comunicaciones dedatos, IP o Internet Protocol, $uepermit#a a ordenadores diversoscomunicarse a través de una red,Internet, formada por laintercone&i!n de diversas redes



'a ((( )(orld (ide (eb* o, deforma m%s colo$uial, la "eb, se+a convertido, junto con el correoelectr!nico, en el principal caballode batalla de Internet

'a ((( como servicio de Internet



sta +a dejado de ser unainmensa -biblioteca. de p%ginasest%ticas para convertirse en unservicio $ue permite acceder amultitud de prestaciones yfunciones, as# como a in/nidad deservicios, programas, tiendas, etc



El é&ito espectacular de la "ebse basa en dos puntalesfundamentales0

El protocolo 122P y el lenguaje

123'



122P permite unaimplementaci!n simple y

sencilla de un sistema decomunicaciones $ue nospermite enviar cual$uier tipo

de /c+eros de una formaf%cil



4impli/cando el funcionamientodel servidor y permitiendo $ueservidores poco potentesatiendan miles de peticiones yreduzcan los costes dedespliegue



El 123' nos proporciona unmecanismo de composici!n

de p%ginas enlazadas simpley f%cil, altamente e/ciente yde uso muy simple



'as aplicaciones "eb son a$uellascuya interfaz se construye

utilizando p%ginas "eb Dic+asp%ginas son documentos de te&toa los $ue se les a5aden eti$uetas

$ue nos permiten visualizar elte&to de distintas formas yestablecer enlaces entre una

p%gina y otra



'a capacidad de enlazarun te&to con otro para

crear un +iperte&to es lacaracter#stica m%s

destacable de las p%ginas"eb



El protocolo 122P )hypertexttranfer protocol* es el protocolobase de la ((( 4e trata de unprotocolo simple, orientado acone&i!n y sin estado Es decir$ue no guarda ningunainformaci!n sobre cone&ionesanteriores

El protocolo 122P



'a raz!n de $ue estéorientado a cone&i!n es $ue

emplea para sufuncionamiento un protocolode comunicaciones )26P,

transport control protocol* demodo conectado



Un protocolo $ue estableceun canal de comunicaciones

de e&tremo a e&tremo )entreel cliente y el servidor* por el$ue pasa el 7ujo de bytes $ue

constituyen los datos $ue +ay$ue transferir



El prop!sito del protocolo 122P espermitir la transferencia de arc+ivos)principalmente en formato 123',

entre el navegador y el cliente* y unservidor "eb )denominado entreotros como +ttpd* 'ocalizado

mediante una cadena de caracteresdenominado UR'



122P utiliza el puerto 89)e$uivalente de alguna forma

al identi/cador de cone&i!n ode servicio 26P* para todas lascone&iones por defecto

)podemos utilizar otrospuertos diferentes del 89*



● Arquitectura de un nivel

Arquitectura de las aplicacionesWeb.



Arquitectura de las aplicacionesWeb.

Arquitectura de dos nivelesEs la m%s simple, se tiene el nivel del -6liente. y el nivel

del -4ervidor.



Arquitectura Web de tres niveles

El primer nivel consiste en lacapa de presentaci!n $ueincluye no s!lo el navegador,

sino también el servidor "eb$ue es el responsable de dara los datos un formatoadecuado



El segundo nivel est% referido+abitualmente a alg:n tipo

de programa o script;inalmente, el tercer nivelproporciona al segundo los

datos necesarios para suejecuci!n





!en"ua#es de pro"ra$aci%n dellado del cliente.

'os programas del lado delcliente est%n incluidos dentrode la p%gina 123', sedescargan del servidor juntocon este

'os programas se ejecutandentro del %mbito del bro"ser



&ecnolo"'as ( len"ua#es del lado del cliente.

◦ <avegadores para (eb◦ 123'

◦ =avascript y >bscript

◦ Applets en =ava

◦ ;las+ )lenguaje Action4cript* )o/cialmente 3uerto*

◦ ?3'

◦ PD;

◦

A=A?, acr!nimo de Asynchronous JavaScript And X ML ) =ava4cript as#ncrono y ?3'*

◦ =@uery

http://es.wikipedia.org/wiki/JavaScript

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/JavaScript



Al"unos nave"adores Web.◦ Amaya ◦ Epip+any ◦ aleon ◦ Internet E&plorer)o/cialmente 3uerto* ◦ Bon$ueror ◦ 'yn& ◦ oogle 6+rome ◦ 3ozilla ;irefo& ◦ <etscape <avigator ◦ Cpera ◦ 4afari ◦ 4+iira ◦ 3ai <avigator

http://es.wikipedia.org/w/index.php?title=INGSISCOMnavegador)&action=edit

http://es.wikipedia.org/wiki/Epiphany

http://es.wikipedia.org/wiki/Galeon

http://es.wikipedia.org/wiki/Internet_Explorer

http://es.wikipedia.org/wiki/Konqueror

http://es.wikipedia.org/wiki/Lynx_(navegador)

http://es.wikipedia.org/wiki/Mozilla


http://es.wikipedia.org/wiki/Mozilla_Firefox

http://es.wikipedia.org/wiki/Netscape_Navigator


http://es.wikipedia.org/wiki/Opera_(navegador)

http://es.wikipedia.org/wiki/Safari_(navegador)

http://es.wikipedia.org/w/index.php?title=Shiira&action=edit

http://es.wikipedia.org/w/index.php?title=Maik_Navigator&action=edit





http://es.wikipedia.org/w/index.php?title=Shiira&action=edit

http://es.wikipedia.org/wiki/Safari_(navegador)

http://es.wikipedia.org/wiki/Opera_(navegador)



http://es.wikipedia.org/wiki/Mozilla_Firefox



http://es.wikipedia.org/wiki/Lynx_(navegador)

http://es.wikipedia.org/wiki/Konqueror

http://es.wikipedia.org/wiki/Internet_Explorer

http://es.wikipedia.org/wiki/Galeon

http://es.wikipedia.org/wiki/Epiphany

http://es.wikipedia.org/w/index.php?title=INGSISCOMnavegador)&action=edit



&ecnolo"'as ( len"ua#es del lado del cliente.

Algunos de estos lenguajes ytecnolog#as re$uieren de unprograma especial )plugin*

instalado en la computadoradel usuario Ejemplo0 Adobe;las+ Player



Un complemento )o plugin eninglés* es una aplicaci!n $ue serelaciona con otra para aportarle

una funci!n nueva y generalmentemuy especi/ca Esta aplicaci!nadicional es ejecutada por la

aplicaci!n principal e interact:anpor medio de la API



!en"ua#es de pro"ra$aci%n dellado del servidor.

4e ejecutan en el servidor de (eb yson dependientes de la plataformadel servidor



4e usan para acceder arecursos del servidor, como

bases de datos y generaci!nde contenido din%mico paralas p%ginas



!en"ua#es de pro"ra$aci%n dellado del servidor. Por ejemplo, el %mbito de ejecuci!n de una

p%gina A4P<E2



!en"ua#es de pro"ra$aci%n dellado del servidor.

Algunos ejemplos de lenguajes del lado delservidor0

A4P, A4P<E2 )son tecnolog#as, soportan

diferentes lenguajes como >F, 6G, 6HH, etc* P1P =4P Perl Ruby Pyt+on ?3'



)ervidor Web

Un servidor "eb es un programa $ueimplementa el protocolo HTTP * Esteprotocolo pertenece a la capa deaplicaci!n del modelo C4I y est% dise5adopara transferir lo $ue se llama +iperte&tos,p%ginas "eb o p%ginas 123'0 te&toscomplejos con enlaces, /guras,formularios, botones y objetos incrustadoscomo animaciones o reproductores dem:sica

http://es.wikipedia.org/wiki/Programa_(computaci%C3%B3n)

http://es.wikipedia.org/wiki/Protocolo

http://es.wikipedia.org/wiki/HTTP

http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/HTTP

http://es.wikipedia.org/wiki/Protocolo

http://es.wikipedia.org/wiki/Programa_(computaci%C3%B3n)



)ervidor Web.

Al"unos e#e$plos◦ CERN *ttpd ◦ Apac*e +!ibre, servidor $-s usado del $undo◦ II) +Microso/t◦ Resin ◦ &o$cat +!ibre, del pro(ecto 0a1arta de Apac*e

◦ Geroni$o +!ibre, orientado a 02EE, del

pro(ecto 0a1arta de Apac*e, actual$ente seencuentra en desarrollo

◦ 0Boss ◦ 0OnA) ◦ C*ero1ee

http://es.wikipedia.org/w/index.php?title=CERN_httpd&action=edit


http://es.wikipedia.org/wiki/Servidor_HTTP_Apache

http://es.wikipedia.org/wiki/IIS

http://es.wikipedia.org/w/index.php?title=Resin&action=edit

http://es.wikipedia.org/wiki/Tomcat

http://jakarta.apache.org/

http://www.apache.org/

http://es.wikipedia.org/w/index.php?title=Geronimo&action=edit



http://es.wikipedia.org/wiki/JBoss

http://es.wikipedia.org/wiki/JOnAS

http://es.wikipedia.org/wiki/JOnAS

http://es.wikipedia.org/wiki/JBoss



http://es.wikipedia.org/w/index.php?title=Geronimo&action=edit



http://es.wikipedia.org/wiki/Tomcat

http://es.wikipedia.org/w/index.php?title=Resin&action=edit

http://es.wikipedia.org/wiki/IIS

http://es.wikipedia.org/wiki/Servidor_HTTP_Apache





A$bientes para el desarrollo deaplicaciones Web. 'os IDE )ambientes integrados de desarrollo*

para aplicaciones (eb son muy numerosos

6onsiderar los $ue permitan trabajar con los

diferentes lenguajes para (eb

Algunos son espec#/cos para lenguajes dellado del servidor Por ejemplo, >isual 4tudio

solo soporta A4P<E2 del lado del servidor E&isten IDEs de buena cantidad, libres ygratuitos de buena calidad



A$bientes para el desarrollo deaplicaciones Web. Algunos ejemplos de IDE para (eb0

◦ 3icrosoft >isual 4tudio◦ 3icrosoft (eb Developer E&press◦ 3ono )para A4P<E2*◦ <etFeans◦ =builder◦ Eclipse◦ Flue ;is+



Aspectos de se"uridad.

'as aplicaciones (eb est%n m%s e&puestasa ata$ues

)e pueden tener ataques en tres niveles◦ A la computadora del usuario◦ Al servidor◦ A la informaci!n en tr%nsito



!a se"uridad en Web tiene 3 etapaspri$ariasJ 4eguridad de la computadora del usuarioJ 4eguridad del servidor (eb y de los datosalmacenados a+#J 4eguridad de la informaci!n $ue viaja entreel servidor (eb y el usuario



)e"uridad de la co$putadora del usuario

'os usuarios deben contar con navegadoresy plataformas seguras, libres de virus yvulnerabilidades 2ambién debegarantizarse la privacidad de los datos delusuario



)e"uridad del servidor Web ( de losdatos al$acenados a*' 4e debe garantizar la operaci!n continua

del servidor, $ue los datos no sean

modi/cados sin autorizaci!n )integridad* y$ue la informaci!n s!lo sea distribuida a laspersonas autorizadas )control de acceso*



)e"uridad de la in/or$aci%n que via#aentre el servidor Web ( el usuario.

arantizar $ue la informaci!n en tr%nsito no sea

le#da )con/dencialidad*, modi/cada o destruidapor terceros 2ambién es importante asegurar$ue el enlace entre cliente y servidor no puedainterrumpirse f%cilmente )disponibilidad*





Reco$endaciones Ase"urar lain/or$aci%n en tr-nsito

Esto se puede lo"rar por diversos $edios

Asegurando la red f#sicamente )s"itc+es enlugar de +ubs*

Esconder la informaci!n )esteganograf#a* 6ifrar la informaci!n )criptograf#a* por medio

de algoritmos diversos )44', >P<s*



Reco$endaciones Ase"urar el equipo delusuario

>ulnerar el e$uipo del usuario $uiz%s no tengael impacto de vulnerar el servidor, sin embargoes un problema m%s dif#cil de erradicar )Kservidor, L999 clientes*0

Aplicar actualizaciones )parc+es* al sistema operativo Uso de antivirus, /re"alls personales Educaci!n de los usuarios



4. Plani5car el /uturoPuede sonar un poco duro $ue nos tengamosplanear el /uturo de al"o que a6n noe7iste pero es as#, $ue pasa si en un futuro

tuvieramos problemas de escalabilidad, y s#tuvieramos $ue migrar las bases de datos de3y4$l a Cracle, de una buenaplani5caci%n depende la di5cultad en un

/uturo de reali8ar ca$bios en laplata/or$a que sostiene nuestraaplicaci%n

Plani5caci%n de aplicaciones9eb



M Documentaci!n

Documenta todo lo $ue puedas tuaplicaci!n en especial a$uellas partes de lamisma $ue +ayan re$uerido un mayortiempo de desarrollo, en un futuro cercanote librar% de m%s de un $uebradero decabeza



N <o empieces por los pe$ue5os detalles

A menudo es m%s sencillo plantearse eldesarrollo de pe$ue5os servicios c!mopueden ser los R44 o una galer#a deim%genes, pero es fundamental comenzarpor lo $ue vendr% a ser la base de nuestraaplicaci!n, de este modo podremos ircompletando nuestra aplicaci!n en unorden l!gico, primero los cimientosO



:. ;ise<o de la inter/a8

Es importante conse"uir unbuen dise<o para nuestrainter/a8, es importanteconseguir un interfaz $ue seatractivo y :til para la granmayor#a de los usuarios



'o m%s importante es llegar a conectar conel usuario y la mejor manera es ofrecerle lamayor cantidad de informaci!n posible para$ue se llegue a sentir parte del proyecto

pero todo esto muc+as veces no lo llegamosa conseguir por una mala elecci!n en lacombinaci!n de los colores $ue se integranen nuestra interfaz



=. Evita construirte librer'as o/ra$e9or1s innecesarios

3uc+as personas siempre sostienen $ue esmejor $ue cada desarrollador utilize sus

propias librer#as, pero la realidad es $ue enmuc+as ocasiones esto supone una granpérdida de tiempo, es $e#or buscar unalibrer'a o frame"or $ue se parezca lo m%s

posible a lo deseado que desarrollarlopor ti $is$o

http://www.tufuncion.com/top10_framework






2en un plan de proyecto

Aseg:rate de $ue cada desarrollador $uetrabaje en el proyecto sepa $ué es lo $uedebe de +acer y cu%ndo tiene $ue +acerlo,teniendo todo esto redactado en undocumento te ayudar% a identi/carproblemas



>. Eli"e el len"ua#e adecuado

Qa sabes $ue +ay numerosas discusionessobre 6:al es el mejor lenguaje de programaci!nS, larespuesta a menudo es $ue depende depara $ue $uieras utilizarlo, por esoase"6rate de esco"er el len"ua#eadecuado

http://www.tufuncion.com/diferentes-lenguajes-programacion







8 Evita las distracciones

Cptimiza tu tiempo, cuando estéstrabajando $ue nada te distraiga, nillamadas telef!nicas, ni clientes demensajer#as instant%neas, proponte unbuen n:mero de +oras al d#a de trabajoaislado dedicado al proyecto



T 4igue un buen control de calidad

3uc+as veces nos e$uivocamos al plani/carlos tiempos de proyecto y esto lleva amenudo a los desarrolladores a tener $ueescribir -c!digo sucio., esta es una buenaopci!n si lo $ue $uieres es una demo de laaplicaci!n funcionando pero esa actitud tetraer% problemas en el futuro



4?. Plant@ate los pasos a se"uirdespu@s del desarrollo

2en en cuenta $ue est% fase de desarrolloalg:n d#a deber% acabar, estudia con qu@/recuencia se deber- actuali8ar y $ue senecesita para $ue este funcione



'enguaje de marcado



&M! es un lenguaje est%ticopara el desarrollo de sitios "eb)+yperte&t, marup language,

lenguaje de marcas+iperte&tuales* Desarrollado porel "orld "ide "eb consortium

)"Nc* 'os arc+ivos pueden tenerlas e&tensiones )+tm, &+tml*



De/niéndolo de forma sencilla,123' es lo $ue se utiliza paracrear todas las p%ginas "eb de

Internet 3%s concretamente,123' es el lenguaje con el $uese escriben la mayor#a de

p%ginas "eb

u@ es &M!D



'os dise5adores utilizan el lenguaje123' para crear sus p%ginas "eb,los programas $ue utilizan los

dise5adores generan p%ginasescritas en 123' y los navegadores$ue utilizamos los usuarios muestranlas p%ginas "eb después de leer sucontenido 123'



Aun$ue 123' es un lenguaje$ue utilizan las computadorasy los programas de dise5o, esmuy f%cil de aprender yescribir por parte de las

personas



El lenguaje 123' es un est%ndarreconocido en todo el mundo ycuyas normas de/ne un

organismo sin %nimo de lucrollamado (orld (ide (eb6onsortium )+ttp0VV""""NorgV* ,

m%s conocido como W3C



6omo se trata de un est%ndarreconocido por todas lasempresas relacionadas con el

mundo de Internet, una mismap%gina 123' se visualiza deforma muy similar en cual$uier

navegador de cual$uier sistemaoperativo



El lenguaje ?123' esmuy similar al lenguaje

123' De +ec+o, ?123'no es m%s $ue una

adaptaci!n de 123' allenguaje ?3'

&M! ( &M!



2écnicamente, 123' esdescendiente directo del

lenguaje 43', mientras$ue ?123' lo es del ?3'

)$ue a su vez, también esdescendiente de 43'*



Es$uema de la evoluci!n de 123' y?123'



'as p%ginas y documentoscreados con ?123' son

muy similares a lasp%ginas y documentos123'



Actualmente, entre 123'W9K y ?123' K9, la

mayor#a de dise5adoresescogen ?123'



En un futuro cercano, silos dise5adores deben

elegir entre 123' L y?123' KK o ?123' M9,

$uiz%s la elecci!n seadiferente



Criginalmente, lasp%ginas 123' s!loinclu#an informaci!nsobre sus contenidosde te&to e imagenes

&M! ( C))



6on el desarrollo delest%ndar 123', las p%ginasempezaron a incluir también

informaci!n sobre el aspectode sus contenidos0 tipos de

letra, colores y m%rgenes





El cuerpo de la p%ginaincluye todos sus

contenidos, comop%rrafos de te&to e

im%genes

Es$uema de las partes $ue forman



Es$uema de las partes $ue formanun documento 123'



El cuerpo )llamado bodyen inglés* contiene todo

lo $ue el usuario ve ensu pantalla y la cabecera

)llamada head en inglés*



6ontiene todo lo $ue no seve )con la :nica e&cepci!n

del t#tulo de la p%gina, $uelos navegadores muestrancomo t#tulo de sus

ventanas*

F*t$l



*t$l F*ead FtitleEl pri$er docu$ento

&M!FHtitle FH*ead Fbod(

FpEl len"ua#e &M! es Fstron"tansencilloFHstron" que pr-ctica$entese entiende sin estudiar el si"ni5cadode sus etiquetas principales.FHp

FHbod( FH*t$l



Es importante conocerlas tres eti$uetas

principales de undocumento 123'

)X+tmlY, X+eadY,XbodyY*0



X+tmlY0 indica el comienzo y el/nal de un documento 123'<inguna eti$ueta o contenido

puede colocarse antes o despuésde la eti$ueta X+tmlY )con unasola e&cepci!n $ue se ver% m%s

adelante*



En el interior de la eti$uetaX+tmlY se de/nen la

cabecera y el cuerpo deldocumento 123' y todo lo$ue se colo$ue fuera de la

eti$ueta X+tmlY se ignora



X+eadY0 delimita la parte dela cabecera del documento 'acabecera contiene informaci!nsobre el propio documento123', como por ejemplo su

t#tulo y el idioma de la p%gina



'os contenidos indicadosen la cabecera no son

visibles para el usuario,con la e&cepci!n de la

eti$ueta XtitleY



@ue se utiliza para indicarel t#tulo del documento y

$ue los navegadores lovisualizan en la partesuperior iz$uierda de la

ventana del navegador



XbodyY0 delimita el cuerpodel documento 123' El

cuerpo encierra todos loscontenidos $ue se muestranal usuario )p%rrafos de

te&to, im%genes, tablas*



En general, el XbodyY deun documento contiene

cientos de eti$uetas123', mientras $ue elX+eadY no contiene m%s$ue unas pocas







a, abbr, acronym, address, applet, area, b, base,basefont, bdo, big, bloc$uote, body, br, button, caption, center, cite, code, col, colgroup, dd, del,

dfn, dir, div, dl, dt, em, /eldset, font, form,frame, frameset, +K, +M, +N, +W, +L, +, +ead, +r,+tml, i, iframe, img, input, ins, isinde&, bd, label,legend, li, lin, map, menu, meta, noframes,noscript, object, ol, optgroup, option, p, param,pre, $, s, samp, script, select, small, span, strie,

strong, style, sub, sup, table, tbody, td, te&tarea, tfoot, t+, t+ead, title, tr, tt, u, ul, var



De todas las eti$uetasdisponibles, las siguientes

se consideran obsoletas yno se pueden utilizar0applet, basefont, center, dir,

font, isinde&, menu, s,strie, u



A pesar de $ue se trata de unn:mero de eti$uetas muygrande, no es su/ciente para

crear p%ginas complejasAlgunos elementos como lasim%genes y los enlaces re$uieren

cierta informaci!n adicional paraestar completamente de/nidos



'a eti$ueta XaY por ejemplose emplea para incluir unenlace en una p%ginaUtilizando s!lo la eti$uetaXaY no es posible establecer

la direcci!n a la $ue apuntacada enlace



6omo no es viable crear unaeti$ueta por cada enlacediferente, la soluci!nconsiste en personalizar laseti$uetas 123' mediante

cierta informaci!n adicionalllamada atributos



De esta forma, se utiliza lamisma eti$ueta XaY para

todos los enlaces de lap%gina y se utilizan losatributos para indicar la

direcci!n a la $ue apuntacada enlace



X+tmlY X+eadY XtitleYEjemplo de atributos en las eti$uetasXVtitleY XV+eadY XbodyY

XpY 'os enlaces son muy f%ciles de indicar0 XaY4oy un enlace incompleto, por$ue no tengo direcci!n de

destinoXVaY Xa +refZ+ttp0VV"""googlecomYEste otro enlace apunta a

la p%gina de oogleXVaY XVpY XVbodyY XV+tmlY



El primer enlace delejemplo anterior no est%

completamente de/nido,ya $ue no apunta a

ninguna direcci!n



El segundo enlace, utiliza lamisma eti$ueta XaY, peroa5ade informaci!n adicionalmediante un atributo llamado+ref 'os atributos se incluyen

dentro de la eti$ueta deapertura



<o todos los atributos sepueden utilizar en todas

las eti$uetas Por ello,cada eti$ueta de/ne supropia lista de atributos

disponibles



Adem%s, cada atributotambién indica el tipo de

valor $ue se le puedeasignar 4i el valor de unatributo no es v%lido, el

navegador ignora eseatributo



Aun$ue cada una de laseti$uetas 123' de/ne sus

propios atributos, algunosde los atributos soncomunes a muc+as o casi

todas las eti$uetas



'os atributos comunesse dividen en cuatro

grupos seg:n sufuncionalidad0



K* Atributos b%sicos0 se pueden utilizarpr%cticamente en todas las eti$uetas 123'



'a mayor#a de p%ginas "ebactuales utilizan los atributosid y class de forma masiva4in embargo, estos atributoss!lo son realmente :tiles

cuando se trabaja con 644 ycon =avascript



Respecto al valor de losatributos id y class, s!lopueden contener guionesmedios )*, guiones bajos)[*, letras yVo n:meros, pero

no pueden empezar porn:meros



Adem%s, los navegadoresdistinguen may:sculas demin:sculas y no se recomienda

utilizar letras como 5 y acentos,ya $ue no es seguro $uefuncionen correctamente en

todas las versiones de todos losnavegadores



M* Atributos parainternacionalizaci!n0 los utilizanlas p%ginas $ue muestran sus

contenidos en varios idiomas oa$uellas $ue $uieren indicar deforma e&pl#cita el idioma de sus

contenidos0





N* Atributos de eventos0 s!lo seutilizan en las p%ginas "ebdin%micas creadas con =ava4cript



Ele$entos &M!



Adem%s de eti$uetas yatributos, 123' de/ne el

término ele$ento parareferirse a las partes $uecomponen los documentos

123'





Una eti$ueta de apertura6ero o m%s atributos 2e&to encerrado por la eti$uetaUna eti$ueta de cierre



El te&to encerrado por laeti$ueta es opcional, ya

$ue algunas eti$uetasde 123' no pueden

encerrar ning:n te&to



El siguiente es$uemamuestra un elemento

123', formado por unaeti$ueta XpY, atributos ycontenidos de te&to0



Esque$a de las partes que co$ponen un ele$ento&M!



'a estructura mostrada en eles$uema anterior es unelemento 123' ya $uecomienza con una eti$uetade apertura )XpY*, contiene

cero o m%s atributos)classZnormal*,



Dispone de un contenidode te&to )Esto es un

p%rrafo* y /naliza conuna eti$ueta de cierre

)XVpY*



Por tanto, si una p%gina "ebtiene dos p%rrafos de te&to, lap%gina contiene doselementos y cuatro eti$uetas)dos eti$uetas XpY de

apertura y dos eti$uetasXVpY de cierre*



De todas formas,aun$ue estrictamente

no son lo mismo, es+abitual intercambiar las

palabras elemento yeti$ueta



Por otra parte, el lenguaje123' clasi/ca a todos loselementos en dos grupos0elementos en l'nea )inlineelements en inglés* y

elementos de bloque )blockelements en inglés*



'a principal diferenciaentre los dos tipos de

elementos es la formaen la $ue ocupan el

espacio disponible en lap%gina



'os elementos de blo$uesiempre empiezan en unanueva l#nea y ocupan todo elespacio disponible +asta el/nal de la l#nea, aun$ue sus

contenidos no lleguen +astael /nal de la l#nea



Por su parte, loselementos en l#nea s!lo

ocupan el espacionecesario para mostrar

sus contenidos

F*t$l F*ead



FtitleE#e$plo de ele$entos en l'nea (ele$entos de bloqueFHtitle

FH*ead Fbod( Fp!os p-rra/os son ele$entos de

bloque.FHp Fa *re/J*ttpHH999."oo"le.co$J!os

enlaces son ele$entos en l'neaFHa Fp;entro de un p-rra/o, Fa

*re/J*ttpHH999."oo"le.co$Jlos

enlacesFHa si"uen siendo ele$entos en l'nea.FHp FHbod( FH*t$l





'a mayor#a deelementos de blo$ue

pueden contener en suinterior elementos en

l#nea y otros elementosde blo$ue





En cambio, un elementoen l#nea puede aparecer

dentro de un elementode blo$ue y dentro de

otro elemento en l#nea



'os elementos en l#nea de/nidospor 123' son0 a, abbr, acronym,b, basefont, bdo, big, br, cite,

code, dfn, em, font, i, img, input,bd, label, $, s, samp, select,small, span, strie, strong, sub,

sup, te&tarea, tt, u, var



'os elementos de blo$uede/nidos por 123' son0address, bloc$uote, center,

dir, div, dl, /eldset, form, +K,+M, +N, +W, +L, +, +r, isinde&,

menu, noframes, noscript, ol,p, pre, table, ul



)inta7is de las

etiquetas &M!



El lenguaje 123' originalera muy permisivo en su

sinta&is, por lo $ue eraposible escribir suseti$uetas y atributos de

muc+as formas diferentes



'as eti$uetas por ejemplopod#an escribirse en

may:sculas, enmin:sculas e inclusocombinando may:sculas y

min:sculas





'a 7e&ibilidad de 123' puedeparecer un aspecto positivo,pero el resultado /nal son

p%ginas con un c!digo 123'desordenado, dif#cil de

mantener y muy pocoprofesional



Afortunadamente,?123' soluciona estos

problemas a5adiendociertas normas en la

forma de escribir laseti$uetas y atributos



A continuaci!n semuestran las cinco

restricciones b%sicas $ueintroduce ?123'respecto a 123' en lasinta&is de sus eti$uetas0



K* !as etiquetas se tienen quecerrar de acuerdo a co$o seabren0

Ejemplo correcto en ?123'0

XpYEste es un p%rrafo con XaYunenlaceXVaYXVpY



Ejemplo incorrecto en?123' )pero correcto en

123'*0XpYEste es un p%rrafo con

XaYun enlaceXVpYXVaY



M* !os no$bres de las etiquetas (atributos sie$pre se escriben en$in6sculas0

Ejemplo correcto en ?123'0

XpYEste es un p%rrafo con Xa

+refZ+ttp0VV"""googlecomYunenlaceXVaYXVpY



Ejemplo incorrecto en ?123' )perocorrecto en 123'*0

XPYEste es un p%rrafo con XA1RE;Z+ttp0VV"""googlecomYunenlaceXVAYXVPY



N* El valor de los atributossie$pre se encierra con co$illas0

Ejemplo correcto en ?123'0XpYEste es un p%rrafo con Xa+refZ+ttp0VV"""googlecomYunenlaceXVaYXVpY



Ejemplo incorrecto en ?123')pero correcto en 123'*0

XpYEste es un p%rrafo conXa

+refZ+ttp0VV"""googlecomYun enlaceXVaYXVpY



W* !os atributos no se puedenco$pri$ir0 Ejemplo correcto en ?123'0

Xdl compactZcompactYXVdlY

Ejemplo incorrecto en ?123' )pero correctoen 123'*0

Xdl compactYXVdlY



L* &odas las etiquetas debencerrarse sie$pre0

'a mayor#a de eti$uetas 123'encierran un contenido de te&toentre la eti$ueta de apertura y la

eti$ueta de cierre



4in embargo, algunaseti$uetas especiales

llamadas "etiquetasvacías" no necesitan

encerrar ning:n te&to



'a eti$ueta Xbr VY porejemplo, se utiliza para

indicar el comienzo deuna nueva l#nea, tal ycomo se ver% m%sadelante



Por sus caracter#sticas, la eti$uetaXbrY nunca encierra ning:ncontenido de te&to

6omo el est%ndar ?123' obliga acerrar todas las eti$uetas abiertas,siempre $ue se incluya la eti$ueta

XbrY se deber#a cerrar de formaseguida0 XbrYXVbrY



En lugar de abrir y cerrar deforma consecutiva la eti$ueta)XbrYXVbrY* se puede

utilizar la sinta&is XbrVY paraindicar $ue es una eti$uetavac#a $ue se abre y se cierraen ese mismo punto



&e7to



'a mayor parte delcontenido de las p%ginas123' +abituales est%formado por te&to, llegandoa ser m%s del T9\ del

c!digo de la p%gina



Por este motivo, es muyimportante conocer los

elementos y eti$uetas$ue de/ne 123' para elmanejo del te&to



El lenguaje 123' incorporaal tratamiento del te&tomuc+as de las ideas ynormas establecidas enotros entornos de

publicaci!n de contenidos



De esta forma, 123' de/neeti$uetas para estructurar elcontenido en secciones y

p%rrafos y de/ne otraseti$uetas para marcarelementos importantesdentro del te&to



'a tarea inicial del editor decontenidos 123' consiste enestructurar el te&to original

de/niendo sus p%rrafos,titulares y t#tulos de secci!n,como se muestra en lasiguiente imagen0



Estructurar



'a forma m%s sencilla deestructurar un te&to consisteen separarlo por p%rrafos

Adem%s, 123' permite incluirt#tulos $ue delimitan cadauna de las secciones



)ecciones



'as p%ginas 123'+abituales suelen tener

una estructura m%scompleja $ue la $ue sepuede crear solamentemediante p%rrafos



De +ec+o, es +abitual$ue las p%ginas se

dividan en diferentessecciones jer%r$uicas





De esta forma, aun$ueuna p%gina puede de/nir

cual$uier n:mero desecciones, s!lo puedeincluir seis niveles jer%r$uicos



'as eti$uetas $uede/nen los t#tulos de

secci!n son X+KY,X+MY, X+NY, X+WY,

X+LY y X+Y



'a eti$ueta X+KY es lade mayor importancia y

por tanto se utiliza parade/nir los titulares de lap%gina



'a importancia del resto deeti$uetas es descendiente,de forma $ue la eti$uetaX+Y es la $ue se utilizapara delimitar las secciones

menos importantes de lap%gina

F*t$l F*ead FtitleE#e$plo de te7to estructurado



FtitleE#e$plo de te7to estructurado

con seccionesFHtitle FH*ead Fbod( F*4&itular de la p-"inaFH*4 FpP-rra/o de introducci%n...FHp F*2!a pri$era subKsecci%nFH*2 FpP-rra/o de contenido...FHp F*2Otra subsecci%nFH*2 FpM-s p-rra/os de contenido...FHp FHbod( FH*t$l

Marcado b-sico de te7to



Una vez estructurado elte&to en p%rrafos ysecciones, el siguientepaso es el marcado de loselementos $ue componen

el te&to



'os te&tos +abituales est%nformados por elementoscomo palabras en negritao cursiva, anotaciones ycorrecciones, citas a otros

documentos e&ternos, etc



Entre las eti$uetas m%sutilizadas para marcar

te&to se encuentranFe$ y Fstron".



'a eti$ueta XemY marca unte&to indicando $ue suimportancia es mayor $ue la del

resto del te&to 'a eti$uetaXstrongY indica $ue undeterminado te&to es de la

mayor importancia dentro de lap%gina Ejemplo0

F*t$l F*ead FtitleE#e$plo de etiqueta e$ (



FtitleE#e$plo de etiqueta e$ (

stron"FHtitle FH*ead Fbod( FpEl len"ua#e &M! per$ite $arcar

al"unos se"$entos de te7to co$o Fe$$u( i$portantesFHe$ (

otros se"$entos co$o Fstron"los $-s i$portantesFHstron".FHp FHbod( FH*t$l





123' permite indicar de formaclara el te&to $ue +a sidoeliminado y el te&to $ue +a sido

a5adido a un determinado te&tooriginal 'as eti$uetas utilizadasson XinsY y XdelY, cuya

de/nici!n formal es la siguiente0





X+tmlY X+eadYXtitleYEjemplo de eti$ueta ins y

delXVtitleYXV+eadYXbodyY



XbodyY

X+NYEjemplo de eti$ueta ins y delXV+NY XpYEl 123', acr!nimo inglés de 1yper 2e&t 3arup

'anguage )lenguaje de Xdel datetimeZM99TK9ML

citeZ+ttp0VV"""libros"ebesVmas[informacion+tmlYm

arcado de +iperte&toXVdelY Xins datetimeZM99TK9MciteZ+ttp0VV"""libros"ebesVmas[informacion+tmlY

marcas +iperte&tualesXVinsY* es un lenguaje demarcaci!n dise5ado para estructurar te&tos y

presentarlos en forma de +iperte&toXVpY XVbodyY XV+tmlY

Por otra parte, en muc+os tiposde p%ginas )art#culos, noticias*



es +abitual citar literalmente unte&to e&terno 123' de/ne laeti$ueta Xbloc$uoteY para

incluir citas te&tuales en lasp%ginas "eb 'a de/nici!n de laeti$ueta 123' con el nombre

m%s largo se muestra acontinuaci!n0



F*t$l F*eadFtitleE#e$plo de etiqueta

bloc1quoteFHtitleFH*ead



Fbod( Fp)e"6n el W3C, el valor del atributo Fe$citeFHe$ en las etiquetas

Fstron"bloc1quoteFHstron" tiene el si"uiente si"ni5cadoFHp Fbloc1quote

citeJ*ttpHH999.93.or"H&RH*t$l:?4HstructHte7t.*t$lJJEl valor de este atributo es unadirecci%n LR! que indica el docu$entoori"inal de la cita.JFHbloc1quote

FHbod( FH*t$l

Marcado avan8ado de te7to



'as p%ginas y documentos m%savanzados suelen incluir otroselementos importantes $ue se

deben marcar de formaadecuada Por ello, 123' incluyemuc+as otras eti$uetas $ue

permiten marcar m%s elementosdel te&to



'a eti$ueta XabbrY marcalas abreviaturas de un te&toy la eti$ueta XacronymY se

emplea para marcar lassiglas o acr!nimos del

te&to 4u de/nici!n es lasiguiente0





X+tmlY X+eadY XtitleYEjemplo de eti$ueta acronymXVtitleY



j p $ y V

XV+eadY XbodyY XpYEl lenguaje Xabbr titleZ1yper2e&t

3arup 'anguageY123'XVabbrY es Estandarizado por el Xacronym titleZ(orld

(ide (eb consortiumY(N6XVacronymYXVpY

XVbodyY XV+tmlY



'a mayor#a de navegadoresmuestran por defecto un bordeinferior punteado para todos loselementos Fabbr y Facron($

Al posicionar el puntero del rat!nsobre la palabra subrayada, elnavegador muestra un pe$ue5o

recuadro )llamado tooltip en inglés*con el valor del atributo title

Espacios en blanco ( nuevasl'neas



El aspecto m%s sorprendentedel lenguaje 123' cuando sedesarrollan los primeros

documentos es el tratamientoespecial de los "espacios enblanco" del te&to



123' considera espacio enblanco a los espacios enblanco, los tabuladores, losretornos de carro y elcar%cter de nueva l#nea

)E<2ER o Intro*

X+tmlY X+eadYXtitleYEjemplo de eti$ueta

pXVtitleYXV+eadY



XbodyY XpYEste primer p%rrafo no contiene saltosde l#nea ni otro tipo de espaciadoXVpY

XpYEste segundo p%rrafo s# $ue contiene

saltos de l#nea y otro tipo de espaciadoXVpY XVbodyY XV+tmlY

Nuevas l'neas



Para incluir una nueval#nea en un punto y

forzar a $ue el te&to $uesigue se muestre en lal#nea inferior, se utilizala eti$ueta Xbr VY



En cierta manera, insertarla eti$ueta Xbr VY en undeterminado punto delte&to e$uivale a presionarla tecla E<2ER )o Intro* en

ese mismo punto



F*t$l F*ead FtitleE#e$plo de etiqueta brFHtitle FH*ead



FH*ead Fbod( FpEste pri$er p-rra/o no contiene saltos

de l'nea ni otro tipo de espaciado.FHp FpEste se"undo p-rra/o s' que contiene

saltos FbrH de FbrH l'nea FbrH ( otro tipo de espaciado.FHp FHbod( FH*t$l

Espacios en blanco



'a soluci!n al problema delos espacios en blanco noes tan sencilla como el delas nuevas l#neas



Para incluir espacios enblanco adicionales, se debesustituir cada nuevo espacio

en blanco por el te&to ]nbsp^)es importante incluir els#mbolo ] al principio y els#mbolo ^ al /nal*

F*t$l F*ead FtitleE#e$plo de entidad nbspFHtitle FH*ead



FH*ead Fbod( FpEste pri$er p-rra/o no contiene saltos

de l'nea ni otro tipo de espaciado.FHp FpEste se"undo p-rra/o s' que contiene

saltos FbrH de FbrH l'nea FbrH ( nbspnbsp otro nbsp tipo nbsp de

nbsp espaciado.FHp FHbod( FH*t$l



6ada te&to ]nbsp^ solamentee$uivale a un espacio enblanco, por lo $ue se deben

escribir tantos ]nbsp^seguidos como espacios enblanco seguidos e&istan en elte&to



National Aeronautics and Space Administration,Laboratorio de Propulsión a Chorro



&e7to pre/or$ateado



En ocasiones, es necesario mostrarlos espacios en blanco de un te&to$ue no se puede modi/car

4e trata de un caso +abitual cuandouna p%gina "eb debe mostrardirectamente el te&to generado por

alguna aplicaci!n

En estos casos, se puedeutiliza la eti$ueta XpreY, $ue



muestra el te&to tal y comose +a escrito, respetandotodos los espacios en blanco

y todas las nuevas l#neas 'ade/nici!n formal de laeti$ueta se muestra a

continuaci!n0



F*t$l F*eadFtitleE#e$plo de etiqueta preFHtitleFH*ead Fbod( Fpre !a etiqueta pre respeta los espacios en blanco



respeta los espacios en blanco ( $uestra el te7to tal ( co$o est- escrito FHpre Fp !a etiqueta pre respeta los espacios en blanco ( $uestra el te7to tal ( co$o

est- escrito FHp FHbod( FH*t$l



Codi5caci%n decaracteres



Una consideraci!nimportante directamenterelacionada con el te&to de

las p%ginas 123' es lacodi/caci!n de los

caracteres y la inserci!n decaracteres especiales



Algunos de loscaracteres $ue se

utilizan +abitualmente enlos te&tos no se puedenincluir directamente en

las p%ginas "eb0



'os caracteres $ueutiliza 123' para de/nir

sus eti$uetas )X, Y y *no se pueden utilizarlibremente



'os caracteres propios de losidiomas $ue no son el inglés)5, %, _, , `, etc* pueden ser

problem%ticos dependiendode la codi/caci!n decaracteres utilizada



'a soluci!n a la primeralimitaci!n consiste ensustituir los caracteres

reservados de 123' porunas e&presiones llamadasentidades HTML y $uerepresentan a cada car%cter0





De esta forma, si seconsidera el siguiente

te&to0 'os caracteres X,Y, y ] pueden darproblemas con los te&tosen 123'

Para mostrar correctamente el te&to



Para mostrar correctamente el te&toanterior en una p%gina 123', sedebe sustituir cada car%cter especialpor su entidad 123'0

XpY'os caracteres ]lt^, ]gt^, ]$uot^y ]amp^ pueden dar problemas conlos te&tos en 123'XVpY





Por otra parte, los caracterespropios de los idiomas diferentesal inglés también pueden ser

problem%ticos El motivo es $uedesde $ue se crea una p%gina"eb +asta $ue llega al

navegador del usuario,intervienen numerosos procesos0



El dise5ador crea lap%gina "eb con su

editor 123' )porejemplo Dream"eaver*



4i se trata de una aplicaci!ndin%mica, el programadorrecorta la p%gina 123' del

dise5ador y la mezcla con elresto del c!digo de la

aplicaci!n )por ejemploP1P*



El servidor "eb almacenalas p%ginas 123'est%ticas o el c!digo de laaplicaci!n "eb y sirve lasp%ginas solicitadas por los

usuarios



El usuario solicita yvisualiza las p%ginas

"eb a través de sunavegador



4i en todos los procesosanteriores se utiliza lamisma codi/caci!n de

caracteres, los caracterespropios de los idiomas se

pueden escribirdirectamente0



XpYEste p%rrafocontiene caracteres

acentuados y sealmacena en formatoU2;8XVpY



'a soluci!n m%s sencilla paraasegurar $ue todos estoscaracteres potencialmente

problem%ticos se van a visualizarcorrectamente en el navegadordel usuario consiste en sustituir

cada car%cter problem%tico porsu entidad 123'0





XpYEste p]aacute^rrafocontiene caracteresacentuados y se almacena

en formato U2;8XVpY

En la (iipedia se puede consultar la lista



p p

completa de las MLM entidades 123'de/nidas )+ttp0VVen"iipediaorgV"iiV'ist[of[?3'[and[123'[c+aracter[entity[ref erences*

http://en.wikipedia.org/wiki/






Enlaces

El lenguaje de marcado 123' se



El lenguaje de marcado 123' sede/ni! teniendo en cuentaalgunas de las caracter#sticas $uee&ist#an en ese momento para lapublicaci!n digital de contenidosEntre los conceptos utilizados ensu creaci!n, se encuentra el

mecanismo de "hipertexto"





'a incorporaci!n delhipertexto fue una de lasclaves del é&ito del lenguaje

123', ya $ue permiti! creardocumentos interactivos $ueproporcionan informaci!n

adicional cuando se solicita



El elemento principal del+iperte&to es el"hiperenlace"

, tambiénllamado enlace "eb osimplemente enlace



'os enlaces se utilizan paraestablecer relaciones entre dosrecursos Aun$ue la mayor#a deenlaces relacionan p%ginas "eb,también es posible enlazar otrosrecursos como im%genes,documentos y arc+ivos

Antes de empezar a crear

LR!



es de e pe a a c eaenlaces, es necesariocomprender y dominar elconcepto de UR' El acr!nimoUR' )del inglés niform !esourceLocator * +ace referencia alidenti/cador :nico de cadarecurso disponible en Internet



'as UR' son esencialespara crear los enlaces,pero también se utilizanen otros elementos 123'como las im%genes y los

formularios



'a UR' de un recurso tienedos objetivos principales0

Identi/car de forma :nica aese recurso Permitir localizar de formae/ciente ese recurso



En primer lugar, las UR'permiten $ue cada p%gina123' publicada en

Internet tenga un nombre:nico $ue permita

diferenciarla de las dem%s

De esta forma es posible crear



enlaces $ue apunten de formaine$u#voca a una determinadap%gina

4i se accede a la p%gina principal deoogle, la direcci!n $ue muestra el

navegador es0+ttp0VV"""googlecom

'a cadena de te&to



+ttp0VV"""googlecom es la UR'completa de la p%gina principal deoogle

'a UR' de las p%ginas esimprescindible para crear los

enlaces, ya $ue permite distinguiruna p%gina de otra



El segundo objetivo de lasUR' es el de permitir lalocalizaci!n e/ciente de cada

recurso de Internet Para elloes necesario comprender lasdiferentes partes $ue forman

las UR'

Una UR' sencilla siempre est%



pformada por las mismas trespartes 4i por ejemplo seconsidera la siguiente UR'0

+ttp0VV"""libros"ebesV&+tmlV

capituloW+tml

'as partes $uecomponen la UR'



anterior son0

Protocolo )+ttp0VV*0 elmecanismo $ue debeutilizar el navegador paraacceder a ese recurso



2odas las p%ginas "ebutilizan +ttp0VV 'as p%ginas"eb seuras )por ejemplo

las de los bancos y las delos servicios de email*

utilizan +ttps0VV )se a5adeuna letra s*

4ervidor )"""libros"ebes*0simpli/cando muc+o su



e&plicaci!n, se trata delordenador en el $ue seencuentra guardada la p%gina

$ue se $uiere acceder 'osnavegadores son capaces deobtener la direcci!n de cada

servidor a partir de su nombre



Ruta )V&+tmlVcapituloW+tml*0camino $ue se debe seguir,una vez $ue se +a llegado al

servidor, para localizar elrecurso espec#/co $ue se$uiere acceder



Por tanto, las UR' no s!loidenti/can de forma :nica acada recurso de Internet, sino

$ue también proporcionan alos navegadores la informaci!nnecesaria para poder llegar

+asta ese recurso

'a mayor#a de UR' son tan



sencillas como la UR' mostradaanteriormente <o obstante,e&isten UR' complejas formadas

por m%s partes+ttp0VV"""alistapartcomVcomme

ntsV"ebstandardsM998SpageZLGWM

'as cinco partes $ue forman la UR'



anterior son0

Protocolo )+ttp0VV*

4ervidor )"""alistapartcom* Ruta)VcommentsV"ebstandardsM998*

6onsulta )SpageZL*0 informaci!n



adicional necesaria para $ue elservidor localice correctamenteel recurso $ue se $uiere acceder4iempre comienza con elcar%cter S Q contiene unasucesi!n de palabras separadaspor Z y ]



4ecci!n )GWM*0 permite $ueel navegador se posicioneautom%ticamente en una

secci!n de la p%gina "eb4iempre comienza con el

caracter G

'os enlaces en 123' se crean

Enlaces b-sicos



mediante la eti$ueta XaY )sunombre viene del inglés"anchor", literalmente traducidocomo ancla* A continuaci!n semuestra la de/nici!n simpli/cadade XaY y m%s adelante semuestra su de/nici!n completa0





El atributo m%simportante de laeti$ueta XaY es +ref,$ue se utiliza paraindicar la UR' a la $ue

apunta el enlace

6uando el usuario da clic



sobre un enlace, el navegadorse dirige a la UR' del recurso

indicado mediante +ref 'asUR' de los enlaces pueden serabsolutas, relativas, internas y

e&ternas

Con la de5nici%n anterior, para crear



un enlace que apunte a la p-"inaprincipal de Goo"le sola$ente *abr'aque incluir lo si"uiente en undocu$ento &M!

Fa*re/J*ttpHH999."oo"le.co$JP-"in

a principal de Goo"leFHa

6omo el atributo +ref indica una



UR', un enlace puede apuntar acual$uier tipo de recurso al $uepueda acceder el navegador Elsiguiente enlace apunta a unaimagen, $ue se mostrar% en elnavegador cuando el usuariopinc+e sobre el enlace0

Xa +ref Z +ttp0VV"""ejemplocomV



fondo[escritoriojpgYImageninteresante para un fondo deescritorioXVaY

De la misma forma, los enlaces pueden



apuntar directamente a documentos PD;,(ord, etc

Xa +ref Z+ttp0VV"""ejemplocomVinformepdfYDescargar informe completoPD;XVaY

Xa +refZ+ttp0VV"""ejemplocomVinformedocYDescargar informe completo

DC6XVaY

Un truco muy :til con los enlaces



es el uso de UR' relativas parapoder volver al inicio del sitio"eb desde cual$uier p%gina "ebinterior0

Xa +refZVY>olver al inicioXVaY

El otro atributo b%sico de la



eti$ueta XaY es name, $uepermite de/nir enlaces dentro deuna misma p%gina "eb 4i una

p%gina es muy larga, puede ser:til mostrar enlaces de tipo 4altar+asta la segunda secci!n, >olver

al principio de la p%gina, etc



Este tipo de enlaces sonespeciales, ya $ue la UR' dela p%gina siempre es la

misma para todas lassecciones y por tanto, debea5adirse otra parte a las UR'

para identi/car cada secci!n

Xa nameZprimera[seccionYXVaYi d l i



XpY'orem ipsum dolor sit amet,consectetuer adipiscing elit 3aurisid ligula eu felis adipiscing ultrices

Duis gravida leo ut lectus Praesentcondimentum mattis ligulaXVpY

Xa nameZsegunda[seccionYXVaYP ll l d I i



XpYPellentes$ue malesuada In inlacus P+asellus erat erat, lacinia a,convallis eu, nonummy et, odio

Aenean urna elit, ultrices id, placeratvarius, facilisis eget, dolorXVpY



El atributo name permitecrear enlaces vac#os $ue+acen referencia a

secciones dentro de unamisma p%gina

Lna ve8 de5nidos los Jenlaces

' J ibl l



vac'osJ, es posible crear un enlaceque apunte directa$ente a unasecci%n concreta de una p-"ina

 Fa *re/J*ttpHH999.e#e$plo.co$H

pa"ina4.*t$lJEnlace a la p-"ina

4FHa

#$%% &nlace directo a la seunda

secci'n de la p(ina )



secci'n de la p(ina %%)Xa +refZ+ttp0VV"""ejemplocomVpaginaK+tmlGsegunda[seccionYEnl

ace a la secci!n M de la p%ginaKXVaY

' i i ili



'a sinta&is $ue se utilizacon estos enlaces es lamisma $ue con los enlaces

normales, salvo $ue sea5ade el s#mbolo G seguidodel nombre de la secci!n ala $ue se apunta

6uando el usuario pinc+ab d t l



sobre uno de estos enlaces,el navegador accede a la

p%gina apuntada por la UR' ybaja directamente a lasecci!n cuyo nombre se

indica después del s#mbolo G

A partir de la estructura de directorios yarc+ivos indicada en la siguiente imagen0



K* 6rear la siguiente p%ginall d i di +t l i



llamada indice+tml $ue sirvacomo p%gina principal del

sitio0



M* 6rear la p%gina de #ndice del portfolio0



Imágenesyobjetos



Imágenes y objetos

● Las imágenes son uno de los

elementos más importantes



elementos más importantesde las páginas web. ehecho, prácticamente todaslas páginas web contienenalguna imagen ! la ma!or"a

inclu!en decenas deimágenes.



●

Los dos atributos requeridos son



Los dos atributos requeridos sonsrc ! alt. #l atributo src es similaral atributo hre$ de los enlaces, !aque establece la %&L de laimagen que se va a mostrar en

la página. Las %&L indicadaspueden ser absolutas o relativas.

●

#l atributo alt permite describir el



#l atributo alt permite describir elcontenido de la imagen medianteun te'to breve. Las descripciones

deben tener una longitud in$erior a()*+ caracteres ! son tiles paralas personas ! dispositivos

discapacitados que no puedenacceder a las imágenes.

#-emplo sencillo para incluiruna imagen



una imagen

/img src01logotipo.gi$1alt01Logotipo de 2i Sitio1 34

●

● La recomendación es utili5ar



La recomendación es utili5aruno de los tres siguientes

$ormatos grá$icos queentienden todos losnavegadores modernos 678,

9P6 ! PN6.



!istas

En ocasiones, es posible agrupardeterminadas palabras o frases



determinadas palabras o frasesen un conjunto de elementos$ue tienen m%s signi/cado deforma conjunta El men: denavegaci!n de un sitio "eb porejemplo est% formado por ungrupo de palabras

El lenguaje 123' de/ne trestipos diferentes de listas para



tipos diferentes de listas paraagrupar los elementos0 listas

no ordenadas )se trata deuna colecci!n simple deelementos en la $ue no

importa su orden*

'istas ordenadas )similar a laanterior pero los elementos



anterior, pero los elementosest%n numerados y por tanto,

importa su orden* y listas dede/nici!n )un conjunto detérminos y de/niciones

similar a un diccionario*

'as listas no ordenadas son lasm%s sencillas y las $ue m%s se

!istas no ordenadas



m%s sencillas y las $ue m%s seutilizan Una lista no ordenada

es un conjunto de elementosrelacionados entre s# pero paralos $ue no se indica un orden o

secuencia determinados

'a eti$ueta XulYi t d l



'a eti$ueta XulYencierra todos loselementos de la lista y laeti$ueta XliY cada unode sus elementos



El siguiente c!digo 123' muestra un ejemplosencillo de lista no ordenada0 X+tmlY X+eadYXtitleYEjemplo de eti$ueta U' XVtitleYXV+eadY XbodyY



XbodyY X+KY3en:XV+KY XulY XliYInicioXVliY XliY<oticiasXVliY XliYArt#culosXVliY XliY6ontactoXVliY XVulY

XVbodyY XV+tmlY



6uando se crea por ejemplo unalista con las instrucciones de un



lista con las instrucciones de unproducto, es importante el ordenen el $ue se realiza cada paso6uando se muestra un #ndice otabla de contenidos en un libro,es importante el orden de cadaelemento del #ndice

En todos estos casos, la listam%s adecuada es la lista



m%s adecuada es la listaordenada, $ue se de/nemediante la eti$ueta XolY 'oselementos de la lista se de/nenmediante la eti$ueta XliY, lamisma $ue se utiliza en las listasno ordenadas



X+tmlY X+eadYXtitleYEjemplo de eti$ueta

C'XVtitleYXV+eadY XbodyY

X+KYInstruccionesXV+KYl



X+KYInstruccionesXV+KY XolY XliYEnc+ufar correctamenteXVliY XliY6omprobar cone&ionesXVliY XliYEncender el aparatoXVliY XVolY XVbodyY

XV+tmlY

'as listas de de/nici!n apenas seutilizan en la mayor#a de p%ginas

!istas de de5nici%n



utilizan en la mayor#a de p%ginas123' 4u funcionamiento essimilar al de un diccionario, ya$ue cada elemento de la listaest% formado por términos yde/niciones

'a eti$ueta XdlY crea lalista de de/nici!n y las



lista de de/nici!n y laseti$uetas XdtY y XddY

de/nen respectivamente eltérmino y la descripci!n de

cada elemento de la lista







&ablas

Desde sus primeras versiones,123' incluy! el soporte para



123' incluy! el soporte paracrear tablas de datos en las

p%ginas "eb Adem%s de sersencillo, el modelo de/nido por123' es muy 7e&ible y

bastante completo

'as tablas en 123' utilizanlos mismos conceptos de



los mismos conceptos de/las, columnas, cabeceras y

t#tulos $ue los $ue seutilizan en cual$uier otroentorno de publicaci!n dedocumentos0



'as tablas de 123' puedecontener elementos simples



contener elementos simples,agrupaciones de /las y de

columnas, cabeceras y piesde tabla, subdivisiones,cabeceras m:ltiples y otros

elementos complejos



&ablas b-sicas

'as tablas m%s sencillas de123' se de/nen con tres



123' se de/nen con treseti$uetas0 XtableY para

crear la tabla, XtrY paracrear cada /la y XtdY para

crear cada columna

F*t$l F*eadFtitleE#e$plo de tabla sencillaFHtitleFH*ead Fbod( F*4!istado de cursosFH*4 Ftable Ftr FtdFstron"CursoFHstron"FHtd FtdFstron"orasFHstron"FHtd FtdFstron"orarioFHstron"FHtd FHtr Ftr



FtdC))FHtd Ftd2?FHtd Ftd4?? K 2???FHtd FHtr Ftr

Ftd&M!FHtd Ftd2?FHtd Ftd4?? K 2???FHtd FHtr Ftr Ftd;rea$9eaverFHtd Ftd?FHtd Ftd4?? K 2???FHtd

FHtr FHtable FHbod( FH*t$l

'a eti$ueta XtableYencierra todas las /las y



encierra todas las /las ycolumnas de la tabla 'as

eti$uetas XtrY )del inglés"table ro*"+ de/nen cada/la de la tabla y encierrantodas las columnas

Por :ltimo, la eti$ueta XtdY)del inglés "table data cell"+



)del inglés table data cell +de/ne cada una de las

columnas de las /las,aun$ue realmente 123' node/ne columnas sino celdas

de datos,







<ormalmente, algunas de lasceldas de la tabla se utilizancomo cabecera de las dem%sceldas de la /la o de la



celdas de la /la o de lacolumna En este caso, 123'

de/ne la eti$ueta Xt+Y )delinglés "table header cell"+para indicar $ue una celda es

cabecera de otras celdas



Por otra parte, 123' de/ne laeti$ueta XcaptionY paraestablecer la leyenda o t#tulo

de una tabla 'a eti$uetad b l



de una tabla 'a eti$uetadebe colocarseinmediatamente después dela eti$ueta XtableY y cadatabla s!lo puede incluir una

eti$ueta XcaptionY



Determinar el c!digo 123'necesario para crear la

E#ercicio



necesario para crear latabla $ue se muestra en la

siguiente imagen0



'as tablas complejas suelendisponer de una estructura



pirregular $ue junta varias columnaspara formar una columna anc+a o

une varias /las para formar una /lam%s alta $ue las dem%s Parafusionar /las o columnas, se

utilizan los atributos rowspan ycolspan respectivamente

'a siguiente imagenbl l j



'a siguiente imagenmuestra una tabla compleja

$ue +a fusionado doscolumnas simples paraformar una columna m%s

anc+a0



Para obtener una tabla como la de la imagen

anterior, se debe utilizar el siguiente c!digo0<table>



table

<tr>

<td colspan="2">A</td>

</tr>

<tr>

<td>B</td>

<td>C</td></tr>

</table>

'a primera /la de la tabla est% formada s!lo por una columna,mientras $ue la segunda /la est%

formada por dos columnas En principio, podr#a pensarse enutilizar el siguiente c!digo 123'



utilizar el siguiente c!digo 123'

para de/nir la tabla0

<table>

<tr><td>A</td>

</tr>

<tr>

<td>B</td>

<td>C</td>

</tr>

</table>



El c!digo 123' $ue se debe utilizar para obtener

la tabla de la imagen anterior es0<table>



<tr>

<td>A</td>

<td rowspan="2">B</td>

</tr>

<tr>

<td>C</td></tr>

</table>

Documents

Programación Web