El servicio de Internet más utilizado es la World Wide Web (WWW). Para escribir documentos para la web se utiliza el lenguaje HTML [HyperText Markup Language].
Un documento HTML es un fichero de texto plano (ASCII) que incluye ciertas marcas o etiquetas [tags] que le indican al navegador, entre otras cosas, cómo debe visualizarse el documento.
Los tags se escriben encerrados entre ángulos ("<
" y ">
") y usualmente van por parejas ("<tag>
" y "</tag>
"). Cuando van solas, las etiquetas se han de escribir como "<tag/>
para cumplir con el estándar XHTML.
Además, las etiquetas HTML pueden tener atributos, cuyos valores se especifican entrecomillados al abrir la etiqueta: "<tag atributo="valor">
...". Una misma etiqueta puede incluir varios atributos, p.ej. "<tag atrib1="valor1" atrib2="valor2">
...".
Un documento HTML, delimitado por la pareja de etiquetas <html>
y </html>
, tiene dos partes principales:
- La cabecera (entre
<head>
y </head>
) contiene información general sobre el documento que no se muestra en pantalla: título, autor, descripción...
- Las etiquetas
<body>
y </body>
definen la parte principal o cuerpo del documento.
p.ej.
<html>
<head>
<title> Título del documento </title>
<meta name="author" content="Fernando Berzal">
<meta name="keywords" content="Internet, HTML">
<meta name="description" content="Introducción al uso de Internet">
</head>
<body>
Cuerpo del documento...
</body>
</html>
|
El cuerpo del documento puede incluir, entre otros elementos:
- Párrafos (
<p>
... </p>
).
- Encabezados para definir títulos y subtítulos (de
<h1>
a <h6>
, de mayor a menor nivel).
- Hiperenlaces:
<a href="url">Texto</a>
.
- Imágenes (GIF o JPG):
<img src="fichero" border="0" alt="texto descriptivo"/>
.
- Listas numeradas (
<ol> ... </ol>
) o no numeradas (<ul> ... </ul>
) cuyos elementos se indican con la etiqueta <li>
... </li>
.
Con el fin de personalizar la presentación de la información, HTML incluye:
<b> ... </b>
pone el texto en negrita.
<i> ... </i>
pone el texto en cursiva.
<u> ... </u>
subraya el texto.
<center> ... </center>
sirve para centrar el texto.
<font size="+1" color="#rrggb"> ... </font>
se emplea para cambiar el tamaño del tipo de letra (p.ej. +2 +1 -1 -2) y su color representado en hexadecimal utilizando RGB: #000000 (negro), #ffffff (blanco), #ff0000 (rojo), #00ff00 (verde), #0000ff (azul)...
<br/>
introduce saltos de línea.
<hr/>
introduce una línea horizontal a modo de separador.
Las vocales acentuadas, las eñes y otros caracteres "no estándar" (incluyendo los ángulos que se utilizan para las etiquetas HTML) requieren secuencias especiales de caracteres para representarlos. La siguiente tabla recoge algunas de ellas:
Carácter |
Secuencia HTML |
& |
& |
< |
< |
> |
> |
" |
" |
© |
© |
® |
® |
™ |
™ |
€ |
€ |
á |
á |
è |
è |
ê |
ê |
ü |
ü |
ß |
ß |
Ø |
Ø |
æ |
æ |
ñ |
ñ |
Ñ |
Ñ |
Las tablas se delimitan con las etiquetas <table>
y </table>
. Entre estas dos etiquetas se han de incluir una serie de filas delimitadas por <tr>
y </tr>
. Cada fila, a su vez, incluye una serie de celdas <td>
y </td>
. Por ejemplo:
<table border="2">
<tr bgcolor="#ccccee">
<th colspan="2"> <img src="image/cogs.gif"/> Tabla en HTML </th>
</tr>
<tr bgcolor="#e0e0e0">
<th> Datos</th>
<th> Valores</th>
</tr>
<tr>
<td> Dato 1</td>
<td> Valor 1</td>
</tr>
<tr>
<td> Dato 2</td>
<td> Valor 2</td>
</tr>
<tr>
<td> Dato 3</td>
<td> Valor 3</td>
</tr>
</table>
|
aparece en el navegador como:
Tabla en HTML |
Datos |
Valores |
Dato 1 |
Valor 1 |
Dato 2 |
Valor 2 |
Dato 3 |
Valor 3 |
HTML también permite que el usuario no se limite a leer el contenido de la página, sino que también puede introducir datos mediante formularios (la base del comercio electrónico). Por ejemplo, el siguiente formulario:
<form method="post" action="mailto:berzal@acm.org">
<input type="text" name="nombre" size="30" maxlength="40"/>
<textarea name="comentarios" rows="6" cols="40"> </textarea>
<input type="submit" value="Enviar sugerencias por e-mail"/>
</form>
|
quedaría como se muestra a continuación dentro de una tabla:
En los formularios HTML se pueden introducir:
- Cuadros de texto (
<input type="text".../>
).
- Cuadros de texto que no muestran lo que el usuario escribe (
<input type="password".../>
).
- Textos de varias líneas (
<textarea ...> ... </textarea>
).
- Opciones (
<input type="checkbox".../>
).
- Opciones mutuamente excluyentes (
<input type="radio".../>
).
- Listas para seleccionar valores (
<select> <option> <optgroup>
).
- Ficheros adjuntos (
<input type="file".../>
).
- Parámetros ocultos para el usuario (
<input type="hidden".../>
).
Para enviar los datos del formulario a la URL especificada en form action
, se puede utilizar un botón (<input type="submit".../>
) o emplear una imagen (<input type="image".../>
), de tal forma que la acción que se realice pueda depender de la zona de la imagen que seleccione el usuario.