breve introducción a la web y xhtml laboratorio de ... · la web world wide web (abreviado...
TRANSCRIPT
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Breve introducción a la Web y XHTML
Laboratorio de Aplicaciones Telemáticas(Curso 2009/2010)
Jesus Arias Fisteus
Breve introduccion a la Web y XHTML– p. 1
Edi
ted
with
emac
s+
LAT E
X+
pros
per
La Web
World Wide Web (abreviado habitualmente comola Web):
Sistema de documentos de hipertextointerenlazados a través de Internet mediante elprotocolo HTTP.
Breve introduccion a la Web y XHTML– p. 2
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Identificador Uniforme de Recursos(URI)
Secuencia compacta de caracteres que identificaunívocamente a un recurso, ya sea abstracto ofísico (RFC 3986).
En el caso de la Web:protocolo://usuario:contraseña@servidor:puerto
/ruta?params#fragmento
Ejemplos:http://www.uc3m.es/sija/informacion/TACO.htmhttp://www.it.uc3m.es:8080/
Breve introduccion a la Web y XHTML– p. 3
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Acceso a un recurso Web (I)
1. El programa cliente (p.e. un navegador) toma laURI del recurso:http://www.uc3m.es/sija/informacion/TACO.htm
2. Determina que el protocolo es HTTP.
3. Resuelve la IP del servidor mediante el servicio deDNS.
4. Envía una petición HTTP al servidor para elrecurso:/sija/informacion/TACO.htm
Breve introduccion a la Web y XHTML– p. 4
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Acceso a un recurso Web (II)
5. Recibe el contenido del recurso (en este caso, unapágina HTML).
6. Analiza la página HTML:Descarga las hojas de estilo, imágenes ydemás recursos indicados en el recurso HTML.Presenta la información al usuario.
Breve introduccion a la Web y XHTML– p. 5
Edi
ted
with
emac
s+
LAT E
X+
pros
per
HTML y XHTML (I)
HTML (HyperText Markup Language) es ellenguaje más utilizado para publicar informaciónen la Web.
Existen varias versiones y variantes (p.e. XHTML).
Breve introduccion a la Web y XHTML– p. 6
Edi
ted
with
emac
s+
LAT E
X+
pros
per
HTML y XHTML (II)
HTML y XHTML permiten:Presentar información textual.Incluir programas (p. e. Flash, Java,JavaScript).Acceder a otros documentos mediantehiperenlaces.Rellenar formularios con información y enviarlaal servidor.Incluir objetos multimedia (vídeos, imágenes,sonidos, animaciones, etc.)
Breve introduccion a la Web y XHTML– p. 7
Edi
ted
with
emac
s+
LAT E
X+
pros
per
XHTML
Familia de tipos de documentos basados en XMLque replican, extienden o reducen HTML 4.
Estandarizado por el W3C (World Wide WebConsortium):http://www.w3.org/
Actualmente, los más destacados son:XHTML 1.0 (Transitional, Frameset, Strict)XHTML 1.1XHTML Basic (1.0 y 1.1)XHTML Print
Breve introduccion a la Web y XHTML– p. 8
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Ejemplo: documento XHTML 1.1
<?xml version="1.1" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Mi primera página XHTML 1.1</title></head><body>
<p>¡Hola Mundo!</p></body>
</html>
Breve introduccion a la Web y XHTML– p. 9
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Marcas XHTML
Marcas de inicio y de fin de elemento:<a href="http://www.it.uc3m.es/jaf/">Página
de Jesús</a>
Marca de elemento vacío (sin contenido)<img src="arbol.jpg" alt="Foto de un roble" /><hr/>
Es obligatorio en XHTML representar un elementocon sus marcas de inicio y de fin, o con su marcade elemento vacío.
Breve introduccion a la Web y XHTML– p. 10
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Atributos XHTML
Información que se puede incluir en la marca deinicio (o de elemento vacío) de un elemento.
Se representan obligatoriamente con un nombre,símbolo igual, y un valor entrecomillado (comillassimples o dobles):
<form action="enviar.cgi" method=’post’>...</form>
Breve introduccion a la Web y XHTML– p. 11
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Tipos de elementos XHTML
Elementos en línea:Se representan siguiendo el flujo normal deuna línea de texto, sin forzar el inicio de unnuevo bloque.Ejemplos: i, b, a, img, span.Los <a href="murcielago.html">murciélagos</a>pertenecen al orden de los <i>quirópteros</i>.
Elementos de bloque:Dan lugar a un nuevo bloque de contenido,normalmente en una nueva línea.Ejemplos: p, form, h1, table.
Breve introduccion a la Web y XHTML– p. 12
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Hojas de estilo (I)
En XHTML se recomienda no mezclar contenidocon presentación:
Contenido: se indica mediante XHTML.Presentación: mediante una hoja de estilo.
Cascading Style Sheets (CSS):Lenguaje para desarrollar hojas de estilo.Permite controlar la presentación de HTML,XHTML y XML.
Breve introduccion a la Web y XHTML– p. 13
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Hojas de estilo (II)
Ubicación de la hoja de estilo:En un documento separado, enlazado desde lacabecera del documento XHTML(preferentemente).<head>
<link href="estilo.css" rel="stylesheet"type="text/css" />
</head>
En el elemento style en la cabecera deldocumento XHTML.En el atributo style de elementos.
Breve introduccion a la Web y XHTML– p. 14
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Referencias
Uniform Resource Identifier (URI): Generic Syntax(RFC 3986, STD 66):http://tools.ietf.org/html/rfc3986
Introducción a HTML, XHTML y CSS:http://www.it.uc3m.es/labttlat/material
/intro-html.pdf
XHTMLpedia:http://www.it.uc3m.es/jaf/xhtmlpedia/
Validadores de HTML, XHTML y CSS del W3C:http://validator.w3.org/http://jigsaw.w3.org/css-validator/
Breve introduccion a la Web y XHTML– p. 15