edit · print · PDF

Introducción a HTML/XHTML

Una página básica

El XHTML utiliza un lenguaje de etiquetas para marcar el contenido. Para indicar que el documento que creamos es HTML, se empieza y termina con etiquetas <html> y </html>. Globalmente, una página web tiene dos partes, una cabecera y el cuerpo o contenido, identificado por las etiquetas <head> y <body> respectivamente. La primera incluye información sobre la página y la segunda el contenido en sí.

Una página básica será por ejemplo:

<html>
  <head>
    <title>Mi primera página web</title>
  </head>
   <body>
   ¡Hola mundo!
   </body>
</html>
[$[Get Code]]

Esta página sería correcta para HTML, pero no para XHTML, que obliga a incluir una línea particular al principio del documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Mi primera página web</title>
  </head>
  <body>
   ¡Hola mundo!
  </body>
</html>
[$[Get Code]]

La directriz DOCTYPE le indica a los navegadores modernos si pueden suponer o no que la página está hecha completamente con estándares o si bien deben ser tolerantes a fallos, la implementación de esta compatibilidad puede variar entre navegadores.

Dándonos a conocer: etiquetas meta

En la inmensidad de internet tiene que haber una manera de incluir los datos básicos de nuestra página web para que pueda ser encontrada y catalogada por los sistemas de búsqueda; para esto son las etiquetas <meta>, que se colocan en la cabecera de la página (<head>) e incluyen información sobre el contenido de la página, el autor, palabras clave, etc. Una serie de etiquetas META típicas son:

<meta name="description" content="Curso de paginas web:
     curso de introduccion a paginas web con estandares" />
<meta name="keywords" content="curso, web, html, xhtml, css, standards" />
<meta name="author" content="Pepito Grillo" />
[$[Get Code]]

Las etiquetas META permiten tambien hacer cosas interesantes como controlar el periodo de refresco de nuestra página web, por ejemplo:

<meta http-equiv="refresh" content="5" />
[$[Get Code]]

que recargará automáticamente la página cada 5 segundo (un poco optimista). Otra posibilidad es usarla para redireccionar de una página a otra esperando un tiempo, por ejemplo:

 <meta http-equiv="refresh" content="3; url=pagina_nueva.html">
[$[Get Code]]

Esto rediccionará nuestra página a otra llamada "pagina_nueva.html" al cabo de 3 segundos. Esto es muy útil si por ejemplo cambiamos de sitio nuestra página y queremos reenviar a los visitantes a la nueva dirección.

Dando formato a una página

Cabeceras (headings)

Se utilizan como títulos y subtítulos, para empezar párrafos y ayudar a estructurar un documento en secciones u subcciones,por ejemplo:

<h1>Cabecera muy grande</h1>
<h2>Cabecera grande</h2>
<h3>Esta ya no es tan grande</h3>
<h4>Cabecera pequeña</h4>
<h5>Cabecera muy pequeña</h5>
<h6>Cabecera ridícula</h6>
[$[Get Code]]

y se verá como: 

 Cabecera muy grande
 Cabecera grande
 Esta ya no es tan grande
 Cabecera pequeña
 Cabecera muy pequeña
 Cabecera ridícula

El estilo por defecto de las cabeceras son textos grandes en negrita y sin otra decoración, que además añaden una nueva línea despues de ellos, ya que normalmente despues suele venir un párrafo u otra cabecera más pequeña. Los párrafos se marcan entre etiquetas <p> y </p>:

<h2>Esto es un título</h2>
<p>Aquí empieza el párrafo...</p>
[$[Get Code]]

Y el resultado es: 

 Esto es un título
      Aquí empieza el párrafo...

Otras etiquetas importantes:

<p>Ejemplo de <strong>texto resaltado</strong> </p>
<p>Ejemplo de <em>texto enfatizado</em> </p>
<p>Ejemplo de <sup>superíndice</sup> </p>
<p>Ejemplo de <sub>subíndice</sub> </p>
<p>Ejemplo de <del>texto tachado</del> </p>
<p>Ejemplo de <code>texto de código</code> </p>
[$[Get Code]]

Y el resultado: 

 Ejemplo de texto resaltado
 Ejemplo de texto enfatizado
 Ejemplo de superíndice
 Ejemplo de subíndice
 Ejemplo de texto tachado
 Ejemplo de texto de código

Texto preformateado

El texto preformateado se usa para incluir texto monoespaciado en una página web, tal y como se escribe. Al escribir un texto entre etiquetas <pre>, el texto aparecerá con fuente monoespacida tipo máquina de escribir y respetará los espacios en blanco y nuevas líneas que incluyamos. Esta etiqueta es muy útil para incluir partes de código o sucesiones de comandos en un documento HTML. Un ejemplo de trozo de código en Python entre estas etiquetas sería así: 

  if myVars==2: 
       modeplot='ic'    
       if len(p[1])<3:
          print 'ERROR: Image for contours not specified: Check config file'
          sys.exit(0)
       else:
          im2=p[1][2]

