APOSTILA DE HTML

Programa de Educação Tutorial

Curso de Engenharia de Telecomunicações
Universidade Federal Fluminense

Autor atual: Robertha Pereira Pedroso

Últimas atualizações: Pâmella Almeida Gomes

Rafael de Oliveira Ribeiro

Niterói - RJ
Junho / 2007
2
Sumário

Prefácio iii

1 Noções gerais sobre HTML e Internet 5

1.1 Características da linguagem HTML . . . . . . . . . . . . . . 5
1.2 Tags ou marcações HTML . . . . . . . . . . . . . . . . . . . . 6
1.3 Estrutura de um documento HTML . . . . . . . . . . . . . . . 7
1.4 Criando, abrindo e manipulando documentos HTML . . . . . 7
1.5 Códigos especiais de caracteres . . . . . . . . . . . . . . . . . 8
1.6 Uniform Resource Locator . . . . . . . . . . . . . . . . . . . . 9

2 Parágrafos e quebras de linha 11

2.1 Parágrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Quebras de linha . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Linhas horizontais . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Aplicando estilos de texto 15

3.1 Marcadores de estilo . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Cabeçalhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 Exibição de textos pré-formatados . . . . . . . . . . . . . . . . 17
3.4 Centralização de textos e outros elementos . . . . . . . . . . . 17
3.5 O marcador FONT . . . . . . . . . . . . . . . . . . . . . . . . 18
3.6 Cores de texto e padrões de fundo . . . . . . . . . . . . . . . . 19

4 Imagens 23
4.1 O marcador IMG . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.1.1 Inserindo imagens do mesmo diretório . . . . . . . . . . 25
4.1.2 Inserindo imagens de diretórios diferentes . . . . . . . . 25
4.1.3 Inserindo imagens de outros servidores . . . . . . . . . 27

3
4

4.2 Alinhamento de imagens . . . . . . . . . . . . . . . . . . . . . 28

4.3 Backgrounds com imagens . . . . . . . . . . . . . . . . . . . . 29

5 Links 33
5.1 O marcador A . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.1 Links para arquivos no mesmo diretório . . . . . . . . . 34
5.1.2 Links para arquivos em diretórios diferentes . . . . . . 36
5.1.3 Links para arquivos em outro servidor . . . . . . . . . 38
5.1.4 Links para seções especícas em documentos . . . . . . 38
5.2 Enviando e-mail diretamente da página HTML . . . . . . . . . 40
5.2.1 Preenchendo o campo Assunto ou Subject . . . . . . . 41
5.2.2 Enviando mensagem para mais de um destinatário . . . 41
5.2.3 Enviando uma cópia da mensagem . . . . . . . . . . . 41

6 Listas 43
6.1 O marcador UL . . . . . . . . . . . . . . . . . . . . . . . . . . 43
6.2 O marcador OL . . . . . . . . . . . . . . . . . . . . . . . . . . 44
6.3 O marcador DL . . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.4 Aninhamento de listas . . . . . . . . . . . . . . . . . . . . . . 46
6.5 Listas com marcadores grácos . . . . . . . . . . . . . . . . . 47

7 Tabelas 51
7.1 O marcador TABLE . . . . . . . . . . . . . . . . . . . . . . . 52
7.2 O marcador TR . . . . . . . . . . . . . . . . . . . . . . . . . . 53
7.3 O marcador TD . . . . . . . . . . . . . . . . . . . . . . . . . . 53
7.4 Títulos de colunas . . . . . . . . . . . . . . . . . . . . . . . . . 54
7.5 Expansão de células em linhas e colunas . . . . . . . . . . . . 55
7.6 Aninhamento de tabelas . . . . . . . . . . . . . . . . . . . . . 56
7.7 Legendas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

8 Formulários 59
8.1 O marcador FORM . . . . . . . . . . . . . . . . . . . . . . . . 59
8.2 O marcador INPUT . . . . . . . . . . . . . . . . . . . . . . . 60
8.3 Os marcadores SELECT e OPTION . . . . . . . . . . . . . . 63
8.4 O marcador TEXTAREA . . . . . . . . . . . . . . . . . . . . 64
8.5 Alinhamento de campos em formulários . . . . . . . . . . . . . 66
8.5.1 Usando o marcador PRE . . . . . . . . . . . . . . . . . 66
8.5.2 Usando tabelas . . . . . . . . . . . . . . . . . . . . . . 66
UFF PET-TELE))) i

