Francisco Javier López Torrijos
Analista Sistemas Informáticos de Gestión
Diseño y Desarrollo Web
Vamos a ver como dar formato al contenido de nuestra página web. Veremos distintas etiquetas que nos permiten cambiar el aspecto del contenido aquí podemos ver algunos ejemplos:
negrita enfatizado itálica
Después de estos pocos ejemplos veremos las etiquetas que nos permiten aplicar los distintos formatos que XHTML nos permite en las distintas secciones que derivan de esta, así como una explicación de las mismas
Vamos a ver aquí las etiquetas utilizadas para representar textos que utilizaremos para mostrar los títulos, subtítulos, ...
Es conveniente seguir un orden lógico de descendencia de las mismas, tal y como podríamos encontrar en cualquier libro, manual, etc. Estas etiquetas son de las denominadas de tipo bloque, lo que quiere decir que ocupan todo el espacio disponible en horizontal, no se pueden poner al lado de otro elemento (en otro tutorial veremos que utilizando estilos podremos cambiar esta y otras propiedades)
| Código | Resultado |
|---|---|
| <h1>Encabezado de nivel 1</h1> |
Encabezado de nivel 1 |
| <h2>Encabezado de nivel 2</h2> |
Encabezado de nivel 2 |
| <h3>Encabezado de nivel 3</h3> |
Encabezado de nivel 3 |
| <h4>Encabezado de nivel 4</h4> |
Encabezado de nivel 4 |
| <h5>Encabezado de nivel 5</h5> |
Encabezado de nivel 5 |
| <h6>Encabezado de nivel 6</h6> |
Encabezado de nivel 6 |
En esta sección veremos las etiquetas para formatear el texto con etiquetas de las denominadas en línea. Esto quiere decir que el texto al que afectan se situará en el punto de inserción, lo que viene a significar que podemos tener otros elementos en linea junto a estos. Al contrario de los elementos de bloques, que ocupan todo el espacio disponible en sentido horizontal.
| Uso | Resultado | Explicación |
|---|---|---|
| <abbr title="World Wide Web" lang="en-us">WWW</abbr> | WWW | Nos Mostrará el texto completo al poner el cursor sobre la abreviatura |
| <acronym title="World Wide Web Consortium" lang="en-us">W3C</acronym> | W3C | Acrónimo |
| <big>texto grande</big> | texto "big" | Define texto como "big" (grande) |
| <cite><q lang="es-es">esto es una cita literal"</q></cite> |
esto es una cita literal |
Utilizado para citar textos copiado literalmente, de un libro p.ej. la etiqueta <q>inserta las " en función del atributo lang |
| <code>texto como código </code> |
texto como código |
Utilizado para mostrar código de programación |
| <del>texto borrado</del> |
|
Ver texto como borrado (tachado) |
| <dfn>definición</dfn> | definición | Usado para especificar definiciones |
| <em>enfatizado</em> | enfatizado | Utilizado para enfatizar un texto |
| <i>Cursiva</i> | Cursiva | Texto en cursiva |
| <ins>texto insertado</ins> | texto insertado | Texto insertado (no subrayado) |
| <kbd>texto a introducir</kbd> | texto a introducir | Texto que debería introducir el usuario |
| <samp>texto de ejemplo</samp> | texto de ejemplo | Representa un texto que pretende ser un ejemplo de algo que se esta explicando |
| <small>texto pequeño</small> | texto small | Define texto como small (pequeño) |
| <strong>Negrita</strong> | Negrita | Texto en negrita |
| x<sup>2</sup> | x2 | Super índice |
| x<sub>2</sub> | x2 | Sub índice |
| <tt>texto teletipo</tt> | texto teletipo | Muestra texto simulando a la característica letra de teletipo |
Puedes encontrar una lista y definición [1] más completa en la web del W3C, tanto de estas etiquetas como de otras que veremos en otras secciones
Enlaces
[1] http://www.w3.org/TR/html4/index/elements.html