Curso de Internet - HTML
Redes de ordenadores y desarrollo de páginas web

Inicio > Desarrollo de páginas web > HTML

Documentos
Caracteres
Tablas
Formularios
Enlaces

HTML

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

Estructura de los documentos HTML

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.

Caracteres especiales

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
& &amp;
< &lt;
> &gt;
" &quot;
© &copy;
® &reg;
&trade;
&euro;
á &aacute;
è &egrave;
ê &ecirc;
ü &uuml;
ß &szlig;
Ø &Oslash;
æ &aelig;
ñ &ntilde;
Ñ &Ntilde;

Tablas

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:

icono Tabla en HTML
Datos Valores
Dato 1 Valor 1
Dato 2 Valor 2
Dato 3 Valor 3

Formularios

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:

Nombre
Comentarios

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.

Información adicional


Inicio > Desarrollo de páginas web > HTML