manual formacao web sites

Co-financiamento pelo Fundo Social Europeu e Estado Português

Acção de Formação Modular Certificada

Código UFCD 0768: Criação de Sites WEB

Formador: Marco André da Rocha Soares



- 2 -

Objectivos Gerais

No final do curso os formandos deverão possuir os conhecimentos e competências necessários para: Criar documentos em hipertexto. Desenvolver e alojar um site na Internet.

Objectivos Específicos Introdução à Hyper Text Markup Language Elaboração de documentos de texto e outros tipos de ficheiros em HTML para a web Servidores Elaboração de site web Envio dos ficheiros para o servidor por ftp



- 3 -

ÍNDICE NAVEGADORES ....................................................................................................... 5

O que é um servidor? .............................................................................................. 5

O que é um domínio? .............................................................................................. 5

O que é FTP............................................................................................................ 6

Como ocorre a transferência de arquivos ............................................................... 6

Software FTP ....................................................................................................... 6

SERVE SIDE E CLIENT SIDE ..................................................................................... 7

O que é HTML? ....................................................................................................... 7

Tags HTML ............................................................................................................. 7

Elementos HTML ..................................................................................................... 7

Estrutura do código HTML ....................................................................................... 8

<head> .................................................................................................................. 8

Esvaziar elementos HTML ........................................................................................ 9

Atributos HTML ....................................................................................................... 9

Títulos HTML ........................................................................................................... 9

Títulos são importantes ...................................................................................... 10

Linhas de HTML .................................................................................................... 10

Comentários em HTML .......................................................................................... 10

Formatação de Texto HTML ................................................................................... 10

Sintaxe HTML Link ................................................................................................. 11

Links de HTML - o atributo alvo .......................................................................... 11

Links de HTML - o atributo nome ........................................................................ 11

Imagens HTML - a tag <img> e o atributo Src ........................................................ 11

Sintaxe para definição de uma imagem: .............................................................. 12

Imagens HTML - o atributo Alt ............................................................................ 12

Imagens HTML - Altura e largura de uma imagem ............................................... 12

Tabelas HTML ....................................................................................................... 12

Exemplo de tabela .................................................................................................. 12

Atributo border da tabela ................................................................................... 13

Cabeçalho da tabela ........................................................................................... 13

Listas em HTML .................................................................................................... 14



- 4 -

Iframes HTML ....................................................................................................... 14

O atributo SRC serve para identificar o caminho e ficheiro que se pretende chamar para dentro do iframe, o atributo frameborder para criar uma moldura à volta da iframe, convém também definir a altura e largura do iframe na página através dos atributos height e width. ................................. 15

Examplo .............................................................................................................. 15

Formulários HTML ................................................................................................. 15

HTML Form Tags ................................................................................................... 15

Formulários HTML - o elemento de entrada ............................................................ 16

Campos de texto ................................................................................................ 16

Campo Senha .................................................................................................... 16

Botões de Rádio ................................................................................................. 17

Checkboxes ....................................................................................................... 17

Botão Submeter ................................................................................................. 17

textarea ................................................................................................................ 18

Definição e Uso.................................................................................................. 18

SELECT e OPTION ................................................................................................. 19

Definição e Uso.................................................................................................. 19

Valores de cores.................................................................................................... 19

Nomes de cores suportadas por todos os navegadores ......................................... 19

TAGS HTML .......................................................................................................... 24

BIBLIOGRAFIA ...................................................................................................... 26



- 5 -

NAVEGADORES

Internet Explorer Mozilla Firefox Google Chrome Safari Opera

O QUE É UM SERVIDOR?

O termo servidor web pode significar duas coisas: Um programa de computador responsável por aceitar pedidos HTTP de clientes, geralmente os navegadores, e servi-los com respostas HTTP, incluindo opcionalmente dados, que geralmente são páginas web, tais como documentos HTML com objetos embutidos (imagens, etc.); Um computador que executa um programa que provê a funcionalidade descrita acima.

