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><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): <
* > (Mayor que): >
* & (símbolo de and): &
* “ (comillas dobles): "
* á: á
* é: é
* í: í
* ó: ó
* ú: ú
* ü: ü
*ñ: ñ
*¿: ¿
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>
- Blogia
- Blogger
- 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>
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
Para que el enlace se abra en una nueva ventana:
<a href="http://www.blogpocket.com/" target="_blank">Visita blogpocket.com</a>
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">
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>
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>
Artículos relacionados
Opciones de discusión
Hay 1 comentario
Wow!
Como soy una semianalfabeta en esto, me encanta leerte y aprender cositas. Que las pueda poner en práctica, ya es distinto; imagínate que ni siquiera sé como entrar en la página de mi blog donde se pueden hacer esas virguerías. Pero me he propuesto ir aprendiendo, porque quiero hacer mi propia web, sólo que no he podido todavía. AH, no te he dado mi otro blog, el de mis pinturas, http://reinadegrillos.blogspot.com
en éste sí que he hecho alguna cosita, porque está más fácil entrar en la página de html.
Saludos cordiales.
Deja un comentario