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