O QUE É UM DOMÍNIO?

O Nome de Domínio é seu Endereço Web (registro do Nome de Domínio). É a sua identidade na Internet, sua marca "on line". Os utilizadores irão lembrar desse nome e usá-lo para encontrar informações sobre sua Empresa, seus produtos e serviços. Como em nenhuma hipótese podem existir dois nomes de domínio iguais para empresas diferentes, seu Endereço Web é único. Tecnicamente, um Endereço Web é um uma construção de endereço empregada para identificar e localizar computadores na Internet. Os computadores usam números de Protocolo Internet (IP - Internet Protocol) para se acharem entre si. As pessoas acham difícil memorizar estes números (ex: 172.18.16.23). Em decorrência, Endereços Web foram criados para facilitar a memorização de palavras e frases que identificam os endereços Internet.



- 6 -

O QUE É FTP

FTP significa File Transfer Protocol (Protocolo de Transferência de Arquivos), e é uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.

COMO OCORRE A TRANSFERÊNCIA DE ARQUIVOS

A transferência de arquivos dá-se entre um computador chamado "cliente" (aquele que solicita a conexão para a transferência de dados) e um servidor (aquele que recebe a solicitação de transferência). O utilizador, através de software específico, pode selecionar quais arquivos enviar ao servidor. Para existir uma conexão ao servidor, o utilizador informa um nome de utilizador (ou username, em inglês) e uma senha (password), bem como o nome correcto do servidor ou seu endereço IP. Se os dados foram informados corretamente, a conexão pode ser estabelecida, utilizando-se um "canal" de comunicação, chamado de porta (port). Tais portas são conexões no qual é possível trocar dados. No caso da comunicação FTP, o padrão para porta é o número 21.

SOFTWARE FTP

FileZilla SmartFTP CoffeeCup PC- http://download.cnet.com/windows/ftp-software/ MAC - http://download.cnet.com/mac/ftp-software/



- 7 -

SERVE SIDE E CLIENT SIDE

Este é um conceito muito importante na Web. É neste ponto, em que separamos as linguagens de programação Web que rodam no servidor – PHP, ASP – das que somente são interpretadas pelos navegadores – JavaScript, Flash, HTML. Todas linguagens de programação Web são construída em cima do HTML, ou seja, disso podemos concluir que: toda linguagem Web, deve ser a princípio transmitida em HTML para o visitante do site, independente de qual tecnologia o site venha a utilizar. Se o site possui um código JavaScript para criar uma efeito de natal (neve), ou uma caixa que rola conforme a página é movimentada, este script é interpretado pelo próprio navegador. E isso é o que chamados de “CLIENT SIDE”, melhor dizendo, pelo lado do servidor. Entre as linguagens dessa categoria, temos: JavaScript, Flash, HTML, SilverLigth entre outras. As linguagens SERVE SIDE ou linguagem de servidor é nesta categoria que entra o PHP e ASP. As linguagens SERVE SIDE são executadas num servidor Web. Quando um utilizador entra num site que possui um registo, por exemplo, ao clicar no botão de gravar dados, inicia-se um processo no servidor, que executa um código para gravar os dados numa base de dados.

O QUE É HTML?

HTML é uma linguagem para descrever páginas da web. HTML significa Hyper Text Markup Language HTML não é uma linguagem de programação, é uma linguagem de marcação Uma linguagem de marcação é um conjunto de tags de marcação A finalidade dos tags são para descrever o conteúdo da página

TAGS HTML

HTML tags são palavras-chave (nomes de marca) cercados por colchetes como <html> Tags HTML normalmente vêm em pares como <b> e </ b> A primeira tag num par é a tag de início, a segunda tag é a tag de fim A tag final é escrita como a marca de início, com uma barra antes do nome da tag <tagname> conteúdo </tagname >

ELEMENTOS HTML

