MANUAL DE FORMAÇÃO

Criação de Páginas
para WEB em
Hipertexto

João Alves

Doc.06.02.v1
 CRIAÇÃO DE PÁGINAS PARA WEB EM
HIPERTEXTO

Doc.06.02.v1
ÍNDICE
INTRODUÇÃO _____________________________________________________________ 4
O que é necessário? _______________________________________________________ 5
Preciso estar online? ...........................................................................................5
O que é HTML?____________________________________________________________ 6
OK, mas o que significa H-T-M-L? ...........................................................................6
O que são tags HTML? _____________________________________________________ 7
"Tags"? .............................................................................................................7
Alguns exemplos: ...............................................................................................7
Este é um título __________________________________________________________ 8
Este é um subtítulo .............................................................................................8
As tags devem ser escritas com letras maiúsculas ou minúsculas? ..................................8
Onde devo colocar todas estas tags? .......................................................................8
Criar a primeira página ____________________________________________________ 9
Como? .............................................................................................................9
O que fazer? .....................................................................................................9
Como colocar conteúdo na página? _________________________________________ 11
Mais tags HTML __________________________________________________________ 14
E agora? ......................................................................................................... 14
Posso usar várias tags simultaneamente? ............................................................... 14
Mais tags! ....................................................................................................... 15
Isto é tudo? ..................................................................................................... 17
Atributos________________________________________________________________ 18
O que é atributo? ............................................................................................. 18
Como a página ficou vermelha? ........................................................................... 19
Quais tags podem usar atributos? ......................................................................... 20
Então, quais são as partes que constituem uma tag? ................................................. 20
Links ___________________________________________________________________ 20
O que é preciso para construir um link?................................................................. 20
Exemplo 1: _______________________________________________________________________ 20
Como são os links entre minhas próprias páginas? .................................................... 21
Exemplo 2: _______________________________________________________________________ 21
Exemplo 3: _______________________________________________________________________ 21
Exemplo 4: _______________________________________________________________________ 22

Doc.06.02.v1
 Como são os links dentro de uma mesma página? ..................................................... 22
Exemplo 5: _______________________________________________________________________ 22
Cabeçalho 1 _____________________________________________________________ 23
Cabeçalho 2 _____________________________________________________________ 23
Posso criar link para mais alguma coisa? ................................................................ 24
Exemplo 6: _______________________________________________________________________ 24
Existem outros atributos? ................................................................................... 24
Exemplo 7: _______________________________________________________________________ 24
Imagens ________________________________________________________________ 25
Onde conseguir as imagens?................................................................................ 26
Isto é tudo o que é preciso saber sobre imagens? ..................................................... 27
Existem outros atributos para conhecer? ............................................................... 27
Tabelas _________________________________________________________________ 30
Qual a diferença entre <tr> e <td>?...................................................................... 30
Existem atributos? ............................................................................................ 32
O que posso inserir em tabelas? ........................................................................... 33
Uploading páginas________________________________________________________ 34
Isto é tudo que é necessário? .............................................................................. 34
Como fazer o upload das páginas? ........................................................................ 34
CONCLUSÃO _____________________________________________________________ 36
REFERÊNCIAS BILIOGRÁFICAS ______________________________________________ 36

Doc.06.02.v1
INTRODUÇÃO

Nesta UFCD vamos abordar a criação de sites WEB em linguagem HTML, numa fase inicial
abordaremos as tags em html e as suas funcionalidades, de seguida iremos cruzar as mesmas no
sentido de criar várias páginas e interligá-las, por fim efetuaremos a sua colocação on-line.

Doc.06.02.v1
O que é necessário?
É provável que o PC (Computador Pessoal) já possua as ferramentas necessárias.

É necessário um "browser"(Programa que permite navegar e visualizar páginas na internet). Não importa qual
o browser a usar. O mais comum é o Microsoft Internet Explorer. Mas existem outros, tais como, Opera, Mozilla
Firefox e Google Chrome que podem ser utilizados.

É necessário também um simples editor de textos. Se o PC tem instalado o Microsoft Windows, poderá usar o
Notepad (Bloco de Notas), que normalmente pode ser encontrado no menu Programas em Acessórios.

Se o PC não tem MS Windows, pode ser utilizado um editor de texto similar. Por exemplo, Pico (Linux) ou
TextEdit (Mac).

