Manual Formacao Web Sites

Aco de Formao Modular Certificada
Cdigo UFCD 0768: Criao de Sites WEB
Formador: Marco Andr da Rocha Soares
Co-financiamento pelo Fundo Social Europeu e Estado Portugus
Objectivos Gerais
No final do curso os formandos devero possuir os conhecimentos e competncias necessrios para: Criar documentos em hipertexto. Desenvolver e alojar um site na Internet.
Objectivos Especficos
Introduo Hyper Text Markup Language Elaborao de documentos de texto e outros tipos de ficheiros em HTML para a web Servidores Elaborao de site web Envio dos ficheiros para o servidor por ftp
-2-
NDICE
NAVEGADORES ....................................................................................................... 5 O que um servidor? .............................................................................................. 5 O que um domnio? .............................................................................................. 5 O que FTP............................................................................................................ 6 Como ocorre a transferncia de arquivos ............................................................... 6 Software FTP ....................................................................................................... 6 SERVE SIDE E CLIENT SIDE ..................................................................................... 7 O que HTML? ....................................................................................................... 7 Tags HTML ............................................................................................................. 7 Elementos HTML ..................................................................................................... 7 Estrutura do cdigo HTML ....................................................................................... 8 <head> .................................................................................................................. 8 Esvaziar elementos HTML ........................................................................................ 9 Atributos HTML ....................................................................................................... 9 Ttulos HTML........................................................................................................... 9 Ttulos so importantes ...................................................................................... 10 Linhas de HTML .................................................................................................... 10 Comentrios em HTML .......................................................................................... 10 Formatao 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 definio 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 Cabealho da tabela ........................................................................................... 13 Listas em HTML .................................................................................................... 14 Co-financiamento pelo Fundo Social Europeu e Estado Portugus
-3-
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, convm tambm definir a altura e largura do iframe na pgina atravs dos atributos height e width.................................. 15 Examplo .............................................................................................................. 15 Formulrios HTML ................................................................................................. 15 HTML Form Tags ................................................................................................... 15 Formulrios HTML - o elemento de entrada ............................................................ 16 Campos de texto................................................................................................ 16 Campo Senha .................................................................................................... 16 Botes de Rdio................................................................................................. 17 Checkboxes ....................................................................................................... 17 Boto Submeter ................................................................................................. 17 textarea ................................................................................................................ 18 Definio e Uso.................................................................................................. 18 SELECT e OPTION ................................................................................................. 19 Definio e Uso.................................................................................................. 19 Valores de cores.................................................................................................... 19 Nomes de cores suportadas por todos os navegadores......................................... 19 TAGS HTML .......................................................................................................... 24 BIBLIOGRAFIA ...................................................................................................... 26
-4-
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 responsvel por aceitar pedidos HTTP de clientes, geralmente os navegadores, e servi-los com respostas HTTP, incluindo opcionalmente dados, que geralmente so pginas 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 DOMNIO?
O Nome de Domnio seu Endereo Web (registro do Nome de Domnio). a sua identidade na Internet, sua marca "on line". Os utilizadores iro lembrar desse nome e us-lo para encontrar informaes sobre sua Empresa, seus produtos e servios. Como em nenhuma hiptese podem existir dois nomes de domnio iguais para empresas diferentes, seu Endereo Web nico. Tecnicamente, um Endereo Web um uma construo de endereo empregada para identificar e localizar computadores na Internet. Os computadores usam nmeros de Protocolo Internet (IP - Internet Protocol) para se acharem entre si. As pessoas acham difcil memorizar estes nmeros (ex: 172.18.16.23). Em decorrncia, Endereos Web foram criados para facilitar a memorizao de palavras e frases que identificam os endereos Internet.
-5-
O QUE FTP
FTP significa File Transfer Protocol (Protocolo de Transferncia de Arquivos), e uma forma bastante rpida e verstil de transferir arquivos (tambm conhecidos como ficheiros), sendo uma das mais usadas na internet.
COMO OCORRE A TRANSFERNCIA DE ARQUIVOS