8.6 Agrupamento de campos com o marcador

FIELDSET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

8.6.1 Teclas de atalho para conjuntos de campos . . . . . . . 68

8.6.2 Teclas de atalho para campos . . . . . . . . . . . . . . 69

9 Frames 73

9.1 O frame document . . . . . . . . . . . . . . . . . . . . . . . . 73

9.2 O marcador FRAMESET . . . . . . . . . . . . . . . . . . . . 74

9.3 Especicação de tamanho de frames . . . . . . . . . . . . . . . 74

9.3.1 Usando valores em pixels . . . . . . . . . . . . . . . . . 74

9.3.2 Usando valores relativos . . . . . . . . . . . . . . . . . 75

9.3.3 Usando valores percentuais . . . . . . . . . . . . . . . . 75

9.4 O marcador FRAME . . . . . . . . . . . . . . . . . . . . . . . 76

9.5 Combinando ROWS e COLS . . . . . . . . . . . . . . . . . . . 77

9.6 Interligação de frames . . . . . . . . . . . . . . . . . . . . . . 79

9.7 O marcador NOFRAMES . . . . . . . . . . . . . . . . . . . . 81

9.8 Janelas especiais para frames . . . . . . . . . . . . . . . . . . . 82

10 Imagens Mapeadas 83

10.1 Mapas do tipo server-side . . . . . . . . . . . . . . . . . . . . 83

10.2 Mapas do tipo client-side . . . . . . . . . . . . . . . . . . . . . 84

10.2.1 O marcador MAP . . . . . . . . . . . . . . . . . . . . . 84

10.2.2 O marcador AREA . . . . . . . . . . . . . . . . . . . . 84

A Notações especiais para símbolos 89

B Padrões de cores 91
ii
Prefácio

Tendo em vista as diretrizes do MEC em Ensino, Pesquisa e Extensão, o

Programa de Educação Tutorial (PET), do curso de Engenharia de Tele-
comunicações, da Universidade Federal Fluminense (UFF), desenvolveu um
projeto de elaboração de apostilas, com o intuito de auxiliar os alunos no
aprendizado de temas importantes a sua formação, mas ausentes nas disci-
plinas do referido curso. Estas apostilas também são usadas como material
didático para os cursos de capacitação, ministrados por alunos do PET para
os corpos docente e discente do curso de graduação em Engenharia de Tele-
comunicações.
Abaixo segue a lista de apostilas preparadas neste projeto:

HTML : Linguagem de programação para hipertextos, principalmente em-

pregada na construção de páginas da Internet (Webpages ).

LaTeX : Sistema de edição de texto largamente utilizado em meios acadê-

micos e cientícos, bem como por algumas editoras nacionais e inter-
nacionais.

LINUX : Introdução ao sistema operacional LINUX.

Linguagem C : Linguagem de programação amplamente utilizada em pro-

blemas de engenharia e computação.

MATLAB : Ambiente de simulação matemática, utilizado em diversas

áreas prossionais.

SPICE : Ambiente de simulação de circuitos elétricos (analógicos e digitais),

utilizado em projeto de circuitos discretos e integrados.

Esta apostila destina-se a introduzir o usuário à linguagem de programa-

ção HTML, fornecendo-lhe as ferramentas básicas para a criação de páginas
para Internet.

iii
UFF PET-TELE))) 1

São abordados neste material todos os temas necessários à autoria de

documentos HTML e, ao terminar de estudá-lo, o leitor estará capacitado
a elaborar sua própria página da Internet, disponibilizando nela o conteúdo
que desejar.
Uma vez dominadas as técnicas apresentadas nesta apostila, sugerimos
que o leitor continue seus estudos aprendendo técnicas mais avançadas de
programação para Internet, tais como HTML Dinâmico, Java Script e Java.

