Autores aula 13 Editor HTML do OpenOfce Informtica e Educao D I S C I P L I N A 2 Edio Governo Federal Presidente da Repblica Luiz Incio Lula da Silva Ministro da Educao Fernando Haddad Secretrio de Educao a Distncia SEED Ronaldo Motta Universidade Federal do Rio Grande do Norte Reitor Jos Ivonildo do Rgo Vice-Reitor Nilsen Carvalho Fernandes de Oliveira Filho Secretria de Educao a Distncia Vera Lcia do Amaral Secretaria de Educao a Distncia- SEDIS Coordenadora da Produo dos Materiais Clia Maria de Arajo Projeto Grco Ivana Lima Revisores de Estrutura e Linguagem Eugenio Tavares Borges Marcos Aurlio Felipe Pedro Daniel Meirelles Ferreira Tatyana Mabel Nobre Barbosa Revisoras de Lngua Portuguesa Janaina Tomaz Capistrano Sandra Cristinne Xavier da Cmara Ilustradora Carolina Costa Editorao de Imagens Adauto Harley Carolina Costa Diagramadores Bruno Cruz de Oliveira Maurcio da Silva Oliveira Jnior Mariana Arajo Brito Thaisa Maria Simplcio Lemos Imagens Utilizadas Banco de Imagens Sedis (Secretaria de Educao a Distncia) - UFRN MasterClips IMSI MasterClips Collection, 1895 Francisco Blvd, East, San Rafael, CA 94901,USA. MasterFile www.masterle.cpom MorgueFile www.morguele.com Pixel Perfect Digital www.pixelperfectdigital.com FreeImages www.freeimages.co.uk FreeFoto.com www.freefoto.com Free Pictures Photos www.fre-pictures-photos.com BigFoto www.bigfoto.com FreeStockPhotos.com www.freestockphotos.com OneOddDude.net www.oneodddude.net Diviso de Servios Tcnicos Catalogao da publicao na Fonte. UFRN/Biblioteca Central Zila Mamede Gomes, Apuena Vieira. Informtica e educao: interdisciplinar / Apuena Vieira Gomes, Adja Ferreira de Andrade. Natal, RN: EDUFRN Editora da UFRN, 2005. 316 p. 1. Educao Informtica. 2. Sistemas de informao. 3. Internet. 4. Escola Tecnologias. I. Andrade, Adja Ferreira de. II. Ttulo. ISBN 85-7273-289-6 CDD 370 RN/UF/BCZM 2005/49 CDU 37:004 Copyright 2007 Todos os direitos reservados. Nenhuma parte deste material pode ser utilizada ou reproduzida sem a autorizao expressa da UFRN - Universidade Federal do Rio Grande do Norte. 11/07/2007 1 2 Edio Aula 13 Informtica e Educao Apresentao esde as aulas 3 e 4, quando iniciamos o contato com a Internet, temos discutido sobre o potencial da web (World Wide Web) na Educao como uma ferramenta bastante importante para o processo de ensino-aprendizagem, no qual alunos e professores podem participar conjuntamente da construo de pginas eletrnicas. Agora, o momento de voc construir sua pgina na web utilizando o editor HTML do OpenOfce, o qual bem semelhante ao editor de apresentao estudado na aula 11. Muitos dos seus recursos sero retomados aqui, o que facilitar muito a sua compreenso. H vrios editores no mercado, como o FrontPage e Dreamweaver para Windows e h tambm vrias verses para o Linux. Algumas delas podem ser utilizadas para os dois sistemas operacionais. Mas, no se preocupe com isso agora porque quase todos os comandos que abordaremos podem ser utilizadas em qualquer um deles. Enm, nesta aula, voc estudar vrios recursos, como: criar uma pgina; inserir fundos coloridos; inserir guras da Internet; criar hiperlinks; trabalhar com tabelas; dentre outras funes. Quando estiver familiarizado com o editor, poder preparar sua prpria pgina e colocar seu currculo na Internet, por exemplo. D Objetivos Identicar um editor de HTML como recurso para criar pginas Web. Manusear os recursos bsicos de um editor de textos, insero de imagens, tabelas, marcadores e hiperlinks. 1 2 2 Aula 13 Informtica e Educao 2 Edio Construindo uma pgina HTML a mesma forma que voc criou sua apresentao no OpenOfce (aula 11), seguiremos um roteiro para construir nossa pgina. Primeiro, precisamos saber o que HTML. A sigla tem origem no ingls e signica Hypertext Markup Language, isto , uma linguagem de programao com um formato especco e utilizada para a criao de homepages. Voc pode estar se perguntando o que isso... As homepages so as pginas que voc visita na web, as quais podem ser pessoais ou comerciais com a nalidade de divulgar algum produto ou servio. Um exemplo de cdigo HTML gerado pelo editor ilustrado a seguir, mostrando tamanho de fonte, formatao e alinhamento do caractere e o ttulo do texto (que est em negrito). A visualizao da pgina gerada apresentada na Figura 6, ao nal da aula. Vamos desmisticar alguns destes comandos: <html> //* incio do cdigo*// <head> //* incio do cabealho*// <p> //* incio do pargrafo *// Observe que para indicar o trmino do comando sempre devemos usar barras: </p>, </body>,</html> etc. Vejamos um exemplo do cdigo gerado (trecho de cdigo HTML gerado pelo editor grco): </HEAD> <P ALIGN=CENTER><span style=font-size: 32pt> Pesquisa Sobre o Movimento do SEM TERRA</span></P> <P ALIGN=LEFT><FONT SIZE=4>Inserindo Figuras e tabelas </FONT></P> Parece complicado? Pensando em resolver tais diculdades de programao, foi criado o editor HTML. Trata-se de uma ferramenta grca que utilizamos para facilitar a construo de pginas na web e evitar a necessidade de saber programar na linguagem HTML, o que daria muito mais trabalho e exigiria conhecimentos de um prossional de informtica. Na verdade, esses editores vieram auxiliar bastante nossa tarefa, tornando o processo de criao cmodo e fcil. E agora, por onde comear a construo de sua pgina? Normalmente, voc precisa de um tema motivador, realizao de pesquisa, organizao do contedo, seleo de imagens para, em seguida, constru-la. A seguir, abordaremos alguns tpicos que lhe auxiliaro na criao de sua pgina HTML. D 3 2 Edio Aula 13 Informtica e Educao Iniciando a criao de uma pgina da Web H vrias operaes bsicas de um editor de pginas HTML e, muitas delas, voc j utilizou nos outros aplicativos (editor de texto, planilha, apresentao) do OpenOfce. Podemos, por exemplo, abrir uma pgina para iniciar a edio, gravar (salvar), imprimir, visualizar, recortar, copiar e colar imagens e partes do texto selecionado. Formatao do texto Existem algumas formataes que aplicamos em um editor de textos convencional que podemos tambm aplicar em pginas da Web desenvolvidas no editor do OpenOfce, entre elas: formatao de pargrafos, tipos, estilos e tamanhos de fontes, cores, organizao de itens etc. Os tpicos abordados na atividade 1, a seguir, descrevem a melhor forma de utilizar tais recursos. Atividade 1 Apresentamos uma seqncia de passos que ajudaro voc a formatar o texto de sua pgina. a) Elabore um breve texto sobre a seca do Nordeste para inserir em sua pgina. b) O menu Formatar, opo Caracter, apresenta uma grande variedade de opes de formatao das fontes, efeitos etc. Teste-as!!! Tente evitar uma mistura excessiva de cores! c) Mude a cor de sua pgina. d) Agora chegou a hora de Aumentar/Diminuir o tamanho das fontes. e) Coloque Negrito, Itlico, e Sublinhado. f) Procure o Menu Ver e descubra o cdigo HTML gerado para sua pgina. 4 Aula 13 Informtica e Educao 2 Edio Inserindo imagens Algumas vezes, necessrio inserir imagens em pginas da Web. H vrios locais em que voc pode obt-las, disponibilizado em seu computador, sites da Internet, atravs de ferramentas de desenho, salvando ou capturando imagens via scanner (leitora de imagens e documentos). Lembre-se, voc deve preferir trabalhar com guras que utilizem a extenso do tipo gif ou jpg porque ocupam menos espao (Kbytes) do que as imagens bmp. Mas, se voc est navegando na Internet, encontra alguma gura interessante e gostaria de inseri-la em sua pesquisa, o que deve fazer? Passo 1 Inicialmente, recomenda-se criar uma pasta (diretrio) em seu computador com o nome Imagem. Voc aprendeu a criar uma pasta na aula 9 deste curso. Passo 2 Agora, voc deve selecionar com o mouse na gura desejada e clicar com o boto direito do mouse. Isso abrir uma janela contendo a opo salvar imagem. Passo 3 Para gravar a imagem, o processo semelhante ao que fazemos com qualquer documento: dar um nome para a gura e salv-la em alguma rea do computador. Passo 4 Depois de gravada, basta localiz-la em seu computador (ela dever estar na pasta Imagem, ver passo 1), escolher o lugar desejado e, atravs dos comandos Inserir opo gura, inseri-la. No esquea de previamente, em respeito aos direitos autorais, solicitar a autorizao ao autor para uso da imagem ou texto, colocando a referida fonte de origem. Fcil, no? Agora a sua vez de ver se realmente aprendeu! Atividade 2 Para inserir uma imagem e/ou utilizar os marcadores e listas apresentadas na pgina que voc est construindo, siga as instrues a seguir. a) Insira em sua pgina uma gura relativa a um tema (seca do Nordeste, movimento sem terra etc.). Imagem.bmp em 300dpi - 232Kb Imagem.gif em 300dpi - 174Kb Imagem.jpg em 300dpi - 130Kb 5 2 Edio Aula 13 Informtica e Educao b) Mude o aspecto geral da gura inserida, pressionando o boto esquerdo do mouse sobre ela. Uma outra alternativa para modicar a imagem utilizar a opo do Menu Editar e, posteriormente, a opo Mapa da Imagem, que mostra suas propriedades. c) Dena o alinhamento da gura a partir de suas propriedades. d) Um outro recurso utilizado em sua pgina so as listas ou marcadores. O recurso de listas permite melhor esquematizar itens/sub-itens de um determinado assunto. Para exercitar a utilizao desse recurso, crie um slide contendo listas numeradas, por exemplo: 1. trabalhadoras das reas de Reforma Agrria; 2. jovens do meio rural; 3. comunidades rurais prximas. e) Crie outro slide contendo listas no numeradas: - incluso digital de trabalhadores nas reas de Reforma Agrria; - rede nacional de comunicao, educao e organizao do MST; - capacitao de jovens no meio rural. Inserindo tabelas As tabelas so um recurso importante para uma melhor apresentao ou disposio das informaes em sua pgina. A sua criao pode ser feita a partir do boto de inserir tabelas na barra de ferramentas esquerda de seu editor. Voc deve indicar o nmero de colunas e linhas desejadas (dimenso). H uma grande variedade de opes de formatao e edio que podem ser acessadas a partir do menu Inserir opo tabela (muito similar manipulao de tabelas do editor de textos). Veja um exemplo de tabela na Figura 1. 6 Aula 13 Informtica e Educao 2 Edio Informtica e Educao Objetivos do Curso Participantes Atividades - Tiago - Pedro Eventos Cronograma Notcias E-mail Figura 1 Exemplo de tabela Algumas vezes, aps criarmos uma tabela, sentimos necessidade de modicar sua estrutura, criando ttulos ou fazendo subdivises, por exemplo. Para tanto, necessrio posicionar o cursor dentro da tabela, e atravs do menu formatar, utilizar os comandos que testaremos na Atividade 3. d) Coloque um ttulo Seca do Nordeste na sua primeira coluna. e) Centralize o contedo dessa clula. Veja se at agora sua tabela est assim: Atividade 3 Para elaborar e formatar uma tabela, siga as orientaes a seguir. a) Crie uma tabela com 3 colunas, cujos ttulos sejam: problemas, conseqncias e solues, e com 3 linhas em branco. b) Selecione a primeira linha da tabela com o mouse. c) Para transformar vrias colunas (ou linhas) numa grande coluna (linha): selecione-as com o mouse e, depois, no menu Formatar, escolha o comando Mesclar (poder encontrar a opo merge em alguns editores). 7 2 Edio Aula 13 Informtica e Educao Figura 2 Inserindo hiperlinks As referncias ou hiperlinks permitem-nos fazer ligaes com informaes relacionadas ao assunto desenvolvido naquele ponto da pgina que est sendo construdo. Para a criao de uma referncia, selecione o Menu Inserir e, em seguida, a opo Hiperlink..., ou utilize o boto que se encontra na barra de ferramentas de seu editor. Seca do Nordeste Problema Conseqncia Solues f) Preencha o restante da tabela problemas, conseqncias e solues com a pesquisa realizada sobre o tema proposto. g) Caso deseje transformar uma grande coluna (ou linha) em vrias, primeiro, selecione-as com o mouse, em seguida, no menu Formatar, clique no comando Dividir (poder encontrar a opo split em alguns editores). h) Crie, utilizando os recursos aprendidos, uma tabela semelhante ao exemplo 1 da Figura 1. Utilize o menu Inserir para inserir a gura desejada. Aps isso, direcione o local do qual voc retirar a imagem. i) Faa um teste de apagar alguma coluna ou linha de sua tabela. Basta selecionar a linha ou coluna desejada e clicar na opo Excluir. Em outros editores poderia usar o boto Del. 8 Aula 13 Informtica e Educao 2 Edio Figura 3 Como criar um hiperlink Vrios tipos de hiperlinks podem ser inseridos em sua pgina: referncias para dentro de um mesmo documento ou local, bastante til para documentos longos e permitindo o desvio para uma parte especca do texto, e referncias para documentos externos, pginas da web, e-mail, etc. Vamos juntos testar como pode ser criado um hiperlink, realizando a Atividade 4! Atividade 4 Para a criao de uma referncia, selecione com o mouse uma palavra, no texto, que o ponto para o qual se deseja realizar o desvio. Selecione o menu Inserir, opo hiperlink e aparecer a janela para congurar a referncia. No espao chamado destino, voc deve digitar o endereo da pgina para a qual a referncia ser remetida e transportada ao clicar com o mouse, em aplicar e fechar janela. 1 2 Faa uma pesquisa na Internet (utilizando as ferramentas de busca) para selecionar textos ou imagens sobre a seca do Nordeste. Crie hiperlinks para alguns dos sites encontrados. 3 9 2 Edio Aula 13 Informtica e Educao Se quiser criar uma referncia para um arquivo de texto que esteja gravado em seu computador, basta selecionar o boto Documento e buscar o arquivo em seu diretrio (pasta de trabalho). 4 Figura 4 Ao nal de sua pgina, voc pode inserir um link para o seu e-mail. O processo muito semelhante ao que zemos no item 2. Selecionando a opo Correio, congura-se o endereo de e-mail do usurio. O resultado dessa ao pode ser visualizado na tela a seguir. 5 Da mesma forma que voc cria hiperlinks utilizando palavras-chave de seu texto, pode criar tambm a partir de imagens. Novamente, precisa escolher a gura que ser o hiperlink e repetir o processo realizado no item 4. 6 Figura 5 sedis@reitoria.ufrn.br 10 Aula 13 Informtica e Educao 2 Edio Propriedades de uma pgina s pginas criadas no editor podem ser modicadas em aspectos como o fundo, as margens, a linguagem dos textos inseridos, as cores dos hiperlinks, textos, dentre outros. Muitas vezes, h caminhos paralelos para a mesma ao. Por exemplo, para modicar as cores de fundo de sua pgina voc pode utilizar duas opes: acionar a opo do menu Formatar e, em seguida, selecionar a opo Pgina e clicar em plano de fundo. Ao selecionar uma dessas alternativas, ser apresentada uma janela na qual podemos encontrar algumas opes para organizar e modicar a pgina. A Figura 6 Propriedades da Pgina Na opo plano de fundo, alm da modicao da cor, possvel inserir uma imagem, conforme mostrado na gura a seguir: Figura 7 Inserindo guras como plano de fundo 11 2 Edio Aula 13 Informtica e Educao Como publicar uma pgina da Web oc deve estar se perguntando: Agora que eu aprendi a criar minha homepage como poderei visualiz-la na Internet? Basicamente, voc possui duas opes: ou escolhe um servio de hospedagem gratuito ou um servio pago. Alguns sites na Internet oferecem as duas possibilidades. O servio de hospedagem, isto , o servio de armazenar suas informaes (textos, imagens etc.) em um computador que est conectado Internet pode ser diferenciado de acordo com o seu objetivo. Se a inteno simplesmente disponibilizar sua pgina pessoal, o servio gratuito uma boa escolha. Mas, se voc est pensando em ter um site comercial, o servio pago pode ser uma soluo mais segura. V Atividade 5 Vamos publicar sua pgina pessoal na web? Para realizar essa tarefa, ser necessrio fazer uma pesquisa atravs, por exemplo, do Google (www.google. com.br) e descobrir quais sites realizam hospedagem gratuita. Vrios endereos podem surgir, portanto, procure avaliar as vantagens e desvantagens de cada um, antes de escolher o seu. Quanto espao terei disponvel? Essa uma pergunta que voc buscar responder. Em seguida, s aceitar os termos do servio e seguir os passos para enviar suas informaes. Voc ver como fcil! s u a
r e s p o s t a 12 Aula 13 Informtica e Educao 2 Edio Se voc seguiu todos os passos mencionados nesta aula, deve ser capaz de criar uma pgina web cheia de recursos e bem colorida. Como atividade nal, gostaramos que construsse uma pgina semelhante Figura 8. Lembre-se de que para visualiz-la, deve sempre utilizar um browser (navegador), conforme discutimos nas aulas 4 e 5. 2 Figura 8 Resumo Nesta aula, explicamos como desenvolver pginas web utilizando o editor HTML do OpenOfce. A praticidade de usar um editor considervel, uma vez que no h necessidade de ser um especialista em informtica. Tornar-se um webdesign (criador de pginas web) mais uma questo de criatividade do que de conhecimento tcnico. Os editores so muito intuitivos e simplicam bastante a criao das pginas atravs dos vrios recursos que disponibilizam. Esperamos que voc tenha aprendido alguns dos conceitos estudados, permitindo-lhe divulgar conhecimentos e servios na Internet, assim como construir a pgina de seu curso ou sua pgina pessoal. Auto-avaliao Quais so os principais tipos de links ou referncias que podem ser feitos no editor do OpenOfce? 1 13 2 Edio Aula 13 Informtica e Educao Depois de realizar as atividades solicitadas, chegou o momento de vericar se voc aprendeu todos os recursos estudados e a construir sua pgina, contendo dados pessoais, informaes sobre sua cidade ou Estado, sobre seus amigos etc. A pgina dever conter os seguintes recursos: fundo colorido, ttulo em negrito e centralizado, marcadores ou listas, imagens, hiperlink para seu e-mail e para sites que forem de seu interesse. 3 Referncias HEIDE, Ann; STILBORNE, Linda. Guia do professor para a internet. 2.ed. Porto Alegre: Artes Mdicas, 2000. MARAN, Ruth. Internet e world wide web. So Paulo: Berkeley Brasil, 1996. TAJRA, Sanmya Feitosa. Projetos em sala de aula: internet. So Paulo: rica, 1999.