UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S

Transcrição

1 UFCD 21 Criação de sites webs 1 D U R A Ç Ã O : 5 0 H O R A S

2 Objectivos: 2 C R I A R D O C U M E N T O S E M H I P E R T E X T O D E S E N V O L V E R E A L O J A R U M S I T E N A I N T E R N E T

3 Conteúdos 3 I N T R O D U Ç Ã O À H Y P E R T E X T M A R K U P L A N G U A G E E L A B O R A Ç Ã O D E D O C U M E N T O S D E T E X T O E O U T R O S T I P O S D E F I C H E I R O S E M H T M L P A R A A W E B Servidores Elaboração de site Web Envio dos ficheiros para o servidor por ftp

4 Criação de um WebSite 4 Criarum websitede qualidade requer muito planeamento detalhado e cuidadoso.

5 O que faz de um site um verdadeiro site COERÊNCIA 5 O segredo para criar um website de sucesso está na simplicidade da percepção humana.

6 Determinar o tema de fundo 6 M U I T O A N T E S D E S E E S C O L H E R A S C O R E S, O S T I P O S D E L E T R A O U O G R A F I S M O D E F U N D O D O S I T E, É M U I T O I M P O R T A N T E E S C O L H E R O Q U A N T O A N T E S O T E M A D O S E U S I T E. O T E M A É A I D E I A Q U E U N E T O D O O C O N T E Ú D O D O S I T E.

7 Estabelecer limites ao conteúdo 7 É preciso definir os limites a não ultrapassar e os tópicos a não cobrir. Se quer tornar o seu site num local que as pessoas queiram visitar repetidamente terá de criar um site agradável.

8 Criar um site agradável 8 P A R A T O R N A R O S E U W E B S I T E N E M L O C A L A G R A D Á V E L E V I S I T Á V E L, E S T E D E V E R Á S E R A C T U A L I Z A D O P E L O M E N O S U M A V E Z P O R M Ê S. D A R L A R G A S À C R I A T I V I D A D E

9 Fontes online para o pensamento criativo W W W. B R A I N W A V E S. C O M 9 W W W. W E B S I T E T I P S. C O M / D E S I G N / C R E A T I V I T Y. S H T M L W W W. D R A W R I G H T. C O M W W W. F U N D E R S T A N D I N G. C O M / R I G H T _ L E F T _ B R A I N. C F M

10 Regras básicas para criar websites eficazes 10 Q U A L É A F I N A L I D A D E D O S E U S I T E? D I V U L G A R U M A C A U S A P R O C U R A R E M P R E G O V E N D E R G R A X A D E S A P A T O S Repare no verbo usado

11 Qual é o objectivo a atingir? 11 A F I N A L I D A D E D E U M S I T E C O R R E S P O N D E À M E T A Q U E O S I T E P R E T E N D E A L C A N Ç A R S I T E D E P I N G U I N S ( P Á G. 1 8 )

12 A quem se destina o site? 12 Que tipo de pessoas pretende que visitem o seu site? Que grupos geográficos ou culturais quer cativar? Se estiverem disponíveis para consulta alguns dados sobre o público-alvo de sites semelhantes convém analisá-los

13 O design do seu site 13 C A T I V A R O S E U P Ú B L I C O - A L V O Q U A N T O M A I S S O U B E R A C E R C A D E L E M E L H O R! E V I T A R A D E S O R D E M D E M A S I A D A S C O I S A S N O M E S M O L O C A L - Q U E R S E J A M B O A S O U M Á S - P O D E M A T R A P A L H A R M A I S D O Q U E A J U D A R.

14 14 As regras de ouro para planear o seu site Regra nº1 Regra nº2 Regra nº3 Regra nº4 A Web destina-se a estabelecer contacto com outras pessoas Mantenha as suas páginas Web leves e limpinhas Saiba quem são os seus visitantes e o que querem O website é seu, transmite a sua visão, façao a seu gosto

15 Examinar programas de criação de páginas Web 15 APARENTEMENTE QUALQUER PROGRAMA SERVE PARA CRIAR PÁGINAS WEB. PODE-SE UTILIZAR PROCESSADORES DE TEXTO (M. WORD) E PROGRAMAS ESPECÍFICOS DE CRIAÇÃO DE PÁGINAS WEB (ADOBE DREAMWEAVER, O AMAYA, HOTDOG). CADA PROGRAMA TEM OS SEUS PRÓPRIOS TRUQUES E NEM TODOS PRODUZEM CÓDIGO HTML LIMPO E DE QUALIDADE.

