Informática e Educação. 2ª Edição DISCIPLINA. Editor HTML do OpenOffice. Autores. Apuena Vieira Gomes. Adja Ferreira de Andrade.

Transcrição

1 2ª Edição DISCIPLINA Informática e Educação Editor HTML do OpenOffice Autores Apuena Vieira Gomes Adja Ferreira de Andrade aula 13

2 Governo Federal Presidente da República Luiz Inácio Lula da Silva Ministro da Educação Fernando Haddad Secretário de Educação a Distância SEED Ronaldo Motta Universidade Federal do Rio Grande do Norte Reitor José Ivonildo do Rêgo Vice-Reitor Nilsen Carvalho Fernandes de Oliveira Filho Secretária de Educação a Distância Vera Lúcia do Amaral Secretaria de Educação a Distância- SEDIS Coordenadora da Produção dos Materiais Célia Maria de Araújo Projeto Gráfico Ivana Lima Revisores de Estrutura e Linguagem Eugenio Tavares Borges Marcos Aurélio Felipe Pedro Daniel Meirelles Ferreira Tatyana Mabel Nobre Barbosa Revisoras de Língua Portuguesa Janaina Tomaz Capistrano Sandra Cristinne Xavier da Câmara Ilustradora Carolina Costa Editoração de Imagens Adauto Harley Carolina Costa Diagramadores Bruno Cruz de Oliveira Maurício da Silva Oliveira Júnior Mariana Araújo Brito Thaisa Maria Simplício Lemos Imagens Utilizadas Banco de Imagens Sedis (Secretaria de Educação a Distância) - UFRN MasterClips IMSI MasterClips Collection, 1895 Francisco Blvd, East, San Rafael, CA 94901,USA. MasterFile MorgueFile Pixel Perfect Digital FreeImages FreeFoto.com Free Pictures Photos BigFoto FreeStockPhotos.com OneOddDude.net Divisão de Serviços Técnicos Catalogação da publicação na Fonte. UFRN/Biblioteca Central Zila Mamede Gomes, Apuena Vieira. Informática e educação: interdisciplinar / Apuena Vieira Gomes, Adja Ferreira de Andrade. Natal, RN: EDUFRN Editora da UFRN, p. 1. Educação Informática. 2. Sistemas de informação. 3. Internet. 4. Escola Tecnologias. I. Andrade, Adja Ferreira de. II. Título. ISBN CDD 370 RN/UF/BCZM 2005/49 CDU 37:004 11/07/2007 Copyright 2007 Todos os direitos reservados. Nenhuma parte deste material pode ser utilizada ou reproduzida sem a autorização expressa da UFRN - Universidade Federal do Rio Grande do Norte.

3 Apresentação Desde as aulas 3 e 4, quando iniciamos o contato com a Internet, temos discutido sobre o potencial da web (World Wide Web) na Educação como uma ferramenta bastante importante para o processo de ensino-aprendizagem, no qual alunos e professores podem participar conjuntamente da construção de páginas eletrônicas. Agora, é o momento de você construir sua página na web utilizando o editor HTML do OpenOffice, o qual é bem semelhante ao editor de apresentação estudado na aula 11. Muitos dos seus recursos serão retomados aqui, o que facilitará muito a sua compreensão. Há vários editores no mercado, como o FrontPage e Dreamweaver para Windows e há também várias versões para o Linux. Algumas delas podem ser utilizadas para os dois sistemas operacionais. Mas, não se preocupe com isso agora porque quase todos os comandos que abordaremos podem ser utilizadas em qualquer um deles. Enfim, nesta aula, você estudará vários recursos, como: criar uma página; inserir fundos coloridos; inserir figuras da Internet; criar hiperlinks; trabalhar com tabelas; dentre outras funções. Quando estiver familiarizado com o editor, poderá preparar sua própria página e colocar seu currículo na Internet, por exemplo. Objetivos 1 2 Identificar um editor de HTML como recurso para criar páginas Web. Manusear os recursos básicos de um editor de textos, inserção de imagens, tabelas, marcadores e hiperlinks. 2ª Edição Aula 13 Informática e Educação 1

