Trabajo Programacion Web Avanzada 2

8/18/2019 Trabajo Programacion Web Avanzada 2

http://slidepdf.com/reader/full/trabajo-programacion-web-avanzada-2 1/20

Unidad II: LENGUAJE MARCADO

2.1 Introducción

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar undocumento que, junto con el texto, incorpora etiquetas o marcas que contieneninformación adicional acerca de la estructura del texto o su presentación.

El lenguaje de marcas más extendido es el H T ML (H!perText Mar"up Language,Lenguaje de marcado de #ipertexto$, fundamento del % orld % ide % e& (entramado decomunicación de alcance mundial$.

Los lenguajes de marcado suelen confundirse con len g u a jes d e p r o g ra m ació n. 'inem&argo, no son lo mismo, !a que el lenguaje de marcado no tiene funciones

aritmticas o )aria&les, como s* poseen los lenguajes de programación.Históricamente, el marcado se usa&a ! se usa en la industria e ditorial ! de lacomunicación, as* como entre a ut o re s , e d ito r es e impresores.

Un ejemplo de cómo funciona el lenguaje de marcado puede o&ser)arse en eldictado de )i)a )o+ de un documento a una persona que lo transcri&e amá q uin a

-onga estilo de carta. -onga comillas, ponga ma!sculas, Estimado /uan, ponga

dos puntos, aparte, sangr*a, ponga primera letra ma!scula, te escri&o esta carta,ponga negrillas, de forma mu! urgente, cierre negrilla, !a que no me #as en)iado...etc.

2.2 Representación de docuentos

• 0e presentación

1 2ndica el formato del texto (información para el maquetado$. 3 0e procedimientos

1 4rientado tam&in a la presentación pero, en este caso, se indican losprocedimientos que de&erá reali+ar el '% de representación.3 0escripti)o o semántico

1 0escri&en las diferentes partes en las que se estructura el documento pero sinespecificar cómo de&en representarse

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

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

http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n




http://es.wikipedia.org/wiki/Editorial_(empresa)


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



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

http://es.wikipedia.org/wiki/M%C3%A1quina_de_escribir

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





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

http://es.wikipedia.org/wiki/M%C3%A1quina_de_escribir

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



.2.! "ipos de datos #$sicos

5ecordando lo anteriormente dic#o, el '6ML permite definir nue)osmetalenguajes. 7 cada lenguaje de formato de documentos definido con '6ML se lodenomina aplicación '6ML. Las partes en las que se di)ide una aplicación '6MLson

8. Una declaración '6ML

En la misma se concreta que caracteres ! delimitadores pueden aparecer en la

aplicación. Es decir , lo que se declara es la )ersión de caracteres que )an apoder ser utili+ados. (UT9:; por ejemplo$.

<. Una 0eclaración del tipo de documento (0T0$

=sta define la sintaxis de las estructuras de formato, as* como referencias aentidades de caracteres. En pala&ras más sencillas, define el tipo de etiquetas que)an a poder ser usadas, los caracteres permitidos en el lenguaje, como se )a aestructurar ese lenguaje etctera> 0e esta manera se podrá luego )alidar frente aese tipo de 0T0 seleccionada, para compro&ar sin la sintaxis a la #ora de coloras las&ali+as #a sido la correcta o tiene errores, sin em&argo. ?alidar una @e& frente a la0T0 empleada mediante el ser)icio del ?alidador de la %AB es algoimprescindi&le. 0e otra manera el c o mport a mie n to de nuestra @e& frente a los

na)egadores podr*a ser impre)isi&le, además de que afectar*a al posicionamiento@e&, del cual #a&laremos más adelante.

A. Una especificación que descri&e la semántica

'e trata de una especificación que descri&e el significado que se de&e aportar alcódigo de formato. 7dicionalmente, esta especificación tam&in imponerestricciones de sintaxis que no pueden expresarse dentro del 0T0.

C. 0ocumentos con su contenido ! su marcado entrela+ado Bada documento, comoes lógico, de&e contener una referencia al 0T0 que de&e usarlo para interpretarlo.(?alidación$.

http://www.monografias.com/trabajos35/el-poder/el-poder.shtml

http://www.monografias.com/trabajos16/comportamiento-humano/comportamiento-humano.shtml


http://www.monografias.com/trabajos35/el-poder/el-poder.shtml




2.% Estructura &'o#a' de un docuento

Un documento HTML C se compone de tres partes

8. una l*nea que contiene in f o r m a c ión s o & r e l a ) e r s ión d e H TM L,

