Introducción a la Web y XHTML

Jesús Arias Fisteus
Curso 2007/2008

La Web

World Wide Web (abreviado habitualmente como la Web):
- Sistema de documentos de hipertexto interenlazados a través de internet mediante el protocolo HTTP.

Identificador Uniforme de Recursos (URI)

Secuencia compacta de caracteres que identifica unívocamente a un recurso, ya sea abstracto o fí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.htm
http://www.it.uc3m.es:8080/

Acceso a un recurso Web (I)

El navegador toma la URI del recurso:

http://www.uc3m.es/sija/informacion/TACO.htm

Determina que el protocolo es HTTP.
Resuelve la IP del servidor mediante el servicio de DNS.
Envía una petición HTTP al servidor para el recurso:
```
/sija/informacion/TACO.htm
```
Recibe el contenido del recurso (en este caso, una página HTML).
Analiza la página HTML:
- Descarga las hojas de estilo, imágenes y demás recursos indicados en el recurso HTML.
- Presenta la información al usuario.

XHTML

Familia de tipos de documentos basados en XML que replican, extienden o reducen HTML 4.
Estandarizado por el W3C (World Wide Web Consortium):
```
http://www.w3.org
```
Actualmente, los más destacados son:
- XHTML 1.0 (Transitional, Frameset, Strict)
- XHTML 1.1
- XHTML Basic (1.0 y 1.1)
- XHTML Print

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>

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 elemento con sus marcas de inicio y de fin, o con su marca de elemento vacío.

Atributos XHTML

Información que se puede incluir en la marca de inicio (o de elemento vacío) de un elemento.
Se representan obligatoriamente con un nombre, símbolo igual, y un valor entrecomillado (comillas simples o dobles):

<form action="enviar.cgi" method='post'>
...
</form>

Tipos de elementos XHTML

Elementos en línea:
- Se representan siguiendo el flujo normal de una línea de texto, sin forzar el inicio de un nuevo 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.

Hojas de estilo (I)

En XHTML se recomienda no mezclar contenido con 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.

Hojas de estilo (II)

Ubicación de la hoja de estilo:
- En un documento separado, enlazado desde la cabecera del documento XHTML (preferentemente).
```
<head>
  <link href="estilo.css" rel="stylesheet"
        type="text/css" />
</head>
```
- En el elemento style en la cabecera del documento XHTML.
- En el atributo style de elementos.

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/