UNIVERSIDADE FEDERAL DO RIO GRANDE SUL FACULDADE DE EDUCAÇÃO

PRÁTICA DE ENSINO EM CIÊNCIAS SOCIAIS GRUPO DE ESTUDOS SOBRE O ENSINO DE CIÊNCIAS SOCIAIS

PROJETO GEECS – INCLUSÃO DIGITAL

Linguagem e Tecnologias Digitais: ressignificando símbolos a nós desconhecidos

MATERIAL ELABORADO POR:

MAURO MEIRELLES

Professor de Prática de Ensino em Ciências Sociais (DEC/FACED/UFRGS) Coord. do Grupo de Estudos sobre o Ensino de Ciênci as Sociais (GEECS/UFRGS) Cel. 55 51 84548183 E-mail: profmeirelles@gmail.com

PORTO ALEGRE, 27 MAIO DE 2006

Termo de licença e uso do material:

O presente material pode ser usado e reproduzido livremente em formato digital ou

físico (impresso) sem nenhum custo aos seus utilizadores desde que – mesmo que seu

uso seja feito em parte ou no todo – seja citada a fonte e sejam dados os créditos aos

seus desenvolvedores.

O material a que ora nos referimos, foi produzido para fins educacionais e é vetado

a qualquer um que dele queira se utilizar o ganho de numerário financeiro por sua venda

ou comercialização.

O uso indevido deste material, sua reprodução para fins comerciais e/ou sua

própria comercialização com fins de ganhos materiais a terceiros – seja em mídia

impressa, digital ou qualquer outra que possa vir a surgir – implica na responsabilidade

legal deste por sua utilização e nas sanções legais cabíveis por sua utilização indevida.

Direito autoral é coisa séria e devemos respeitar o trabalho dos outros. Devemos

dar crédito ao trabalho daqueles que se empenham em sistematizar, produzir e

disponibilizar materiais e metodologias que facilitam o ensino e o aprendizado de novos

conteúdos e tecnologias relacionadas a qualquer área do conhecimento. O conhecimento

é livre, mas seu autor merece o crédito pelo trabalho desenvolvido.

SEMPRE QUE REPRODUZIDO ESSE MATERIAL, EM QUALQUER F ORMATO –

OU MESMO DISPONIBILIZADO EM SERVIDORES WEB, FTP, P2 P, BIT TORRENT, OU

QUALQUER OUTRA FORMA DE TROCA DE ARQUIVOS ESSA LICE NÇA DEVE SER

REPRODUZIDA NA ÍNTEGRA JUNTAMENTE COM OS CRÉDITOS P ELA SUA

PRODUÇÃO AOS SEUS DESENVOLVEDORES.

Colocar quadro de referência da biblioteca – sbu

DADOS INTERNACIONAIS DE CATALOGAÇÃO-NA-PUBLICAÇÃO-C IP M514r Meirelles, Mauro Linguagens e Tecnologias Digitais: ressignificando símbolos a nós desconhecidos/Mauro Meirelles. - Porto Alegre : UFRGS, 2006. f. 309 Material de aula - Universidade Federal do Rio Grande do Sul. Faculdade de Educação. Porto Alegre, BR-RS, 2005. 1. Informática na Educação; 2. Tecnologia digital; 3. Inclusão digital; 4. Uso de softwares para construção de páginas 5. Mozilla Composer CDU - 371.694:681.3(816.51) ___________________________________________________________

Bibliotecária: Jacira Gil Bernardes - CRB-10/463

Marco "ZERO" – UM AVISO AOS NAVEGANTES...

Esse material destina-se a ajudá-lo a fazer sua própria HOMEPAGE. Não vamos

jogá-lo de primeira no meio de um mar turbulento de símbolos e códigos HTML, mas sim,

entrar lentamente no mar de informações formado pela internet, suas ferramentas e

códigos. Vamos nos acostumar a lidar com eles, ressignificando nossas impressões e

percepções relativas a construção de páginas e o uso de ferramentas relacionadas ao

manejo dos códigos necessários para a produção de materiais em formato digital – com

especial ênfase na linguagem HTML.

Nossa ênfase residirá, sobretudo, no planejamento (criação e concepção do

projeto), no conhecimento das linguagens necessárias, no manejo de ferramentas a ela