<. una sección de ca&ecera declarati)a (delimitada por el element HE 70$.

A. un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento D 4 0 o mediante el elemento 9 5 7 M E'ET.

-uede aparecer espacio en &lanco (espacios, saltos de l*nea,ta&ulaciones ! comentarios$ antes ! despus de cada sección. Las secciones <

! A de&er*an estar delimitadas por el elemento HT M L.

7qu* tenemos un ejemplo de un documento HTML sencillo

FG04BT-E HTML -UDL2B :%AB0T0 HTML C.I8EJ#ttp@@@[email protected]#tmlCstrict.dtdKFHTMLK FHE70KFT2TLEKMi primer documento HTMLFT2TLEK FHE70K

FD40K

F-KHola mundoG FD40K

FHTMLK

http://html.conclase.net/w3c/html401-es/struct/global.html#version-info


http://html.conclase.net/w3c/html401-es/struct/global.html#edef-HEAD

http://html.conclase.net/w3c/html401-es/struct/global.html#edef-BODY

http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET

http://html.conclase.net/w3c/html401-es/struct/global.html#edef-HTML



http://html.conclase.net/w3c/html401-es/struct/global.html#edef-HEAD

http://html.conclase.net/w3c/html401-es/struct/global.html#edef-BODY

http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET




2.( E'eentos #$sicos: te)to* +,ncu'os* 'istas, ta#'as* o#-etos* i$&enes ap'icaciones.

0entro del documento #a! dos +onas principales el enca&e+amiento, delimitado por las marcas FHE70K ! FHE70K, que sir)e para definir algunos )alores )álidosparatodo el documento, ! el cuerpo, delimitado por las etiquetasFD40K ! FD40K, donde reside la información del documento.

El elemento FT2TLEK contenido dentro del enca&e+amiento permite especificar elt*tulo de un documento HTML. Este t*tulo no forma parte del documento en s* pues nose )e en la pantalla principal, sino que sir)e como t*tulo de la )entana delprograma que la muestra.

Existen muc#os otros elementos que se englo&an dentro del enca&e+amientoperopara la estructura &ásica del lenguaje HTML en su ni)el &ásico no son necesarios.

El cuerpo de un documento HTML contiene el te x to, im á g e nes, etc. que, con lapresentación ! los efectos que se decidan, se presentarán ante el us ua r io. 0entro delcuerpo se pueden aplicar una serie de efectos a tra)s de diferentes marcas oetiquetas (tam&in otros autores las denominan directi)as$.

7s* pues, la estructura de un documento HTML es la siguiente

FHTMLK FHE70K

FT2TLEKT*tulo de la páginaFT2TLEK FHE70KFD40K7qu* se sitan otras etiquetas que #acen posi&le )isuali+ar la páginaN FD40KFHTMLK

El texto puede tener unas ca&eceras, comprendidas entre las etiquetas FH8K! FH8K, FH<K ! FH<K, etc. (#asta el nmero O$, siendo el nmero indicati)o deltamaPo. El tamaPo ma!or es el correspondiente al nmero 8.

http://www.hipertexto.info/documentos/texto.htm



http://www.hipertexto.info/documentos/imagen.htm



http://www.hipertexto.info/documentos/lector.htm








Hay otras etiquetas como <P>, para separar los distintos párrafos, la etiqueta de centrado<CENTER> y </CENTER> que sirve para centrar todo lo que esté dentro de ella, yasea texto, imágenes, etc. la etiqueta <HR> para obtener una raya horizontal tan ancha comola pantalla, y con la apariencia de estar embutida sobre el fondo, etc.

He aquí un ejemplo

<HTML> <HEAD>

<TITLE>!i pagina "eb</TITLE> </HEAD>

<BODY> <CENTER>

<H1>#rimera pagina</H1> </CENTER>

<HR>

$sta es mi primera pagina, aunque todavia es muy sencilla. <P>%qui va un segundo parrafo.</BODY> </HTML>

#ero existen también una serie de %tributos

<body background=no!br"#d"#arc$%&o>

$specifica una imagen para el fondo del documento. <body bgco'or=(rrggbb>

$specifica un color para el fondo del documento. <body )"*)=(rrggbb>