Notepad é um editor de texto básico e simples, mas excelente para codificação, porque não interfere com o
que será digitado. Usando o Notepad ou qualquer editor de textos simples o utilizador é o único responsável
pelo acerto ou pelos erros do seu código.

Um Browser e o Notepad (ou editor similar) é tudo o que é necessário para construir a sua página.

Preciso estar online?

Não. Não é necessário estar ligado à Internet para construir uma página de Internet.

É possivel construir uma página Disco Duro do seu computador e fazer o upload para a Internet quando estiver
terminada.

Doc.06.02.v1
O que é HTML?
HTML é a "linguagem base" do browser.

Resumindo, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a
de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de
diferentes universidades. O projecto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao
inventar o HTML ele lançou as fundações da Internet tal como a conhecemos actualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na
Internet. Aquilo que acontece quando se abre uma página na Internet é a interpretação que o browser faz
do HTML. É possivel visualizar o código HTML de uma página através do menu "View" (Ver) no topo do browser,
opção "Source" (Código fonte).

HTML é usado para construir páginas de internet. É simples!

OK, mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que é preciso saber por enquanto:

• Hyper é o oposto de linear. Antigamente os programas de computadores corriam linearmente:

quando o programa executava uma acção tinha que esperar pela próxima linha de comando para
executar a próxima acção e assim por diante de linha em linha. Com HTML as coisas são diferentes,
podemos ir de onde estivermos para onde quisermos. Por Exemplo: não é necessário que ter visitado
o site MSN.com antes de visitar o site HTML.net.
• Text é texto e não há mais nada a acrescentar.
• Mark-up significa marcação e é o texto que escrito. Cria-se a marcação da mesma forma que se
escreve num editor os seus cabeçalhos, marcadores, negrito, etc
• Language significa linguagem e é exactamente o que HTML é; uma linguagem. A linguagem HTML usa
muitas palavras do inglês.

Doc.06.02.v1
O que são tags HTML?
"Tags"?

Tags são rótulos utilizados para informar o browser como deve ser apresentado a página.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior
">".

Existem dois tipos de tags - tags de abertura: <comando> e tags de fecho: </comando>. A diferença entre elas
é que na tag de fecho existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fecho será processado segundo o comando
contido na tag.

Mas, contudo existem algumas excepções, no HTML a excepção é que em algumas tags a abertura e o fecho
acontece na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem
processados, isto é, são tags de comandos isolados, por exemplo, um salto de linha é efectuado com a tag <br
/>.

Alguns exemplos:

A tag <b> informa ao browser que todo o texto colocado entre <b> e </b> deve aparecer em negrito. (O
comando "b" é uma abreviação para "bold" - negrito.)

Exemplo 1:

<b>Este texto deve ser em negrito.</b>

Vai ser apresentado no browser, como podemos verificar a seguir:

Este texto deve ser em negrito.

