1. Protocolo HTTP

1.1. Protocolos y servicios de Internet

1.1.1. Protocolo TCP/IP

Internet se construye sobre el protocolo de transmisión TCP (Transmision Control Protocol), y sobre un sistema de identificación de computadores que la forman basado en el protocolo IP:

La comunicación con TCP/IP se realiza mediante sockets, conexiones entre un computador y otro a través de la que se envían datos. Puede haber más de un socket entre dos mismos ordenadores, con lo que para distinguirlos se emplea un identificador, llamado puerto. 

1.1.2. Otros protocolos y servicios

Se han desarrollado una serie de servicios y protocolos basados en TCP/IP y en la arquitectura cliente/servidor, donde una máquina (cliente) solicita peticiones de servicio a otra en la que suelen estar los datos y programas de aplicación (servidor). Algunos de los servicios y protocolos desarrollados son:

Para identificar los recursos de Internet se introdujeron  las URL (Uniform Resource Locator), un esquema de nomenclatura de recursos basado en especificar el protocolo utilizado, el servidor y el recurso al que se accede: 

Protocolo Servidor [:Puerto] Fichero

El protocolo depende del servicio al que se quiera acceder, y el fichero es la ruta del recurso, en el espacio de direcciones del servidor. Los protocolos de esta nomenclatura corresponden con algunos de los servicios mencionados:

Ejemplos de URL serían: 

http://www.ua.es/index.htm
ftp://ftp.dccia.ua.es/pub/winzip.exe
mailto:pepe@yahoo.com

Los navegadores son clientes que permiten utilizar la mayoría de los protocolos anteriores. Traducen las URL en peticiones al servicio correspondiente.

1.2. El protocolo HTTP

El protocolo HTTP especifica el modo de comunicación entre una máquina cliente y una máquina servidor, de modo que el cliente solicita un documento del espacio de direcciones del servidor, y éste se lo sirve.

HTTP es un protocolo que no tiene estado: un cliente realiza una petición al servidor, que contesta y la transacción acaba, con lo que en la siguiente petición que pueda realizar el mismo cliente se deben proporcionar de nuevo todos los datos necesarios para que el servidor sirva correctamente la nueva petición, no habiendo ninguna relación entre las peticiones.

1.2.1. Peticiones del cliente

En el protocolo HTTP el cliente realiza una petición que se descompone en:

Comando    URI    Protocolo

Por ejemplo:

GET   /index.html  HTTP/1.1
Clave: Valor

Por ejemplo:

Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible;MSIE5.0;Windows 98)

Tras las cabeceras, el cliente envía una línea en blanco (\r\n\r\n) para indicar el final de la sección de cabeceras.

METODO GET

El comando GET permitía al principio solicitar al servidor un documento estático, existente en su espacio de direcciones. Luego se vio que esto no era suficiente, y se introdujo la posibilidad de solicitar búsquedas al servidor, de forma que el documento no tuviera que ser necesariamente estático, sino que la búsqueda estuviera condicionada por unos determinados parámetros. Así, el comando GET tiene la forma:

GET   direccion ? parametros   version HTTP

Por ejemplo:

GET   /cgi-bin/pagina.cgi?IDIOMA=C&MODELO=a+b  HTTP/1.1

Los parámetros se indican con pares nombre=valor, separados por '&', y reciben el nombre de datos de formulario. El URI no puede contener espacios ni algunos caracteres, por lo que se utilizan códigos especiales, como el '+' para indicar espacio en blanco, u otros códigos %XX para representar otros caracteres. Uno de los trabajos más duros de los programas CGI es procesar esta cadena de parámetros para extraer la información necesaria.

OTROS METODOS

En la versión 1.1 de HTTP se definen otros métodos además de GET:

GET Y POST

Los dos métodos más comúnmente usados son GET y POST. Veremos las diferencias entre uno y otro con un ejemplo:

GET  /dir/cargaPagina.php?id=21&nombre=Pepe  HTTP/1.1
<cabeceras>

