Post on 28-Nov-2018
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> 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>