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

Transcrição

1 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ências Sociais (GEECS/UFRGS) Cel profmeirelles@gmail.com PORTO ALEGRE, 27 MAIO DE 2006

2 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 FORMATO OU MESMO DISPONIBILIZADO EM SERVIDORES WEB, FTP, P2P, BIT TORRENT, OU QUALQUER OUTRA FORMA DE TROCA DE ARQUIVOS ESSA LICENÇA DEVE SER REPRODUZIDA NA ÍNTEGRA JUNTAMENTE COM OS CRÉDITOS PELA SUA PRODUÇÃO AOS SEUS DESENVOLVEDORES.

3 Colocar quadro de referência da biblioteca sbu DADOS INTERNACIONAIS DE CATALOGAÇÃO-NA-PUBLICAÇÃO-CIP M514r Meirelles, Mauro Linguagens e Tecnologias Digitais: ressignificando símbolos a nós desconhecidos/mauro Meirelles. - Porto Alegre : UFRGS, f. 309 Material de aula - Universidade Federal do Rio Grande do Sul. Faculdade de Educação. Porto Alegre, BR-RS, 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 :681.3(816.51) Bibliotecária: Jacira Gil Bernardes - CRB-10/463

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

5 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) 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 web 1 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 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

6 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 Como funciona esse processo de comunicação entre o NAVEGADOR e o SERVIDOR WEB? Ao colocarmos um endereço eletrônico como, por exemplo, o endereço de nossa universidade ( - 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 Como podemos produzir materiais destinados a WEB? 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

7 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

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

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

10 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 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?

11 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 ( que detêm o seu desenvolvimento, assim como a Netscape da AOL ( Ou ainda, no site da UFPA que possui um link para download do Mozilla Suíte 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: 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.

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

13 Figura 2 - Tela de início Mozilla Composer 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:

14 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ódigofonte 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

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

16 O menu "Editar" 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.). 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. 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.

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

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

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

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

21 3.2. TELAS DE EXEMPLO Modo Gráfico 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>

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