4 Construindo uma página HTML Da mesma forma que você criou sua apresentação no OpenOffice (aula 11), seguiremos um roteiro para construir nossa página. Primeiro, precisamos saber o que é HTML. A sigla tem origem no inglês e significa Hypertext Markup Language, isto é, uma linguagem de programação com um formato específico e utilizada para a criação de homepages. Você pode estar se perguntando o que é isso... As homepages são as páginas que você visita na web, as quais podem ser pessoais ou comerciais com a finalidade de divulgar algum produto ou serviço. Um exemplo de código HTML gerado pelo editor é ilustrado a seguir, mostrando tamanho de fonte, formatação e alinhamento do caractere e o título do texto (que está em negrito). A visualização da página gerada é apresentada na Figura 6, ao final da aula. Vamos desmistificar alguns destes comandos: <html> //* início do código*// <head> //* início do cabeçalho*// //* início do parágrafo *// Observe que para indicar o término do comando sempre devemos usar barras: , </body>,</html> etc. Vejamos um exemplo do código gerado (trecho de código HTML gerado pelo editor gráfico): </HEAD> Pesquisa Sobre o Movimento do SEM TERRA Inserindo Figuras e tabelas Parece complicado? Pensando em resolver tais dificuldades de programação, foi criado o editor HTML. Trata-se de uma ferramenta gráfica que utilizamos para facilitar a construção de páginas na web e evitar a necessidade de saber programar na linguagem HTML, o que daria muito mais trabalho e exigiria conhecimentos de um profissional de informática. Na verdade, esses editores vieram auxiliar bastante nossa tarefa, tornando o processo de criação cômodo e fácil. E agora, por onde começar a construção de sua página? Normalmente, você precisa de um tema motivador, realização de pesquisa, organização do conteúdo, seleção de imagens para, em seguida, construí-la. A seguir, abordaremos alguns tópicos que lhe auxiliarão na criação de sua página HTML. 2 Aula 13 Informática e Educação 2ª Edição

5 Iniciando a criação de uma página da Web Há várias operações básicas de um editor de páginas HTML e, muitas delas, você já utilizou nos outros aplicativos (editor de texto, planilha, apresentação) do OpenOffice. Podemos, por exemplo, abrir uma página para iniciar a edição, gravar (salvar), imprimir, visualizar, recortar, copiar e colar imagens e partes do texto selecionado. Formatação do texto Existem algumas formatações que aplicamos em um editor de textos convencional que podemos também aplicar em páginas da Web desenvolvidas no editor do OpenOffice, entre elas: formatação de parágrafos, tipos, estilos e tamanhos de fontes, cores, organização de itens etc. Os tópicos abordados na atividade 1, a seguir, descrevem a melhor forma de utilizar tais recursos. Atividade 1 Apresentamos uma seqüência de passos que ajudarão você a formatar o texto de sua página. a) Elabore um breve texto sobre a seca do Nordeste para inserir em sua página. b) O menu Formatar, opção Caracter, apresenta uma grande variedade de opções de formatação das fontes, efeitos etc. Teste-as!!! Tente evitar uma mistura excessiva de cores! c) Mude a cor de sua página. d) Agora chegou a hora de Aumentar/Diminuir o tamanho das fontes. e) Coloque Negrito, Itálico, e Sublinhado. f) Procure o Menu Ver e descubra o código HTML gerado para sua página. 2ª Edição Aula 13 Informática e Educação 3

6 Inserindo imagens Algumas vezes, é necessário inserir imagens em páginas da Web. Há vários locais em que você pode obtê-las, disponibilizado em seu computador, sites da Internet, através de ferramentas de desenho, salvando ou capturando imagens via scanner (leitora de imagens e documentos). Lembre-se, você deve preferir trabalhar com figuras que utilizem a extensão do tipo gif ou jpg porque ocupam menos espaço (Kbytes) do que as imagens bmp. Mas, se você está navegando na Internet, encontra alguma figura interessante e gostaria de inseri-la em sua pesquisa, o que deve fazer? Imagem.bmp em 300dpi - 232Kb Passo 1 Inicialmente, recomenda-se criar uma pasta (diretório) 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 figura desejada e clicar com o botão direito do mouse. Isso abrirá uma janela contendo a opção salvar imagem. Imagem.gif em 300dpi - 174Kb Passo 3 Para gravar a imagem, o processo é semelhante ao que fazemos com qualquer documento: dar um nome para a figura 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, através dos comandos Inserir opção figura, inseri-la. Não esqueça de previamente, em respeito aos direitos autorais, solicitar a autorização ao autor para uso da imagem ou texto, colocando a referida fonte de origem. Imagem.jpg em 300dpi - 130Kb Fácil, não? Agora é a sua vez de ver se realmente aprendeu! Atividade 2 Para inserir uma imagem e/ou utilizar os marcadores e listas apresentadas na página que você está construindo, siga as instruções a seguir. a) Insira em sua página uma figura relativa a um tema (seca do Nordeste, movimento sem terra etc.). 4 Aula 13 Informática e Educação 2ª Edição