"Tags HTML" e "elementos HTML" são muitas vezes usadas para descrever a mesma coisa. Mas a rigor, um elemento HTML é tudo entre a marca de início e a tag final, incluindo as tags:



- 8 -

Elemento HTML: <p> Este é um parágrafo. </ p> Documentos HTML = Páginas da Web Documentos HTML descrever páginas da web Documentos HTML contêm tags HTML e texto simples Documentos HTML são também chamados de páginas web

ESTRUTURA DO CÓDIGO HTML

<!DOCTYPE html> <html> <head> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

<HEAD>

<title>Title of the document</title> <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" /> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> <script type="text/javascript"> document.write("Hello World!") </script>



- 9 -

<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>

ESVAZIAR ELEMENTOS HTML

Elementos HTML sem conteúdo são chamados de elementos vazios. <br /> é um elemento vazio sem uma marca de fecho (o tag <br /> define uma quebra de linha). Dica: Em XHTML, todos os elementos devem ser fechados. Adicionando uma barra dentro da tag de início, como <br />, é a maneira correta de fechar elementos vazios em XHTML (e XML). HTML Dica: Utilize tags minúsculas Tags HTML não são sensíveis ao caso: <P> significa o mesmo que <p>. Muitos sites usam maiúsculas tags HTML. Deve usar tags minúsculas porque a World Wide Web Consortium (W3C) recomenda minúsculas em HTML 4, e exige tags minúsculas em XHTML.

ATRIBUTOS HTML

Elementos HTML podem ter atributos Atributos fornecem informações adicionais sobre um elemento Os atributos são sempre especificados na marca de início Atributos vêm em pares nome / valor como: name = "valor" Exemplo de Atributos Links em HTML são definidas com a tag <a>. O endereço do link é especificado no atributo href: Exemplo <a href="http://www.w3schools.com"> Este é um link </ a>

TÍTULOS HTML

As posições são definidas com a <h1> para <h6>. <h1> define a posição mais importante. <h6> define a posição, pelo menos importante. Exemplo <h1> Este é um título </ h1> <h2> Este é um título </ h2> <h3> Este é um título </ h3> Nota: Os navegadores adicionar automaticamente um espaço vazio (a margem), antes e depois de cada título.

- 10 -

TÍTULOS SÃO IMPORTANTES

Use cabeçalhos HTML para apenas cabeçalhos. Não use títulos para tornar o texto BIG ou negrito. Os motores de busca utilizar seus títulos para indexar a estrutura e o conteúdo de suas páginas web. Como os utilizadores podem folhear suas páginas, seus títulos, é importante o uso de títulos para mostrar a estrutura do documento. Posições H1 deve ser usada como categorias principais, seguido por cabeçalhos de H2, em seguida, as posições menos importantes H3, e assim por diante.

LINHAS DE HTML

A tag <hr /> cria uma linha horizontal numa página HTML. O elemento hr pode ser usado para separar o conteúdo: Exemplo <p> Este é um parágrafo </ p> <hr /> <p> Este é um parágrafo </ p> <hr /> <p> Este é um parágrafo </ p>

COMENTÁRIOS EM HTML

Os comentários podem ser inseridos no código HTML para torná-lo mais legível e compreensível. Comentários são ignorados pelo navegador e não são exibidos. Os comentários são escritos desta forma: Exemplo  Nota: Existe um ponto de exclamação depois do colchete de abertura, mas não antes do colchete de fechamento.

FORMATAÇÃO DE TEXTO HTML

<p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>



- 11 -

SINTAXE HTML LINK

O código HTML para um link é simples. Parece que este: <a texto Link href="URL"> </ a> O atributo href especifica o destino de um link. exemplo <a href="http://www.w3schools.com/"> Visita </ a> Ao clicar neste link irá enviar o usuário para a página inicial dos W3Schools. Dica: O "texto Link" não tem que ser texto. Pode ser uma imagem ou qualquer outro elemento de HTML.

