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

Apuena Vieira Gomes Adja Ferreira de Andrade

Autores

aula

13

Editor HTML do OpenOffice

Informática e Educação

D I S C I P L I N A

2ª Edição

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 – www.masterfile.cpom MorgueFile – www.morguefile.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

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 370

RN/UF/BCZM 2005/49 CDU 37:004

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

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

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*// <p> //* início do parágrafo *//

Observe que para indicar o término do comando sempre devemos usar barras: </p>, </body>,</html> etc.

Vejamos um exemplo do código gerado (trecho de código HTML gerado pelo editor gráfico):

</HEAD>

<P ALIGN=CENTER><span style=”font-size: 32pt”>&nbsp;

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

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.

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

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.

Informática e Educação Objetivos do Curso Participantes

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

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áginas

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

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

Propriedades de uma página

s 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:

Como publicar uma

pá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!

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

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

Quais são os principais tipos de links ou referências que podem ser feitos no editor do OpenOffice?

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ências

HEIDE, 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.