7 b) Mude o aspecto geral da figura inserida, pressionando o botão esquerdo do mouse sobre ela. Uma outra alternativa para modificar a imagem é utilizar a opção do Menu Editar e, posteriormente, a opção Mapa da Imagem, que mostra suas propriedades. c) Defina o alinhamento da figura a partir de suas propriedades. d) Um outro recurso utilizado em sua página são as listas ou marcadores. O recurso de listas permite melhor esquematizar itens/sub-itens de um determinado assunto. Para exercitar a utilização desse recurso, crie um slide contendo listas numeradas, por exemplo: 1. trabalhadoras das áreas de Reforma Agrária; 2. jovens do meio rural; 3. comunidades rurais próximas. e) Crie outro slide contendo listas não numeradas: - inclusão digital de trabalhadores nas áreas de Reforma Agrária; - rede nacional de comunicação, educação e organização do MST; - capacitação de jovens no meio rural. Inserindo tabelas As tabelas são um recurso importante para uma melhor apresentação ou disposição das informações em sua página. A sua criação pode ser feita a partir do botão de inserir tabelas na barra de ferramentas à esquerda de seu editor. Você deve indicar o número de colunas e linhas desejadas (dimensão). Há uma grande variedade de opções de formatação e edição que podem ser acessadas a partir do menu Inserir opção tabela (muito similar à manipulação de tabelas do editor de textos). Veja um exemplo de tabela na Figura 1. 2ª Edição Aula 13 Informática e Educação 5

8 Informática e Educação Objetivos do Curso Participantes Atividades - Tiago - Pedro Eventos Cronograma Notícias Figura 1 Exemplo de tabela Algumas vezes, após criarmos uma tabela, sentimos necessidade de modificar sua estrutura, criando títulos ou fazendo subdivisões, por exemplo. Para tanto, é necessário posicionar o cursor dentro da tabela, e através do menu formatar, utilizar os comandos que testaremos na Atividade 3. Atividade 3 Para elaborar e formatar uma tabela, siga as orientações a seguir. a) Crie uma tabela com 3 colunas, cujos títulos sejam: problemas, conseqüências e soluções, e com 3 linhas em branco. b) Selecione a primeira linha da tabela com o mouse. c) Para transformar várias colunas (ou linhas) numa grande coluna (linha): selecione-as com o mouse e, depois, no menu Formatar, escolha o comando Mesclar (poderá encontrar a opção merge em alguns editores). d) Coloque um título Seca do Nordeste na sua primeira coluna. e) Centralize o conteúdo dessa célula. Veja se até agora sua tabela está assim: 6 Aula 13 Informática e Educação 2ª Edição

9 Seca do Nordeste Problema Conseqüência Soluções Figura 2 f) Preencha o restante da tabela problemas, conseqüências e soluções com a pesquisa realizada sobre o tema proposto. g) Caso deseje transformar uma grande coluna (ou linha) em várias, primeiro, selecione-as com o mouse, em seguida, no menu Formatar, clique no comando Dividir (poderá encontrar a opção 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 figura desejada. Após isso, direcione o local do qual você retirará a imagem. i) Faça um teste de apagar alguma coluna ou linha de sua tabela. Basta selecionar a linha ou coluna desejada e clicar na opção Excluir. Em outros editores poderia usar o botão Del. Inserindo hiperlinks As referências ou hiperlinks permitem-nos fazer ligações com informações relacionadas ao assunto desenvolvido naquele ponto da página que está sendo construído. Para a criação de uma referência, selecione o Menu Inserir e, em seguida, a opção Hiperlink..., ou utilize o botão que se encontra na barra de ferramentas de seu editor. 2ª Edição Aula 13 Informática e Educação 7

10 Figura 3 Como criar um hiperlink Vários tipos de hiperlinks podem ser inseridos em sua página: referências para dentro de um mesmo documento ou local, bastante útil para documentos longos e permitindo o desvio para uma parte específica do texto, e referências para documentos externos, páginas da web, , etc. Vamos juntos testar como pode ser criado um hiperlink, realizando a Atividade 4! Atividade 4 1 Para a criação de uma referência, selecione com o mouse uma palavra, no texto, que é o ponto para o qual se deseja realizar o desvio. 2 Selecione o menu Inserir, opção hiperlink e aparecerá a janela para configurar a referência. No espaço chamado destino, você deve digitar o endereço da página para a qual a referência será remetida e transportada ao clicar com o mouse, em aplicar e fechar janela. 3 Faça 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. 8 Aula 13 Informática e Educação 2ª Edição