LINKS DE HTML - O ATRIBUTO ALVO

O atributo target especifica onde para abrir o documento vinculado. O exemplo abaixo irá abrir o documento vinculado numa nova janela do navegador ou separador: Exemplo <a href="http://www.w3schools.com/" target="_blank"> Visita! </ a>

LINKS DE HTML - O ATRIBUTO NOME

O atributo name especifica o nome de uma âncora. O atributo nome é usado para criar um marcador dentro de um documento HTML. Nota: A próxima HTML5 padrão sugere usar o atributo id ao invés do atributo name para especificar o nome de uma âncora. Usando o atributo id realmente funciona também para HTML4 em todos os navegadores modernos. Marcadores não são exibidos em qualquer forma especial. Eles são invisíveis para o leitor. Exemplo A âncora dentro de um documento HTML: <a name="tips">Seção Dicas Úteis </ a> Crie um link para a "Seção Dicas Úteis" dentro do mesmo documento: <a href="#tips"> visite a seção de Dicas Úteis </ a> Ou então, criar um link para a "Seção Dicas úteis" de outra página: <a href="http://www.w3schools.com/html_links.htm#tips">Visite a seção de Dicas Úteis </ a>

IMAGENS HTML - A TAG <IMG> E O ATRIBUTO SRC

Em HTML, as imagens são definidas com a tag img. A marca <img> está vazio, o que significa que ele contém atributos apenas, e não tem nenhuma marca de fecho.



- 12 -

Para exibir uma imagem numa página, usa-se o atributo src. Src significa "fonte". O valor do atributo src é o URL da imagem que deseja exibir.

SINTAXE PARA DEFINIÇÃO DE UMA IMAGEM:

<img src="url" alt="some_text"/> O URL aponta para o local onde a imagem está armazenada. Uma imagem denominada "boat.gif", localizado na "imagens" diretório "www.w3schools.com" tem o URL: http://www.w3schools.com/images/boat.gif. O navegador exibe a imagem em que a marca <img> ocorre no documento. Se colocar uma tag de imagem entre dois parágrafos, o browser mostra o primeiro parágrafo, em seguida, a imagem, e então o segundo parágrafo.

IMAGENS HTML - O ATRIBUTO ALT

O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não poder ser exibida. O valor do atributo alt é um texto-autor definido: <img src="boat.gif" alt="Big Boat" /> O atributo alt fornece informações alternativo para uma imagem, se um usuário por algum motivo não pode vê-lo (por causa da conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).

IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM

Os atributos de altura e largura são utilizados para especificar a altura e a largura de uma imagem. Os valores dos atributos são especificados em pixels por padrão: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

TABELAS HTML

As tabelas são definidas com a tag <table>. Uma tabela é dividida em linhas (com a marca <tr>), e cada linha é dividida em células de dados (com a marca <td>). td significa "os dados da tabela", e contém o conteúdo de uma célula de dados. A tag <td> pode conter texto, links, imagens, listas, formulários, outras tabelas, etc Exemplo de tabela <table border="1"> <tr> <td>row 1, cell 1</td>



- 13 -

<td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Como aparece no ecrã row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

ATRIBUTO BORDER DA TABELA

Se não se definer o atributo border a tabela por defeito não terá moldura. <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

CABEÇALHO DA TABELA

O cabeçalho numa tabela é definido com a tag <th>. A maior parte dos navegadores apresentam o conteúdo desta tag em negrito e centrado. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Como aparece no ecrã:



- 14 -

Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag Descrição <table> Define a tabela <th> Define o cabeçalho da tabela <tr> Define a linha da tabela <td> Defines a célula da tabela <caption> Defines a legenda da tabela <thead> Define quais as linhas no cabeçalho da tabela <tbody> Define quais as linhas no corpo da tabela <tfoot> Define quais as linhas no rodapé da tabela

LISTAS EM HTML