Doc.06.02.v1
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao browser que se trata de um cabeçalho (h vem de
"heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho
de texto, <h2> o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor
e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.

Exemplo 2:

<h1>Este é um título</h1>
<h2>Este é um sub título</h2>

Vai ser apresentado no browser, como mostrado a seguir:

Este é um título

Este é um subtítulo

As tags devem ser escritas com letras maiúsculas ou minúsculas?

Para a maioria dos browsers é indiferente se são utilizadas letras maiúsculas, minúsculas ou mesmo uma
mistura delas.<COMANDO>, <comando> ou <CoMaNdo> NORMALMENTE tem o mesmo efeito. Contudo a
maneira CORRETA é usar minúsculas.

Onde devo colocar todas estas tags?

Devemos escrever as tags dentro de um documento HTML. Uma página é constituida por um ou mais
documentos HTML. Quando se navega na Internet, são abertos diferentes documentos HTML.

Doc.06.02.v1
Criar a primeira página
Como?

Já vimos o que é necessário para construir uma página: um browser e o Notepad (ou um editor de texto similar).
Abra uma janela do seu browser de modo a visualizar a página que a ser construída.

Abra também o Notepad ( Iniciar » Programas » Acessórios):

O que fazer?

Começar com algo simples, uma página que diga: "Esta é a minha primeira página de Internet.".

HTML é simples e lógico. O browser lê HTML de modo idêntico ao que uma pessoa lê um texto
qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia

Doc.06.02.v1
com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a
aparecer.

A primeira coisa a fazer é dizer ao browser que iremos "falar" com ele na linguagem HTML. Isto
é feito com a tag <html>. Então, a primeira coisa a fazer é digitar "<html>" na primeira linha do
documento, no Notepad.

Como sabemos, <html> é uma tag de abertura e deve ser fechada com a tag de fecho quando
terminamos de digitar o documento HTML. Para termos certeza que não esquecemos de fechar
a tag HTML, será aconselhado fazer isso agora mesmo, digitando " </html>" algumas linhas abaixo,
e assim escrever o código entre as tags digitadas <html> e </html>.

O próximo passo é atribuir um “head” (cabeça) ao documento, que fornece informações sobre o
documento, e um "body" (corpo), que contém o conteúdo do documento. Como HTML é lógico,
a "cabeça" (<head> e </head>) fica em cima do "corpo" (<body> e </body>).

O documento deverá agora estar como exemplificado a seguir:

<html>
<head>
</head>

<body>
</body>

</html>

Notar como o código está estruturado em linhas diferentes (usar a tecla Enter para mudar para

a próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar).
Não faz qualquer diferença a maneira como as linhas são estruturadas (linhas e recuos na
digitação) no documento HTML. Mas um código bem estruturado é mais fácil de ler e entender,
é altamente recomendado que se use uma estrutura clara e nítida para o HTML, usando linhas
e indentação (recuos), como no exemplo acima.

Doc.06.02.v1
Se o documento está como o mostrado acima, está construída uma primeira página de internet.
O que está feito será um template base para futuros documentos HTML.

Como colocar conteúdo na página?

O documento HTML é composto por duas partes: um head e um body. Na secção head
escrevemos informações sobre a página e na secção body colocamos as informações que
constituem a página.

Por exemplo, para dar um título ao documento, título este que aparece no topo da barra do
browser, devemos utilizar a secção "head". A tag para acresentar um título é <title>:

<title>A Minha primeira página de internet</title>

Notar que o título não aparece na página propriamente dita. Tudo a informação que desejamos
que apareça na página, é conteúdo, e deverá ser colocado entre as tags "body".

Conforme definido anteriormente, queremos uma página onde apareça o texto, "Esta é a minha
primeira página de internet." Este é o texto que deverá ser colocado na seção body. Então o
próximo passo será escrever na secção “body”:

<p>Esta é a minha primeira página da internet.</p>

A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exactamente o que o texto
é - um texto parágrafo.

Doc.06.02.v1
O documento HTML agora está como exemplificado a seguir:

<html>

<head>
<title>Minha primeira página web</title>
</head>

<body>
<p> Esta é a minha primeira página da internet.</p>
</body>

</html>

Pronto! Acaba de construir a sua primeiro página!

Agora basta guardar o trabalho no Disco e depois visualizar no browser:

• No Notepad aceder ao menu "Ficheiro" no topo da janela e escolher a opção "Guardar

como...".
• Escolher "Todos os ficheiros" na box "guardar com o tipo". Isto é muito importante - caso
não faça isto, o arquivo será guardado como texto e não como documento HTML.
• Guarde o documento com o nome "page1.html" (a extensão ".html" indica que se trata
de um documento HTML. A extensão ".html" dá o mesmo resultado. Pode guardar o
documento onde quiser no Disco, não esquecendo nunca a sua localização.

Doc.06.02.v1
Agora no browser:

• No menu no topo do browser aceder a "Ficheiro" e escolher a opção "Abrir" (CTRL+O).

• Clicar em "Procurar" na box que aparece.
• Localizar o documento HTML e clicar em "Abrir".

Deverá aparecer no browser: " Esta é a minha primeira página de internet."

Doc.06.02.v1
Mais tags HTML

E agora?

Vamos aprender mais sete tags.

Já sabemos que se pode obter negrito com a tag <b>, agora veremos como obter itálico - letras inclinadas -
com a tag <i>. "i" vem de "italic".

Exemplo 1:

<i>Este texto deve ser itálico.</i>

Aparecerá no browser assim:

Este texto deve ser itálico.

De modo similar podemos fazer o texto com letras menores utilizando a tag <small>:

Exemplo 2:

<small>Este texto deve ser com letras em tamanho small.</small>

Aparecerá no browser assim:

Este texto deve ser com letras em tamanho small.

Posso usar várias tags simultaneamente?

Sim podemos usar quantas tags quisermos desde de que as alinhe convenientemente. Verifique o exemplo
abaixo:

Doc.06.02.v1
Exemplo 3:

Para escrever um texto em negrito e itálico faça como exemplificado a seguir:

<b><i>Texto em negrito e itálico.</i></b>

E não assim:

<b><i>Texto em negrito e itálico.</b></i>

Confira que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fecho </b>, e o
alinhamento está certo. Isto evita confusão para quem escreve o código e para o browser que lê o código.

Mais tags!

Como foi dito anteriormente existem tags que são abertas e fechadas numa única tag. Estas tags são
comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a
tag <br /> que serve para criar uma quebra de linha:

Exemplo 4:

Um texto<br /> e mais texto em nova linha

Aparecerá no browser assim:

Um texto
e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fecho com uma barra "/" no
final: <br />. Tambem será possivel escrever <br></br> (sem conteúdo).

Doc.06.02.v1
Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua
horizontal ):

Exemplo 5:

<hr />

Aparecerá no browser assim:

Exemplo 6:

<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>

</ul>

Aparecerá no brower assim:

• Um item de lista
• Outro item de lista

Exemplo 7:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>

</ol>

Doc.06.02.v1
Aparecerá no browser assim:

1. Primeiro item da lista

2. Segundo item da lista

Isto é tudo?

Sim, por enquanto isto é tudo. Será aconselhado, a fazer as suas próprias experiências, construindo algumas
páginas usando as tags aprendidas:

<i>Itálico</i>
<small>Texto tamanho small</small>

<br /> Pula linha

<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>

<li>Item de lista</li>

Doc.06.02.v1
Atributos
O que é atributo?

Deve estar lembrado, uma tag é um comando para o browser (por exemplo, <br /> é um comando
para mudar de linha). Em algumas tags podemos ser mais específicos, acrescentando na tag,
informações adicionais de comando. Isto é feito através dos atributos.

Exemplo 1:

<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>

Atributos são escritos dentro da tag, seguidos por um sinal de igual, e depois entre aspas são
declaradas as informações do atributo.

As informações, quando mais de uma, devem ser separadas por ponto e vírgula, tudo conforme
demonstrado no exemplo acima.

Existem vários atributos. O primeiro veremos o atributo style. Com o atributo style pode-se
adicionar estilos e layout á página de internet. Por exemplo, uma cor de fundo:

Exemplo 2:

<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>

Doc.06.02.v1
O código acima renderiza uma página com cor de fundo vermelha!

Notar que algumas tags e atributos usam nomes do idioma inglês dos E.U.A. É muito importante
que se use os nomes exactamente como mostrados neste manual, se alterar uma letra que seja,
o browser não irá entender o código. É importante também que não esquecer de fechar as aspas
nas informações do atributo.

Como a página ficou vermelha?

No exemplo acima foi utilizado o código "#ff0000" para fazer a página na cor vermelha. Este é o
código para a cor vermelha no sistema de números hexadecimal (HEX). Cada cor é representada
por um número hexadecimal. A seguir alguns exemplos:

Branco: #ffffff
Preto: #000000(zeros)
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00

Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras.
Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Para facilitar
as coisas nós desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores
seguras para a Web.

Para algumas cores, é possivel usar o nome das cores em inglês (white, black, red, blue, green e
yellow - branco, preto, vermelho, azul, verde, amarelo).

Exemplo 3:

<body style="background-color: red;">

Doc.06.02.v1
Quais tags podem usar atributos?

Atributos podem ser aplicados à maioria das tags.

Normalmente usam-se atributos com mais frequência em algumas tags, tais como a tag body

e raramente usará em outras, como por exemplo, a tag br que é um comando para saltar de
linha e não precisa de nenhuma informação adicional.

Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são usados
em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem
conter somente um tipo de atributo, enquanto outras podem conter vários tipos.

Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que
tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos
oferecem.

Então, quais são as partes que constituem uma tag?

A constituição básica de uma tag é denominada elemento (por exemplo p em <p>). Assim, uma
tag é constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos
(por exemplo <p style="background-color:#ff0000;">).

Links
O que é preciso para construir um link?

Para construir um link é preciso o que tem sido usado até agora para codificar HTML: uma tag.
Uma simples tag com um elemento e um atributo é suficiente para você construir links para
onde quiser. A seguir um exemplo de link para o site HTML.net:

Exemplo 1:

Doc.06.02.v1
<a href="http://www.html.net/">Aqui um link para HTML.net</a>

Aparecerá no browser assim:

Aqui um link para HTML.net

O elemento <a> refere-se a "anchor" - âncora . O atributo href é abreviação para "hypertext
reference" (referência a hypertexto) e especifica o destino do link - que normalmente é um
endereço na Internet ou um ficheiro.

No exemplo acima o atributo href tem o valor "http://www.html.net", que é o endereço completo
do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve
sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no
browser como link. Lembre-se de fechar a tag com um </a>.

Como são os links entre minhas próprias páginas?

Se o objectivo é construir links entre páginas de um mesmo website, não é preciso escrever o
endereço completo de cada página (URL). Por exemplo, se temos duas páginas (vamos chamá-
las de pagina1.htm e pagina2.htm) e guardou as duas na mesma pasta, constrói-se um link de
uma para a outra usando apenas o nome do ficheiro no link. Nestas condições, um link da
página1.htm para a pagina2.htm será como mostrado abaixo:

Exemplo 2:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada numa subpasta (chamado de "subdirectório"), o link será como mostrado abaixo:

Exemplo 3:

<a href="subdirectório/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdirectório" para a pagina1 é como mostrado a seguir:

Doc.06.02.v1
Exemplo 4:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o directório a um nível acima do ficheiro onde foi feito o link. Seguindo o mesmo
princípio é possivel apontar para dois (ou mais) níveis acima, escrevendo "../../".

Como alternativa você pode usar sempre o endereço completo do arquivo (URL).

Como são os links dentro de uma mesma página?

É possível criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos
ou índice com links para cada um dos capítulos numa página. Tudo o que é preciso é usar o
atributo name e o símbolo "#".

Use o atributo name para marcar o elemento que é o destino do link. Por exemplo:

<h1 name="heading1">Cabeçalho 1</h1>

Agora podemos criar um link que leve àquele elemento usando o símbolo "#" no atributo do link.
O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve
ser seguido pelo valor atribuído ao name para onde o link vai. Por exemplo:

<a href="#heading1">Link para o cabeçalho 1</a>

Exemplo 5:

<html>

Doc.06.02.v1
 <head>
</head>

<body>

<p><a href="#heading1">Link para cabeçalho 1</a></p>

<p><a href="#heading2">Link para cabeçalho 2</a></p>

<h1 name="heading1">Cabeçalho 1</h1>

<p>Texto texto texto texto</p>

<h1 name="heading2">Cabeçalho 2</h1>

<p>Texto texto texto texto</p>

</body>

</html>

Aparecerá no browser assim (clique nos dois links):

Link para cabeçalho 1

Link para cabeçalho 2

Cabeçalho 1

Texto texto texto texto

Cabeçalho 2

Texto texto texto texto

(Nota: O nome de um atributo name deve começar com uma letra)

Doc.06.02.v1
Posso criar link para mais alguma coisa?

Pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para
documentos.

Exemplo 6:

<a href="mailto:[email protected]">Enviar e-mail para nobody em HTML.net</a>

Aparecerá no browser assim:

Enviar e-mail para nobody em HTML.net

A única diferença é que no lugar do endereço do documento escreve-se mailto: seguido pelo
endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do utilizador é aberto
com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar
se o utilizador tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com
este tipo de link clicando no exemplo acima.

Existem outros atributos?

Para criar link usa-se o atributo href. Adicionalmente pode-se usar um title (título) para o link:

Exemplo 7:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>

Aparecerá no browser assim:

HTML.net

O atributo title é usado para fornecer uma breve descrição do link. Se - sem clicar no link - colocar
o cursor do rato sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".

Doc.06.02.v1
Imagens
Tudo o que é preciso é da tag <img>:

Exemplo 1:

<img src="ie.jpg" title="Internet Explorer" />

Aparecerá no browser assim:

O que é preciso fazer é dizer ao browaer que quer inserir uma imagem ( img) e depois informar
onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).

Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fecho.
Semelhante á tag <br /> que não precisa de um texto inserido nela.