POST  /dir/cargaPagina.php  HTTP/1.1
<cabeceras>

id=21&nombre=Pepe
Vemos que los parámetros se pasan en el cuerpo de la petición, fuera de la línea del comando.

Comúnmente existen 3 formas de enviar una petición GET:

http://www.xx.com/pag.html?id=123&nombre=pepe
<a href="http://www.xx.com/pag.html?id=123&nombre=pepe">
Pulsa Aqui
</a>
<html>
<body>
<form action="http://www.xx.com/pag.html"> 
	<input type="text" name="id" value="123"> 
	<input type="text" name="nombre" value="pepe"> 
	<input type="submit" value="Enviar"> 
</form> 
</body> 
</html>

Para enviar una petición POST, normalmente se utiliza un formulario con METHOD=POST:

<html>
<body>
<form action="http://www.xx.com/pag.html" METHOD=POST> 
	<input type="text" name="id" value="123"> 
	<input type="text" name="nombre" value="pepe"> 
	<input type="submit" value="Enviar"> 
</form> 
</body> 
</html>

1.2.2. Respuestas del servidor

Las respuestas del servidor también tienen tres partes: 

HTTP/1.0  200  OK

1.2.3. Cabeceras

Vamos a poder implementar programas que lean las cabeceras que envía un cliente (un navegador, por ejemplo) y que modifiquen el documento servido en función de dichas cabeceras (por ejemplo, enviar una página en función del idioma que se especifique). Por otra parte, podremos utilizar las cabeceras que envíe el servidor como respuesta para obligar al navegador a hacer determinadas acciones, como saltar a otra URL.

Veremos a continuación las cabeceras más comunes tanto en las peticiones de los clientes como en las respuestas de los servidores. La RFC donde se especifican estas cabeceras es la 2616.

CABECERAS DE PETICION (HTTP/1.1)

NOMBRE DESCRIPCIÓN
Accept Tipos MIME que puede manejar el cliente
Accept-Charset Conjunto de caracteres que el cliente puede manejar
Accept-Encoding Define si el navegador puede aceptar datos codificados
Accept-Language Idiomas aceptados
Authorization Para identificarse cuando se accede a páginas protegidas
Cache-Control Opciones relacionadas con el servidor proxy. Esta cabecera se llamaba Pragma en HTTP 1.0
Connection Define si el cliente es capaz de realizar conexiones persistentes (keep-alive, valor por defecto), o no (close). Nueva en HTTP 1.1
Content-Length Longitud de los datos enviados. Aplicable a peticiones POST
Content-Type Tipo MIME de los datos enviados. Aplicable a peticiones POST
Cookie Para las cookies que se manejen
From Dirección de correo electrónico responsable de la petición
Host Unica cabecera requerida por HTTP 1.1. Indica el host y el puerto tal y como se especifica en la URL original.
If-Modified-Since El cliente sólo desea el documento si ha sido modificado después de la fecha indicada en esta cabecera.
Referer URL origen de la petición. Si estamos en la página 1 y pinchamos en un enlace a la página 2, la URL de la página 1 se incluye en esta cabecera cuando se realiza la petición de la página 2.
User-Agent Cliente que está realizando la petición (normalmente muestra datos del navegador, como nombre, etc).

CABECERAS DE RESPUESTA

NOMBRE DESCRIPCIÓN
Allow Métodos disponibles (GET, POST, etc) a los que puede responder el recurso que se está solicitando
Cache-Control Dice al cliente en qué circunstancias puede hacer una caché del documento que está sirviendo:
  • public: el documento puede almacenarse en una caché
  • private: el documento es para un solo usuario y sólo puede almacenarse en una caché privada (no compartida)
  • no-cache: el documento nunca debe ser almacenado en caché
  • no-store: el documento no debe almacenarse en caché ni almacenarse localmente de forma temporal en el disco duro
  • must-revalidate: el cliente debe revalidar la copia del documento con el servidor original, no con servidores proxy intermedios, cada vez que se use
  • max-age=xxx: el documento debe considerarse caducado después de xxx segundos.