As listas mais comuns de HTML são ordenadas e listas não ordenadas: Lista ordenada: 1. The first list item 2. The second list item 3. The third list item

Lista não ordenada: • List item • List item • List item

Tag Descrição <ol> Define uma lista ordenada <ul> Define uma lista não ordenada <li> Define um item da lista <dl> Define uma lista de definição <dt> Define o item na lista de definição <dd> Define a descrição do item Atributo Valor lista ordenada Valor lista não ordenada start number N/A type 1

A a I i

disc square circle

IFRAMES HTML

Um iframe é usado para exibir uma página web dentro de uma página web.



- 15 -

Sintaxe para adicionar um iframe: <iframe src=" URL "></iframe> O atributo SRC serve para identificar o caminho e ficheiro que se pretende chamar para dentro do iframe, o atributo frameborder para criar uma moldura à volta da iframe, convém também definir a altura e largura do iframe na página através dos atributos height e width. Examplo <iframe src="demo_iframe.htm" width=”200” height=”200” frameborder="0"></iframe>

FORMULÁRIOS HTML

Formulários HTML são usados para transmitir dados para um servidor. Um formulário pode conter elementos de entrada, como campos de texto, checkboxes, radio-botões, botões de envio e muito mais. Um formulário também pode conter listas de seleção, textarea, fieldset, legend, e elementos do rótulo. O <form> é usado para criar um formulário HTML: <form> . input elements . </form> Atributo Valor action URL enctype application/x-www-form-urlencoded

multipart/form-data text/plain

method get post

name name target _blank

_self _parent _top framename

HTML FORM TAGS

Tag Descrição <form> Defines an HTML form for user input <input /> Defines an input control



- 16 -

<textarea> Defines a multi-line text input control <label> Defines a label for an input element <legend> Defines a caption for a fieldset element <select> Defines a select list (drop-down list) <option> Defines an option in a select list TAG Descrição <form> Define um formulário HTML para entrada do usuário <input /> Define um controle de entrada <textarea> Define um multi-linha de controle de entrada de texto <label> Define um rótulo para um elemento de entrada <fieldset> Define uma borda em torno de elementos em forma <legend> Define uma legenda para um elemento fieldset <select> Define uma lista de seleção (drop-down list) <optgroup> Define um grupo de opções relacionadas em uma lista de seleção <option> Define uma opção em uma lista de seleção <button> Define um botão

FORMULÁRIOS HTML - O ELEMENTO DE ENTRADA

O elemento de forma mais importante é o elemento de entrada. O elemento de entrada é usado para selecionar as informações do usuário. Um elemento de entrada pode variar de muitas formas, dependendo do tipo de atributo. Um elemento de entrada pode ser de tipo campo de texto, checkbox, senha, botão, botão de envio, e muito mais. Os tipos de entradas mais utilizados são descritos abaixo.

CAMPOS DE TEXTO

<input type="text" /> define um campo de entrada de uma linha que um usuário pode inserir texto em: <form> Nome: <input type="text" name="firstname" /> <br /> Sobrenome: <input type="text" name="lastname" /> </ Form> Como o código HTML acima aparece no navegador: Nome: Sobrenome: Nota: O formulário em si não é visível. Observe também que a largura padrão de um campo de texto é de 20 caracteres.

CAMPO SENHA

<input type="password" /> define um campo de senha:



- 17 -

<form> Senha: <input type="password" name="pwd" /> </ Form> Nota: Os caracteres em um campo de senha são mascarados (mostrada como asteriscos ou círculos).

BOTÕES DE RÁDIO

<input type="radio" /> define um botão de rádio. Os botões de rádio permitem que um usuário selecione apenas um de um número limitado de opções: <form> <input type="radio" name="sex" value="male" /> <br /> Masculino <input type="radio" name="sex" value="female" /> Feminino </ Form>

CHECKBOXES