Este documento é de distribuição gratuita, sendo proibida a venda de parte

ou da íntegra do documento.
2
Sumário

3
4
Capítulo 1
Noções gerais sobre HTML e
Internet

1.1 Características da linguagem HTML

A linguagem HTML (Hypertext Markup Language ) tem o objetivo de forma-
tar textos através de marcações especiais denominadas tags, para que possam
ser exibidos de forma conveniente pelos clientes Web, também denominados
navegadores ou browsers. Além disso, esta linguagem possibilita a interli-
gação entre páginas da Web, criando assim documentos com o conceito de
hipertexto.
Características básicas da linguagem HTML:

1
• Documentos HTML são arquivos de texto escritos em ASCII

• O HTML não faz diferença entre letras maiúsculas e minúsculas em

suas marcações, ou seja, não é `case sensitive '

• Nem todas as marcações e seus correspondentes recursos são suportados

por qualquer navegador. Quando um cliente Web não entende uma
marcação, ele simplesmente a ignora.

1 ASCII (American Standard Code for Information Interchange ) é o formato mais co-
mum usado em arquivos texto em computadores e na Internet. Num arquivo ASCII, cada
caractere alfabético, numérico ou especial, é representado por um número binário de sete
bits. É possível representar até 128 caracteres com este código.

5
6

• Arquivos HTML podem possuir as extensões `html' ou `htm'. A pri-

meira é normalmente utilizada em sistemas UNIX e a segunda em sis-
temas Windows. Os Browsers são capazes de exibir documentos com
ambas as extensões.

1.2 Tags ou marcações HTML

A linguagem HTML pertence a uma classe de linguagens de programação
conhecida como `Tag Languages ', ou simplesmente Linguagem de Marcação.
Neste tipo de linguagem, os comandos são escritos em forma de marcações
denominadas tags.
De um modo geral, as tags aparecem em pares, delimitando o texto a ser
formatado. A tag que abre o campo de atuação de um comando pode ser
identicada pelos sinais

`$<$ >', enquanto a que encerra este campo de atuação possui os sinais
$<$ >'.
Por exemplo:

<B> Linguagem </B> de Marcação.

A sintaxe acima determina que a marcação `B' seja aplicado ao texto

`Linguagem', mas não ao texto `de programação'.
Há exceções a esse funcionamento de paridade das tags, onde a marcação
<tag> não necessitará de sua correspondente </tag>. Veremos exemplos
de ambos os tipos mais adiante.
Além do comando propriamente dito, uma tag pode conter seus parâme-
tros.
Parâmetros são recursos próprios de cada marcação, que permitem que ele
seja executado de diversas formas. Pode-se dizer que enquanto um comando
diz ao Browser o que fazer, seus parâmetros dizem a ele como fazer, através
de suas opções. Assim como cada comando possui parâmetros especícos,
cada parâmetro possui opções especícas.
Veja o exemplo:

<FONT SIZE="4"COLOR="green"> Texto </FONT>

UFF PET-TELE))) 7

No exemplo acima, `FONT' é o comando e, `SIZE' e `COLOR' são os pa-

râmetros cujas opções escolhidas pelo programador foram, respectivamente,
`4' e `green'. Note que, ao contrário da marcação de abertura, a marcação
de fechamento de um comando não precisa mencionar seus parâmetros.

1.3 Estrutura de um documento HTML