Esta cabecera se llamaba Pragma en HTTP 1.0
Content-Encoding Tipo de compresión (gzip, etc) en que se devuelve el documento solicitado
Content-Language Idioma en que está escrito el documento. En la RFC 1766 están los idiomas disponibles
Content-Length Número de bytes de la respuesta
Content-MD5 Una forma de fijar el checksum (verificación de integridad) del documento enviado
Content-Type Tipo MIME de la respuesta
Date Hora y fecha, en formato GMT, en que la respuesta ha sido generada
Expires Hora y fecha, en formato GMT, en que la respuesta debe considerarse caducada
Last-Modified Fecha en que el documento servido se modificó por última vez. Con esto, el documento se sirve sólo si su Last-Modified es mayor que la fecha indicada en el If-Modified-Since de la cabecera del cliente.
Location Indica la nueva URL donde encontrar el documento. Debe usarse con un código de estado de tipo 300. El navegador se redirigirá automáticamente a la dirección indicada en esta cabecera.
Refresh Indica al cliente que debe recargar la página después de los segundos especificados. También puede indicarse la dirección de la página a cargar después de los segundos indicados:
Refresh: 5; URL=http://www.unapagina.com
Set-Cookie Especifica una cookie asociada a la página
WWW-Authenticate tipo de autorización y dominio que debería indicar el cliente en su cabecera Authorization.

Para colocar estas cabeceras en un documento se tienen varios métodos, dependiendo de cómo estemos tratando las páginas (mediante servlets, HTML, etc). Por ejemplo, con HTML podemos enviar cabeceras mediante etiquetas META en la cabecera (<HEAD>) de la página HTML: 

<META HTTP-EQUIV="Cabecera" CONTENT="Valor">

Por ejemplo: 

<META HTTP-EQUIV="Location" CONTENT="http://www.unapagina.com">

1.2.4. Códigos de estado HTTP

El código de estado que un servidor devuelve a un cliente en una petición indica el resultado de dicha petición. Se tiene una descripción completa de los mismos en el RFC 2616. Están agrupados en 5 categorías:

200 OK Todo está bien
204 No Content No hay documento nuevo
301 Moved Permanently El documento está en otro lugar, indicado en la cabecera Location
302 Found Como el anterior, pero la nueva URL es temporal, no permanente.
304 Not Modified El documento pedido no ha sufrido cambios con respecto al actual (para cabeceras If-Modified-Since)
400 Bad Request Mala sintaxis en la petición
401 Unauthorized El cliente no tiene permiso para acceder a la página. Se debería devolver una cabecera WWW-Authenticate para que el usuario introduzca login y password
403 Forbidden El recurso no está disponible
404 Not Found No se pudo encontrar el recurso
408 Request Timeout El cliente tarda demasiado en enviar la petición
500 Internal Server Error Error en el servidor
501 Not Implemented El servidor no soporta la petición realizada
504 Gateway Timeout Usado por servidores que actúan como proxies o gateways, indica que el servidor no obtuvo una respuesta a tiempo de un servidor remoto

1.2.5. Cookies

Las cookies son un mecanismo general mediante el que los programas de un servidor web pueden almacenar información en la parte del cliente de la conexión. Es una forma de añadir estado a las conexiones HTTP, aunque el manejo de cookies no es parte del protocolo HTTP, pero es soportado por la mayoría de los clientes.

Las cookies son objetos de tipo:

nombre = valor

donde se asigna un valor determinado (una cadena de texto) a una variable del nombre indicado. Dicho objeto es almacenado y recordado por el servidor web y el navegador durante un período de tiempo (indicado como un parámetro interno de la propia cookie). Así, se puede tener una lista de cookies con distintas variables y distintos valores, para almacenar información relevante para cada usuario (se tienen listas de cookies independientes para cada usuario).