<input type="checkbox" /> define uma caixa de seleção. Checkboxes permitir que um usuário selecione uma ou mais opções de um número limitado de opções. <form> <input type="checkbox" name="vehicle" value="Bike" /> Eu tenho uma bicicleta <br /> <input type="checkbox" name="vehicle" value="Car" /> Eu tenho um carro </ Form>

BOTÃO SUBMETER

<input type="submit" /> define um botão submit. Um botão submit é usado para enviar dados do formulário para um servidor. Os dados são enviados para a página especificada no atributo a forma de ação.O arquivo definido no atributo action geralmente faz algo com a entrada recebida: <form name="input" action="html_form_action.asp" method="get"> Nome de usuário: <input type="text" name="user" /> <input type="submit" value="Submit" /> </ Form> Se você digitar alguns caracteres no campo de texto acima, e clique no botão "Enviar", o navegador irá enviar a sua entrada para uma página chamada "html_form_action.asp". A página irá mostrar-lhe a entrada recebida. Atributo Valor Descrição alt text Especifica um texto alternativo para uma imagem (apenas para type =



- 18 -

"image") checked checked Especifica que um elemento <input> deve ser pré-selecionado quando a

página carrega (for type = "checkbox" ou type = "radio") disabled disabled Especifica que um elemento <input> deve ser desativado maxlength number Especifica o número máximo de caracteres permitidos em um elemento

<input> name name Especifica o nome de um elemento <input> readonly readonly Especifica que um campo de entrada deve ser somente leitura size number Especifica a largura, em caracteres, de um elemento <input> src URL Especifica o URL da imagem para usar como um botão de envio (apenas

para type = "image") type button

checkbox file hidden image password radio reset submit text

Especifica o tipo de elemento <input>

value text Especifica o valor de um elemento <input>

TEXTAREA DEFINIÇÃO E USO

A tag <textarea> define um multi-linha de controle de entrada de texto. Uma área de texto pode conter um número ilimitado de caracteres, eo texto torna em uma fonte de largura fixa (geralmente Courier). O tamanho de uma área de texto é especificado pelo cols e os atributos de linhas. Atributo Valor Descrição cols number Especifica a largura visível de uma área de texto rows number Especifica o número de linhas visíveis numa área de texto disabled disabled Especifica que uma área de texto deve ser desativado name text Especifica o nome para uma área de texto readonly readonly Especifica que uma área de texto deve ser somente leitura



- 19 -

SELECT E OPTION

DEFINIÇÃO E USO

A tag <select> é usado para criar uma lista drop-down. As tags <option> dentro do elemento <select> definir as opções disponíveis na lista. Dica: O elemento <select> é um controle de forma e é usado para coletar entrada do usuário. Atributo Valor Descrição disabled disabled Especifica que uma lista drop-down deve ser desativado multiple multiple Especifica que múltiplas opções podem ser selecionadas de uma só vez name name Define um nome para a lista drop-down size number Define o número de opções visíveis em uma lista drop-down

VALORES DE CORES

Cores em HTML são definidas usando uma notação hexadecimal (HEX) para a combinação de vermelho, verde, e os valores de cor azul (RGB). O valor mais baixo que pode ser administrado a uma das fontes de luz é 0 (em HEX: 00). O maior valor é 255 (em HEX: FF). Valores HEX são especificados como 3 pares de números de dois dígitos, começando com um sinal de #.

NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES

147 nomes de cores são definidas no HTML e CSS especificação de cor (16 nomes de cores básicas mais 130 mais). Dica Nota: Os 16 nomes de cores básicas são: aqua, preto, azul, fúcsia, cinza, verde, limão, marrom, marinho, verde-oliva, roxo, vermelho, prata, verde azulado, branco e amarelo. Nome de cor HEX Cor AliceBlue # F0F8FF

AntiqueWhite # FAEBD7

Água # 00FFFF

Água-marinha # 7FFFD4

Azul # F0FFFF

Bege # F5F5DC