A estrutura principal de um documento HTML possui duas partes básicas:
o cabeçalho e o corpo do programa.
Todo documento deve ser iniciado com a marcação <HTML> e nalizado
com </HTML>. Este par de tags é essencial.
A área do cabeçalho, embora muito conveniente, é opcional e delimitada
pelas marcações <HEAD> e </HEAD>. Entre estas tags pode ser denido
o título da página, através das marcações <TITLE> e </TITLE>. O título
especicado será exibido na barra de título do Browser.
A maioria dos comandos HTML será colocada na área do corpo do pro-
grama, que é delimitada pelas marcações <BODY> e </BODY>. Excetuando-
se os `frame documents ', que serão vistos mais adiante, esta é uma marcação
obrigatória.
O exemplo abaixo ilustra a estrutura de um programa HTML.

<HTML>
<HEAD>
<TITLE> Primeiro Exemplo </TITLE>
</HEAD>
<BODY>
Bem-vindo ao mundo do HTML!
</BODY>
</HTML>

1.4 Criando, abrindo e manipulando documen-

tos HTML
Documentos HTML podem ser criados em qualquer editor de texto visual
(nos quais a visualização do arquivo não depende de compilação de código),
tais como Bloco de Notas, VI, emacs, etc. Além dos editores especícos para
8

várias plataformas, existem conversores de diversos formatos, por exemplo

de *.doc para *.html.
Para criar uma página no Bloco de Notas do Browser, por exemplo, é pre-
ciso digitar o texto desejado juntamente com as marcações que o formatarão.
Um documento escrito desta forma é denominado código fonte.
Para praticar, abra o Bloco de Notas e digite o exemplo da seção anterior.
Na hora de salvá-lo, no campo `Salvar como Tipo' da caixa de diálogo `Salvar
Como', escolha a opção `Todos os Arquivos' e no campo `Nome do Arquivo'
digite o nome desejado juntamente com a extensão .html ou .htm. Se este
procedimento não for adotado, o arquivo será gravado com a extensão padrão
.txt e não poderá ser aberto por Browsers.
Depois de salvo o documento, é possível alterar seu código fonte clicando
com o botão direito do mouse sobre o ícone da página, escolhendo a opção
`Abrir Com' e, em seguida, selecionando o programa editor de texto disponí-
vel. No caso do Windows, este programa será o Bloco de Notas.
Para visualizar o arquivo criado no Internet Explorer, por exemplo, cli-
que no menu `Arquivo' e escolha a opção `Abrir'. Escreva então o caminho
completo para o arquivo desejado no campo oferecido ou clique no botão
`Procurar' para procurá-lo entre as pastas de seu computador.
Uma dica interessante para quem está começando e para quem deseja
cada vez mais conhecer os recursos da linguagem HTML é analisar códigos
fonte de páginas da Web. No Internet Explorer o usuário pode fazer isso
clicando no menu `Exibir' e escolhendo a opção `Código Fonte'. Desta forma
o código fonte da página será mostrado no Bloco de Notas, caso você esteja
trabalhando no Windows.

1.5 Códigos especiais de caracteres

Existem dois tipos de códigos especiais que permitem inserir qualquer ca-
ractere numa página HTML, mesmo que ele não esteja presente no teclado.
Estes códigos são especicados pela norma ISO-Latin-1 ou a partir de uma
identidade HTML.
A norma ISO utiliza um código composto pelo caractere `&' seguido do
símbolo `#' e de uma combinação de números, sendo terminado com `;'. Já a
identidade HTML usa o caractere `&' seguido de uma palavra que identica
o símbolo e de `;'. As identidades HTML correspondentes a alguns símbolos
comuns estão listados no apêndice A desta apostila.
UFF PET-TELE))) 9

É aconselhável, ao se criar uma página, utilizar estes códigos especiais

para criar a acentuação da língua portuguesa. Desta forma, Browsers mais
antigos ou até mesmo aqueles que estejam congurados para outros idiomas
poderão exibir corretamente a letra acentuada.

1.6 Uniform Resource Locator

A abreviação URL corresponde à nomenclatura Uniform Resource Locator
(localizador universal de recursos), utilizada pela Internet para indicar o
endereço de um documento. Saber especicar corretamente uma URL é
imprescindível para utilizar adequadamente muitos comandos da linguagem
HTML.
Uma URL deve conter três partes: o protocolo do documento, o endereço
do servidor e a localização do arquivo.
Sintaxe: protocolo://servidor/nome do arquivo.
Onde:

protocolo - É o tipo de protocolo 2 de comunicação que deve ser usado.

servidor - É o nome do servidor que será acessado.

nome do arquivo - É o nome do documento que será acessado.

Como protocolos, podem ser usados:

HTTP - É um servidor da World Wide Web que contém documentos no

