HTML Language
HTML é a linguagem de marcação padrão para criar páginas da Web.
HTML significa Hyper Text Markup Language
HTML descreve a estrutura das páginas da Web usando marcação
Elementos HTML são os blocos de construção de páginas HTML
Elementos HTML são representados por tags
Tags de HTML marcam partes de conteúdo, como "título", "parágrafo", "tabela" e assim por diante
Os navegadores não exibem as tags HTML, mas as usam para renderizar o conteúdo da página
Exemplo explicado Tags
A !DOCTYPE html declaração define este documento como HTML5
Esta declaração representa o tipo de documento e ajuda os navegadores a exibir páginas da web corretamente.
Ele deve aparecer apenas uma vez, no topo da página (antes de qualquer tag HTML).
O html elemento é o elemento raiz de uma página HTML
O head elemento contém informações meta sobre o documento
O title elemento especifica um título para o documento d
Declarado dentro de head - é importante para indexacao em aplicativos de busca
O body elemento contém o conteúdo da página visível
O h1 elemento define um cabeçalho grande
O p elemento define um parágrafo
- Fonte: www.w3schools.com
VOLTAR
Tags de comentário são usadas para inserir comentários no código-fonte HTML.
Tags de Comentário em HTML
Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe:
!-- Write your comments here -->
Observe que há um ponto de exclamação (!) Na tag de abertura, mas não na tag de fechamento.
Nota: Os comentários não são exibidos pelo navegador, mas podem ajudar a documentar seu código-fonte HTML.
VOLTAR
O elemento -head> HTML
O -head>elemento é um contêiner para metadados (dados sobre dados) e é colocado entre a -html>tag e a -body>tag.
Metadados HTML são dados sobre o documento HTML. Metadados não são exibidos.
Os metadados geralmente definem o título do documento, conjunto de caracteres, estilos,
links, scripts e outras informações meta.
As seguintes tags descrevem metadados: -title>, -style>, -meta>, -link>, -script>, e -base>.
O elemento HTML -title>
O -title>elemento define o título do documento e é obrigatório em todos os documentos HTML / XHTML.
O -title>elemento:
define um título na guia do navegador
fornece um título para a página quando ela é adicionada aos favoritos
exibe um título para a página nos resultados do mecanismo de pesquisa
Um documento HTML simples:
O elemento HTML -style>
O -style>elemento é usado para definir informações de estilo para uma única página HTML:
Exemplo
-style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
-/style>
O elemento HTML -link>
O -link>elemento é usado para vincular a folhas de estilo externas:
Exemplo
-link rel="stylesheet" href="mystyle.css">
O elemento -meta> HTML
O -meta>elemento é usado para especificar qual conjunto de caracteres é usado,
descrição da página, palavras-chave, autor e outros metadados.
Os metadados são usados ??pelos navegadores (como exibir conteúdo),
pelos mecanismos de pesquisa (palavras-chave) e por outros serviços da Web.
Defina o conjunto de caracteres usado:
-meta charset="UTF-8">
Defina uma descrição da sua página da web:
-meta name="description" content="Free Web tutorials">
Defina palavras-chave para os mecanismos de pesquisa:
-meta name="keywords" content="HTML, CSS, XML, JavaScript">
Defina o autor de uma página:
-meta name="author" content="John Doe">
Atualizar documento a cada 30 segundos:
-meta http-equiv="refresh" content="30">
Exemplo de tags:
-meta charset="UTF-8">
-meta name="description" content="Free Web tutorials">
-meta name="keywords" content="HTML,CSS,XML,JavaScript">
-meta name="author" content="John Doe">
VOLTAR
Use o atributo "style" para estilizar elementos HTML
I am normal
background-color:powderblue - Cor de fundo
Use color para cores de texto
color:blue; -This is a blue paragraph
color:red; -This is a red paragraph.
Use font-family para fontes de texto
font-family:verdana; - This is a verdana.
font-family:courier; - This is a courier.
font-size:200%; - Use font-size para tamanhos de texto -
ou em pixels - font-size:40px; - I am big
text-align:center; - Use text-align para alinhamento de texto
VOLTAR
O HTML também define elementos especiais para definir o texto com um significado especial .
O HTML usa elementos como e para formatação de saída, como texto em negrito ou itálico .
Elementos de formatação foram projetados para exibir tipos especiais de texto:
- texto em <b>negrito</b>
- texto <strong>importante</strong>
- texto em <i>itálico</i>
- texto <em>enfatizado</em>
- texto <mark> marcado</mark>
- pequeno <small>texto</small>
- texto <del>excluído</del>
- texto <ins>inserido</ins>
- texto <sub>subscrito</sub>
- texto <sup>sobrescrito</sup>
VOLTAR
A Cotacao curta pelo uso da tag <q> - coloca texto entre aspas
WWF's goal is to: Build a future where people live in harmony with nature.
A tag <abbr> contrai texto substituindo pela abreviacao World Health Organization por exemplo
The WHO was founded in 1948.
A tag <address> destaca texto para detalhar enderecos
Written by John Doe.Visit us at:
Example.com
Box 564, Disneyland
USA
A tag <cite> destaca texto para citacoes - geralmente italico
Como em: 'The Scream' by Edvard Munch. Painted in 1893.
O HTML usa a tag <bdo> para substituição bidirecional
O bdo elemento é usado para substituir a direção do texto atual:
Exemplo: This text will be written from right to left
Ficaria: This text will be written from right to left
VOLTAR
Valores de cores CSS Com o CSS, as cores podem ser especificadas de diferentes maneiras: Por nomes de cores - Como valores RGB - Como valores hexadecimais - Como valores de HSL (CSS3) - Como valores HWB (CSS4) Nomes de cores suportados por todos os navegadores Todos os navegadores modernos suportam os 140 nomes de cores a seguir (clique no nome de uma cor ou em um valor hexadecimal para exibir a cor como a cor de segundo plano junto com cores de texto diferentes): Cores RGB Valores de cores RGB são suportados em todos os navegadores. Um valor de cor RGB é especificado com: rgb ( RED , GREEN , BLUE ). Cada parâmetro define a intensidade da cor como um inteiro entre 0 e 255. Por exemplo, rgb (0,0,255) é renderizado como azul, porque o parâmetro blue é definido como seu valor mais alto (255) e os outros são definidos como 0. Como valores hexadecimais Cores hexadecimais Valores de cor hexadecimais também são suportados em todos os navegadores. Uma cor hexadecimal é especificada com: # RR GG BB . RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais entre 00 e FF especificando a intensidade da cor. Por exemplo, # 0000FF é exibido como azul, porque o componente azul é definido como seu valor mais alto (FF) e os outros são definidos como 00. RnnGnnBnn nn variam de 00 a 99 e de AA aFF #FF000
Clique aqui para lista de cores
VOLTAR
Links HTML - hiperlinks Links HTML são hiperlinks. Você pode clicar em um link e pular para outro documento. Quando você move o mouse sobre um link, a seta do mouse se transformará em uma pequena mão. Nota: Um link não precisa ser texto. Pode ser uma imagem ou qualquer outro elemento HTML. Links HTML - Sintaxe Em HTML, os links são definidos com a tag: link text O href atributo especifica o endereço de destino ( https://www.w3schools.com/html/ ) do link. Visit our HTML tutorial O texto do link é a parte visível (Visite nosso tutorial em HTML). Clicar no texto do link enviará você para o endereço especificado. Nota: Sem uma barra invertida no final dos endereços da subpasta, você pode gerar duas solicitações para o servidor. Muitos servidores adicionam automaticamente uma barra ao final do endereço e criam uma nova solicitação. Links Locais Um link local (link para o mesmo site) é especificado com um URL relativo (sem http: // www ....). EXEMPLO HTML Images Cores do link HTML Por padrão, um link aparecerá assim (em todos os navegadores): Um link não visitado é sublinhado e azul Um link visitado é sublinhado e roxo Um link ativo está sublinhado e vermelho Você pode alterar as cores padrão, usando CSS: Links HTML - O Atributo de Destino O target atributo especifica onde abrir o documento vinculado. O atributo de destino pode ter um dos seguintes valores: _blank - abre o documento vinculado em uma nova janela ou guia _self - Abre o documento vinculado na mesma janela / guia quando foi clicado (esse é o padrão) _parent - Abre o documento vinculado no quadro pai _top - Abre o documento vinculado em todo o corpo da janela nome do quadro - abre o documento vinculado em um quadro nomeado a href="https://www.w3schools.com/" target="_blank">Visit W3Schools! /a Dica: se sua página da Web estiver bloqueada em um quadro, você poderá usá-la target="_top"para sair do quadro: a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial! /a Links HTML - imagem como link É comum usar imagens como links: a href="default.asp" img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;" Nota: border:0; é adicionado para evitar que o IE9 (e anterior) exiba uma borda ao redor da imagem (quando a imagem é um link). Títulos de links O titleatributo especifica informações extras sobre um elemento. A informação é mais frequentemente mostrada como um texto de dica de ferramenta quando o mouse se move sobre o elemento. Exemplo href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section" Visit our HTML Tutorial Links HTML - Crie um marcador Marcadores HTML são usados ??para permitir que os leitores pulem para partes específicas de uma página da Web. Marcadores podem ser úteis se sua página for muito longa. Para criar um marcador, você deve primeiro criar o marcador e, em seguida, adicionar um link a ele. Quando o link é clicado, a página rola para o local com o marcador. Exemplo Primeiro, crie um marcador com o id atributo: h2 id="C4">Chapter 4 /h2 Em seguida, adicione um link ao marcador ("Ir para o capítulo 4"), na mesma página: a href="#C4">Jump to Chapter 4 a Ou adicione um link ao marcador ("Ir para o capítulo 4"), em outra página: Exemplo a href="html_demo.html#C4">Jump to Chapter 4 a Caminhos Externos As páginas externas podem ser referenciadas com um URL completo ou com um caminho relativo à página da web atual. Este exemplo usa um URL completo para vincular a uma página da web: a href="https://www.w3schools.com/html/default.asp">HTML tutorial a Este exemplo vincula a uma página localizada na pasta html no site atual: a href="/html/default.asp">HTML tutorial Este exemplo vincula a uma página localizada na mesma pasta da página atual: a href="default.asp">HTML tutorial Caminho Descrição img src = "picture.jpg" picture.jpg está localizado na mesma pasta que a página atual img src = "images / picture.jpg" picture.jpg está localizado na pasta de imagens na pasta atual img src = "/ images / picture.jpg" picture.jpg está localizado na pasta de imagens na raiz da web atual img src = "../ picture.jpg" picture.jpg está localizado na pasta um nível acima da pasta atual Caminhos de arquivo HTML Um caminho de arquivo descreve a localização de um arquivo na estrutura de pastas de um site. Caminhos de arquivos são usados ??ao vincular a arquivos externos como: Paginas web Imagens Folhas de estilo JavaScripts Caminhos de arquivos absolutos Um caminho de arquivo absoluto é o URL completo para um arquivo da Internet: img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"
VOLTAR
Imagens HTML As imagens podem melhorar o design e a aparência de uma página da web. img src="pic_trulli.jpg" alt="Italian Trulli" Sintaxe de Imagens HTML Em HTML, as imagens são definidas com a img tag. A img tag está vazia, contém apenas atributos e não possui uma tag de fechamento. O srcatributo especifica o URL (endereço da web) da imagem: img src="url" O atributo alt O altatributo fornece um texto alternativo para uma imagem, se o usuário, por algum motivo, não puder visualizá-lo (devido à conexão lenta, a um erro no atributo src ou se o usuário usar um leitor de tela). O valor do altatributo deve descrever a imagem: Exemplo img src="img_chania.jpg" alt="Flowers in Chania" Se um navegador não conseguir encontrar uma imagem, exibirá o valor do alt atributo Tamanho da Imagem - Largura e Altura Você pode usar o style atributo para especificar a largura e a altura de uma imagem. Exemplo img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" Como alternativa, você pode usar os atributos widthe height: Exemplo img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" Os atributos widthe heightsempre definem a largura e a altura da imagem em pixels. Nota: especifique sempre a largura e a altura de uma imagem. Se largura e altura não forem especificadas, a página poderá piscar enquanto a imagem é carregada. Largura e Altura ou Estilo? Os width, height e style atributos são válidos em HTML5. No entanto, sugerimos usar o styleatributo. Impede que as folhas de estilos alterem o tamanho das imagens: img src="html5.gif" alt="HTML5 Icon" width="128" height="128" img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" Imagens em outra pasta Se não for especificado, o navegador espera encontrar a imagem na mesma pasta da página da web. No entanto, é comum armazenar imagens em uma subpasta. Você deve então incluir o nome da pasta no srcatributo: Exemplo img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" Imagens em outro servidor Alguns sites armazenam suas imagens em servidores de imagem. Na verdade, você pode acessar imagens de qualquer endereço da Web no mundo: Exemplo img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" Imagens animadas HTML permite GIFs animados: Exemplo img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;" Imagem como um link Para usar uma imagem como um link, coloque atag dentro da tag: Exemplo a href="default.asp" img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;" /a Nota: border:0; é adicionado para evitar que o IE9 (e anterior) exiba uma borda ao redor da imagem (quando a imagem é um link). Imagem flutuante Use a floatpropriedade CSS para deixar a imagem flutuar à direita ou à esquerda de um texto: Exemplo p img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;" The image will float to the right of the text. /p p img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;" The image will float to the left of the text. /p Dica: para saber mais sobre o CSS Float, leia nosso Tutorial Flutuante de CSS . Mapas de imagem A map tag define um mapa de imagem. Um mapa de imagem é uma imagem com áreas clicáveis. Na imagem abaixo, clique no computador, no telefone ou na xícara de café: img src="workplace.jpg" alt="Workplace" usemap="#workmap" map name="workmap" area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm" area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" /map O nameatributo da
VOLTAR
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
Tabela HTML - Adicionando preenchimento de célula
O preenchimento de célula especifica o espaço entre o conteúdo da célula e suas bordas.
Se você não especificar um preenchimento, as células da tabela serão exibidas sem preenchimento.
Para definir o preenchimento,(interfere altura na celula) use a padding propriedade CSS :
th, td {
padding: 15px;
}
ou na linha table style="width:100%;padding: 15px;"
alinhados à esquerda
Por padrão, os títulos das tabelas estão em negrito e centralizados.
Para alinhar à esquerda os títulos da tabela, use a text-alignpropriedade CSS :
Exemplo
th {
text-align: left;
}
Adicionando Espaçamento de Borda
Espaçamento de borda especifica o espaço entre as células.
Para definir o espaçamento de borda para uma tabela, use a border-spacing propriedade CSS :
Exemplo
table {
border-spacing: 5px;
}
Nota: Se a tabela tiver bordas recolhidas, border-spacingnão terá efeito.
Células que abrangem muitas colunas
Para fazer uma célula abranger mais de uma coluna, use o colspan atributo:
Exemplo
| Name | Telephone | |
|---|---|---|
| Billi Gatos | 55577854 | 55577855 |
| Name: | Billi Gatos |
|---|---|
| Telephone: | 55577854 |
| 55577855 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
Um estilo especial para uma tabela
Para definir um estilo especial para uma tabela especial, adicione um id atributo à tabela:
Exemplo table id="tab"
Agora você pode definir um estilo especial para esta tabela:
table#tab, th, td { border:1px solid black;width:80%;}
| Firstname | Lastname | Age |
|---|---|---|
| Eve | Jackson | 94 |
| Rob | Dickson | 64 |
Definindo parametros de tabela em classe ex: .tabtable
| Firstname | Lastname | Age |
|---|---|---|
| Guigo | Boy | 21 |
| Rique | Boy | 18 |
| Nina | Girl | 10 |
Tags de tabela HTML
Tag Description
table Defines a table
th Defines a header cell in a table
tr Defines a row in a table
td Defines a cell in a table
caption Defines a table caption
colgroup Specifies a group of one or more columns in a table for formatting
col Specifies column properties for each column within aelement
thead Groups the header content in a table
tbody Groups the body content in a table
tfoot Groups the footer content in a table<
VOLTAR
Listas de HTML
Listas de HTML Lista HTML não ordenada Uma lista não ordenada começa com atag. Cada item da lista começa com a
- tag. Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão: Exemplo
Lista HTML não ordenada - Escolher marcador de item de lista A list-style-typepropriedade CSS é usada para definir o estilo do marcador de item da lista:
- Coffee
- Tea
- Milk
Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked Exemplo - disco
Exemplo - círculo
- Coffee
- Tea
- Milk
Exemplo - square
- Coffee
- Tea
- Milk
Exemplo - nenhum
- Coffee
- Tea
- Milk
Lista HTML solicitada Uma lista ordenada começa com a
- Coffee
- Tea
- Milk
tag. Cada item da lista começa com a
- tag. Os itens da lista serão marcados com números por padrão: Exemplo
Lista HTML ordenada - O atributo de tipo O typeatributo da
- Coffee
- Tea
- Milk
tag define o tipo do marcador do item da lista: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Números:
Listas de Descrição HTML HTML também suporta listas de descrição. Uma lista de descrições é uma lista de termos, com uma descrição de cada termo. A
- Coffee
- Tea
- Milk
tag define a lista de descrições, a
- tag define o termo (nome) e a
- tag descreve cada termo: Exemplo
Listas HTML aninhadas A lista pode ser aninhada (listas dentro de listas): Exemplo
- Coffee
- - black hot drink
- Milk
- - white cold drink
Lista Horizontal com CSS Listas de HTML podem ser estilizadas de muitas maneiras diferentes com CSS. Uma maneira popular é estilizar uma lista horizontalmente, para criar um menu de navegação: Exemplo head style ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } /style /head body
- Coffee
- Tea
- Black tea
- Green tea
- Milk
/body /html Resumo do capítulo Use o
- a href="#home">Home /a
- a href="#news">News /a
- a href="#contact">Contact /a
- a href="#about">About /a
elemento HTML para definir uma lista não ordenada Use a list-style-typepropriedade CSS para definir o marcador de item de lista Use o
elemento HTML para definir uma lista ordenada Use o typeatributo HTML para definir o tipo de numeração Use o
- elemento HTML para definir um item da lista Use o
elemento HTML para definir uma lista de descrições Use o
- elemento HTML para definir o termo de descrição Use o
- elemento HTML para descrever o termo em uma lista de descrições Listas podem ser aninhadas dentro de listas Itens de lista podem conter outros elementos HTML Use a propriedade CSS float:leftou display:inlinepara exibir uma lista horizontalmente Tags da lista HTML Tag Description
Defines an unordered list
Defines an ordered list
- Defines a list item
Defines a description list
- Defines a term in a description list
- Describes the term in a description list -->
VOLTAR
>
VOLTAR
VOLTAR
VOLTAR
VOLTAR
'<'head'>'
'<'script type="text/javascript"'>'
var $Resp=prompt("Digite seu nome","NomeDefault");
if $Resp !==null && $Resp!="";
{
x="Seja Benvindo"+$Resp;
}
else;
{
x="Seja Benvindo"+NomeDefault;
}
'<'/scrip'>'
'<'/head'>'
'<'body'>'
'<'/body'>'
VOLTAR
'<'head'>'
'<'script type="text/javascript"'>'
var $Resp=prompt("Digite seu nome","NomeDefault");
if $Resp !==null && $Resp!="";
{
x="Seja Benvindo"+$Resp;
}
else;
{
x="Seja Benvindo"+NomeDefault;
}
'<'/scrip'>'
'<'/head'>'
'<'body'>'
'<'/body'>'
VOLTAR
VOLTAR
VOLTAR
onclick
onchange
onmousedown
onmouseup
onmouseenter
onmuoseleave
onfocus
onblur
onsubmit
VOLTAR
Color Name HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
DarkOrange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #DB7093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
RebeccaPurple #663399
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32