Apuena Vieira Gomes

Adja Ferreira de Andrade

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