Esta página tem o objetivo de ensinar as
noções básicas da linguagem HTML, pois para fazer uma Home Page vacê pode usar
programas que usam uma linguagem visual (como por exemplo, Front Page ou
PageMill), ou seja, você faz a formatação de sua página sem precisar saber
códigos.
O Que é HTML ???
HTML é a abreviatura de Hyper Text Markup
Language, que pode ser traduzida como Linguagem de Hipertexto Baseada em
Códigos. Define um conjunto de estilos como cabeçalhos, parágrafos, listas e
tabelas que compões uma página da WWW e serve para indicarmos formatações para
textos, inserir imagens e ligações de hipertexto.
Tags ou Diretivas.
A linguagem HTML
possui algumas regras de sintaxe que devemos seguir para obter o resultado
desejado.
Todo documento HTML apresenta elementos
entre parênteses angulares (<ELEMENTOS>), esses elementos são as etiquetas da linguagem HTML, que são os
comandos de formatação da linguagem. As etiquetas,
tags ou diretivas, tem sua correspondente etiqueta
de fechamento (<ETIQUETA> ... </ETIQUETA>). Isto é nescessário
porque as tags servem para definir a formatação de uma porção de texto, e assim
marca-se onde começa e onde termina o texto com formatação especificada por
ela. Alguns tags são chamados "vazios"
ou unidirecionais, pois não marcam uma região de texto, apenas inserem alguma
coisa no documento. As etiquetas
serão escritas em maiúsculas apenas para facilitar a visualização, pois você
pode misturar ou colocar tudo minúsculo que é igualmente aceito pelos
Browsers.
Como Editar as Páginas em HTML.
As páginas
desenvolvidas em HTML são arquivos simples e podem ser lidos e confeccionados
em qualquer editor de texto
(Microsoft Word, Word Pad, Edit do DOS, NotePad). Depois de editar os códigos e
textos é só gravar o arquivo mudando a extenção (ex.: .txt) para .html ou .htm.
A diferença entre
.htm e .html é que o .html é mais novo e são comandos melhores aceitos e .htm é
como se iniciou o html mais não mudou praticamente nada. Tanto faz você salvar
em qualquer uma das duas.
Então, basicamente, os arquivos HTML
possuem dois componentes:
1. O
texto propriamente dito;
2.
As tags que indicarão os elementos de página:
estrutura;
formatação; vínculos a outras
páginas.
Obs.: Para exibir o resultado do arquivo HTML não é
nescessário estar conectado à rede, basta acessar um Browser (Internet
Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo.
Formatação de Textos
Em uma página HTML podem existir textos,
imagens, itens multimídia e hipertexto. Para isso o documento HTML apresenta a
seguinte estrutura:
<HTML>
<HEAD>
<TITLE>Titulo do documento</TITLE>
</HEAD>
<BODY>
texto, imagem, links, etc...
</BODY>
</HTML>
Como o HTML não é uma linguagem de
programação, você nunca será avisado de erros cometidos na edição do seu
documento. Um simples esquecimento de uma barra pode mudar toda sua página.
Seções
•
<HTML> e
</HTML>:
Identifica o documento como
sendo HTML.
•
<HEAD> e
</HEAD>:
É o cabechalho e contém as
informações sobre o documento.
•
<TITLE> e
</TITLE>:
Define um título que é mostrado
no alto da janela do Browser. Todo documento WWW deve ter um título. Esse
título é referenciado em busca pela rede, dando uma identidade ao documento,
facilitando assim, a classificação em catalogos de busca.
•
<BODY> e
</BODY>:
Tudo que estiver na seção BODY será mostrado na janela do
browser e, consequentemente, apresentado ao leitor. Esta seção pode conter
cabeçalhos, parágrafor, listas, tabelas, imagens e links para outros
documentos. Dentro da tag <BODY> podemos usar as seguintes opções que não
são obrigatórias e caso não existam assumem o valor default:
BGCOLOR - especifica uma cor de
fundo para a página;
BACKGROUND - especifica a imagem
(.gif ou .jpg) usada no fundo da tela;
BGPROPERTIES = FIXED - fixa uma
imagem no fundo da tela;
TEXT - define uma cor para o
texto;
LINK - define uma cor para os
links;
VLINK - define uma cor para os links já
visitados; ALINK - define uma cor para o
link na hora que for ativado.
Por exemplo:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor
TEXT=nome_cor
LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Ou então, podemos usar o código equivalente
da cor em hexadecimal: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor
TEXT=#codigo_cor
LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor>
Não importa a seqüência dos atributos (BGCOLOR, LINK,
VLINK...) e sempre se coloca um espaço entre os atributos.
Formatação de Textos
Podemos formatar o texto mudando a fonte
do texto, a cor, colocando em itálico, negrito, sublinhado, fonte espaçada,
subscrito, etc. Para todas elas são nescessário delimitar o início e o fim do
texto a ser formatado.
•
<FONT
COLOR=nome_cor> texto </FONT>:
Muda a cor do texto que estiver
entre as tags início e fim.
•
<FONT
FACE=nome_letra> texto </FONT>:
Muda o tipo de letra do texto
que estiver entre as tags início e fim.
•
<FONT
SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>:
Muda o tamanho da letra do texto
que estiver entre as tags início e fim. O n da tag <Hn> pode variar de 1
(o maior) até 6 (o menor).
•
<B> texto
</B>:
Coloca o texto que estiver entre
as tags início e fim em negrito.
•
<I> texto
</I>:
Coloca o texto que estiver entre
as tags início e fim em itálico.
•
<TT> texto
</TT>:
Coloca o texto que estiver entre
as tags início e fim com fonte monoespaçada.
•
<U> texto
</U>:
Sublinha o texto que estiver
entre as tags início e fim. (Não é aconselhavel colocar o texto sublinhado,
pois os links já são sublinhados e pode confundir).
•
<SUP> texto
</SUP>:
Coloca o texto que estiver entre
as tags início e fim em sobscrito. <SUB> texto </SUB>:
Coloca o texto que estiver entre
as tags início e fim em subscrito.
•
<S> texto
</S>:
Taxa o texto que estiver entre as tags início e fim.
Ainda falando da disposição de texto na
tela, se desejarmos mudar de linha não basta usar o ENTER como em um editor de
textos, existem tags específicas para isso, além de outros recursos para alocar
um texto na página. São eles:
•
<CENTER> texto
</CENTER>:
Centraliza o texto em relação à
página.
•
<BR>:
Quebra de linha, inicia o texto
seguinte na linha logo abaixo.
•
<NOBR> texto
</NOBR>:
Faz com que o texto não tenha
quebras de linhas e crie uma barra de rolagem horizontal para poder ver o texto
inteiro.
•
<WBR>:
Coloca quebra de linhas no
comando <NOBR>.a quebra de linha vai ser
onde você colocou este comando.
•
<P>:
Força o fim de um parágrafo, ou seja, pula uma linha antes
de iniciar outro parágrafo.
Exite também um
comando de preformatação (<PRE> texto a ser
preformatado </PRE>), ele é usado para que o browser aceite seus
espaços grandes de uma letra para outra e o ENTER, Se você colocar a tag <PRE> do jeito que você digitar o texto será
exatamente como aparecerá no Browser.
Linhas horizontais são formas de deixar
sua página com mais facilidade de encontrar coisas e também mais apresentável.
Essas linhas são boas saídas para textos grandes em que os assuntos são
diversos.
<HR>:
Inclui uma linah horizontal no texto, separando-o em
blocos. Nesta tag podemos especificar:
•
WIDTH - nº % do comprimento ou o nº em pixel -
Ex.: <HR WIDTH=50%> ou <HR WIDTH=100>;
• SIZE
- espessura do traço - Ex.: <HR SIZE=5>.
Exemplo contendo os tags de formatação de texto:
<HTML>
<HEAD>
<TITLE>Exemplo das
tags</TITLE>
</HEAD>
<BODY BGCOLOR=White TEXT=Black>
<HR
WIDTH=80% SIZE=3> <PRE>
<CENTER>E
X E M
P L O</CENTER>
</PRE>
<HR WIDTH=80% SIZE=3> <P>
<H1>Tamanho1</H1> <BR>
<H2>Tamanho2</H2> <BR>
<H3>Tamanho3</H3> <BR>
<H4>Tamanho4</H4> <BR>
<H5>Tamanho5</H5> <BR>
<H6>Tamanho6</H6> <BR>
Texto1 - <FONT COLOR=Blue>Cor
Azul</FONT> <BR>
Texto2 - <FONT FACE="Times
New Roman">Fonte Times New Roman</FONT> <BR>
Texto3 - <B>Negrito</B> <BR>
Texto4 - <I>Itálico</I> <BR>
Texto5 - <TT>Monoespaçado</TT> <BR>
Texto6 - <U>Sublinhado</U> <BR>
Texto7 - <SUP>Sobscrito</SUP> <BR>
Texto8 - <SUB>Subscrito</SUB> <BR>
Texto9 -
<S>Taxado</S> <P>
</BODY>
</HTML>
Caracteres Especiais
Alguns caracteres especiais são tratados
de uma maneira diferente na Web, pelo fato de que nem todos os computadores
ligados à Internet estão configurados para visualizar os acentos. Existe uma
codificação que permite a qualquer equipamento interpretar os códigos e exibir
na tela o caracter desejado. Os
códigos funcionam da seguinte maneira:
•
Primeiro colocamos o caracter &;
•
Em seguida a letra que deverá ser
acentuada; Coloque
a acentuação desejada;
• Acrescente
o ";" (ponto e virgula).
Relacionamos abaixo alguns dos caracteres
e acentos da HTML:
Acentos
e Caracteres
|
Código
|
Agudo
|
&_acute;
|
Grave
|
&_grave;
|
Circunflexo
|
&_circ;
|
Til
|
&_tilde;
|
Trema
|
&_uml;
|
Cedilha
|
&_cedil;
|
&
|
&
|
<
|
<
|
>
|
>
|
©
|
©
|
"
|
"
|
(espaço em branco)
|
|
Âncoras e Links
Âncoras (Links)
Para inserir um
link, ou seja, uma ligação de uma região do texto (ou imagem) a um outro
documento é nescessário usar o tag <A>, da
seguinte forma:
<A
HREF="arq_dest"> âncora </A> onde arq_dest é o URL do
documento de destino, âncora é o texto ou imagem que servirá de ligação
hipertexto do documento sendo apresentado para o documento de destino.
Existem 3 caminhos para se
referir um documento de destino:
1.
Caminho relativo - Pode ser usado sempre que quiser
fazer referência a um documento que esteja no mesmo servidor do documento
atual. <A
HREF="apresentacaodalicao.html"></A>.
2. Caminho
Absoluto - Quando se quer fazer referência a um documento que esteja em outro
servidor.
<A
HREF="http://www.terravista.pt/ancora/3300"></A>.
3.
Ligação com trechos da mesma página - Desvia para o
local do trecho desejado na mesma página.
Colocarei
um exemplo, como se você quisesse voltar para o início dessa página:
o
Coloque o nome em algum local que você quer que
o link se dirija. Como esse comando colocado no início da página:
<A NAME="inicio"></A>.
o
Agora faça o link para essa âncora, como a
seguir: <A HREF="#inicio"></A>.
NOTA: Para você colocar o endereço de seu e-mail na sua
página você tem que colocar da seguinte forma:
<A
HREF="mailto:seu_e-mail"> seu_e-mail </A>
Imagens e
Animações
Imagens
Com relação de
uso de imagens na Web temos que estas se dividem em duas categorias gerais que
são as imagens in-line e as externas. As imagens in-line são apresentadas na página junto
com os vínculos e com o texto e são carregadas automaticamente. Já as imagens externas são carregadas somente por
demanda (download), através de vínculos.
Independente de
sua categoria, as imagens podem se apresentar em dois formatos:
.gif e .jpg.
•
GIF - Este padrão é mais conhecido e mais
compatível com os navegadores existentes. Recomendado para ícones com menos de
256 cores, cores lisas, puras, preto e branco. Sua qualidade é bem superior ao
formato JPG, pois o tamanho do arquivo é maior.Suas imagens podem ser
transparentizadas.
• JPG
ou JPEG - Foi o padrão proposto pelo comitê ISO e é geralmente usado para
imagens mais complexas (fotográficas). Permite alta taxa de compressão, por
isso gera um arquivo menor, o que implica numa perda de informação e qualidade.
O elemento IMG,
ou seja, a tag <IMG>, insere as imagens
que serão apresentadas junto ao texto. Um atributo SRC, que é o mais importante
dessa tag, deve estar presente da seguinte forma:
Se a imagem
estiver na mesma pasta que a sua página então a tag seria assim:
<IMG SRC="nome_imagem.extenção">
Se a imagem
estiver em uma pasta diferente da que sua página está, então você tem que
colocar o endereço desta pasta e depois o arquivo que contém a sua imagem.
Digamos que sua página esta na pasta "pagina" e a imagem (img.gif)
que você vai colocar esta na pasta "imagens" que esta dentro da pasta
"pagina", ou seja, essa imagem está dentro da pasta
"\imagens\img.gif". Então a tag seria:
<IMG SRC="imagens\img.gif">
DICA: Se você quiser colocar uma imagem
que está em outra página, basta clicar com o botão direito do mouse em cima da
imagem e seleciona o opção propriedades e copiar a endereço URL e colocar no
atributo SRC.
Juntamente com a tag <IMG> podemos
usar alguns parâmetros como:
•
BORDER - para determinar a moldura da
imagem;
• WIDTH
- para determinar a largura da imagem; HEIGHT
- para determinar a altura da imagem; ALIGN
- para alinhar as imagens de várias formas:
LEFT - alinha a imagem a
esquerda do texto;
RIGHT - alinha a imagem a
direita do texto;
TOP - alinha o texto com o topo
da imagem;
MIDDLE - alinha o texto com o
meio da imagem;
BOTTOM - alinah o texto com a parte inferior da
imagem.
• ALT
- quando a pessoa deixar o mouse sobre a imagem aparecerá o que você
escreveu.
Por exemplo:
<IMG
ALT="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left>
Uma imagem pode funcionar como vínculo,
incluindo-se a tag <IMG> entre as partes
de abertura e fechamento de uma tag de vínculo <A>.
Assim temos: <A HREF="arq.html"><IMG
SCR="img.gif"></A>
Para se projetar uma página deve-se
procurar um equilíbrio com relação a quantidade de imagens e cores e a
necessidade de transmissão de informações. O uso excessivo de imagens, imagens
grandes, poinéis de fundo tornará a página mais lenta ao ser carregada e o que,
em muitos casos, levará os usuários que tiverem uma conexão lenta de rede a
desistirem de carregar esta página. Para que isso não aconteça, verifique a
nexessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas
reutilize-as sempre que possível.
Animações
Com relação ao uso de mídias em HTML é
necessário a utilização de vínculos correspondente ao caminho URL do arquivo
externo que se deseja inserir em sua página.<A
REF="arq_ext">Arquivo</A>. Neste contexto entram os
arquivos de som e vídeo.
Som
O primeiro caso, o som, é
utilizado para transmitir informações que não sejam na forma de ilustração ou
palavras e até mesmo para desejar boas vindas ao usuário que acaba de carregar
aquela página. Esses arquivos geralmente possuem extenção .waw e .mid.
Agora vamos aos
comandos:
<EMBED>
<BGSOUND>
Como o comando <EMBED> não é aceito pelo IE 3.0 e alguns outros
browsers desconhecidos, você terá que colocar o comando duas vezes, um com o <EMBED> para o Netscape e <BGSOUND> para outros Browsers.
Esta tags pode conter os seguintes
parâmetros:
•
SRC - define o caminho para o arquivo de
som;
•
AUTOSTART - define que ao ser carregado ele já
deve ser tocado ou que o visitante deve clicar no play para tocar, TRUE para
tocar automaticamente e FALSE para quando o visitante apertar play.
•
AUTOLOAD - define que ele deve ser
automaticamente começado a baixar o arquivo de som quando entrar na página, ou
o visitante deve apertar o play para baixar o arquivo, TRUE para baixar
automaticamente e FALSE para quando o visitante apertar play.
•
LOOP - define o número de vez que a música será
tocada, TRUE para tocar infinitas vezes.
• HIDDEN
- define se você quer que o controle ficam sumidos ou não, TRUE para deixar
invisível e caso queira os controles não precisa colocar FALSE. WIDHT e HIGHT define o tamanho dos
controles.
Então os
comandos de sua página ficariam assim:
<EMBED SCR="musica.mid"
AUTOSTART="true" AUTOLOAD="true" LOOP="true"
HIDDEN="true">
<BGSOUND SCR="musica.mid" AUTOSTART="true"
AUTOLOAD="true" LOOP="true" HIDDEN="true">
Vídeo
Já os arquivos de vídeos fornecem
informações que as imagens estáticas não são capazes de transmitir. Suas
extensões são geralmente .mpg, .mov, .avi.
É interessante utilizar informações sobre o formato e o tamanho do arquivo de
mídia externo A tag <IMG> possui atributos que permitem a execução
in-line de arquivos de som e vídeo. O atributo DYNSRC (para IE) inclui arquivos
de vídeo: <IMG DYNSRC="arquivo.avi
SRC="arquivo.gif ALT="[a arquivo]">.
Letreiros
Em HTML é possível a criação de letriros,
ou seja, uma linha rolável que se moverá de um lado ao outro da página da Web.
Para que este efeito seja possível basta alocar o texto que se deseja
transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag
possui vários atributos:
Atributo
|
Utilização
|
BEHAVIOR
1. SCROOL
2. SLIPE
3. ALTERNATE
|
1.
Rola de um lado ao outro da tela e até
desaparecer.
2.
Rola o letreiro da direita para
esquerda e para.
3.
Faz o letreiro saltar de um lado da
tela para outro.
|
DIRECTION (somente se o letreiro
for
SCROOL)
|
1.
Move o letreiro da esquerda para
direita.
2.
Move o letreiro da direita para
|
1. LEFT
2. RIGHT
|
esquerda.
|
LOOP
|
Define o número de vezes que o letreiro ralará na tela.
|
SCROLLAMOUNT
|
Define o número de pixel para locação do letreiro.
|
SCROLLDELAY
|
Define o tempo da animação em milessegundos.
|
BGCOLOR
|
Define a cor de fundo da caixa que delimita o letreiro.
|
HEIGHT
|
Define a altura da caixa que delimita o letreiro.
|
WIDTH
|
Define a largura da caixa que delimita o letreiro.
|
HSPACE
|
Define o espaço entre as bordas esquerda e direita e o
texto.
|
VSPACE
|
Define o espaço entre as bordas
inferior e superior e o texto.
|
ALIGN
|
|
• TOP
• MIDDLE
•
BOTTOM
|
Define o alinhamento do letreiro com relação ao
texto.
|
Listas
As lista são utilizadas para organizar o
texto quando necessário uma relação de itens ordenados ou não. A HTML define 3
tipos de listas:
• Listas
Ordenadas ou Numeradas - essas listas são delimitadas pelas tags <OL>(inicializa uma lista) ... </OL>(finaliza uma lista) e cada item desta
lista começa com a tag <LI>(sem o
fechamento). São aquelas que possui um número. O atributo TYPE define o tipo de
numeração da lista. Assim, A (letras maiúsculas), a (letras minúsculas), I
(algarismos romanos) e 1 (números arábicos).
Exemplo:
Código
|
Saída no Browser
|
<OL>
<LI>item 1
<LI>item 2
</OL>
|
1. item 1
2.
item 2
|
• Lista
Não-Ordenadas ou com Marcadores - são aquelas que os itens são marcadores ou
outros símbolos. Estas listas são indicadas pelas tags </UL>
... </UL>. Os elementos dessa lista também
são separados por </LI>. Nesta lista o
atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk (marcador preenchido), square (quadrado), circle (marcador vazado).
Exemplo:
Código
|
Saída no Browser
|
<UL>
<LI>item 1
<LI>item 2
</UL>
|
o item 1 o item 2
|
• Listas
de Definição ou de Glosários - são aquelas em que cada item tem dois
componetes, um termo e uma definição. Estas listas são indicadas pelas tags <DL> ... </DL>.
As tags <DT> e <DD>,
unidirecionadas, respectivamente, indicam o termo a ser definido e a definição
desse mesmo termo.
Exemplo:
Código
|
Saída no Browser
|
<DL>
|
|
<DT>item 1
<DD>item 2
<DD>item 3
</DL>
|
item 1 item 2 item 3
|
Tabelas
As tabelas são usadas para organizar o
conteúdo de uma página, ou seja, imagens em linhas e colunas. Com tag <TABLE> conteúdo da tabela </TABLE>
indicamos que se trata de uma tabela.
•
<CAPTION> ...
</CAPTION> - para acrescentar um título na tabela.
•
<TR> ...
</TR> - para informar onde começa (<TR>)
e onde termina (</TR>) cada linha da
tabela.
• <TH> ... </TH> ou <TD> ... </TD>
- para identificar o início e o fim de cada célula. A diferença entre <TH> e <TD>
é que o conteudo da célula da tag <TH> é
escrita em negrito e centralizada.
Agora já podemosfazer uma tabela com
estes comandos, que ficaria assim:
Tabela
célula
1 célula 2 célula 3 célula 4
Os comandos da tabela acima seria
assim:
<TABLE>
<CAPTION> Tabela
</CAPTION>
<TR>
<TH> célula 1 </TH>
<TH> célula 2 </TH>
</TR>
<TR>
<TD> célula 3 </TD>
<TD> célula 4 </TD>
</TR>
</TABLE>
Atributos
para a tag <TABLE>:
•
BORDER - define a espessura da borda;
•
WIDTH - define a largura da tabela, pode ser
definida em % ou valor absoluto (com números);
•
ALIGN - alinhamento horizontal (Right, Center,
Left);
•
BGCOLOR - para alterar a cor de fundo;
•
BACKGROUND - permite colocar uma imagem no
fundo;
•
CELLSPACING - define o espaço existente entre as
células da tabela;
•
CELLPADDING - define o espaço existente entre as
bordas da célula e seu conteúdo;
• BORDERCOLOR
- usado para alterar a cor da borda.
Atributos para as tags <TD> e <TH>:
•
COLSPAN - especifica quantas colunas da tabela a
célula vai ocupar;
•
ROWSPAN - especifica quantas linhas da tabela a
célula vai ocupar;
•
WIDTH - define a largura de cada célula, pode
ser definida em % ou valor absoluto (com números);
•
HEIGHT - define a altura de cada célula, pode
ser definida em % ou valor absoluto (com números);
•
ALIGN - alinhamento horizontal (Right, Center,
Left);
• VALIGN
- alinhamento vertical (Top, Middle, Bottom);
BGCOLOR
- alterar a cor de fundo desse elemento.
Uma tabela usando alguns elementos destes
ficaria assim:
célula 1
|
|
célula 2
|
|
|
|
célula 3
|
célula 4
|
|
|
|
|
Códigos da
tabela acima;
<TABLE BORDER=1
BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2
CELLPADDING=10 ALIGN=center>
<TR>
<TD COLSPAN=2>célula
1</TD>
<TD ROWSPAN=2>célula
2</TD>
</TR>
<TR>
<TD>célula 3</TD>
<TD>célula 4</TD>
</TR>
</TABLE>
Frames
Os frames
permitem a divisão da tela em diferentes regiões onde pode-se apresentar
diferentes páginas. Isso possibilita, por exemplo, que se determine a área da
tela para ser a página principal e outras áreas para menus ou links.
A tag <FRAMESET>
cria um documento de definição de frames, que é onde será criado o layout de
cada frame e indicado o nome dos documentos que serão apresentados. Essa tag
substitui a tag <BODY> quando for
utilizada.
Deve-se definir
um dos dois atributos a tag <FRAMESET>
para se ter o layout desejado: COLS e ROWS.
Com o atributo
COLS indicamos quantas colunas teremos na página - <FRAMESET
COLS="lagura_coluna, largura_coluna, *"> (a largura podde
ser definida em porcentagem (%) ou em valor absoluto) - Assim, divide-se
quantos frames foram indicados e pelo * (asterístico), definimos que o frame
ocupará todo o espaço restante da tela.
O atributo ROWS
define quantas linhas a frame será dividida - <FRAMESET
ROWS="50%,
50%"> - definimos que a página será dividida em 2 frames
horizontais. O atributo SRC indica
qual página será chamada em cada frame criado e o atributo NAME atribui o nome
a esse frame.
Existem ainda outros atributos que estão
relacionados abaixo:
Atributos
|
Utilização
|
MARGINWIDTH
|
Determina as margens esquerda e direita do frame.
|
MARGINHIGHT
|
Determina as margens superior e inferior do frame.
|
SCROLLING = YES, NO ou AUTO
|
Configura a barra de rolagem, podendo aparecer ou não.
Pode ainda, aparecer somente quando o texto ultrapassar o tamanho da célula
(AUTO).
|
NORESIZE
|
Impede que as barras que delimitam os frames sejam
redimensionados.
|
O código de um
documento HTML contendo frames ficaria assim:
<HTML>
<HEAD>
<TITLE> Título da Página </TITLE>
</HEAD>
<FRAMESET COLS="200, *">
<FRAME SCR="página que ficará no 1ª frame"
NAME="nome do 1ª frame">
<FRAME SCR="página que ficará no 2ª frame"
NAME="nome do 2ª frame">
</FRAMESET>
</HTML>
A tag <NOFRAME>
... </NOFRAME> coloca o código que substituirá a página caso o
Browser não dê o suporte ao recurso de frames. Caso o Browser entenda frames,
tudo que estiver entre tag de abertura e fechamento <NOFRAME>
... </NOFRAME> será ignorado e o frame funcionará conforme
programado.
Exemplo:
<HTML>
<HEAD>
<TITLE> Título da Página </TITLE>
</HEAD>
<FRAMESET COLS="200, *">
<FRAME SCR="página que ficará no 1ª frame"
NAME="nome do 1ª frame">
<FRAME SCR="página que ficará no 2ª frame"
NAME="nome do 2ª frame">
<NOFRAMES>
<BODY>
Aqui fica sua
página sem frames para quem não consegue ver sua frames.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Além dos atributos já citados, temos também o TARGET. Quando iniciamos
um frame, geralmente colocamos um nome para que possa ser identificado. Para
acessar esse frame que colocamos nome, usamos TARGET, que define onde a página
deverá ser carregada. O atributo tem quatro valores que são:
•
TARGET="nome do frame" - carrega no
frame especificado;
•
TARGET="_top" - limpa a tela e abre o
arquivo que esta sendo chamado; TARGET="_blank"
- abre uma nova janela para exibir o documento;
• TARGET="_self"
- carrega o documento no mesmo frame que o chamou.
Exemplos:
<A
HREF="http://www.terravista.pt/ancora/3300"
TARGET="menuhtml">
<A
HREF="apresentacaodalicao.html" TARGET="_top">
Formulários
Os formulários em uma página
WEB permitem coletar informações das pessoas que visitam a página. através de
algumas diretivas especiais podemos definir as literais e o formato dos objetos
de resposta. Também definimos que será tomada assim que o formulário for
preenchido.
Para criar um
formulário faz-se necessário o uso da tag <FORM>
onde serão incluídos os elementos desse formulário. Essa tag contém dois
atributos: METHOD e ACTION.
1)
O atributo METHOD pode ter o valor GET ou POST, que
determina a maneira como os dados do formulário serão enviados para
processamento. A diferença entre os dois é a forma que cada um
"empacota" esses dados.
2)
O atributo ACTION é um ponteiro que indica o script que
processa as informações que se obtém apartir do formulário. Deve conter a URL
completa do programa que irá receber dados do formulário. Por exemplo http://www.uky.edu/cgibin/cgiwrap/~johnr/AnyForm.cgi.
Também tem o atributo TARGET que é
opcional e só é necessário quando se utiliza frames, ele indica onde aparecerá
a página de confirmação do formulário.
A tag <INPUT> indica um elemento de formulário simples
e possui dois atributos que são TYPE e NAME.
1) As opções que o atributo TYPE oferece
são:
•
TEXT
- para campos de entrada de texto; Exemplo:
• RADIO
- para botões de rádio; Exemplo:
•
CHECKBOX - para caixas de verificação; Exemplo:
• PASSWORD
- funciona da mesma forma que o atributo TEXT, exceto que todas as letras
digitadas aparecem como um asterístico (*). Exemplo:
2) O
atributo NAME, na maioria dos casos, define o nome do campo.
3) O
atributo VALUE (valor), neste caso, pode ser usado se você quiser, ele define
um valor prévio para cada campo, de tal forma que quando a página seja
carregada este valor já esteja preenchido podendo ser alterado pelo visitante.
4) O
atributo SIZE define o tamanho do campo e é definido no número de caracteres.
Se você quiser um campo de 40 caracteres, você deverá definir como SIZE=40. Mas
note que esse valor não limita o campo em 40 caracteres, ele define o tamanho
que ele será mostrado na página.
5) O
atributo MAXLENGHT (comprimento máximo) define o número máximo de caracteres
que podem ser digitados nos campos.
6) O
atributo CHECKED é usado para marcar as opções RADIO e CHECKBOX. Lembrando que
a opção RADIO só pode ter um selecionado.
Agora vamos ver alguns exemplos:
Botões de escolha
|
<INPUT
TYPE=Radio NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE=Radio
NAME=sexo VALUE=Fem>Feminino
|
Masculino Feminino
|
O atributo NAME, neste caso,
deve ser igual para todos os campos.
O atributo VALUE deve conter o valor deste campo, este será o valor
processado e repassado ao programa.<\TD>
|
Botões de checagem
|
Na sua casa
tem:<BR>
<INPUT
TYPE=Checkbox NAME=eletro1 VALUE=TV>Televisão<BR>
<INPUT TYPE=Checkbox
NAME=eletro2 VALUE=Radio>Rádio<BR>
<INPUT TYPE=Checkbox
NAME=eletro3 VALUE=Vidio>Vídeo Cassete<BR>
|
Na sua casa tem:
Televisão
Rádio
Vídeo Cassete
|
O atributo NAME, neste caso, deve ser diferente para cada campo.
O atributo VALUE deve conter o valor deste campo, este será o valor
processado e repassado ao programa.<\TD>
|
A tag <SELECT>
... <SELECT> permite que você defina uma lista de opções para a
seleção do visitante. O atributo NAME define o nome desta lista e SIZE define
quantos elementos irão aparecer na tela. Caso ele seja omitido, somente uma
opção aparece de cada vez. Cada opção da lista recebe uma tag <OPTION>, e o atributo VALUE deste elemento irá
definir o valor de cada opção, que será a informação fornecida ao programa de
acordo com a seleção feita.
Agora vamos ver um exemplo:
Seleção
Qual o estado que você mora ???<BR>
<SELECT
NAME=estado>
<OPTION VALUE=SP>SP
<OPTION VALUE=RJ>RJ
<OPTION VALUE=MG>MG
<OPTION
VALUE=Outro>Outro </SELECT>
Qual o estado que você mora ???
SP
Se você colocar SIZE=2 então fica assim:
Qual o estado que você mora ???
SP
RJ
As tags <TEXTAREA>
... <TEXTAREA> (área de texto) permite definir um campo de texto
com várias linhas. O atributo ROWS e COLUMNS definem o tamanho da área em que o
visitante vai escrever, ROWS define o número de linhas da caixa de texto e
COLUMNS o número de colunas, e o atributo COLS define quantos caracteres cada
linha possui. O atributo NAME define o nome da caixa de texto. Se você incluir
o atributo WRAP=hard a sua caixa de texto não ira possuir uma barra de scroll
horizontal.
Agora vamos ver um exemplo:
Caixa
de Texto
Envio e limpeza de dados:
<INPUT
TYPE=Reset Value=...>
O valor RESET no atributo TYPE define um
botão que limpa todos os campos, colocando os mesmos valores de quando a página
foi carregada. No atributo VALUE pode-se definir o que estará escrito no botão,
por exemplo, "Limpar". Caso nenhum valor seja definido aparecerá
"Reset".
<INPUT
TYPE=Submit NAME=... Value=...>
O valor SUBMIT (submeter) no atributo
TYPE define um botão de envio de informações, ou seja, um botão que ao ser
acionado executa o programa associado ao formulário (aquele que foi definido em
ACTION no tag FORM), passando para ele os dados preenchidos. Assim como no tipo
RESET, o atributo VALUE define o que estará escrito no botão. O NAME é opcional.
<INPUT
TYPE=Image NAME=... SRC=... ALT=...>
Uma outra alternativa para o
tipo SUBMIT seria o uso de uma imagem em seu lugar. Para isso, existe o tipo
IMAGE. Neste caso, passam a existir os atributos SRC e ALT normalmente usados
em elementos que definem uma imagem.
<INPUT
TYPE=Hidden NAME=... Value=...>
O valor HIDDEN (escondido) define dados
que devem ser passados ao programa, mas não devem aparecer para quem está vendo
a sua página. Neste caso, NAME identifica o dado e VALUE define o seu valor.
Para fazer um
formulário tem que ser usado o CGI gratuito
(ex.:http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi)
e este CGI precisa de alguns comandos:
•
AnyFormMode - deve ser preenchido com o valor
"MAIL";
• AnyFormDisplay
- pode ser preenchido com "SHORT", "STANDARD", com uma URL
(endereço) da página que será mostrada após os dados serem enviados ou com
"NONE";
•
AnyFormTo - deve conter o e-mail no qual sera
enviado as informações do formulário;
•
AnyFormFrom - deve conter o e-mail de quem está
preenchendo o formulário;
• AnyFormSubject
- deve conter o assunto do formulário para quando você receber o e-mail
contendo as informações preenchidas do formulario você identifica-la.
Alguns destes
elementos são normalmente definidos no elemento INPUT com o atributo TYPE e o
valor HIDDEN:
<INPUT TYPE=Hidden NAME=AnyFormTo
VALUE="maurinho@brazil.zzn.com">
Agora
vamos ver um exemplo completo de um formulário:
Código:
<B>Preencha o formulario e clique no botao
ok.:</B>
<P>
<FORM
ACTION="http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi"
METHOD="POST">
<INPUT TYPE="hidden"
NAME="AnyFormDisplay" VALUE=NONE>
<INPUT TYPE="hidden"
NAME="AnyFormMode" VALUE="mail">
<INPUT TYPE="hidden"
NAME="AnyFormSubject" VALUE="e-mails da minha HomePage">
<INPUT TYPE="hidden"
NAME="AnyFormTo" VALUE="maurinho@brazil.zzn.com">
<TABLE BORDER="0">
<TR>
<TD>Email.:</TD>
<TD><INPUT
TYPE="text" SIZE="40"
NAME="AnyFormFrom"></TD>
</TR><TR>
<TD>Nome.:</TD>
<TD><INPUT
TYPE="text" SIZE=35 NAME="Nome.:"></TD>
</TR><TR>
<TD>Idade.:</TD>
<TD><INPUT
TYPE="text" SIZE=3 NAME="Idade.:"></TD>
</TR><TR>
<TD>Sexo.: </TD>
<TD>
<INPUT TYPE="Radio"
NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE="Radio"
NAME=sexo VALUE=Fem>Feminino
</TD>
</TR><TR>
<TD>Cidade.:</TD>
<TD><INPUT
TYPE="text" SIZE=20 NAME="Cidade.:"></TD>
</TR><TR>
<TD>Estado.:</TD>
<TD>
<SELECT
NAME="estado">
<OPTION VALUE=SP>SP
<OPTION VALUE=RJ>RJ
<OPTION VALUE=MG>MG
<OPTION VALUE=Outro>Outro
</SELECT>
</TD>
</TR><TR>
<TD>País.:</TD>
<TD><INPUT
TYPE="text" SIZE=20 NAME="País.:"></TD>
</TR><TR>
<TD>Mensagem.:</TD>
<TD><TEXTAREA
NAME="Mensagem" ROWS="4"
COLS="35"></TEXTAREA></TD>
</TR><TR>
<TD></TD>
<TD><CENTER><INPUT
TYPE="image" SRC="ok.gif"></CENTER></TD>
</TABLE>
</FORM>
Agora veja como
ficou este formulário:
UpLoad
Depois que você
termina de fazer a sua página, você tem que coloca-la na internet, este
processo é chamado de UpLoad.
1) Primeiro você
vai precisar de um programa FTP (transferência de arquivos por protocolo).
O mais conhecido
é o WS_FTP LE 4.6. Você pode achar o
FTP Explorer mais fácil de usar, faça o DownLoad aqui.
2)
Depois de ter o programa, faça a inscrição em qualquer
site de hospedagem gratuito (ou pago). Um site de hospedagem gratuito bastante
conhecido é o http://www.terravista.pt/, ele é fácil de se cadastrar, pois é em
português.
3)
Depois de feita a inscrição você terá sua senha e seu
login. Abra o programa FTP Explorer, escolha a opção adicionar endereço (ADD),
coloque o endereço do FTP do provedor (neste caso ftp.terravista.pt) no HOST
ADDRESS, coloque o login e a senha. Essas são as configurações básicas, o resto
não iremos precisar.
4)
Clique em connect para conectar com o servidor e
automaticamente ele irá te mostrar a sua pasta no servidor com provavelmente um
página já no diretório. (Obs.: O arquivo da sua página principal tem que se
chamar index.html).
5)
Depois basta clicar em UpLoad e mandar os arquivos
desejados, no caso do FTP Explorer você clica na seta para cima e escolhe os
arquivos.
6)
Depois de colocar sua página na internet, teste as
páginas, os links e sa figuras para ver se estão todos certos, pode ser que no
seu computador seja tudo visualizado da forma que você quer, mas no provedor
mude, sempre que colocar mais arquivos no provedor teste a página novamente.
Serviços Grátis
na Internet
Incremente sua Página
Banners
Banners é onde você divulga
seu site sem pagar nada. É simples, eles lhe fornecem um código para colocar um
banner deles na sua página e então você lhes envia o seu banner (desenho que
tenha a propaganda de sua página) que eles colocam em outras páginas.
Tamanho de 468 x 60, Crédito de 2:1
|
|
É um bom sistema de banner, Crédito de 2:1
|
|
Em minha opinião é o melhor site de sistemas de banner.
160X50, 400X40, 468X60, 2:1
|
|
Mais famoso sistema nacional. 468X60, 2:1
|
|
Sistema novo, também com 468X60 - 2:1
|
|
Tamanho de 468 x 60,Crédito de 2:1
|
Contadores
Vários tipos de contadores para você escolher.
|
|
Rápido e prático, oferece vários tipos
e estatísticas.
|
|
Bom contador, envia relatório de visitas.
|
Bom sistema de contadores.
|
|
Peca pela qualidade da imagem do contador.
|
|
10 diferentes tipos de contador.
|
|
Hits ilimitados, relatórios das visitas.
|
|
Bom sistema de contador.
|
|
Contador bastante usado por Webmasters.
|
|
Excelente contador.
|
Exemplos prontos de
contadores, aqui você pode pegá-los diretamente e colocar na sua página, é só
você colocar o seu "nome ou apelido" no lugar do "username ou
codinome" do contador. Para
colocar um contador na sua página, siga os seguintes passos:
1. No
local de sua página onde você quer mostrar o contador, coloque por ex.: (
<IMG SRC="http://counter.conex.com.br/cgi-
bin/Count.cgi?df=codinome.dat|dd=A">
) substituindo "codinome" pelo seu nome. As letras minúsculas e
maiúsculas devem ser respeitadas;
2.
Depois de "Count.cgi?", você pode especificar
diversos parâmetros. Esses parâmetros devem ser separados pelo caracter |.
Veja logo abaixo o que cada parâmetro
faz:
•
ft = n - n é o tamanho da borda (1 a 5);
•
dd = A - A especifica o tipo de contador;
• df
= codinome - especifica o nome do arquivo em que ficará a contagem; md = n - n é o número de
dígitos do contador.
Freehost (Espaço)
Agora você não paga absolutamente nada
para garantir sua presença na Web! Confira abaixo alguns serviços de hospedagem
gratuita na Internet.
Um ponto forte deste serviço é que ele não exibe aquelas
telas "Splash" como a Geocities, além de contar com um vasto acervo
multimídia com milhares de images, gifs, fotos e sons. Hoje você tem direto a
espaço ILIMITADO.Mas tem uma barra enorme de propaganda no topo.
|
|
Serviço que oferece 11Mb, é um pouco mais lento que a
Xoom. Possui um assistente para criar a homepage On-Line e é uma ótima opção
para iniciantes.
|
|
Oferece 11Mb gratuitos e um e-mail. Como desvantagem a
Geocities é lenta (pela grande quantidade de usuários) e abusa das
propagandas com telas splash e um quadradinho que perseque o visitante para
onde quer que ele vá.
|
|
Serviço de host de Portugal que oferece 7Mb de espaço. É
fácil
|
|
|
de se cadastrar, pois ele é todo em português. É bom para
quem esta iniciando.
|
Oferece 5Mb e é ótimo para quem não entende nada de HTML
pois as páginas são geradas através de um assistente.Como desvantagem só
permite o Upload através do Browser (1 arquivo de cada vez) além de não
aceitar arquivos que não sejam HTML, CSS ou Imagens.Além disso as imagens são
transferidas automaticamente para o diretório images/ o que dificulta a vida
de quem constrói a página off-line.
|
|
Serviço de FREEhost com subdomínio
(http://seunome.hypermart.net). Oferece 10Mb de espaço em
disco, ilimitados e-mails aliases (...@seunome.hypermart.net), aceita CGIs e
também oferece a possibilidade de proteger diretórios por senha. É um pouco
lento e também abusa das propagandas exibindo uma tela splash que dá reload a
cada 2 minutos.
|
|
Serviço de free host que eferece 25 Mb de espaço, é ótimo
para quem não entende nada de HTML, tem um editor on-line.
|
|
Serviço de free-host com 25 MB.
|
Freemail (e-mail)
Estes são os principais
serviços de FreeMail do Brasil e do Mundo. Com eles você pode enviar e receber
e-mails incluindo anexos e com uma vantagem: Você pode checar seu e-mail de
qualquer computador conectado à Internet: é só acessar o site, digitar o login
e pronto!
O serviço de e-mail grátis mais conhecido do mundo,
oferece entre outras coisas um serviço de notícias no qual o usuário recebe
um e-mail avisando sobre as novidades do tema escolhido (tudo em inglês).
|
|
Serviço nacional que oferece uma conta grátis de e-mail
com a vantagem de estar num servidor seguro, garantido pelo protocolo SSL o
que garante privacidade total para suas mensagens mais secretas. Não é muito
bom para mandar arquivos.
|
|
Tão simples quanto o nome, nele você cria um e-mail e os
dados já ficam armazenados no seu computador, assim é só chegar lá e digitar
a senha que você já tem acesso aos seus e-mails.Vem com um serviço de
notícias por e-mail e também um software que avisa quando há novas mensagens
no servidor.
|
|
Não é apenas um serviço de e-mails grátis mas também traz
as últimas notícias do dia, hospedagem gratuita de homepages pessoais e
também um bate-papo.
|
|
Tem 5 MB de espaço, vários domínios:
(seunome@rockbr.com.br,seunome@linuxbr.com.br, seunome@quakebr.com.br etc.)
|
|
Onde você cria
seu sistema de e-mail grátis. Por Exemplo:
alguém@seunome.zzn.com
|
Guest Book
Livro de visitas para sua home page, onde
os seu visitantes podem deixar suas sugestões e críticas.
GuestBook em português.
|
|
Você se inscreve e tem seu guestbook.
|
|
Exibe um banner deles em cada
guestbook.
|
|
Bom GuestBook.
|
Redirecionadores
Seu endereço é muito complicado? Então
obtenha gratuitamente uma URL de redirecionamento com
'http://www.seunome.cjb.net', 'http://pagina.de/voce', etc ...
http://pagina.de/seu-nome
|
|
http://www.seu-nome.cjb.net
|
|
http://www.seu-nome.web-page.net
(colocar banner deles)
|
|
http://come.to/seu-nome
|
Outros Recursos
Para Inserir Data e Hora
Para Inserir Data e Hora num documento
HTML, como por exemplo:
Hoje é
, de
de . São e !
Código:
Entre <HEAD> ...
</HEAD>:
<script
language="JavaScript"> function plural() { var hora=new Date()
var horas=hora.getHours() var singular="hora" if (horas>1) {singular="horas"} document.write(singular)
} </script>
<script language="JavaScript"> function
plural2() { var minuto=new Date() var minutos=minuto.getMinutes() var singular2="minuto" if (minutos>1) {singular2="minutos"}
document.write(singular2)
var} </script>
Entre <BODY> ...
</BODY>:
<script language="JavaScript">
function dia() { dia
= new Date()
document.write(dia.getDate())
}
function mes(){ var mes1=new Date() var mes2=mes1.getMonth()
var month="Janeiro"
if(mes2 == 0) {month="Janeiro"} else if(mes2 ==1) {month=
"Fevereiro"} else if(mes2 ==2)
{month="Março"} else if(mes2
==3) {month="Abril"} else
if(mes2 ==4) {month="Maio"}
else if(mes2 ==5) {month="Junho"} else if(mes2 ==6) {month="Julho"} else if(mes2 ==7)
{month="Agosto"} else if(mes2
==8) {month="Setembro"} else
if(mes2 ==9) {month="Outubro"}
else if(mes2 ==10) {month="Novembro"} else if(mes2 ==11)
{month="Dezembro"}
document.write(month)
}
function hora() {
hora=new Date()
document.write(hora.getHours())
}
function minuto() {
minuto=new Date()
document.write(minuto.getMinutes())
}
function weekday( ) {
var myday=new Date().getDay()
if(myday == 0) {day="Domingo"} else if(myday == 1) {day="Segunda -
Feira"} else if(myday == 2)
{day="Terça - Feira"} else
if(myday == 3) {day="Quarta - Feira"}
else if(myday == 4) {day="Quinta - Feira"} else if(myday == 5) {day="Sexta -
Feira"} else if(myday == 6)
{day="Sábado"}
document.write(day)
}
function ano( ) {
var ano=new Date().getYear()
var aa=new
Date().getYear()
if(ano == 100) {aa="2000"} else if(ano == 101)
{aa="2001"} else if(ano ==
102) {aa="2002"} else if(ano
== 103) {aa="2003"} else
if(ano == 104) {aa="2004"}
else if(ano == 105) {aa="2005"} else if(ano == 106) {aa="2006"} else if(ano == 107) {aa="2007"} else if(ano == 108)
{aa="2008"} else if(ano ==
109) {aa="2009"} else if(ano
== 110) {aa="2010"} else
if(ano == 111) {aa="2011"}
else if(ano == 112) {aa="2012"} else if(ano == 113) {aa="2013"} else if(ano == 114)
{aa="2014"} else if(ano ==
115) {aa="2015"} else if(ano
== 116) {aa="2016"} else
if(ano == 117) {aa="2017"}
else if(ano == 118) {aa="2018"} document.write(aa)
}
</script>
Na posição em que você desejar
escrever a data e hora atuais:
<script>weekday()</script>,
<script>dia()</script> de <script>mes()</script> de
<script>ano()</script>.
São
<script>hora()</script> <script>plural()</script> e
<script>minuto()</script> <script>plural2()</script>!
Para Desabilitar o Botão Direito do Mouse
Caso a sua intenção seja
"esconder" o código de sua página, você pode desabilitar o botão
direito do mouse através do seguinte código escrito entre <HEAD> ...
</HEAD>:
<script
language="javascript">
function noRightClick() { if
(event.button==2) {
alert('Página Carregada com Sucesso!')
}
}
document.onmousedown=noRightClick
</script>
Tabela com 99 códigos de
cores.
|
Black #000000
|
|
Moss Green #336666
|
|
Sand #FFCC99
|
|
90% Black #191919
|
|
Dark Green #003333
|
|
Walnut #663300
|
|
80% Black #333333
|
|
Forest Green #006633
|
|
Ruby Red #990000
|
|
70% Black #4C4C4C
|
|
Grass Green #009933
|
|
Brick Red #CC3300
|
|
60% Black #666666
|
|
Kentucky Green #339966
|
|
Tropical Pink #FF6666
|
|
50% Black #7F7F7F
|
|
Light Green #33CC66
|
|
Soft Pink #FF9999
|
|
40% Black #999999
|
|
Spring Green #33CC33
|
|
Faded Pink #FFCCCC
|
|
30% Black #B2B2B2
|
|
Turquoise #66FFCC
|
|
Crimson #993366
|
|
20% Black #CCCCCC
|
|
Sea Green #33CC99
|
|
Regal Red #CC3366
|
|
10% Black #E5E5E5
|
|
Faded Green #99CC99
|
|
Deep Rose #CC3399
|
|
White #FFFFFF
|
|
Ghost Green #CCFFCC
|
|
Neon Red #FF0099
|
|
Blue #0000FF
|
|
Mint Green #99FF99
|
|
Deep Pink #FF6699
|
|
Cyan #00FFFF
|
|
Army Green #669966
|
|
Hot Pink #FF3399
|
|
Green #00FF00
|
|
Avocado Green #669933
|
|
Dusty Rose #CC6600
|
|
Yellow #FFFF00
|
|
Martian Green #99CC33
|
|
Plum #660066
|
|
Red #FF0000
|
|
Dull Green #99CC66
|
|
Deep Violet #990099
|
|
Magenta #FF00FF
|
|
Chartreuse #99FF00
|
|
Light Violet #FF99FF
|
|
Purple #9900CC
|
|
Moon Green #CCFF66
|
|
Violet #CC66CC
|
|
Orange #FF6600
|
|
Murky Green #333300
|
|
Dusty Plum #996699
|
|
Pink #FF9900
|
|
Olive Drab #666633
|
|
Pale Purple #CC99CC
|
|
Dark Brown #663333
|
|
Khaki #999966
|
|
Majestic Purple #9933CC
|
|
Powder Blue #CCCCFF
|
|
Olive #999933
|
||
|
Navy Blue #003399
|
|
Banana Yellow #CCCC33
|
|
Neon Purple #CC33FF
|
|
Deep Navy Blue #000066
|
|
Light Purple #CC66FF
|
||
|
Twilight Blue #6666CC
|
|
Light Yellow #FFFF66
|
|
Twilight Violet #9966CC
|
|
Pastel Blue #9999FF
|
|
Chalk #FFFF99
|
|
Easter Purple #CC99FF
|
|
Baby Blue #6699FF
|
|
Pale Yellow #FFFFCC
|
|
Deep Purple #330066
|
|
Electric Blue #6666FF
|
|
Brown #996633
|
|
Grape #663399
|
|
Desert Blue #336699
|
|
Red Brown #CC6633
|
|
Blue Violet #9966FF
|
|
Sky Blue #00CCFF
|
|
Gold #CC9933
|
|
Blue Purple #9900FF
|
|
Ice Blue #99FFFF
|
|
Autumn Orange #FF6633
|
|
Deep River #6600CC
|
|
Light BlueGreen #99CCCC
|
|
Light Orange #FF9933
|
|
Deep Azure #6633FF
|
|
Peach #FF9966
|
|
Storm Blue #330099
|
||
|
Ocean Green #669999
|
|
Deep Yellow #FFCC00
|
|
Deep Blue #3300CC
|
0 comentários:
Postar um comentário