16 Existem dois tipos básicos de programas para criar páginas Web: 16 E D I T O R D E T E X T O P R O G R A M A W Y S I W I G ( W H A T Y O U S E E I S W H A T Y O U G E T ) E S T E T I P O D E P R O G R A M A S P E R M I T E - L H E D E S E N V O L V E R V I S U A L M E N T E A P Á G I N A W E B, E M V E Z D E T R A B A L H A R D I R E C T A M E N T E C O M O C Ó D I G O A T É O B T E R R E S U L T A D O S.

17 Editores HTML 17 Programa Arachnophilia CoffeeCup HTML Editor HotDog Professional HTML Assistant Pro Endereço Web

18 Programas WYSIWYG 18 Estes programas simplificam as fases iniciais de criação de websites para os utilizadores menos experientes. Programa Innova Studio Web Studio HotDog Page Wiz Whizzywig Endereço Web

19 O que é HTML? 19 A S PÁGINAS WEB SÃO CONSTITUÍDAS ESSENCIALMENTE POR INSTRUÇÕES ESCRITAS NA LINGUAGEM HYPERTEXT M ARKUP LANGUAGE ( HTML). O HTML É UMA LINGUAGEM DE PROGRAMAÇÃO SIMPLES, DESTINADA SOBRETUDO A UM BROWSER DA WEB, TAL COMO O M ICROSOFT INTERNET EXPLORER, QUE ASPECTO UMA PÁGINA WEB DEVERÁ TER NO ECRÃ.

20 A linguagem HTML é composta por elementos. 20 Um parágrafo ou uma imagem, por exemplo é um elemento Os elementos por sua vez são constituídos por tags,, atributos e por vezes conteúdo.

21 Tags 21 UMA TAG (OU MARCA) NÃO É MAIS DO QUE UM ESQUEMA DESCRITIVO QUE INDICA A UM BROWSER DA WEB A NATUREZA DO ELEMENTO EM QUESTÃO. <P> </P>. <IMG>

22 Tag de início 22 o início de cada elemento é identificado pelo nome desseelementoentresinaisdemenoremaior(<e>); a isto chama-se uma Tag de início. O início de um parágrafo, por exemplo, é identificado por<p>;seforumaimagemé <IMG>.

23 Tag de fim 23 o fim de um elemento é assinalado pela Tag de fim, à semelhança da tag de início, com excepção de a tag de fim conter uma barra antes do nome do elemento. Deste modo a tag de fim para um parágrafo é </P>. Alguns elementos como, por ex. IMG, não têmtagsdefim.

24 Atributos 24 Um atributo é uma modificação do elemento-base. <IMG width= 100 height= 30 >

25 Conteúdo 25 Consiste em tudo o que medeia entre a tag de início e a tagde fim <P>Este é o conteúdo deste parágrafo. </P>

26 Determinar a estrutura da sua página Web 26 Existem dois tipos básicos de estrutura de páginas Web: Normal Tem uma estrutura autónoma Frames Permitem colocar mais de uma página Web no ecrã ao mesmo tempo.

27 Página Web normal 27

28 Página Web com frames 28

29 Elementos normais Uma página Web normal dispõe de uma estrutura básica com 3 elementos: HTML HEAD BODY 29 O elementos HTML contém os elementos HEAD e BODY

30 <HTML> Exemplo: 30 <HEAD> </HEAD> <BODY> </BODY> </HTML> Pode-se criar uma página Web sem usar as tags HTML, HEAD e BODY, mas não é recomendável. Todo o código referente ao que é visível na página Web diz respeito ao elemento BODY. O elemento HEAD, contém informação como, por exemplo, o título da página, que fica entre as tags <TITLE> e </TITLE>

31 <HEAD> <TITLE> Este é o título da página. </TITLE> </HEAD> O título não aparece na página Web em si é apresentado na barra de título, na parte superior do browser da Web do visitante. 31

32 Parágrafos 32 Os elementos do parágrafo são usados habitualmente para colocar texto numa página Web. O texto é incluído entre as tags <P> e </P> como no exemplo seguinte: <P>É aqui que é colocado o conteúdo textual. </P> Esta tag não é necessário utilizá-la, no entanto a maioria dos programas de criação de páginas Web adiciona-as automaticamente.

33 Laboratório 1 1. Vamos começar a nossa primeira página HTML. Para isso vamos utilizar o Bloco de Notas do Windows como editor de textos para escrever as páginas em HTML O Bloco de notas está em: Iniciar todos os programas Acessórios Bloco de Notas

34 Laboratório 1 (cont.) Vamos de seguida configurar o bloco de notas para inserir uma quebra automática de linha Menu Formatar Quebra automática de linha

