Mod1 Intro HTML Css Url

Juan Quemada, DIT, UPM
Introduccin a Internet y a la Web

1
Sunday, February 23, 14
Clientes:
!
Dan acceso a informacin y servicios en Internet
Servidores:
!
Alojan la informacin y los servicios
La nube: conjunto de terminales y servidores
!
interconectados con aplicaciones y protocolos de Internet
TCP/IP: protocolos de interconexin de redes de fibra, cable, WIFI, ...
!
sobre los que se implementan las aplicaciones de Internet y sus protocolos
" Tales como el Web (HTTP), email (SMTP, POP3, ...), ...
Clientes, servidores y la nube
2
Clientes y navegadores
Clientes de acceso a Internet ms importantes
!
PCs, porttiles, tabletas, telfonos inteligentes
Navegador (browser) cliente Web de acceso a servidores
!
Utilizando: URL, HTTP, HTML, CSS y JS
" p.e. Chrome, Firefox, Internet Explorer, Opera, Safari, ...
Tiendas de aplicaciones
!
Instalan aplicaciones en mviles y tabletas
" Las aplicaciones usan las normas de la Web (URL, HTTP, ....)
3
Servidores
Contienen informacin y servicios
Tiene una direccin conocida en Internet
!
Direccin simblica (de dominio): upm.es, google.com, ...
Cada direccin de dominio tiene una direccin IP asociada
!
Las direcciones IP son binarias y hay 2 tipos
" IPv4, tales como 192.9.0.144, ...
" IPv6, tales como 2001:db8:85a3::8a2e:370:7334, ....
Los servidores suelen virtualizarse en granjas de servidores
!
Accesibles a travs de la nube
4
Puerto
!
Direccin interna del servidor (16 bits)
" Da acceso a un servicio a travs de un protocolo
!
Normalmente a travs de circuitos virtuales TCP
" Direccin de 16 bits
!
un servidor puede tener hasta ~65000 (2^16) servicios diferentes
Los servicios tienen un protocolo y un puerto por defecto
!
Web: protocolo HTTP (puerto 80)
!
Web seguro: protocolo HTTPS (puerto 443)
!
Email: protocolo SMTP (puerto 25), POP3 (100), ...
!
Shell segura: protocolo SSH (puerto 22)
Si un servicio no est en el puerto por defecto
!
El puerto debe incluirse en el URL, p.e. http://dit.upm.es:8080
Servicios y puertos
5
Servidor (host)
email:
SMTP
direccin
IP
puerto 80
Web:
HTTP
puerto 25
URL y Recurso
URL (Uniform Resource Locator)
!
Inicialmente se diseo como direccin de un recurso (pgina Web)
" Se generaliz como direccin de acceso a un servicio o recurso en Internet
Recurso
!
Contenido digital de inters para un usuario
" pgina Web, foto, pelicula, fichero o parte de el, registro de una BD, .....
URL tiene 3 componentes bsicos
!
protocolo: protocolo de acceso (http)
!
servidor: direccin del servidor en Internet (google.com)
!
camino: identificador del fichero en servidor (/picture.com)
6
http://google.com/picture.png
google.com
HTTP (HiperText Transfer Protocol)
Protocolo del Web
!
Procesa recursos identificados por un URL en un servidor remoto
Comandos u operaciones principales de HTTP
!
GET: trae al cliente (lee) un recurso identificado por un URL
!
POST: crea un recurso identificado por un URL
!
PUT: actualiza un recurso identificado por un URL
!
DELETE: borra un recurso identificado `pr un URL
!
....... (hay mas comandos)
7
upm.es
Clientes 2, 3 y 4 solicitan recursos:
http://upm.es/.../......html
HTTP GET
apple.es
google.com
HTTP GET
Cliente 1 solicita recurso:
http://uah.es/dir/rec5.html
Aplicaciones ejecutables en un navegador creadas con
!
HTML, CSS y JavaScript
HTML
!
Lenguaje de marcado de pginas Web
" define la estructura del contenido de una pgina Web
!
En WebApps define la interfaz de la aplicacin con el usuario
CSS
!
Define el estilo visual de un una pgina o aplicacin Web (HTML)
JavaScript
!
Lenguaje de programacin de aplicaciones de cliente
Aplicacin Web
8
HTML
!
Lenguaje de marcado
CSS
!
Estilo la visualizacin
JavaScript
!
Lenguaje de programacin
Aplicacin Web: HTML, CSS y JavaScript
9
WebApps o aplicaciones de cliente
Aplicaciones que residen en un servidor
!
pero se ejecutan en un cliente
" El cliente trae la aplicacin del servidor con el protocolo HTTP (GET)
!
El URL es su direccin: http://upm.es/apps/webapp.html
Las apps se construyen con las tecnologas de la Web
!
URLs, HTTP, HTML, CSS y JavaScript
10
Servidor sirve fichero
identificado por URL
1) Cliente solicita WebApp
identificada con URL
2) Script se ejecuta al
cargar la pgina Web en el
navegador:
Solicitud HTTP GET
asociada a un URL
Respuesta HTTP:
pgina Web con script
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>, llsLas <ul> <ll>...

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 selecLor 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

W3schoo|s: educaLe yourself
hup://www.w3schools.com/hLml/hLml3_lnLro.asp

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. LsLa desaprobado por el W3C.
Se escrlben las propledades del esulo en las marcas del P1MLcomo
"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/

<dlv>

<d|v> dene bloque un generlco empleado para formaLear con CSS.
<d|v |d="ca[a" c|ass="cabecera"> ...... <]d|v>

ALrlbuLo ID: ldenuca unlvocamenLe un elemenLo P1ML en una
pglna. un elemenLo P1ML solo debe Lener un aLrlbuLo ID y esLe
debe ser unlco en la pglna. Ll selecLor CSS #ca[a se reere al
elemenLo con aLrlbuLo |d="ca[a, como en #ca[a {co|or:b|ue}

ALrlbuLo CLASS: dene una clase de elemenLos P1ML. un elemenLo
puede Lener varlos aLrlbuLos CLASS. Ll selecLor CSS .cabecera se
reere a Lodos los elemenLo de la clase cabecera (que llevan el
aLrlbuLo c|ass="cabecera"), como en .cabecera {co|or:red}

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

w3schoo|s: CSS3 LuLorlal
hup://www.w3schools.com/css3/defaulL.asp

MDN: Mozllla ueveloper neLwork
hups://developer.mozllla.org/es/docs/P1ML/P1ML3

URLs, Recursos e Enlaces
1
URL y Recurso
URL (Uniform Resource Locator)
!
Inicialmente se diseo como direccin unvoca de una pgina Web
" Se generaliz como direccin de acceso a un servicio o recurso en Internet
!
Caso particular de URI (Uniform Resource Identifier)
" Definido en de IETF: RFC 2396 (98), RFC 2732 (99) y RFC 3986 (05)
Recurso
!
Cualquier elemento merecedor de ser referenciado en Internet
" pgina Web, foto, pelicula, fichero o parte de el, registro de una BD, .....
Las marcas HTML pueden incluir atributos con URLs
!
Cuando necesitan referenciar un recurso externo,
" por ejemplo <a href=...>, <img src=...>, <script src=...>
2
http://google.com/picture.png
google.com
Componentes de un URL
Componentes ms importantes de un URL
!
<protocol://><host><path>
" protocol: protocolo, HTTP en un acceso Web
" host: direccin de un servidor en Internet
!
Se usa direccin de dominio (tambin IP): upm.es o 192.0.6.211
!
Puede incluir puerto no estandar: upm.es:8080 o 192.0.6.211:1000
" path: camino en el servidor
Ejemplo http://upm.es/lib/rec1.html
!
http: usar protocolo HTTP
!
upm.es: direccin de dominio del servidor
!
/lib/rec1.html: camino que identifica el fichero
3
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 path sigue las convenciones de los path en UNIX
!
.. se refiere al directorio anterior
" /lib/casas/../coches/vw.htm es equivalente a /lib/coches/vw.htm
4
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
5
Ancla o Anchor
Se puede aadir un ancla (anchor)
!
<protocol://><host><path><anchor>
" anchor: identifica un elemento dentro una pgina Web
!
#capitulo3 identifica el elemento
!
<h1 id=seccion3> ........ </h1>
Ejemplo
!
http://upm.es/lib/rec1.html#seccion3
" #seccion3: identifica la seccion 3 de la pgina HTML
6
URL con
fragment
o anchor
Ejemplo: http://dit.upm.es/ej_id.html#seccion2
- Al cargar el recurso asociado a este URL en un visor, se
muestra pgina desde elemento con id='seccion2'
- Atributo id='seccion2' debe ser nico en la pgina Web
-> No debe existir otro id='...' con el mismo valor
7
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
8
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
9
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
10
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
11
12
http://vishub.org/categories/43
Hacer clic
en el
Modulo 1
Hacer clic para
actualizar pag.
Editor
Interactivo
Seleccionar
ejemplo
Final del tema
Muchas gracias!
13

Mod1 Intro HTML Css Url

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mod1 Intro HTML Css Url

Uploaded by

Copyright:

Available Formats

Juan Quemada, DIT, UPM

Introduccin a Internet y a la Web

You might also like