Modulo 1 HTML5 y CCS3

HTML/CSS(
Mi(primera(pgina(
Qu(es(HTML(
(Es(un(lenguaje(de(marcas(para(formatear(y(
estructurar(un(documento,(que(puede(leerse(en(
cualquier(navegador.(
<html>(((</html>(
(Estandarizado(en(la(norma(ISO(de(SGML(
(Standard(Generalized(Markup(Lenguage).(
(El(W3C(desarrolla(especicaciones(tcnicas(y(
directrices,(de(forma(que(se(pueda(asegurar(una(
alta(calidad(tcnica(y(editorial.(
Estructura(HTML(
Un(documento(HTML(Kene(tres(eKquetas(que(describen(la(
estructura(general(de(un(documento(y(dan(una(informacin(sencilla(
sobre(l.((<html>,(<head>(y(<body>(
Las(eKquetas(pueden(escribirse(tanto(en(maysculas(como(en(
minsculas,(pero(se(recomienda(el(uso(de(minsculas:(<html>(o(
<HTML>,(<body>(o(<BODY>((
(
Visualizacin(en(el(navegador(
(( Editor(
((
((
(
Estructura(HTML(
<!doctype(html>(declara(un(documento(HTML5(para(que(se(
visualice(correctamente.((
Doctype(comienza(a(uKlizarse(en(HTML4.01(y(XHTML(
h\p://validator.w3.org/(
(
((
((
<!doctype(html>(
((
((
(
Estructura(HTML(
<html>(para(idenKcar(que(esta(codicado(en(este(lenguaje(y(
Limitar,(el(principio(y(el(n(del(documento.(
((
(
(
(<html>(((</html(>((
((
((
(
Estructura(HTML(
<HEAD>(la(cabecera,(que(conKene(informacin(y(recursos(sobre(el(
propio(documento(y(que(no(aparece(en(el(documento,(destacando(
el(Ktulo(<TITLE>.(Ser(el(nombre(que(aparece(en(la(cabecera(del(
visualizador(y(en(los(buscadores(de(ah(la(importancia(de(que(sea((
signicaKvo.(
<head>(((</head>((
(((
((
(
((<Ktle>(((</Ktle>((
Estructura(HTML(
La(eKqueta(meta(dene(varios(Kpos(de(metadatos.(
El(atributo(charset(especica(la(codicacin(usada(en(nuestra(
pgina.((
<meta(charset="character_set">(
(((
<meta(charset="ude8">(
((
(
Estructura(HTML(
Charset(uFG8(es(la(Unicode(TransformaKon(Format(8ebit(
representa(el(cdigo(de(caracteres(UNICODE.(Es(compaKble(con(
ASCII.(
Permite(visualizar(los(caracteres(de(todos(los(idioma.(
(((
((
(
Estructura(HTML(
Caracteres(especiales:(para(incluir(en(el(texto(caracteres(que(son(propias(del(
lenguaje(HTML(es(necesario(usar(su(anotacin(codicada:(
h\p://dev.w3.org/html5/htmleauthor/charref(
(
Espacio(en(blanco((nonebreaking(space)( (
( <(
Menor(que(
<(
( >(
Mayor(que(
>(
( &(
Ampersand(
&(
( (
Comillas ((
"(
( (
apstrofo(
'(
(
(
(((
((
(
Estructura(HTML(
<body>(El(cuerpo(conKene(los(elementos(visibles(en(la(pgina.(
Las(imgenes,(los(encabezados,(los(prrafos(de(texto,(las(listas,(las(
tablas,(los(hipervnculos(((
((
<body>(</body>(
(
Editores(HTML(
Antes(de(comenzar(a(trabajar(con(un(editor(especco,(es(recomendable(conocer(
el(cdigo.((
(
Podemos(usar(programas(que(trabajen(con(texto(plano,(sin(aadir(sus(propias(
marcas(de(edicin,(en(Windows(el(Bloc(de(Notas(y(en(Macintosh(el(TextEdit.((
TextEdit(est(por(defecto(en(Rich(Text(es(necesario(congurarlo(para(que(guarde(
tu(trabajo(como(archivos(de(texto(plano.((
(
Los(documentos(HTML(deben(tener(la(extensin(html(o(htm.(
((
Usar(un(editor(wysiwyg(como(el(Adobe(Dreamweaver)o(el(BlueGrifon((
h\p://www.bluegrion.org/)(o(un(editor(con(ayudas(visuales(como(el(sublime(
(h\p://www.sublimetext.com/)(nos(facilitar(las(cosas.(
(
Ver(comparaKva:(h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors(
(
(
(
Estructura(HTML(
Mi)primera)pgina)vista(en(el(programa(Bloc(de(Notas(
((((((
((
((
(
Estructura(HTML(
Mi)primera)pgina)vista(en(el(programa(Sublime.(
((((((
((
((
(
Estructura(HTML(
Mi)primera)pgina)vista(en(el(programa(Dreamweaver.(
((((((
((
((
(
Lenguaje(HTML(
Un(documento(HTML(inserta(en(el(texto((eTquetas(que(controlan(
los(diferentes(aspectos(de(la(presentacin(y(la(semnKca(del(
contenido.(
Los(textos(habituales(estn(formados(por(encabezados(<h1>,(
prrafos(<p>,(texto(importante(<strong>(enfaKzado(<em>(listas(
<ul>(<li>...(
(
Selectores(CSS(
Para(aplicar(un(esKlo(de(presentacin,(el(selector(de(elemento(
puede(ser(una(eKqueta(HTML:(
p,(h1,(ul,(li(
El(esKlo(afecta(a(todo(el(contenido(incluido(dentro(de(esa(eKqueta(
<p>(</p>,(<h1></h1>,(<ul></ul>.(
(
El(selector(puede(aplicarse(a(ms(de(una(eKqueta(HTML:(
elemento,(elemento(
h1,h2,(h3(
Afecta(a(los(elementos(<h1>,(<h2>(y(<h3>.(
(
(
(
(
CSS(
El(esKlo(puede(estar(en(la(cabecera(de(la(pgina,(debe(expresarse(
en(un(elemento(<style>(dentro(de(la(cabecera(<head>(del(
documento.(
Selector({(y(cada(declaracin:(propiedad(:(valor;}(
(
(
(
(
Recursos(HTML(
MDN:(Lista(de(Elementos(HTML5(
(((
h\ps://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos(
( ((
(
W3C:(HTML5(elements(
h\p://dev.w3.org/html5/markup/elements.html(
(
Woork(Up:(HTML5(tag(reference(
h\p://woorkup.com/wpecontent/uploads/2009/12/HTML5eVisualeCheate
Sheet1.pdf(
(
(
(
((
((
(
HTML/CSS(
Marcas(bsicas(
HTML(
Las(marcas(de(texto(en(html,(se(emplean(para(el(estructurado(
(((
semnTco(del(contenido.(
((
((
Los(textos(habituales(estn(formados(por(prrafos,(palabras(en(
negrita(o(cursiva,(anotaciones(y(correcciones,(citas(a(otros(
documentos(externos...(
(
Marcado(bsico:(
<p></p>(e(prrafo(
<em></em>(e(da(nfasis(al(texto(que(encierra(
<strong></strong>(e(Mxima(importancia(al(texto(que(encierra(
Las(eKquetas(<b>(para(la(bold(o(negrita((y(la(eKqueta(<i>(para(la(itlica(o(cursiva,(
son(similares(visualmente,(pero(sin(signicado(semnKco.((
h\p://www.w3.org/wiki/HTML/Elements/b(
(
(
CSS(
El(lenguaje(de(marcas(HTML,(est(orientado(a(la(denicin(de(la(
(((
estructura(y(la(semnKca(del(documento(y(no(a(su(representacin(
((
(
grca.((
(
CSS(controla(el(aspecto(grco(del(documento(mediante(hojas(de(
esKlo)(style)sheets),(indicando(al(navegador(como(se(deben(
visualizar(los(elementos(de(un(documento(HTML.(As(se(consigue(
separar(el(aspecto(del((contenido.(
(
(
(
Proyecto(css(Zen(Garden:(
h\p://www.mezzoblue.com/zengarden/alldesigns/(
(
(
(
CSS(
Cada(eKqueta(HTML(Kene(unos(valores(de(CSS(por(defecto,(que(
(((
pueden(variar(segn(el(navegador,(que(tendremos(que(modicar(
((
(
con(nuestros(esKlos(personales.((
(
( Visualizacin(valores(por(
(
defecto(CSS(en(el(navegador(
HTML(
Ejemplo(valores(CSS(por(defecto(del(navegador,(de:(h1,(p,(strong,(
(((
em.(
((
h1({(
display:(block;(
((
p({(
fontesize:(2em;(
display:(block;(
(
marginebefore:(0.67em;(
(
marginea{er:(0.67em;(
marginestart:(0;(
margineend:(0;(
fonteweight:(bold;(}(
strong({(
fonteweight:(bold;(}(
marginebefore:(1em;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(}(
em({(
fontestyle:(italic;(}(
CSS(
Ms(informacin(valores(por(defecto:(
(((
W3C:(
((
h\p://dev.w3.org/html5/markup/elements.html(
(
(
Internet(Explorer:((
h\p://www.iecss.com/((
(
Firefox:(
h\p://mxr.mozilla.org/mozillaecentral/source/layout/style/html.css(
(
Chrome,(Safari:(
h\p://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css(
(
Opera(
h\p://www.iecss.com/operae10.51.css(
(
(
CSS(
La(primera(forma(de(aadir(el(esKlo(CSS(a(un(documento(HTML(es(
(((
con(elementos(en(lnea,(es(el(mtodo(ms(sencillo,(aadiendo(un(
((
(
atributo(style(en(el(elemento(concreto(dentro(de(la(pgina.(No(se(
pueden(reuKlizar(para(varios(elementos(que(comparten(las(mismas(
propiedades.(
Se(escriben(las(propiedades(del(esKlo(en(las(marcas(del(HTML(como(
"nombre:(valor"(separadas(por(punto(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(aade(el(esKlo(CSS(en(un(bloque(<style>(en(la(
(((
cabecera((<head>)(y(aplica(el(esKlo(a(varios(elementos(de(la(pg..(
((
Cada(elemento(HTML(Kene(una(caja(asociada,(donde(aplican(los(
(
comandos(de(esKlo(CSS.(El(color(de(fondo(aplicado(a(cada(
elemento(HTML(del(ejemplo,(muestra(la(caja(asociada(a(cada(uno.(
(
(
(
(
CSS(
Lo(ms(aconsejable(para(mantener(la(separacin(entre(contenido(y(
(((
presentacin,(en(una(hoja(de(esKlo(CSS(separada(del(HTML,(que(se(
((
importa(con(un(elemento(<link>(en(la(cabecera.(
(
((
(
(
(
(
CSS(
La(principal(ventaja(es(que(las(hojas(
(((
de(esKlo(son(aplicables(a(una(o(a(
((
muchas(pginas.(Permite(adems((
(
adaptar(la(presentacin(a(PCs,(
mviles,(tabletas(o(impresoras((con(
el(atributo(media(que(acKvar(el(
esKlo(especco(de(cada(disposiKvo.(
(
<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)">
h\p://www.w3.org/TR/css3emediaqueries/(((
CSS(
Formato(de(las(normas(y(comandos(de(esTlo(
(((
(((
((
(
((
El(esKlo(se(dene(entre(llaves("{"(y("}";(el(selector(determina(sobre(
que(elementos(HTML(aplica(el(esKlo,(cada(bloque)de)declaracin:(
{declaracin;(declaracin}(separadas(por(punto(y(coma(";".((
Cada(declaracin:(propiedad(:(valor,((ja(un(valor(para(una(
propiedad)del)es>lo).(((
(
H1 {color : green; text-align : center}
(
(
(
(
HTML(
Listas:(
(((
<ul></(ul(>(e(dene(listas,(no(ordenadas.(
((
<ol></(ol(>(e(dene(listas,(ordenadas.(
(
<li></li>(e(dene(los(elementos(de(las(listas(
(
(
(
ul({(
display:(block;(
listestyleetype:(disc;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(
paddingestart:(40px;(}(
ol({(
display:(block;(
listestyleetype:(decimal;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(
paddingestart:(40px;(}(
Texto(HTML(
Citas:(<blockquote></(blockquote(>(e(citas(textuales(de(un(texto(
(((
externo.((
((
(
El(atributo(cite(=("url"(e(Indica(la(direccin(de(la(pgina(web(original(
de(la(que(se(extrae(la(cita.(
(
(
blockquote({(
display:(block;(
marginea{er:(1em;(
marginestart:(40px;(
margineend:(40px;(}(
Texto(HTML(
Texto(preformateado:(
(((
<pre></(pre(>(e(manKene(el(aspecto(visual,(los(elemento(en(blanco(
((
(
se(manKenen(igual(que(en(el(texto(original.(
(
pre({(
display:(block;(
fontefamily:(monospace;(
whiteespace:(pre;(
margin:(1em(0;(}(
Texto(HTML(
Abreviatura(y(acrnimo:(
(((
<abbr></abbr>(e(para(indicar(el(signicado(de(una(abreviatura(o(un(
((
(
acrnimo.(
(
(
(
(
(
Texto(HTML(
Salto(de(lnea:(
(((
<br>(e(Salto(de(lnea(en(el(texto,(sin(los(mrgenes(denidos(para(el(
((
prrafo.((
(
Pocas(veces(hay(que(usar(un(salto(de(lnea:(Una(poesa,(un(listado(
del(cdigo,(cuando(cada(lnea(no(es(un(prrafo(por(s(sola.((
(
(
(
(
(
(
Texto(HTML(
Superndices(y(subndices:(
(((
<sup></sup>((
((
(
<sub></sub>(e(para(eKquetar(el(texto(como(super(o(subndices.(
sub({(
verKcalealign:(sub;(
fontesize:(smaller;(}(
sup({(
verKcalealign:(super;(
fontesize:(smaller;(}(
Texto(HTML(
code:(
(((
<code></code>(e(para(representar(fragmentos(de(cdigo(
((
(
informKco.(
Valores(por(defecto:(
code({(
fontefamily:(monospace;}(
(
Otras(marcas(de(texto:(
Texto(borrado(<del>(e(insertado(<ins>(en(un(documento.(
Listas(de(deniciones(<dl>,(<dt>(y(<dd>(
(
(
(
(
(
(
Tabla(
Las(tablas(se(denen(con(las(eKquetas(<table>,(<tr>(para(cada(la(y(
(((
<td>(para(cada(columna(<th>(indica(que(una(celda(es(la(cabecera.(
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Tabla(CSS(
(
((((
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(
Texto(HTML(
LIBROS(WEB:(Marcado(bsico(de(texto(
(((
h\p://librosweb.es/xhtml/capitulo_3/
((
(
marcado_basico_de_texto.html(
(
Con(Clase:((Texto(
h\p://html.conclase.net/w3c/html401ees/struct/text.html(
(
MDN:(CSS(
h\ps://developer.mozilla.org/eneUS/docs/Web/CSS(
(
(
(
(
(
(
(
Codificacin de caracteres,
UNICODE y character entity
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
Juan Quemada, DIT, UPM
Unicode Consortium
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/
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
UNICODE BMP: extensin ISO Latin1

http://www.unicode.org/charts/PDF/U0080.pdf
Ejemplo Unicode
Cdigos Unicode BMP: algunos ideogramas chinos Kangxi
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
Teclado chino
Introduccin de textos
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
!
Teclado arabe
puede representar cualquier carcter

ENTIDADES DE CARCTER
Entidad de carcter
HTML
> <
< => significa menor que
< > > => significa mayor que
" =>ampersand o smbolo &
& & & =>ampersand o smbolo &
..
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
URLs, recursos y enlaces
11
google.com
Recurso Web, URL y HTTP

http://google.com/picture.png
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
google.com
URLs en HTML
http://google.com/picture.png
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
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
Hiperenlace
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>
15
El ancla (anchor) se aade al final del URL
Ancla
(Anchor o
Fragment)
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
URLs relativos
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
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
Otros URLs
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.
19
URL de email
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
20
http://vishub.org/categories/43
Seleccionar
ejemplo
Hacer clic para

actualizar pag.
Hacer clic
en el
Modulo 1
Editor
Interactivo
21

Modulo 1 HTML5 y CCS3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Modulo 1 HTML5 y CCS3

Cargado por

Copyright:

Formatos disponibles

HTML/CSS(

Alfabeto, cdigo y codificacin

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.

representacin binaria de un cdigo de caracteres, p.e. UNICODE tiene

Define normas de internacionalizacin (I18N)

Cdigo de caracteres internacionalizado,

puede representar muchas lenguas

Juan Quemada, DIT, UPM

4 BMP (Basic Multilingual Plane)

4 SMP (Suplementary Multilingual Plane): Lenguas antiguas y mas

UNICODE BMP: subconjunto ASCII (Basic Latin)

UNICODE BMP: extensin ISO Latin1

Se pueden utilizar cdigos diferentes

La navegacin por Internet

puede utilizar cdigos diferentes

Cada tecla enva un carcter

Los caracteres no incluidos necesitan un cdigo especial

puede representar cualquier carcter

La sintxis de HTML obliga a no utilizar algunos caracteres

< es comienzo de marca y no se puede incluir dentro de un texto

Problemas similares ocurren con otros caracteres: >, &, ..

Por ejemplo, un bloque <div> con: Si x < y, e y < z, entonces x < z,

<div> Si x &gt; y, e y &gt; z, entonces x &gt; z, &copy; </div>

La tabla superior incluye algunos entidades, tablas completas estn en

URLs, recursos y enlaces

Juan Quemada, DIT, UPM

Recurso Web, URL y HTTP

Contenido digital procesable con HTTP

Direccin unvoca de un recurso Web en Internet

Por ejemplo, en http://google.com/picture.png

Juan Quemada, DIT, UPM

URL (Uniform Resource Locator)

Direccin de recursos en Internet, definidos en normas de IETF

Caso particular de URI (Uniform Resource Identifier)

Recursos externos asociados al elemento definido por la marca

<img src= http://google.com/picture.png>

Juan Quemada, DIT, UPM

Path o camino de un URL

a travs de los directorios del servidor

para que el fichero index.html o index.htm se pueda omitir

.. se refiere al directorio anterior

Juan Quemada, DIT, UPM

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

Juan Quemada, DIT, UPM

El ancla (anchor) se aade al final del URL

identifica un elemento dentro una pgina Web

Juan Quemada, DIT, UPM

Solo llevan path, el navegador aade

Path relativo con ..: ../casas/chalet.html

" Elemento con id=seccion3 en el mismo recurso

Ojo! El navegador no accede al servidor, el recurso ya esta cargado

Juan Quemada, DIT, UPM

URL con pregunta o query

Se utilizan en interfaces REST de acceso a servicios

Juan Quemada, DIT, UPM

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

Solo tiene protocolo y path absoluto.

Juan Quemada, DIT, UPM

Permite crear correos electrnicos en documentos Web. Al hacer

Mas informacin en:

Juan Quemada, DIT, UPM

<div> Si x > y, e y > z, entonces x > z, © </div>