"ie.jpg" é o nome do ficheiro da imagem que queremos inserir na página. ".jpg" é a extensão do
tipo de imagem. Tal como a extensão ".html" para arquivos de documentos HTML, ".jpg" informa
ao browser que o ficheiro é uma imagem. São três os tipos de imagens que podemos inserir na
página:

• GIF (Graphics Interchange Format)

• JPG / JPEG (Joint Photographic Experts Group)

Doc.06.02.v1
 • PNG (Portable Network Graphics)

Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para
fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituídas por 256 cores,
e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores optimizadas para
imagens simples ao passo que imagens JPEG são melhores optimizadas para imagens complexas.
Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é
carregada no browser.

Tradicionalmente os formatos GIF e JPEG tem sido os mais usados, mas ultimamente o formato
PNG tem se tornado cada vez mais popular (em detrimento do formato GIF). O formato PNG é
em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efectiva
compressão.

Onde conseguir as imagens?

Para criar imagens próprias é preciso um programa de edição de imagens. Um programa de

edição de imagens é a ferramenta essencial para criação de websites com grande impacto
visual.

Lamentavelmente, nenhum editor de imagem vem instalado com o MS Windows ou qualquer

outro Sistema Operativo. Três dos melhores editores no mercado são por exemplo; Paint Shop
Pro, PhotoShop ou Macromedia Fireworks.