relacionadas, na formatação e normatização de documentos digitais, e, principalmente, na

forma como podemos dotar tais materiais dentro do contexto em que foi produzido de

sentido para seus usuários e desenvolvedores.

INTRODUÇÃO

Antes de iniciarmos o trabalho introduziremos algumas definições que são

necessárias para que possa desenvolver um bom projeto de Página de Internet com base

nesse material.

O material está divido em 3 partes, a primeira que enfoca as definições básicas

para o desenvolvimento de sites em linguagem HTML, a segunda que enfoca a

concepção e desenvolvimento do projeto, e, a terceira que se centra no estudo do Mozilla

Composer – um Editor Gráfico de HTML que compõe a Suíte de aplicativos para Web da

Mozilla Foundation.

1. CONCEITOS BÁSICOS

1.1. O que é o HTML ou HTM?

O HTML (Hiper Text Markup Language) é uma linguagem padrão (código) de

marcação utilizada para descrição de informações de um documento web direcionado a

produção de páginas na internet. Esses códigos são interpretados pelos Browsers de

Navegação para exibição do conteúdo disponível no documento web criado. Com esta

linguagem que é derivada do SGML (Standard Generalized Markup Language) podemos

preparar documentos web (páginas de internet) que incorporam diversas mídias (além de

texto puro, podemos incorporar arquivos de imagem, som, vídeo, formulários dinâmicos,

etc.). Ao conjunto de mídias e arquivos ligados entre si que compõem um documento web

denominamos de página de Internet (ou homepage).

1.2. O que é uma Página de Internet (homepage)?

Uma página de internet, por sua vez, é definida como um conjunto de documentos

que estão ligados, entre si, por um sistema de hiperlinks (ou, simplesmente, links). Uma

Página de Internet (ou homepage), normalmente, estará disponível para acesso on-line

em servidores web1 e são acessados por meio do uso de Browsers de Navegação (ou

Navegadores de Internet). Uma homepage também pode ser entendida como a página

inicial (index) de um site da web que pode ser acessada a partir de um endereço

eletrônico, onde encontramos indexado um dado conteúdo ou conjunto de links referentes

a outros lugares ou páginas da web criadas por uma instituição, empresa ou pessoa.

1.3. O que é um BROWSER DE NAVEGAÇÃO?

O Browser de Navegação (ou Navegador de Internet) é um programa que permite

o acesso a uma base de dados construída a partir da linguagem HTML e que permite a

visualização de conteúdos indexados em modo texto de forma gráfica. Na verdade, os

Navegadores de Internet apenas interpretam os conteúdos em linguagem HTML

disponibilizados (ou hospedados) em servidores web, permitindo sua visualização por

qualquer pessoa que possua acesso a um navegador web padrão e acesso a internet.

1 Contudo, também pode estar disponível off-line, como por exemplo, em CDs interativos e documentos criados na máquina do próprio usuário

1.4. O que é SERVIDOR WEB?

Na rede das redes (ou internet), um servidor é tido como um computador que

administra e fornece informações e programas a outros computadores que acessam a

rede mundial de computadores. É o computador responsável por pelo atendimento e

gerenciamento de demandas emitidas por outros computadores conectados a rede. De

uma maneira geral, um servidor é um gerenciador (ou repositório) de informações,

conteúdos, programas e serviços que permite a outros usuários a ele conectados o

acesso a este conteúdo.

1.5. Como funciona esse processo de comunicação ent re o NAVEGADOR e o

SERVIDOR WEB?

Ao colocarmos um endereço eletrônico – como, por exemplo, o endereço de nossa