A transferncia de arquivos d-se entre um computador chamado "cliente" (aquele que solicita a conexo para a transferncia de dados) e um servidor (aquele que recebe a solicitao de transferncia). O utilizador, atravs de software especfico, pode selecionar quais arquivos enviar ao servidor. Para existir uma conexo ao servidor, o utilizador informa um nome de utilizador (ou username, em ingls) e uma senha (password), bem como o nome correcto do servidor ou seu endereo IP. Se os dados foram informados corretamente, a conexo pode ser estabelecida, utilizando-se um "canal" de comunicao, chamado de porta (port). Tais portas so conexes no qual possvel trocar dados. No caso da comunicao FTP, o padro para porta o nmero 21.
SOFTWARE FTP
FileZilla SmartFTP CoffeeCup PC- http://download.cnet.com/windows/ftp-software/ MAC - http://download.cnet.com/mac/ftp-software/
-6-
SERVE SIDE E CLIENT SIDE

Este um conceito muito importante na Web. neste ponto, em que separamos as linguagens de programao Web que rodam no servidor PHP, ASP das que somente so interpretadas pelos navegadores JavaScript, Flash, HTML. Todas linguagens de programao Web so construda em cima do HTML, ou seja, disso podemos concluir que: toda linguagem Web, deve ser a princpio transmitida em HTML para o visitante do site, independente de qual tecnologia o site venha a utilizar. Se o site possui um cdigo JavaScript para criar uma efeito de natal (neve), ou uma caixa que rola conforme a pgina movimentada, este script interpretado pelo prprio 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 so executadas num servidor Web. Quando um utilizador entra num site que possui um registo, por exemplo, ao clicar no boto de gravar dados, inicia-se um processo no servidor, que executa um cdigo para gravar os dados numa base de dados.
O QUE HTML?
HTML uma linguagem para descrever pginas da web. HTML significa Hyper Text Markup Language HTML no uma linguagem de programao, uma linguagem de marcao Uma linguagem de marcao um conjunto de tags de marcao A finalidade dos tags so para descrever o contedo da pgina
TAGS HTML
HTML tags so palavras-chave (nomes de marca) cercados por colchetes como <html> Tags HTML normalmente vm em pares como <b> e </ b> A primeira tag num par a tag de incio, a segunda tag a tag de fim A tag final escrita como a marca de incio, com uma barra antes do nome da tag <tagname> contedo </tagname >
ELEMENTOS HTML
"Tags HTML" e "elementos HTML" so muitas vezes usadas para descrever a mesma coisa. Mas a rigor, um elemento HTML tudo entre a marca de incio e a tag final, incluindo as tags: Co-financiamento pelo Fundo Social Europeu e Estado Portugus
-7-
Elemento HTML: <p> Este um pargrafo. </ p> Documentos HTML = Pginas da Web Documentos HTML descrever pginas da web Documentos HTML contm tags HTML e texto simples Documentos HTML so tambm chamados de pginas web
ESTRUTURA DO CDIGO 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> Co-financiamento pelo Fundo Social Europeu e Estado Portugus
-8-
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
ESVAZIAR ELEMENTOS HTML