Otras etiquetas muy usadas son <br /> empieza una nueva línea sin incluir espacios verticales estre ellas y <hr />, que crea una línea horizontal donde se ponga. Fíjense que estas etiquetas se abren y se cierran en el mismo momento, algo que se debe hacer siempre en XHTML.

Caracteres especiales

El HTML permite escribir caracteres especiales como las tildes, eñe, etc, empleando su código HTML: 

 &ntilde; para la ñ
 &aacute; para la á
 &uacute; para la ú
 &alpha; para la α

Escribir tildes y eñes de esta manera puede llegar a ser muy incómodo, pero normalmente cuaquier editor de texto (nedit, emacs, vi, etc) hace el cambio al su código HTML automáticamente si está correctamente configurado, por lo que no será necesario preocuparse mucho por eso, aunque sí tendremos que saberlo para letras griegas y otros caracteres matemáticos. En WebStandards hay una lista de caracteres especiales en HTML.

Creando enlaces

Los enlaces o links son fundamentales en una página web y permiten conectar unas páginas con otras. Existen tres tipos de enlaces: 

 Internos         En la misma página
 Locales          En el mismo dominio
 Globales         En toda la internet

La etiqueta de enlace es del tipo:

<a href="destino.html">Página del proyecto</a>
[$[Get Code]]

El enlace se verá como: Página del proyecto

Los internos referencian una parte de la misma página mediante "anclas" (anchors) del tipo: <a id="top"></a>.

y el enlace ser haria a la etiqueta "top":

<a href="#top">Ir arriba</a>
[$[Get Code]]

que resulta: 

  Ir arriba

Para enlaces globales hay que poner la URL completa:

<a href="http://www.google.com">Google</a>
[$[Get Code]]

que produce: 

 Google

Enlaces de correo

Se usan para lanzar el administrador de correo electrónico con la dirección de correo indicada en lugar visitar un sitio. Son idénticos a los normales, pero poniendo la dirección como destino y anteponiendo a ella "mailto:"

<a href="mailto:cau@iac.es">Consulta al CAU</a>
<a href="mailto:cau@iac.es?subject=Problema
        &body=No me funciona el eMule">Consulta al CAU</a>
[$[Get Code]]

y resulta: 

  Consulta al CAU

Un atributo importante de los enlaces son destinos (target), que pueden ser: 

 target="_blank"     Abre una nueva página en un nuevo navagador
 target="_self"      Carga una nueva página en la ventana actual
 target="_parent"    Carga una nueva página en un marco que es superior al que se encuentra el enlace
 target="_top"       Carga una nueva página en el navegador cancelando todos los marcos

por ejemplo, si a <a href="http://www.google.com">Google</a> le añadimos <a href="http://www.google.com" target="_blank">Google</a>, tendremos: 

 Google

Trabajando con imágenes

Los navegadores admiten imágenes en formato jpg, png o gif en documentos HTML. La etiqueta para insertar una imagen es:

<img src="image.jpg" />
[$[Get Code]]

y mostrará:

si se le asigna el tamaño:

<img src="image.jpg" width="220" height="100" />
[$[Get Code]]

Si no se especifica el tamaño, el navegador usará la original de la imagen, aunque es recomendable incluirlo por el comportamiento que pueda tener en algunos navegadores, especialmente si por algún motivo la imagen no se encuentra.

Una imagen se puede poner como origen de un enlace desde cualquier otro sitio:

<a href="http://nedwww.ipac.caltech.edu/" alt="NASA
  Extragalactic Database"><img src="content/i/nedlogo.jpg" /></a>
[$[Get Code]]

y tendremos:

NASA Extragalactic Database

o bien como enlace a una versión mayor (miniatura):

<a href="content/i/ucanca.jpg/" title="El Teide desde Ucanca. Haz click para versión mayor">
  <img src="content/i/ucanca_pequena.jpg" alt="El Teide nevado" />
</a>
[$[Get Code]]
El Teide nevado

Fíjese que además se ha incluído la propiedad alt en la etiqueta imagen, que no es más que una breve descripción de la imagen que se mostrará en navegadores de texto o cuando las visión de imágenes esté inhabilitada. Cuando se creen documentos XHTML, siempre se debe incluir la propiedad alt.

En el enlace, también se usó la propiedad title, que es similar a alt, pero se usa como un título sobre el enlace cuando el puntero se coloca encima y describe a dónde lleva o qué hace ese enlace. Es muy práctico usar title en enlaces que tengan pocas palablas y necesiten comentar a dónde llevan, como en un menú; también es útil usarlas cuando los enlaces son imágenes, porque no siempre queda claro qué es lo que hacen al pinchar en ellas.

