Mod01 Transparencias HTML

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 especificaciones tcnicas y
directrices, de forma que se pueda asegurar una
alta calidad tcnica y editorial.
Estructura HTML
Un documento HTML tiene tres etiquetas que describen la
estructura general de un documento y dan una informacin sencilla
sobre l. <html>, <head> y <body>
Las etiquetas pueden escribirse tanto en maysculas como en
minsculas, pero se recomienda el uso de minsculas: <html> o
<HTML>, <body> o <BODY>
Editor
Visualizacin en el navegador
Estructura HTML
<!doctype html> declara un documento HTML5 para que se
visualice correctamente.
Doctype comienza a utilizarse en HTML4.01 y XHTML
http://validator.w3.org/
<!doctype html>
Estructura HTML
<html> para identificar que esta codificado en este lenguaje y
Limitar, el principio y el fin del documento.
<html> </html >
Estructura HTML
<HEAD> la cabecera, que contiene informacin y recursos sobre el
propio documento y que no aparece en el documento, destacando
el titulo <TITLE>. Ser el nombre que aparece en la cabecera del
visualizador y en los buscadores de ah la importancia de que sea
significativo.
<head> </head>
<title> </title>
Estructura HTML
La etiqueta meta define varios tipos de metadatos.
El atributo charset especifica la codificacin usada en nuestra
pgina.
<meta charset="character_set">
<meta charset="utf-8">
Estructura HTML
Charset utf-8 es la Unicode Transformation Format 8-bit representa
el cdigo de caracteres UNICODE. Es compatible 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 codificada:
http://dev.w3.org/html5/html-author/charref
Espacio en blanco (non-breaking space)

<
Menor que
<
>
Mayor que
>
&
Ampersand
&
Comillas
"
apstrofo
'
Estructura HTML
<body> El cuerpo contiene 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 especfico, 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 configurarlo 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 BlueGriffon
(http://www.bluegriffon.org/) o un editor con ayudas visuales como el sublime
(http://www.sublimetext.com/) nos facilitar las cosas.
Ver comparativa: http://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 etiquetas que controlan
los diferentes aspectos de la presentacin y la semntica del
contenido.
Los textos habituales estn formados por encabezados <h1>,
prrafos <p>, texto importante <strong>, enfatizado <em>, listas
<ul> <li>...
Selectores CSS
Para aplicar un estilo de presentacin, el selector de elemento
puede ser una etiqueta HTML:
p, h1, ul, li
El estilo afecta a todo el contenido incluido dentro de esa etiqueta
<p> </p>, <h1></h1>, <ul></ul>.
El selector puede aplicarse a ms de una etiqueta HTML:
elemento, elemento
h1,h2, h3
Afecta a los elementos <h1>, <h2> y <h3>.
CSS
El estilo 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
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
W3C: HTML5 elements
http://dev.w3.org/html5/markup/elements.html
Woork Up: HTML5 tag reference

http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-CheatSheet1.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

Mod01 Transparencias HTML

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

Mod01 Transparencias HTML

Cargado por

Copyright:

Formatos disponibles

HTML/CSS

Estandarizado en la norma ISO de SGML

Woork Up: HTML5 tag reference

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

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