Tabela de Cores para Linguagem HTML
Os 16 nomes de cores aceitos segundo o HTML 3.2 são estes:
| aqua | black | blue | fuchsia |
| gray | green | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
Os códigos de cores são estes:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Esta página foi feita com o objetivo de lhe fornecer informações suficientes para você fazer aprender a fazer um pagina HTML simples. Quais as ferramentas para começar a aprender HTML? Basicamente precisa-se de duas coisas: um editor de textos (bloco de notas ou wordpad) e um navegador (internet explorer ou netscape). Importante saber! * Fazer páginas web não é um bixo de sete cabeças. * Fazemos e armazenamos nossas paginas web em nosso próprio computador. Deste modo elas não estão disponíveis na internet ainda. Elas só vão estar disponiveis na internet quando as enviarmos para algum servidor web. * Ter curiosidade para testar os comandos html é fundamental. * Organização é fundamental: crie uma pasta para salvar suas páginas web e as imagens que vc usa pois assim fica muito dificil de você se perder. * Os pré requisitos para se começar a estudar web design são saber usar arquivos de texto, salvar arquivos, renomear, criar pastas e saber navegar na net. * Os arquivos são diferenciados primariamente por sua extensão, ou seja, aquelas 3 ou 4 letras depois do ponto. Ex: sorria.jpg (arquivo de imagem), index.html (página web), joguinho.exe (programa). Ajuda muito este conhecimento neste curso! Mas como isso funciona?Usamos o bloco de notas para escrevermos os comandos HTML. Este conjunto organizado de comandos HTML chamamos de Código Fonte. Para criar a página web basta gravar o fonte, escrito no editor de texto, com um nome qualquer com extensão .htm ou .html. Após a gravação ela pode ser visualizada usando um navegador, por exemplo o internet explorer: * Nesta figura podemos ver uma página web chamada index.html salva na pasta chamada "meu_site". Ela fica com o simbolo do internet explorer porque é o navegador padrão da maquina onde esta foto foi tirada. Se fosse o navegador Netscape o ícone seria outro. Começando!!! Pra começar a praticar é importante saber onde os comandos HTML devem ser colocados no arquivo fonte e como que eles serão lidos pelo navegador. Abaixo podemos observar na esquerda no programa bloco de notas alguns comandos html. Esses comandos são como um esqueleto da pagina web pois eles indicam onde nós colocaremos comandos para que o navegador possa interpretá-los. 2 - <title> serve para indicar o titulo da página. Portanto tudo o que escrevermos de <title> até </title> será mostrado no topo do navegador como titulo da página. O titulo desta página por exemplo (olhem lá em cima) é "Iniciação ao HTML". 3 - <body> até </body> é o espaço onde se deve colocar os textos, comandos de formatação de texto, comandos de inserção de imagens, etc. Portanto, tudo o que escrevermos entre estas tags aparecerá no corpo da pagina web. Esta parte é a parte principal para nós que estamos começando a aprender HTML. Lembrem-se de que devemos colocar os comandos e textos somente entre <body> e </body>!! Exemplo Prático 1 Este exemplo tem por objetivo mostrar como o Navegador interpreta o que é escrito no codigo fonte. É bom que você entenda muito bem essa parte! Imagine que queremos fazer uma página que se chame "Dias da Semana" e que apareça uma lista dos dias em nossa pagina web. Observe este codigo fonte... Agora observem o que o navegador mostrou: Conclusões... Pois é, saiu diferente do jeito que foi escrito no código... por quê? É caracteristica dos navegadores não darem bolas pros espaços a mais que colocamos entre as palavras e nem pro nosso ENTER que quebra a linha em editores de texto. Ele irá somente reconhecer um espaço entre cada palavra. Para realmente o navegador mostrar um quebra de linha ou mais de um espaço entre palavras devemos usar comandos que façam isso. Ah, mas o titulo saiu direitinho, pelo menos! ou seja TAGS = Comandos HTML Exemplo Prático 2 Vamos deixar um pouco mais claro. Observe as seguintes alterações no codigo fonte anterior.. Com o acréscimo de alguns comandos o navegador mostrou o seguinte: Agora saiu bonitinho, não acham? No caso, o comando <font> coloriu de vermelho (por causa do atributo COLOR=red) as palavras "Os dias da semana são:" e o comando <br> fez a quebra de linhas. Quase ia esquecendo... viram que o comando <i> fez itálico na palavra domingo? Pergunta: Porque "segunda, terça, quarta, quinta..." não ficaram em vermelho? Ah, olhem bem o comando </font>. Foi ele que fez a formatação em vermelho acabar por ali... mas se não tivesse esse comando, certamente tudo iria ficar bem vermelho! Mas esse </font> só termina o comando font, porque pros outros comandos é diferente, mas é bem fácil... se o comando inicial é <i>, por exemplo, ele vai terminar em </i>. Usar as TAGS é relativamente fácil...Geralmente nossas TAGS são compostas de um inicio e um fim. O inicio e o seu fim delimitam um trecho de texto que sofrerá um efeito. Por exemplo o caso do itálico na palavra "Domingo". Ele ficou em itálico porque foi isolado pelas TAGs <i> e </i>. Existem também tags que são solitárias... como o <BR>: ele quebra a linha e pronto! Existem TAGS que fazem um monte de coisas ao mesmo tempo, dependendo do que queremos: por exemplo a TAG <FONT>. No exemplo anterior a usamos (com ajuda do seu atributo COLOR) para colorir de vermelho uma frase. Mas se quiséssemos mudar o tamanho da letra e a cor ao mesmo tempo bastariamos adicionar outro atributo a <FONT>. No caso o comando ficaria assim: Nas próximas aula veremos com calma esses comandos! Por enquanto é só uma palhinha... mas quem sabe antes de ir pra próxima aula você possa tentar este exercício abaixo? Prontos para fazer sua própria página? Vamos a um exercício! Faça uma página WEB com o titulo "Minha Pagina HTML". No corpo da página deverá aparecer as palavras "Meus dados pessoais" de forma centralizada e na cor que vc mais gosta. Abaixo deverá aparecer seus dados pessoais listados um abaixo do outro (Nome, Endereço, Telefone, E-mail, Esportes preferidos, Tipos de Musica Preferidas). As respostas devem aparecer sublinhadas A seguir os passos e comandos necessários: 1 - Abra o bloco de notas. 2 - Escreva antes de tudo a estrutura básica HTML. 3 - Para fazer o corpo da página vc irá utilizar estes comandos: <CENTER> </CENTER> - serve pra centralizar palavras, imagens, tabelas. <FONT> </FONT> - serve pra definir cor(atributo COLOR="cor"), tamanho(SIZE="tamanho") e tipo de letras(FACE="tipo") <BR> - define quebra de linha. Este é um comando que não tem terminação com /. <U> </U> - sublinha palavras. 4 - Faça uma pasta em seu HD e nela salve sua página com o nome de index.html (IMPORTANTE- Na caixa de dialogo opte por Salvar com o tipo: todos os arquivos *.*) 5 - Depois de salvo vá até a pasta onde salvou e abra o arquivo index.html para ver como ficou sua página. 6 - Se algo saiu errado, altere o código fonte, salve de novo e clique no botão atualizar de sua página web
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Assinar:
Comentários
