2ª edição disciplina informática e educação · 2010. 8. 20. · 2ª edição aula 13...

Apuena Vieira Gomes

Adja Ferreira de Andrade

Autores

aula

13

Editor HTML do OpenOffice

Informática e EducaçãoD I S C I P L I N A2ª Edição

Governo Federal

Presidente da RepúblicaLuiz Inácio Lula da Silva

Ministro da EducaçãoFernando Haddad

Secretário de Educação a Distância – SEEDRonaldo Motta

Universidade Federal do Rio Grande do Norte

ReitorJosé Ivonildo do Rêgo

Vice-ReitorNilsen Carvalho Fernandes de Oliveira Filho

Secretária de Educação a DistânciaVera Lúcia do Amaral

Secretaria de Educação a Distância- SEDIS

Coordenadora da Produção dos MateriaisCélia Maria de Araújo

Projeto GráficoIvana Lima

Revisores de Estrutura e LinguagemEugenio Tavares BorgesMarcos Aurélio FelipePedro Daniel Meirelles FerreiraTatyana Mabel Nobre Barbosa

Revisoras de Língua PortuguesaJanaina Tomaz Capistrano

Sandra Cristinne Xavier da Câmara

IlustradoraCarolina Costa

Editoração de ImagensAdauto HarleyCarolina Costa

DiagramadoresBruno Cruz de Oliveira

Maurício da Silva Oliveira JúniorMariana Araújo Brito

Thaisa Maria Simplício Lemos

Imagens UtilizadasBanco 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 – www.masterfile.cpomMorgueFile – www.morguefile.com

Pixel Perfect Digital – www.pixelperfectdigital.comFreeImages – www.freeimages.co.uk

FreeFoto.com – www.freefoto.comFree Pictures Photos – www.fre-pictures-photos.com

BigFoto – www.bigfoto.comFreeStockPhotos.com – www.freestockphotos.com

OneOddDude.net – www.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, 2005.316 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 85-7273-289-6 CDD 370RN/UF/BCZM 2005/49 CDU 37:004

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.

11/07/2007

12ª Edição Aula 13 Informática e Educação

Apresentação

esde 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 ehá 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.

D

Objetivos

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.

1

2

2 Aula 13 Informática e Educação 2ª Edição

Construindo uma página HTML

a 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 peloeditor 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.

D


Iniciando a criação deuma 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.


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?

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.

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.

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.).

Imagem.bmp em 300dpi - 232Kb

Imagem.gif em 300dpi - 174Kb

Imagem.jpg em 300dpi - 130Kb


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 tabelasAs 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.


Informática e Educação Objetivos do Curso ParticipantesAtividades - Tiago

- Pedro

Eventos Cronograma

Notícias E-mail

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.

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:

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).


Figura 2

Inserindo hiperlinksAs 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.

Seca do Nordeste

Problema Conseqüência Soluções

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.


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áginasda web, e-mail, etc.

Vamos juntos testar como pode ser criado um hiperlink, realizando a Atividade 4!

Atividade 4

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.

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.

1

2

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.

3


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).

4

Figura 4

Ao final de sua página, você pode inserir um link para o seu e-mail. O processo é muito semelhante ao que fizemos no item 2. Selecionando a opção Correio, configura-se o endereço de e-mail do usuário. O resultado dessa ação pode ser visualizado na tela a seguir.

5

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.

6

Figura 5

[email protected]


Propriedades de uma páginas 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.

A

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


Como publicar umapágina 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 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.

V

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 (www.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

resp

osta


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.

2

Figura 8

ResumoNesta 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çãoQuais são os principais tipos de links ou referências que podem ser feitos no editor do OpenOffice?1


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-mail e para sites que forem de seu interesse.

3

ReferênciasHEIDE, Ann; STILBORNE, Linda. Guia do professor para a internet. 2.ed. Porto Alegre: Artes Médicas, 2000.

MARAN, Ruth. Internet e world wide web. São Paulo: Berkeley Brasil, 1996.

TAJRA, Sanmya Feitosa. Projetos em sala de aula: internet. São Paulo: Érica, 1999.

2ª edição disciplina informática e educação · 2010. 8. 20. · 2ª edição aula 13...

Documents