Upload
jessicasanchezmarin
View
35
Download
3
Embed Size (px)
Citation preview
Que es HTML
HTML, siglas de Hyper Text Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una
página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías
ligadas a la web, sobre todo en lo referente a su escritura e interpretación.
El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Normalmente los cambios son aplicados mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador no actualizado no será capaz de interpretar correctamente una página web escrita en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir problemas de visualización e incluso de interpretación de código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores aún mantienen la capacidad de interpretar páginas web de versiones HTML anteriores. Por estas razones, aún existen diferencias entre distintos navegadores y versiones al interpretar una misma página web.
Características del lenguaje HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
El Web tenía que ser hipertexto y debía ser fácil navegar por él. Tenía que ser compatible con todo tipo de ordenadores (PCs,
Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.
Que se necesita para crear una página en HTML
Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de diseñar un archivo .HTML, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuación les mostraremos las etiquetas más comunes que deben aprenderse para hacer una página Web.
Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:
Ejemplo: <HTML> <HEAD> <TITLE> Título de mi página de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera página </CENTER> </H1> <HR>
Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas interesantes.
<P> Aquí va un segundo párrafo. </BODY> </HTML>
Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número. Ejemplo: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4> <h5>Titulo quinto</h5> <h6>Titulo sexto</h6>
Quedaría mas o menos así: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto
5. Alineación de párrafo
Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea. Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes:
<p align="left"> Párrafo... </p> Alinea a la izquierda. <p align="center"> Párrafo... </p> Realiza un centrado. <p align="right"> Párrafo... </p> Alinea a la derecha. Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>. Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es <HR>
Etiquetas para darle formato al texto: Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color
Formato:
<B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma función que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con énfasis</EM> texto con énfasis <CITE>citación</CITE> citación <DFN>definición</DFN> definición <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamaño de los caracteres. Ejemplo:<font> texto... </FONT>. FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.
Ejemplo:
<FONT> texto…</FACE> Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML: 1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificación del nombre del color en ingles
Ejemplos:
<FONT COLOR="WHITE">Blanco</FONT> Blanco#FFFFFF <FONT COLOR="BLACK">Negro</FONT> Negro#000000 <FONT COLOR="RED">Rojo</FONT> Rojo
#FF0000 <FONT COLOR="GREEN">Verde</FONT> Verde#00FF00 <FONT COLOR="BLUE">Azul</FONT> Azul#0000FF <FONT COLOR="YELLOW">Amarillo</FONT> Amarillo
#FFFF00 <FONT COLOR="CYAN">Cyan</FONT> Cyan
#00FFFF <FONT COLOR="MAGENTA">Magenta</FONT> Magenta
#FF00FF
Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">
Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo:
<body background="/documentos/html/gifs/dragonball.gif">
Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.
Etiquetas META Son usadas para poner meta-información del documento. Esta "directiva" indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos.
Ejemplo:
<META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon"> Indica al visor el nombre de la página y sus contenidos principales. <META NAME="Author" content="Pablo Ravioli">
Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = "Información de Sailor Moon">
Indica al visor las palabras clave para los buscadores de Internet. Para hacer listas: Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).
Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). Ejemplos de diferentes tipos de listas:
Lista con números romanos:
<ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga <li type=I>Tomate </ol> Manzana Zanahoria Lechuga Tomate
Lista numerada:
<ol>
<li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> Manzana Zanahoria Lechuga Tomate
Lista con puntos:
<ul> <li> Manzana <li> Zanahoria <li> Lechuga <li>Tomate </ul> Manzana Zanahoria Lechuga Tomate
Lista con círculos:
<ul> <li type=circle> Manzana <li type=circle> Zanahoria <li type=circle> Lechuga <li type=circle> Tomate </ul> Manzana Zanahoria Lechuga Tomate
Lista con cuadrados:
<ul>
<li type=square> Manzana <li type=square> Zanahoria <li type=square> Lechuga <li type=square> Tomate
</ul> Manzana Zanahoria Lechuga Tomate
6. COMO INSERTAR UNA IMAGEN
A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG. La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo directorio en donde está la página y que la queremos insertar. La etiqueta apropiada sería: <IMG SRC="dragonball.gif">
Y el usuario verá en el browser:
Para poner la imagen en la izquierda escribir: <IMG ALIGN=LEFT SRC=" dragonball.gif "> A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif"> Y si se quiere poner la imagen en el centro: <P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>
Hiperenlaces, Hyperlinks, Anclas o Links Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Que se vería de esta forma: Pulse aquí para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif.
También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos envíe al buscador Altavista. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita.
Caracteres especiales Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso <. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación:
* < (Menor que): < * >(Mayor que): > * & (símbolo de and, o ampersand): & * " (comillas dobles): "
Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos poner <"hola">. El otro caso especial se da cuando en un texto HTML se quiere escribir una
eñe, por ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar
códigos como las que antes se presentaron para escribir ciertos símbolos
códigos comienzan siempre con el símbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carácter que queremos que se escriba. Los códigos necesarias en nuestro idioma son:
* á: á * é: é * í: í * ó: ó * ú: ú * Á: Á * É: É * Í: Í * Ó: Ó * Ú: Ú * ü: ü * Ü: Ü * ñ: ñ * Ñ: Ñ * ¿: ¿ * ¡: ¡ * ?: ? * !: !
Por lo tanto la palabra página la podríamos escribir como : página página Otro ejemplo: ¿En qué año estamos? Sería: ¿En qué año estamos? Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes códigos para representarlas. Recuerden que las etiquetas se pueden escribir en mayúsculas o en minúsculas, es lo mismo poner <HTML>, <html> o <HtmL>. Una vez que terminamos de escribir todo nuestro documento, lo guardamos poniéndole un nombre, y necesariamente lo debemos guardar con la extensión .HTM o .HTML. Para ir visualizando lo que hemos estado haciendo tendríamos que abrir nuestro browser (Netscape o Internet Explorer), hacemos click en la opción FILE o ARCHIVO, estando allí seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrirá nuestra página.
HTML5
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del
lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis
para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una
variante XHTMLconocida como sintaxis XHTML5 que deberá ser servida como
XML.1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.3
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se
recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de
todo el potencial que provee HTML5.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de
los sitios web modernos. Algunos de ellos son técnicamente similares a las
etiquetas <div> y <span>, pero tienen un significado semántico, como por
ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos
proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los
elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar
elementos 3D en los navegadores más importantes (Firefox, Chrome, Opera, Safari e
Internet Explorer).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos
puramente de presentación, como <font> y <center>, cuyos efectos son manejados
por Hojas de estilo en cascada. También hay un renovado énfasis en la importancia del
scripting DOM para el comportamiento de la web 2.0.
El espaciado en HTML
En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.
Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuación se detallará cada una de ellas.
<P> Cambio de párrafo :
Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá un espaciado de separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá para separar texto.
El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.
Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, por tanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No es necesario utilizar esta etiqueta ni antes ni después de cabeceras <Hn>, después de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni<DD>, que se utilizan para separar los distintos elementos de una lista.
<BR> Salto de línea :
Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampoco es necesaria la etiqueta de fin <BR>.
<CENTER> Centrado de texto e imágenes :
Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.
3.5. Espacios en blanco y nuevas líneasEl aspecto más sorprendente del lenguaje HTML cuando se desarrollan los
primeros documentos es el tratamiento especial de los "espacios en blanco" del
texto. HTML considera espacio en blanco a los espacios en blanco, los
tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).
El siguiente ejemplo ilustra este comportamiento:
<html>
<head><title>Ejemplo de etiqueta p</title></head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos
de
línea
y otro tipo de espaciado.</p>
</body>
</html>
Listas ordenadas
Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:
<OL></LI> Primera voz del menú</LI> Segunda voz del menú</LI> Tercera voz del menú</OL>
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul
indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un
nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un
elemento de una lista se generará de forma automática. Pero si queremos definir nosotros
mismo el símbolo del punto o marca a emplear, debemos indicarlo específicamente. En el
pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este
atributo se podía hacer que la lista estuviera definida por puntos negros (li type="disc"), por
puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a
continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
5.3.- Poner un color de fondo.
Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bg debackground ).
Para poner una imagen de fondo con HTML es necesario agregar el atributo background al tag <body> y hacer referencia a una imagen.
<html><body background="fondo.jpg">
<h3>Ejemplo de imagen de fondo</h3>
<p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro formato.</p>
<p>Si la imagen es más pequeña que la página, se repetirá en mozaico.>
</body></html>
URL del artículo: http://www.ejemplode.com/17-html/532-ejemplo_de_como_poner_imagen_de_fondo_en_html.htmlLeer completo: Cómo poner imagen de fondo en HTML
Nombredel color
ColorHexadecima
lColor RGB Color
IndianRed #CD5C5C 205,92,92
LightCoral #F08080 240,128,128
Salmon #FA8072 250,128,114
DarkSalmon #E9967A 233,150,122
LightSalmon #FFA07A 255,160,122
Crimson #DC143C 220,20,60
Red #FF0000 255,0,0
FireBrick #B22222 178,34,34
DarkRed #8B0000 139,0,0
Pink #FFC0CB 255,192,203
LightPink #FFB6C1 255,182,193
HotPink #FF69B4 255,105,180
DeepPink #FF1493 255,20,147
MediumVioletRed #C71585 199,21,133
PaleVioletRed #DB7093 219,112,147
LightSalmon #FFA07A 255,160,122
Coral #FF7F50 255,127,80
Tomato #FF6347 255,99,71
OrangeRed #FF4500 255,69,0
DarkOrange #FF8C00 255,140,0
Orange #FFA500 255,165,0
Gold #FFD700 255,215,0
Yellow #FFFF00 255,255,0
LightYellow #FFFFE0 255,255,224
LemonChiffon #FFFACD 255,250,205
LightGoldenrodYellow
#FAFAD2 250,250,210
PapayaWhip #FFEFD5 255,239,213
Moccasin #FFE4B5 255,228,181
PeachPuff #FFDAB9 255,218,185
PaleGoldenrod #EEE8AA 238,232,170
Khaki #F0E68C 240,230,140
DarkKhaki #BDB76B 189,183,107
Lavender #E6E6FA 230,230,250
Thistle #D8BFD8 216,191,216
Plum #DDA0DD 221,160,221
Violet #EE82EE 238,130,238
Orchid #DA70D6 218,112,214
Fuchsia #FF00FF 255,0,255
Magenta #FF00FF 255,0,255
MediumOrchid #BA55D3 186,85,211
MediumPurple #9370DB 147,112,219
BlueViolet #8A2BE2 138,43,226
DarkViolet #9400D3 148,0,211
DarkOrchid #9932CC 153,50,204
DarkMagenta #8B008B 139,0,139
Purple #800080 128,0,128
Indigo #4B0082 75,0,130
SlateBlue #6A5ACD 106,90,205
DarkSlateBlue #483D8B 72,61,139
GreenYellow #ADFF2F 173,255,47
Chartreuse #7FFF00 127,255,0
LawnGreen #7CFC00 124,252,0
Lime #00FF00 0,255,0
LimeGreen #32CD32 50,205,50
PaleGreen #98FB98 152,251,152
LightGreen #90EE90 144,238,144
MediumSpringGreen #00FA9A 0,250,154
SpringGreen #00FF7F 0,255,127
MediumSeaGreen #3CB371 60,179,113
SeaGreen #2E8B57 46,139,87
ForestGreen #228B22 34,139,34
Green #008000 0,128,0
DarkGreen #006400 0,100,00
YellowGreen #9ACD32 154,205,50
OliveDrab #6B8E23 107,142,35
Olive #808000 128,128,0
DarkOliveGreen #556B2F
MediumAquamarine #66CDAA 102,205,170
DarkSeaGreen #8FBC8F 143,188,143
LightSeaGreen #20B2AA 32,178,170
DarkCyan #008B8B 0,139,139
Teal #008080 0,128,128
Aqua #00FFFF 0,255,255
Cyan #00FFFF 0,255,255
LightCyan #E0FFFF 224,255,255
PaleTurquoise #AFEEEE 175,238,238
Aquamarine #7FFFD4 127,255,212
Turquoise #40E0D0 64,224,208
MediumTurquoise #48D1CC 72,209,204
DarkTurquoise #00CED1 0,206,209
CadetBlue #5F9EA0 95,158,160
SteelBlue #4682B4 70,130,180
LightSteelBlue #B0C4DE 176,196,222
PowderBlue #B0E0E6 176,224,230
LightBlue #ADD8E6 173,216,230
SkyBlue #87CEEB 135,206,235
LightSkyBlue #87CEFA 135,206,250
DeepSkyBlue #00BFFF 0,191,255
DodgerBlue #1E90FF 30,144,255
CornflowerBlue #6495ED 100,149,237
MediumSlateBlue #7B68EE 123,104,238
RoyalBlue #4169E1 65,105,225
Blue #0000FF 0,0,255
MediumBlue #0000CD 0,0,205
DarkBlue #00008B 0,0,139
Navy #000080 0,0,128
MidnightBlue #191970 25,25,112
Cornsilk #FFF8DC 255,248,220
BlanchedAlmond #FFEBCD 255,235,205
Bisque #FFE4C4 255,228,196
NavajoWhite #FFDEAD 255,222,173
Wheat #F5DEB3 245,222,179
BurlyWood #DEB887 222,184,135
Tan #D2B48C 210,180,140
RosyBrown #BC8F8F 188,143,143
SandyBrown #F4A460 244,164,96
Goldenrod #DAA520 218,165,32
DarkGoldenrod #B8860B 184,134,11
Peru #CD853F 205,133,63
Chocolate #D2691E 210,105,30
SaddleBrown #8B4513 139,69,19
Sienna #A0522D 160,82,45
Brown #A52A2A 165,42,42
Maroon #800000 128,0,0
White #FFFFFF 255,255,255
Snow #FFFAFA 255,250,250
Honeydew #F0FFF0 240,255,240
MintCream #F5FFFA 245,255,250
Azure #F0FFFF 240,255,255
AliceBlue #F0F8FF 240,248,255
GhostWhite #F8F8FF 248,248,255
WhiteSmoke #F5F5F5 245,245,245
Seashell #FFF5EE 255,245,238
Beige #F5F5DC 245,245,220
OldLace #FDF5E6 253,245,230
FloralWhite #FFFAF0 255,250,240
Ivory #FFFFF0 255,255,240
AntiqueWhite #FAEBD7 250,235,215
Linen #FAF0E6 250,240,230
LavenderBlush #FFF0F5 255,240,245
MistyRose #FFE4E1 255,228,225
Gainsboro #DCDCDC 220,220,220
LightGrey #D3D3D3 211,211,211
Silver #C0C0C0 192,192,192
DarkGray #A9A9A9 169,169,169
Gray #808080 128,128,128
DimGray #696969 105,105,105
LightSlateGray #778899 119,136,153
SlateGray #708090 112,128,144
DarkSlateGray #2F4F4F 47,79,79
Black #000000 0,0,0