Contudo, não há necessidade de comprar um programa caro. Por enquanto, é possível fazer o
download de um excelente editor de imagens chamado Irfan View que é freeware, isto é, não custa
nada.

Ou você pode fazer download de imagens existentes na internet. Mas, se optar por fazer o
download de imagens da Internet, cuidado para não violar direitos de autor de terceiros. Como
fazer o download de uma imagem existente na Internet:

1. Clique com o botão direito do rato na imagem da Internet.

2. No menu que aparece escolha a opção "Guardar imagem como...".

Doc.06.02.v1
 3. Na janela que se abre, escolha o lugar no seu computador para guardar e clique
"Guardar".

Faça isto com a imagem abaixo e guarde no computador no mesmo local onde está localizado o
documento HTML.

Isto é tudo o que é preciso saber sobre imagens?

Primeiro, é possível inserir imagens que estão localizadas em outros directórios ou até mesmo
em outras páginas:

Exemplo 2:

<img src="images/logo.png">

Exemplo 3:

<img src="http://www.html.net/logo.png">

Segundo, imagens podem ser links:

Exemplo 4:

<a href="http://www.html.net">
<img src="logo.png"></a>

Existem outros atributos para conhecer?

O atributo title é usado para fornecer uma descrição alternativa da imagem caso a imagem não
seja renderizada para o usuário. Isto é particularmente importante para utilizadores com
restrições visuais ou quando a imagem é carregada muito lentamente. Como consequência, usa-
se o atributo title:

