[Índice]

Nota



Usar o NoteTab para fazer uma página de HTML



1. Descrição sumária das funcionalidades do NoteTab



O NoteTab é um editor de texto sem formatação que permite usar vários ficheiros ao mesmo tempo, navegando-se entre eles por separadores. Adicionalmente, permite introduzir facilmente texto pré-definido e marcas de HTML, bem como, em programação, palavras-chave de linguagens com uma sintaxe já preparada.

O NoteTab pode ser encontrado em www.notetab.com. A versão gratuita, NoteTab Light, é mais do que suficiente.



2. Instalação do NoteTab



Pode ter no sistema tantos exemplares de NoteTab quantos quiser, e trazê-lo numa pen drive e usá-lo mesmo num sistema onde nunca tenha sido instalado.

Recentemente, têm surgido aplicações ditas portáteis, destinadas a viver numa pen drive, tais como as versões portáteis do processador de texto AbiWord, da suite Open Office ou do programa de processamento de imagem GIMP.

Depois de o instalar normalmente através do seu programa de Setup, pode copiar os ficheiros para qualquer lado ou qualquer sistema e o programa continuará a funcionar. Deverá lembrar-se de copiar os ficheiros de que necessita, como notetab.ini, talvez o ficheiro de ajuda notetab.chm, e talvez, se os usa, os clipbooks .clb e .ctbque deverão estar na pasta Libraries.

Pode substituir o Notepad do Windows pelo NoteTab sem inconveniente, exceptuando que o NoteTab leva mais tempo a carregar. Em vez de o eliminar, renomeie o Notepad como Notepad.original, por exemplo. Copie agora o NoteTab e os seus ficheiros para a pasta onde estava o Notepad (eg C:\windows) e renomeie-o como notepad.exe..



3. Modificar um clip de texto



Abra o NoteTab. Feche o ficheiro de Read.me; abre-se um ficheiro novo, NoName01.txt (pode mudar a matriz para estes nomes).

Uma das várias partes interessantes do NoteTab é a inserção de texto pré-formatado. Escolha a Library HTML, quer clicando no respectivo botão, quer abrindo o selector das libraries.

Se fizer duplo clique em "New Web Page", insere-se um cabeçalho para uma nova página de HTML.

Vamos modificar este clip, "New Web Page".

Clique com o botão dreito sobre o nome do clip e escolha Edit Clip. Deixe a primeira linha inalterada. Apague as restantes e substitua-as por:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt">

<head>

<title> *** TÍTULO AQUI *** </title>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="description" content="*** AQUI O RESUMO ***">

<LINK rel="stylesheet" type="text/css" href="*** Aqui a folha CSS ***">

</head>

<body>



Grave. Isto inicia qualquer página de HTML que queira com os cabeçalhos adequados.

4. Criar um clip de texto

Vamos agora criar um novo clip para terminar as páginas de HTML com alguma informação. Clique com o botão direito na área dos clips, onde quiser que este surja, e escolha "Add New Clip". Dê-lhe um nome.

Copie para lá o código seguinte:



Fecho de página HTML

<hr>



^!Set %p_EMail%=^?{E-Mail=^%p_FName%}

;Abort this procedure if the Clip wizard was cancelled by the user

^!IfCancel Exit

;Insert text and variable content into document

<p>E-mail: <A HREF="mailto:^%p_EMail%">^%p_EMail%</A></p>



<p style="font-size: small">Revisto ^$GetDate(yyyy-mm-dd hh:mm)$</p>



</body>

</html>



Agora, abra um ficheiro novo. Faça duplo clique sobre o clip New Web Page.

5. Colocar entidades e marcas de parágrafo num bloco de texto

Copie para este ficheiro, abaixo da marca <body>, o texto seguinte:

Apontamentos sobre 1755

Interessante no estudo relativo ao séc. XIII é ver, embora sumariamente, o papel que tiveram os nossos engenheiros militares na restauração da cidade de Lisboa, após o terramoto de 1755, sobretudo o engenheiro-chefe Manuel da Maia e os que mais directamente foram incumbidos dos monumentais trabalhos, que honram a engenharia portuguesa.

Na Revista da Sociedade de Instrução do Porto (vol. II, 1882, pág. 271) a eminente escritora D. Carolina Michaelis de Vasconcelos, tratando da impressão que na Alemanha produzira esse memorável terramoto, refere-se a três estudos que, logo em seguida, apresentou o grande filósofo Kant.

Estes ligam-se com outra obra mais considerável p ele publicada no mesmo ano: Allgemeine Naturgeschichte und Theorie des Himmels. Desses três estudos, o segundo é o que mais nos interessa; porque descreve o terramoto, trata das suas causas físicas, e sobre ele faz considerações científicas de grande alcance; e a ilustre escritora, dando notícia do seu conteúdo, observa:

"Lendo este estudo de Kant acudiu-nos à memoria aquela carta, cheia de bom senso, que Gil Vicente mandou de Santarém a El-Rei D. João III "estando Sua Alteza em Palmela, sobre o tremor de terra que foi a 26 de Janeiro de 1531". O filósofo alemão leva a vantagem ao poeta nacional quanto a saber o ponto de vista crítico; entre um e outro há dois séculos de estudos científicos; mas o nosso Gil Vicente não lhe fica atrás na inteireza do juízo e verdade do sentimento."

Seleccione tudo, de "interessante" a "sentimento."", deixando de fora a primeira linha, de título. Escolha Modify / Document to HTML / With Paragraph Tags. O texto é convertido para entidades e os parágrafos marcados.

Seleccione a primeira linha, do título, "Apontamentos sobre 1755", e do clipbook HTML escolha, em Block Formatting, "H? Header". Para o nível, escolha 3, Ok.

6. Finalizar

Vá ao fim do ficheiro e faça duplo clique no clip que criou e que termina as páginas de HTML.

Grave com a extensão .htm.

Prima CTRL-T (ou clique no globo com uma lupa, "view in Browser", na barra de ferramentas) para ver no seu browser pré-definido.

Basta-lhe agora indicar o título na marca Title, o endereço da folha de estilos e fazer um curto resumo na marca META Description.

Pode abrir um novo documento para criar a sua folha CSS, ou, se for bastante simples, criar um clip para os seus estilos mais usados, por exemplo:



<STYLE TYPE="text/css">

<!--

body {

color: black;

background: white;

font-family: "Courier",serif;

margin-top: 10%;

margin-left: 15%;

margin-right: 15%;

margin-bottom: 10%;

}

p {

text-align: justify;

text-indent: 5em;

line-height: 1.4em;

}

h3 {

font-family: "Arial",sans-serif;

font-size: 130%;

font-weight: bold;

}

-->

</STYLE>




[Índice]
Rev. 2006-10-06 21:16