El funcionamiento es: el servidor, con la cabecera Set-Cookie, envía al cliente información de estado que éste almacenará. Entre la información se encuentra la descripción de los rangos de URLs para los que este estado es válido, de forma que para cualquier petición HTTP a alguna de esas URLs el cliente incluirá esa información de estado, utilizando la cabecera Cookie.

La sintaxis de la cabecera Set-Cookie es:

Set-Cookie: CLAVE1=VALOR1;...;CLAVEN=VALORN [OPCIONES]

donde OPCIONES es una lista opcional con cualquiera de estos atributos:

expires=FECHA;path=PATH;domain=DOMINIO;secure
expires=Wed, 09-Nov-1999 23:12:40 GMT

Por otra parte, cuando el cliente solicita una URL que empareja con el dominio y path de alguna cookie, envía la cabecera:

Cookie: CLAVE1=VALOR1;CLAVE2=VALOR2;...;CLAVEN=VALORN

El número máximo de cookies que está garantizado que acepte cualquier navegador es de 300, con un máximo de 20 por cada servidor o dominio. El tamaño máximo de una cookie es de 4096 bytes.

1.2.6. Algunas definiciones

RFC: los documentos RFC (Request For Comment) forman un conjunto de notas acerca de Internet. Tratan sobre diferentes aspectos de la comunicación entre computadores. Podemos encontrar información sobre todos los RFC en http://www.rfc-editor.org. Si conocemos el número de RFC, normalmente podemos encontrar el documento en http://www.rfc-editor.org/rfc/rfcXXXX.txt (sindo XXXX el número de RFC).

MIME: MIME (Multipurpose Internet Mail Extensions) es un estándar oficial de Internet que indica cómo se deben formatear los mensajes para que puedan intercambiarse entre diferentes sistemas de correo electrónico. Permite incluir cualquier tipo de dato (texto, audio, video, imágenes, etc). Las RFC que definen los tipos MIME son la 2045, 2046, 2047, 2048 y 2049. Algunos tipos comunes son:

GMT: el formato de fecha y hora GMT tiene la siguiente estructura:

Wdy, DD Mon YYYY HH:MM:SS GMT

donde:

Esta representación está basada en las RFC 822, 1036 y 1123

1.3. Autentificaciones

Veremos ahora algunos mecanismos que pueden emplearse con HTTP para autentificar (validar) al usuario que intenta acceder a un determinado recurso.

1.3.1. Autentificaciones elementales

El protocolo HTTP incorpora un mecanismo de autentificación básico (basic) basado en cabeceras de autentificación para solicitar datos del usuario (el servidor) y para enviar los datos del usuario (el cliente), de forma que comprobando la exactitud de los datos se permitirá o no al usuario acceder a los recursos. Esta autentificación no proporciona confidencialidad ni integridad, sólo se emplea una codificación Base64.

Una variante de esto es la autentificación digest, donde, en lugar de transmitir el password por la red, se emplea un password codificado. Dicha codificación se realiza tomando el login, password, URI, método HTTP y un valor generado aleatoriamente, y todo ello se combina utilizando el método de encriptado MD5, muy seguro. De este modo, ambas partes de la comunicación conocen el password, y a partir de él pueden comprobar si los datos enviados son correctos. Sin embargo, algunos servidores no soportan este tipo de autentificación.

1.3.2. Certificados digitales y SSL

Las aplicaciones reales pueden requerir un nivel de seguridad mayor que el proporcionado por las autentificaciones basic o digest. También pueden requerir confidencialidad e integridad aseguradas. Todo esto se consigue mediante los certificados digitales.

1.3.2.1. Criptografía de clave pública

La clave de los certificados digitales reside en la criptografía de clave pública, mediante la cual cada participante en el proceso tiene dos claves, que le permiten encriptar y desencriptar la información. Una es la clave pública, que se distribuye libremente. La otra es la clave privada, que se mantiene secreta. Este par de claves es asimétrico, es decir, una clave sirve para desencriptar algo codificado con la otra. Por ejemplo, supongamos que A quiere enviar datos encriptados a B. Para ello, hay dos posibilidades:

El encriptado con clave pública se basa normalmente en el algoritmo RSA, que emplea números primos grandes para obtener un par de claves asimétricas. Las claves pueden darse con varias longitudes; así, son comunes claves de 1024 o 2048 bits. 

1.3.2.2. Certificados digitales

Lógicamente, no es práctico teclear las claves del sistema de clave pública, pues son muy largas. Lo que se hace en su lugar es almacenar estas claves en disco en forma de certificados digitales. Estos certificados pueden cargarse por muchas aplicaciones (servidores web, navegadores, gestores de correo, etc).

Notar que con este sistema se garantiza la confidencialidad (porque los datos van encriptados), y la integridad (porque si los datos se desencriptan bien, indica que son correctos). Sin embargo, no proporciona autentificación (B no sabe que los datos se los ha enviado A), a menos que A utilice su clave privada para encriptar los datos, y luego B utilice la clave pública de A para desencriptarlos. Así, B descodifica primero el mensaje con su clave privada, y luego con la pública de A. Si el proceso tiene éxito, los datos se sabe que han sido enviados por A, porque sólo A conoce su clave privada.

1.3.2.3. SSL

SSL (Secure Socket Layer) es una capa situada entre el protocolo a nivel de aplicación (HTTP, en este caso) y el protocolo a nivel de transporte (TCP/IP). Se encarga de gestionar la seguridad mediante criptografía de clave pública que encripta la comunicación entre cliente y servidor. La versión 2.0 de SSL (la primera mundialmente aceptada), proporciona autentificación en la parte del servidor, confidencialidad e integridad. Funciona como sigue:

SSL 3.0 proporciona también soporte para certificados y autentificación del cliente. Funcionan de la misma forma que los explicados para el servidor, pero residiendo en el cliente.

1.4. Servidor web Tomcat

1.4.1. Introducción a Tomcat

Tomcat es un servidor HTTP especializado en servlets y JSP. Realizado por el equipo de desarrollo del servidor Apache, es un servidor open source y de libre distribución. Se puede encontrar información detallada sobre Tomcat, Apache, y todo el llamado "proyecto Jakarta" en:

http://jakarta.apache.org

1.4.2. Instalación de Tomcat

Para poder instalar Tomcat tenemos que tener instalada previamente la versión 1.2 o posterior de JDK. Una vez hecho esto, deberemos tener una variable de entorno JAVA_HOME que apunte al directorio donde se ha instalado JDK (algunas versiones de Tomcat ya la establecen automáticamente).

Una vez tengamos JDK instalado, ya podemos instalar Tomcat:

Tomcat necesita además otra variable de entorno, llamada CATALINA_HOME, que apunte al directorio donde está instalado Tomcat. Si no se autoestablece deberemos asignarla nosotros.

1.4.3. Ejecución de Tomcat

Una vez tenemos instalado Tomcat, dentro del subdirectorio bin tenemos, entre otros, dos ejecutables (ficheros .bat para Windows y .sh para Unix):

Si al ejecutar estos programas desde MS-DOS nos aparece un error del tipo "Sin espacio en entorno", vamos a la opción de Propiedades dentro de esa ventana de MS-DOS, y en la pestaña Memoria colocamos un valor para Entorno inicial de 4096. Luego cerramos las ventanas de MS-DOS que tengamos y volvemos a abrir una, que ya tendrá dicha configuración.

Una vez tengamos el servidor arrancado podemos probarlo con la dirección raíz:

http://localhost:8080/

Que debería mostrar una página como:

Figura 1. Página de inicio de Tomcat

NOTA: las pruebas que hagamos, generalmente las haremos sobre nuestra propia máquina, con lo que las direcciones que tecleemos tendrán la forma: 

http://localhost:8080/...

donde luego la dirección localhost y el puerto 8080 se sustituyen en la realidad por la dirección donde coloquemos el servidor y el puerto por el que establezcamos que atienda peticiones.