Doc.06.02.v1
Exemplo 5:

<img src="logo.gif" title="logotipo do HTML.net">

Alguns browsers mostram uma caixa pop-up com o conteúdo do atributo title quando o utilizador passa o rato
sobre a imagem. Ter em mente que a finalidade principal do atributo title é a de fornecer uma ajuda extra para
imagem.

O atributo title pode ser usado para fornecer uma curta descrição da imagem:

Exemplo 6:

<img src="logo.gif" title="Aprenda HTML no site HTML.net">

Aparecerá no navegador assim:

Coloque o ponteiro do rato sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o
texto "Aprenda HTML no site HTML.net" .

Dois outros atributos importantes são width e height:

Exemplo 7:

<img src="logo.png" width="141" height="32">

Aparecerá no browser assim:

Doc.06.02.v1
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da
imagem. O valor adoptado para medidas é o pixel. Pixel é a unidade de medida usada para medir
a resolução do ecrã. Ao contrário de centímetros, pixel é uma unidade de medida relativa que
depende da resolução do ecrã. Utilizadores com grande resolução de ecrã terão 25 pixels por 1
centímetro de ecrã enquanto aqueles com baixa resolução de ecrã terão os mesmos 25 pixels
em 1,5 cm de ecrã.

Se não forem definidos os valores para width e height, a imagem será inserida com seu tamanho
real. Com width e height é possivel alterar o tamanho da imagem:

Exemplo 8:

<img src="logo.gif" width="32" height="32">

Doc.06.02.v1
Tabelas
Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser
apresentada em linhas e colunas, de forma lógica.

Exemplo 1:

<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

Aparecerá no browser assim:

Célula 1 Célula 2

Célula 3 Célula 4

Qual a diferença entre <tr> e <td>?