Lambuja # FFE4C4

Preto # 000000



- 20 -

BlanchedAlmond # FFEBCD

Azul # 0000FF

BlueViolet # 8A2BE2

Marrom # A52A2A

BurlyWood # DEB887

CadetBlue # 5F9EA0

Cor verde-amarelada # 7FFF00

Chocolate # D2691E

Coral # FF7F50

CornflowerBlue # 6495ED

Cornsilk # FFF8DC

Carmesim # DC143C

Ciano # 00FFFF

DarkBlue # 00008B

DarkCyan # 008B8B

DarkGoldenRod # B8860B

DarkGray # A9A9A9

DarkGrey # A9A9A9

DarkGreen # 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



- 21 -

DeepSkyBlue # 00BFFF

DimGray # 696969

DimGrey # 696969

DodgerBlue # 1E90FF

Firebrick # B22222

FloralWhite # FFFAF0

ForestGreen # 228B22

Fúcsia # FF00FF

Gainsb # DCDCDC

GhostWhite # F8F8FF

Ouro # FFD700

Goldenrod # DAA520

Cinza # 808080

Cinza # 808080

Verde # 008000

GreenYellow # ADFF2F

Honeydew # F0FFF0

HotPink # FF69B4

IndianRed # CD5C5C

Índigo # 4B0082

Marfim # FFFFF0

Caqui # F0E68C

Lavanda # E6E6FA

LavenderBlush # FFF0F5

LawnGreen # 7CFC00

LemonChiffon # FFFACD

LightBlue # ADD8E6

LightCoral # F08080

LightCyan # E0FFFF

LightGoldenRodYellow # FAFAD2

LightGray # D3D3D3

LightGrey # D3D3D3

Lightgreen # 90EE90



- 22 -

LightPink # FFB6C1

LightSalmon # FFA07A

LightSeaGreen # 20B2AA

LightSkyBlue # 87CEFA

LightSlateGray # 778899

LightSlateGrey # 778899

LightSteelBlue # B0C4DE

LightYellow # FFFFE0

Cal # 00FF00

LimeGreen # 32CD32

Linho # FAF0E6

Magenta # FF00FF

Maroon # 800000

MediumAquaMarine # 66CDAA

MediumBlue # 0000CD

MediumOrchid # BA55D3

MediumPurple # 9370D8

MediumSeaGreen # 3CB371

MediumSlateBlue # 7B68EE

MediumSpringGreen # 00FA9A

MediumTurquoise # 48D1CC

MediumVioletRed # C71585

Midnightblue # 191970

MintCream # F5FFFA

MistyRose # FFE4E1

Mocassim # FFE4B5

NavajoWhite # FFDEAD

Marinha # 000080

OldLace # FDF5E6

Oliva # 808000

Olivedrab # 6B8E23

Laranja # FFA500

OrangeRed # FF4500



- 23 -

Orquídea # DA70D6

PaleGoldenRod # EEE8AA

PaleGreen # 98FB98

PaleTurquoise # AFEEEE

PaleVioletRed # D87093

PapayaWhip # FFEFD5

PeachPuff # FFDAB9

Peru # CD853F

Rosa # FFC0CB

Ameixa # DDA0DD

PowderBlue # B0E0E6

Roxo # 800080

Vermelho # FF0000

RosyBrown # BC8F8F

RoyalBlue # 4169E1

SaddleBrown # 8B4513

Salmão # FA8072

Sandybrown # F4A460

SeaGreen # 2E8B57

SeaShell # FFF5EE

Sienna # A0522D

Prata # C0C0C0

SkyBlue # 87CEEB

SlateBlue # 6A5ACD

SlateGray # 708090

SlateGrey # 708090

Neve # FFFAFA

SpringGreen # 00FF7F

SteelBlue # 4682B4

Bronzeado # D2B48C

Cerceta # 008080

Cardo # D8BFD8

Tomate # FF6347