Elementos HTML sem contedo so 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 incio, como <br />, a maneira correta de fechar elementos vazios em XHTML (e XML). HTML Dica: Utilize tags minsculas Tags HTML no so sensveis ao caso: <P> significa o mesmo que <p>. Muitos sites usam maisculas tags HTML. Deve usar tags minsculas porque a World Wide Web Consortium (W3C) recomenda minsculas em HTML 4, e exige tags minsculas em XHTML.
ATRIBUTOS HTML
Elementos HTML podem ter atributos Atributos fornecem informaes adicionais sobre um elemento Os atributos so sempre especificados na marca de incio Atributos vm em pares nome / valor como: name = "valor" Exemplo de Atributos Links em HTML so definidas com a tag <a>. O endereo do link especificado no atributo href: Exemplo <a href="http://www.w3schools.com"> Este um link </ a>
TTULOS HTML
As posies so definidas com a <h1> para <h6>. <h1> define a posio mais importante. <h6> define a posio, pelo menos importante. Exemplo <h1> Este um ttulo </ h1> <h2> Este um ttulo </ h2> <h3> Este um ttulo </ h3> Nota: Os navegadores adicionar automaticamente um espao vazio (a margem), antes e depois de cada ttulo. Co-financiamento pelo Fundo Social Europeu e Estado Portugus
-9-
TTULOS SO IMPORTANTES
Use cabealhos HTML para apenas cabealhos. No use ttulos para tornar o texto BIG ou negrito. Os motores de busca utilizar seus ttulos para indexar a estrutura e o contedo de suas pginas web. Como os utilizadores podem folhear suas pginas, seus ttulos, importante o uso de ttulos para mostrar a estrutura do documento. Posies H1 deve ser usada como categorias principais, seguido por cabealhos de H2, em seguida, as posies menos importantes H3, e assim por diante.
LINHAS DE HTML
A tag <hr /> cria uma linha horizontal numa pgina HTML. O elemento hr pode ser usado para separar o contedo: Exemplo <p> Este um pargrafo </ p> <hr /> <p> Este um pargrafo </ p> <hr /> <p> Este um pargrafo </ p>
COMENTRIOS EM HTML
Os comentrios podem ser inseridos no cdigo HTML para torn-lo mais legvel e compreensvel. Comentrios so ignorados pelo navegador e no so exibidos. Os comentrios so escritos desta forma: Exemplo  Nota: Existe um ponto de exclamao depois do colchete de abertura, mas no antes do colchete de fechamento.
FORMATAO 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>
- 10 -
SINTAXE HTML LINK

O cdigo 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 usurio para a pgina inicial dos W3Schools. Dica: O "texto Link" no 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 prxima HTML5 padro sugere usar o atributo id ao invs do atributo name para especificar o nome de uma ncora. Usando o atributo id realmente funciona tambm para HTML4 em todos os navegadores modernos. Marcadores no so exibidos em qualquer forma especial. Eles so invisveis para o leitor. Exemplo A ncora dentro de um documento HTML: <a name="tips">Seo Dicas teis </ a> Crie um link para a "Seo Dicas teis" dentro do mesmo documento: <a href="#tips"> visite a seo de Dicas teis </ a> Ou ento, criar um link para a "Seo Dicas teis" de outra pgina: <a href="http://www.w3schools.com/html_links.htm#tips">Visite a seo de Dicas teis </ a>
IMAGENS HTML - A TAG <IMG> E O ATRIBUTO SRC

Em HTML, as imagens so definidas com a tag img. A marca <img> est vazio, o que significa que ele contm atributos apenas, e no tem nenhuma marca de fecho. Co-financiamento pelo Fundo Social Europeu e Estado Portugus
- 11 -
Para exibir uma imagem numa pgina, usa-se o atributo src. Src significa "fonte". O valor do atributo src o URL da imagem que deseja exibir.
SINTAXE PARA DEFINIO 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" diretrio "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 pargrafos, o browser mostra o primeiro pargrafo, em seguida, a imagem, e ento o segundo pargrafo.
IMAGENS HTML - O ATRIBUTO ALT

O atributo alt necessrio especifica um texto alternativo para uma imagem, se a imagem no poder ser exibida. O valor do atributo alt um texto-autor definido: <img src="boat.gif" alt="Big Boat" /> O atributo alt fornece informaes alternativo para uma imagem, se um usurio por algum motivo no pode v-lo (por causa da conexo lenta, um erro no atributo src, ou se o usurio usa um leitor de tela).
IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM

