CURSO DE HTML
Bem-vindo a este pequeno curso de HTML que, ao longo de 24 aulas de fácil compreensão, o habilitará a construir a sua página pessoal de forma simples e
rápida.
Alguns assuntos e tecnologias que fogem ao HTML simples, são aqui abordadas de forma básica, deixando para o interessado pistas para uma pesquisa mais aprofundada
na Internet.
Esperamos assim facilitar a utilização desta área dedicada à criação de páginas pessoais sobre rádio, explicando conceitos que poderão ser, mais tarde,
usados em outros projectos.
AULA 1: O que é a Internet
Nesta aula vamos aprender como surgiu a Internet e quais os seus princípio gerais de funcionamento. Como nasceu, o que é a web e o que é o hipertexto.
HISTÓRIA DA INTERNET
Numa altura em que toda a gente fala da Internet e os média não param de nos bombardear com histórias de feitos fantásticos nesta rede das redes, fica claro
que a Internet chegou e veio para ficar.
Mas a Internet não foi 'planeada'. Não houve um grupo de pessoas que se sentou a uma mesa e disse 'vamos criar a Internet'.
Em 1957, a União Soviética lançou para o espaço o primeiro satélite, o que causou bastante azáfama junto dos Estados Unidos. Parte da resposta americana
ao avanço tecnológico da União Soviética foi a criação do "Advanced Research Projects Agency" (Agência de Projectos de Investigação Avançada). No final
dos anos 60, esta agência criou uma rede experimental chamada Arpanet, que utilizava tecnologia de 'packet switching' para o transporte de informação,
tecnologia essa que é a base do que hoje conhecemos por Internet.
A tecnologia 'packet switching' funciona da seguinte forma : quando um dos computadores desta rede quer enviar informação a outro computador, divide essa
informação em diversos pacotes, e em vez de estabelecer uma ligação directa ao computador de destino, envia os pacotes para o computador mais perto de
si, com a indicação em cada pacote do computador remetente e o computador destinatário.
Os pacotes viajam pelos computadores que estão ligados entre si, e cada computador encarrega-se de enviar os pacotes, pelo caminho mais curto, disponível
até ao destino.
A grande vantagem deste sistema era o facto de ser à prova de ataque, porque se parte do sistema fosse inutilizada, a rede era inteligente o suficiente
para enviar a informação através das linhas e computadores ainda disponíveis.
Nesta altura, apenas organismos militares e grandes universidades estavam ligados entre si pela ArpaNet, mas a rede foi crescendo, e com o tempo foi permitida
a entrada de organismos comerciais.
Outras redes mais pequenas foram-se ligando também a outros computadores desta rede, formando um conjunto de redes de computadores ligadas entre si, a que
hoje chamamos de Internet.
Assim, a Internet não tem nenhum ponto central, nem é gerida por ninguém, é apenas um conjunto de redes de computadores ligadas entre si, que utilizam a
mesma tecnologia para enviar e receber informação.
O QUE É O CORREIO ELECTRÓNICO
O e-mail (correio electrónico) foi o primeiro 'serviço' a ser inventado, em 1972, embora demorasse algum tempo até que a sua utilidade fosse totalmente
compreendida.
É de notar que as páginas web, a face mais visível e mais mediática da Internet apenas foi inventada em 1993, e foi esta tecnologia, utilizada na Internet,
responsável pela verdadeira explosão de número de utilizadores, número de computadores, e de redes ligadas.
Até essa altura, os utilizadores da Internet apenas trocavam e-mail, obtiam ficheiros por FTP e utilizavam serviços baseados em texto, hoje em dia pouco
conhecidos.
COMO NASCEU E O QUE É A WEB
Em 1992, no CERN - Laboratório Europeu de Física de Partículas, na Suíça, um cientista chamado Tim Berners-Lee inventou uma forma de disponibilizar páginas
de texto com 'links' (âncoras) onde se podia clicar para saltar para outras páginas.
Lee desenvolveu este método de navegação na informação porque queria ter a possibilidade de obter mais informação sobre um dado termo ou tópico presente
num texto, quando necessário.
Em 1993 Marc Andreessen e os seus colegas de trabalho no NCSA - National Center for Supercomputing Applications (Centro Nacional para Aplicações de Super-computação),
criaram o primeiro 'browser' - programas para navegar nas páginas web, chamado Mosaic.
O resto da história é já conhecida por muitos : O Mosaic foi evoluindo, e quando Marc Andreessen fundou uma pequena empresa chamada Netscape para desenvolver
um 'browser' mais robusto, o crescimento e evolução da web tomou proporções verdadeiramente incríveis. Com o crescimento da web, cresceu também, a um ritmo
alucinante, o número de utilizadores de Internet.
O QUE É O HIPERTEXTO
O HiperTexto é o nome genérico que se dá à navegação na informação que hoje vemos na web. O HiperTexto é a base da web, e permite navegar entre documentos
clicando em 'links'. O HiperTexto é também utilizado em diversos programas, em programas multimédia, enciclopédias interactivas, no sistema de Help (ajuda)
do Windows, etc.
AULA 2: O que é o HTML
Nesta aula vamos aprender o que é o html, o que é um browser e quais os que estão disponíveis, vamos aprender o que são tags html, ter o primeiro contacto
com o html de uma página, e explorar alguns deles.
O QUE É O HTML
Da mesma forma que, para comunicar utilizamos uma língua (o português, o inglês etc), os programas de computador utilizam uma linguagem para tomarem forma,
e os documentos utilizam um formato.
Os programas de computador podem ser escritos em várias linguagens como o Visual Basic, o Visual C++ entre outros.
Os documentos podem, por exemplo, estar em formato word, ou excel.
As páginas web utilizam o formato HTML. Que significa Hyper Text Markup Language.
Algumas pessoas consideram o HTML uma linguagem, como se fosse uma linguagem de programação. Quer se considere formato ou linguagem, o HTML é o que dá forma
às páginas web.
Uma página web não é mais que um ficheiro de texto que contém comandos HTML.
O termo 'página internet' ou 'página web' refere-se normalmente a uma página html.
Um 'sítio web', 'sítio internet' ou 'web site' é, normalmente, um conjunto de páginas web. Por exemplo, o 'web site' da MINHARADIO é o conjunto de páginas
web presentes no servidor da MINHARADIO. Quando introduz no browser o endereço de um 'web site' aparece a página web de entrada do site procurado.
OS BROWSERS
Um browser é um programa que permite ver páginas web. Quando utilizamos um browser e introduzimos um endereço de uma página, o programa lê o ficheiro, interpreta
o html que ele contém, e apresenta a página web no ecrã.
Existem diversos browsers disponíveis, sendo os mais conhecidos o Internet Explorer, o Netscape Navigator, o Mozilla e o Opera.
O Internet Explorer é o browser mais utilizado, seguido do Mozilla e Opera.
O que é um 'tag'?
Um tag é um comando que diz ao browser que vai carregar a página o que deve aparecer ali.
Como deve imaginar existem tags para uma infinidade de coisas, desde tags que inserem texto, dizem qual o formato desse texto, imagens, sons, etc.
A maioria dos tags são usados aos pares, tendo um para abrir a instrução e outro para a fechar.
Por exemplo, o tag que escreve o texto em negrito (bold) envolve o texto que deverá aparecer destacado. Repare:
-------------------------------------------
Este é o texto a ser destacado.
-------------------------------------------
-O que está dentro dos tags aparece em negrito (quando o aplicar na página)
-Repare na diferença do início da instrução e do fim. O fim tem sempre uma barra inclinada para a direita, que indica que ali acaba o tag.
Esta explicação é fundamental para compreender todo o processo da feitura de páginas web, já que, para ela o ser de facto, deverá conter o código dentro
de um tag característico: o tag
Este tag indica que tudo que está dentro dele está em html. Este tag é também usado com o seu par correspondente no fim:
---------------------------------------------
Tudo que fizer terá que estar aqui no meio
---------------------------------------------
Vamos então saber o que deveremos ter dentro do tag . Antes de tudo temos que dar um nome à página. A nossa página irá chamar-se 'A minha primeira
página'. Para darmos um nome utilizamos o tag . Se prestou atenção à explicação dos tags acima, já deve ter percebido como este se irá comportar:
---------------------------------------------
<html>
<title>A minha primeira página
---------------------------------------------
Vamos ver o resultado?
Escreva o que está entre as linhas num ficheiro de texto cru. [Não use o word ou qualquer processador de texto complexo. Use o notepad (bloco de notas)]
Crie uma pasta no seu disco, grave lá dentro esse ficheiro com a extenção .html e abra-o com o seu browser.
Não tem nada... mas repare na barra em cima do browser. Contém o nome da sua página!
UM APARTE:
Como o ficheiro agora tem extenção .html, em vez de ser o bloco de notas o programa associado, já será o browser. Se preferir, mude-lhe a extenção para
txt, se usa o Internet Explorer da Microsoft, vá a view-source no menu do browser, ele abrir-lhe-á o bloco de notas com o código da sua página. Pode passar
a trabalhar sempre aqui. (O view source é útil para ver o código das páginas e assim perceber como se fazem algumas coisas em html, podendo assim modificar
e trabalhar à vontade.
Voltemos ao bloco de notas.
Já indicámos que aquele ficheiro está em formato html e demos um nome, vamos então tratar do seu conteúdo. O tag que indica onde está o conteúdo visível
é o este deverá estar dentro do e depois do . Assim:
---------------------------------------------
<html>
<title> A minha primeira página
A minha primeira página
---------------------------------------------
Sim, tudo que estiver dentro do é visível.
Se for espreitar o resultado (se usou o view source, grave e clique no botão de refrescar/recarregar a página) verá não só o título como também a frase
que está entre . A sua página já tem texto. Este é pequeno e sem graça, um título deveria ser algo que chamasse mais a atenção. Pois cá vamos. Para
isto usamos o tag (de header-cabeçalho). Com o podemos definir o tamanho do texto lá dentro. O pode ter valores entre 1 e 6 em que o valor
1 é o prioritário, logo maior, e o 6 é o menos destacado (menor). O texto entre será sempre mais carregado, mesmo que seja pequeno e tem a particularidade
de 'viver' num parágrafo sempre separado de qualquer outra coisa que inserir na página.
Experimente:
---------------------------------------------
A minha primeira página
A minha primeira página
A minha primeira página
A minha primeira página
A minha primeira página
A minha primeira página
A minha primeira página
---------------------------------------------
Escolha o que mais lhe agrada e apague os outros. Nós vamos optar pelo tamanho 1.
Um outro tag muito utilizado é o
não vamos aprofundar muito as propriedades deste, já que pensamos ser óbvio o seu funcionamento. Portanto, para
ter o seu título centrado na página envolva-o no tag
desta maneira:
A minha primeira página
Nesta fase podemos acrescentar algo importante a tudo o que já aprendemos, já que é a primeira vez que nos deparamos com uma sobreposição de tags e damos
mais do que uma característica a um componente.
Os tags influenciam o que lá estiver dentro. Ponto final. Ou seja:
A minha primeira página
é precisamente o mesmo que:
A minha primeira página
Trocámos a ordem dos tags, mas isto não influência o resultado. Mas atenção, o primeiro tag a contar da esquerda deverá ser também o primeiro a contar da
direita. Evite portanto uma situação do género:
A minha primeira página
Embora os browsers recentes ignorem este erro e respeitem a ideia inicial, isto é considerado um erro, já que não podemos esquecer os browsers mais precários
que podem ter problemas com este género de situações.
O Texto própriamente dito.
Depois da casca, o miolo. Já temos um nome e um título, vamos escrever um texto de boas vindas, por exemplo. Escreva-o apenas, mais tarde iremos ensiná-lo
a tornar o seu texto mais apelativo.
Como exemplo vamos escrever:
---------------------------------------------
A minha primeira página
A minha primeira página
Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto. Isto não é
nada complicado, as regras básicas repetem-se e é sempre a mesma coisa. Por exemplo, já sei que se quizer este pedaço de texto centrado, só preciso de
pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste texto. Assim fica tudo centrado, já que está tudo dentro do tag.
---------------------------------------------
Leu o que escreveu? Não mude a posição do tag center, vamos manter o texto alinhado à esquerda.
O texto não ficou mal, mas está demasiado corrido, sem parágrafos. Pois há uma solução, o tag
ou o tag . Estes tags não precisam de ser fechados,
apenas indicam que ali occorreu uma quebra. Estes tags quebram o texto no sítio onde os inserir, mas com uma diferença: o
não só quebra como insere
uma linha em branco depois da quebra; o apenas quebra a linha. Vamos experimentar? Escreva:
---------------------------------------------
A minha primeira página
A minha primeira página
Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto.
Cá vai um parágrafo:
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma coisa.
Cá vai um line Break:
Por exemplo, já sei que se quizer este pedaço de texto centrado, só preciso de pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste
texto. Assim fica tudo centrado, já que está tudo dentro do tag.
---------------------------------------------
Até aqui já deve saber:
-Criar uma página html
-Dar um nome à sua página
-Inserir um título
-Inserir texto
-Centrar texto
-Criar parágrafos e quebrar linhas de texto
AULA 3: TAGS e ATRIBUTOS
Nesta aula vamos aprender alguns atributos para os tags
e
- mudança de côr de fundo
- mudança de alinhamento de texto
- mudança de côr do texto
- mudança de tipo de letra
>
ATRIBUTOS DE TAGS:
Todos os tags cumprem uma função dentro do html, mas essa função pode ser moldada de acordo com o que pretender deles. Já falámos aqui em alguns (poucos)
tags mas não mencionámos ainda que os podemos vestir de maneiras diferentes, como por exemplo o tag 'body'. Lembra-se? Foi logo o terceiro tag que aprendeu.
Este tag, dissemos nós que servia para indicar onde está a parte visível do html. Dissemos a verdade mas não toda: este tag também pode dizer muito acerca
dessa tal parte visível.
Até aqui fez uma página branca (ou cinzenta dependendo do browser que usou para a ver). O tag body pode indicar que côr de fundo a página tem. Isto deverá
ser sempre feito mesmo que queira uma página branca, pois se a côr de fundo não estiver definida, cada visitante vai vê-la com a côr que definiu no browser.
O Netscape 3 vê as páginas com fundo cinzento, o Internet Explorer e o Netscape 4 têm o branco como côr standard.
Mudar a côr de fundo:
O atributo a dar ao body para definir a côr de fundo é o bgcolor, usamos este atributo da seguinte forma:
As côres são definidas com o seu código hexadécimal correspondente. Não precisa de saber estes códigos, existem programas que lhe traduzem a côr desejada
pelo código correspondente.
(Visite a secção ferramentas)
Bem, posso já adiantar que o código correspondente ao amarelo é: #FFFF00
Como experiência escreva, e continuando o html já feito até este ponto:
---------------------------------------------
A minha primeira página
A minha primeira página
Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto.
Cá vai um parágrafo:
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma coisa.
Cá vai um line Break:
Por exemplo, já sei que se quiser este pedaço de texto centrado, só preciso de pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste
texto. Assim fica tudo centrado, já que está tudo dentro do tag.
---------------------------------------------
Argh! A página está amarela! Escolhemos esta côr porque se comporta bem com o preto das letras e não incomoda a leitura. Enfim, não está assim tão feia!
O parágrafo.
Tal como o body, também aquele parágrafo que inseriu pode ter atributos. Atributos estes que dizem respeito ao seu alinhamento na página. Aprendamos então
o atributo align.
O align pode ter 3 características: left, right ou center. Se não tiver problemas com a língua inglesa, perceberá que left significa esquerda, right direita
e center centro. Aplicando este atributo obtemos:
ou
ou
Quando o tag
tem um atributo como este, temos que o fechar obrigatóriamente com o correspondente
assim:
Este é um texto alinhado à direita
Mas nesta parte já está À esquerda outra vez.
Pegue no seu trabalho e modifique-o para:
-----------------------------------
A minha primeira página
A minha primeira página
Olá, esta é a minha primeira página na Internet.
Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto.
Cá vai um parágrafo:
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma coisa.
Cá vai um line Break:
Por exemplo, já sei que se quiser este pedaço de texto centrado, só preciso de pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste
texto. Assim fica tudo centrado, já que está tudo dentro do tag.
------------------------------------
Inserimos um no meio da primeira frase para a quebrar e acentuar o texto alinhado
à direita.
O TEXTO:
Continuando a falar de atributos de tags, vamos mudar o texto. Para isso teremos que aprender um tag novo, o
O permite mudar a côr do seu texto, assim como fizemos com o .
O não prescinde da terminação:
este texto está verde
Nada mais simples, nem vamos dar o exemplo no seu html. Escolha uma frase que queira destacar no seu texto e aplique o tag .
Para o font, podemos ter também o atributo
size que pode ir do 1 até ao 7, assim:
Letras com tamanho 3
Terá a frase escrita com o tamanho 3.
Os atributos podem ser ser acumulados dentro de um tag. Portanto, as nossas letras verdes com tamanho 3 terão o seguinte código:
Letras com tamanho 3 e verdes
Que é exactamente igual a:
Letras com tamanho 3 e verdes
Os atributos não seguem uma ordem rígida e podem ser acumulados dentro do mesmo tag. Vamos acumular mais um, o face.
O face indica que fonte esse texto terá.
Letras com tamanho 3 e verdes e com fonte arial
Aqui será necessário ter em atenção o seguinte:
Uma página com uma fonte que não existe no seu computador aparecerá com a fonte standard (aquela que vê se não atribuir nenhuma). Tenha portanto cuidado
com a fonte que escolhe, convém que os visitantes a tenham instalada. Se o visitante não tiver a fonte instalada, pode sempre dar alternativas por ordem
de importância separadas com vírgulas:
Letras com tamanho 3 e verdes e com fonte arial
O visitante que não tem a fonte Arial vai ver a fonte Helvetica (os Macintosh não tem Arial, tem Helvetica que é equivalente).
O Visitante que não tem nenhuma dessas fontes irá ver a fonte Verdana e assim sucessivamente. Em princípio, e neste caso, arial e helvetica serão suficientes
já que é muito difícil haver algum computador sem nenhuma delas instalada.
Até aqui você deverá saber construir uma página básica apenas com texto, escolher os tamanhos, côres e tipos de letra a usar e também escolher a côr de
fundo para a sua página.
Parta da página que nesta altura já deverá ter começado e aplique estes novos conhecimentos, brinque com os tamanhos, côres e alinhamentos. Este poderá
ser um optimo exercício de arranjo do texto e legibilidade. Algumas côres não se conjugam bem umas com as outras. Escolha quais as melhores côres para
usar como fundo/texto.
AULA 4: Links, listas de correio, favoritos, etc
Vamos aprender a utilizar os links, e como mudar as suas cores. Vamos também aprender como criar links para e-mail, listas, e vamos elaborar uma lista de
favoritos.
Os links
Os links são aquelas palavras (ou imagens) que quando clicamos em cima nos levam para outra página. É isto que mantém a web unida e nos permite navegar.
Eles são a base de todo o conceito de hipertexto.
O tag do link é o e tem como parâmetro o href.
Assim funcionará da seguinte forma:
Palavra a aparecer linkada
Então, para fazer um link para uma página onde tenha, por exemplo, mais informações sobre o autor e se chama autor.html podemos fazer:
Clique aqui para saber mais sobre o autor.
Repare:
-Apenas a palavra 'aqui' aparecerá sublinhada.
-O endereço da página de destino teria de estar na mesma directoria (pasta) da página actual, portanto, nao necesitará de ter um endereço tipo 'http://www...'
, podemos indicar apenas o nome do ficheiro html. Se experimentar acrescentar este bocado de html ao que tem vindo a criar, e clicar sobre a palavra linkada,
irá ver uma mensagem de erro. Isto porque teria que criar um outro ficheiro de nome autor.html para que tudo funcionasse na perfeição. No entanto o principal
é que tenha retido a ideia.
Côres dos links
Por defeito, os links são sempre a azul, enquanto não forem clicados, e ficam vermelho escuro depois de visitados. Estas podem não ser as cores desejadas
e se, por exemplo, o fundo da sua página for também azul, convém altera-las.
Como definir as côres dos links?
A definição da côr do link é feita uma vez, e fica logo definida para todo o html. Para isto utiliza-se o já nosso conhecido tag . Nesta altura já
deve ter reparado que o serve para definir o aspecto geral de todo o conteúdo da página. Adiante:
As côres dos links são definidas com os mesmos códigos hexadécimais que usámos para o fundo e para o texto.
Parâmetro para côr de link:
link="#BB1A02"
Parâmetro para côr de link já visitado:
vlink="#800000"
Como exemplo, poderíamos considerar uma página que tem como côr de link um vermelho escurecido, e os links já visitados são acastanhados. Para isso usamos
:
Todos os links contidos nessa página terão essas côres.
Existem ainda outros tags que permitem defenir o aspecto geral da sua página.
Lembra-se quando no definia a côr do texto? Imagine que o queria cinza, no pode definir também a côr de todo o texto da página (excepto nos
sítios em que isto for contrariado com um ) Isto faz-se com o parâmetro text .
Teremos então definidas as côres gerais para os textos e links da nossa página.
Está então na altura de pegar em tudo que já foi falado até aqui e criar uma nova página. Isto servirá para rever todos os assuntos aqui tratados e vê-los
já exemplificados num html acabado. Use-o como comparação ao html que poderá (deverá) estar a desenvolver paralelamente e ver os tags em acção.
Este será o código html possível, usando tudo que se aprendeu até este momento:
------------------------------------------------
A minha primeira página
A minha primeira página
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html, mas entretanto já compilei
alguns dos meus sites preferidos que poderá visitar.
AMINHARADIO - O site português dedicado à rádio e ao seu restauro
Sons, fotos, música antiga, etc.
Sapo - O mais famoso dos índices de sites portugueses.
Canal de Negócios - Onde eu vou para saber como estão as minhas acções da bolsa.
Acerca de mim - Um pouco sobre o autor desta página.
-----------------------------------------------------------
Confuso? Depois de tudo aplicado, o html pode-se tornar já bastante denso, mas repare que:
- Os tags funcionam de fora para dentro, o que quer dizer que se tiver dois tags que influenciam por exemplo a cor do texto, como é o caso no html acima,
em que tem no body o atributo text que "diz" ao browser que o texto deve ser todo azul e depois no font tem o atributo color que diz ao browser que o texto
deve ser preto, o que prevalece será o que está mais próximo do texto.
O que quer dizer que se tiver:
Texto
O seu texto ficará com o tamanho 3.
-Os tags podem ser usados tanto em maiusculas como em minusculas, é indiferente.
-No código pode quebrar as linhas ou até meter linhas em branco. Isto não influenciará o resultado. Não deverá porém quebrar tags ou palavras a meio.
texto em negrito
é precisamente igual a:
texto em negrito
-Pode quebrar inclusivamente o texto, fazendo-o mudar de linha. No resultado final o texto só será quebrado se existir um ou um
.
Todas estas dicas podem ajudar a tornar o código mais simples e mais organizado. A sua estrutura varia conforme as preferências do autor. No entanto aconselhamos
a que mantenha o seu código o mais estruturado possível, e que insira espaços sempre que achar necessário, para poder compreender mais fácilmente o trabalho
que está a executar.
Um tag útil
É sempre bom ter uma forma de contactar o autor da página. Os visitantes são os nossos melhores críticos e podem-nos ajudar bastante a resolver pequenos
problemas. Aproveitando o facto de termos aprendido os tags de link, acrescentamos aqui um bastante útil que permite ao visitante enviar um mail ao autor:
o 'mailto'.
Usa-se da seguinte forma:
Clique aqui para me enviar um mail.
Como vê, é semelhante ao tag de link, mas com o parâmetro 'mailto' que indica o browser que se trata de um endereço de e-mail. Este chamará o seu programa
de correio electrónico e inserirá automáticamente o endereço do destinatário no seu campo respectivo.
Listas
Deverá ter reparado que a sua lista de links está um pouco crua e sem piada. Isso tem solução e pode dar um aspecto melhor à sua lista.
Para isto usamos o tag
ele diz que aqui começa uma lista com várias linhas. Cada linha é identificada com um
.
Assim:
Esta é uma linha da minha lista
Esta é outra linha da minha lista
Esta é linha mais da minha lista
Cá está mais uma linha da minha lista
No caso da página que fizemos há pouco, apenas temos que inserir o
antes da zona de links e o
no fim dela. Insira então um
antes de cada
linha. Aqui pode então tirar os que as quebram, já que os
quebram automáticamente as linhas iniciando um novo ítem de lista.
Resultado, juntando as listas e o mailto:
---------------------------------------------
A minha primeira página
A minha primeira página
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html, mas entretanto já compilei
alguns dos meus sites preferidos que poderá visitar.
AMINHARADIO - O site português dedicado à rádio, restauro
Sons, fotos, música antiga, etc.
Sapo - O mais famoso dos índices de sites portugueses.
Canal de Negócios - Onde eu vou para saber como estão as minhas acções da bolsa.
Acerca de mim - Um pouco sobre o autor desta página.
------------------------------------------
Depois desta aula você já tem conhecimentos suficientes para fazer uma página pessoal tão boa ou melhor do que a maioria das existentes (ok, ainda faltam
as imagens, que serão dadas na próxima aula).
É necessário um pouco de gosto pessoal e bom senso, mas acredite, com o que já aprendeu e um bocado de prática (sim é necessário praticar), paciência, e
a velha mas infalivel técnica "tentativa-erro" poderá criar verdadeiras obras de arte.
Por isso não tenha receio em experimentar, brincar, trocar tamanhos, cores, posições, etc. só assim poderá ter noção do que lhe parece melhor. Se neste
processo criativo tiver dúvidas, utilize o fórum, que nós cá estaremos para o ajudar.
AULA 5: Manipulação de imagens
Vamos aprender como inserir imagens, como podemos mudar o seu tamanho no HTML. Vamos ainda aprender a linkar imagens e a alterar o 'border'.
Inserção de imagens
Que formatos de imagem existem:
Até agora temos uma página bem simpática, mas ainda muito pobre. As imagens são fundamentais para enriquecer o nosso conteúdo.
As imagens utilizadas na web deverão ter um dos dois formatos: GIF ou JPG.
O GIF é mais apropriado para imagens simples, gráficas, sem muita informação nem muitas côres. Uma imagem GIF tem no máximo 256 côres, que pode não funcionar
bem para uma fotografia.
O JPG, pelo contrário, já suporta milhões de côres e funciona bem para imagens mais complexas com mais informação, mais detalhe ou textura. O JPG é indicado
para fotografias e imagens realistas.
(mais tarde irá aprender como optimizar as suas imagens).
As Imagens que vamos inserir na nossa página terão que estar gravadas na mesma directoria do ficheiro html que as contém. É possível guardá-las noutros
sítios, mas isso complica um pouco o processo e não é de todo necessário neste caso. Apenas se usam sub-directorias em sites mais complexos, com muitos
ficheiros de imagem e html. Servem as sub-directorias para organizar melhor todos os ficheiros.
Adiante, na nossa página vamos apenas ter algumas imagens e para as inserir usamos o tag . Grave então a imagem para a sua directoria (pasta ou
folder) de trabalho, e no html em que tem vindo a trabalhar insira o tag:
Não se esqueça que os tags que inserir no seu HTML deverão ficar entre e .
Este tag é mais um dos que não precisa da terminação, não existe o tag .
Assim terá apenas a imagem, no entanto existem vários atributos que podemos (e devemos) aplicar a essa mesma imagem:
>> width="" - Indica em pixeis a largura da imagem
>> height="" - Indica em pixeis a altura da imagem
>> alt="" - Texto alternativo (aparece quando passamos o rato por cima da imagem ou quando a imagem ainda não carregou)
O tag completo com estes três parâmetros será:
O Width e o height forçam a imagem a ter um determinado tamanho. Pode não os usar se a imagem já estiver no tamanho desejado. A única coisa desagradável
que acontece se não especificar as dimensões é aquele efeito de página a saltar à medida que vai carregando. O browser como não sabe o tamanho original
das imagens, mostra o espaço delas como um quadrado, apenas com tamanho suficiente para o texto alternativo. À medida que as imagens vão chegando, esses
quadrados vão assumindo o seu tamanho real, o que provoca uma dança de imagens durante o carregamento do html. De certeza que já assistiu a casos destes.
Um truque:
Um truque que às vezes pode resultar numa maior rapidez de transferência da página para o visitante é, em vez de usar imagens grandes, usar pequenas e forçar
o seu tamanho nos atributos do , no width e no height. Isto permite tornar as páginas mais fáceis de carregar (assunto que será abordado com maior
profundidade, mais tarde), uma vez que utilizador só necessita de carregar uma imagem.
Alinhar a imagem
Se quer ter a imagem inserida no texto, e não alternada com este, pode alinhá-la e desta forma melhorar o aspecto da sua página. Utilize, para isso, tal
como no tag , o parâmetro align="".
Imaginemos que quer a imagem à esquerda do texto, faça:
E aqui terá o seu texto
Imaginemos que quer a imagem à direita do texto, faça:
E aqui terá o seu texto
Como vê, o tag de imagem é posto antes do texto, para ficar alinhada (num eixo vertical) com a primeira linha deste. Se trocar a posição do texto em relação
ao tag da imagem, o seu texto irá ficar alinhado com a ultima linha, mas sempre (num eixo horizontal) na posição (esquerda ou direita) que definiu no tag
align.
A melhor maneira é mesmo testar. Experimente inserir a imagem num texto e use todas as variantes que se lembrar.
Não se esqueça que os tags que inserir no seu HTML deverão ficar entre e .
A Imagem com 'link':
Para 'linkar' uma imagem, fazemo-lo da mesma forma do que fizemos com o texto. Aplicamos o TAG à sua volta. Do tipo:
A única coisa aqui diferente é que todas as imagens linkadas ficam com uma borda, uma espécie de caixilho com a mesma côr que se definiu para os links.
Isto pode tornar a imagem um pouco menos vistosa, mas não se preocupe. Pode sempre retirar (ou aumentar) esse 'caixilho', utilizando para isso o parâmetro
border="".
O Border indica que grossura deverá ter esse 'caixilho' e pode também indicar que não tem caixilho nenhum. Este parâmetro só será necessário se realmente
a imagem fôr linkada. Assim:
A imagem fica simples e sem bordas aparatosas. Experimente mudar o '0' do border para outros números superiores e veja com os seus próprios olhos o quão
feio se pode tornar. Mas claro está isto é uma opinião pessoal.
Vejamos agora o estado possível da sua página pessoal, transposto para HTML, não se esqueça que este é apenas uma das possibilidades.
----------------------------------------------------
A minha primeira página
A minha primeira página
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html.
Nesta ultima aula aprendi como inserir uma imagem,
também aprendi a mudar o seu tamanho no HTML.
Sei também que se quiser posso
linkar esta imagem para outra página.
Na aula anterior compilei
alguns dos meus sites preferidos, que poderá visitar.
AMINHARADIO - O site português dedicado à rádio, restauro,
Sons, fotos, música antiga, etc.
Sapo - O mais famoso dos índices de sites portugueses.
Canal de Negócios - Onde eu vou para saber como estão as minhas acções da bolsa.
Acerca de mim - Um pouco sobre o autor desta página.
----------------------------------------------------
Mais uma vez lembramos que a melhor amiga da perfeição é a prática, por isso não se canse de experimentar tudo o que lhe explicamos.
AULA 6: Manipulação de imagens, cont.
Vamos aprender quais as diferenças entre Gifs e Jpgs. Como modificar imagens e ainda algumas funções básicas do PaintShop Pro.
Ferramentas:
A pesar de não ser essencial, é aconselhável (caso não tenha já um editor de imagens como o Photoshop) o download do PaintShop Pro.
As imagens, diferenças entre gifs e jpgs
É muito importante a forma como se usam as imagens na nossa página. Tenha cuidado com o que insere na página, lembre-se do tempo que às vezes espera para
carregar uma página. Não queira fazer o mesmo à pessoa que o visita.
Muitas vezes a culpa da lentidão é das linhas e dos servidores, mas se puder evitar ter uma página muito pesada, não só vai ter mais visitantes como ajuda
a desimpedir as linhas ultra carregadas que temos tido na Internet.
Uma página nunca deverá ter mais de 30Kb (html e imagens incluídas) mais do que isto pode levar um visitante a desistir e seguir caminho para outro lado.
Para isto ser possível, o melhor é optimizar as imagens de forma a que fiquem o mais leves possível.
É fundamental, para isto saber diferenciar um Gif de um Jpg. Se na sua página tiver uma imagem, por exemplo, de um logotipo; liso e sem muitas cores, deverá
usar o Gif no entanto se for uma fotografia sua abraçado(a) ao seu mais que tudo então deverá usar Jpg.
Porquê?
Talvez conheça o formato Bmp, esse formato indica pixel por pixel a sua côr. Um pixel é um ponto de côr, o conjunto destes pontos forma uma imagem. O que
acontece a uma imagem Bmp é que fica, portanto, muito pesada, pois dá informação detalhada de todos os pixeis e sobre o número de cores que contém. No
caso do Gif, isto não acontece. O Gif tem informação por áreas de côres. Se por exemplo tiver uma imagem simples da bandeira portuguesa, o Gif irá ter
a informação que lá se encontra uma área verde e outra maior à direita com a côr vermelha. Não vai descrever todos os pontos dessa imagem.
O Jpg funciona utilizando as duas formas. Quando encontra uma área lisa, também ele a sintetiza a informação sobre as cores, tal como faz o gif. Quando
encontra uma área texturada e com detalhes, descreve-a detalhadamente mas de uma forma não tão complexa como o Bmp e não por áreas como o Gif.
Conclusão, para imagens simples use sempre o Gif, para algo mais detalhado use o Jpg. Pode fazer já alguns testes, aliás, convém por uns tempos testar sempre
as imagens que utilizar, gravando-as nos dois formatos e comparando os tamanhos. Com o tempo acabará por perceber (à primeira) qual o melhor formato a
utilizar sem ter de experimentar.
Modificar as imagens
Um Gif tem uma paleta de côres reduzida com o máximo de 256 côres. Costumamos dizer que essas imagens estão em 'Indexed Color' (côres indexadas).
Um Jpg tem uma paleta de milhões de côres mesmo que estas não estejam representadas na imagem.
Ao, por exemplo, redimensionar uma imagem, é bem provavel que o programa que usa para o fazer tente arredondar e amaciar alguns pormenores das imagens.
De outra forma, ao aumentar a dita, ele iria aumentar os pixeis e assim ver-se-iam os pixeis todos como quadrados. O editor de imagem faz isto recorrendo
a meios tons de côres, e para isto, a paleta terá que dispôr desses meios tons.
Como um Gif tem no máximo 256 côres, o editor não vai conseguir ir buscar meios tons para suavizar a sua imagem, portanto vai sempre ficar uma imagem com
uns traços muito desagradáveis. O Jpg, tendo milhões de tons, já se porta bem nesta área.
Então, se pretender aumentar, reduzir, rodar uma imagem, não se esqueça que esta não deverá estar em 'indexed color' mas sim RGB (RGB significa Red, Green
e Azul; Vermelho, Verde e Azul; o mesmo formato que é usado, por exemplo nas televisões).
Mude então o 'modo' de côr da sua imagem para RGB e só aí faça as modificações. No fim, e se achar que o deve fazer, volte a reduzi-la à paleta básica das
côres que a compõe.
ATENÇÃO
Se usa o Paint Shop Pro ele abre as imagens sempre no modo RGB, independentemente do seu formato. Pode portanto trabalhar nas imagens imediatamente, sem
se preocupar com as explicações em cima. Mas ao voltar a gravar a imagem tenha atenção ao seu número de côres, pois ele grava também em RGB se não indicar
o contrário.
O Gif interlaçado
O gif interlaçado é precisamente igual ao Gif normal, a única diferença entre estes é que o interlaçado, ao ser carregado numa página web vai aparecendo
e tomando forma. O Normal só aparece depois de estar todo carregado.
O Jpg progressivo
É equivalente ao Gif interlaçado. Vai aparecendo à medida que está a ser carregado e não só quando já se encontra completo.
Algumas funções básicas no PaintShop Pro que lhe podem ser úteis, pensamos que estas são as mais importantes nesta fase, posteriormente falaremos de outras
opções.
No menu 'image'
Flip- Vira a imagem ao contrário verticalmente (como reflectida num lago)
Mirror - Vira a imagem horizontalmente (como reflectida num espelho)
Rotate - Permite rodar a imagem (pode definir os angulos de rotação)
Crop to selection - Depois de fazer uma selecção na imagem, esta opção tira tudo que estiver fora dela. A imagem passa a ser só aquilo que foi seleccionado
por si.
Canvas - Reduz a área da imagem mas não modifica o seu tamanho. Se mudar uma imagem que tenha 100 pix de largura, para 50 pix, apenas restará o que estiver
no centro dela. Se aumentar o canvas, aumentará a área da margem sem a modificar, ou seja: vai ficar com mais área de trabalho lisa à volta da imagem.
Resize - Muda o tamanho da imagem sem deitar nada fora. Reduz todas as dimensões encolhendo-a. Ou aumenta as dimensões esticando-a. Tem ainda a opção de
manter ou não as proporções. Isto quer dizer que pode optar por manter a mesma relação altura x largura (esta é a opção que vem por defeito).
No menú 'File'
Save as - Esta é a opção que deverá escolher para gravar a sua imagem como Gif ou Jpg, irá encontrar outros tipos de ficheiros, que no entanto não podem
(ou não devem) ser usados na Web.
AULA 7: Barras de rolagem, dicas para criar um site
Vamos aprender dois pormenores gráficos que pode querer utilizar. São eles o Background (imagem de fundo) e o tag (horizontal rule, ou barra horizontal).
Vamos ainda saber como criar um site, e alguns cuidados a ter.
Até aqui já aprendeu praticamente todos os tags básicos para construir uma homepage completamente funcional. Vamos agora só acrescentar mais dois pormenores
gráficos que são dispensáveis mas que pode querer utilizar. São eles o Background (imagem de fundo) e o tag (horizontal rule, ou barra horizontal).
Imagens de fundo
Na sua página poderá querer ter como fundo, não apenas uma côr, mas sim uma textura, ou algo gráficamente mais complexo.
Para isto usamos um parâmetro do tag que se chama background=""
Usamos assim:
(este é o mesmo onde já definiu a côr do texto, links, etc. Aliás, só existe um body e um /body num dado ficheiro HTML)
Este parâmetro vai pegar na imagem que definiu e repeti-la até preencher toda a sua página, como se de um azulejo se tratasse. Não aconselhamos a usar o
rádio como fundo, já que pode tornar a sua página num autêntico caos.
Opte pelas imagens simples, tons suaves com pouca informação. Na aula anterior já demos alguns endereços de sites onde pode encontrar imagens próprias para
serem usadas como fundo.
Repare que a imagem de fundo sobrepõe a côr que definiu para fundo. Isto é : se definir na sua página uma côr de fundo e uma imagem de fundo (background)
a imagem irá sempre sobrepôr-se à côr de fundo. O que poderá, no entanto, acontecer é, quando a sua página está alojada num servidor e um utilizador a
visita, poderá vêr primeiro a côr de fundo e de seguida a imagem de fundo a sobrepôr-se a ela. Se a imagem do background fôr muito pesada, o visitante
ainda ficará algum tempo a vêr a sua página com a côr de fundo definida. É portanto aconselhável definir sempre uma côr que respeite mais ou menos os tons
da imagem de fundo.
Outro acréscimo gráfico: o
O tag significa horizontal rule, ou régua horizontal. Não é uma régua, é apenas um traço. Este tag , embora tenha caído em desuso, pode ajudar na organização
gráfica da sua página criando uma separação de zonas e temas.
Para o usar não é preciso ser nenhum perito, apenas acrescente o tag na zona onde pretende ter uma linha a separar o conteúdo da sua homepage. Este
tag automáticamente cria um parágrafo e 'parte' o conteúdo em dois.
O tem alguns parâmetros que podem ser usados. O mais útil será o do tamanho. Se não lhe definir qualquer tamanho ele automáticamente adoptará toda
a largura da sua página.
Parâmetro para o comprimento:
width=""
Parâmetro para a altura:
size=""
Assim, se pretender uma pequena linha apenas como quebra usará, por exemplo:
Esta linha terá 200 pixeis de comprimento e 2 de altura.
Poderá também definir uma côr para o seu , com o parâmetro color="" que é usado precisamente da mesma maneira que a côr do texto, links ou fundo. No
entanto, este parâmetro NÃO é reconhecido pelo Netscape.
Mais uma vez vamos ver qual o estado possível da sua página, utilizando estes dois novos elementos:
A minha primeira página
A minha primeira página
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html.
Nesta ultima aula aprendi como inserir uma imagem de fundo.
Sei também que se quiser posso
linkar esta imagem para outra página.
Numa das aulas anteriores compilei
alguns dos meus sites preferidos, que poderá visitar.
Que estão por baixo de uma linha que criei com o tag HR.
Como podem ver a minha página aos poucos e poucos vai ganhando forma.
Estou a tornar-me um verdadeiro profissional :) .
AMINHARADIO - O site português dedicado à rádio, Restauro,
Sons, fotos, música antiga, etc.
Sapo - O mais famoso dos índices de sites portugueses.
Canal de Negócios - Onde eu vou para saber como estão as minhas acções da bolsa.
Acerca de mim - Um pouco sobre o autor desta página.
Nunca é demais relembrar que a melhor maneira de criar boas páginas, é criando muitas. Experimente vários fundos, veja como eles combinam com as cores que
escolheu para o seu texto, para os links etc.. Se for necessário (ou mesmo que não seja) não tenha problemas em começar tudo de novo, agora com outras
cores, outras fontes com vários tamanhos. Insira imagens alinhe à esquerda e à direita, mude a posição do texto, se correr mal, pode sempre recomeçar.
Criar um 'Site'
Até aqui supomos que já tenha a sua página de entrada minimamente estruturada, mas ter toda a informação numa só página pode ser um pouco desagradável.
Imagine como vai querer o seu site. Quantas páginas vai ter, idealize o aspecto gráfico geral, mantenha uma coerência em todas as páginas que dele fazem
parte.
A primeira página, geralmente funciona como um hall de boas vindas, onde o visitante chega e tem à disposição os caminhos por onde poderá seguir (links)
Estes links serão, neste caso links internos, já que apontam para outras páginas pertencentes ao mesmo site, o seu.
Todos os htmls e demais ficheiros deverão estar na mesma directoria, assim o link será simplesmente com o nome do ficheiro html sem necesitar de um endereço
tipo 'http://www....'.
Depois, e apenas como sugestão poderá criar a tal página autor.html, que já falámos mas ainda não criámos, uma página de links interessantes, uma sobre
os seus hobbies, família, currículum vitae... enfim, escolha o que vai querer mostrar.
Lembre-se que é sempre agradável para o visitante dispôr de um link de regresso à página principal. No fim das páginas acrescente sempre este link. Assim
a pessoa que o visita escolhe uma área, e depois pode voltar atrás para visitar outra. Mais tarde iremos falar de formas possíveis de organizar o seu site.
Lembre-se que deve sempre facilitar a navegação aos visitantes da sua página.<
AULA 8: Criação de tabelas
Nesta aula vamos aprender o básico sobre a criação de tabelas.
As tabelas
As tabelas são sem dúvida uma das componentes mais importantes da criação de páginas web, hoje vamos aprender o básico sobre elas. Sobre este assunto ainda
há muito a dizer.
Por vezes vemos páginas com listas de preços, grelhas de produtos, etc. Isto é feito com tabelas. Apesar das tabelas terem outras aplicações bem mais complexas,
esta será uma boa maneira de começar.
Como fazer tabelas?
As tabelas podem parecer complicadas de início, mas se prestar atenção e fizer algumas experiências, verá que não é assim tão difícil. Uma tabela, para
ficar bem feita precisa de 3 tags. O tag principal é o
que tem a sua terminação
.
Se colocar apenas este tag, nada aparecerá. Isto porque a tabela é composta por barras e colunas, se não as indicar, nunca terá uma tabela completa.
As barras (horizontais) são indicadas com
. Se queremos por exemplo uma tabela com uma barra horizontal apenas faremos:
Não, ainda não é suficiente, pois é necessário indicar também quantas colunas (verticais) esta tabela tem, para utiliza-se o
, mas sempre dentro
dos
que por sua vez estão sempre dentro da
Uma tabela com apenas uma barra horizontal e uma coluna vertical (portanto, apenas um quadrado) ficará da seguinte forma:
Aqui fica o conteúdo da tabela, um texto ou uma imagem (o respectivo tag, entenda-se).
Avançamos a disposição dos tags
e
apenas para tornar mais simples a leitura do html. Isto não influencia o resultado final, mas pode ser importante
na leitura de tabelas complexas.
Não tem lógica usar uma tabela apenas com uma célula (pelo menos para já, mais tarde veremos como as tabelas podem ser utilizadas para estruturar as páginas).
Vamos então criar algo mais complexo, uma lista de preços com três produtos.
Esta tabela terá então, um cabeçalho e 3 produtos o que dá ao todo 4 barras horizontais, e terá duas colunas verticais para os nomes dos produtos e preços.
Vejamos então como ficaria o HTML desta tabela ainda só com barras horizontais:
Já tem 4 barras horizontais. Vamos inserir as duas colunas verticais.
Se a primeira barra tem duas colunas, todas as outras terão forçosamente de ter também duas colunas, uma vez que isto se comporta como um quadriculado.
Vamos acrescentar as duas colunas:
Perfeito, agora vamos inserir os dados em cada uma das células
Produto
Preço
Chocolates
€10,00
Caramelos
€5,00
Gelados
€12,00
Dependendo do browser que usa, poderá ver apenas o texto ou não , pois alguns browsers partem do principio que queremos ver as bordas da tabela. Para poder
ver qual o aspecto da sua tabela (independentemente do browser que usa), acrescente-lhe uma borda, para isso e para definir a grossura da borda da sua
tabela utilize o parâmetro border="" do tag
Assim:
Acrescente este atributo no seu tag
já existente e veja o resultado, poderá também melhorar o aspecto das suas tabelas utilizando para isso os tags
que lhe explicámos nas outras aulas.
A partir daqui o funcionamento é sempre o mesmo. As tabelas podem causar algumas dores de cabeça a quem ainda não estiver habituado a criá-las. Aconselhamos
pois a criar uma tabela de novo. Defina primeiro quantas células esta irá ter, o número de colunas e barras. Desenhe-a num papel primeiro para o ajudar
a visualizar. Lembre-se de primeiro indicar o tag
, depois quantas barras horizontais esta irá ter, e depois, dentro dessas barras indicar em cada
uma delas em quantas colunas elas se dividem.
Sugerimos:
Experimente, por exemplo, fazer assim a sua lista de links ou de amigos na net com os seus e-mails ou homepages. Indique o nome na coluna à esquerda, esse
nome poderá estar linkado para a homepage correspondente ou e-mail. Na coluna da direita pode ter um texto descritivo da pessoa, quem é, qualidades e defeitos.
Também pode inserir imagens lá dentro (obviamente), umas fotografias dos seus amigos não ficariam mal e até ajudava a praticar um pouco o redimensionamento
de imagens, já que não vai querer ter cada fotografia com o tamanho diferente...
Força e boa sorte!
AULA 9: Colocação do site on-line
Nesta aula vai apreender como e onde colocar a sua página na web.
Ferramentas necessárias
Para poder colocar a sua página na Web necessita de um programa de Ftp, se ainda não tem, nós aconselhamos que utilize o CuteFtp. Este programa aparece
em versão de demonstração em muitos CDs promocionais de revistas ou de provedores de acesso à Internet.
Até agora você deverá ter aprendido todos os passos básicos de construção de uma página e de um site para a internet.
Aprendeu a:
Criar um ficheiro html
Indicar um nome a esse ficheiro
Dar um título
Acrescentar texto e imagens, assim como alinhar esses componentes
Escolher uma côr de fundo, côr de texto, de links ou imagens de fundo
Criar links para outras páginas locais ou não
Redimensionar imagens e entender a diferença entre gráficos Gif ou Jpg
Fazer tabelas e incluir informação dentro destas
Depois de tudo isto, apenas nos falta uma coisa: ter o nosso trabalho disponível para todos.
Até aqui as suas páginas estavam guardadas no seu computador, ou seja, estão fechadas, ninguém as pode visitar. Há que tê-las num sítio público e dar-lhes
um endereço www.
Alguns servidores de internet oferecem aos seus clientes um espaço para a sua página pessoal. Para saber como utilizar esse espaço, contacte o seu ISP.
Como a maioria das pessoas não tem esta possibilidade, vamos indicar outros locais gratuitos de alojamento de páginas. Em Portugal existe o já famoso Terrávista,
que, a pesar dos seus problemas de velocidade, ainda vai sendo o preferido entre os lusitanos.
Visite http://www.terravista.pt registe-se no serviço e descubra uma praia livre onde possa montar o seu site. Depois de o ter feito apenas terá que enviar
todos os ficheiros que criou para esse endereço.
Para enviar ficheiros, usamos o serviço FTP (File transfer protocol). Recomendamos o CuteFTP para o fazer.
Não é possível explicar detalhadamente os passos a tomar para enviar as suas páginas para um serviço de alojamento, pois cada um é diferente dos outros.
O Geocities, por exemplo, permite-lhe enviar os ficheiros com o seu browser, e apenas terá que indicar onde estes se encontram no seu disco.
De qualquer maneira, e usando um programa de FTP, apenas precisará de saber o seu login nesse servidor, a sua password e o endereço para onde deverá fazer
a ligação para fazer o upload (envia-los para o servidor) dos ficheiros. Isto depende de si e do servidor que escolher. Depois de obter esta informação,
indique-a no programa de FTP nos sitios destinados a isso e ligue. Deverá ficar ligado logo ao sítio certo para fazer o upload. Escolha na parte da esquerda
do programa os ficheiros a serem enviados e arraste-os para a janela da direita (que representa o servidor remoto) No fim disto deverá ver os seus ficheiros
na janela da direita também. Quer dizer que já lá estão.
Verifique se correu tudo bem, abra o seu browser e visite o endereço do seu site.
Lembre-se que o html inicial do seu site se deverá chamar index.html , assim é este que aparece automáticamente quando alguem visita o seu site.
Lembre-se que no código html os nomes das imagesn deverão estar em minusculas assim como o nome de todos os ficheiros. Se tiver num tag de imagem algo como
imagem.GIF e se o ficheiro se chamar na realidade Imagem.gif, este não aparecerá na sua página. Opte portanto por ter tudo em minusculas.
Leia atentamente as instruções do servidor que escolheu e preste também atenção ás regras de utilização. Lembre-se que não deverá incluir informação comercial
num servidor gratuito, publicidade a marcas e serviços, ou pornografia.
Alguns servidores gratuitos:
Terrávista: http://www.terravista.pt
Sapo: http://www.sapo.pt
Geocities: http://www.geocities.com
Tripod: http://www.tripod.com
Xoom: http://www.xoom.com
Fortune City: http://www.fortunecity.com/
Naz Inc.: http://www.naz.com/
AULA 10: Como criar um site
Nesta aula vamos lembrar o que foi dado até ao momento e estudar alguns princípios a ter em conta antes de começar a fazer um web site.
O que se deu até agora
Até ao momento os alunos aprenderam :
Como nasceu e como funciona a Internet, a web e o hipertexto, quais os vários browsers e qual a relação entre o browser e o servidor web, estrutura de um
documento html, atributos de tags, quebras de linha, tamanho e cor de letras, links, listas, como incluir imagens, manipulação básica de imagens, navegação
entre páginas, tabelas, alinhamento de elementos, a importância do tamanho das imagens e das páginas em geral e como colocar um web site no servidor.
PRINCÍPIOS A TER EM CONTA
Antes de começar a fazer um web site, é necessário considerar diversos aspectos :
Construir uma página pessoal não é a mesma coisa que fazer uma página para uma empresa. Como tal, existem alguns princípios importantes quando queremos
disponibilizar informação sob a forma de páginas web. Para começar terá que pensar qual será o conteúdo da sua página, quem a vai visitar, etc.
Analogia
Amigos ao jantar
Imagine a seguinte situação: você convidou alguns amigos para jantar. Considere a sua página como uma jantarada em sua casa. Vai ver que as diferenças não
são muitas, e já vai ver porquê. Não faria muito sentido (embora possível) pôr a panela ao lume e adicionar aleatoriamente os ingredientes que tivesse
no seu frigorífico. O resultado seria provavelmente desastroso, o mesmo se passaria se esse fosse o método seguido para a construção de uma página. Como
cada cozinheiro tem o seu método, não lhe vamos dar uma receita milagrosa, mas existem algumas semelhanças entre todos os grandes chefes de cozinha.
Qual é o prato?
Antes de começar a preparar o jantar para os seus amigos terá que ter em conta qual é o prato que pretende confeccionar. Bacalhau à Braz, Ensopado de Borrego,
ou Frango assado no forno? Da mesma forma terá que imaginar o que será a sua página: Eu quero fazer uma página pessoal, ou eu quero apresentar os produtos
da minha empresa ao mundo, ou gostava de ensinar aos outros tudo o que sei sobre "como fazer uma boa pescaria" poderão ser algumas das respostas, mas seja
ela qual for é necessário que haja uma resposta.
Os amigos
Seguindo esta comparação, quando você escolheu o prato, deveria ter em mente algumas coisas: quantos são os meus amigos, quais são os seus gostos, comem
muito (ou não), são pessoas que preferem um jantar com toda a etiqueta, ou não se incomodam se levar a panela para a mesa. Estes amigos serão os visitantes
da sua página. Se calhar o seu comportamento também não seria muito diferente, pois se eles comerem bem, e passarem um bom bocado, depressa voltarão, infelizmente
o contrário também é verdade.
Quais os Ingredientes?
Se já sabe o que pretende confecionar terá de seguida que saber quais os ingredientes necessários para a sua confecção. O mesmo acontece com a sua página,
os ingredientes serão diferentes de acordo com o resultado pretendido. Uma das melhores formas de organizar esses ingredientes ainda é o velhinho bloco
de notas, alguns minutos para assentar ideias e perguntar-se o que tem para oferecer às suas visitas farão maravilhas, acredite. Só assim poderá saber
o que lhe falta, e o que terá de ir comprar.
Agora sim, a confecção
Já tem tudo o que precisa? Então agora pode passar para a cozinha arranjar os tachos e panelas lavar as cenouras e descascar as batatas. Para saber tudo
sobre os segredos da cozinha terá que continuar a seguir este curso com atenção.
IMPORTANTE:
Tipos de estrutura para um Web Site
Para o ajudar no trabalho de organização do seu site existem alguns conceitos básicos sobre os tipos de estrutura possíveis, que convém saber.
AULA 11: Apresentação, formatação e cuidados
Depois de pensarmos bem o que iria ser a nossa página e já sabermos o básico para a fazer, vamos aprender novas técnicas e formas de a tornar mais organizada
e agradável a quem a visita.
As tabelas
A algumas aulas atrás, aprendeu a fazer uma tabela simples. Como exemplo criámos uma lista de produtos com o seu preço correspondente à frente. Uma tabela
pode ser um elemento importante e agradável numa página web, se esta estiver bem estruturada e legível.
Se não se lembra de como criar tabelas, consulte a
Aula 8
deste curso.
A tabela poderá não ser uma estrutura firme, podemos transformá-la de diversas formas.
Na aula dada acerca das tabelas falamos no 'border' (borda). Este atributo indica a grossura das linhas estruturais da tabela e de separação entre células.
A borda é importante para demarcar células e separar conteúdos, mas pode não ser necessária se optarmos por colorir o fundo da tabela e das suas células.
Uma tabela básica com duas colunas verticais e duas barras horizontais:
Célula superior esquerda
Célula superior direita
Célula inferior esquerda
Célula inferior direita
Acrescente agora o seguinte atributo ao tag
:
bgcolor="#00FF00"
Repare que toda a sua tabela ficou verde. Este atributo pode ser utilizado em qualquer parte da tabela, por exemplo, vamos pintar a Célula superior direita
de amarelo. Transforme o
desta e insira o atributo de côr de fundo:
A sua tabela encontra-se agora verde, mas com uma das células amarelas. A côr das células sobrepõe-se sempre à côr da tabela que as suporta. Pode, claro
está, não definir nenhuma côr de fundo para a tabela e apenas nas células. Assim a tabela terá a mesma côr da página e apenas as células terão uma nova
côr.
Convém, caso queira colorir uma célula que não pretende preencher, inserir algo lá dentro que não seja visível. Isto poderá passar por uma letra da mesma
côr do fundo pretendido, etc.
Imagens como fundo
Tal como as côres, também poderá optar por imagens para fazer um fundo para as suas tabelas e células. A imagem de fundo comporta-se da mesma maneira como
a imagem de fundo que escolheu para a sua página. Tenha cuidado com as imagens que escolhe, imagens muito garridas ou complexas podem estragar completamente
o efeito final da sua página. Mantenha as coisas o mais simples possível.
Exemplo de um tag
com imagem de fundo:
Ou, apenas uma célula com imagem de fundo:
Reparou decerto que não tendo uma borda definida, ou tendo uma borda de valor zero, as coisas que se encontram nas várias células ficam encostadas, o que
pode incomodar na sua leitura. Existem duas formas de impedir que isto aconteça no tag
. Um dos atributos é o cellspacing, este atributo define
o espaço entre células. Estas vão ficar afastadas umas das outras mesmo que o border da tabela seja invisivel. Para podermos observar melhor isto, vamos
definir um border de 1:
E então usamos assim: (acrescente)
cellspacing="5"
Dê o valor de zero à borda da sua tabela
. Mantenha aquela côr verde e dê outra côr às duas células superiores. Repare que estão encostadas.
Acrescente então o parâmetro cellspacing à tabela, dê-lhe o valor de 2. Repare que as células estão agora separadas por um espaço verde (a côr original
da tabela)
'Mas eu não quero esse espaço no meio!'
Calma, tire então o cellspacing e insira este:
Este parâmetro mantém as células coladas, mas afasta o seu conteúdo da margem. Neste caso o texto inserido dentro das células assumem um afastamento de
2 pixeis em relação à fronteira entre as células e borda da tabela.
Pode assim separar o conteúdo da sua tabela dependendo da célula onde se encontrar, sem ter que afastar células.
Dimensões:
Tanto as tabelas como as células podem ter larguras pré difinidas com o já conhecido width="" que usou para as imagens. Aqui, pode ir um pouco mais longe,
já que, ao contrário das imagens, os tamanhos não necessitam de ser fixos em pixeis, mas podem ser também percentuais em relação ao tamanho da largura
do browser e da resolução que o utilizador estiver a usar.
Assim, se quiser uma tabela com 600 pixeis de largura usará:
Se quiser uma tabela que ocupe a totalidade da largura do browser independentemente da resolução e do tamanho deste usará:
Experimente fazer uma tabela com 100% de largura. Mexa na largura do seu browser (não o maximize nem minimize) repare que a tabela encolhe ou estica conforme
o seu tamanho.
Também as células podem ter tamanhos definidos tanto percentualmente como fixamente. Mas atenção, se a tabela tem, por exemplo, 600 pix de largura, o total
das larguras das células nela contida tem que dar 600. Se tiver duas colunas verticais, a soma destas não pode dar nem mais nem menos que 600. Note que
apenas terá que definir a largura das células do topo, as de baixo adoptam automáticamente a largura destas.
Alinhamentos:
Quando quer que as coisas dentro de uma determinada célula estejam alinhadas para a esquerda, direita ou no centro, deve indicar isto no tag da célula que
o pretende. No
, portanto.
isto é feito com o velho align="" e usa-se assim:
ou
não será necessário usar o 'left' já que se não indicar nenhum alinhamento, este será automáticamente à esquerda.
Pode enganar e parecer que um
vai encostar a célula à direita, mas na verdade, apenas vai influenciar o que estiver dentro dela. Mas
isto não se passa se usar este atributo no tag
. Se o fizer, este influencia a posição da tabela e não do seu conteúdo.
vai colocar a sua tabela no centro da sua página.
Alinhamentos verticais:
Imagine que a sua célula da esquerda (qualquer uma) tem uma imagem ou um texto com dimensões granditas. A sua célula gémea da direita vai ter sempre a mesma
altura, já que nas tabelas tudo se comporta como numa grelha fixa. Se essa célula tiver pouco conteúdo este vai ficar a 'nadar' lá dentro. Por defeito,
o conteúdo vai ficar a nadar no centro da célula. Nem em cima nem em baixo. Pode contrariar esta tendência se conhecer um atributo, o td valign="" que
significa vertical alignment.
Usamos assim:
se quisermos o conteúdo encostado ao topo, ou:
se quisermos o conteúdo encostado ao fundo da tabela.
Como sempre fazemos, aconselhamos vivamente a reler esta aula e a experimentar cada passo e cada atributo ensinado. Lembre-se que pode acumular atributos
dentro de um tag, ou seja, pode indicar que uma tabela é ao mesmo tempo centrada, com fundo verde e com bordas nulas:
O mesmo se passa, claro está, nos tags das células, os
.
Não se esqueça ainda de que pode inserir outros tags de HTML, dentro das células de uma tabela, assim:
Conteudo que pretende inserir nesta célula
Desafio:
Crie uma tabela com o tamanho que desejar, Essa tabela terá um cabeçalho (barra horizontal superior) preto com letras brancas e por baixo terá uma lista
dos objectos que tem em cima da sua secretária. à esquerda insira o nome dos objectos e à direita descreva-os.
As células deverão estar afastadas umas das outras e a coluna com os nomes dos objectos deverá ter uma côr de fundo diferente da coluna com as descrições.
Três ou quatro objectos serão suficientes. Isto serve apenas para observar na prática aquilo que aprendeu aqui. Se já tiver uma conta num servidor de páginas,
envie para lá o resultado e mostre aos seus colegas e amigos. Estamos todos ansiosos.
AULA 12: Tudo se copia!
Embora o crime não compense, explicamos como o fazer:
Se vir uma imagem por ai que goste e acha que o autor não se vai importar se a usar no seu cantinho cibernético faça o seguinte: Esconda-se e, sem ninguem
vêr, clique com o botão direito do rato em cima da imagem pretendida. No menu que lhe aparece escolha 'Salvar como' ou 'Save as' e aponte-a para a sua
directoria de trabalho. Já está! Ninguém viu. Se pensa fazer um site de uma empresa...ou de promoção de algum produto ou serviço, olhe que é vergonhoso
usar imagens de outros. Quando se trata de uma inocente página pessoal, as coisas são mais fáceis.
Alguns sítios com imagens gratuitas:
http://www.microsoft.com/workshop/c-frame.htm#/gallery/images/default.asp
Sim, a Microsoft também tem imagens, e acreditem que não são poucas. Tem muitas e para todos os gostos. Se pretende acrescentar imagens na sua página sem
ter trabalho acredite, aqui é o local ideal para encontrar tudo o que necessecita
http://www.microsoft.com/workshop/design/creative/mmgallry.asp
Também da Microsoft, este contém imagens maiores. Algumas são especialmente vocacionadas para criar produtos multimédia. No entanto tem também algumas que
podem ser utilizadas na Web.
http://www.lisp.com.au/~david_t/fwa.htm
Contém bolinhas para usar como as que usou para a sua lista de links, barras de separação e alguns gifs animados. Os gifs animados inserem-se como qualquer
imagem normal.
http://www.enchantress.net/fantasy/index.shtml
Bastantes imagens divididas por tópicos, (todas elas subordinadas ao tema Fantasia). Vão desde imagens de pessoas e animais, passando por imagens misticas
de anjos, fadas e mesmo unicórnios.
http://www.mediabuilder.com/graphicsicon.html
Milhares de icons de todo o tipo de temas: carros, pássaros, computadores, bandeiras, ciência, àgua, estes são só alguns.
http://www.magicklass.com/freeart/arrows/
Muitas setas á sua disposição. De todos os feitios e cores.
http://se.animearchive.org/index2.html
Centenas de imagens de desenhos animados japoneses. Sim, tem imagens do Dragon Ball e da Sailor Moon.
http://ftp1.rad.kumc.edu/clips/index.htm
Colecção de clipart gratuita. Algumas das imagens são bastante grandes. Muitos temas à disposição.
AULA 13: Páginas com frames
Vamos aprender o que são frames e como as utilizar numa página Web.
As Frames
O que são frames?
Decerto que já navegou por páginas que se subdividem em duas ou mais partes. Geralmente tem uma zona mais pequena com um menu e depois o conteúdo encontra-se
numa zona distinta da página. Quando faz scroll apenas parte da página se mexe, isto são frames. Uma página com frames é um html normal que é sobreposto
por dois ou mais htmls arrumados 'por cima' deste.
Fazer uma página com frames
A utilização de frames é muito polémica, as frames podem dar problemas nalguns computadores ou até impossibilitar a visualização do seu site nalguns browsers
mais antigos. De qualquer maneira vamos ensinar básicamente como funcionam e como se constrói uma página com frames. Mas fica o aviso: as frames são mal
vistas e podem ser muito desagradáveis se forem mal aplicadas. Vamos a isto.
Vamos criar uma página com duas frames, uma mais estreita à esquerda para conter um menu de links e outra grande à direita onde irá aparecer o conteúdo
de cada link. Para isto temos que criar um html que vai conter as frames e indicar o tamanho e características destas. Cada frame será um html à parte.
Ou seja, uma página com 2 frames tem no mínimo 3 htmls. Um html base que as contém e mais dois que aparecerão nas ditas frames.
Comece por criar 2 htmls limpos em que a única coisa que terão diferente será a cor de fundo. Isto servirá apenas para poder visualizar o seu trabalho.
Chame ao primeiro ''lista.html'' e ao segundo ''conteudo.html''
o nosso lista.html:
E o conteudo.html:
Grave-os na mesma pasta. Estas páginas apenas têm um fundo colorido e só servem para exemplificar.
Vamos começar então o html geral, aquele que vai definir as frames:
E explicá-lo:
ATENÇÃO: Este html não tem o tag , apenas o
Não se esqueça que os tags que inserir no seu HTML deverão ficar entre e .
Este tag é mais um dos que não precisa da terminação, não existe o tag .
Assim terá apenas a imagem, no entanto existem vários atributos que podemos (e devemos) aplicar a essa mesma imagem:
>> width="" - Indica em pixeis a largura da imagem
>> height="" - Indica em pixeis a altura da imagem
>> alt="" - Texto alternativo (aparece quando passamos o rato por cima da imagem ou quando a imagem ainda não carregou)
O tag completo com estes três parâmetros será:
Viva, esta é a minha primeira página.