Desarrollo en HTML5, CSS y Javascript de WebApps PDF

P1ML/CSS
Ml prlmera pglna
Cue es P1ML
Ls un |engua[e de marcas para formaLear y
esLrucLurar un documenLo, que puede leerse en
cualquler navegador.
<htm|> . . <]htm|>
LsLandarlzado en la norma lSC de SGML
(SLandard Cenerallzed Markup Lenguage).
Ll W3C desarrolla especlcaclones Lecnlcas y
dlrecLrlces, de forma que se pueda asegurar una
alLa calldad Lecnlca y edlLorlal.
LsLrucLura P1ML
un documenLo P1ML uene Lres euqueLas que descrlben la
esLrucLura general de un documenLo y dan una lnformacln sencllla
sobre el. <hLml>, <head> y <body>
Las euqueLas pueden escrlblrse LanLo en mayusculas como en
mlnusculas, pero se recomlenda el uso de mlnusculas: <hLml> o
<P1ML>, <body> o <8Cu?>

vlsuallzacln en el navegador LdlLor
<!doctype htm|> declara un documenLo P1ML3 para que se
vlsuallce correcLamenLe.
uocLype comlenza a uullzarse en P1ML4.01 y xP1ML
hup://valldaLor.w3.org/

LsLrucLura P1ML
<!docLype hLml>
LsLrucLura P1ML
<htm|> para ldenucar que esLa codlcado en esLe lengua[e y
LlmlLar, el prlnclplo y el n del documenLo.

<hLml> </hLml >

LsLrucLura P1ML
<nLAD> la cabecera, que conuene lnformacln y recursos sobre el
proplo documenLo y que no aparece en el documenLo, desLacando
el uLulo <1I1LL>. Ser el nombre que aparece en la cabecera del
vlsuallzador y en los buscadores de ahl la lmporLancla de que sea
slgnlcauvo.

<head> </head>
<uLle> </uLle>
LsLrucLura P1ML
La euqueLa !"#$ dene varlos upos de meLadaLos.
Ll aLrlbuLo %&$'("# especlca la codlcacln usada en nuesLra
pglna.
<meLa charseL="!"#$#!%&$'(&%">

<meLa charseL="uu-8">
LsLrucLura P1ML
Charset uu-8 es la Unlcode 1ransformauon IormaL 8-blL
represenLa el cdlgo de caracLeres unlCCuL. Ls compauble con
ASCll.
ermlLe vlsuallzar los caracLeres de Lodos los ldloma.

LsLrucLura P1ML
Caracteres espec|a|es: para lnclulr en el LexLo caracLeres que son proplas del
lengua[e P1ML es necesarlo usar su anoLacln codlcada:
hup://dev.w3.org/hLml3/hLml-auLhor/charref

Lspaclo en blanco (non-breaklng space) &nbsp,
< Menor que &lL,
> Mayor que &gL,
& Ampersand &amp,
Comlllas &quoL,
' apsLrofo &apos,
LsLrucLura P1ML
<body> Ll cuerpo conuene los elemenLos vlslbles en la pglna.
Las lmgenes, los encabezados, los prrafos de LexLo, las llsLas, las
Lablas, los hlpervlnculos.

<body> </body>
LdlLores P1ML
AnLes de comenzar a Lraba[ar con un edlLor especlco, es recomendable conocer
el cdlgo.

odemos usar programas que Lraba[en con texto p|ano, sln anadlr sus proplas
marcas de edlcln, en Wlndows el 8|oc de Notas y en MaclnLosh el 1extLd|t.
1exLLdlL esL por defecLo en 8lch 1exL es necesarlo congurarlo para que guarde
Lu Lraba[o como archlvos de LexLo plano.

Los documenLos P1ML deben Lener la extens|n hLml o hLm.

usar un edlLor wys|wyg como el Adobe )'"$!*"$+"' o el ,-."/'0123 (
hup://www.bluegrlon.org/) o un edlLor con ayudas vlsuales como el (.4-0!"
(hup://www.subllmeLexL.com/) nos faclllLar las cosas.

ver comparauva: hup://en.wlklpedla.org/wlkl/Comparlson_of_P1ML_edlLors

LsLrucLura P1ML

*+ ,$+-&$# ,./+0# vlsLa en el programa 8|oc de Notas

LsLrucLura P1ML

*+ ,$+-&$# ,./+0# vlsLa en el programa Sub||me.

LsLrucLura P1ML

*+ ,$+-&$# ,./+0# vlsLa en el programa Dreamweaver.

Lengua[e P1ML
un documenLo P1ML lnserLa en el LexLo enquetas que conLrolan
los dlferenLes aspecLos de la presenLacln y la semnuca del
conLenldo.
Los LexLos hablLuales esLn formados por encabezados <h1>,
prrafos <p>, LexLo lmporLanLe <sLrong> enfauzado <em> llsLas
<ul> <ll>...

SelecLores CSS
ara apllcar un esulo de presenLacln, el se|ector de elemenLo
puede ser una euqueLa P1ML:
p, h1, u|, ||
Ll esulo afecLa a Lodo el conLenldo lncluldo denLro de esa euqueLa
<p> </p>, <h1></h1>, <ul></ul>.

Ll se|ector puede apllcarse a ms de una euqueLa P1ML:
elemenLo, elemenLo
h1,h2, h3
AfecLa a los elemenLos <h1>, <h2> y <h3>.

CSS
Ll esulo puede esLar en |a cabecera de la pglna, debe expresarse
en un elemenLo <sty|e> denLro de la cabecera <head> del
documenLo.
SelecLor { y cada 1&!2#$#!+30: 5'250"6$6 : +$-2',}

8ecursos P1ML

MDN: LlsLa de LlemenLos P1ML3
hups://developer.mozllla.org/es/docs/P1ML/P1ML3/P1ML3_llsLa_elemenLos

W3C: P1ML3 elemenLs
hup://dev.w3.org/hLml3/markup/elemenLs.hLml

Woork Up: P1ML3 Lag reference
hup://woorkup.com/wp-conLenL/uploads/2009/12/P1ML3-vlsual-CheaL-
SheeL1.pdf

P1ML/CSS
Marcas bslcas
P1ML

Las marcas de LexLo en hLml, se emplean para el estructurado
semnnco de| conten|do.

Los LexLos hablLuales esLn formados por prrafos, palabras en
negrlLa o curslva, anoLaclones y correcclones, clLas a oLros
documenLos exLernos...

Marcado bs|co:
<p><]p> - prrafo
<em><]em> - da enfasls al %&4%5 que enclerra
<strong><]strong> - Mxlma lmporLancla al texto que enclerra
Las euqueLas <b> para la bold o negrlLa y la euqueLa <|> para la lLllca o curslva,
son slmllares vlsualmenLe, pero sln slgnlcado semnuco.
hup://www.w3.org/wlkl/P1ML/LlemenLs/b

CSS

Ll lengua[e de marcas n1ML, esL orlenLado a la denlcln de la
esLrucLura y la semnuca del documenLo y no a su represenLacln
grca.

CSS conLrola el aspecLo grco del documenLo medlanLe ho[as de
esulo 6(%72& ("&&%(89 lndlcando al navegador como se deben
vlsuallzar los elemenLos de un documenLo P1ML. Asl se conslgue
separar el aspecLo del conLenldo.

royecLo css 2en Garden:
hup://www.mezzoblue.com/zengarden/alldeslgns/

CSS

vlsuallzacln valores por
defecLo CSS en el navegador
Cada euqueLa P1ML uene unos valores de CSS por defecLo, que
pueden varlar segun el navegador, que Lendremos que modlcar
con nuesLros esulos personales.

P1ML

L[emplo valores CSS por defecLo del navegador, de: h1, p, strong,
em.

h1 [
dlsplay: block,
fonL-slze: 2em,
margln-before: 0.67em,
margln-aer: 0.67em,
margln-sLarL: 0,
margln-end: 0,
fonL-welghL: bold, }
strong [
fonL-welghL: bold, }
em [
fonL-sLyle: lLallc, }
p [
dlsplay: block,
margln-before: 1em,
margln-aer: 1em,
margln-sLarL: 0,
margln-end: 0, }
CSS

Ms lnformacln valores por defecLo:
W3C:
hup://dev.w3.org/hLml3/markup/elemenLs.hLml

Internet Lxp|orer:
hup://www.lecss.com/

I|refox:
hup://mxr.mozllla.org/mozllla-cenLral/source/layouL/sLyle/hLml.css

Chrome, Safar|:
hup://Lrac.webklL.org/browser/Lrunk/Source/WebCore/css/hLml.css

Cpera
hup://www.lecss.com/opera-10.31.css

CSS

La prlmera forma de anadlr el esulo CSS a un documenLo P1ML es
con elemenLos en ||nea, es el meLodo ms senclllo, anadlendo un
aLrlbuLo sty|e en el elemenLo concreLo denLro de la pglna. no se
pueden reuullzar para varlos elemenLos que comparLen las mlsmas
propledades.
Se escrlben las propledades del esulo en las marcas del P1ML como
"05-:$&: ;#25$" separadas por punLo y coma.

<body style="color: red; ">

<p style="font-size: 16px; color: blue; font-family: Arial,
Helvetica, sans-serif;">
Mi primera pgina</p>

CSS

La segunda forma anade el esulo CSS en un bloque <sty|e> en la
cabecera (<head>) y apllca el esulo a varlos elemenLos de la pg..
Cada elemenLo P1ML uene una ca[a asoc|ada, donde apllcan los
comandos de esulo CSS. Ll color de fondo apllcado a cada
elemenLo P1ML del e[emplo, muesLra la ca[a asoclada a cada uno.

CSS

Lo ms aconse[able para manLener la separacln enLre conLenldo y
presenLacln, en una ho[a de esulo CSS separada del P1ML, que se
lmporLa con un elemenLo <||nk> en la cabecera.

CSS

La prlnclpal venLa[a es que las ho[as
de esulo son apllcables a una o a
muchas pglnas. ermlLe adems
adapLar la presenLacln a Cs,
mvlles, LableLas o lmpresoras con
el aLrlbuLo med|a que acuvar el
esulo especlco de cada dlsposluvo.

<link rel="stylesheet"
type="text/css" media="screen"
href="sans-serif.css">

<link href=estilo.css"
rel="stylesheet" type="text/css"
media="(min-width:380px)">

hup://www.w3.org/18/css3-medlaquerles/

CSS

Iormato de |as normas y comandos de esn|o

Ll esulo se dene enLre llaves "{" y "}", el se|ector deLermlna sobre
que elemenLos P1ML apllca el esulo, cada :25<=& 1& 1&!2#$#!+30:
{6"%-$'$%073, 6"%-$'$%073} separadas por punLo y coma ",".
Cada 1&!2#$#!+30: 5'250"6$6 : +$-2', ([a un ;#25$ para una
,$5,+&1#1 1&2 &(>25).

H1 {color : green; text-align : center}

P1ML

L|stas:
<u|><] u| > - dene llsLas, no ordenadas.
<o|><] o| > - dene llsLas, ordenadas.
<||><]||> - dene los elemenLos de las llsLas

o| [
dlsplay: block,
llsL-sLyle-Lype: declmal,
margln-before: 1em,
margln-aer: 1em,
margln-sLarL: 0,
margln-end: 0,
paddlng-sLarL: 40px, }
u| [
dlsplay: block,
llsL-sLyle-Lype: dlsc,
margln-before: 1em,
margln-aer: 1em,
margln-sLarL: 0,
margln-end: 0,
paddlng-sLarL: 40px, }
1exLo P1ML

C|tas: <b|ockquote><] b|ockquote > - clLas LexLuales de un LexLo
exLerno.
Ll aLrlbuLo clLe = "url" - lndlca la dlreccln de la pglna web orlglnal
de la que se exLrae la clLa.

b|ockquote [
dlsplay: block,
margln-before: 1em,
margln-aer: 1em,
margln-sLarL: 40px,
margln-end: 40px, }
1exLo P1ML

1exto preformateado:
<pre><] pre > - manuene el aspecLo vlsual, los elemenLo en blanco
se manuenen lgual que en el LexLo orlglnal.

pre [
dlsplay: block,
fonL-famlly: monospace,
whlLe-space: pre,
margln: 1em 0, }
1exLo P1ML

Abrev|atura y acrn|mo:
<abbr><]abbr> - para lndlcar el slgnlcado de una abrevlaLura o un
acrnlmo.

1exLo P1ML

Sa|to de ||nea:
<br> - SalLo de llnea en el LexLo, sln los mrgenes denldos para el
prrafo.
ocas veces hay que usar un salLo de llnea: una poesla, un llsLado
del cdlgo, cuando cada llnea no es un prrafo por sl sola.

1exLo P1ML

Super|nd|ces y sub|nd|ces:
<sup><]sup>
<sub><]sub> - para euqueLar el LexLo como super o sublndlces.
sub [
verucal-allgn: sub,
fonL-slze: smaller, }
sup [
verucal-allgn: super,
fonL-slze: smaller, }
1exLo P1ML

code:
<code><]code> - para represenLar fragmenLos de cdlgo
lnformuco.
valores por defecLo:
code [
fonL-famlly: monospace,}

Ctras marcas de texto:
1exLo borrado <de|> e lnserLado <|ns> en un documenLo.
LlsLas de denlclones <d|>, <dt> y <dd>

1abla

Las Lablas se denen con las euqueLas <tab|e>, <tr> para cada la y
<td> para cada columna <Lh> lndlca que una celda es la cabecera.

1abla CSS

1exLo P1ML

LI8kCS WL8: Marcado bslco de LexLo
hup://llbrosweb.es/xhLml/caplLulo_3/
marcado_baslco_de_LexLo.hLml

Con C|ase: 1exLo
hup://hLml.conclase.neL/w3c/hLml401-es/sLrucL/LexL.hLml

MDN: CSS
hups://developer.mozllla.org/en-uS/docs/Web/CSS

Codificacin de caracteres,
UNICODE y character entity
1
Alfabeto, cdigo y codificacin
Juego de caracteres o alfabeto
!
Conjunto de caracteres normalizados para representar una lengua

Cdigo de caracteres (ver http://www.w3schools.com/tags/ref_charactersets.asp)
!
Cdigo numrico asignado a cada carcter de un alfabeto, p.e.
" ASCII: Alfabeto ingls (EEUU) codificado en 7 bits por carcter
" ISO Latin-1 (ISO 8859, ISO Latin-15): Alfabetos de Europa occidental, 8 bits
" UNICODE: cdigo internacionalizado que soporta muchas lenguas

Codificacin
!
representacin binaria de un cdigo de caracteres, p.e. UNICODE tiene
" UTF-8: Cdigo de longitud variable de 1, 2, 3 o 4 bytes, eficiente para lenguas latinas
" UTF-16: Codifica plano BMP en 2 bytes, otros planos en 4 bytes
" UTF-32: Cdigo de longitud fija: 4 bytes eficiente con planos que no son BMP
2
Juan Quemada, DIT, UPM
UNICODE es un consorcio internacional
!
Define normas de internacionalizacin (I18N)
" cdigos de caracteres (UNICODE), smbolos, libreras software, formatos, !.
!
http://www.unicode.org/

Cdigo UNICODE
!
Cdigo de caracteres internacionalizado,
" es el resultado mas conocido del consorcio
!
puede representar muchas lenguas
" ver: http://www.unicode.org/charts/
3
Unicode Consortium

Cdigo Unicode
!
Unicode asigna un cdigo numrico a cada carcter
!
Los caracteres se agrupan en planos
4
Cada plano se codifica en 2 bytes
2 bytes (octetos): 65,536 caracteres

!
Planos ms importantes
4
BMP (Basic Multilingual Plane)
Agrupa los smbolos ms habituales de la mayora de lenguas actuales
4
SMP (Suplementary Multilingual Plane): Lenguas antiguas y mas
4
SIP (Supl. Ideographic Plane): Ext. CJK (China, Japan, Korea)
4
TIP (Tiertary Ideographic Plane): Lenguas antiguas asiticas
4
SSP (Suplementary Special-purpose Plane): usos especiales
4

UNICODE BMP: subconjunto ASCII (Basic Latin)
http://www.unicode.org/charts/PDF/U0000.pdf
5

UNICODE BMP: extensin ISO Latin1
http://www.unicode.org/charts/PDF/U0080.pdf
6

Ejemplo Unicode
!
Cdigos Unicode BMP: algunos ideogramas chinos Kangxi
7
Cuantos cdigos de
caracteres manejamos?
El diseo de una pgina Web
!
Se pueden utilizar cdigos diferentes
" El editor utilizar el cdigo seleccionado
" El fichero se podr guardar con otro cdigo
" El SO (Windows, Linux, ..) utiliza otro cdigo

La navegacin por Internet
!
puede utilizar cdigos diferentes
" El navegador tiene un cdigo configurado
" por el usuario que lo utiliza
" El servidor suele estar internacionalizado
" HTML indica el cdigo de la pgina
" OJO: debe coincidir con el del fichero
en disco
8
La informacin textual se introduce a travs de un teclado
!
Cada tecla enva un carcter
" Los teclados solo solo suelen letras de un rea geogrfica determinada

El teclado incluye un conjunto limitado de teclas
!
Los caracteres no incluidos necesitan un cdigo especial
" HTML utiliza caracteres escapados lo caracteres no incluidos
" por ejemplo © se utiliza para el smbolo de copyright

La pantalla es grfica
!
puede representar cualquier carcter
9
Introduccin de textos
Teclado arabe
Teclado chino
Entidad de carcter
HTML
La sintxis de HTML obliga a no utilizar algunos caracteres
!
< es comienzo de marca y no se puede incluir dentro de un texto
" Dentro de un texto < debe representarse con character entities
!
Problemas similares ocurren con otros caracteres: >, &, !..

Caracteres especiales HTML o sin tecla sern character entities
!
Por ejemplo, un bloque <div> con: Si x < y, e y < z, entonces x < z,
" Ser en HTML: <div> Si x > y, e y > z, entonces x > z, © </div>
!
La tabla superior incluye algunos entidades, tablas completas estn en
" http://brajeshwar.github.io/entities/
" http://www.w3schools.com/html/html_entities.asp
" http://www.w3.org/TR/html4/sgml/entities.html
10
ENTIDADES DE CARCTER

> < < => significa menor que
< > > => significa mayor que
" =>ampersand o smbolo &
& & & =>ampersand o smbolo &
!!..

URLs, recursos y enlaces
11
Recurso Web, URL y HTTP
Recurso Web
!
Contenido digital procesable con HTTP
" Normalmente se almacena en un fichero en un servidor
!
p.e., pgina Web, foto, pelicula, fichero o parte de el, registro de una BD, .....

URL Web
!
Direccin unvoca de un recurso Web en Internet
" HTTP permite procesar el recurso Web identificados por el URL Web

Un URL Web tiene 3 componentes bsicos
!
Por ejemplo, en http://google.com/picture.png
" http es el protocolo o mtodo de acceso al recurso
" google.com es la direccin del servidor en Internet donde reside el recurso
" /picture.com es el camino (path) dentro del servidor que identifica el fichero
12
http://google.com/picture.png
google.com
URLs en HTML
URL (Uniform Resource Locator)
!
Direccin de recursos en Internet, definidos en normas de IETF
" RFC 2396 (98), RFC 2732 (99), RFC 3986 (05), ... (http://tools.ietf.org/html/)
!
Caso particular de URI (Uniform Resource Identifier)

Los URLs asociados a marcas HTML identifican
!
Recursos externos asociados al elemento definido por la marca

Por ejemplo:
!
<a href=http://www.upm.es>
" identifica la pgina Web a la que se navegar al hacer click en el hiperenlace
!
<img src= http://google.com/picture.png>
" Identifica el recurso con la imagen asociada a la marca <img ....>
13
http://google.com/picture.png
google.com
Path o camino de un URL
El path es la ruta desde el directorio raz
!
a travs de los directorios del servidor
" que lleva al recurso

Los servidores Web suelen estar configurados
!
para que el fichero index.html o index.htm se pueda omitir
" /lib/coches/index.htm ser equivalente a /lib/coches/

El camino (path) es el camino de directorio UNIX (path)
!
.. se refiere al directorio anterior
" /lib/casas/../coches/vw.htm es equivalente a /lib/coches/vw.htm
14
El hiperenlace permite navegar por Internet
!
Define una relacin entre documentos
" <a href="http://upm.es">UPM</a>

Atributos de <a ....>
!
href: hiperenlace asociado
!
alternate: pgina alternativa
!
rel: relacin con la pgina enlazada
" alternate, author, license, tag, ...
!
type: mime-type de pgina enlazada
!
....

Ejemplos
!
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">license</a>

Hiperenlace
15
Ancla
(Anchor o
Fragment)
El ancla (anchor) se aade al final del URL
!
identifica un elemento dentro una pgina Web
" El identificador debe ser nico en la pgina Web
Formato: <protocol://><host><path><anchor>
!
Por ejemplo: http://dit.upm.es/ej_id.html#seccion2
" #seccion2: identifica la seccion 3 de la pgina HTML
16
relativos al recurso anterior
!
Solo llevan path, el navegador aade
" host, protocol y port del acceso anterior

Ejemplos
!
Path absoluto: /lib/coches/vw.html
" camino absoluto desde el directorio raz del servidor
!
Path relativo: coches/vw.html, vw.html
" Camino relativo desde el directorio del recurso actual
!
Path relativo con ..: ../casas/chalet.html
" Camino relativo con vuelta a directorio padre
!
Anchor solo: #seccion3
" Elemento con id=seccion3 en el mismo recurso
!
Ojo! El navegador no accede al servidor, el recurso ya esta cargado

URLs relativos
17
URL con pregunta o query
Se puede aadir una pregunta o query con parmetros
!
<protocol://><host><path><query>
" pregunta o query: parmetros con la siguiente sintxis
!
?param1=valor1&param2=valor2&.........
!
Se utilizan en interfaces REST de acceso a servicios
" Identifican informacin en una base de datos

Ejemplo
!
http://upm.es/lib/rec1.html?usuario=1527
" ?usuario=1527: enva el parmetro usuario=1527
18

El URL soporta otros servicios accesibles con otros protocolos, tales
como telnet, mailto, file, ftp, ......

URL de identificacin de ficheros locales (con un path):

file:///dir1/dir2/fichero.html

Solo tiene protocolo y path absoluto.
Otros URLs
19

Permite crear correos electrnicos en documentos Web. Al hacer
clic en ellos se despliega el correo especificado.

Mas informacin en:
http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm
URL de email
20

21
http://vishub.org/categories/43
Hacer clic
en el
Modulo 1
Hacer clic para
actualizar pag.
Editor
Interactivo
Seleccionar
ejemplo

Desarrollo en HTML5, CSS y Javascript de WebApps PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Desarrollo en HTML5, CSS y Javascript de WebApps PDF

Hochgeladen von

Copyright:

Verfügbare Formate

P1ML/CSS

Das könnte Ihnen auch gefallen