11 4 Se quiser criar uma referência para um arquivo de texto que esteja gravado em seu computador, basta selecionar o botão Documento e buscar o arquivo em seu diretório (pasta de trabalho). Figura 4 5 Ao final de sua página, você pode inserir um link para o seu . O processo é muito semelhante ao que fizemos no item 2. Selecionando a opção Correio, configura-se o endereço de do usuário. O resultado dessa ação pode ser visualizado na tela a seguir. sedis@reitoria.ufrn.br Figura 5 6 Da mesma forma que você cria hiperlinks utilizando palavras-chave de seu texto, pode criar também a partir de imagens. Novamente, precisa escolher a figura que será o hiperlink e repetir o processo realizado no item 4. 2ª Edição Aula 13 Informática e Educação 9

12 Propriedades de uma página As páginas criadas no editor podem ser modificadas 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 ação. Por exemplo, para modificar as cores de fundo de sua página você pode utilizar duas opções: acionar a opção do menu Formatar e, em seguida, selecionar a opção Página e clicar em plano de fundo. Ao selecionar uma dessas alternativas, será apresentada uma janela na qual podemos encontrar algumas opções para organizar e modificar a página. Figura 6 Propriedades da Página Na opção plano de fundo, além da modificação da cor, é possível inserir uma imagem, conforme é mostrado na figura a seguir: Figura 7 Inserindo figuras como plano de fundo 10 Aula 13 Informática e Educação 2ª Edição

13 Como publicar uma página da Web Você deve estar se perguntando: Agora que eu aprendi a criar minha homepage como poderei visualizá-la na Internet? Basicamente, você possui duas opções: ou escolhe um serviço de hospedagem gratuito ou um serviço pago. Alguns sites na Internet oferecem as duas possibilidades. O serviço de hospedagem, isto é, o serviço de armazenar suas informações (textos, imagens etc.) em um computador que está conectado à Internet pode ser diferenciado de acordo com o seu objetivo. Se a intenção é simplesmente disponibilizar sua página pessoal, o serviço gratuito é uma boa escolha. Mas, se você está pensando em ter um site comercial, o serviço pago pode ser uma solução mais segura. Atividade 5 Vamos publicar sua página pessoal na web? Para realizar essa tarefa, será necessário fazer uma pesquisa através, por exemplo, do Google ( com.br) e descobrir quais sites realizam hospedagem gratuita. Vários endereços podem surgir, portanto, procure avaliar as vantagens e desvantagens de cada um, antes de escolher o seu. Quanto espaço terei disponível? Essa é uma pergunta que você buscará responder. Em seguida, é só aceitar os termos do serviço e seguir os passos para enviar suas informações. Você verá como é fácil! sua resposta 2ª Edição Aula 13 Informática e Educação 11

14 Resumo Nesta aula, explicamos como desenvolver páginas web utilizando o editor HTML do OpenOffice. A praticidade de usar um editor é considerável, uma vez que não há necessidade de ser um especialista em informática. Tornar-se um webdesign (criador de páginas web) é mais uma questão de criatividade do que de conhecimento técnico. Os editores são muito intuitivos e simplificam bastante a criação das páginas através dos vários recursos que disponibilizam. Esperamos que você tenha aprendido alguns dos conceitos estudados, permitindo-lhe divulgar conhecimentos e serviços na Internet, assim como construir a página de seu curso ou sua página pessoal. Auto-avaliação 1 Quais são os principais tipos de links ou referências que podem ser feitos no editor do OpenOffice? 2 Se você seguiu todos os passos mencionados nesta aula, deve ser capaz de criar uma página web cheia de recursos e bem colorida. Como atividade final, gostaríamos que construísse uma página semelhante à Figura 8. Lembre-se de que para visualizá-la, deve sempre utilizar um browser (navegador), conforme discutimos nas aulas 4 e 5. Figura 8 12 Aula 13 Informática e Educação 2ª Edição

15 3 Depois de realizar as atividades solicitadas, chegou o momento de verificar se você aprendeu todos os recursos estudados e a construir sua página, contendo dados pessoais, informações sobre sua cidade ou Estado, sobre seus amigos etc. A página deverá conter os seguintes recursos: fundo colorido, título em negrito e centralizado, marcadores ou listas, imagens, hiperlink para seu e para sites que forem de seu interesse. Referências HEIDE, Ann; STILBORNE, Linda. Guia do professor para a internet. 2.ed. Porto Alegre: Artes Médicas, MARAN, Ruth. Internet e world wide web. São Paulo: Berkeley Brasil, TAJRA, Sanmya Feitosa. Projetos em sala de aula: internet. São Paulo: Érica, ª Edição Aula 13 Informática e Educação 13