Volver

Pequeña guía de HTML a través de ejemplos

Estilos de texto | Enlaces | Alineación, tamaños | Listas | Imágenes | Tablas | Miscelánea | Caracteres

Este documento pretende servir de guía para escribir HTML a mano. Para ello debe consultarse el código fuente de la página y compararlo con el aspecto que muestra el navegador.

Esta página tiene un fondo que es ../fondos/quodlibet.jpg

Estilos de texto



Encabezamiento H1

Encabezamiento H2

Encabezamiento H3

Encabezamiento H4

Encabezamiento H5

Encabezamiento H6

Texto en negrita

Texto en itálica

Texto en estilo máquina de escribir

Texto subrayado

Texto de colores: (Blanco) Rojo Verde Azul Cyan Magenta Amarillo Negro
Texto muy pequeño Texto pequeño Texto mediano Texto grande Texto XL Texto XXL

Enlaces

Este enlace lleva a un destino situado dentro de la página: ir abajo

Esto es un enlace a un destino relativo a la página actual: volver

Esto es un enlace a una URL absoluta: Google

En este lugar hay un destino al que puede apuntar algún enlace [ ]

Alineación, tamaños

Esta línea o párrafo está centrada . Esta línea o párrafo está centrada . Esta línea o párrafo está centrada. Esta línea o párrafo está centrada. Esta línea o párrafo está centrada. Esta línea o párrafo está centrada .

Esta línea o párrafo está alineada a la izquierda. Esta línea o párrafo está alineada a la izquierda. Esta línea o párrafo está alineada a la izquierda. Esta línea o párrafo está alineada a la izquierda. Esta línea o párrafo está alineada a la izquierda. Esta línea o párrafo está alineada a la izquierda.

Esta línea o párrafo está alineada a la derecha. Esta línea o párrafo está alineada a la derecha. Esta línea o párrafo está alineada a la derecha. Esta línea o párrafo está alineada a la derecha. Esta línea o párrafo está alineada a la derecha. Esta línea o párrafo está alineada a la derecha.

Esta línea o párrafo está justificada. Esta línea o párrafo está justificada . Esta línea o párrafo está justificada. Esta línea o párrafo está justificada. Esta línea o párrafo está justificada. Esta línea o párrafo está justificada.

Esto es texto pequeño

Esto es texto grande

Esto es un encabezamiento centrado de nivel 3

Esto es un encabezamiento alineado a la izquierda, de nivel 3

Esto es un encabezamiento alineado a la derecha, de nivel 3



Todo en esta división
debería estar alineado a la derecha
de la pantalla.




Una línea HR centrada y del 40%:


Listas



Lista con letras mayúsculas:
  1. primer elemento
  2. segundo elemento
  3. tercer elemento
  4. cuarto elemento


Lista con letras minúsculas:
  1. primer elemento
  2. segundo elemento
  3. tercer elemento
  4. cuarto elemento


Lista con números romanos en mayúsculas:
  1. primer elemento
  2. segundo elemento
  3. tercer elemento
  4. cuarto elemento


Lista con números romanos en minúsculas:
  1. primer elemento
  2. segundo elemento
  3. tercer elemento
  4. cuarto elemento

Imágenes


<-- Imagen a la izquierda



Imagen a la derecha -->

<--Imagen alineada con la parte de arriba del texto
<--Imagen centrada verticalmente con el texto
<--Imagen alineada con la parte baja del texto



Texto alternativo Esta imagen no existe pero se muestra un texto alternativo

Tablas


Tabla sencilla: este es el letrero de la tabla
Fila 1, Columna 1 Fila 1, Columna 2 Fila 1, Columna 3
Fila 2, Columna 1 Fila 2, Columna 2 Fila 2, Columna 3
Fila 3, Columna 1 Fila 3, Columna 2 Fila 3, Columna 3


Tabla sencilla (sin borde)
1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4

Esta tabla ocupa el 50 % del ancho de la ventana

Esta tabla ocupa el 100% del ancho de la ventana

Esta tabla tiene
 un ancho de 100 pixels


Tabla con alineaciones diversas
Encabezamiento a la izquierda Encabezamiento centrado Encabezamiento a la derecha
datos a la izquierda datos centrados datos a la derecha
datos a la izquierda datos centrados datos a la derecha


Tabla con ocupaciones múltiples de fila y columna
Encabezamiento 1 Encabezamiento 2 Encabezamiento 3 Encabezamiento 4
Esto ocupa dos filas Esto ocupa dos filas Esto ocupa una fila Esto ocupa una fila
Esto está centrado en el ancho de dos columnas

Miscelánea


  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento 

Con espacios irreductibles: A A A A A

Sin espacios irreductibles: AAAAA


Esto es un símbolo de copyright ©.

Esto es un símbolo de marca registrada ®.

Esto es un símbolo de patentado ™.

Caracteres

Ángulo abrir: < (&lt;)
Ángulo cerrar: > (&gt;)
Ampersand: & (&amp;)

Caracteres acentuados especiales

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 Æ Á Â À Å Ã Ä Ç Ð É Ê È Ë Í Î
2 Ì Ï Ñ Ó Ô Ò Ø Õ Ö Þ Ú Û Ù Ü Ý
3 æ á â à å ã ä ç ð é ê è ë í î
4 ì ï ñ ó ô ò ø õ ö þ ú û ù ü ý
5 ÿ ß

Asignación de caracteres acentuados especiales

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 AElig Aacute Acirc Agrave Aring Atilde Auml Ccedil ETH Eacute Ecirc Egrave Euml Iacute Icirc
2 Igrave Iuml Ntilde Oacute Ocirc Ograve Oslash Otilde Ouml THORN Uacute Ucirc Ugrave Uuml Yacute
3 aelig aacute acirc agrave aring atilde auml ccedil eth eacute ecirc egrave euml iacute icirc
4 igrave iuml ntilde oacute ocirc ograve oslash otilde ouml thorn uacute ucirc ugrave uuml yacute
5 yuml szlig


Caracteres adicionales

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬
­ 		® ¯
2 ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾
3 ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í
4 Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü
5 Ý Þ ß à á â ã ä å æ ç è é ê ë
6 ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú
7 û ü ý þ ÿ

Asignación de los caracteres adicionales

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 #161 #162 #163 #164 #165 #166 #167 #168 #169 #170 #171 #172 #173 #174 #175
2 #176 #177 #178 #179 #180 #181 #182 #183 #184 #185 #186 #187 #188 #189 #190
3 #191 #192 #193 #194 #195 #196 #197 #198 #199 #200 #201 #202 #203 #204 #205
4 #206 #207 #208 #209 #210 #211 #212 #213 #214 #215 #216 #217 #218 #219 #220
5 #221 #222 #223 #224 #225 #226 #227 #228 #229 #230 #231 #232 #233 #234 #235
6 #236 #237 #238 #239 #240 #241 #242 #243 #244 #245 #246 #247 #248 #249 #250
7 #251 #252 #253 #254 #255

En este lugar hay un destino llamado "abajo": [ ]
Este enlace lleva al principio de la página, a un destino llamado "arriba"

Páginas de prueba HTML 2.0 adicionales.

Páginas de prueba HTML 3.0 adicionales.