Os atributos de altura e largura so utilizados para especificar a altura e a largura de uma imagem. Os valores dos atributos so especificados em pixels por padro: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
TABELAS HTML
As tabelas so definidas com a tag <table>. Uma tabela dividida em linhas (com a marca <tr>), e cada linha dividida em clulas de dados (com a marca <td>). td significa "os dados da tabela", e contm o contedo de uma clula de dados. A tag <td> pode conter texto, links, imagens, listas, formulrios, outras tabelas, etc Exemplo de tabela <table border="1"> <tr> <td>row 1, cell 1</td> Co-financiamento pelo Fundo Social Europeu e Estado Portugus
- 12 -
<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 no se definer o atributo border a tabela por defeito no ter moldura. <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
CABEALHO DA TABELA
O cabealho numa tabela definido com a tag <th>. A maior parte dos navegadores apresentam o contedo 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: Co-financiamento pelo Fundo Social Europeu e Estado Portugus
- 13 -
Header 1
Header 2
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag <table> <th> <tr> <td> <caption> <thead> <tbody> <tfoot> Descrio Define a tabela Define o cabealho da tabela Define a linha da tabela Defines a clula da tabela Defines a legenda da tabela Define quais as linhas no cabealho da tabela Define quais as linhas no corpo da tabela Define quais as linhas no rodap da tabela
LISTAS EM HTML
As listas mais comuns de HTML so ordenadas e listas no ordenadas: Lista no ordenada: Lista ordenada: 1. The first list item List item 2. The second list item List item 3. The third list item List item Tag <ol> <ul> <li> <dl> <dt> <dd> Atributo start type Descrio Define uma lista ordenada Define uma lista no ordenada Define um item da lista Define uma lista de definio Define o item na lista de definio Define a descrio do item Valor lista ordenada number 1 A a I i Valor lista no ordenada N/A disc square circle
IFRAMES HTML
Um iframe usado para exibir uma pgina web dentro de uma pgina web. Co-financiamento pelo Fundo Social Europeu e Estado Portugus
- 14 -
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, convm tambm definir a altura e largura do iframe na pgina atravs dos atributos height e width. Examplo <iframe src="demo_iframe.htm" width=200 height=200 frameborder="0"></iframe>
FORMULRIOS HTML
Formulrios HTML so usados para transmitir dados para um servidor. Um formulrio pode conter elementos de entrada, como campos de texto, checkboxes, radio-botes, botes de envio e muito mais. Um formulrio tambm pode conter listas de seleo, textarea, fieldset, legend, e elementos do rtulo. O <form> usado para criar um formulrio HTML: <form> . input elements . </form> Atributo action enctype method name target Valor URL application/x-www-form-urlencoded multipart/form-data text/plain get post name _blank _self _parent _top framename
HTML FORM TAGS

Tag <form> <input /> Descrio Defines an HTML form for user input Defines an input control
- 15 -
<textarea> <label> <legend> <select> <option> TAG <form> <input /> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button>
Defines a multi-line text input control Defines a label for an input element Defines a caption for a fieldset element Defines a select list (drop-down list) Defines an option in a select list Descrio Define um formulrio HTML para entrada do usurio Define um controle de entrada Define um multi-linha de controle de entrada de texto Define um rtulo para um elemento de entrada Define uma borda em torno de elementos em forma Define uma legenda para um elemento fieldset Define uma lista de seleo (drop-down list) Define um grupo de opes relacionadas em uma lista de seleo Define uma opo em uma lista de seleo Define um boto
FORMULRIOS HTML - O ELEMENTO DE ENTRADA