3 tags básicas são usadas para inserir tabelas:

• <table> começa e termina uma tabela.

• <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da

tabela.
• <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas

linhas da tabela.

Doc.06.02.v1
Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início
de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>.
A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha
também contém duas células. A tabela termina com </table>.

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:

Célula 1 Célula 2

Célula 3 Célula 4

Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número
ilimitado de linhas e colunas.

Exemplo 2:

<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr>
<td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>

Doc.06.02.v1
 Aparecerá no browser assim:

Célula 1 Célula 2 Célula 3 Célula 4

Célula 5 Célula 6 Célula 7 Célula 8

Célula 9 Célula 10 Célula 11 Célula 12

Existem atributos?

Sim, existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de
uma borda em volta da tabela:

Exemplo 3:

<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

Aparecerá no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4

A espessura da borda é especificada em pixels.

Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela
- ou alternativamente em percentagem da tela:

Doc.06.02.v1
Exemplo 4:

<table border="1" width="30%">

Este exemplo renderiza no browser uma tabela com largura igual a 30% da largura do ecrã.

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:

• align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma

célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita).
• valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top,
middle ou bottom (em cima, no meio ou em baixo).

Exemplo 5:

<td align="right" valign="top">Célula 1</td>

O que posso inserir em tabelas?

Teoricamente é possível inserir qualquer coisa numa tabela: texto, links e imagens... MAS,
tabelas destinam-se a apresentar dados tabulares, isto é, dados que por sua natureza devam
ser apresentados em linhas e colunas.

Nos primórdios da Internet tabelas eram usadas como ferramenta para construir layout. Para
controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (dica:CSS).

Doc.06.02.v1
Uploading páginas
Para publicar o trabalho na Internet, apenas é preciso espaço num servidor e um programa FTP
gratuito.

Se costuma aceder a Internet, provavelmente já viu que existem vários serviços gratuitos de
hospedagem de sites. O endereço no servidor será alguma coisa parecida com
http://home.servidor.com/~nomedoutilizador. É preciso activar o serviço. Informe-se como
fazer isto na documentação fornecida pelo serviço de hospedagem.

Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma
conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) pode registrar-se
gratuitamente para obter um espaço num servidor na Internet. Existem várias companhias que
oferecem este serviço gratuito - entre elas a 000webhost.com (clique em "Order" e escolha membro
gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em
português) - isto é um processo bem rápido.

Para aceder ao servidor é preciso conhecer o "Nome do seu servidor" (Por exemplo,
ftp.htmlnet.site50.net) e ter um nome de utilizador e password.

Isto é tudo que é necessário?

Para aceder o servidor e publicar as páginas é preciso um programa FTP. Existem vários na
Internet para download e são gratuitos.

Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . É possivel obter o
FileZilla em filezilla.sourceforge.net.

Como fazer o upload das páginas?

Abaixo exemplificamos um exemplo de como fazer isto usando o servidor 000webhost.com e o

programa FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP.

Doc.06.02.v1
Conecte à Internet e abra o programa FTP. Insira "Host Name" ("ftp.htmlnet.site50.net" no
"Address"), nome de utilizador (em "User") e senha (em "Password") clique "Connect". Agora
tem acesso ao servidor. Num lado da janela do programa verá os directórios e ficheiros do seu
computador ("Local Site"), e no outro o do servidor ("Remote Site"):

Encontre os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira
para o servidor ("Remote site") simplesmente dando um clique duplo nos ficheiros. Agora o
mundo todo poderá ver a página! (Por exemplo, no endereço
http://htmlnet.site50.netpagina1.htm).

Atribuir a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente
a página de entrada no site, ou seja, basta digitar http://htmlnet.site50.net (sem qualquer nome
de arquivo) e abrirá http://htmlnet.site50.net/index.htm.

Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para si
(www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles
fornecidos por um serviço gratuito da Internet. Pode encontrar na Internet várias empresas que
vendem domínio. Faça uma busca do Google.

Doc.06.02.v1
CONCLUSÃO
Este manual abordou diversos tags em html bem como a sua interação de forma a termos uma
página WEB.

REFERÊNCIAS BILIOGRÁFICAS
Pedro Alexandre Coelho (2011), HTML 4 & XHTML - Curso Completo, FCA.
Luis Abreu (2011), HTML 5, FCA.

Doc.06.02.v1