Índice INTRODUÇÃO 3 1. BREVE INICIAÇÃO AO HTML 4 2. EXEMPLO DE UMA PÁGINA 5 3. ESTRUTURA DO CÓDIGO 6 4. COLORIR UMA PÁGINA 7 5. FORMATAÇÃO 8 6. ANIMAÇÃO DE TEXTO E IMAGENS 10 Pág 1
7. UTILIZAÇÃO DE IMAGENS 12 8. CONSTRUÇÃO DE TABELAS 14 9. UTILIZAÇÃO DE SOM 17 10. HIPERLIGAÇÕES 18 11. UTILIZAÇÃO DE FRAMES 19 12. UTILIZAÇÃO DE FORMULÁRIOS 22 Pág 2
Introdução Organização do Manual O objectivo deste manual é prestar auxilio ao formando durante as sessões de formação do módulo. Não se pretendem por isso, descrever todas as potencialidades do Html, mas sim guiar o formando na utilização de uma ferramenta que, em alguns casos poderá constituir uma primeira abordagem ao mundo da programação. O próprio manual só poderá ter sentido enquanto parte integrante de um todo em que consiste o conjunto das sessões de formação do módulo Construção de Páginas para Internet. Para uma melhor performance ao nível da utilização mais correcta do Html e de outros pressupostos, o formando deverá ter frequentado anteriormente o módulo Sistema Operativo Windows. O Html O Html é uma linguagem para a criação de páginas WWW. As instruções Html são incluídas directamente num Processador de Texto que poderá ser tão simples como o Bloco de Notas, ou outro qualquer mais elaborado. Pág 3
1. Breve Iniciação ao Html O QUE É O HTML... É uma linguagem para páginas Web. O QUE NECESSITO PARA PROGRAMAR... Basicamente tudo o que necessitamos para programar em Html, é de um processador de texto, o simples NotePad do Windows serve, e de um Browser. COMO FAÇO PARA CONSTRUIR UMA PÁGINA... Primeiro que tudo deveremos iniciar o NotePad, e digitar as seguintes linhas: <html> </html> As mesmas significam o inicio e final do código a ser digitado em Html. Para além disso deveremos guardar o ficheiro com um nome á nossa escolha e extensão htm, por exemplo no ambiente de trabalho do Windows. Pág 4
2. Exemplo de uma Página OBJECTIVO DA PÁGINA... Pretende-se saudar o utilizador de uma página, através de código em Html. COMO CRIAR O CÓDIGO NECESSÁRIO... Começaremos por abrir o Notepad e digitar o seguinte código: <html> <head> <title>primeira Aplicação</title> </head> <body> Texto em html </body> </html> Agora, vamos passar á fase de gravação do ficheiro, que se irá chamar Primeira.htm, o qual será posicionado por exemplo no Ambiente de Trabalho do Windows. Fechado ou minimizado, o NotePad, é chegado o momento de testar a nossa página com um duplo clique sobre o ficheiro Primeira.htm. Pág 5
3. Estrutura do Código QUASE SEMPRE IGUAL... Como foi visto no exemplo apresentado, deveremos partir sempre de uma página WWW, o que nos leva a ter de compreender um pouco, a sua estrutura. <html>, significa inicio da codificação em html, o que leva a pressupor que </html>, deixa entender o seu final. Um documento html, possui sempre dois pontos importantes, o head e o body, que permitem a divisão do código em duas partes distintas, o cabeçalho, por assim dizer e a parte que irá conter o maior número de informação da página. EXPLICAÇÃO DO CÓDIGO UTILIZADO... <title>primeira Aplicação</title> Texto em html Pág 6
4. Colorir uma Página O QUE POSSO FAZER... Quando pretendemos dar um toque de fantasia á nossa Página, podemos começar por incluir nela, por exemplo, uma cor de fundo. COMO POSSO FAZER... Sem dar a devida atenção ás instruções que temos abordado, vamo-nos concentrar na linha que até agora temos digitado apenas como <body>. <body> Pois é, de tão simples que era passará agora para: <body bgcolor= green > O resultado não se faz esperar, e ei-nos deparados com uma Página decorada com um fundo verde. A partir daqui a selecção das cores dever-se-á efectuar de acordo com conteúdo da já referida Página, sendo aconselhável uma utilização moderada das respectivas cores. Pág 7
5. Formatação OBJECTIVO DA PÁGINA... Escrever numa página, como vimos, não é difícil. E que tal formatar o tipo de letra. COMO CRIAR O CÓDIGO NECESSÁRIO... As instruções baseiam-se nas páginas já criadas, pelo que nos iremos debruçar apenas nas novidades introduzidas. <html> <head> <title>primeira Aplicação</title> </head> <body> <font face= Comic Sans Ms color= Blue size= 2 > Texto em html </font> <img src="foto.bmp" width="200" height="150"><br> </body> </html> O código introduzido antes do texto permite neste caso seleccionar o tipo de letra Comic Sans Ms, a cor Azul e o tamanho 2, sendo o mesmo concluído com a instrução </font>, para que o texto que seja digitado a seguir não obtenha a mesma formatação. Pág 8
Como complemento podemos acrescentar três novas instruções que permitem uma formatação mais completa. <font face= Comic Sans Ms color= Blue size= 2 > <b>texto</b> <i>em</i> <s>html</s> </font> O instrução <b>, concluida por </b>, e que possibilita o colocar de uma palavra ou expressão em negrito, <i> e </i>, para o itálico e <s> e </s> para sublinhar. Ao digitar um texto, é normal que o mesmo seja alinha automaticamente á esquerda pelo que é necessário recorrer a <center> ou <div align = "right">, para centrar ou alinhar a direita, sendo as instruções concluídas por </center> ou </div>. <font face= Comic Sans Ms size= 2 > <b>texto em Comic </b> </font> <font face= Arial size= 2 > Texto em Arial </font> A mudança de linha pode ser efectuada pela utilização de <br> ou <p>. Pág 9
6. Animação de Texto e Imagens OBJECTIVO DA PÁGINA... Se tem movimento chama a atenção e se chama a atenção que tal um pouco de movimento para texto e imagens. COMO CRIAR O CÓDIGO NECESSÁRIO... Partindo mais uma vez do código base, vamos explorar as várias formas de atribuir movimento a texto ou imagens. <html> <head> <title>primeira Aplicação</title> </head> <body> <marquee> <img src="foto.bmp" width="200" height="150"> </marquee> </body> </html> Como se pode observar o comando que atribui movimento é <marquee>, que irá possibilitar uma animação, neste caso a uma imagem, na horizontal e no sentido direita, esquerda, sendo no entanto opcional o recurso a outras direcções, como se enumera de seguida. <marquee direction = "right"> <img src="foto.bmp" width="200" height="150"> </marquee> Em direction, podemos digitar também up ou down, consoante a direcção pretendida Pág 10
Para atribuir ainda mais versatilidade á instrução é fácil fazer uso de uma nova possibilidade acrescida ao comando já digitado e que lhe vai condicionar o comportamento. <marquee direction = "right" behavior = "alternate"> <img src="foto.bmp" width="200" height="150"> </marquee> Em behavior, podemos digitar também slide, se o pretendido é que o movimento se realize apenas uma vez. Pág 11
7. Utilização de Imagens OBJECTIVO DA PÁGINA... Partindo da Primeira Página, pretendemos agora introduzir um novo elemento na nossa página, neste caso uma pequena imagem. COMO CRIAR O CÓDIGO NECESSÁRIO... Por uma questão de poupança de tempo, partiremos do código já criado no nosso primeiro exemplo, guardando o ficheiro com um novo nome, Segunda.htm, a fim de preservar o trabalho anterior. <html> <head> <title>primeira Aplicação</title> </head> <body> Texto em html<br> <img src="foto.bmp" width="200" height="150"><br> </body> </html> Pág 12
Como podemos observar o código <img src> serve para identificar a imagem pretendida, a qual deverá ainda ser formatada em termos de altura e largura, a fim de ser posteriormente visualizada na Página WWW. Se por outro lado pretendermos inserir uma imagem como fundo da página que estamos a criar poderemos digitar em <body> a seguinte instrução: <body background= Nome da Imagem > O resultado será a imagem por nós seleccionada, visualizada como fundo da páginas que estamos a construir. Ainda assim, ao utilizarmos o elevador vertical, iremos observar que a imagem de fundo acompanha o movimento efectuado, o que poderá ser evitado alterando a instrução da seguinte forma: <body background= Nome da Imagem bgproperties= fixed>> Pág 13
8. Construção de Tabelas PARA QUE SERVEM... Torna-se necessário por vezes, para uma melhor arrumação dos elementos de uma página ou para uma utilização efectiva da mesma o recurso a uma tabela. COMO POSSO FAZER... Vamos partir da linha <body> para iniciar a construção da nossa tabela. <body> <table> <tr> <td> Coluna 1 Linha 1 <td> Coluna 2 Linha 1 <tr> <td> Coluna 1 Linha 2 <td> Coluna 2 Linha 2 </table> </body> Como se pode observar a instrução <table> irá permitir a criação de uma tabela, sendo que <tr> informa o browser do inicio de uma nova linha e por fim <td> a existência de uma coluna. Para um melhoramento da nossa tabela, iremos agora alterar a linha <table> para: <table border=1 width="20%"> Pág 14
A alteração reside no facto de ser visível agora, um traço delineado em toda a tabela, bem como largura da mesma ser proporcional á página no valor inserido e width. Continuando com alterações podemos também seleccionar cor de traço e inclusive a cor de fundo, digitando novamente a instrução table: <table border=1 bgcolor= blue" bordercolor= green Exemplo da utilização de uma Tabela para tratamento de texto. Exemplo da utilização de uma tabela para tratamento e posicionamento de imagem. Pág 15
texto. Exemplo da utilização de uma tabela para tratamento e posicionamento de imagem e Pág 16
9. Utilização de Som ALGUMA FANTASIA... Sem cair em exageros o som pode e deve ser utilizado como complemento das páginas por nós criadas. O SOM EM HTML... Para inserir som numa página WWW, teremos apenas de nos posicionarmos abaixo da linha de <body> e digitar a seguinte instrução: <bgsound src= Nome do Ficheiro > Pág 17
10. Hiperligações PARA QUE SERVEM... As hiperligações ou links, possibilitam a navegação entre as várias páginas relativas a um mesmo assunto. COMO CRIAR LINKS... Para criar um link deveremos digitar a instrução <a href= Nome da Página >Legenda</a>. O resultado seria a palavra Legenda como link para a Página cujo nome foi colocado frente ao sinal de igual. Ou seja, imaginemos duas páginas, um.htm acerca do assunto Praia e dois.htm relativa ao assunto Mar. As instruções seriam as seguintes: <a href= um.htm > Natureza </a><a href= dois.htm > Mar </a> Link Pág 18
11. Utilização de Frames O QUE SÃO... Frames não são mais do que divisões que podemos efectuar na página que estamos a visualizar. COMO CONSTRUIR FRAMES... Uma página pode dividir-se em frames utilizando para isso <frameset>, tendo em conta duas informações cols e rows. <frameset rows= 30%, * > O código apresentado efectua uma divisão da janela em duas linhas, a primeira ocupando 30% da área da mesma e a segunda tomando como sua a restante área. Torna-se depois necessário informar cada uma das frames acerca da página que vão conter. Para isso recorremos ao seguinte código: <frame src= 1.htm name= um noresize scrolling= yes > No exemplo apresentado, indicamos a página 1.htm para a primeira frame. Acrescentamos ainda um nome para a mesma frame(um), que no nosso caso não poderá ver a sua área alterada (noresize), contando por fim com uma barra de deslocamento(scrooling= yes ). OBJECTIVO DA PÁGINA... Criar uma página que permita visualizar duas páginas diferentes em simultâneo. Pág 19
COMO CRIAR O CÓDIGO NECESSÁRIO... Página 1.htm <html> <head> <title> Janela Principal </title> </head> <frameset rows= 20%, * > <frame src= 2.htm > <frame src= 3.htm > </frameset> </html> Página 2.htm <html> <head> <title> Página 2 </title> </head> <body> Olá esta é a Página 2 </body> </html> Página 3.htm <html> <head> <title> Página 3 </title> </head> <body> Olá esta á a página 3 </body> </html> Pág 20
Como se pode observar, ao abrir a página 1.htm, dispomos da visão da página 2 e 3, que neste caso não apresentam outra funcionalidade que não o servir de exemplo á utilização de frames. Pág 21
12. Utilização de Formulários COMO CONSTRUIR... Como em muitos outros elementos, os formulários são iniciados com <form> e finalizados com </form>. Textarea A área de texto é um campo no qual podemos introduzir informação, utilizando várias linhas. <Textarea name= nome rows=10 cols=10> Texto </Textarea> Text A caixa de texto é um campo no qual podemos introduzir informação, utilizando uma linha. <Input type= text name= txt value= Olá > Password É um elemento que permite trabalhar com passwords. <Input type= password name= pass size= 10 > Botão É um elemento que permite trabalhar com botões. <Input type= button name= botão value= Ok onclick= a() > Pág 22