$specifica un color para el texto normal del documento. <body '%nk=(rrggbb

&'%nk=(rrggbb a'%nk=(rrggbb>

$stablece el color del texto de vínculo, del vínculo visitado y del vínculo activo.

(rrggbb representa el valor hexadecimal del color expresado como rojo&verde&azul.

$stilos y efectos básicos

'odas las etiquetas que siguen a continuaci(n se introducen a partir de la

etiqueta <BODY>, es decir, dentro del cuerpo del documento.



'ítulos

!ediante los títulos, en sus diferentes niveles de importancia, se puede definir el esqueleto

del documento o estructura básica. H'!) tiene * niveles de cabeceras numeradas del uno al

seis. He aquí algunos ejemplos de cabeceras H'!) y su representaci(n en pantalla

HTML zación

+-abecera tipo +/h+-abecera tipo +

0-abecera tipo 0/h0 ecera tipo 01-abecera tipo 1/h1 cera tipo 1

2-abecera tipo 2/h2 era tipo 2abecera tipo 3/h3 ra tipo 3abecera tipo */h* era tipo *

$lementos de texto

<+>

$l fin de un párrafo que será formateado antes de que se muestre en la pantalla<+r">, , , </+r">

4dentifica texto que ha sido formateado previamente 5preformateado6 por alg7n otro sistema

y debe ser desplegado tal como es. 'exto preformateado puede incluir etiquetas embebidas, pero no todos los tipos de etiquetas están permitidos. )a etiqueta <)ag> puede ser usada para incluir tablas en documentos.

<'%-)%ng>, , , </'%-)%ng>

$jemplo de listado de ordenador8 las etiquetas incluidas serán ignoradas, pero los espaciosde tabulaci(n funcionarán. $sta es una etiqueta ya arcaica.

<*!+>, , , </*!+>

9imilar a <+r"> excepto que no se reconocerán etiquetas incluidas. <+'a%n)"*)>

9imilar a <+r"> excepto que no se reconocerán etiquetas incluidas, como no hay etiqueta para finalizar, el resto del documento será traducido como



texto simple. $sta es una etiqueta arcaica. %lgunos navegadores reconocen una etiqueta</+'a%n)"*)>, a7n cuando no está definido por el estándar.

<b'ock.uo)">, , , </b'ock.uo)">

4ncluye una secci(n de texto citado de cualquier otra fuente.

%tributos del texto

!ediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentaci(ndel documento final.

E-)%'o- 'g%co- E-)%'o- 0-%co-

em . . . /em

:nfasis strong . . . /strong

:nfasis mayor code . . . /code

pliega uuna directiva

H'!)

. . /samp 4ncluye salida ejemplo

. /;bd <espliega una tecla del teclado

var . . . /var

<efine una variable dfn . . . /dfn

pliega una definici(nn muchos navegadores no funciona6

cite . . . /cite

b . . . /b

N"gr%)a- i . . . /i

Itálicas u . . . /u

9 u bra y a d o tt . . . /tt

'ipo de letra de máquina de escribir



)a forma más sencilla de estructurar un texto consiste en separarlo por párrafos.

%demás, H'!) permite incluir títulos que delimitan cada una de las secciones.

#árrafos

=na de las etiquetas más utilizadas de H'!) es la etiqueta p, que permite

definir los párrafos que forman el texto de una página. #ara delimitar el texto de un párrafo, se

encierra ese texto con la etiqueta p, como muestra el siguiente ejemplo

html head

title$jemplo de texto estructurado con párrafos/title /head

body

p$ste es el texto que forma el primer párrafo de la página.)os párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud altama>o de la ventana./p

p$l segundo párrafo de la página también se define encerrando su texto con la etiqueta p. $lnavegador también se encarga de separar automáticamente cada párrafo./p

/body /html



$l ejemplo anterior se visualiza de la siguiente manera en cualquier navegador

)a siguiente tabla recoge ladefi nici(n formal de la etiqueta p

Etiqueta p

Atributos comunes básicos, i+?n y eventos

Atributos propios &

Tipo de elemento @loque

Descripción <elimita el contenido de un párrafo de texto

)os párrafos creados con H'!) son

elem entos de bloque, por lo que

siem pre ocupan toda la anchura de la

ventana del navegador. %demás, no tienen atributos específicos, pero sí que se les pueden

asignar los atributos comunes de H'!) básicos, de internacionalizaci(n y de

eventos.

9ecciones



)as páginas H'!) habituales suelen tener una estructura más compleja que la



que se puede crear solamente mediante párrafos. <e hecho, es habitual que las páginas sedividan en diferentes secciones jerárquicas)os títulos de secci(n se utilizan para delimitar elcomienzo de cada secci(n de la

página. H'!) permite crear secciones de hasta seis niveles de importancia. <e esta forma,

aunque una página puede definir cualquier n7mero de secciones, s(lo puede incluir seis niveles

jerárquicos.

)as etiquetas que definen los títulos de secci(n

son h+, h0, h1, h2, h3 y h*. )a etiqueta h+ es la de mayor

importancia y por tanto se utiliza para definir los titulares de la página. )a

importancia del resto de etiquetas es descendiente, de forma que la etiqueta h*

es la que se utiliza para delimitar las secciones menos importantes de la página.

% continuaci(n se muestra la definici(n formal de la etiqueta h+, siendo idéntica la

definici(n del resto de etiquetas referidas a los títulos de secci(n

E)%.u")a h+

A)r%bu)o- básicos, i+?n y eventos co!un"-

A)r%bu)o- +ro+%o- &

T%+o d" "'"!"n)o @loque

n <efine los títulos de las secciones de mayor importancia de la página.

%l igual que la etiqueta p, las etiquetas de título de secci(n son elementos de bloque y no

tienen atributos específicos.

)as etiquetas h+, ..., h* definen títulos de secci(n, no secciones completas. #or este

motivo, no es necesario encerrar los contenidos de una secci(n con su etiqueta

correspondiente. 9olamente se debe encerrar con las etiquetas h+, ..., h* los títulos decada secci(n.



$l siguiente ejemplo muestra el uso de las etiquetas de titulo de secci(n

html

head

title$jemplo de texto estructurado con secciones/title /headbody

h+'itular de la página/h+ p#árrafo de introducci(n.../p h0)a primera sub&

secci(n/h0 p#árrafo de contenido.../p h0Atra subsecci(n/h0

p!ás párrafos de contenido.../p /body

/html

)os navegadores muestran el ejemplo anterior de la siguiente manera

)os navegadores asignan de forma automáticamente el tama>o del título de cada

secci(n en funci(n de su importancia. %sí, los títulos de secci(n h+ se muestran con el

tama>o de letra más grande, ya que son el nivel jerárquico superior, mientras que los

títulos de secci(n h* se visualizan con un tama>o de letra muy peque>o, adecuado para el

nivel jerárquico de menor importancia.



$videntemente, el aspecto que los navegadores aplican por defecto a los títulos de

secci(n se puede modificar utilizando las hojas de estilos de -99. )a siguiente imagen

muestra el tama>o por defecto con el que los navegadores muestran cada titular

3,4 E-)ruc)ura y d%-+o-%c%n

)a forma más sencilla de estructurar un texto consiste en separarlo por párrafos. %demás,

H'!) permite incluir títulos que delimitan cada una de las secciones.

#árrafos

=na de las etiquetas más utilizadas de H'!) es la etiqueta p, que permite

definir los párrafos que forman el texto de una página. #ara delimitar el texto de un párrafo, se

encierra ese texto con la etiqueta p, como muestra el siguiente ejemplo

html

head

title$jemplo de texto estructurado con párrafos/title



$tiqueta p

/head

body

p$ste es el texto que forma el primer párrafo de la página.

)os párrafos pueden ocupar varias líneas y el navegador se encarga

de ajustar su longitud al tama>o de la ventana./p

p$l segundo párrafo de la página también se define encerrando su texto con la etiqueta p. $l

navegador también se encarga de

se parar automáticamente cada párrafo./p

/body

/html

$l ejemplo anterior se visualiza de la siguiente manera en cualquier navegador

)a siguiente tabla recoge ladef inici(n formal de la etiqueta p



t tributos comunes básicos, i+?n y eventos

tri tributos propios &

T i pode elemento @loque

s descripción <elimita el contenido de un párrafo de texto)os párrafos creados con H'!) son elementos de bloque, por lo que siempre ocupan toda

la anchura de la ventana del navegador. %demás, no tienen atributos específicos, pero sí que se

les pueden asignar los atributos comunes de H'!) básicos, de internacionalizaci(n y de

eventos.

9ecciones

)as páginas H'!) habituales suelen tener una estructura más compleja que la que se puede

crear solamente mediante párrafos. <e hecho, es habitual que las páginas se dividan en

diferentes secciones jerárquicas.

)os títulos de secci(n se utilizan para delimitar el comienzo de cada secci(n de la

página. H'!) permite crear secciones de hasta seis niveles de importancia. <e esta forma,aunque una página puede definir cualquier n7mero de secciones, s(lo puede incluir seis niveles

jerárquicos.

)as etiquetas que definen los títulos de secci(n

son h+, h0, h1, h2, h3 y h*. )a etiqueta h+ es la de mayor importancia

y por tanto se utiliza para definir los titulares de la página. )a importancia del restode etiquetas es descendiente, de forma que la etiqueta h* es la que se utiliza para

delimitar las secciones menos importantes de la página.



% continuaci(n se muestra la definici(n formal de la etiqueta h+, siendo idéntica la

definici(n del resto de etiquetas referidas a los títulos de secci(n

E)%.u")a h+

A)r%bu)o- básicos, i+?n y eventos co!un"-

A)r%bu)o- +ro+%o- &

T%+o d" "'"!"n)o @loque

<efine los títulos de las secciones de mayor importancia de la página.

%l igual que la etiqueta p, las etiquetas de título de secci(n son elementos de bloque y no

tienen atributos específicos.

)as etiquetas h+, ..., h* definen títulos de secci(n, no secciones completas. #or este

motivo, no es necesario encerrar los contenidos de una secci(n con su etiqueta

correspondiente. 9olamente se debe encerrar con las etiquetas h+, ..., h* los títulos de

cada secci(n.

$l siguiente ejemplo muestra el uso de las etiquetas de título de secci(n

html head

title$jemplo de texto estructurado con secciones/title /headbodyh+'itular de la página/h+ p#árrafo de introducci(n.../p h0)a primera sub&secci(n/h0 p#árrafo de contenido.../p h0Atra subsecci(n/h0p!ás párrafos de contenido.../p /body/html



)os navegadores muestran el ejemplo anterior de la siguiente manera

)o s navegadores asignan de forma

aut omáticamente el tama>o del

título de cada secci(n en funci(n

de su importancia. %sí, los títulos de

sec ci(n h+ se muestran con el

tama>o de letra más grande,

ya que son el nivel jerárquico

sup erior, mientras que los títulos de

sec ci(n h* se visualizan con un

tama>o de letra muy peque>o,

ade cuado para el nivel jerárquico de

menor importancia.

$videntemente, el aspecto que los navegadores aplican por defecto a los títulos de secci(n se

puede modificar utilizando las hojas de estilos de -99. )a siguiente imagen muestra el

tama>o por defecto con el que los navegadores muestran cada titular



3,5 6or!u'ar%o-

)o s formularios más sencillosse pueden crear utilizandosol amente dos

etiquetas form y input. 9i

se considera el formulario quemu estra la siguiente imagen

6%gura 7,1 Bormulariosen cillo definido con las

etiquetas form e input



$l c(digo H'!) necesario para definir el formulario anterior se muestra a

continuaci(n



html

headtitle$jemplo de formulario sencillo/title/head

body

h1Bormulario muy sencillo/h1

form actionCDhttp//EEE.librosEeb.es/manejaFformulario.phpD methodCDpostD

$scribe tu nombre

input typeCDtextD nameCDnombreD valueCDD /

br/

input typeCDsubmitD valueCD$nviarD /

/form

/body

/html

)a etiqueta form encierra todos los contenidos del formulario 5botones, cuadros

de texto, listas desplegables6 y la etiqueta input permite definir varios tipos diferentes

de elementos 5botones y cuadros de texto6.

Trabajo Programacion Web Avanzada 2

Documents

Transcript of Trabajo Programacion Web Avanzada 2