universidade (http://www.ufrgs.br) - na barra de endereços do navegador web de nosso

computador (cliente), este se conecta a internet e a um servidor web que informa onde

este conteúdo está disponível e qual máquina deve acessar para obter as informações

desejadas. Ao receber essa informação, o navegador redireciona o pedido para o

endereço informado pelo servidor web e acessa o conteúdo disponível no mesmo,

exibindo-o na tela do cliente (ou solicitante da informação) através do navegador usado

para acessar o referido endereço.

1.6. Como podemos produzir materiais destinados a W EB?

A produção de materiais destinados a web pode ser feita com base no uso de

programas ou linguagens específicas criadas para este fim. Existem, hoje, duas formas de

fazê-lo: uma utilizando as TAGs (ou etiquetas) para escrita em linguagem HTML com o

uso de um editor de texto básico como o Bloco de Notas, e outra, com o uso de um Editor

Gráfico de HTML como o Mozilla Composer, o FrontPage, entre outros.

1.7 O que são TAGs?

As TAGs são marcações (ou etiquetas) que consistem em breves instruções que

delimitam ações a serem executadas no navegador para a interpretação do conteúdo

disponibilizado no servidor web onde o mesmo está hospedado. Essas instruções

destinam-se a fornecer ao navegador informações referentes à forma como os textos,

imagens e demais elementos da página HTML acessada devem ser interpretadas e

organizadas para a exibição no computador daquele que acessa aos conteúdos

oferecidos ao cliente pelo servidor acessado.

As TAGs, sempre funcionam aos pares e delimitam o início e o fim de uma

instrução determinada. As TAGs tem como início o símbolo "<" e são fechadas, ou

encerram a instrução com "/>". Uma TAG é formada de três partes: o comando, o atributo

e o valor.

Elucidemos o exposto, usando como exemplo, o comando que se destina a criação

de uma linha colorida azul em nossa página: <HR color="blue"/>, onde:

"<" e "/>" – Delimitam o lugar onde o comando deve ser aplicado, ou seja, onde inicia e

termina sua execução;

"HR" – Comando que desenha uma linha no documento;

"color=" – Atributo que altera a definição padrão de cor (default);

"blue" - Valor do atributo (no caso, troca a cor default (preto) por azul (blue).

Como vimos, a estrutura das TAGs é muito parecida com a da língua escrita onde

existe um sujeito que executa uma ação sobre uma determinada coisa gerando um

resultado diferente que qualifica essa coisa. Em outras palavras o sujeito (Browser) que

executa uma ação (Comando) sobre uma determinada coisa (Atributo) gera como

resultado ou característica (Valor) diferente do padrão (Default). Cada comando têm seus

atributos possíveis e seus valores, isso quer dizer que precisamos saber quais são os

atributos possíveis e seus valores para cada comando.

Assim, de uma maneira geral, como veremos a seguir, temos que a maioria TAGs

com que trabalhamos se usam desta lógica e permitem que tais atributos e valores

possam ser alterados pelo usuário com a finalidade de obter um resultado diferente

daquele definido como padrão pelo desenvolvedor do software ou linguagem utilizada

para construção de documentos web.

1.8 Principais TAGs utilizadas

Como em toda forma de organização estruturada existem alguns elementos que

são obrigatórios para o correto funcionamento do sistema. No caso da linguagem HTML,

existem também algumas TAGs cuja presença é obrigatória a qualquer documento

construído a partir desta linguagem. Essas TAGs básicas de presença obrigatória nas

páginas são: "<html>"; "<head>"; e, "<body>". Vamos agora ver o que cada uma dessas

TAGs define no documento:

1.8.1 A TAG "<html>"

Define o início de um documento HTML e informa ao navegador que todo o

conteúdo que estiver depois dele deve ser interpretado como uma série de códigos HTML.

Dentro dela teremos as outras duas TAGs, as quais definem especificamente o que deve

conter o cabeçalho e o corpo do texto:

<head> - define o que deve conter o cabeçalho do documento que esta sendo criado.

Este cabeçalho traz informações sobre o documento que esta sendo aberto pelo

navegador;

<body> - define o conteúdo do corpo do documento. É a parte do HTML que é exibida no

navegador. É na TAG "<body>" que definimos propriedades comuns a toda página, tais

como: as cores de fundo, a fonte utilizada, o tamanho do texto a ser exibido, as margens

e outras formatações.

1.8.2 A TAG "<head>"

Dentro do cabeçalho (TAG "<head>") podemos encontrar outras TAGs que

permitem a inserção de outros comandos em nosso documento HTML. Essas TAGs são

as seguintes e executam os seguintes comandos:

<title> - define o título da página. Este, por sua vez, é exibido na barra de título do

navegador;

<style> - define a formatação a ser utilizada na página, normalmente, utilizamos o CSS

(Cascading Style Sheets) para fazer isto;

<script> - definimos a execução de certas funções em uma página com o uso de scripts

ou colocar outras funções em JavaScript para serem executadas;

<link> - define ligações da página com outros arquivos (Feeds, CSS, scripts, etc.);

<meta> - define propriedades da página, como por exemplo, a codificação de caracteres,

a descrição da página, o autor da mesma, etc.

1.8.3 A TAG "<body>"

Dentro do corpo do documento (TAG "<body>"), como no caso da anterior,

podemos encontrar uma outra série de TAGs que nos permitem executar um outro

conjunto de comandos que nos permite organizar, dimensionar e personalizar a inserção

de textos, imagens, sons, tabelas, formulários, etc. Essas TAGs são as seguintes e

executam os comandos a seguir referendados:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - define o tamanho da fonte a ser utilizada nas

diversas partes de texto que compõem o documento, tais como: os cabeçalhos, títulos e o

próprio corpo do texto. Lembre-se que quando menor o número, maior será o tamanho da

fonte;

<p> - inicia um novo parágrafo no meio do texto;

<br> - insere uma quebra de linha no texto;

<table> - cria uma tabela, onde, as linhas são criadas com o comando <tr> e as novas

células com o comando <td>. Por exemplo, para fazer uma tabela com 2 linhas e 2

colunas, bastaria, o seguinte comando;

<div> - determina uma divisão na página a qual pode possuir variadas formatações, ou

seja, informa ao navegador uma mudança de formatação dentro do próprio texto;

<font> - informa que um texto e sua fonte, cor e tamanho são diferentes daquele definido

como padrão pelo editor de HTML ("default");

<b>, <i>, <u> e <s> : - correspondem a as seguintes marcações gráficas: negrito, itálico,

sublinhado e riscado, respectivamente;

<img> - marca a inserção de uma imagem;

<a> - marca a inserção de um hiperlink para uma página, ou para um endereço de E-mail;

<textarea> - insere uma caixa de texto (com mais de uma linha); estas caixas de texto

podem ser auto-selecionáveis e conter outros códigos a serem distribuídos.

Muito bem, agora que já vimos um pouco dos comandos que cercam o uso da

linguagem HTML na construção de páginas passemos a explorar daqui para diante a

forma como o projeto de construção de uma página deve ser estruturado para que

possamos obter êxito em nosso trabalho – concepção do projeto. Em seguida, após

definirmos o que queremos fazer exatamente, iremos centrar nosso aprendizado na

operacionalização destas funcionalidades num Editor Gráfico de HTML – o Mozilla

Composer que você encontra junto ao Mozilla Suíte.

2. A CONCEPÇÃO DO PROJETO: ESTRUTURANDO UMA PÁGINA DE INTERNET

Esse roteiro serve para ajudá-lo a estruturar o seu projeto. Para isto, tente

responder as seguintes questões, pois elas lhe forneceram indícios de como sua página

deve estar estruturada e o guiará no desenvolver do trabalho. Lembre-se que, quanto

mais detalhado por seu projeto, mais fácil será de colocá-lo em prática. Pois bem, então

lápis e papel na mão e ao trabalho...

1. Qual será a página de abertura da minha página?

2. Quantas páginas internas ela terá?

3. Como estará organizada a estrutura de links?

4. Utilizarei imagens?

5. Que imagens utilizarei?

7. Usarei arquivos de som e/ou vídeo?

8. Que sons e/ou vídeos utilizarei?

9. Onde estão estes arquivos de som e/ou vídeo?

10. Remeterei a arquivos externos?

11. Onde estão estes arquivos externos?

12. Usarei tabelas para sua estruturação?

13. Quantas tabelas serão utilizadas?

14. Onde elas serão colocadas?

15. Quais as características desta tabela?

16. Qual a fonte a ser utilizada?

17. Qual tamanho de fonte que utilizarei?

18. Qual a cor do texto que será utilizado nas páginas?

19. Qual a cor do pano de fundo ou imagem a ser utilizada como pano de fundo?

20. Qual a cor dos links ativos?

21. Qual a cor dos links visitados?

22. Qual o título da página que aparecerá na Barra de Navegação?

23. Já criei a pasta para salvar meus arquivos no meu computador?

24. Já salvei a página inicial como index?

3. O USO DE EDITORES HTML

Antes de iniciarmos a construção de nossa Página de Internet em um software

gráfico de edição de páginas web devemos escolher qual programa utilizaremos. Em

nosso caso, optamos pelo uso do Mozilla Composer. Nossa opção pelo referido programa

se fundamenta, sobretudo, no "espírito" que permeia toda a comunidade de software livre

e que nos leva a trabalhar sempre em prol da democratização do acesso a tecnologia e

suas ferramentas. E mais, que, soluções pagas e proprietárias, muitas vezes ficam a

dever em relação a soluções gratuitas disponíveis a qualquer um junto à comunidade de

software livre brasileira. Em si, além do exposto, nossa escolha, se pautou também em 4

(quatro) outros fatores:

1. Por ser um software livre;

2. Por ser fruto do trabalho colaborativo de milhares de programadores do mundo que

trabalham sem receber remuneração para isto;

3. Por rodar em praticamente todos os sistemas operacionais, em especial, o Linux;

4. E também, por apresentar uma interface gráfica bastante simples e de fácil manejo

para usuários iniciantes ou inexperientes.

Neste momento você deve estar se perguntando... Já que é livre e disponível para

download gratuito... Onde posso encontrá-lo?

A resposta é bem simples, na internet, no site da Fundação Mozilla

(http://www.mozilla.org/releases/#1.7.13 ) que detêm o seu desenvolvimento, assim

como a Netscape da AOL (http://www.netscape.net ).

Ou ainda, no site da UFPA que possui um link para download do Mozilla Suíte

1.7.12 em Português. Basta copiar o seguinte endereço para a Barra de Endereços de

seu Navegador e dar "ENTER" que o download iniciará automaticamente. Acesse:

http://www2.ufpa.br/dicas/arq/prog/mozi/mozilla-win 32-1.7.12-installer.exe

Após fazer o download e instalar o programa é só seguir o seguinte as instruções que se

seguem para começar a rodar o programa e iniciar a construção de sua página.

JÁ COM O MOZILLA INSTALADO EM SEU COMPUTADOR, VAMOS AO TRABALHO.

3.1. Iniciando o COMPOSER

Primeiramente verifique se este programa está instalado nessa máquina a sua

frente. Para isto vá até o menu INICIAR/PROGRAMAS/MOZILLA e inicie o navegador.

Uma janela semelhante a esta se abrirá na tela do seu computador:

Figura 1 - Tela de início do Navegador Mozilla 1.7.12

Nesta janela há três possibilidades para você acessar ao Mozilla Composer, vá lá:

1. Clicando no ícone ( ) na barra inferior do Navegador;

2. Acessando na barra superior o menu "Janela"; e,

3. Pressionando CRTL + 4 no teclado de seu computador.

Se tudo deu certo, você terá diante de si a partir de agora a tela de trabalho do

Mozilla Composer, ela nos acompanhará nas próximas páginas, quando estaremos

colocando em prática o que vimos até agora. A primeira tela que terás a tua frente é

mostrada a seguir e, é, a partir dela que desenvolveremos todo nosso trabalho daqui

para frente.

Figura 2 - Tela de início Mozilla Composer 1.7.12

3.1.1 Iniciando o COMPOSER

Iremos agora, decompor essa tela para que possamos ver todas as ferramentas e

opções que nos são oferecidas. Como qualquer outro aplicativo da geração de Editores

HTML "você faz o que você está vendo", o Mozilla Composer apresenta uma boa

interface gráfica, bastante limpa e com tudo que precisamos ao alcance do mouse. Como

se pode observar na figura 2, essa tela é composta de 3 partes:

1. "Barra Superior" – localizada na parte superior da tela, é formada pela "Barra de

Menus”; a "Barra de Atalhos da Barra de Menus"; e, a "Barra de Formatação de

Textos";

2. "Área de Edição" – Localiza-se num setor intermediário da tela e ocupa

aproximadamente 70% da tela – é o espaço em branco que vemos logo abaixo da

"Barra Superior". É nesse espaço que editamos nosso documento.

3. "Barra Inferior" ou "Barra de Navegação" – localizada na parte inferior da tela,

permite a navegação entre as diversas opções de visualização e produção de

conteúdos relacionados ao documento. Nela encontramos da esquerda para a

direita, quatro abas:

a. A aba "Normal" – é a interface gráfica padrão onde trabalhamos no modo

gráfico com base no princípio de que "você faz o que você está vendo".

Normalmente utilizamos mais ela, pois fazemos tudo com base nos atalhos

e ferramentas presentes nas barras de menus e atalhos. De modo que, não

é necessário que o usuário domine todos os códigos (TAGs) relativos a

construção do documento, como vimos anteriormente no item 1;

b. A aba de "Marcações" – exibe todas as marcações ou TAGs HTML em

modo gráfico e permite sua edição em modo gráfico, sendo um caminho

intermediário entre se trabalhar no modo gráfico diretamente ou no código-

fonte propriamente dito;

c. A aba de "Origem" ou "HTML" – exibe a código fonte utilizado e permite a

inserção de comandos, atributos e valores em modo texto, como vimos no

item 1 deste material;

d. A aba de "Visualização” – permite visualizar o arquivo que estamos

trabalhando da forma como este será visto pelos usuários quando estes o

acessarem no servidor web.

Figura 3 – As barras de edição e visualização do Mozilla Composer 1.7.12

3.1.2 A "Barra de Menus "

Depois de uma visão geral, passemos ao estudo pontual das funções do Mozilla

Composer. Iniciemos, pois, pela barra de menus, nela, você terá acesso aos seguintes

menus de trabalho, os quais mostram são mostrados na figura 4:

Figura 4 – A Barra de Menus do Mozilla Composer 1.7.12

Em cada um dos menus, você terá acesso a diferentes funcionalidades e

comandos, passemos então, ao estudo e compreensão destes menus, pois a maioria das

coisas que não for possível de se realizar usando a "Barra de atalhos do Menu", você o

fará diretamente na "Barra de Menus".

O menu "Arquivo"

Novo: abre um novo arquivo (não formatado). Abrir: abre um endereço da web ou arquivo html. Abrir arquivo: abre um arquivo HTML existente no computador para edição. Páginas recentes: abre um dos últimos arquivos abertos ou visualizados no Mozilla Composer. Fechar: fecha o arquivo em utilização. Salvar: guarda arquivos editados em locais definidos pelo usuário. Salvar como: modifica a forma ou lugar onde o arquivo foi guardado. Salvar como conjunto de caracteres: salva o arquivo com uma codificação específica definida pelo usuário. Publicar: local onde usuário deverá definir endereço do provedor. Publicar como: local onde usuário deverá definir endereço do provedor com diferenças de formatação. Reverter: o arquivo retorna a sua formatação anterior, antes da edição, desde que já não tenha sido salvo pelo usuário. Exportar para texto: exporta o arquivo em modo somente texto (.txt). Visualizar: exibe o arquivo em edicão no Navegador Padrão. Enviar página: envia o arquivo htm, html por e-mail ou icq. Imprimir: Imprime arquivo visualizado na tela. Sair: fecha o programa em uso.

O menu "Editar"

Desfazer: desfaz as ultimas ações realizadas. Refazer: refaz as últimas ações realizadas e apagadas pelo usuário. Recortar: recorta o trecho de texto ou imagem selecionada pelo usuário. Copiar: copia o trecho de texto ou imagem selecionada pelo usuário para a área de transferência. Colar: cola trecho de texto ou imagem selecionada pelo usuário da área de transferência para o local indicado pelo usuário no documento. Excluir: exclui trecho de texto ou imagem selecionada pelo usuário do documento. Selecionar tudo: seleciona todos os itens de texto, imagem e formatação do documento para posterior alteração (copiar, colar, recortar, formatar). Localizar e Substituir: localiza palavra ou símbolo indicado pelo usuário no documento e substitui por outro definido pelo mesmo na caixa de diálogo especifica. Localizar próxima: continua a busca ou substituição iniciada anteriormente. Verificar ortografia: faz a revisão ortográfica do texto do documento.

Configurações de Publicação do site: define os parâmetros para publicação do site na web ou em servidor específico (domínio, senhas de acesso, servidor, etc.).

Preferências: Exibe as preferências pré-definidas pelo usuário do navegador e do editor html (configurações pessoais do usuário).

O menu "Exibir"

Barra de Ferramentas: seleciona quais as barras serão exibidas na barra superior. Normal: seleciona para exibição a aba de navegação normal. Exibir tags: seleciona para exibição a aba de navegação em TAGs. Código-Fonte HTML: seleciona para exibição a aba de navegação de exibição do código-fonte. Visualisar: seleciona para exibição a aba de visualização da prévia do documento web no navegador. Codificação: exibe a codificação sobre a qual a página esta sendo construída e seleciona uma outra codificação diferente do padrão.

O menu "Inserir"

Imagem: insere figuras e imagens na página ou documento web. Tabela: insere tabelas na página ou documento web. Link: transforma figuras, palavras ou frases selecionadas em links para outras páginas. Âncora nomeada: insere caracteres e marcações especiais. Linha Horizontal: insere linha horizontal no texto. Código-fonte HTML: insere códigos de HTML na página. Caracteres e símbolos: insere caracteres e símbolos especiais. Quebrar abaixo da Imagem: insere quebra de página após a imagem inserida.

O menu "Formatar"

Fonte: define a largura da fonte e o tipo de fonte a ser utilizada no documento. Tamanho do texto: define o tamanho do texto selecionado ou no documento. Estilo do texto: define o estilo do texto selecionado ou o que será aplicado em todo documento (negrito, itálico, sublinhado, sobrescrito, etc). Cor do texto: define a cor a ser aplicada no texto selecionado ou em todo o documento. Descontinuar os Estilos de Texto: proporciona uma quebra de seção, permitindo a utilização de vários estilos em um mesmo documento. Descontinuar Link: serve para separar um link em dois sendo que os dois mantêm a mesma indexação. Excluir Âncoras nomeadas: remove as âncoras que você colocou no menu inserir. Parágrafo: define o estilo a ser aplicado nos parágrafos. Lista: define o tipo marcação a ser utilizada no texto. Aumentar Recuo: aumenta o recuo a ser aplicado no texto. Diminuir Recuo: diminui o recuo a ser aplicado no texto. Alinhamento: define o alinhamento a ser aplicado no texto. Pano de fundo e cores: define cor ou figura a ser utilizada no fundo da página. Propriedades da página: define as propriedades da página, tais como a cor padrão do pano de fundo, do texto, dos links ativos, dos links visitados, etc.

O menu "Tabela"

Inserir: Insere uma tabela, linhas e/ou colunas em uma tabela. Selecionar: seleciona o conteúdo de uma tabela, de linhas e/ou colunas. Excluir: exclui uma tabela, linhas e/ou colunas. Combinar: mescla uma ou mais células e seu conteúdo. Dividir célula: divide células. Criar tabela da seleção: converte um texto selecionado em tabela. Cor do pano de fundo: define o pano de fundo das células da tabela. Propriedades da tabela: define as propriedades da tabela, largura do traço, cor, espaçamento, etc.

O menu "Ferramentas"

No menu ferramentas nos interessa saber somente a funcionalidade do comando Validar HTML que reside em um comando que podemos executar, depois de terminado o trabalho, com vistas a checagem de erros no uso de padrões junto a W3C durante o processo de elaboração. Essa checagem, garante que seu site abra em qualquer navegador, visto que todos os comandos utilizados são testados e verificados.

O menu "Janela" e "Ajuda"

Define a janela de trabalho a ser utilizada dentro da Suíte de aplicativos da Mozilla. Em nosso caso, como vimos anteriormente, esse é dos caminhos que podemos utilizar para chegar ao Mozilla Composer . E por fim, temos o menu "Ajuda" onde podemos encontrar informações relativas ao programa, ao suporte técnico, aos plugins e outras informações relativas aos seus desenvolvedores e mantenedores.

3.1.3 A "Barra de atalhos do menu "

A "Barra de atalhos do menu" nada mais é do que um conjunto de ícones gráficos

que remetem a algumas funções e comandos presentes nos menus, por isso, dado o

detalhamento dado no item anterior a esse item, apresentaremos a seguir, apenas

algumas de suas funcionalidades e a que comandos estes ícones gráficos remetem

quando acionados pelo usuário.

Abre um novo documento em branco para edição.

Abre um documento existente para edição.

Salva o documento que estamos trabalhando no computador.

Publica o arquivo salvo no provedor de serviços utilizado pelo usuário.

Visualiza o documento no navegador padrão da máquina utilizada pelo usuário.

Imprime o documento aberto, enviando-o para a impressora.

Insere um link na imagem ou texto selecionado, redirecionando-a para outra página ou documento, permite a definição das características (atributos e valores) que deverá conter do link criado.

Insere uma imagem existe na máquina no documento de trabalho. Permite a definição das características (atributos e valores) que deverá conter a imagem utilizada.

Insere uma tabela no documento. Permite a definição das características (atributos e valores) que deve conter a tabela inserida.

Realiza a verificação ortográfica no documento aberto com base no idioma definido como padrão.

3.1.4 A "Barra de Formatação de Textos do Documento "

Como na maioria dos editores de texto e HTML, o Mozilla Composer também

possui uma barra de formatação de textos e características (atributos e valores) do

documento que podemos utilizar para oferecer algumas características e atributos

especiais ao nosso documento de trabalho. Essa "Barra de Ferramentas" esta disposta

logo abaixo da "Barra de atalhos do menu" e permite que trabalhemos com os seguintes

atributos e valores em nosso documento:

Seleciona um formato a ser aplicado no parágrafo.

Define a cor do pano de fundo e da fonte a ser utilizada no

documento

Realça o texto selecionado de uma cor diferente da utilizada no

documento.

Diminui o tamanho da fonte do texto selecionado.

Aumenta o tamanho da fonte do texto selecionado.

Aplica a formatação "negrita" no texto selecionado.

Aplica a formatação "itálica" no texto selecionado.

Aplica a formatação "sublinhada" no texto selecionado.

Estrutura o texto a partir de uma lista de tópicos ou numerada.

Define o récuo do texto do documento.

Define a forma como o texto do documento estará justificado.

Antes de encerrar esse material, mostremos pois, duas telas, uma na aba gráfica e

outra em texto puro para que tenhamos uma noção do exposto até aqui e da forma como

é feita a leitura das TAGs e no que resulta a sua inserção no documento.

3.2. TELAS DE EXEMPLO 3.2.1 Modo Gráfico

3.2.2. Modo Texto – TAGs HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Aqui vai o título de sua página, aquele que irá aparecer na barra de navegação.</title> <style> /* comentário em css (aqui você define formatações padrão para suas páginas). Este CSS informa ao navegador que a fonte utilizada deve ser Arial e que se esta não estiver disponível deve usar a fonte Verdana ou qualquer uma sem serifa; que o pano de fundo deve ser branco (*#FFF) e que as margens deve ser de 5px e 10px, respectivamente */ body { font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; } </style> </head>

<body> <br> <br> Você pode colocar uma linha colorida antes do seu texto usando esse comando a TAG "HR" <hr color="red">Aqui você coloca o conteúdo propriamente dito. É o que estiver aqui que os outros vão ver no seu navegador quando acessarem sua página. Ou uma outra linha colorida aqui, para separar uma parte do texto. <hr color="#0b0e00"> Como esta que você está vendo.<hr> <p> &nbsp;&nbsp;&nbsp; Isso é um parágrafo curto com 3 espaços distantes da margem esquerda.</p> Da mesma forma que<br> dou uma quebra de linha<br> e <h1>aumento a fonte para avisar</h1> <h3>que vêm uma tabela</h3> <br> com fonte default a seguir: <br> <br> <br> <table border="1" width="100%"> <tbody> <tr> <td>aqui voce insere o texto da célula 1</td> <td>aqui voce insere o texto da célula 2</td> </tr> <tr> <td>aqui voce insere o texto da célula 3</td> <td>aqui voce insere o texto da célula 4</td> </tr> </tbody> </table> <br> <br> <textarea> Isto é uma caixa de texto pequena!!! </textarea> </body> </html>