B.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)

B.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:

• El protocolo de intercambio de datos entre el cliente y el servidor. (http, ftp, etc)
• La dirección Internet del servidor que difunde los documentos. Esta dirección, única en toda la red, es la dirección IP de la máquina (un código de 4 bytes, separando cada byte (en decimal) por puntos). Al ser estos números difíciles de memorizar, un servidor de nombres (DNS) resuelve generalmente la relación entre dirección numérica y nombre simbólico de la máquina y nombre del ámbito. Así, por ejemplo, 134.158.48.1 es la dirección de la máquina sioux.in2p3.fr en la que sioux representa el nombre de la máquina y .in2p3.fr el nombre del ámbito.
• El árbol de directorios (camino) que conduce al documento, dentro del servidor.
• El nombre del documento.

• El puerto
• Información de autentificación (login y password del usuario)
• Parámetros adicionales.

protocolo://nombre_servidor/arbol_directorios/documento

La sintaxis completa es:

protocolo://usuario:password@nombre_servidor:puerto/
arbol_directorios/documento?parametros

http://www.ua.es/index.htm
http://www.unapagina.com?param1=valor1&param2=valor2
ftp://ftp.dccia.ua.es/pub/winzip.exe

B.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">

B.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:

• El título del mismo:

<title>El titulo del documento</title>

• Cabeceras HTTP:

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

B.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>

B.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>...</P> se utiliza para delimitar párrafos.

• <PRE>...</PRE> se utiliza para visualizar el texto que contiene respetando el formato en que fue escrito.

• <BLOCKQUOTE>...</BLOCKQUOTE> se utiliza para tabular a la derecha (cuando se abre la marca) y a la izquierda (cuando se cierra).

• <BR> indica un salto de línea.

• <HR> se emplea para representar una línea horizontal.

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

B.2.5. Apariencia

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

• <FONT>...</FONT> establece las características de la fuente para el texto que encierra.

• <B>...</B> pone en negrita el texto que encierra.

• <I>...</I> pone en cursiva el texto que encierra.

• <U>...</U> pone en subrayado el texto que encierra.

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

B.2.6. Listas

Para definir las listas, utilizamos dos etiquetas:

• <UL>...</UL> para definir listas no ordenadas

• <OL>...</OL> para definir listas ordenadas

Dentro de estas dos marcas, se utilizan marcas:

• <LI>...</LI> para definir los elementos de la lista

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

B.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">

B.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 otras páginas:

<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 otras zonas de la misma página (o a zonas concretas de una página). Para ello se utilizan las "anclas". 
  • En la zona a la que se quiera acceder con el enlace se le asigna una marca <A> con un atributo name, con el nombre con el que queramos identificar la zona:

<a name="ancla1">...</a>

• Luego en la zona donde coloquemos el enlace, en el href hacemos referencia a la marca anterior, precedida por '#':

<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).

B.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:

• <TH>...</TH> para definir las cabeceras de la tabla

• <TR>...</TR> para definir las filas de la tabla

• <TD>...</TD> para definir cada una de las columnas dentro de cada fila 

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>

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

B.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:

• METHOD: define el modo de transferencia de los datos del formulario (GET o POST)
• ACTION: URL del programa que tratará los datos del formulario cuando se envíe

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

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

• NAME: nombre del elemento. 
• VALUE: valor del elemento. Para un campo de texto es el texto que aparece en el cuadro, para un botón es la etiqueta del botón, y para un checkbox es el valor asociado a la casilla cuando está pulsada.

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:

• Campos de entrada: con marcas <INPUT> indicamos distintas formas de introducir datos por el usuario. Distinguimos cada una de estas formas mediante el atributo type de dicha marca. Tenemos, por ejemplo:
  • Campos de texto: los campos de texto no tienen atributo type, o podemos poner type="text":

    <input name="texto1" value="">

• Botones SUBMIT: al pulsar este botón se enviará el formulario a la URL indicada en el action del mismo:

  <input type="submit" name="botonS" value="Pulsame">

• Botones RESET: al pulsar este botón se borrarán los datos de los campos del formulario:

  <input type="reset" name="botonR" value="Borrar">

• Checkboxes y botones de radio: casillas que se marcan y se desmarcan al pulsar sobre ellas:

  <input type="checkbox" name="casillas" 
   value="casilla1" checked>
  
  <input type="checkbox" name="casillas" 
   value="casilla2">

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.

• Campos ocultos: campos donde guardamos una información que no queremos mostrar:

  <input type="hidden" name="oculto" value="Datos">

• Listas: con marcas <SELECT>...</SELECT> indicamos listas de elementos. Cada uno de los elementos se pone dentro de la marca entre etiquetas <OPTION>...</OPTION>. Si la marca <SELECT> tiene el atributo MULTIPLE, es una lista fija, y si no, es una lista desplegable. Para listas fijas, en su atributo size indicamos cuántos elementos están visibles (el resto se puede ver con barras de desplazamiento).

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

• Areas de texto: con marcas <TEXTAREA>...</TEXTAREA> indicamos areas de texto de varias líneas. El atributo rows indica el número de filas visibles del área, y cols el número de columnas visibles (se verán las filas y columnas que se indiquen en estos atributos, aunque se pueden tener más, viéndolas todas con las barras de desplazamiento):

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

B.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:

Por ejemplo:

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

Resultaría:

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