- 24 -

Turquesa # 40E0D0

Violeta # EE82EE

Trigo # F5DEB3

Branco # FFFFFF

WhiteSmoke # F5F5F5

Amarelo # FFFF00

YellowGreen # 9ACD32

TAGS HTML

TAG Descrição <- ... -> Define um comentário <! DOCTYPE> Define o tipo de documento <a> Define uma âncora <abbr> Define uma abreviação <endereço> Define informações de contato do autor / proprietário de um documento <area /> Define uma área dentro de uma imagem do mapa- <b> Define o texto em negrito <base /> Especifica o URL base / meta para todas as URLs relativas em um documento <BASEFONT /> Especifica um padrão de cor, tamanho, fonte ou para todo o texto em um

documento <big> Define o texto grande <blockquote> Define uma longa citação <body> Define corpo do documento <br /> Define uma quebra de linha única <button> Define um botão clicável <caption> Define uma legenda da tabela <cite> Define uma citação <dd> Define uma descrição de um item em uma lista de definições <del> Define o texto que foi excluído de um documento <dfn> Define um termo de definição <div> Define uma seção em um documento <dl> Define uma lista de definições <dt> Define um termo (um item) em uma lista de definições <em> Define texto enfatizado <fieldset> Grupos de elementos relacionados em um formulário <font> Define cor, fonte e tamanho do texto <form> Define um formulário HTML para entrada do usuário <frame /> Define uma janela (uma moldura) em um conjunto de quadros <frameset> Define um conjunto de quadros <h1> para <h6>

Define cabeçalhos HTML



- 25 -

<head> Define informações sobre o documento <hr /> Define uma linha horizontal <html> Define a raiz de um documento HTML <i> Define o texto em itálico <iframe> Define um frame inline <img /> Define uma imagem <input /> Define um controle de entrada <INS> Define texto que foi inserida em um documento <label> Define um rótulo para um elemento <input> <legend> Define uma legenda para um elemento <fieldset> <li> Define um item da lista <link /> Define a relação entre um documento e um recurso externo <map> Define um do lado do cliente imagem do mapa- <meta /> Define meta dados sobre um documento HTML <noframes> Define um conteúdo alternativo para os usuários que não suportam frames <noscript> Define um conteúdo alternativo para os usuários que não suportam scripts client-

side <object> Define um objeto incorporado <ol> Define uma lista ordenada <option> Define uma opção em uma lista drop-down <p> Define um parágrafo <param /> Define um parâmetro para um objeto <pre> Define o texto pré-formatado <q> Define uma citação curta <s> Define texto tachado <script> Define um script do lado do cliente <select> Define uma lista drop-down <small> Define texto menor <span> Define uma seção em um documento <strike> Define texto tachado <strong> Define texto forte <style> Define informações de estilo para um documento <sub> Define o texto subscrito <sup> Define texto sobrescrito <table> Define uma tabela <tbody> Grupos do corpo de conteúdo em uma tabela <td> Define uma célula em uma tabela <textarea> Define um controle de entrada de várias linhas (área de texto) <tfoot> Grupos conteúdo do rodapé em uma tabela <th> Define uma célula de cabeçalho em uma tabela <thead> Grupos O conteúdo do cabeçalho em uma tabela <title> Define um título para o documento <tr> Define uma linha em uma tabela <u> Define texto sublinhado <ul> Define uma lista não ordenada



- 26 -

BIBLIOGRAFIA

http://www.w3.org/

http://www.w3.org/Style/CSS/

http://validator.w3.org/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html5/html5_reference.asp

http://www.w3schools.com/css/

http://www.w3schools.com/tcpip/tcpip_protocols.asp

PC - http://download.cnet.com/windows/ftp-software/

MAC - http://download.cnet.com/mac/ftp-software/

manual formacao web sites

Documents

cdigo html

texto html

ttulos html

elementos html

links de html

tags html

atributos html

linhas de html