Con algunos tipos de cambios que hagamos en las aplicaciones web que tengamos en Tomcat habrá que detener el servidor y volverlo a lanzar, para que Tomcat recoja dichas actualizaciones.

2. HTML

2.1. Conceptos básicos

2.1.1. WWW y HTML

El servicio Web o WWW (World Wide Web) es una forma de representar la información en Internet basada en páginas. Una página WWW puede incluir tres tipos de información: texto, gráficos e hipertexto. Un hipertexto es texto resaltado que el usuario puede activar para cargar otra página WWW. La diferencia entre un documento de hipertexto y un documento normal consiste en que el hipertexto contiene, además de la información, una serie de enlaces o conexiones con otros  documentos relacionados, de manera que el lector puede pasar de un tema a otro y volver al documento original en el momento en que le interese. De esta forma, se permite combinar texto y gráficos, y mediante hiperenlaces podremos cargar páginas de cualquier otro lugar de Internet.

HTML (HyperText Markup Language), es un lenguaje simple utilizado para crear documentos de hipertexto para WWW. No es un lenguaje de descripción de página: no permite definir de forma estricta la apariencia de una página, aunque a veces se utilice para ello, pero la presentación de la página es muy dependiente del navegador empleado.

Por tanto, HTML se limita a describir la estructura y el contenido de un documento. Es un "lenguaje de descripción de página" independiente de la plataforma en que se utilice, y no es necesario utilizar un editor particular para crear un documento HTML (podemos trabajar con el editor de DOS o con el bloc de notas, por ejemplo)

2.1.2. Clientes, servidores y URLs

Para poder utilizar el servicio Web se necesitan dos partes. Por un lado, un lugar donde poner las páginas WWW que se requieran, a disposición del público en Internet. Es lo que se llama un servidor WWW. Por otro lado, el usuario que quiere acceder a dichas páginas tiene que utilizar un programa (cliente WWW) que lea las páginas WWW e interprete su significado. Ejemplos de estos programas son los navegadores Internet Explorer o Netscape.

Interconectar documentos por todo el planeta implica tener algún método de identificar unívocamente un documento en la red. La dirección única de un documento en WWW se llama URL (Uniform Resource Locator) y se compone de los siguientes elementos:

Menos frecuentemente esta dirección podrá completarse con otros elementos: La sintaxis generalmente utilizada para representar el URL de un documento es: 
protocolo://nombre_servidor/arbol_directorios/documento

La sintaxis completa es:

protocolo://usuario:password@nombre_servidor:puerto/
arbol_directorios/documento?parametros
Ejemplos de URL: 
http://www.ua.es/index.htm
http://www.unapagina.com?param1=valor1&param2=valor2
ftp://ftp.dccia.ua.es/pub/winzip.exe

2.2. Componentes básicos de un documento HTML

2.2.1. Componentes de un documento HTML

HTML define la estructura y contenido de los documentos insertando en el texto de los mismos una serie de marcas (tags o etiquetas), que delimitan elementos del documento como cabeceras, párrafos, etc y se usan para dar un tratamiento diferente al texto que se encuentre entre ellas. Son fragmentos de texto encerrados entre los signos "<" y ">" (teniendo por tanto el formato "<marca>").

Las marcas funcionan muchas veces por parejas, una para indicar el inicio de acción de la marca, y otra para indicar el final. La marca de inicio consiste en una letra o una palabra, y la marca de final es la misma letra o palabra precedida por "/". Existen, no obstante, algunas marcas que no requieren su pareja de cierre, como <BR> (que fuerza un salto de línea). Es importante señalar que las marcas, en general pueden estar indistintamente en mayúsculas o en minúsculas.

texto normal <marca> texto afectado por la marca </marca> 
resto del texto

Hay que indicar que, para las etiquetas que se abren y se cierran, tendremos que cerrar una etiqueta DESPUES de haber cerrado las que se han abierto después (es decir, se cierran en orden inverso al que se abren): 

texto normal <marca1> texto afectado por la marca 
<marca2> texto de marca2 </marca2> 
otra vez texto de marca1</marca1> resto del texto

