Esto es una plantilla de contenido XHTML para la creación de nuevos documentos. Muestra los estilos disponibles y como se utilizan:
Esto es un ejemplo de encabezado (h1)
Esto es un ejemplo de encabezado (h2)
Esto es un ejemplo de encabezado (h3)
Esto es un párrafo (p) de texto normal: Phasellus facilisis gravida arcu. Quisque porttitor congue ipsum. Praesent augue odio, interdum non. Suspendisse gravida dapibus felis.
Párrafo (p) de texto normal y negrita: Quisque porttitor congue ipsum. Praesent augue odio, interdum non . Phasellus facilisis gravida arcu. Suspendisse gravida dapibus felis.
A continuación un separador entre las secciones de la página (elemento <p> con atributo class="separador"):
Esto es un párrafo (p) dentro de una sección: Phasellus facilisis gravida arcu. Quisque porttitor congue ipsum. Praesent augue odio, interdum non. Suspendisse gravida dapibus felis.
En cualquier parte del documento podemos alinear el texto o cualquier elemento englobándolo con un elemento <p> y asignándole las clases: izquierda, derecha, centrado o justificado:
Izquierda (class="izquierda")
Centro (class="centrado")
Derecha (class="derecha")
Justificado (class="justificado")
A continuación una lista de varios elementos:
- Elemento de texto de la lista.
- Elemento de texto de la lista.
- Subelemento de la lista.
- Subelemento de la lista.
- Elemento de texto de la lista.
- Elemento de texto de la lista.
Párrafo (p) de texto normal: Quisque porttitor congue ipsum. Praesent augue odio, interdum non.
Ejemplo de tabla con estilo particular para esquemas (table class="tablaEsquema"):
| Campo 1 | Campo 2 | Campo 3 | Campo 4 |
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
Ejemplo de un item dentro de la sección con una imágen integrada en el texto a la derecha. Tiene un pie en el que se indica un enlace para ampliar la información. Esto es un párrafo (p) de texto normal.
Para situar la imagen a la derecha crearemos un elemento p y le asignaremos la clase "imagenDerecha". Y dentro de dicho elemento añadiremos la imagen.
También existe otra clase para situar la imagen a la izquierda del texto: "imagenIzquierda".
Phasellus facilisis gravida arcu. Quisque porttitor congue ipsum. Praesent augue odio, interdum non. Suspendisse gravida dapibus felis.
Ejemplo de tabla con estilo particular para listados (table class="tablaListado"). Para las filas impares podemos asignar la clase "impar" al elemento <tr>.:
| Campo 1 | Campo 2 | Campo 3 | Campo 4 |
|---|---|---|---|
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
| asdfasda | asdfasf | asdfaf | asdfasfd |
Podemos añadir una imagen e indicar sus tamaños en los atributos width y height del elemento object.
Para alinearla podemos añadirla a un elemento <p> y utilizar las clases antes mencionadas: izquierda, derecha, centrado y justificado.