Otros elementos de formato

En XHTML existen otras etiquetas que permiten estructurar un documento y mostrar información tabular. Los más importantes son las listas y las tablas.

Listas

Permiten agrupar y alinear líneas de texto. Por ejemplo:

<ul>
    <li>Tomates</li>
    <li>Patatas</li>
    <li>Detergente</li>
    <li>Arroz</li>
    <li>Café</li>
 </ul>
[$[Get Code]]

que producirá una lista no ordenada de elementos:

  • Tomates
  • Patatas
  • Detergente
  • Arroz
  • Café

Aqui, la etiqueta <ul> anuncia una lista sin ordenar y las <li> son cada unos de los elementos de la lista. Si lo que queremos es una lista ordenada, podemos usar <ol> en lugar de <ul> y los elementos de la lista serán los mismos:

  1. Tomates
  2. Patatas
  3. Detergente
  4. Arroz
  5. Café

Tablas en HTML

Las tablas se usan para mostrar datos ordenado o listas complejas y se limitan entre etiquetas entre <table> y </table> usando <tr> para las filas y <td> para las columnas. Una tabla simple sería:

<table>
   <tr><td>Fila 1, celda 1</td><td>Fila 1, celda 2</td></tr>
   <tr><td>Fila 2, celda 1</td><td>Fila 2, celda 2</td></tr>
</table>
[$[Get Code]]

mostrará

Fila 1, celda 1Fila 1, celda 2
Fila 2, celda 1Fila 2, celda 2

Se pueden usar los atributos rowspan o colspan para que una celda abarque varias filas o columnas, repectivamente:

<table>
  <tr>
   <td>Columna 1</td>
   <td>Columna 2</td>
   <td>Columna 3</td>
  </tr>
  <tr><td rowspan="2">Fila 1, celda 1</td>
  <td>Fila 1, celda 1</td><td>Fila 1, celda 2</td></tr>
  <tr><td>Fila 2, celda 1</td><td>Fila 2, celda 2</td></tr>
  <tr><td colspan="3">Fila 3, celda 1</td></tr>
 </table>
[$[Get Code]]

que mostrará:

Columna 1Columna 2Columna 3
Fila 1, celda 1Fila 1, celda 2Fila 1, celda 3
 Fila 2, celda 3
Fila 3, celda 1  

Aunque crear tablas en HTML es simple, cuando son muy complejas o muy grandes se hace muy incómodo trabajar con ellas, consumiendo el tiempo y la paciencia del diseñador con cada pequeño cambio. Por esto es recomendable usar algún editor gráfico de HTML para crearlas si las tablas se ponen tontas.

Fomularios en HTML

Los formularios permiten interactuar al usuario y el administrador con la ayuda de lenguajes del lado del servidor (PHP, Perl, JSP, ASP) o CGIs. Todos los formularios se deben encerrar entre etiquetas <form> para que se puedan enviar los datos y dentro de ellas se incluyen una a varias etiquetas de formularios. Algunos tipos de formularios son:

Campo de texto

Es el formulario más simple y se usa para incluir textos pequenos de una línea. Un ejemplo:

<form method="post" action="mailto:cau@iac.es">
  Nombre: <input type="text" size="30" maxlength="30" name="nombre" id="nombre"> <br />
  E-mail: <input type="text" size="30" maxlength="30" name="mail" id="mail">
          <input type="submit" value="Enviar">
</form>
[$[Get Code]]

Y se verá como: 

 Nombre:  
 E-mail:

En este ejemplo se usan dos campos de texto para escribir el nombre y el correo electrónico; el tamaño de cada uno son 30 caracteres y tiene una longitud máxima de tambien 30 caracteres.Además cada uno tiene un identificador (name e id) que le identifica, Para que el formulario sea efectivo el formulario tiene que incluir además un botón para enviar los datos, y se hace con otra etuqueta <input> de tipo "submit"; al pinchar en el botón se enviarán las variables "nombre" y "email" a donde indique el atributo "action" del <form>, que en este caso es el correo electrónico. Botones (Radio Buttons)

No permiten escribir, sino elejir una entre varias opciones:

<form method="post" action="mailto:japp@iac.es">
 ¿Cual es la capital de Botswana? <br />
  <input type="radio" name="capital" id="capital" value="Antananarivo">Antananarivo</input>
  <input type="radio" name="capital" id="capital" value="Gaborone">Gaborone</input>
  <input type="radio" name="capital" id="capital" value="Luanda">Luanda</input>
 </form>
[$[Get Code]]