O elemento de forma mais importante o elemento de entrada. O elemento de entrada usado para selecionar as informaes do usurio. 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, boto, boto de envio, e muito mais. Os tipos de entradas mais utilizados so descritos abaixo.
CAMPOS DE TEXTO
<input type="text" /> define um campo de entrada de uma linha que um usurio pode inserir texto em: <form> Nome: <input type="text" name="firstname" /> <br /> Sobrenome: <input type="text" name="lastname" /> </ Form> Como o cdigo HTML acima aparece no navegador: Nome: Sobrenome: Nota: O formulrio em si no visvel. Observe tambm que a largura padro de um campo de texto de 20 caracteres.
CAMPO SENHA
<input type="password" /> define um campo de senha: Co-financiamento pelo Fundo Social Europeu e Estado Portugus
- 16 -
<form> Senha: <input type="password" name="pwd" /> </ Form> Nota: Os caracteres em um campo de senha so mascarados (mostrada como asteriscos ou crculos).
BOTES DE RDIO
<input type="radio" /> define um boto de rdio. Os botes de rdio permitem que um usurio selecione apenas um de um nmero limitado de opes: <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 seleo. Checkboxes permitir que um usurio selecione uma ou mais opes de um nmero limitado de opes. <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>
BOTO SUBMETER
<input type="submit" /> define um boto submit. Um boto submit usado para enviar dados do formulrio para um servidor. Os dados so enviados para a pgina especificada no atributo a forma de ao.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 usurio: <input type="text" name="user" /> <input type="submit" value="Submit" /> </ Form> Se voc digitar alguns caracteres no campo de texto acima, e clique no boto "Enviar", o navegador ir enviar a sua entrada para uma pgina chamada "html_form_action.asp". A pgina ir mostrar-lhe a entrada recebida. Atributo alt Valor text Descrio Especifica um texto alternativo para uma imagem (apenas para type =
- 17 -
checked
checked
disabled disabled maxlength number name readonly size src type name readonly number URL
value
button checkbox file hidden image password radio reset submit text text Especifica o valor de um elemento <input>
"image") Especifica que um elemento <input> deve ser pr-selecionado quando a pgina carrega (for type = "checkbox" ou type = "radio") Especifica que um elemento <input> deve ser desativado Especifica o nmero mximo de caracteres permitidos em um elemento <input> Especifica o nome de um elemento <input> Especifica que um campo de entrada deve ser somente leitura Especifica a largura, em caracteres, de um elemento <input> Especifica o URL da imagem para usar como um boto de envio (apenas para type = "image") Especifica o tipo de elemento <input>
TEXTAREA
DEFINIO E USO
A tag <textarea> define um multi-linha de controle de entrada de texto. Uma rea de texto pode conter um nmero 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 cols rows disabled name readonly Valor number number disabled text readonly Descrio Especifica a largura visvel de uma rea de texto Especifica o nmero de linhas visveis numa rea de texto Especifica que uma rea de texto deve ser desativado Especifica o nome para uma rea de texto Especifica que uma rea de texto deve ser somente leitura
- 18 -
SELECT E OPTION
DEFINIO E USO
A tag <select> usado para criar uma lista drop-down. As tags <option> dentro do elemento <select> definir as opes disponveis na lista. Dica: O elemento <select> um controle de forma e usado para coletar entrada do usurio. Atributo disabled multiple name size Valor disabled multiple name number Descrio Especifica que uma lista drop-down deve ser desativado Especifica que mltiplas opes podem ser selecionadas de uma s vez Define um nome para a lista drop-down Define o nmero de opes visveis em uma lista drop-down
VALORES DE CORES
Cores em HTML so definidas usando uma notao hexadecimal (HEX) para a combinao 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 so especificados como 3 pares de nmeros de dois dgitos, comeando com um sinal de #.
NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES

