1
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Construção de Páginas html com o
editor NVU
Crie e edite páginas html com um editor gratuito.
APRESENTAÇÃO
CONHEÇA O EDITOR DE PÁGINAS HTML NVU
NVU é uma ferramenta que permite criar e editar páginas HTML. Dentre os editores gratuitos hoje disponíveis, o NVU é o sucessor do Netscape Composer. Você pode obter uma cópia no endereço do projeto em http://www.net2.com/nvu/download.html. Copie o arquivo para seu computador e realize a instalação, seguindo as orientações apresentadas.
A tela inicial do NVU (na versão original, em inglês) é mostrada na Figura 1.
Figura 1 - Tela inicial do NVU em inglês
Curso de Formação de Professores em Tecnologia de Informação e de Comunicação Acessível
2
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
PASSO 1
CONVERTA A INTERFACE DO NVU PARA A LÍNGUA PORTUGUESA Existe um procedimento simples para converter a interface do NVU de inglês para português. Abra o NVU, clique no menu Tools e escolha opção Extensions, como mostra a Figura 2.
Figura 2 - Abrindo o menu Extensions para instalar o conversor
Na janela apresentada, clique no botão Install, como assinalado na Figura 3.
Figura 3 - Janela Extensions que permite instalar o conversor
3
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Procure no DVD do livro a pasta na qual está armazenado o arquivo nvubr.xpi, selecione (clique sobre ele) e depois clique em Abrir, como mostra a Figura 4.
Figura 4 - Procurando o arquivo para instalar o conversor
Para finalizar, clique em Install Now (Figura 5).
Figura 5 - Janela de Instalação do conversor
4
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Ao finalizar o sistema mostrará a janela (Figura 6) avisando que o pacote de idioma foi instalado.
Figura 6 - Janela de aviso da Instalação do conversor
Feche o programa NVU e abra-o novamente para que ele apareça no idioma da língua portuguesa, como na Figura 7.
Figura 7 - Janela inicial do NVU em português
5
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
PASSO 2
EXPLORE OS RECURSOS DO NVU Na Barra de Títulos encontra-se o nome do arquivo e o nome do aplicativo. A Figura 8 mostra o exemplo de um arquivo aberto no NVU, mas que ainda não foi salvo e, portanto, não lhe foi atribuído um nome ainda.
Figura 8 - Barra de Titulo do NVU
Na Barra de Menus (Figura 9) encontram-se todos os recursos do NVU. Clicando sobre o nome do menu desejado é possível ver todas as possibilidades oferecidas por este. Ex. no menu Arquivo encontramos a opção Salvar, mantendo o modelo adotado em outros programas para o sistema operacional Windows.
Figura 9 - Barra de Menus
Na Barra de Ferramentas (Figura 10) encontram-se os botões que permitem acessar com maior agilidade os recursos mais utilizados do NVU, evitando o percurso pelo interior dos menus.
Figura 10 - Barra de Ferramentas
PASSO 3
CRIE E SALVE PÁGINAS A tela inicial do programa, já mostrada anteriormente na Figura 7, apresenta uma grande área em branco, na qual é possível digitar diretamente o seu texto e utilizar os recursos da barra de ferramentas, semelhante a um editor de textos.
DICA 1: Criação de pasta para salvar/armazenar os arquivos (páginas, imagens, vídeos, animações) O ideal é você, antes de iniciar a criação de suas páginas, criar uma nova pasta em seu computador, com um nome que caracterize o nome do seu site, por exemplo “meusite”. Salve sempre todos os arquivos e imagens nesta pasta.
Barra de Menus
6
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Mas antes de qualquer outra ação, você deve salvar o seu arquivo e dar um nome a ele. Para isso, clique no menu Arquivo e, a seguir, na opção Salvar (Figura 10).
Figura 11 - Salvando sua página pela primeira
vez Você então será solicitado a informar o Título de sua página (Figura 12), ou seja, o nome que aparece na parte superior de sua página quando apresentada no navegador.
Figura 12 - Atribuindo um título a sua página web
Por exemplo, se você denominar sua página como “página inicial” e visualizá-la no navegador (como o Internet Explorer ou Firefox), verá esse texto no topo da janela, como apresenta a Figura 13.
Figura 13 -Visualizando o título dado a sua página web na Barra de Títulos
Em seguida, aparecerá a janela Salvar página como (isto só acontece na primeira vez em que você for salvar o seu arquivo, pois ele ainda não tem nome!). Procure a pasta criada e salve o arquivo, digitando o nome do arquivo desejado (Figura 14).
Figura 14 - Salvando sua primeira página
Digite aqui o nome
do arquivo a ser
salvo.
7
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Para salvar as demais páginas que você criar, repita o procedimento. Procure utilizar nomes fáceis de lembrar e siga as orientações da Dica 3.
PASSO 4
ABRA ARQUIVOS A opção abrir arquivos nos permite abrir um arquivo já existente, criado por você ou salvo da Internet. Para abrir um arquivo (Figura 15), clique no menu Arquivo e, a seguir, na opção Abrir...
Figura 15 - Abrindo um arquivo já existente
Procure o arquivo na pasta em que o salvou anteriormente, clique sobre ele para selecioná-lo e depois na opção Abrir. Ele será apresentado na tela principal do NVU, onde você poderá modificá-lo e salvar as alterações realizadas.
DICA 2 - Uso do nome “index.htm” ou “index.html” como primeira página
A primeira página HTML de seu site deve ser salva com o nome index.htm. Isso se
deve ao fato de que os navegadores procuram por esta página no servidor e
mostram automaticamente, sem a necessidade de digitarmos esse nome no
endereço de um site da Internet!
DICA 3 - Acentuação gráfica, espaços em branco e letras maiúsculas nos
nomes dos arquivos
Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc.,
ao salvar e nomear os seus arquivos. Da mesma forma, recomenda-se o uso de
somente letras minúsculas nos nomes dos arquivos.
Por exemplo: ao invés de salvar um arquivo com o nome “Informática na
Educação.htm”, utilize o nome “informática_na_educacao.htm”. Isso facilitará
depois a criação dos “links” entre suas páginas!
8
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
PASSO 5
UTILIZE A BARRA DE FORMATAÇÃO
A Barra de Formatação (Figura 16) é composta por atributos relacionados à formatação do texto, vamos conhecer os principais, sendo eles (fonte, tamanho, estilo, cor e direção), (aumentar ou diminuir recuo), (plano de fundo e cores e propriedades da página).
Figura 16 - Barra de Menus Formatar
FORMATE O TEXTO (FONTE, TAMANHO, COR E DIREÇÃO) Para modificar fonte, tamanho, estilo e cor é preciso selecionar o texto que terá seus atributos modificados. Você faz isso, passando o mouse por cima do texto desejado, de forma que ele fique destacado, como na Figura 17.
Figura 17 - Selecionando o texto
Clicando no menu Formatar e escolhendo a opção Fonte , será mostrada uma relação de fontes (instaladas em seu computador) e que podem ser utilizadas na formatação de seu texto.
DICA 4 – Tipos de fonte
As fontes mais comumente utilizadas são Times New Roman, Verdana, Arial
e Tahoma.
Estas fontes estão normalmente instaladas em quase todos os computadores,
garantindo que suas páginas sejam visualizadas em outros computadores da
mesma forma que você editou no seu.
9
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Para modificar o tamanho e o estilo do texto, clique no menu Formatar e selecione Fonte. Você poderá diminuir ou aumentar o tamanho da fonte selecionada, como mostra a Figura 18.
Figura 18 – Alterando o tamanho do texto
DICA 5: O mesmo efeito pode ser conseguido clicando diretamente nos botões da barra de menu
diminuir a fonte
aumentar a fonte
Para Formatar os Estilos do texto, selecione no menu a opção desejada, como na Figura 19.
Figura 19 - Alterando o estilo do texto
DICA 6 – Estilos de fonte - sublinhado
Evite usar o recurso sublinhado como forma de destaque em seus textos,
pois este é um recurso que indica um link nos navegadores e pode confundir
seu leitor. Prefira o itálico ou negrito para diferenciar alguma palavra em seus
textos.
10
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Para modificar a cor do texto, clique no menu Formatar e selecione a opção Cor do texto... (Figura 20).
Figura 20 - Alterando a cor do texto
Abrirá a janela Cor do texto (Figura 21), onde então você escolherá a cor desejada. Ao concluir, clique em OK.
Figura 21 - Escolhendo e alterando a Cor do
texto
Você também pode clicar direto nos botões da barra de menu:
FAÇA O ALINHAMENTO DAS PÁGINAS
Na barra de menus, você encontra os botões:
Cor do texto Cor do plano
de fundo
Cor de realce
do texto
Aplicar ou remover
lista numerada
Aplicar ou remover
lista com marcadores
Alinhar à
esquerda
Alinhar à
direita
Centralizar Justificar Recuar texto (mover
para a direita)
Diminuir recuo (mover
para a esquerda)
11
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Ao clicar no menu Formatar, depois em Alinhamento , você pode escolher dentre quatro opções de alinhamento do texto: esquerdo, centralizado, direito ou justificado (Figura 22).
Figura 22 - Escolhendo o alinhamento do texto
ALTERE PLANO DE FUNDO E CORES
Para alterar o plano de fundo e as cores da página, clique no menu Formatar e selecione a opção Plano de fundo e cores... (Figura 23).
Figura 23 - Modificando o Plano de
fundo e cores da sua página
12
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Na janela Plano de fundo e cores da página, você pode escolher entre (deixar as cores padrão do internauta) ou usar cores personalizadas (Figura 24). Depois de selecionada as cores clicar no botão OK. Você também pode escolher uma imagem para inserir como fundo de suas páginas.
Figura 24 - Modificando o Plano de fundo e cores da sua página
ALTERE AS PROPRIEDADES DA PÁGINA Para alterar as Propriedades da página, ou seja, alterar... clique no menu Formatar e selecione a opção Propriedades da página ... (Figura 25). Através dessa opção, você pode reformular (ou informar, se ainda não fez) o título de sua página, o autor, uma breve descrição e outras opções, conforme apresentado na Figura 26.
Figura 25 - Modificando as
Propriedades da página
DICA 7 – Imagens de fundo
Quando você seleciona uma imagem de fundo para sua página, ela é utilizada
como um “carimbo”, sendo repetida tantas vezes quantas forem necessárias
para preencher o fundo. Selecione imagens de cores suaves e que não
confundam a leitura do texto!
Clicar sobre a cor para alterá-la
Escolher uma imagem para
colocar de plano de fundo
13
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 26 - Modificando as Propriedades da página
INSIRA IMAGENS As imagens a serem inseridas em suas páginas HTML devem ser salvas na mesma pasta que as páginas que foram criadas, antes de incluí-las na mesma.
Para inserir imagens na sua página, agora que elas foram salvas em sua pasta, basta:
1. Colocar o cursor no local aonde a imagem será inserida no texto;
2. Clicar no ícone ou ;
3. Será apresentada uma janela como da Figura 27;
DICA 8: Acentuação gráfica, espaços em branco e letras maiúsculas nos nomes
dos arquivos das imagens
Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc., ao
salvar e nomear os suas imagens também. Siga a mesma orientação para o salvamento
de outros arquivos.
14
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 27 - Buscando a imagem no seu computador
4. Selecionar a imagem desejada na pasta onde foi salva em seu computador (Figura 28) e depois
no botão Abrir.
Figura 28 – Selecionando uma imagem no seu computador
DICA 9: Acentuação gráfica, espaços em branco e letras maiúsculas nos nomes
dos arquivos das imagens
Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc., ao
salvar e nomear os suas imagens também. Siga a mesma orientação para o salvamento
de outros arquivos.
Clique para procurar a imagem
desejada em seu computador
15
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
5. Será mostrada uma janela como da Figura 29, para que você conclua a configuração e insira sua imagem. Ao concluir, clique no botão OK.
Figura 29 – Propriedades da imagem inserida em sua página
6. Clicando na aba Dimensões (ainda na Figura 29), é possível alterar as dimensões da imagem selecionada.
DICA 10: Endereço relativo ou absoluto
O endereço relativo é referente apenas à localização da pasta e ao nome do arquivo.
Se aparecer o caminho do seu computador no código (como por exemplo:
“file:///C://Meus%20documentos/tutorialNVU/cozinheiro.gif”, o link não funcionará após a
publicação, pios indica uma pasta em nosso computador e que não existe no servidor
nem no computador de quem for visualizar nossa página. Neste caso verifique:
se a imagem está salva na mesma pasta que a imagem inserida ou
se você desabilitou o quadradinho ao lado da opção “O endereço é relativo ao da
página.
Corrija, se for o caso, o problema e insira novamente a imagem.
16
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 30 - Alterando o tamanho de uma imagem selecionada
Figura 46 – Janela para alteração das Propriedades de uma imagem
INSIRA TABELAS As tabelas são bastante utilizadas, não só como forma de apresentar dados, mas como forma de organizar o conteúdo. Para inserir uma tabela em sua página:
1- Clique no menu Inserir e selecione a opção Tabela na Barra de Menu
ou clique diretamente no botão .
Será mostrada a janela Inserir tabela, como na Figura 31. Nesta janela, você poderá selecionar o número de colunas e linhas simplesmente selecionando com o mouse. Sua seleção ficará mostrada através da coloração azul forte. Ao concluir, clique no botão OK.
DICA 11: Alterando o tamanho de uma imagem selecionada
Você pode diminuir a imagem (aumentando ou diminuindo a largura ou altura) da
mesma. Para tanto clique sobre o número relativo aos pontos e modifique-o, por
exemplo, para 300. Deixe a opção Manter a proporção marcada para que a imagem
não fique desproporcional.
Você também pode alterar o tamanho da imagem após sua inserção no texto, clicando
sobre ele e movimentando as alças da imagem.
Em nenhuma das duas opções haverá alteração no tamanho da imagem, somente na
sua visualização.
17
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 31 - Inserindo uma tabela
Também é possível, clicando na aba Detalhado, escolher o número de Linhas e Colunas, a Largura da tabela e a espessura da Borda, como mostrado na Figura 32.
Figura 32 - Definindo o número de linhas e colunas de uma tabela
Através da aba Célula (Figura 33) é possível escolher ou modificar o Alinhamento horizontal, Alinhamento vertical, selecionar Quebrar ou Não quebrar o texto, assim como o espaçamento entre as células.
Figura 33 - Escolhendo ou modificando as propriedades de uma célula
DICA 12: Uso da borda em uma tabela
Caso a tabela seja apenas para organizar o conteúdo na janela e você não quiser que as
linhas e colunas apareçam, escolha a espessura 0 no item Borda.
18
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Veja a tabela inclusa na área de edição. (figura 50) Você pode alterar a localização da tabela e suas propriedades. Para alterar selecione a tabela e clique com o botão direito do mouse na opção Propriedades para célula (figura 51)
Figura 50 – Visualização da tabela que foi inserida
Figura 51 – Modificando as propriedades da tabela e da célula
19
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Na aba Tabela você pode:
Figura 52 – Modificando as propriedades da tabela
Após fazer as alterações clique no botão Aplicar e depois OK.
Clicando no ícone abre-se a janela Cor do plano de fundo da tabela para você alterar, conforme figura 52, escolha a cor e clique em OK.
Figura 52 – Modificando a cor do plano de fundo da tabela
1 - Altera o número e tamanho em (porcentagem da janela ou pontos) das Linhas e Colunas. 2- Configurar o tamanho da borda. 3 – Configurar o espaçamento. 4 – Configurar a formatação da tabela (Esquerdo, Centralizado ou Direito). 5 - Mudar a cor do plano de fundo da tabela
20
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Na aba Células você pode:
Figura 53– Modificando as propriedades das células
Você pode também através da seleção da tabela e clicando com o botão direito do mouse Inserir na tabela (linha, coluna e célula em cima ou embaixo, antes ou depois) conforme figura 54, selecionar na tabela (tabela, linha, coluna, célula ou todas as células) figura 55 e Excluir da tabela (tabela, linhas, colunas, células ou conteúdo da célula) figura 56.
Figura 54 – Inserindo na tabela (tabela, linha em cima ou embaixo, coluna e célula antes ou depois)
Figura 55 – Selecionando na tabela (tabela, linha, coluna, célula ou todas as células)
Seleção do que terá suas
propriedades modificadas.
Não esqueça de
selecionar a caixa na
qual as propriedades
serão modificadas.
21
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 56 – Excluindo da tabela (tabela, linhas, colunas, células ou conteúdo da célula)
Você pode ainda mesclar duas células de uma linha ou coluna. Para tanto selecione as células e clique sobre Combinar as células selecionadas (figura 56)
Figura 57 – Combinando duas células selecionadas
Você pode alterar o tamanho de uma tabela ou de suas células selecionando-a e arrastando com o cursor a mesma para que ela fique no tamanho desejado (figura 58).
Figura 58 – Aumentando o tamanho da tabela
22
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
INSIRA LINKS
Links são os vínculos (ligações) entre textos e outros textos, textos e imagens, imagens e textos, textos e outros tipos de arquivos, etc... Para inserir um link é preciso selecionar o texto ou a imagem que servirá como link (figura 59).
Figura 59 – Selecionando o texto que terá um link
(1) Clique em Inserir/Link... ou no botão Abrirá a janela Propriedade do link na qual você deve:
(1) selecionar o arquivo caso o link seja para outra página ou arquivo feito por você (2) digitar o endereço da Internet (caso seja o direcionamento para um link externo) (3) digitar o endereço de email e selecionar a opção O endereço é de email.
Figura 60 – Janela Propriedades do link
23
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Para inserir link para outra página feita por você, clique no botão Selecionar arquivo... e procure na pasta criada por você o mesmo, clicando sobre ele e depois em Abrir.
Figura 61 – Incluindo link para outro arquivo criado para compor o seu site
Figura 62 – Link criado para o arquivo (página) www.html
Para inserir link para um endereço da Internet já existente é preciso digitar ou copiar (Crtl + C) e colar (Crtl + V) o endereço conforme mostrado na figura 63
Figura 63 – Link para um endereço da Internet
OBS: Este processo mostrado acima é igual para inserir links para outros arquivos, tais como (texto,
apresentação, pdf, imagens, etc...).
24
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Para inserir link para um e-mail, digite o endereço e selecione a opção O endereço é de e-mail conforme figura 64.
Figura 64– Link para um endereço de e-mail
MODOS DE VISUALIZAÇÃO
Os modos de visualização podem ser: Normal, Exibir Tags, Código-fonte e Visualizar. Na visualização Normal (figura 66) você tem um espaço de criação e edição de páginas semelhante a um editor de textos, o que é feito neste modo é automaticamente incluído pelo programa como forma de código na visualização Código-fonte.(figura 67) O modo de Visualização (figura 68) permite que você veja como a página será exibida nos navegadores, desta forma, é possível que nem tudo que aparece na edição esteja da mesma forma na visualização e sejam necessários alguns ajustes. O modo Exibir Tags, mostra as marcações feitas através de tags (figura 69).
Figura 65 – Modos de visualização das páginas
25
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 66 – Modo de visualização Normal das páginas
Figura 67 – Modo de visualização Código-fonte
26
_________________________________________________________________________________________________
Tutorial: Construção de páginas HTML com o Editor NVU
Figura 68 – Modo de visualização Visualizar
Figura 69 – Modo de visualização Exibir Tags