domingo, octubre 31, 2004

Etiquetas básicas en XHTML

El W3C es el creador de la especificación XHTML.

Mostramos las etiquetas o tags más elementales, que se introducen dentro del cuerpo del documento (entre <body> y </body>).

TITULOS

Son encabezados que describen brevemente el tema de la sección que introducen. Hay seis niveles de encabezados en XHTML, siendo <h1> el más importante y <h6> el menos importante.

Ejemplo:

<h3>Encabezado h3</h3>

Resultado:

Encabezado h3



BLOQUES

La presentación del documento ignora los espacios y tabulaciones del texto fuente. Por eso se utilizan una serie de etiquetas que sustituyen a estos elementos:

<p>
Sirve para representar párrafos. No puede contener elementos en bloque.

<p>El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.</p><p>Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.</p>

El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.

Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.


La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>.

<pre>
Sirve para indicar que el texto está "preformateado", por lo que los navegadores respetarán los espacios en blanco y los "intros". Mostrará un tipo de letra más pequeña que la del texto normal.

<pre>My my, hey hey
Rock and roll is here to stay</pre>


My my, hey hey

Rock and roll is here to stay


<blockquote>
Sirve para designar citas de otras fuentes. Se suele representar con tabulaciones a izquierda y derecha.

<blockquote>My my, hey hey
Rock and roll is here to stay</blockquote>


My my, hey hey
Rock and roll is here to stay


<hr />
Sirve para representar una línea separadora horizontal. Tiene seis tamaños diferentes: <hr size=1>, <hr size=2>, <hr size=3>, etc.

My my, hey hey<hr />Rock and roll is here to stay

My my, hey hey
Rock and roll is here to stay


MARCADO DE FRASES

<em>
Sirve para dar énfasis. El navegador representará el texto en cursiva, si no se indica lo contrario.

Rock and roll is here to <em>stay</em>
Rock and roll is here to stay

<strong>
Sirve para dar un enfasis mayor. El navegador representará el texto con negrita, si no se indica lo contrario.

Rock and roll is here to <strong>stay</strong>
Rock and roll is here to stay

<tt>
Representa como texto de teletipo o ancho fijo, similar al de una máquina de escribir.

El hipertexto es la <tt>escritura multimedia</tt>.
El hipertexto es la escritura multimedia.

<acronym>
Sirve para identificar un acrónimo.
<acronym title="HyperText Markup Language">HTML</acronym>
HTML

<code>
Sirve para designar un fragmento de código de ordenador.

Un enlace se crea escribiendo <code>&lt;a href="..."></code>.

Un enlace se crea escribiendo <a href="...">.

<del>
Sirve para marcar secciones del documento que han sido borradas con respecto a otra versión del documento.

Rock and roll is here to <del title="No seamos derrotistas"> stay</del>

Rock and roll is here to die stay

Caracteres especiales: Existen unos caracteres especiales del lenguaje HTML que se refieren a las vocales acentuadas, la letra "ñ", y al uso de símbolos que significan algo en HTML, como el de menor que (<) o el signo inglés de "and" (&).

* < (Menor que): &lt;
* > (Mayor que): &gt;
* & (símbolo de and): &amp;
* " (comillas dobles): &quot;
* á: &aacute;
* é: &eacute;
* í: &iacute;
* ó: &oacute;
* ú: &uacute;
* ü: &uuml;
*ñ: &ntilde;
*¿: &iquest;


LISTAS

Listas sin orden:
<ul>
<li title="Blogia">Blogia</li>
<li>Blogger</li>
<li>Blogthing</li>
</ul>


  • Blogia

  • Blogger

  • Blogthing


Listas ordenadas:
<ol>
<li title="Blogia">Blogia</li>
<li>Blogger</li>
<li>Blogthing</li>
</ol>


  1. Blogia

  2. Blogger

  3. Blogthing



Listas de definiciones:
Consiste en un término (dt) y su definición (dd).

<dt>Término:</dt>
<dd>Definición del término.</dd>
</dl>


Término:

Definición del término.



Comentarios:
Son aclaraciones que no aparecen en la presentación final del documento. Se encierran entre los símbolos <!-- comentario -->


ENLACES

Enlace a otra página

<a href="http://www.blogpocket.com/">Visita blogpocket.com</a>
Visita blogpocket.com

Enlace dentro de la misma página

<a href="#ejemplomarcador">Ejemplo del enlace en una página o marcador </a>

Y en el sitio a donde se quiere saltar, se debe poner:
<a name="ejemplomarcador">Enlace dentro de una página</a>


IMAGENES
Para incluir una imagen en el documento:

<img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines">
Bloglines

Las imágenes pueden estar en el propio servidor, o en uno ajeno.

alt="texto" sirve para proponer un texto alternativo a una imagen. Este texto aparecerá cuando se esté usando un programa sin capacidades gráficas (Lynx). Conviene utilizarlo cuando las imágenes sirven como enlaces.

Una imagen que enlaza:
<a href="http://www.bloglines.com"><img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines"></a>

Bloglines


MARCOS
Sirve para insertar un marco dentro de un bloque de texto. Permite insertar un documento HTML en medio de otro.

<iframe src="http://www.bloglines.com/blog/Juglar" width="350" height="350" scrolling="auto" frameborder="1">
[Su agente de usuario no soporta marcos o está actualmente configurado para no mostrar marcos. Sin embargo, puede visitar
<a href="http://www.bloglines.com/blog/Juglar">el documento relacionado.</a>]
</iframe>




Ref:
Plantilla de XHTML Maestra
mailxmail.com
Who Links Here