Comandos Básicos
- < HTML > ... < /HTML > : Indica el comienzo y fin de un archivo HTML
- < HEAD > ... < /HEAD > : Indica el comienzo y fin de un encabezado (aquí se coloca generalmente el título).
- < TITLE > ... < /TITLE > : Indica el título.
- < BODY > ... < /BODY > : Indica el comienzo y fin del cuerpo de la página.
- < P > ... < /P > : Indica comienzo y fin de un párrafo.
- < BR > : Permite saltarse una línea (se llama quiebre de línea).
- < Hn > ... < Hn > : Para n entre 1 y 6, hacen que el texto encerrado aparezca como encabezado (un subtítulo). Se recomienda usar sólo 1,2 y 3.
- Tipos de letras:
- < B > ... < /B > : Negrita.
- < L > ... < /L > : Cursiva.
- < BLINK > ... < /BLINK > : Parpadeante.
- < STRONG > ... < /STRONG > : Enfatizada.
- < UL > ... < /UL > : Indica comienzo y fin de una lista no ordenada (puntos). Dentro de ellos, cada item empieza por < LI > y termina al terminar la línea.
- < OL > ... < /OL > : Indica comienzo y fin de una lista
ordenada (números). Dentro de ellos, cada item empieza por
< LI > y termina al terminar la línea.
Ejemplo:
< OL > < LI > Primer item < LI > Segundo item < UL > < LI > Primer subitem < LI > Segundo subitem < /UL > < LI > Tercer item < /OL >Y esto se ve
- Primer item
- Segundo item
- Primer subitem
- Segundo subitem
- Tercer item
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
Formatos Físicos:
- Negrita: <B>…</B>
- Cursiva: <I>…</I>
- Subrayado: <U>…</U>
- Teletipo: <TT>…</TT>
- Tachado: <STRIKE>…</STRIKE>
- Grande: <BIG>…</BIG>
- Pequeña: <SMALL>…</SMALL>
- Superíndice: <SUP>…</SUP>
- Subíndice: <SUB>…</SUB>
Formatos Lógicos:
- Cita: <CITE>…</CITE>
- Código: <CODE>…</CODE>
- Definición: <DFN>…</DFN>
- Énfasis: <EM>…</EM>
- Grueso: <STRONG>…</STRONG>
- Palabras clave: <KEY>…</KEY>
- Ejemplos: <SAMP>…</SAMP>
- Usuario: <KBD>…</KBD>
- Variables: <VAR>…</VAR>
- Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de dentro)
- <B>…<I>…</I>…</B> (Correcto)
- <B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamañoLa etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
- á á
- é é
- í í
- ó ó
- ú ú
- à à
- ñ ñ
- < <
- > >
- & &
- ç ç
- " “
- espacio en blanco
LISTAS
<UL> ... </UL>
Lista numerada.<OL> ... </OL>
Lista no numerada.<LI> ... </LI>
Elementos de una lista.Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.
Gráficos
En HTML se pueden incluir gráficos en dos formatos: gif y jpg.
Estos formatos son conocidos por los browsers, por lo tanto no es
necesario un programa especial para verlos, y se ven directamente en la
página junto con el texto. Si se quisieran utilizar otros formatos,
se deben ocupar comandos externos al browser para hacerlo.
La sintaxis para la inclusión de gráficos es la siguiente:
< img src=archivo.{gif,jpg} Nombre del archivo
width= Ancho del archivo(en puntos
height= Altura del archivos (en puntos)
align= Alineación de la imagen y textos (ver más abajo)
border= Ancho del borde de la imagenListado de colores
A continuación le facilitamos todos los nombres de
los colores HTML, puede utilizarlos tanto en etiquetas HTML como en
declaraciones CSS.
Colores del sistema
| Etiqueta | Descripción | Muestra de color |
|---|---|---|
| ActiveBorder | Color del borde de la ventana activa. | |
| ActiveCaption | Color de fondo del título de la ventana activa. | |
| AppWorkspace | Color de fondo de múltiples aplicaciones (pero no todas). | |
| Background | Color de fondo del escritorio. | |
| ButtonFace | Color de fondo de los elementos 3D (botones, barras de desplazamiento, etc..). | |
| ButtonHighlight | Color resaltado de un elemento 3D. | |
| ButtonShadow | Color de la sombra de los elementos 3D. | |
| ButtonText | Color del texto de los elementos 3D. | |
| CaptionText | Color del texto del titulo de las aplicaciones. | |
| GrayText | Texto inactivo. | |
| Highlight | Color de fondo de un elemento seleccionado (texto, select, etc..). | |
| HighlightText | Color del texto de un elemento seleccionado. | |
| InactiveBorder | Color del borde de las ventanas inactivas. | |
| InactiveCaption | Color de fondo del titulo de las ventanas inactivas. | |
| InactiveCaptionText | Color del texto del titulo de las ventanas inactivas. | |
| InfoBackground | Color de fondo para elementos emergentes (tooltips). | |
| InfoText | Color del texto para elementos emergentes. | |
| Menu | Color de fondo de los menús. | |
| MenuText | Color del texto de los menús. | |
| Scrollbar | Color de fondo de las barras de desplazamiento. | |
| ThreeDDarkShadow | Color de la sombra oscura de los elementos 3D (lado donde no da la luz). | |
| ThreeDFace | Color principal para los elementos 3D. | |
| ThreeDHighlight | Color resaltado para los elementos 3D. | |
| ThreeDLightShadow | Color de la sombra clara (lado donde da la luz). | |
| ThreeDShadow | Color de la sombra de los elementos 3D. | |
| Window | Color de fondo de algunas aplicaciones y controles (selects, inputs, bloc de notas, etc..). | |
| WindowFrame | Color del borde de algunas aplicaciones y controles. | |
| WindowText | Color del texto de algunas aplicaciones y controles. |
Colores Rojos para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Rojo Indio | IndianRed | #CD5C5C | 205, 92, 205 | |
| Coral Suave | LightCoral | #F08080 | 240, 128, 128 | |
| Salmón | Salmon | #FA8072 | 250, 128, 114 | |
| Salmón oscuro | DarkSalmon | #E9967A | 233, 150, 122 | |
| Salmón Suave | LightSalmon | #FFA07A | 255, 160, 122 | |
| Carmesí | Crimson | #DC143C | 220, 20, 60 | |
| Rojo Puro | Red | #FF0000 | 255, 0, 0 | |
| Rojo Fuego | FireBrick | #B22222 | 178, 34, 34 | |
| Rojo Oscuro | DarkRed | #8B0000 | 139, 0, 0 |
Colores Rosas para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Rosa | Pink | #FFC0CB | 255, 192, 203 | |
| Rosa Suave | LightPink | #FFB6C1 | 255, 182, 193 | |
| Rosa Cálido | HotPink | #FF69B4 | 255, 105, 180 | |
| Rosa Profundo | DeepPink | #FF1493 | 255, 20, 147 | |
| Medio Violeta Rojo | MediumVioletRed | #C71585 | 199, 21, 133 | |
| Rosa Pastel | PaleVioletRed | #DB7093 | 219, 112, 147 |
Colores Naranjas para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Salmón Suave | LightSalmon | #FFA07A | 255, 160, 122 | |
| Naranja Coral | Coral | #FF7F50 | 255, 127, 80 | |
| Tomate | Tomato | #FF6347 | 255, 99, 71 | |
| Naranja Rojizo | OrangeRed | #FF4500 | 255, 69, 0 | |
| Naranja Oscuro | DarkOrange | #FF8C00 | 255, 140, 0 | |
| Naranja Puro | Orange | #FFA500 | 255, 165, 0 |
Colores Amarillos para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Amarillo Oro | Gold | #FFD700 | 255, 215, 0 | |
| Amarillo Puro | Yellow | #FFFF00 | 255, 255, 0 | |
| Amarillo Suave | LightYellow | #FFFFE0 | 255, 255, 224 | |
| Amarillo Limón | LemonChiffon | #FFFACD | 255, 250, 205 | |
| Amarillo Manzana Suave | LightGoldenrodYellow | #FAFAD2 | 250, 250, 210 | |
| Amarillo Papaya | PapayaWhip | #FFEFD5 | 255, 239, 213 | |
| Amarillo Mocasín | Moccasin | #FFE4B5 | 255, 228, 181 | |
| Amarillo Melocotón | PeachPuff | #FFDAB9 | 255, 218, 185 | |
| Amarillo Oro Pálido | PaleGoldenrod | #EEE8AA | 238, 232, 170 | |
| Amarillo Caqui | Khaki | #F0E68C | 240, 230, 140 | |
| Amarillo Caqui Oscuro | DarkKhaki | #BDB76B | 189, 183, 107 |
Colores Púrpuras para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Espliego | Lavender | #E6E6FA | 230, 230, 250 | |
| Cardo | Thistle | #D8BFD8 | 216, 191, 216 | |
| Ciruela | Plum | #DDA0DD | 221, 160, 221 | |
| Violeta | Violet | #EE82EE | 238, 130, 238 | |
| Orquídea | Orchid | #DA70D6 | 218, 112, 214 | |
| Fucsia | Fuchsia | #FF00FF | 255, 0, 255 | |
| Magenta | Magenta | #FF00FF | 255, 0, 255 | |
| Orquídea Medio | MediumOrchid | #BA55D3 | 186, 85, 211 | |
| Púrpura Medio | MediumPurple | #9370DB | 147, 112, 219 | |
| Amatista | Amethyst | #9966CC | 153, 102, 204 | |
| Azul Violeta | BlueViolet | #8A2BE2 | 138, 43, 226 | |
| Violeta Oscuro | DarkViolet | #9400D3 | 148, 0, 211 | |
| Orquídea Oscuro | DarkOrchid | #9932CC | 153, 50, 204 | |
| Magenta Oscuro | DarkMagenta | #8B008B | 139, 0, 139 | |
| Púrpura | Purple | #800080 | 128, 0, 128 | |
| Índigo | Indigo | #4B0082 | 75, 0, 130 | |
| Azul Pizarra | SlateBlue | #6A5ACD | 106, 90, 205 | |
| Azul Pizarra Medio | MediumSlateBlue | #7B68EE | 123, 104, 238 | |
| Azul Pizarra Oscuro | DarkSlateBlue | #483D8B | 72, 61, 139 |
Colores Verdes para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Verde Amarillento | GreenYellow | #ADFF2F | 173, 255, 47 | |
| Verde Cartujano | Chartreuse | #7FFF00 | 127, 255, 0 | |
| Verde Césped | LawnGreen | #7CFC00 | 124, 253, 0 | |
| Lima | Lime | #00FF00 | 0, 255, 0 | |
| Verde Lima | LimeGreen | #32CD32 | 50, 205, 50 | |
| Verde Pálido | PaleGreen | #98FB98 | 152, 251, 152 | |
| Verde Claro | LightGreen | #90EE90 | 144, 238, 144 | |
| Verde Primavera Medio | MediumSpringGreen | #00FA9A | 0, 250, 154 | |
| Verde Primavera | SpringGreen | #00FF7F | 0, 255, 127 | |
| Verde Mar Medio | MediumSeaGreen | #3CB371 | 60, 179, 113 | |
| Verde Mar | SeaGreen | #2E8B57 | 46, 139, 87 | |
| Verde Bosque | ForestGreen | #228B22 | 34, 139, 34 | |
| Verde | Green | #008000 | 0, 128, 0 | |
| Verde Oscuro | DarkGreen | #006400 | 0, 100, 0 | |
| Amarillo Verdoso | YellowGreen | #9ACD32 | 154, 205, 50 | |
| Verde Oliva | OliveDrab | #6B8E23 | 107, 142, 35 | |
| Oliva | Olive | #808000 | 128, 128, 0 | |
| Verde Oliva Oscuro | DarkOliveGreen | #556B2F | 85, 107, 47 | |
| Aguamarina Medio | MediumAquamarine | #66CDAA | 102, 205, 170 | |
| Verde Mar Oscuro | DarkSeaGreen | #8FBC8F | 143, 188, 143 | |
| Verde Mar Claro | LightSeaGreen | #20B2AA | 32, 178, 170 | |
| Cyan Oscuro | DarkCyan | #008B8B | 0, 139, 139 | |
| Carcel | Teal | #008080 | 0, 128, 128 |
Colores Azules para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Agua | Aqua | #00FFFF | 0, 255, 255 | |
| Cyan | Cyan | #00FFFF | 0, 255, 255 | |
| Cyan Suave | LightCyan | #E0FFFF | 224, 255, 255 | |
| Turquesa Pastel | PaleTurquoise | #AFEEEE | 175, 238, 238 | |
| Aguamarina | Aquamarine | #7FFFD4 | 127, 255, 212 | |
| Turquesa | Turquoise | #40E0D0 | 64, 224, 208 | |
| Turquesa Medio | MediumTurquoise | #48D1CC | 72, 209, 204 | |
| Turquesa Oscuro | DarkTurquoise | #00CED1 | 0, 206, 209 | |
| Azul Cadete | CadetBlue | #5F9EA0 | 95, 158, 160 | |
| Azul Acero | SteelBlue | #4682B4 | 70, 130, 180 | |
| Azul Acero Claro | LightSteelBlue | #B0C4DE | 176, 196, 222 | |
| Azul Pálido | PowderBlue | #B0E0E6 | 176, 224, 230 | |
| Azul Claro | LightBlue | #ADD8E6 | 173, 216, 230 | |
| Azul Cielo | SkyBlue | #87CEEB | 135, 206, 235 | |
| Azul Cielo Claro | LightSkyBlue | #87CEFA | 135, 206, 250 | |
| Azul Cielo Profundo | DeepSkyBlue | #00BFFF | 0, 191, 255 | |
| Azul Capota | DodgerBlue | #1E90FF | 30, 144, 255 | |
| Azul Añil | CornflowerBlue | #6495ED | 100, 149, 237 | |
| Azul Pizarra Medio | MediumSlateBlue | #7B68EE | 123, 104, 238 | |
| Azul Real | RoyalBlue | #4169E1 | 65, 105, 255 | |
| Azul | Blue | #0000FF | 0, 0, 255 | |
| Azul Medio | MediumBlue | #0000CD | 0, 0, 205 | |
| Azul Oscuro | DarkBlue | #00008B | 0, 0, 139 | |
| Azul Naval | Navy | #000080 | 0, 0, 128 | |
| Azul Media Noche | MidnightBlue | #191970 | 25, 25, 112 |
Colores Marrones para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Seda de Maiz | Cornsilk | #FFF8DC | 255, 248, 220 | |
| Almendra | BlanchedAlmond | #FFEBCD | 255, 235, 205 | |
| Bizcocho | Bisque | #FFE4C4 | 255, 228, 196 | |
| Marrón Navaja | NavajoWhite | #FFDEAD | 255, 222, 173 | |
| Marrón Trigo | Wheat | #F5DEB3 | 245, 222, 179 | |
| Madera Fuerte | BurlyWood | #DEB887 | 222, 184, 135 | |
| Marrón bronceado | Tan | #D2B48C | 210, 180, 140 | |
| Marrón Atractivo | RosyBrown | #BC8F8F | 188, 143, 143 | |
| Marrón Arenoso | SandyBrown | #F4A460 | 224, 164, 96 | |
| Vara de Oro | Goldenrod | #DAA520 | 218, 165, 32 | |
| Vara de Oro Oscura | DarkGoldenrod | #B8860B | 184, 134, 11 | |
| Marrón Perú | Peru | #CD853F | 205, 133, 63 | |
| Marrón Chocolate | Chocolate | #D2691E | 210, 105, 30 | |
| Marrón Silla | SaddleBrown | #8B4513 | 139, 69, 19 | |
| Marrón Siena | Sienna | #A0522D | 160, 82, 45 | |
| Marrón | Brown | #A52A2A | 165, 42, 42 | |
| Castaño | Maroon | #800000 | 128, 0, 0 |
Colores Blancos para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Blanco | White | #FFFFFF | 255, 255, 255 | |
| Blanco Nieve | Snow | #FFFAFA | 255, 250, 250 | |
| Miel Crema | Honeydew | #F0FFF0 | 240, 255, 240 | |
| Menta Crema | MintCream | #F5FFFA | 245, 255, 250 | |
| Azul Celeste | Azure | #F0FFFF | 240, 255, 255 | |
| Azul Alicia | AliceBlue | #F0F8FF | 240, 248, 255 | |
| Blanco Fantasma | GhostWhite | #F8F8FF | 248, 248, 255 | |
| Blanco Humo | WhiteSmoke | #F5F5F5 | 245, 245, 245 | |
| Concha de Mar | Seashell | #FFF5EE | 255, 245, 238 | |
| Beige | Beige | #F5F5DC | 245, 245, 220 | |
| Blanco Cordón Viejo | OldLace | #FDF5E6 | 253, 245, 230 | |
| Blanco Floral | FloralWhite | #FFFAF0 | 255, 250, 240 | |
| Blanco Marfil | Ivory | #FFFFF0 | 255, 255, 240 | |
| Blanco Antigüo | AntiqueWhite | #FAEBD7 | 250, 235, 215 | |
| Blanco Lino | Linen | #FAF0E6 | 250, 240, 230 | |
| Lavanda | LavenderBlush | #FFF0F5 | 255, 240, 245 | |
| Rosa Palo | MistyRose | #FFE4E1 | 255, 228, 225 |
Colores Grises para páginas web
| Color | Nombre castellano | Nombre web | Hexadecimal | RGB |
|---|---|---|---|---|
| Gainsboro | Gainsboro | #DCDCDC | 220, 220, 220 | |
| Gris Claro | LightGrey | #D3D3D3 | 211, 211, 211 | |
| Gris Plata | Silver | #C0C0C0 | 192, 192, 192 | |
| Gris Oscuro | DarkGray | #A9A9A9 | 169, 169, 169 | |
| Gris | Gray | #808080 | 128, 128, 128 | |
| Gris Ténue | DimGray | #696969 | 105, 105, 105 | |
| Gris Pizarra Claro | LightSlateGray | #778899 | 119, 136, 153 | |
| Gris Pizarra | SlateGray | #708090 | 112, 128, 144 | |
| Gris Pizarra Oscuro | DarkSlateGray | #2F4F4F | 47, 79, 79 | |
| Negro | Black | #000000 | 0, 0, 0 |
Fuentes:
https://www.cerotec.net/tabla-colores-web/
https://www.cdmon.com/es/tabla-colores
https://www.uv.es/cerveron/paginasweb/notashtml.html