Y resulta: 

 ¿Cual es la capital de Botswana? 
  Antananarivo
  Gaborone 
  Luanda

Como una opción de botón sólo permite elejir una opción, todas las opciones del mismo formulario deben llamarse o identificarse igual, como en este ejemplo, en el que el nombre de la variable es "capital". Cajas de varias opciones (Check boxes)

Son como las anteriores, pero permiten varios valores:

<form name="opciones" id="opciones" method="post" action="">
  <input name="position" type="checkbox" id="position"
    value="position" checked="checked"/> Position (AR, Dec)<br />
  <input name="redshift" type="checkbox" id="redshift" value="redshift" />Redshift <br />
  <input name="magnitude" type="checkbox" id="magnitude" value="magnitude" checked="checked" /> Magnitude <br />
  <input name="morphology" type="checkbox" id="morphology" value="morphology" />Morphological type<br />
</form>
[$[Get Code]]

Y tendremos un formulario parecido a 

  Position (AR, Dec)
  Redshift
  Magnitude
  Morphological type

Listas

Permiten elejir una opción de una lista de opciones:

Elije tipo de objeto:

<form name="list" id="lista" method="post" action="consulta.php">
<select name="select">
  <option value="galaxias">Galaxias</option>
        <option value="fuentes_ir">Fuentes IR</option>
        <option value="cumulos">C&uacute;mulos de galaxias</option>
  <option value="qso">QSO</option>
</select>
<input type="submit" value="Send">
</form>
[$[Get Code]]

Aquí, al enviar el formulario a "consulta.php" se envía la variable objetos con el valor value de la opción elejida.

Textos largos: Textarea

Se utilizan para enviar texto largo:

Comentarios: <br />
<form name="data" id="data" method="post" action="mailto:japp@iac.es">
  <textarea name="textarea">Escribe aquí tus comentarios</textarea>
</form>
[$[Get Code]]

Se verá como:

HTML, XHTML y estándars

En los últimos años, el World Wide Web Consortium ha liderado el esfuerzo de estandarizar los lenguajes para web, necesidad que aumentó aumentó durante la guerra de navegadores a finales de los noventa. Actualmente, XHTML 1.0 es la recomendación del W3C para el marcado y se define como una aplicación de XML. El XHTML tiene algunas exigencias adicionales al HTML 4.0 que le hacen más robusto y compatible:

  • Todos los elementos XHTML deben estar correctamente anidados
  • Tods los documentos XHTML deben estar bien formados
  • Las etiquetas en siempre en minúsculas
  • Las elemntos XHTML deben cerrarse siempre

por ejemplo, el siguiente código es incorrecto en XHTML:

<strong><em>Texto en cursiva y negrita</strong></em>
[$[Get Code]]

Lo correcto sería:

<strong><em>Texto en cursiva y negrita</em></strong>
[$[Get Code]]

Igualmente, las etiquetas vacías se deben cerrar siempre y escribir <br /> en lugar de <br>.

Más reglas de marcado

  • Todos los atributos en minúsculas
  • Todos los atributos entre comillas
  • Atributos siempre completos
  • El atributo id reemplaza a name

Por ejemplo:

<table width="100%"> en lugar de <table WIDTH="100%">
<img src="foto.gif" id="foto" /> en lugar de <img src="foto.gif" name="foto" />
[$[Get Code]]

Los atributos en XHTML no se pueden minimizar: 

 HTML 	        XHTML 
 compact 	compact="compact"
 checked 	checked="checked"
 declare 	declare="declare"
 readonly 	readonly="readonly"
 disabled       disabled="disabled"
 selected 	selected="selected"
 defer 	        defer="defer"
 ismap 	        ismap="ismap"
 nohref  	nohref="nohref"
 noshade 	noshade="noshade"
 nowrap 	nowrap="nowrap"
 multiple 	multiple="multiple"
 noresize 	noresize="noresize"@]

Estructura correcta

Un documento XHTML debe tener la siguiente estructura:

  • Tipo DOCTYPE
  • head
  • body

El DOCTYPE indica al navegar el tipo de marcado de que contiene el documento, de los que hay tres tipos: estricto, transicional, frameset.

XHTML 1.0 Strict

Se usa cuando se quiere un marcado totalmente limpio, sin atributos de presentación, para lo que se deben usar CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[$[Get Code]]

XHTML 1.0 Transitional

Se usa para mezclar propiedades de presentación de HTML y CSS juntas, especialmente cuando cuando se quiere tener en cuenta a navegadores antiguos, que no soportan CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[$[Get Code]]

XHTML 1.0 Frameset

Se emplea cuando se quieren incluir marcos (frames) en el documento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-framset.dtd">
[$[Get Code]]
edit · print · PDF
Page last modified on October 31, 2007, at 01:45 PM