147 nomes de cores so definidas no HTML e CSS especificao de cor (16 nomes de cores bsicas mais 130 mais). Dica Nota: Os 16 nomes de cores bsicas so: aqua, preto, azul, fcsia, cinza, verde, limo, marrom, marinho, verde-oliva, roxo, vermelho, prata, verde azulado, branco e amarelo. Nome de cor AliceBlue AntiqueWhite gua gua-marinha Azul Bege Lambuja Preto HEX # F0F8FF # FAEBD7 # 00FFFF # 7FFFD4 # F0FFFF # F5F5DC # FFE4C4 # 000000 Cor
- 19 -
BlanchedAlmond Azul BlueViolet Marrom BurlyWood CadetBlue Cor verde-amarelada Chocolate Coral CornflowerBlue Cornsilk Carmesim Ciano DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid Darkred DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink
# FFEBCD # 0000FF # 8A2BE2 # A52A2A # DEB887 # 5F9EA0 # 7FFF00 # D2691E # FF7F50 # 6495ED # FFF8DC # DC143C # 00FFFF # 00008B # 008B8B # B8860B # A9A9A9 # A9A9A9 # 006400 # BDB76B # 8B008B # 556B2F # FF8C00 # 9932CC # 8B0000 # E9967A # 8FBC8F # 483D8B # 2F4F4F # 2F4F4F # 00CED1 # 9400D3 # FF1493
- 20 -
DeepSkyBlue DimGray DimGrey DodgerBlue Firebrick FloralWhite ForestGreen Fcsia Gainsb GhostWhite Ouro Goldenrod Cinza Cinza Verde GreenYellow Honeydew HotPink IndianRed ndigo Marfim Caqui Lavanda LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey Lightgreen
# 00BFFF # 696969 # 696969 # 1E90FF # B22222 # FFFAF0 # 228B22 # FF00FF # DCDCDC # F8F8FF # FFD700 # DAA520 # 808080 # 808080 # 008000 # ADFF2F # F0FFF0 # FF69B4 # CD5C5C # 4B0082 # FFFFF0 # F0E68C # E6E6FA # FFF0F5 # 7CFC00 # FFFACD # ADD8E6 # F08080 # E0FFFF # FAFAD2 # D3D3D3 # D3D3D3 # 90EE90
- 21 -
LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Cal LimeGreen Linho Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed Midnightblue MintCream MistyRose Mocassim NavajoWhite Marinha OldLace Oliva Olivedrab Laranja OrangeRed
# FFB6C1 # FFA07A # 20B2AA # 87CEFA # 778899 # 778899 # B0C4DE # FFFFE0 # 00FF00 # 32CD32 # FAF0E6 # FF00FF # 800000 # 66CDAA # 0000CD # BA55D3 # 9370D8 # 3CB371 # 7B68EE # 00FA9A # 48D1CC # C71585 # 191970 # F5FFFA # FFE4E1 # FFE4B5 # FFDEAD # 000080 # FDF5E6 # 808000 # 6B8E23 # FFA500 # FF4500
- 22 -
Orqudea PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Rosa Ameixa PowderBlue Roxo Vermelho RosyBrown RoyalBlue SaddleBrown Salmo Sandybrown SeaGreen SeaShell Sienna Prata SkyBlue SlateBlue SlateGray SlateGrey Neve SpringGreen SteelBlue Bronzeado Cerceta Cardo Tomate
# DA70D6 # EEE8AA # 98FB98 # AFEEEE # D87093 # FFEFD5 # FFDAB9 # CD853F # FFC0CB # DDA0DD # B0E0E6 # 800080 # FF0000 # BC8F8F # 4169E1 # 8B4513 # FA8072 # F4A460 # 2E8B57 # FFF5EE # A0522D # C0C0C0 # 87CEEB # 6A5ACD # 708090 # 708090 # FFFAFA # 00FF7F # 4682B4 # D2B48C # 008080 # D8BFD8 # FF6347
- 23 -
Turquesa Violeta Trigo Branco WhiteSmoke Amarelo YellowGreen
# 40E0D0 # EE82EE # F5DEB3 # FFFFFF # F5F5F5 # FFFF00 # 9ACD32
TAGS HTML
TAG <- ... -> <! DOCTYPE> <a> <abbr> <endereo> <area /> <b> <base /> <BASEFONT /> <big> <blockquote> <body> <br /> <button> <caption> <cite> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame /> <frameset> <h1> para <h6> Descrio Define um comentrio Define o tipo de documento Define uma ncora Define uma abreviao Define informaes de contato do autor / proprietrio de um documento Define uma rea dentro de uma imagem do mapaDefine o texto em negrito Especifica o URL base / meta para todas as URLs relativas em um documento Especifica um padro de cor, tamanho, fonte ou para todo o texto em um documento Define o texto grande Define uma longa citao Define corpo do documento Define uma quebra de linha nica Define um boto clicvel Define uma legenda da tabela Define uma citao Define uma descrio de um item em uma lista de definies Define o texto que foi excludo de um documento Define um termo de definio Define uma seo em um documento Define uma lista de definies Define um termo (um item) em uma lista de definies Define texto enfatizado Grupos de elementos relacionados em um formulrio Define cor, fonte e tamanho do texto Define um formulrio HTML para entrada do usurio Define uma janela (uma moldura) em um conjunto de quadros Define um conjunto de quadros Define cabealhos HTML
- 24 -
<head> <hr /> <html> <i> <iframe> <img /> <input /> <INS> <label> <legend> <li> <link /> <map> <meta /> <noframes> <noscript> <object> <ol> <option> <p> <param /> <pre> <q> <s> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <u> <ul>
Define informaes sobre o documento Define uma linha horizontal Define a raiz de um documento HTML Define o texto em itlico Define um frame inline Define uma imagem Define um controle de entrada Define texto que foi inserida em um documento Define um rtulo para um elemento <input> Define uma legenda para um elemento <fieldset> Define um item da lista Define a relao entre um documento e um recurso externo Define um do lado do cliente imagem do mapaDefine meta dados sobre um documento HTML Define um contedo alternativo para os usurios que no suportam frames Define um contedo alternativo para os usurios que no suportam scripts clientside Define um objeto incorporado Define uma lista ordenada Define uma opo em uma lista drop-down Define um pargrafo Define um parmetro para um objeto Define o texto pr-formatado Define uma citao curta Define texto tachado Define um script do lado do cliente Define uma lista drop-down Define texto menor Define uma seo em um documento Define texto tachado Define texto forte Define informaes de estilo para um documento Define o texto subscrito Define texto sobrescrito Define uma tabela Grupos do corpo de contedo em uma tabela Define uma clula em uma tabela Define um controle de entrada de vrias linhas (rea de texto) Grupos contedo do rodap em uma tabela Define uma clula de cabealho em uma tabela Grupos O contedo do cabealho em uma tabela Define um ttulo para o documento Define uma linha em uma tabela Define texto sublinhado Define uma lista no ordenada
- 25 -
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/
- 26 -