Algunas marcas pueden admitir atributos, pudiendo tener cada uno de estos atributos un valor. Este valor ira entre comillas (") si es alfanumérico: 

<marca atributo1=numerico atributo2="alfanumerico">

Ejemplos:

<pre width=50>
<a href="/home/default.html">

2.2.2. Esquema básico de un documento HTML

Una página HTML tiene en general el formato: 

<html>
<head>
	... Lineas de cabecera
</head>
<body>
	... Cuerpo del documento
</body>
</html>

CABECERA

La cabecera de un documento HTML está limitada por las marcas HEAD, y en ella se introduce información acerca del documento, como por ejemplo: 

<title>El titulo del documento</title>
<META HTTP-EQUIV="Cabecera" CONTENT="Valor">

CUERPO

El contenido del documento se indica en el cuerpo del mismo, delimitado por las marcas BODY. Veremos en los siguientes apartados algunos de los elementos más comunes utilizados en esta parte.

COMENTARIOS

Podemos colocar comentarios en el documento (comentarios que ignorará el navegador), con:

<!-- ... comentario ... -->

2.2.3. Encabezados

Podemos colocar títulos de mayor o menor tamaño en el documento, y dividirlos así en secciones. Los títulos o encabezados están contenidos dentro de etiquetas H#, siendo # un número del 1 al 6 que indica el tamaño de la fuente del encabezado (1 para el mayor tamaño, 6 para el menor): 

<h1>Encabezado de letra grande</h1>
<h6>Encabezado de letra pequeña</h6>

Encabezado de letra grande

Encabezado de letra pequeña

2.2.4. Bloques

Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado, etc. Algunas marcas de bloques son: 

<p>Esto esta dentro de un parrafo</p>
Un texto
<br>
Otro texto
<hr>

Esto esta dentro de un parrafo

Un texto
Otro texto

2.2.5. Apariencia

Algunas marcas HTML permiten controlar la apariencia del texto. Por ejemplo: 

<font size="5" color="blue">Fuente azul tamaño 5</font>
<br>
<b>Letra negrita</b>
<br>
<b><i><u>Letra negrita, cursiva y subrayado</u></i></b>
Fuente azul tamaño 5
Letra negrita
Letra negrita, cursiva y subrayado

2.2.6. Listas

Para definir las listas, utilizamos dos etiquetas:

Dentro de estas dos marcas, se utilizan marcas: 

<ul>
	<li>Elemento 1 de lista</li>
	<li>Elemento 2 de lista</li>
<ul>
<ol>
	<li>Elemento 1 de lista</li>
	<li>Elemento 2 de lista</li>
</ol>
  • Elemento 1 de lista
  • Elemento 2 de lista
  1. Elemento 1 de lista
  2. Elemento 2 de lista

2.2.7. Imágenes

<IMG> es la marca que permite incluir una imagen. Esta marca irá siempre completada por el atributo "src" que permite dar la dirección del fichero gráfico que contiene la imagen: 

<img src="/imagenes/unaimagen.gif">

El valor del atributo src permite especificar la ruta de la imagen como URL también. Para navegadores que no puedan cargar la imagen, podemos poner en el atributo alt el texto alternativo que se verá si no se ve la imagen:

<img src="/imagenes/unaimagen.gif" alt="Imagen de ejemplo">

Podemos alinear la imagen con el texto mediante el atributo align, indicando dónde va la imagen con respecto al texto de su línea:

<img align="right" src="/imagenes/unaimagen.gif">

2.2.8. Hiperenlaces

El lector explora un documento HTML haciendo clic sobre las zonas activas para así acceder a nuevos documentos. En HTML definimos una zona activa (que puede ser un texto o una imagen) que se asocia a la URL a la que se quiere acceder, y haciendo clic sobre esa zona se accederá a dicha URL. Para definir el hiperenlace se utiliza la marca <A> con la sintaxis: 

<a href="URL">Texto o imagen a mostrar</a>

Podremos hacer enlaces: 

<a href="http://www.ua.es">Universidad de Alicante</a>
Universidad de Alicante 
<a href="http://www.ua.es"><img src="dccia.gif"></a>

El atributo href permite indicar la dirección a la que salta el enlace al pinchar sobre él. Notar que entre las marcas <A> y </A> podemos colocar tanto texto como una imagen.

<a name="ancla1">...</a>
<a href="#ancla1">Enlace hacia ancla1</a>
<a href="pagina.htlm#ancla1">
Enlace hacia ancla1 de otra pagina
</a>

Al hacer click sobre el enlace "Enlace hacia ancla1" iremos a la zona de código etiquetada con <a name="ancla1"> de nuestro documento (en el primer caso) o de la página pagina.html (en el segundo caso).

2.2.9. Tablas

Para crear tablas, encerramos la tabla entre las marcas <TABLE>...</TABLE>. Podemos pasarle como atributo border el grosor del borde de la tabla, y en el atributo width la anchura (en porcentaje o en píxeles) 

<table border="0" width="50%">
...
</table>

Dentro de la tabla, utilizamos las siguientes marcas:

Por ejemplo:

<table border="2">
<th>Cabecera 1</th><th>Cabecera 2</th>
<tr>
	<td>Columna 1.1</td>
	<td>Columna 1.2</td>
</tr>
<tr>
	<td>Columna 2.1</td>
	<td>Columna 2.2</td>
</tr>
</table>
Cabecera 1 Cabecera 2
Columna 1.1 Columna 1.2
Columna 2.1 Columna 2.2

Las marcas td pueden tener atributos, como width para indicar sus características (anchura, color, fuente, etc).

2.2.10. Formularios

Un formulario es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de diálogo. Se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc. El usuario rellenará zonas en el formulario que se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va ha tratar, éste recibe el identificador de cada zona y el valor introducido.

La marca <FORM> ... </FORM> define un formulario y dentro de ella se situarán todas las marcas que generan los diversos elementos que componen el formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos: 

<form method="post" action="mipagina.jsp">
...
</form>

Los elementos que se coloquen dentro del formulario tienen los siguientes atributos comunes:

Podemos tener varios elementos iguales con el mismo nombre, considerando así un mismo elemento con múltiples valores. 

Entre los elementos que podemos colocar dentro de un formulario, destacamos:

La casilla que tiene un atributo checked aparece marcada. Para los botones de radio, el type es radio, y la diferencia con los checkboxes es que sólo puede haber una casilla marcada.

<select name="lista1">
	<option>Opcion 1</option>
	<option>Opcion 2</option>
</select>
<select multiple name="lista2" size="3">
	<option>Opcion 1</option>
	<option>Opcion 2</option>
</select>	
<textarea name="texto1" rows=5 cols=40>
El texto del area
</textarea>

Un ejemplo de formulario:

<form action="unapagina.php" method="post">
Nombre: <input name="nombre" value="Pepe">
<br>
Validado: 
<input type="checkbox" value="validado" checked>
<br>
Comentarios: 
<textarea name="comentarios" rows=5 cols=50>
</textarea>
<br>
<input type="submit" value="Enviar">
</form>
Nombre:
Validado:
Comentarios:

2.2.11. Símbolos

Algunos símbolos (como por ejemplo '<', 'á', 'é', etc) no pueden representarse bien directamente en código HTML, y para representarlos se utilizan otros símbolos que los sustituyen:

< &lt;
> &gt;
& &amp;
(espacio en blanco) &nbsp;
" &quot;
ñ &ntilde;
á &aacute;
é &eacute;
í &iacute;
ó &oacute;
ú &uacute;
Á &Aacute;
É &Eacute;
... ...

Por ejemplo:

&quot;Hola&quot; Esto es un texto con may&uacute;sculas 
y &lt; menor que y m&Aacute;s may&uacute;sculas

Resultaría:

"Hola" Esto es un texto con mayúsculas 
y < menor que y mÁs mayúsculas