formato `HTTP' e que signica HyperText Transfer Protocol.

GOPHER - É um servidor composto por menus e diretórios com informa-

ções sobre arquivos e dados.

FTP - É uma abreviação de File Transfer Protocol.

Telnet - Este protocolo inicia uma sessão para se conectar remotamente a

outro computador.

WAIS - Wide Area Indexed Server é um local onde documentos estão dis-
poníveis em formato especial de pesquisa.

2 Conjunto de regras que especicam o formato, a sincronização, o seqüenciamento e a

vericação de erros na comunicação entre computadores.
10

File - Indica que o documento está no micro ou na rede local.

Capítulo 2

Parágrafos e quebras de linha

2.1 Parágrafos
A linguagem HTML não reconhece os caracteres de quebra de linha dos
editores de texto e, mesmo que exista uma linha em branco no código fonte,
os clientes Web só reconhecem o início de um novo parágrafo mediante à
marcação apropriada.

A marcação <P> é utilizada para denir o início de um novo parágrafo,

deixando uma linha em branco entre este e o texto anterior.

O parâmetro ALIGN dene o alinhamento do texto do parágrafo e pode

assumir os valores `left', `right', `center' e `justify', correspondendo respecti-
vamente aos alinhamentos à esquerda, à direita, ao centro e justicado. Se o
parâmetro ALIGN não for especicado, por padrão o parágrafo será alinhado
à esquerda.

Sintaxe básica: <P> Texto </P>

Sintaxe completa: <P ALIGN=left | right | center | justify > Texto
</P>.
As barras verticais no exemplo de sintaxe indicam que as opções são
mutuamente exclusivas, como era de se esperar, e as aspas são opcionais neste
caso. A utilização de aspas na denição de parâmetros só será obrigatória
em duas situações: quando o valor do parâmetro for composto de duas ou
mais palavras ou quando não for dado nenhum espaço entre os parâmetros
na tag.
Este comando pode ou não ser terminado por </P>.

11
12

2.2 Quebras de linha

A marcação <BR> faz uma quebra de linha sem acrescentar espaços. Não
existe a marcação </BR>.
A diferença entre a aplicação de <P> e <BR> pode ser visualizada
no exemplo abaixo. Digite-o em seu computador e salve-o como `para-
[Link]'. Veja o resultado.

<HTML>
<HEAD>
<TITLE> Par&aacute;grafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta senten&ccedil;a com a marca&ccedil;&atilde;o
de par&aacute;grafo. </P>
Para vericar a diferen&ccedil;a.
<P ALIGN=center>Utilizando BR:</P>
<P> Agora separamos as linhas utilizando <BR>
a marca&ccedil;&atilde;o de quebra de linha. <BR>
Deu para notar?
</BODY>
</HTML>

2.3 Linhas horizontais

A marcação <HR> insere uma linha divisória na posição onde for colocado.
Não existe a marcação </HR>.
Os principais parâmetros deste comando são:

SIZE=número - Dene a largura da linha e deve ser especicado em

pixels.

WIDTH=número | número% - Especica o comprimento da linha em

pixels ou porcentagem do tamaho da janela.

ALIGN=left | center | right - Especica o alinhamento horizontal da

linha.
UFF PET-TELE))) 13

COLOR=cor - Especica a cor da linha.

NOSHADE - Indica que a linha não deve receber o efeito de sombra.

<HR>
Sintaxe básica:
Sintaxe completa: <HR SIZE=número WIDTH=número | número%
ALIGN=left | center | right COLOR=cor NOSHADE>
Modique o exemplo `[Link]' conforme o indicado abaixo.

<HTML>
<HEAD>
<TITLE> Par&aacute;grafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta senten&ccedil;a com a marca&ccedil;&atilde;o
de par&aacute;grafo. </P>
Para vericar a diferen&ccedil;a.
<HR ALIGN=center WIDTH=75% SIZE=15 COLOR=blue NOSHADE>
<P ALIGN=center>Utilizando BR:</P>
<P> Agora separamos as linhas utilizando <BR>
a marca&ccedil;&atilde;o de quebra de linha. <BR>
Deu para notar?
</BODY>
</HTML>