Manual Formacao Web Sites

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual Formacao Web Sites

Diunggah oleh

Hak Cipta:

Format Tersedia

Aco de Formao Modular Certificada

Cdigo UFCD 0768: Criao de Sites WEB

Formador: Marco Andr da Rocha Soares

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

COMO OCORRE A TRANSFERNCIA DE ARQUIVOS

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

SERVE SIDE E CLIENT SIDE

Aco de Formao Modular Certificada

ESTRUTURA DO CDIGO HTML

Aco de Formao Modular Certificada

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

ESVAZIAR ELEMENTOS HTML

Aco de Formao Modular Certificada

FORMATAO DE TEXTO HTML

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

SINTAXE HTML LINK

LINKS DE HTML - O ATRIBUTO ALVO

LINKS DE HTML - O ATRIBUTO NOME

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

Aco de Formao Modular Certificada

SINTAXE PARA DEFINIO DE UMA IMAGEM:

IMAGENS HTML - O ATRIBUTO ALT

IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM

Aco de Formao Modular Certificada

ATRIBUTO BORDER DA TABELA

Aco de Formao Modular Certificada

Aco de Formao Modular Certificada

HTML FORM TAGS

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

FORMULRIOS HTML - O ELEMENTO DE ENTRADA

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Turquesa Violeta Trigo Branco WhiteSmoke Amarelo YellowGreen

# 40E0D0 # EE82EE # F5DEB3 # FFFFFF # F5F5F5 # FFFF00 # 9ACD32

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus

Aco de Formao Modular Certificada

Co-financiamento pelo Fundo Social Europeu e Estado Portugus