35 Laboratório 1 (cont.) Agora escreva o seguinte: <HTML> <HEAD> <TITLE>Faça um site HTML</TITLE> </HEAD> (linha em branco) <BODY> Olá amigo seja bem vindo </BODY> </HTML>

36 Laboratório 1 (cont.) Vamos guardar o documento: Menu Arquivo Salvar Como Guarde na pen numa pasta designada Laboratórios e dê o nome Lab1.htm Feche o Bloco de Notas 5. Para visualizar o resultado no seu navegador abra o Windows Explorer e dê um duplo clique com o botão esquerdo do rato sobre o ficheiro que guardou.

37 Atributos da tag BODY 37 Como viu no exemplo anterior o conteúdo inserido entre as tags <BODY> e </BODY> é exibido na janela principal do navegador. A tag <BODY> pode conter atributos que permitem alterar a aparência geral da página, tais como: cor de fundo, imagem de fundo, cor padrão para o texto que será exibido na página, etc.

38 Bgcolor Atributos da tag BODY (cont) 38 Define uma cor de fundo para a página. Se esse atributo for omitido, o navegador exibe a página de fundo padrão, normalmente branco ou cinza. Podemos definir as cores de 3 maneiras diferentes: Nome da cor em inglês (black, yellow, red, blue, etc.) Em hexadecimal (#FFFFFF, # etc.) RGB

39 Atributos da tag BODY (cont) 39 <BODY BGCOLOR= nome da cor > Exemplos: 1. <BODY BGCOLOR= yellow > 2. <BODY BGCLOR= FFFF00 > Este exemplo apresenta uma página com fundo amarelo.

40 Atributos da tag BODY (cont) 40 Tabela das cores básicas Aqua Black Blue Fuchsia (#00FFFF) (#000000) (#0000FF) (#FF00FF) Green Gray Lime Maroon (#008000) (#808080) (#00FF00) (#800000) Navy Olive Purple Red (#000080) (#808000) (#800080) (#FF0000) Silver Teal White Yellow (#C0C0C0) (#008080) (#FFFFFF) (#FFFF00)

41 Atributos da tag BODY (cont) 41 Text Define uma cor para o texto exibido em toda a página. <BODY TEXT= blue > ou <BODY TEXT= #0000FF >

42 Laboratório 2 Inserir atributos na tag <BODY> 4. Vamos abrir o documento lab1.htm do bloco de notas e altere a linha 5: <HTML> <HEAD> <TITLE>Faça um site HTML</TITLE> </HEAD> (linha em branco) <BODY BGCOLOR= #FFCC00 TEXT= > Olá amigo seja bem vindo </BODY> </HTML> 42 Guarde o trabalho e visualize-o com o Internet Explorer.

43 Laboratório 2 43 Os browsers da Web adicionam automaticamente algum espaço entre parágrafos. Se pretendermos adicionar espaço suplementar, podemos fazê-lo através do elemento de quebra de linha (BR): <P>Este é o 1º parágrafo.</p> <BR> <P>Este parágrafo. Tem um espaço acima.</p> Grave o ficheiro com o nome lab2.html

44 Títulos 44 O HTML usa o tamanho H1 (título maior) até ao H5 (tamanho de letra menor) Abra o laboratório 2 e acrescente o seguinte:. <H1>O site dos pinguins</h1> <P>Não sei se esta tema interessa a alguém, de qualquer forma vou falar sobre eles</p> <H2> Características dos Pinguins </H2>O <P>O que se pode dizer sobre eles? São uns animais pretos com uma gravata branca, vivem nas terras frias e gostam de peixe</p>

45 Tipos de letra 45 Os dois elelemntos mais usados para alterar o tipo de letra são o B (negrito) e I (itálico). <P> Escrita normal. <B> Escrita a negrito</b> <I> Escrita em itálico</i></p> Também se pode utilizar o elemento FONT para definir o tipo de texto (Arial, Times New Roman, etc.) bem como o tamanho e a cor desse tipo de letra.

46 Exemplo 46

47 Linhas 47 É P O S S Í V E L D E F I N I R A L A R G U R A D A S R É G U A S C O M O U M A P E R C E N T A G E M D A L A R G U R A D O E C R Ã O U C O M O U M V A L O R E X A C T O E M P I X É I S. O V A L O R P R E D E F I N I D O É %, P O R T A N T O S E N Ã O E S P E C I F I C A R M O S N E N H U M É E S S E Q U E S E R Á U S A D O. P A R A E S P E C I F I C A R M O S U M A L A R G U R A D E 5 0 %, T E R E M O S D E U S A R O S E G U I N T E C Ó D I G O : < H R W I D T H = 5 0 % > S E Q U I S E R M O S I N D I C A R P I X É I S F A R E M O S, < H R W I D T H = > P A R A D E F I N I R A A L T U R A F A R E M O S : < H R S I Z E = 6 >

48 Por predefinição a linha é sombreada. Para tornar uma linha sólida usase: <HR noshade> Exemplo: <HR> <HR WIDTH= 100% > <HR WIDTH= 50% > <HR WIDTH= 200 > <HR WIDTH= 400 > <SIZE= 10 > <HR SIZE= 6 NOSHADE> 48

49 Colorir C O L O C A Ç Ã O N O E L E M E N T O B O D Y 49 TEXT - cor do texto BGCOLOR - cor do fundo LINK cor dol ink não visitado VLINK cor do link visitado ALINK Cor do link em que alguém clica (o link activo) Exemplo: <BODY text= black BGCOLOR= White link= blue vlink= red alink= purple >

50 50 Criar Links Quando se fala em WWW, tudo se baseia em links ou hiperligações (que ligam os diferentes ficheiros) Cria-se um link com o elemento de âncora (A) Exemplo: <href= A parte assinalada com conteúdo indica o local preenchido com palavras ou imagens em que os utilizadores podem aceder ao ficheiro associado.

51 NOTA: 51 Os atributos bgcolor e text da tag Os atributos bgcolor e text da tag body foram desaprovados nas recomendações mais recentes do W3C para a linguagem HTML. A forma mais recomendada baseia-se na utilização de folhas de estilo CSS. Mais adiante vamos aprender os conceitos básicos da CSS.

52 Tag <META> 52 A TAG <HEAH> ALÉM DO TÍTULO PODE CONTER OUTRAS INFORMAÇÕES, TAIS COMO PASSAR INFORMAÇÕES PARA OS SITES DE BUSCA, A CTUALIZAR A UTOMATICAMENTE A PÁGINA NUM INTERVALO DE TEMPO DEFINIDO, ETC. ESSAS INFORMAÇÕES SÃO COLOCADAS NA TAG META.

53 Os campos >META> possuem 3 atributos principais: Name: indica um nome para a informação. http-equiv: faz uma correspondência com campos de cabeçalho do protocolo http. A informação contida nesse campo pode ser lida pelos navegadores e provocar algumas acções. Content: define o conteúdo. 53

54 Exemplo prático: <HEAD> <META http-equiv= content-type content= text/html; charset=iso > <META name= Keywords content= HTML, internet, web, livro > <TITLE> Faça um Site HTML</TITLE> <HEAD> A função Content-Type, indica o conjunto de caracteres usado pela A função Content-Type, indica o conjunto de caracteres usado pela página que está sendo exibida, fazendo com que o navegador exiba os caracteres especiais que estejam presentes no texto. Para garantir uma exibição correcta da língua portuguesa usamos o charset ISSO Neste caso, a tag <META> terá a sintaxe colocada em cima. 54

55 Laboratório 4 55 <H1>Texto do cabeçalho de nível 1 </H1>

56 Exemplo prático: Uma outra aplicação para o http-equiv é o Refresh que tem por objectivo fazer com56que o navegador execute uma determinada página após algum tempo preestabelecido. <META http-equiv= Refresh content= 5; URL=http.facaumsite.com.br > A homepage da série faça um site será exibida automaticamente após 5 segundos. O atributo name pode conter várias palavra-chave, sendo a mais comum KeyWords cuja função é ajudar os sites de busca. <META name= Keywords content= HTML, internet, web, livro > Em que as palavras de busca são: HTML, Internet, web e livro. Laboratório

57 Imagens Para colocar imagens na WWW, é preciso usar ficheiros de gráficos num de 3 formatos comuns: GIF, JPEG ou PNG. 57 E de onde vêm as Imagens? Podemos criá-las de raiz ou pode fazer download de ficheiros prontos a usar a partir de alguns websites indicados na tabela seguinte.

58 Fontes de ClipArt 58 Nome do Website Animation Arthouse Barry s ClipArt Server ClipArt Connection CoolArchive Free Clip Art Graphics Maps Endereço Web g art.htm

59 Imagens 59 Além do texto, há outro item muito comum nas páginas Web: a imagem, representada pelo elemento IMG. Para isso é necessário o atributo de origem (src) que especifica o nome e, se o ficheiro estiver numa localização diferente do directório onde se encontra o ficheiro HTML associado, a localização do ficheiro de gráficos. Assim, deve-se codificar a página do seguinte modo: <IMG src= seated16.jpg >