Programação Web

HTML – CSS – JAVASCRIPT

Inclui:
 Introdução à Internet
ÍNDICE
Lista de abreviaturas e siglas .................................................................................................................. xi
Apresentação ......................................................................................................................................... xii
Objectivo e organização desta sebenta ................................................................................................ xiii

Unidade I: Introdução à Internet ......................................................................................... 1

Primórdios das redes de comunicação .......................................................................... 1
Satélites de comunicações............................................................................................. 2
Antecedentes da Internet (uma breve história) .............................................................. 2
Internet, a rede mundial ................................................................................................. 5
Web – a teia de alcance mundial ................................................................................... 6
O que é a Internet .......................................................................................................... 7
Funcionamento da Internet ............................................................................................ 7
Protocolos da Internet .................................................................................................... 8
Alguns protocolos da Internet (TCP/IP, HTTP, DHCP, SMTP, IMAP, POP, FTP) ................ 9
Alguns serviços da Internet .......................................................................................... 10
Web – sistema de informações de Hipertexto ............................................................. 10
Navegadores da Web................................................................................................... 11
Alguns comandos do command prompt úteis .............................................................. 12
Referências bibliográficas ............................................................................................ 14

Unidade II: Linguagem HTML – Conceitos básicos......................................................... 15

Web browser (navegador) ............................................................................................ 15
Servidor HTTP .............................................................................................................. 15
Servidor Web (Web Server) ......................................................................................... 16
Servidor DNS (DNS Server) ......................................................................................... 16
Alguns serviços gratuitos de DNS: OpenDNS e Google Public DNS .......................... 16
Linguagem HTML ......................................................................................................... 17
Documento e Página .................................................................................................... 17
Usuário ......................................................................................................................... 18
Dispositivo de usuário .................................................................................................. 18
Etiqueta (tag) ................................................................................................................ 18
Hipertextualidade ......................................................................................................... 18
URI (uniform resource identifier) .................................................................................. 18
URL (uniform resource locator) .................................................................................... 19
Normas para Web (Web Standards) ............................................................................ 19
Como funciona a transferência de uma página web .................................................... 19
Apresentação da Linguagem HTML ............................................................................ 20
Histórico........................................................................................................................ 20
Ferramentas de desenvolvimento HTML ..................................................................... 22
Fundamentos do HTML................................................................................................ 23
Elementos e descritores (tags) .................................................................................... 23
Atributos ....................................................................................................................... 24
Estrutura básica de um documento HTML................................................................... 24
 HTML, para que serve?................................................................................................ 25
A World Wide Web e a Internet .................................................................................... 26
Referências bibliográficas ............................................................................................ 26

Unidade III: Descritores (tags) HTML................................................................................ 27

Breve Introdução .......................................................................................................... 27
Estrutura ................................................................................................................................................ 28
!doctype ........................................................................................................................ 28
Comentários <!-- --> ..................................................................................................... 28
<html> … </html> ......................................................................................................... 28
<head> … </head> ...................................................................................................... 29
Título <title> … </title> ................................................................................................. 29
Metadados <meta> ...................................................................................................... 29
<body> … </body> ....................................................................................................... 30
<bdo> … </bdo> .......................................................................................................... 30
<hn> … </hn> .............................................................................................................. 30
<hr> .............................................................................................................................. 30
<div> … </div> ............................................................................................................. 31
<span> … </span> ....................................................................................................... 31
Frases e Parágrafos de texto .............................................................................................................. 31
<abbr> … </abbr> ........................................................................................................ 31
<acronym> … </acronym> ........................................................................................... 31
<address> … </address> ............................................................................................. 32
<blockquote> … </blockquote> ................................................................................... 32
<cite> … </cite> ........................................................................................................... 32
<q> … </q> .................................................................................................................. 32
<br> .............................................................................................................................. 33
<code> … </code> ....................................................................................................... 33
<del> … </del> ............................................................................................................. 33
<dfn> … </dfn> ............................................................................................................ 33
<em> … </em> ............................................................................................................ 33
<ins> … </ins> ............................................................................................................. 34
<kbd> … </kbd> ........................................................................................................... 34
<p> … </p> .................................................................................................................. 34
<pre> … </pre> ............................................................................................................ 34
<samp> … </samp> ..................................................................................................... 34
<strong> … </strong> .................................................................................................. 35
_… ........................................................................................................... 35
 ^… ........................................................................................................... 35
<var> … </var> ............................................................................................................ 35
Elementos de formatação do texto..................................................................................................... 35
<b> … </b> .................................................................................................................. 35
<big> … </big> ............................................................................................................. 36
<font> … </font> .......................................................................................................... 36
<i> … </i> ..................................................................................................................... 36
<s> … </s> ................................................................................................................... 36
<small> … </small> ...................................................................................................... 36
<strike> … </strike> ..................................................................................................... 37
<tt> … </tt> .................................................................................................................. 37
<u> … </u> .................................................................................................................. 37
Listas ..................................................................................................................................................... 37
Lista numerada (ordered list) ....................................................................................... 37
Lista não ordenada (unordered list) ............................................................................. 38
Lista de definição (definition list) .................................................................................. 38
Lista de definição (definition list) .................................................................................. 38
Definição do termo (definition term) ............................................................................. 38
Descrição da definição (description definition) ............................................................ 38
Hiperlinks (hiperligações) ................................................................................................................... 38
Links internos ............................................................................................................... 39
Links externos .............................................................................................................. 40
Links para download de arquivos ................................................................................. 40
Alguns tipos de URL para o atributo hypertext reference (href) .................................. 40
Tag <link> ..................................................................................................................... 41
Tabelas .................................................................................................................................................. 41
<caption> … </caption> ............................................................................................... 41
<table> … </table> ....................................................................................................... 42
<tr> … </tr> .................................................................................................................. 42
<td> … </td> ................................................................................................................ 42
<th> … </th> ................................................................................................................ 42
<col> ............................................................................................................................. 43
<colgroup> … </colgroup> ........................................................................................... 43
<tbody> … </tbody> ..................................................................................................... 43
<tfoot> … </tfoot> ........................................................................................................ 43
<thead> … </thead> .................................................................................................... 43
Frame ..................................................................................................................................................... 44
<frame> ........................................................................................................................ 44
 <frameset> … </frameset> .......................................................................................... 44
<iframe> … </iframe> .................................................................................................. 44
<noframes> … </noframes> ........................................................................................ 45
Conteúdo incorporado ......................................................................................................................... 45
<applet> … </applet> ................................................................................................... 45
<area> .......................................................................................................................... 45
<map> … </map> ........................................................................................................ 46
<img>............................................................................................................................ 46
<object> … </object> ................................................................................................... 46
<param> ....................................................................................................................... 47
Estilo ...................................................................................................................................................... 47
<style> … </style> ........................................................................................................ 47
Formulários ........................................................................................................................................... 47
<form> … </form> ........................................................................................................ 47
<input>.......................................................................................................................... 48
Definindo campos em um formulário ........................................................................... 48
<input type = "text | password"> ................................................................................... 48
<input type = "radio | checkbox | image | submit | reset | button | file"> ....................... 49
<fieldset> … </fieldset>................................................................................................ 49
<legend> … </legend> ................................................................................................. 49
<button> … </button> .................................................................................................. 50
<isindex> ...................................................................................................................... 50
<label> … </label> ....................................................................................................... 50
<select> … </select>.................................................................................................... 50
<optgroup> … </optgroup> .......................................................................................... 50
<option> … </option> ................................................................................................... 51
<textarea> … </textarea> ............................................................................................ 51
Scripts ................................................................................................................................................... 51
<script> … </script> ..................................................................................................... 51
<noscript> … </noscript> ............................................................................................. 51
Efeitos de animação e recursos multimédia ..................................................................................... 51
<marquee> … <marquee> ........................................................................................... 52
<bgsound> ................................................................................................................... 52
<embed> ...................................................................................................................... 53
Caracteres especiais ............................................................................................................................ 53
Referências bibliográficas ............................................................................................ 54
Unidade IV: Folhas de estilo (CSS) ................................................................................... 55
Breve história ............................................................................................................... 55
Definição....................................................................................................................... 56
Funcionamento ............................................................................................................. 56
Regra CSS ................................................................................................................... 57
Selectores, especificidade, cascata e herança ............................................................ 58
Formatação de cores ........................................................................................................................... 60
Propriedade color ......................................................................................................... 60
Código hexadecimal/RGB ............................................................................................ 60
Nome da cor ................................................................................................................. 61
Valores RGB (Red, Green, Blue) ................................................................................. 62
Valores RGBA / HSL / HSLA (CSS3) ............................................................................. 62
Unidades de medida ............................................................................................................................ 63
Medidas absolutas ....................................................................................................... 63
Medidas relativas ......................................................................................................... 63
Vinculando folhas de estilo a documentos ....................................................................................... 64
Estilos inline ................................................................................................................. 64
Estilos incorporados ..................................................................................................... 64
Estilos externos ............................................................................................................ 64
Estilos importados ........................................................................................................ 65
Formatação de textos e fontes ........................................................................................................... 65
Font .............................................................................................................................. 65
Font-size ....................................................................................................................... 65
Font-weight ................................................................................................................... 66
Font-variant .................................................................................................................. 66
Font-style ...................................................................................................................... 66
Font-family .................................................................................................................... 66
Line-height .................................................................................................................... 66
Letter-spacing ............................................................................................................... 66
Word-spacing ............................................................................................................... 67
Text-align ...................................................................................................................... 67
Text-decoration ............................................................................................................ 67
Text-transform .............................................................................................................. 67
Text-indent ................................................................................................................... 67
Text-shadow ................................................................................................................. 67
Formatação de fundo ........................................................................................................................... 68
Background (declaração abreviada) ............................................................................ 68
 Background-image ....................................................................................................... 68
Background-position..................................................................................................... 69
Background-repeat ....................................................................................................... 69
Background-attachment ............................................................................................... 69
Background-color ......................................................................................................... 69
A propriedade CSS border .................................................................................................................. 70
Border-width ................................................................................................................. 70
Border-style .................................................................................................................. 70
Border-color .................................................................................................................. 71
Border-radius (CSS3) ................................................................................................... 71
Listas ..................................................................................................................................................... 71
List-style ....................................................................................................................... 71
List-style-type ............................................................................................................... 71
List-style-image ............................................................................................................ 72
List-style-position .......................................................................................................... 72
Propriedade CSS para layout .............................................................................................................. 72
Margin........................................................................................................................... 72
Padding ........................................................................................................................ 72
Propriedades de bloco ......................................................................................................................... 73
Bottom, left, right, top ................................................................................................... 73
Direction ....................................................................................................................... 73
Display .......................................................................................................................... 73
Float.............................................................................................................................. 73
Position ......................................................................................................................... 73
z-index .......................................................................................................................... 74
propriedade de Interface do Usuário ................................................................................................. 74
cursor............................................................................................................................ 74
height e width ............................................................................................................... 74
opacity .......................................................................................................................... 74
Pseudoclasses...................................................................................................................................... 74
Sintaxe.......................................................................................................................... 75
Prioridade nas declarações para links ......................................................................... 75
Algumas aplicações em CSS3 ............................................................................................................ 75
Aplicando filtros CSS3 (filter) ....................................................................................... 75
Blur () ............................................................................................................................ 76
Brightness () ................................................................................................................. 76
Contrast () .................................................................................................................... 76
Grayscale () .................................................................................................................. 77
 Invert () ......................................................................................................................... 77
Opacity () ...................................................................................................................... 78
Saturate () .................................................................................................................... 78
Sepia () ......................................................................................................................... 79
Hue-rotate () ................................................................................................................. 79
Drop-shadow () ............................................................................................................. 79
Layout multicolunas com CSS3.......................................................................................................... 80
column-count ................................................................................................................ 81
column-width ................................................................................................................ 81
column-gap ................................................................................................................... 82
column-rule ................................................................................................................... 82
Transformações com CSS3 ................................................................................................................. 82
transform ...................................................................................................................... 82
rotate() .......................................................................................................................... 83
translate() ..................................................................................................................... 83
skew() ........................................................................................................................... 83
scale() ........................................................................................................................... 83
transições ..................................................................................................................... 84
transition-property ........................................................................................................ 85
transition-duration ......................................................................................................... 85
transition-timing-function .............................................................................................. 86
transition-delay ............................................................................................................. 86
transition ....................................................................................................................... 86
Gradientes ............................................................................................................................................. 87
linear-gradient .............................................................................................................. 87
radial-gradient .............................................................................................................. 88
inserindo várias imagens de fundo .............................................................................. 89
Referências bibliográficas ............................................................................................ 89

Unidade V: JavaScript ....................................................................................................... 90

Antecedentes da linguagem ......................................................................................... 90
Introdução à JavaScript................................................................................................ 91
Inserção do código JavaScript numa página web ....................................................... 92
Comentários ................................................................................................................. 94
Características da linguagem ....................................................................................... 95
JavaScript versus Java ................................................................................................ 96
Alguns efeitos rápidos com JavaScript ........................................................................ 97
 Variáveis ....................................................................................................................... 98
Nomes de Variáveis ..................................................................................................... 98
Operadores e Expressões............................................................................................ 99
Entrada e Saída................................................................................................................................... 100
window.prompt ........................................................................................................... 100
window.alert ............................................................................................................... 101
comandos de decisão ........................................................................................................................ 101
O comando IF ............................................................................................................. 101
O comando IF-ELSE .................................................................................................. 101
O comando SWITCH.................................................................................................. 102
Algumas funções predefinidas ................................................................................... 102
isNaN(valor) ............................................................................................................... 103
window.confirm(pergunta) .......................................................................................... 103
O comando WHILE .................................................................................................... 103
O comando DO-WHILE .............................................................................................. 103
O comando FOR ........................................................................................................ 104
O comando BREAK.................................................................................................... 105
O comando CONTINUE ............................................................................................. 105
Uso de funções ................................................................................................................................... 105
Declaração e uso de funções ..................................................................................... 106
Funções com parâmetros........................................................................................... 107
Retorno de valores ..................................................................................................... 107
Variáveis locais .......................................................................................................... 108
Usando links para executar funções .......................................................................... 108
Objectos predefinidos ....................................................................................................................... 109
Programação Orientada a Objectos ........................................................................... 110
Propriedades e métodos ............................................................................................ 110
O objecto String .......................................................................................................... 111
O objecto Array .......................................................................................................... 112
Alteração dinâmica do tamanho do array .................................................................. 113
O objecto Math ........................................................................................................... 114
O objecto Date ........................................................................................................... 114
Métodos do objecto Date ........................................................................................... 114
Objectos do navegador .............................................................................................. 115
Hierarquia de objectos ............................................................................................... 116
Eventos....................................................................................................................... 118
Alguns eventos ........................................................................................................... 118
O objecto Navigator .................................................................................................... 119
 Principais propriedades e métodos ............................................................................ 119
O objecto Document ................................................................................................... 120
Principais propriedades e métodos ............................................................................ 120
O objecto Location ..................................................................................................... 121
O objecto History ........................................................................................................ 122
Biblioteca de funções JavaScript ..................................................................................................... 122
eval(string) .................................................................................................................. 122
parseInt(cadeia,base) ................................................................................................. 123
parseFloat(cadeia) ..................................................................................................... 123
escape(caractere) ...................................................................................................... 123
unescape(caractere) .................................................................................................. 123
isNaN(número) ........................................................................................................... 123
Métodos ............................................................................................................................................... 124
Métodos estáticos ...................................................................................................... 124
A declaração this ........................................................................................................ 124
A declaração with ....................................................................................................... 124
Método getElementById ............................................................................................. 124
Método innerHTML..................................................................................................... 125
Formulários ......................................................................................................................................... 126
Propriedades, métodos e eventos dos formulários .................................................... 126
Elementos de um formulário ...................................................................................... 127
Campos de texto ........................................................................................................ 127
Botões ........................................................................................................................ 128
Checkbox ................................................................................................................... 128
Botões de radio .......................................................................................................... 129
Listas de selecção ...................................................................................................... 130
A palavra-chave this ................................................................................................... 131
Crítica de formulários ................................................................................................. 132
Crítica campo a campo .............................................................................................. 133
Imagens ............................................................................................................................................... 133
Características do objecto Image ............................................................................... 133
Propriedades do objecto Image ................................................................................. 134
Criando objectos Image com new .............................................................................. 135
Janelas ................................................................................................................................................ 135
Algumas propriedades e métodos de Window .......................................................... 135
Reposicionando, redimensionando e imprimindo janelas .......................................... 136
Janelas secundárias ................................................................................................... 137
Abrindo uma janela sem configuração ....................................................................... 138
 Abrindo uma janela com características específicas ................................................. 138
Temporização ..................................................................................................................................... 139
Frames ................................................................................................................................................. 139
Referências bibliográficas .......................................................................................... 140
Lista de abreviaturas e siglas

ARPA Advanced Research Projects Agency

ARPAnet Advanced Research Projects Agency Network
CSS Cascading Style Sheet
DNS Domain Name System (Sistema de Nomes de Domínios)
EUA Estados Unidos da América
FTP File Transfer Protocol (Protocolo de Transferência de Arquivos)
HTML HyperText Markup Language
HTTP HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto)
HTTPS HyperText Transfer Protocol Secure (Protocolo de Transferência de Hipertexto Seguro)
IMAP Internet Message Access Protocol
MILnet Military Network
MIT Massachusetts Institute of Technology
NCP Network Control Protocol
NSF National Science Foundation
POP Post Office Protocol (Protocolo dos correios)
SMTP Simple Mail Transfer Protocol (Protocolo Simples de transferência de Correio)
TCP/IP Transmission Control Protocol/Internet Protocol
Apresentação

SEJA BEM-VINDO À DISCIPLINA PROGRAMAÇÃO WEB!

Este material didáctico corresponde à disciplina de Programação Web. Ele foi elaborado visando
a uma aprendizagem autónoma; os conteúdos foram cuidadosamente selecionados, e a
linguagem utilizada facilitará seus estudos.

Durante alguns anos em que o autor ensina programação web, observou a grande dificuldade
dos estudantes em assimilar certos conteúdos e em adquirir habilidades que lhes permitam
conhecer a linguagem HTML; desenvolver páginas web e entender o funcionamento lógico da
Internet.

Lembre-se aprender qualquer nova tecnologia exige dedicação, concentração e muita prática.
Por isso, ao estudar cada unidade desta sebenta, reproduza a explicação na prática. Mesmo que
ache o exercício simples e entenda perfeitamente sem praticar, não deixe de escrever o código
– não faça copy/past – e faça o teste do código, pois a repetição ajudará bastante a fixar a sintaxe
da linguagem e os conceitos realmente importantes.

Pois, é praticamente impossível escrever um livro realmente completo sobre as tecnologias (html,
css, javascript, php entre outras), o que torna a elaboração desta sebenta um grande desafio. Para
começar, este é um livro escrito em uma linguagem extremamente simples e acessível, podendo
ser lido por qualquer pessoa, desde o simples utilizador.

O currículo é flexível, visto que, tem as horas de contacto e de estudo independente. Porém,
quando falo em horas de estudo independente, não quer dizer que o estudante estará sozinho
nos seus estudos; lembre-se de que poderá contar, sempre que precisar, com a ajuda do docente
da disciplina.

Desejo que tenha muito sucesso nessa disciplina e em todo o curso.

Bons estudos!
Objectivo e organização desta sebenta

Ao escrever esta sebenta, tive a intenção de apresentar a linguagem HTML àqueles que estão
iniciando o estudo dessa linguagem que é a linguagem de marcação que destina-se a estruturar
uma página web.

Para vencer esse desafio, é necessário que o estudante tenha um computador pessoal para
praticar. É sabido a importância que o estudo aprofundado de um assunto representa para o
conhecimento, mas sabemos também que é necessário vincular a teoria à prática de forma sutil
e profunda.

A sebenta está dividida em nove partes (unidades temáticas): A unidade I apresenta uma breve
introdução à Internet. A unidade II apresenta os conceitos básicos necessários sobre a
linguagem HTML. A unidade III são apresentadas as <tags> HTML versão 4 e seus atributos. A
unidade IV aborda de maneira bastante simplificada as folhas de estilo CSS (Cascading Style
Sheet). A unidade V trata dos conceitos relacionados ao JavaScript, são estudados os recursos
para entrada e saída dos dados e o uso de eventos do mouse. Na unidade VI são abordados
alguns recursos que facilitam a animação na web. A unidade VII aborda de maneira introdutória
a linguagem PHP. A unidade VIII aborda a hospedagem de páginas web. A unidade IX faz-se a
configuração do servidor Web e a configuração do servidor DNS.

Por último, no apêndice, são apresentados exemplos práticos abordados em todas as unidades.

“Onde devo começar, por favor vossa Majestade?”

“Comece do começo, e vá até chegar ao fim:
então pare.” – Disse bravo o rei

Tudo precisa começar de algum lugar, então nossa jornada irá começar com foco em códigos
<tag> na linguagem HTML. Posso imaginar que muitos devem estar se perguntando: Por que um
livro (ou se quiser, sebenta) de linguagem de programação web, numa época onde as
ferramentas de programação visual (WYSIWYG – What You See Is What You Get)1 estão por toda
parte e, aparentemente, o desenvolvedor/programador pouco tem a fazer?

1 O que você vê é o que você obtém.

Sem dúvida alguma, os benefícios das ferramentas visuais como Dreamweaver, Web Acappella,
Web Page Maker, etc. são infinitos comparados com a programação convencional. No entanto,
em qualquer software que o desenvolvedor/programador use, com certeza, existe programação
a qual as ferramentas visuais não podem gerar pois não adivinham o que se passa pela mente
de um programador. E todo programa decente, tem que haver um valor agregado pelo
programador.

Eu penso que é útil e interessante entender como nós chegamos onde estamos, assim, esta
sebenta procura de maneira bastante simples abordar as tecnologias web (HTML, CSS,
JavaScript, PHP) que, por vezes, parecem muito complexas ao desenvolvedor/programador
iniciante; todos os assuntos são explicados e exemplificados por meio de soluções práticas.

Espero, com esta sebenta, poder contribuir para o seu aprendizado…

Bruno Alfredo Gamito

 Unidade 1
Introdução à Internet
Unidade I Introdução à Internet
1
A complexa história da Internet envolve muitos aspectos – tecnológicos, organizacionais, sociais
e políticos. A influência da Internet mostra-se não só nos campos técnicos das comunicações via
computadores, mas também, em toda a sociedade, na medida em que usamos cada vez mais
serviços online para adquirir informação, fazer compras e trabalhar em comunidade.

Primórdios das redes de comunicação

No dia de março de 1876, Alexander Graham Bell muniu-se de um aparato composto de um
diafragma ligado a um fio, cujo final estava mergulhado em uma vasilha contendo uma solução
ácida e um contacto eléctrico fixado no mesmo recipiente. O primeiro telefonema teve como
interlocutor seu assistente técnico, Thomas Watson, que ouviu pelo rudimentar aparelho as
palavras do inventor do telefone: “Senhor Watson, venha cá! Preciso do senhor!”.

Depois de melhorar sua invenção com o uso de electromagnetos e de um diafragma desenvolvido

depois de muitos meses de trabalho – de início, aliás, o telefone foi registado nos Estados Unidos
e na Inglaterra como um aperfeiçoamento do telégrafo -, Bell inspirou-se nos sistemas de
distribuição de gás e de água para prever o potencial das redes de cabos para ligação física entre
os aparelhos de telefonia. Por sua vez, o telégrafo já existia na ocasião, mas adoptou outro padrão
ao ser desenvolvido como um sistema de serviço ponto a ponto, com a mensagem final sendo
entregue por um mensageiro. A partir de 1845, Morse e seus sócios iniciaram a construção de
redes de linhas e de estacoes de telégrafos, com unidades próprias ou licenciando outros
empreendedores. A posterior rivalidade comercial com os seus parceiros convenceu Morse de
que o telégrafo devia seguir o mesmo modelo de monopólio dos serviços postais.

Capaz de levar mensagens através de continentes e mares a 25 mil quilómetros por segundo, o
telégrafo mereceu uma expressão bíblica do seu próprio inventor, ao inaugurar a primeira linha
telegráfica entre Washington e Baltimore: “O que Deus tem feito”. Prático e simples, bastava
pressionar uma tecla na linguagem de pontos e traços para eles serem automaticamente
marcados no outro lado da linha. Assim, o aparelho e o código de Morse tornaram-se padrões
internacionais.
O rádio foi o primeiro aparato electrónico de comunicação de massa a prescindir de ligação física,
2
já que sua transmissão se dá por ondas electromagnéticas. A KDKA de Pittsburgh – emissora
pioneira de rádio comercial norte-americana, de propriedade da Westinghouse, fabricante de
aparelhos electrónicos – iniciou suas transmissões no dia 2 de novembro de 1920.

Como é sabido, que o advento da televisão modificou profundamente a natureza do rádio. Mas,
por outro lado, foi a indústria do rádio que criou as condições básicas para a implantação e o
posterior desenvolvimento da televisão.

Satélites de comunicações
Os satélites artificiais têm uso científico, militar e de comunicação. No dia 4 de outubro de 1957,
a antiga União das Repúblicas Socialistas Soviéticas (URSS) lança o primeiro satélite artificial,
Sputnik I. Os Estados Unidos colocaram seu primeiro satélite artificial em órbita no dia 31 de
janeiro de 1958, descobrindo os cinturões de radiação em torno da Terra.

Os satélites de comunicação são usados especialmente para a transmissão de conversação

telefónica de longa distância e móvel, de imagens de televisão e de dados digitais, reflectindo ou
retransmitindo ondas de radiofrequência.

Sem dúvida, os satélites de comunicação permitiram o desenvolvimento tecnológico das

telecomunicações com uma infraestrutura que ampliou de maneira considerável as possibilidades
de implantação de redes de comunicações de alcance regional, nacional e mundial, viabilizando
mais tarde a difusão de dados em tempo real.

…Antecedentes da Internet (uma breve história)

A Internet foi um fruto das pesquisas militares feitas nos EUA durante a chamada Guerra Fria.
Na década de 1960, quando dois blocos antagónicos exerciam enorme controle e influência no
mundo, qualquer mecanismo, qualquer inovação, qualquer ferramenta nova poderia contribuir
nessa disputa entre a União Soviética e pelos Estados Unidos da América.

As duas superpotências compreendiam a eficácia dos meios de comunicação. Como o governo

dos Estados Unidos temia um ataque russo às suas bases militares, tornando os EUA
vulneráveis. Então, foi idealizado um modelo de troca de dados que permitisse a descentralização
3
desses dados. Assim, se o Pentágono fosse atingindo, as informações armazenadas ali não
estariam perdidas. Era preciso, portanto, criar uma rede que ligasse os diferentes “nós” de forma
redundante. Essa rede seria a ARPANET, criada pela Advanced Research Projects Agency.

Em 1962, Joseph Carl Robnett Licklider, do MIT, já falava na criação de uma rede intergaláctica
de computadores, não só, como também, foi designado para liderar as pesquisas desenvolvidas
na ARPA com o objectivo de aperfeiçoar o uso militar da tecnologia de computadores. No estado
actual, uma única bomba nuclear do inimigo poderia eliminar completamente qualquer forma de
comando ou controle entre o Pentágono e as instalações militares norte-americanas espalhadas
pelo mundo. Considerado um visionário, Licklider previu as reais possibilidades de uma simbiose
entre o homem e a máquina, na qual o computador funcionaria como um parceiro para a solução
de problemas. Sem essa parceria, acreditava ele, o homem não poderia, durante uma eventual
guerra, estimar rapidamente as alternativas de acção em resposta a um ataque inimigo. Da
mesma maneira, o computador sozinho não estaria apto a tomar decisões importantes e
verdadeiramente cruciais, Hafner e Lyon (1998: 31).

Na metade da década de 60, os mainframes (computadores de grande porte) dentro de

organizações de pesquisa eram dispositivos de processamento isolados. Computadores de
diferentes marcas eram incapazes de se comunicar. A ARPA agência do departamento de defesa
dos Estados Unidos estava interessada em encontrar um modo de conectar os computadores de
tal modo que os pesquisadores dela pudessem partilhar pesquisas, reduzindo custos e evitando
a duplicação de esforços.

Em 1967, num encontro da ACM (Association Computing Machinery) e o grupo do ARPA

apresentaram as ideias para a ARPANET, uma rede pequena de computadores. A ideia central
era de que cada computador (host), não necessariamente do mesmo fabricante, pudesse se
conectar a um computador específico, denominado Interface Message Processor (IMP). Os IMPs,
por sua vez, tinham a capacidade de se conectar e de se comunicar entre si, assim como
estabelecer comunicação com o computador que pedia acesso à rede.

Em 1969 a ARPAnet tornou-se uma realidade, foram fechados quatro nós, na University of
Califórnia (UCLA) em Los Angeles, na University of Califórnia em Santa Barbara (UCSB), em
Stanford Research Institute (SRI) e na University of Utah via IMPs para formar uma rede. Um
software baptizado de Network Control Protocol (NCP) controlou a comunicação entre os
4
computadores.
Em 1972, Vint Cerf e Bob Kahn, ambos haviam feito parte do grupo da ARPANET, colaboraram
entre si no conhecido Internetting Project. Num artigo de 1973, eles estabeleceram protocolos
muito bem estruturados para promover entrega de pacotes de dados de uma ponta a outra numa
rede. Este artigo sobre o protocolo de controlo de transmissão (Transmission Control Protocol -
TCP) incluía conceitos como encapsulamento, o datagrama e as funções de um gateway.

Pouco tempo depois, autoridades da área da computação decidiram dividir o TCP em dois
protocolos: o Transmission Control Protocol (TCP) e o Internet(working) Protocol (IP). Ao IP cabia
descobrir o caminho adequado entre o remetente e o destinatário e enviar os pacotes, ou seja,
seria o responsável pelo roteamento do datagrama, enquanto que, o TCP assumiria as funções
de alto nível como segmentação, reagrupamento e detecção de erros, ou em poucas palavras,
caboa ao TCP dividir mensagens em pacotes de um lado e recompô-los do outro. O protocolo de
Internet(working) tornou-se conhecido como TCP/IP.

A ARPAnet adoptou progressivamente o TCP/IP, que funcionou em paralelo com o NCP, até o
dia 1 de janeiro de 1983, quando cada máquina conectada com a ARPAnet teve de passar a usar
o novo conjunto de protocolos TCP/IP.

Libertando-se de suas origens militares, a ARPAnet se dividiu, em 1983, na Milnet, para fins
militares, e na nova ARPAnet, uma rede com propósitos de pesquisa, que começa
progressivamente a ser chamada de Internet. O crescimento desordenado da ARPAnet, que
contava com 562 hosts, tornou a solução obsoleta em pouco tempo. No ano seguinte foi criada
nova solução para o problema com a introdução do DNS (Domain Name System), um serviço e
protocolo que cuida da conversão de nomes da Internet em seus números correspondentes, de
forma automatizada e padronizada.

Novo e considerável incremento foi verificado em 1988 com a criação do Internet Relay Chat
(IRC), desenvolvido por Jarkko Oikarinen. O IRC é um novo modelo cliente-servidor que permite
a diversos utilizadores “conversarem” online, partilhando um mesmo canal virtual de
comunicação. Outro acontecimento significativo, no dia 2 de novembro de 1988, foi a constatação
da existência, em vários computadores da rede, de um programa capaz de replicar e travar as
máquinas por onde ele passava (criado por Robert Morris Jr. – um estudante da Universidade de
Cornell – o verme da Internet, como é chamado o programa), tinha o objectivo de demonstrar a
5
vulnerabilidade dos computadores da rede, sem provocar nenhum dano.

Internet, a rede mundial

Em 1990, a Internet passou a contar com o World (http://www.world.std.com), o primeiro provedor
de acesso comercial do mundo, permitindo que utilizadores comuns alcancem a grande rede via
telefone.

O grande volume de dados disponíveis nos 617 mil computadores ligados na Internet torna muito
difícil para o utilizador encontrar e recuperar as informações desejadas. Peter Deutsch, Alan
Emtage e Bill Heelan, da Universidade McGill, lançam o Archie, ferramenta cliente-servidor que
permite a procura de arquivos e informações em redes de acesso público.

Em 1991, Brewster Kahle, da Thinking Machines Corporation, inventou o Wide Area Information
Server (WAIS), um serviço que permite a procura de informações em bases de dados distribuídas,
cliente/servidor, mediante uma interface bastante simples. Sua principal peculiaridade é a
conversão automática de formatos para visualização remota de documentos e dados.

Por sua vez, a Universidade de Minnesota disponibiliza o Gopher, um sistema distribuído para
busca e recuperação de documentos, que combina recursos de navegação por meio de
colecções de documentos e bases de dados indexadas, por meio de menus hierárquicos. O
sistema foi aperfeiçoado no ano seguinte pela Universidade de Nevada, que lança a ferramenta
chamada Very Easy Rodent-Oriented Net-wide Index to Computerized Archives (Veronica), para
busca simultânea em vários servidores Gopher.

A questão da privacidade na rede era uma preocupação geral já em 1991, quando Philip
Zimmerman torna público o Pretty Good Privacy (PGP), programa utilitário para a codificação de
mensagens de texto, que continua sendo o meio mais simples e seguro de se obter privacidade
na rede. Uma mensagem assim enviada é inquebrável e só o seu destinatário pode descodifica-
la, dando para isso uma chave que só ele conhece.
Web – a teia de alcance mundial
6
Ainda em 1991, a grande novidade da Internet foi a invenção da World Wide Web (WWW), pelo
engenheiro sir Tim Berners-Lee no Laboratório Europeu de Física de Partículas (CERN). Um dos
mais importantes centros para pesquisas avançadas em física nuclear e de partículas, localizado
em Genebra, Suíça, a sigla CERN relaciona-se ao seu nome anterior, Conseil Européene pour la
Recherche Nucléaire.

A Web é provavelmente a parte mais importante da Internet e, para muitas pessoas, a única parte
que elas usam, um sinónimo mesmo de Internet. Mas Web é fundamentalmente um modo de
organização da informação e dos arquivos na rede. O método extremamente simples e eficiente
do sistema de hipertexto distribuído, baseado no modelo cliente-servidor, tem como principais
padrões o protocolo de comunicação HTTP, a linguagem de descrição (marcação e/ou
formatação) de páginas HTML e o método de identificação de recursos (URI e/ou URL).

O HyperText Markup Language (HTML) é a linguagem-padrão para escrever páginas de

documentos Web, que contenham informação nos mais variados formatos: texto, som, imagens
e animação. É fácil de aprender e usar, possibilitando preparar documentos com gráficos e links
para outros documentos para visualização em sistemas que utilizam Web.

O Hypertext Transport Protocol (HTTP) é o protocolo que define como dois programas/servidores
devem interagir, de maneira que transfiram entre eles comandos ou informação relativos ao
WWW. O protocolo HTTP possibilita que os autores de hipertextos incluam comandos que
permitem “saltos” para recursos e para outros documentos disponíveis em sistemas remotos, de
forma transparente para o utilizador. Por sua vez, o URL (Uniform Resource Locator) é o
localizador que permite identificar e aceder um serviço na Web.

Outro facto importante em 1991 foi a suspensão, pela NSF, da proibição ao uso comercial da
Internet, abrindo caminho para a era do comércio electrónico. Outro sucesso estrondoso na
Internet é o programa Mosaic, um cliente para a Web que funciona em modo gráfico e é capaz
de mostrar imagens. Desenvolvido por Marc Andreessen, estudante do Centro Nacional para
Aplicações de Supercomputação da Universidade de Illinois, em Urbana-Champaign, o Mosaic
possibilita o acesso aos recursos de multimédia da Internet por simples cliques – em um ano,
mais de um milhão de cópias do Mosaic estavam em uso.
O que é a Internet
7
O termo Internet foi cunhado com base na expressão inglesa “INTERaction or INTERconnection
between Computer NETworks”. Assim, a Internet é a rede das redes, o conjunto das centenas de
redes de computadores conectados em diversos países para partilhar a informação e, em
situações especiais, também recursos computacionais. As conexões entre elas empregam
diversas tecnologias, como linhas telefónicas comuns, linhas de transmissão de dados
dedicadas, satélites, linhas de micro-ondas e cabos de fibra óptica.

A Internet como nome genérico, designa o conjunto de redes, os meios de transmissão e

comutação, roteadores, equipamentos e protocolos necessários à comunicação entre
computadores, bem como o “software” e os dados contidos nesses computadores.

Em outras palavras, a Internet é uma rede mundial de computadores interligados de forma

integrada por meio da adopção de um protocolo de rede padrão – o TCP/IP. É uma rede de redes.

Nenhum governo, empresa ou instituição controla a rede mundial. Os padrões e as normas da

Internet são organicamente estabelecidos pela comunidade.

Funcionamento da Internet
Fisicamente, a Internet equivale a uma estrada da informação – mais propriamente uma
“autoestrada da informação”, um mecanismo de transporte que conduz os dados por um caminho
de milhões de computadores interligados. Os pacotes de informação viajam então por meio das
redes que compõem a Internet, seguindo um caminho que passa por muitos níveis diferentes de
redes em vários tipos de linhas de comunicação.

Uma grande variedade de dispositivos processam esses pacotes para direcioná-los em seu
caminho. Repetidores, hubs, pontes e portas de comunicação são empregados para transmitir
dados entre as redes. Os repetidores apenas amplificam ou restauram o fluxo de dados
aumentando a distância que eles podem percorrer. Os hubs unem grupos de computadores e
permitem tomar atalhos para “conversarem” entre si. As pontes (bridges) conectam as redes
locais (LANs) e permitem que os dados endereçados a outra rede passem, enquanto bloqueiam
os dados locais. As portas de comunicação (gateways) funcionam de maneira similar à das
8
pontes, mas também traduzem os dados entre um tipo de rede e outro.

De maneira bem simples, pode-se explicar o funcionamento da Internet da seguinte forma: os

provedores de backbones1 vendem o acesso à Internet para os provedores de acesso2; esses,
por sua vez, negociam o acesso ao backbone, e consequentemente à Internet, com o consumidor
final que pode ser uma instituição, empresa, escola, universidade, loja ou pessoa física.

Protocolos da Internet
Os pacotes de informações enviados pelos computadores da Internet contêm porções de dados
e informações especiais de controle e endereçamento necessários para levar os pacotes aos
seus destinos e remontá-los na sua forma original. Essa tarefa é realizada por um protocolo
especial – Transmission Control Protocol (TCP) -, que define as regras para os procedimentos
de comunicação em uma rede. Por sua vez, o Internet Protocol (IP) cumpre a função de descobrir
o caminho adequado entre o remetente e o destinatário e enviar os pacotes.

Esses dois protocolos mais comuns combinam-se para formar o TCP/IP, a linguagem universal
da Internet, que pode ser implementada em qualquer tipo de computador, pois é independente
do hardware.

Em redes de computadores ocorre a comunicação entre entidades em diferentes sistemas.

Entende-se por entidade qualquer dispositivo capaz de enviar ou receber informação. Entretanto,
duas entidades não podem simplesmente trocar um fluxo de dados e esperar que a informação
seja compreendida. Para que a comunicação seja estabelecida, as entidades devem concordar
acerca do protocolo utilizado.

1 O backbone, ou “espinha dorsal”, representa o nível máximo de hierarquia de uma rede de computadores. Consiste nas estruturas
físicas pelas quais trafega a quase totalidade dos dados transmitidos através da Internet, e é usualmente composto de múltiplos cabos
de fibra óptica de alta velocidade. Em poucas palavras, o backbone é a espinha dorsal ou o tronco principal, de uma rede de acesso
à Internet. A ele (backbone), empresas privadas ligarão seus computadores e venderão aos interessados, por uma taxa mensal, a
conexão com a Internet”.

O provedor de backbone é a pessoa jurídica que efectivamente detém as “estruturas de rede capazes de manipular grandes volumes
de informações, constituídas basicamente por roteadores de tráfego interligados por circuitos de alta velocidade”.

2O provedor de acesso é a pessoa jurídica fornecedora de serviços que possibilitem o acesso de seus consumidores à Internet.
Normalmente, essas empresas dispõem de uma conexão a um backbone ou operam sua própria infraestrutura para conexão directa.
Um protocolo é um conjunto de regras que auxiliam e/ou coordenam a comunicação de dados.
9
Um protocolo define o que é comunicado, de que forma é comunicado e quando será
comunicado. Os elementos chave de um protocolo são a sintaxe, a semântica e a temporização
(timing).

A sintaxe refere-se à estrutura ou ao formato dos dados e à ordem segundo a qual os dados são
apresentados. A semântica revela qual o significado de cada conjunto ou secção de bits. A
temporização está ligada a duas características: quando os dados devem ser enviados e quão
rápido nós podemos enviá-los.

Alguns protocolos da Internet

Os protocolos da Internet formam o grupo de protocolos de comunicação que implementam a
pilha de protocolos sobre a qual a Internet e a maioria das redes funcionam. Não é pretensão
desta sebenta, esgotar a lista dos protocolos. O autor irá abordar os seguintes protocolos: IP,
TCP, TCP/IP, HTTP, HTTPS, FTP, SMTP, POP3, SSH, WAP, IMAP, DHCP.

O protocolo IP, é o protocolo pelo qual os dados são enviados a partir de um computador para
outro na Internet. É responsável pelo envio e endereçamentos dos pacotes TCP. O protocolo
TCP/IP é a forma padronizada de comunicação para os computadores na Internet. O TCP faz a
divisão dos dados que será enviada em segmentos de dados. O HTTP é usado para o acesso à
WWW como protocolo de cliente/servidor. O protocolo FTP é utilizado para transferências de
arquivos pela Internet. Este protocolo permite apenas o envio e o recebimento dos arquivos, no
entanto para a leitura serão necessários outros programas.

O SSL é um protocolo de segurança que permite a confirmação da identidade de um servidor,

verificando o nível de confiança. O protocolo ICMP autoriza a criação de mensagens relativas ao
IP, mensagens de erro e pacotes de teste. O SMTP é usado para envios de mensagens em rede
funcionando como roteador do correio electrónico. O protocolo IMAP permite a manipulação de
caixas postais remotas como se fossem locais, permitindo a organização da forma que melhor
convier.

O protocolo POP é usado para receber mensagens de email. Permitem apenas o acesso a uma
caixa de email, já o IMAP permite o acesso a várias.
Alguns serviços da Internet
10
Os principais serviços da Internet são o email (correio electrónico), sessões remotas (telnet),
transferência de ficheiros (ftp), grupos de discussão (news), World Wide Web (WWW). Porém,
devido às potencialidades gráficas a Web é claramente a mais popular.

A Web é um sistema de informação cliente/servidor em hipertexto distribuído na Internet. Na

World Wide Web, tudo (documentos, menus, gráficos, …) são objectos em hipertexto no formato
HTML. O programa cliente é chamado browser, sendo executado no programa do utilizador
operações de navegação.

Web – sistema de informações de Hipertexto

Desde que Vannevar Bush, em seu célebre artigo As We May Think, concebeu e apresentou o
conceito de hipertexto – a ideia para um sistema de armazenamento de informações o qual ele
denominou MEMEX -, inúmeros trabalhos têm se debruçado sobre o tema. Tim Berners-Lee, ao
criar o protocolo de comunicação HTTP – HyperText Transfer Protocol -, desencadeou um
explosivo processo de disseminação do conceito de hipertexto, que libertou-se do domínio do
ambiente académico e ganhou aplicações pelo mundo afora na World Wide Web.

O hipertexto permite que o usuário leia e navegue entre texto e informações visuais de uma forma
não-linear, baseado no que deseja saber em seguida. A ideia por trás do hipertexto é que em vez
de ler o texto em uma estrutura rígida e linear (como em um livro), o usuário pode passar
facilmente de um ponto a outro. Em suma, o usuário poderá obter mais informações, voltar, ir
para outros tópicos e navegar pelo texto com base no que lhe interessa.

A Web é gráfica e fácil de navegar, porém, no início, usar a Internet envolvia conexões simples
e informações na forma somente de texto. O usuário tinha de navegar nos vários serviços da
Internet usando comandos específicos e ferramentas arcaicas. Depois, veio o primeiro navegador
da Web gráfico – o Mosaic -, que cimentou o caminho para a Web para exibir tanto texto quanto
figuras em cores na mesma página – essa é uma das melhores partes da Web -, e discutivelmente
o motivo pelo qual ela se tornou tão popular.

A Internet é uma ferramenta de comunicação bastante distinta dos meios de comunicação

tradicionais – televisão, rádio, cinema, jornal e revista -. Cada um dos aspectos críticos que
 3
diferenciam a rede mundial dessas medias é a não-linearidade , fisiologia , instantaneidade, 4
11
custos de produção e de veiculação, interactividade5, usabilidade e acessibilidade.

Navegadores da Web
Um navegador da Web, é um programa que usamos para visualizar páginas e navegar na Web.
O trabalho de qualquer navegador é dividido em duas partes. Partindo de um ponteiro para um
detalhe de informação na rede (URL), o navegador precisa ser capaz de aceder tal informação
ou operar de tal forma com base nos conteúdos daquele ponteiro. Para documentos da Web em
hipertexto, o navegador deverá ser capaz de comunicar-se com o servidor da Web. Uma das
tarefas mais frequentes de um navegador, contudo, é lidar com a formatação e a exibição de
documentos da Web. O navegador carrega – ou melhor interpreta – as informações que obtém
do servidor da Web e as formata e exibe para o seu sistema. Porém, diferentes navegadores
podem formatar e exibir o mesmo arquivo de forma diferente, dependendo das capacidades do
sistema e das opções de layout padrão para o próprio navegador.

A popularização da Web trouxe interesses comerciais. Marc Andreessen deixou a NCSA e junto
com Jim Clark fundou a Mosaic Communications, depois renomeada para Netscape
Communications Corporation, e começou a trabalhar no que viria a ser o Netscape Navigator. A
versão 1.0 do software foi lançada em dezembro de 1994.

A Spyglass Inc. (o braço comercial da NCSA) licenciou sua tecnologia do Mosaic para a Microsoft
formar a base do Internet Explorer. A versão 1.0 foi lançada em agosto de 1995.

3A não-linearidade - As diferenças entre o material que é impresso em papel e o que é visualizado na tela do monitor
de um computador são grandes, afectando profundamente o modo como as pessoas absorvem e reagem às
mensagens que se tenta transmitir. O papel é linear: um livro, por exemplo, é lido a partir do canto superior esquerdo,
palavra por palavra. Mesmo se o livro tiver diversas páginas, o leitor começa pela primeira, pois não faz sentido
nenhuma outra ordem de leitura. Enquanto que a informação alojada na Web é não-linear. Nela, o hipertexto permite
que o usuário se movimente mediante as estruturas de informação da página web sem uma sequência predeterminada,
mas sim saltando entre os vários tipos de dados de que necessita. A principal característica do hipertexto é a sua
maneira natural de processar informação, funcionando de uma maneira parecida com a mente humana, que trabalha
por associações de ideias e não recebe a informação linearmente.
4A tela do computador afecta a visão humana de maneira diferente do suporte papel. Uma das reacções mais óbvias
ao se ler à luz do monitor é que os nossos olhos piscam menos do que as 16 vezes por minuto com a vista relaxada,
o que pode levar a uma maior incidência de fadiga visual (ardência, visão embaçada ou embaralhada) e de dores de
cabeça.
5A Web é inerentemente interactiva. A interactividade é a capacidade de “responder” ao servidor da Web, ou seja, o acto de selecionar
um link e passar para outra página da Web para ir a algum lugar na Web é uma forma de interactividade.
Em uma rápida escalada, a Netscape e a Microsoft tentaram cada qual obter uma margem
12
competitiva em termos de recursos suportados, a fim de atrair desenvolvedores. Isto ficou
reconhecida como a “guerra dos navegadores”. A Opera manteve uma pequena, mas constante
presença durante este período, e tentou inovar e suportar os padrões web dentro do possível
naqueles tempos.

Durante a guerra dos navegadores (aproximadamente de 1995 a 1999), a Microsoft e Netscape

estiveram focadas em implementar novas funções em vez de consertar os problemas com as
funções já suportadas, e adicionaram funções proprietárias, criando funções que competiam
directamente com funções existentes no outro navegador, mas implementadas de uma forma
incompatível.

A esta altura, os desenvolvedores eram forçados a lidar com o crescente aumento do nível de
confusão enquanto tentavam criar páginas web, às vezes chegando ao ponto de construir duas
páginas diferentes para os navegadores principais, e outras vezes escolhendo suportar apenas
um navegador, e bloqueando os outros de usarem suas páginas. Esta era uma maneira terrível
de trabalhar, e o recuo dos desenvolvedores não foi muito longe.

Em 1994, Tim Berners-Lee fundou o World Wide Web Consortium (W3C), no Instituto de
Tecnologia de Massachusetts, com suporte do CERN, DARPA (como foi renomeada a ARPA) e
da Comissão Europeia. A visão da W3C era de padronizar os protocolos e tecnologias utilizadas
para criar uma web de modo que o conteúdo possa ser acedido largamente pela população
mundial tanto quanto o possível.

Alguns comandos do command prompt úteis

Para testar os recursos – ou seja os comandos -, devemos abrir o Prompt de Comando (fica no
menu iniciar  dentro da pasta acessórios). É possível também digitar o termo na pesquisa do
Windows e abrir a janela do Prompt rapidamente, ou também, para abrir o “executar (run)”
simplesmente pressionamos as teclas “Windows” + “R”.

Comando Descrição/Sintaxe
Revela as configurações de IP. Conseguimos obter detalhes sobre o endereço IPv4,
ipconfig máscara da sub-rede, gateway, DNS, IPv6.
 ipconfig/flushdns – Informa ao sistema que o endereço foi modificado, ou seja, quando
13
mudamos o endereço DNS mas a mudança não ocorre de imediato (o Windows tem um
tempo para efectuar essa alteração).

ipconfig/all – exibe toda a configuração da rede, inclusive os servidores DNS, WINS,

DHCP, etc…

ipconfig/renew [placa] – reconfigura o DHCP de todas as placas (se uma placa não é
especificada) ou de uma placa especifica com o parâmetro [placa].

ipconfig/release [placa] – envia uma mensagem DHCPRELEASE ao servidor. Este

parâmetro é configurado de modo a obter automaticamente um endereço IP.

ipconfig/displaydns – exibe o cache de resolução do cliente DNS, que inclui as entradas

pré-carregadas. O serviço de DNS utiliza estas informações para resolver rapidamente
os nomes frequentemente solicitados, antes de “interrogar” seus servidores DNS
configurados.

ipconfig/registerdns – actualiza todas barras DHCP e reescreve os nomes DNS.

Testa a conexão com um endereço IP, ou quando há algum problema na conexão ou com
o site, o usuário terá perda total de pacotes e saberá que algo deve ser feito para resolver
a situação. Às vezes, devemos trocar o DNS e conferir se a conexão está devidamente
configurada.
ping ping -t [IP ou host] – permite fazer pings contínuos até o usuário pressionar CRTL+C

ping -l [IP ou host] – este comando é útil para gerar uma carga de rede, que especifique
o tamanho do pacote com a opção -l e o tamanho do pacote em octetos.

Exibe todos os endereços IP intermediários pelos quais passa o pacote entre a máquina
local e o endereço IP específico. Este comando é útil se o comando ping não tiver
tracert resposta, para estabelecer qual o nível de falha da conexão. O último rastreado na rota é
a página que o usuário quer visitar.

Exibe o estado da pilha TCP/IP na máquina local.

netstat -a – exibe todas as conexões e portas de escutas (as conexões do lado do
servidor são normalmente inibidas).

netstat netstat -e – exibe as estatísticas Ethernet e pode ser combinada com a opção -s.

netstat -n – exibe os endereços e os números de portas sob forma numérica.

netstat -an netstat -p proto netstat -s netstat -abnov

hostname Exibe o nome do computador
Cliente de download de arquivos.
ftp >ftp >open >ftp. >dir >quote user ftp >quote cwd~root >quote user pass >dir

nslookup Envia solicitações DNS para um servidor DNS por escolha.

telnet Permite aceder, no modo terminal (tela passiva) um computador (host) distante.
sfc/scannow Efectua uma “varredura” nos arquivos do sistema procurando erros e itens corrompidos.
Este comando possibilita conhecer quais recursos do Windows foram inicializados no
net start sistema.
O protocolo ARP (Address Resolution Protocol) estabelece uma ligação entre o endereço
arp físico (MAC Address) da placa de rede e o endereço lógico (endereço IP). A placa de rede
 14
de um computador contém uma tabela onde faz a ligação entre os endereços físicos e
lógicos dos computadores presentes na rede.

Quando um computador quer comunicar com o outro, vai verificar nessa tabela se o
computador está presente na rede. Se estiver, envia os dados e o tráfego na rede é
diminuído, caso contrário envia um sinal designado por pedido ARP para determinar o
seu endereço.

arp -a (mostra todas as entradas ARP correntes lidas da tabela de um arquivo);

arp -d (apaga uma entrada para o host chamado – esta opção só pode ser usada pelo
super user)

Referências bibliográficas

1. FOROUZAN, Behrouz A. Comunicação de dados e redes de computadores. Tradução:

Glayson Eduardo de Figueredo. 3ª ed. Porto Alegre: Bookman, 2006.

2. KUROSE, James F.; ROSS, Keith W. Redes de Computadores e a Internet: Uma

abordagem top-down. 3ª ed. Tradução: Arlete Simille Marques; revisão técnica Wagner Luiz
Zucchi. São Paulo: Pearson Addison Wesley, 2006.

3. TORRES, Gabriel. Redes de Computadores: Curso Completo. Rio de Janeiro: Axcel

Books, 2001.
 Unidade 2
Linguagem HTML – Conceitos Básicos
Unidade II Linguagem HTML – Conceitos Básicos
15
Web Browser (navegador) é um software que corre num computador (cliente), permitindo
mostrar o conteúdo de uma página (escrita em HTML, por exemplo) que se encontra noutro
computador (servidor). De forma a poder aceder a essa informação é necessário utilizar um
protocolo de transferência de hipertexto, ou seja, HTTP (HyperText Transfer Protocol).

Os navegadores fornecem um conjunto de funcionalidades que permitem aos utilizadores da Web

obter a informação de forma mais fácil possível.

Servidor HTTP funciona de forma semelhante ao serviço FTP (File Transfer Protocol – protocolo
de comunicação usado na Web para operações de transferência de arquivos -). Ambos oferecem
aos seus clientes um sistema de arquivos virtual onde podem localizar recursos (arquivos,
programas, etc.) e transferi-los de um computador para outro. O sistema virtual pode ter uma
hierarquia própria e totalmente diferente do sistema de arquivos real do computador, ao qual está
vinculado. Geralmente, um servidor tem acesso a uma área restrita da máquina e só permite a
visualização dos arquivos lá contidos. O sistema de arquivos virtual usa uma notação diferente
daquela usada pelo sistema real.

Por exemplo, consideremos o seguinte sistema de directórios no Windows:

C:\  C:\Documentos  C:\Documentos\Bruno\  C:\Documentos\Bruno\Web

Suponha que um servidor HTTP foi instalado nesse computador. Na instalação, a máquina é
configurada para administrar um sistema de directórios a partir de um certo directório. Como
demonstrado acima, esse directório é C:\Documentos\Bruno. Para o servidor, isto é, seu
directório raiz. No sistema de directórios virtual, o directório raiz de um servidor é chamado de /
(barra). O sistema de arquivos virtual (a parte que um browser poderá ter acesso) é:

/ (C:\Documentos\Bruno)
/Web (C:\Documentos\Bruno\Web)

Um navegador jamais terá acesso ao directório Windows, por exemplo. A principal função de um
servidor Web é, portanto, administrar um sistema de arquivos e directórios virtual e atender à
requisições dos clientes HTTP (os browsers), que, na maior parte das vezes, enviam comandos
HTTP pedindo que o servidor devolva um ou mais arquivos localizados nesses directórios. Os
16
pedidos são feitos de uma sintaxe especial chamada de URI.

Servidor Web (Web Server) é um software que responde aos requisitos de HTTP do browser.
Deste modo o servidor web é em primeiro lugar um servidor de ficheiros. Porém, na medida em
que executa programas e fornece resultados desses programas também funciona como um
servidor de aplicações. De entre os servidores web são de destacar nomeadamente: Apache, IIS
(Internet Information Services), Xitami, Sun, 4D WebStar, Wampserver, Xampp.

Servidor DNS (DNS Server) é em poucas palavras, grandes bases de dados em servidores
localizados em várias partes no mundo. Quando o usuário digita um endereço em seu navegador,
como www.up.ac.mz, seu computador solicita aos servidores de DNS de seu provedor de Internet
que encontre o endereço IP associado ao referido domínio, caso estes servidores não tenham
esta informação, eles se comunicam com outros que possam ter.

Os domínios são organizados hierarquicamente. Primeiramente temos o servidor raiz (root

server), que pode ser entendido como o principal serviço de DNS e é representado por um ponto
“.” no final do endereço – www.up.ac.mz. -. Se o usuário digitar o endereço exactamente com o
ponto no final, em seu navegador, o programa encontrará a página normalmente. No entanto,
não é necessário incluir este ponto, já que os servidores envolvidos já sabem de sua existência.

Alguns serviços gratuitos de DNS: OpenDNS e Google Public DNS

Quando o usuário contrata um serviço de acesso à Internet, por padrão, passa a utilizar os
servidores de DNS da provedora. O problema é que, muitas vezes, estes servidores podem não
funcionar a contento: a conexão é estabelecida, mas o navegador não consegue encontrar
nenhuma página; o acesso a páginas web pode estar lento porque os serviços de DNS demoram
para responder.

Uma solução para problemas como estes consiste em adoptar serviços de DNS alternativos e
especializados, que são optimizados para oferecer o melhor desempenho possível e são menos
susceptíveis a falhas. Os mais conhecidos são o OpenDNS e, mais recentemente, o Google
Public DNS. Ambos os serviços são gratuitos e, quase sempre, funcionam de maneira bastante
satisfatória.
Para usufruir do OpenDNS, basta utilizar os IP’s do serviço: Primário: 208.67.222.222 /
17
Secundário: 208.67.220.220

O OpenDNS não exige cadastro, mas é possível fazê-lo na página do serviço para poder usufruir
de outros recursos, como bloqueio de domínios e estatísticas de acesso, por exemplo.

O Google Public DNS é outro serviço. Apesar de não oferecer tantos recursos quanto o
OpenDNS, é fortemente focado em segurança e performance, além, é claro, de ser de
responsabilidade de uma das maiores empresas de Internet do mundo. Os seus endereços têm
uma grande vantagem: podem ser decorados mais facilmente. Primário: 8.8.8.8 / Secundário:
8.8.4.4.

Linguagem HTML ou HyperText Markup Language é a linguagem padrão utilizada para o acesso
e exibição de páginas web. As linhas de código HTML são interpretadas pelo browser que mostra
o resultado final ao utilizador. Genericamente, a linguagem HTML é constituída de textos e de
códigos especiais denominados marcas ou tags (etiquetas).

O HTML foi desenvolvido em 1992 por Tim Berners-Lee e Robert Caillau no CERN,
correspondendo a uma implementação de SGML (Standard Generalized Markup Language).
Originalmente o HTML definia estritamente a estrutura lógica de um documento, e não a sua
aparência física. Mas, com a pressão dos utilizadores, as versões posteriores do HTML foram
forçadas a fornecer cada vez mais controlos da aparência do documento.

Os nomes dos elementos, denominados tags, foram escolhidos levando-se em conta o seu
objectivo. Uma tag começa com um sinal de menor e termina com o sinal de maior, por exemplo
<nome da tag>.

Sendo assim, uma tag com o objectivo de marcar um cabeçalho recebeu o nome de head e tem
o formato <head>, já as tags de parágrafo receberam o nome de paragraph com o formato <p>,
e assim por diante.

Documento e Página – Também podemos chamar de documento web, ou simplesmente

documento, é um arquivo completo contendo toda a marcação necessária para ser renderizada
por um dispositivo de usuário. Enquanto documento é o arquivo que contém a marcação, página
18
web ou simplesmente página é o resultado da renderização do documento.

Usuário – É toda pessoa ou software capaz de entender a marcação HTML, ou, em sentido mais
amplo, tudo que seja capaz de usar ou navegar na Internet – os internautas são usuários -.

Dispositivo de usuário – Denomina-se dispositivo de usuário o software (programa), hardware

ou tudo que possa ser utilizado por um usuário para ler ou entender um documento desenvolvido
com linguagem de marcação, ou, em sentido mais amplo, interagir com a Internet. São exemplos
de dispositivo de usuário os navegadores, as impressoras, os leitores de tela, programas
especiais que são capazes de ler em voz alta, como um humano, a marcação HTML, de maneira
que pessoas com restrições visuais e cegas tenham acesso aos conteúdos dos documentos, os
programas conhecidos como robôs de busca capazes de ler as informações gerais sobre um
documento e, assim, catalogar seus conteúdos, como os robôs do Google, que fornecem
informações sobre os sites quando o usuário faz uma busca, entre outros.

Etiqueta (tag) – Todo documento HTML apresenta etiquetas – comandos de formatação da

linguagem -. Elementos1 entre o sinal (menor que) e (maior que), a maioria das etiquetas tem sua
correspondente de fechamento: <etiqueta> … </etiqueta>

Uma <etiqueta> de abertura/início é formada por comandos, atributos e valores. Os atributos

modificam os resultados padrões dos comandos e os valores caracterizam essa mudança.

Hipertextualidade, a escrita em formato de hipertexto se baseia na possibilidade de interconectar

conteúdos por meio de links, ou seja, vínculos previamente estabelecidos, que permitem ao
usuário direcionar a sua leitura para os pontos de seu interesse, além de abstrair informações
complementares que não afectam a compreensão geral do tema.

URI (Uniform Resource Identifier) é uma cadeia de caracteres compacta usada para identificar
ou denominar um recurso na Internet. O principal propósito desta identificação é permitir a
interacção com representações do recurso por intermédio de uma rede, tipicamente a Internet,
usando protocolos específicos.

1 Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento.
URL (Uniform Resource Locator) é o endereço de um recurso (um arquivo, uma impressora),
19
disponível em uma rede, seja a Internet, uma rede corporativa ou uma Intranet, sendo então mais
específico, pois retorna além do local onde a informação está, o que se deseja retornar daquele
endereço. Uma URL tem sempre a seguinte estrutura: protocolo://máquina/caminho/recurso.

Pode-se concluir que toda URL é também uma URI, mas nem toda URI é uma URL, pois ela é
mais genérica, trazendo menos informação, pois não indica o directório e nem o recurso que deve
ser retornado pela requisição que está sendo feita, ainda que a parte inicial, com informação de
protocolo, máquina e porta, seja usada de forma igual em ambos os casos.

Normas para Web (Web Standards)

Web Standards significa Normas para Web, e este termo é usado para designar especificamente
o trabalho da W3C (World Wide Web Consortium). Este órgão não existe para fiscalizar ou ditar
as regras de como as páginas devem ser escritas, mas sim para produzir documentos técnicos
relativos aos vários campos do desenvolvimento web.

Sendo assim, o termo Web Standards deve ser entendido como resultado de um trabalho cuja
missão no dizer de Tim Berners-Lee, seu fundador, é: “Desenvolver protocolos e directrizes que
objectivem conduzir a World Wide Web ao seu potencial máximo, garantindo o seu crescimento
contínuo”.

Como funciona a transferência de uma página web

A função do servidor web é receber uma solicitação (requisição) e devolver (resposta) algo para
o cliente. Enquanto, o browser permite ao usuário solicitar um recurso e quando o servidor
responde a uma solicitação são encontrados recursos como: páginas web, imagens, documentos
que são exibidos depois para o usuário – geralmente os servidores enviam instruções para o
browser escritas em HTML -.

O HTTP é o protocolo que os clientes e os servidores usam para se comunicar. Essa

comunicação é baseada em requisições (request) e respostas (responses). Conforme a figura:
 20

Apresentação da Linguagem HTML

HTML é a sigla em inglês para HyperText Markup Language, que, em português, significa
linguagem para marcação de hipertexto.

O conceito de hipertexto admite um sem-número de considerações e discussões que fogem ao

escopo desta sebenta. Para o bom entendimento das definições, pode-se resumir hipertexto
como todo o conteúdo inserido em um documento para a web e que tem como principal
característica a possibilidade de se interligar a outros documentos da web. O que torna possível
a construção de hipertextos são os links, presentes nas páginas dos sites que estamos
acostumados a visitar quando entramos na Internet.

Histórico
Em 1945, Vannevar Bush, propôs em um artigo intitulado As We May Thing a ideia para um
sistema de armazenamento de informações o qual ele denominou MEMEX. Bush idealizou uma
máquina que teria a capacidade de armazenar informação textual e gráfica, informações essas
com a capacidade de serem relacionadas por meio de ligações dinâmicas, ou seja, links a
21
quaisquer outras informações.

Até então o termo hypertext não existia. Foi em 1965 que Ted Nelson, em um artigo publicado no
livro Literary Machines cunhou este termo. O primeiro sistema baseado em hipertexto foi
desenvolvido em 1967 por uma equipe liderada por Andries Van Dam na Brown University. A
pesquisa foi coordenada pela IBM e a primeira implementação do hipertexto, Hypertext Editing
System, foi executada em um mainframe IBM/360.

Em 1987, Bill Atkinson criou o Hypercard, sistema hipertexto feito para facilitar a criação de
aplicações em hipertexto. Dentre suas implementações haviam os gráficos bitmaps, campos de
formulário, script e pesquisa rápida de texto. Em 1989, nos laboratórios do CERN, Tim Berners-
Lee e Robert Caillau lançaram as ideias de um sistema que poderia ser acessível por diferentes
plataformas de computadores, realidade existente à época no CERN. Nascia então a concepção
do HTML, bem como sua utilização junto com o protocolo HTTP.

A história do HTML foi inventada 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.

Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma
estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem
não era uma especificação, mas uma colecção de ferramentas para resolver um problema de
Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua
solução, combinada com a então emergente internet pública (que tornar-se-ia a Internet) ganhou
atenção mundial.

As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou
aqueles sem familiaridade e conhecimento com a publicação na Web. Actualmente a sintaxe do
HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de
ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada
vez mais rígida.
Apesar disso, por questões históricas (retro-compatibilidade), os navegadores ainda hoje
22
conseguem interpretar páginas web que estão longe de ser um código HTML válido.

Desde a invenção da web por Tim Berners-Lee, a HTML evoluiu por 8 (oito) versões, que são:
 HTML (1990)
 HTML + (1993)2
Tecnicamente, o W3C considera oficialmente
 HTML 2.03 (versão final - 1995) somente as versões HTML 2.0, HTML 3.2, HTML
4.0 e HTML 4.01 e HTML 5. As versões HTML e
 HTML 3.0 (1995)
HTML+ são anteriores à criação do W3C e a
 HTML 3.2 (1997) versão HTML 3.0 não chegou a ser lançada
oficialmente, transformando-se na versão HTML
 HTML 4.0 (1997)
3.2.
 HTML 4.01 (1999)
 HTML 5 (2007)

Ferramentas de desenvolvimento HTML

Podemos criar uma página web simplesmente usando um editor de textos (notepad, por exemplo)
e um navegador para a visualização. Salientar que embora esta seja uma boa forma de aprender,
é pouco produtiva para desenvolver páginas web complexas que usam tabelas, frames e design
sofisticado. Alguns editores são bastante visuais e mostram todo o processo de criação da página
web, fazem busca e substituição em todo o site, utilizam templates, permitem edição directa do
código e fazem a previsão sem a necessidade de um browser. É o caso do Microsoft Frontpage,
Dreamweaver, Corel WebMaster, Adobe GoLive, Web Acappella, Web page maker, entre outros.

Os editores mais fáceis de usar, que dispensam totalmente o uso de HTML são os editores
WYSIWYG – What You See Is What You Get (o que você vê é o que você obtém) – sugerindo
que o que o autor visualiza na tela é uma representação bastante fiel do resultado final que obterá
na tela.

Ressalvando, pode-se usar qualquer editor de texto que tenha a capacidade de salvar um arquivo
de texto “puro”, em formato ISSO-Latin-1 ou ASCII para a criação de páginas HTML. Porém, caso

2 Em 1993, Dave Raggett propôs uma evolução do padrão HTML, denominada HTML+. Entretanto tal proposta nunca foi
implementada.
3 O verdadeiro successor do HTML, o qual foi apresentado na primeira conferência mundial sobre Web, a World Wide Web
Conference.
o seu editor só conseguir salvar ASCII 7 bits, deve ser feito o uso de caracteres especiais para
23
acentuação.

Fundamentos do HTML

Neste ponto apresentamos a estrutura e sintaxe da linguagem HTML, pois o HTML é uma
linguagem declarativa que tem a finalidade de dar estrutura a um arquivo de texto, identificando
a função de suas secções (título, parágrafo, etc.) e vincular as páginas entre si através de
hipertexto.

Não é possível programar em HTML pois a linguagem não possui recursos através dos quais se
possa construir procedimentos.

Elementos e descritores (tags)

O arquivo usado para construir uma página web ‘e texto simples, mesmo que a página visualizada
no browser mostre imagens, applets, plug-ins (como flash) e outros recursos, por trás de tudo
existe uma página de texto e vários outros arquivos separados.

Toda a formatação de um arquivo HTML é feita exclusivamente através dos descritores. O

browser sabe que o arquivo contém código HTML através de sua extensão (ou tipo MIME 4
enviado pelo servidor).

Se um arquivo de texto com extensão HTML, mas sem descritores for carregado, no browser,
toda a sua informação aparecerá em único parágrafo, sem destaques, sem formatação alguma.

A maioria dos elementos HTML possui um descritor inicial e um descritor final, cercando o
conteúdo que é marcado por eles. O conteúdo marcado passa a ter uma função, determinada
pelo elemento.

4 MIME é uma sintaxe universal para identificar tipos de dados originalmente utilizada para permitir o envio de arquivos anexados via
email. O servidor Web possui, internamente, tabelas que relacionam os tipos de dados (na sintaxe MIME) com a extensão dos arquivos
por ele geridos. A sintaxe MIME tem a forma (tipo/subtipo), o tipo classifica um conjunto de bytes como imagens, textos, vídeos,
programas (aplicações), etc. O subtipo informa características particulares de cada tipo – não basta saber que o arquivo é uma
imagem, é preciso saber qual o formato, pois o código usado para produzir imagens de mesma aparência gráfica pode diferir bastante
entre si.
Atributos
24
Alguns elementos HTML podem ter um ou mais atributos, opcionais ou não, que modificam
alguma propriedade do texto marcado ou acrescentam alguma informação necessária. Os
atributos geralmente, são pares do tipo: propriedade = "valor".

Quando presentes, os atributos aparecem apenas no descritor inicial separados por espaços,
logo após o nome do elemento. Ressaltar, que um descritor pode ter vários atributos. Porém, a
ordem em que aparecerem não faz diferença desde que apareçam no descritor inicial e estejam
separados dos outros atributos e do nome do elemento por espaços.

Estrutura Básica de um Documento HTML

Quando acedemos a uma página web, estamos interessados na informação (pode estar na forma
de texto, imagem ou vídeo) contida nessa página. O conteúdo de uma página web é definido com
a linguagem HTML.

Basicamente, um documento HTML é composto por elementos hierarquicamente organizados.

A linguagem HTML tornou-se um padrão para desenvolvimento de páginas web na Internet.
Apesar de ser uma linguagem de marcação e não de programação a mesma é de fácil
aprendizado, e não exige um computador potente e nem mesmo softwares específicos para poder
utilizá-la na criação de páginas.

Para isso, basta um computador que suporte um editor de texto como o bloco de notas do
Windows e um navegador de Internet, como o Internet Explorer, Google Chrome, Firefox, Opera,
etc.

A estrutura básica de um documento HTML (<head> e <body>) consiste em comandos, também

chamados de tags, que devem ser dispostos na maioria das vezes em pares.
 25

HTML, para que serve?

É uma linguagem de formatação que é interpretada pelo navegador (browser), isto quer dizer,
que o HTML serve para criar uma formatação diferenciada de texto, utilizando tags. O facto do
HTML ser interpretada significa que o programa, o browser, vai “lendo” suas tags e “traduzindo”
para a formatação. Uma página web pode conter diversos erros, já que a linguagem – HTML –
não passa pelo processo de compilação.

O HTML é considerado uma linguagem de paradigma declarativo, apesar de ser, na verdade,

uma linguagem de marcação a ser interpretada por um software (browser).

A linguagem HTML é o padrão de linguagem para a criação de páginas na Internet. O HTML

serve para os mais variados fins (criação de páginas pessoais, de empresas, escolas,
universidades, etc), pode ser também utilizado em redes Intranet. O HTML permite integração
com outras linguagens como PHP, MySQL, Postgree, ASP, JavaScript, e muitas outras
linguagens que tornam a Web mais dinâmica.
A World Wide Web e a Internet
26
A Web é o nome do mais popular dos serviços da Internet. Por esse motivo,
é frequentemente confundida com a própria Internet. Mas, a WWW e
Internet não são a mesma coisa, e precisamos conhecer bem a diferença
entre as duas antes que possamos começar a desenvolver páginas e
aplicações para a Web.

Referências Bibliográficas

1. PINHO, J. B. Jornalismo na Internet: Planeamento e Produção de Informação Online.

3ª ed. São Paulo: Summus, 2003.

2. SILVA, Maurício Samy. HTML 5: A Linguagem de marcação que revolucionou a Web.

São Paulo: Novatec Editora, 2011.

3. SOUZA, Joaquim B. de. Aprenda HTML para iniciantes. Vol. I. 2014.

 Unidade 3
Descritores (tags) HTML
Unidade III Descritores (tags) HTML
27
Nesta unidade, faremos uma descrição dos elementos e seus atributos. Os elementos serão
definidos e mostraremos seu valor semântico, particularidades e emprego correcto. Para cada
elemento estudado, além da teoria, será fornecido um exemplo prático de como emprega-lo.

Para tornar a informação prontamente acessível, iremos organizar os elementos HTML pelas
suas funções na seguinte ordem:

Estrutura: !doctype ,comments (comentário), html, head, title, meta, body, bdo, h1…h6, hr, div,
span.

Frases e Parágrafos de texto: abbr, acronym, address, blockquote, cite, q, br, code, del, dfn,
em, ins, kbd, p, pre, samp, strong, sub, sup, var.

Elementos de formatação do texto: b, big, font, i, s, small, strike, tt, u

Listas: ol, ul, li, dl, dt, dd

Links: a, link1

Tabelas: caption, table, tr, td, th, col, colgroup, tbody, tfoot, thead

Frames: frame, frameset, iframe, noframes

Conteúdo incorporado: applet, area, map, img, object, param

Estilo: style

Formulários: form, input, fieldset, legend, button, isindex, label, select, optgroup, option, textarea

Scripts: script, noscript.

1
[elemento usado na tag <head>]
Estrutura
28
!doctype (Document Type, Tipo de Documento)
A instrução <!DOCTYPE> serve para dar informações da versão do DTD2. Aparece na primeira
linha de um documento HTML e é mais uma declaração SGML (Standard Generalized Markup
Language, Linguagem de marcação generalizada padrão) do que um elemento.

HTML 5 <!DOCTYPE html>

HTML 4.01 Strict3
HTML 4.01 Transitional4
HTML 4.01 Frameset5
Este DTD contém todos os elementos HTML e atributos, mas não inclui
elementos de apresentação ou obsoletas (como fonte (font)). Conjuntos de
quadros (frames) não são permitidos.
Este DTD contém todos os elementos HTML e atributos, incluindo
elementos de Apresentação e obsoletas (como o tipo de letra). Conjuntos
de quadros não são permitidos.
Este DTD é igual a HTML 4.01 Transitional, mas permite o uso do conteúdo
do conjunto de quadros (frames).

Comentários <! - - comentário - - >

Os comentários são úteis no código para descrever um trecho ou um texto colocado no código
HTML para, no futuro entender como ele foi organizado, facilitando assim a manutenção do
código-fonte. O uso do comentário pode servir para inserção de notas ou scripts que não serão
exibidos pelo browser.

<html> … </html>
O elemento e/ou tag <html> contém todo o documento.

2
Document Type Definition.

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

4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<head> … </head>
29
Um documento HTML está estruturado em <head> e <body>. A tag <head> contém a formatação
global do documento, tal como o seu título. A tag <body> contém a informação e/ou documento
propriamente dito, ou seja, todas as tags que formatam o seu conteúdo.

Dentro da tag <head> devem ser colocadas duas tags fundamentais, a <title> e a <meta>. Estas
tags são de importância extrema, pois é a partir delas que se fará a indexação do documento
pelos motores de busca.

Título <title> … </title>

Cada página web precisa de um título para indicar o que a página descreve. O título será usado
pelos favoritos do browser ou programa de atalho rápido, e também por outros programas que
cataloguem páginas da Web, não só, como também, os títulos aparecem na barra de título dos
navegadores gráficos e, facilita os motores de busca a localizar a página através dos metadados.

Metadados6 <meta>
As tags <meta> são instruções HTML usadas para dar informações sobre uma determinada
página web e para que os motores e robôs de busca da Internet indexem a mesma, criando seus
índices de busca. Podemos indicar com a tag <meta>, o autor, língua, descrição, palavras-chave
entre outros para que os motores de busca indexem a página.

A tag <meta> também pode ser usada para adicionar ou redefinir cabeçalhos HTTP. Isso é
feito através do atributo http-equiv. E o atributo content deverá conter o conteúdo do cabeçalho.

6
http://www.seomofo.com/snippet-optimizer.html
<body> … </body>
30
A tag <body> inclui as definições gerais do documento como seus atributos. Entre a tag de
abertura <body> e fecho </body> devem estar contidas todas as outras tags de formatação de
conteúdo.

A tag <body> tem então como atributos <body bgcolor> define a cor de fundo, <body
background> específica uma imagem de fundo, <body text> define a cor do texto, <body link>
específica a cor dos links, <body alink> define a cor do link activo, <body vlink> define a cor do
link já visitado. Todos estes atributos definem a aparência global do documento. Porém, existem
ainda o atributo <body topmargin> que define a margem de topo, <body leftmargin> que define
a margem esquerda, <body rightmargin> que define a margem direita, <body bottommargin>
que define a margem de baixo.

<bdo> … </bdo> (Bi-direcional Override)

Esta tag especifica a direcção do texto. A tag <bdo> é usada para alterar a direcção do texto
padrão – esquerda para a direita – para exibir o texto hebraico – da direita para a esquerda -. Os
seus atributos são <bdo dir> que assume dois valores: ltr (left to right) e rtl (right to left), e <bdo
lang> que define a linguagem do documento.

<hn> … </hn>
A formatação de cabeçalhos é feita com recurso à tag <h>. A tag <h> tem seis níveis diferentes,
cada um dos quais origina uma tag. Os seis níveis são definidos por um número inteiro, a saber:
<h1> de maior destaque, <h2>, <h3>, <h4>, <h5>, <h6> de menor destaque. A formatação do
cabeçalho resulta na inclusão de uma quebra de parágrafo. O seu atributo é <h1
align="left/right/center/justify">.

<hr>
A tag <hr> define uma linha horizontal (horizontal row). É usada para definir uma ruptura temática
em uma página HTML (por exemplo, uma mudança de tópico). Tem como atributos <hr size>
define a espessura da linha, <hr noshade> elimina a sombra da linha, dando um efeito
tridimensional, <hr align> define um alinhamento para a linha (left, right, center), <hr width>
define o tamanho da linha horizontalmente, em relação a página (%, px), <hr color> especifica a
cor da linha.
<div> … </div>
31
A tag <div> vem do inglês division (divisão) é usada para acrescentar estrutura a um bloco de
texto. Os seus atributos são: <div id> identificador global, <div class> lista de classes separadas
por espaços, <div style> informações de estilo e <div title> fornece mais informações para um
elemento específico opondo-se ao elemento title que intitula toda a página da web.

<span> … </span>
A tag <span> não fornece nenhuma mudança visual por si só (é necessário, colocar o atributo
<span style>), como, também, fornece uma maneira de adicionar um “gancho” para uma parte
de um texto ou de uma parte de um documento.

Os seus atributos são: <span id> identificador global, <span class> lista de classes separadas
por espaços, <span style> informações de estilo e <span title> fornece mais informações para
um elemento específico opondo-se ao elemento title que intitula toda a página da web.

Frases e Parágrafos de texto

<abbr> … </abbr>
A tag <abbr> serve para explicar um termo ou abreviatura que pode não ser do conhecimento do
usuário. Os seus atributos são: <abbr id> identificador global, <abbr class> lista de classes
separadas por espaços, <abbr style> informações de estilo e <abbr title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web. Na prática, funciona quando se passa o cursor por cima do elemento.

<acronym> … <acronym>
A tag <acronym> é ao mesmo tempo semântico e visual, pois a tag serve para explicar um termo,
um acrónimo/abreviatura que pode não ser do conhecimento do usuário.

Os seus atributos são: <acronym id> identificador global, <acronym class> lista de classes
separadas por espaços, <acronym style> informações de estilo e <acronym title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web. Na prática, funciona quando se passa o cursor por cima do elemento.
<address> … </address>
32
Esta tag <address> pode ser usada pelo autor da página para fornecer informação de contacto,
ou seja, fornece um formato especial para informações de autoria ou contacto. O elemento <br>
é normalmente usado dentro da tag <address> para quebrar as linhas de um endereço.

Os seus atributos são: <address id> identificador global, <address class> lista de classes
separadas por espaços, <address style> informações de estilo e <address title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web. Na prática, funciona quando se passa o cursor por cima do elemento.

<blockquote> … </blockquote>
A tag <blockquote> especifica uma secção que é citada de outra fonte, isto é, exibe citações
longas. O seu atributo <blockquote cite> especifica a URL do texto que foi citado.

Os seus atributos são: <blockquote id> identificador global, <blockquote class> lista de classes
separadas por espaços, <blockquote style> informações de estilo e <blockquote title> fornece
mais informações para um elemento específico opondo-se ao elemento title que intitula toda a
página da web. Na prática, funciona quando se passa o cursor por cima do elemento.

<cite> … </cite>
Define o título de um trabalho, ou seja, cita uma referência (por exemplo, um livro, uma música,
…). Os seus atributos são: <cite id> identificador global, <cite class> lista de classes separadas
por espaços, <cite style> informações de estilo e <cite title> fornece mais informações para um
elemento específico opondo-se ao elemento title que intitula toda a página da web. Na prática,
funciona quando se passa o cursor por cima do elemento.

<q> … </q>
A tag <q> define uma breve citação, ou seja, citação curta. O seu atributo <q cite> indica a URL
do texto citado. Os seus atributos são: <q id> identificador global, <q class> lista de classes
separadas por espaços, <q style> informações de estilo e <q title> fornece mais informações
para um elemento específico opondo-se ao elemento title que intitula toda a página da web. Na
prática, funciona quando se passa o cursor por cima do elemento.
<br>
33
A tag <br> insere uma quebra de linha. É uma tag vazia o que significa que não tem a sua tag de
fechamento.

<code> … </code>
A tag <code> identifica um fragmento de código que deverá ser exibido. Os seus atributos são:
<code id> identificador global, <code class> lista de classes separadas por espaços, <code
style> informações de estilo e <code title> fornece mais informações para um elemento
específico opondo-se ao elemento title que intitula toda a página da web. Na prática, funciona
quando se passa o cursor por cima do elemento.

<del> … </del>
Serve para marcar o texto que foi ou deve ser deletado de um determinado conteúdo, isto é,
mostra o texto como tendo sido excluído do documento desde a última alteração. Para além dos
atributos <del id>, <del class>, <del style> e <del title>, a tag <del> tem os atributos <del cite>
indica a URL para o documento de origem e o atributo <del datetime> indica a data e a hora da
alteração.

<dfn> … </dfn>
A tag <dfn> representa a ocorrência com a definição de um termo em HTML. Os seus atributos
são: <dfn id> identificador global, <dfn class> lista de classes separadas por espaços, <dfn
style> informações de estilo e <dfn title> fornece mais informações para um elemento específico
opondo-se ao elemento title que intitula toda a página da web. Na prática, funciona quando se
passa o cursor por cima do elemento.

<em> … </em>
Coloca uma ênfase, semelhante a tag <i>. Os seus atributos são: <em id> identificador global,
<em class> lista de classes separadas por espaços, <em style> informações de estilo e <em
title> fornece mais informações para um elemento específico opondo-se ao elemento title que
intitula toda a página da web. Na prática, funciona quando se passa o cursor por cima do
elemento.
<ins> … </ins>
34
A tag <ins> mostra o texto como tendo sido inserido no documento desde a última alteração
(semelhante a tag <u>). Para além dos atributos <ins id>, <ins class>, <ins style> e <ins title>,
a tag <ins> tem os atributos <ins cite> indica a URL para o documento de origem e o atributo
<ins datetime> indica a data e a hora da alteração.

<kbd> … </kbd>
Indica o texto que um usuário digitaria. Os seus atributos são: <kbd id> identificador global, <kbd
class> lista de classes separadas por espaços, <kbd style> informações de estilo e <kbd title>
fornece mais informações para um elemento específico opondo-se ao elemento title que intitula
toda a página da web. Na prática, funciona quando se passa o cursor por cima do elemento.

<p> … </p>
A tag <p> define um parágrafo. Para além dos atributos <p id>, <p class>, <p style> e <p title>,
a tag <p> tem o atributo <p align> que controla o alinhamento, e tem como valores: left, right,
center e justify.

<pre> … </pre>
A tag <pre> define um texto pré-formatado. O texto entre as tag de abertura e fechamento é
exibido taxativamente como foi colocado, isto é, preserva os espaços e quebras de linhas.

Os seus atributos são: <pre id> identificador global, <pre class> lista de classes separadas por
espaços, <pre style> informações de estilo e <pre title> fornece mais informações para um
elemento específico opondo-se ao elemento title que intitula toda a página da web. Na prática,
funciona quando se passa o cursor por cima do elemento.

<samp> … </samp>
Identifica o resultado da amostra. Os seus atributos são: <samp id> identificador global, <samp
class> lista de classes separadas por espaços, <samp style> informações de estilo e <samp
title> fornece mais informações para um elemento específico opondo-se ao elemento title que
intitula toda a página da web. Na prática, funciona quando se passa o cursor por cima do
elemento.
<strong> … </strong>
35
Coloca no texto uma ênfase mais forte. Os seus atributos são: <strong id> identificador global,
<strong class> lista de classes separadas por espaços, <strong style> informações de estilo e
<strong title> fornece mais informações para um elemento específico opondo-se ao elemento
title que intitula toda a página da web. Na prática, funciona quando se passa o cursor por cima
do elemento.

_…
Define o texto como subscrito. Os seus atributos são: <sub id> identificador global, <sub class>
lista de classes separadas por espaços, <sub style> informações de estilo e <sub title> fornece
mais informações para um elemento específico opondo-se ao elemento title que intitula toda a
página da web.

^…
Marca o texto como sobrescrito. Os seus atributos são: <sup id> identificador global, <sup class>
lista de classes separadas por espaços, <sup style> informações de estilo e <sup title> fornece
mais informações para um elemento específico opondo-se ao elemento title que intitula toda a
página da web.

<var> … </var>
Indica uma variável, a sua apresentação é em itálico. Os seus atributos são: <var id> identificador
global, <var class> lista de classes separadas por espaços, <var style> informações de estilo e
<var title> fornece mais informações para um elemento específico opondo-se ao elemento title
que intitula toda a página da web.

Elementos de formatação do texto

<b> … </b>
Formata o texto em negrito (bold). Os seus atributos são: <b id> identificador global, <b class>
lista de classes separadas por espaços, <b style> informações de estilo e <b title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web.
<big> … </big>
36
Define um texto grande. Os seus atributos são: <big id> identificador global, <big class> lista de
classes separadas por espaços, <big style> informações de estilo e <big title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web.

<font> … </font>
A formatação de texto divide-se em duas partes: (i) a parte que foca o tipo e tamanho da letra e
a (ii) que faz a formatação de ênfase.

A tag <font> é que controla a aparência do texto a formatar. Os seus atributos são: face, color e
size. O atributo <font face> controla o tipo de fonte a utilizar, podendo ser especificado mais de
um tipo. Caso o usuário não tenha instalada a primeira fonte, o browser deverá procurar os
seguintes até deparar com um tipo que o usuário tenha instalado. Através do atributo <font color>
indicamos a cor do texto em causa. Já, o atributo <font size> controla o tamanho da fonte, tal
como acontece no cabeçalho <h>, também aqui se encontram tamanhos genéricos como valor
deste atributo, neste caso sete: 1 (de menor destaque), 2, 3 (default), 4, 5, 6, 7 (de maior
destaque).

<i> … </i>
Marca o texto em itálico (italics). Os seus atributos são: <i id> identificador global, <i class> lista
de classes separadas por espaços, <i style> informações de estilo e <i title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web.

<s> … </s>
Define um texto tachado (riscado). Os seus atributos são: <s id> identificador global, <s class>
lista de classes separadas por espaços, <s style> informações de estilo e <s title> fornece mais
informações para um elemento específico opondo-se ao elemento title que intitula toda a página
da web.

<small> … </small>
Define um texto pequeno. Os seus atributos são: id, class, style e title.
<strike> … </strike>
37
Também define um texto tachado (riscado). Os seus atributos são: id, class, style e title.

<tt> … </tt>
Define um texto telétipo - tipo máquina de escrever –, ou seja, cria um texto como mono
espaçamento. Os seus atributos são: id, class, style e title.

<u> … </u>
Coloca um sublinhado ao texto (underlined). Os seus atributos são: id, class, style e title.

Listas

Uma das formas de apresentação de informação mais prática e fácil de ler é, sem dúvida, a lista.
Esta permite organizar os dados a serem expostos de uma forma sistemática e que torna
naturalmente mais fácil a leitura da informação.

As listas tornam, sem dúvida, a página HTML visualmente mais atractiva, para além de serem
muito adequadas para agrupar ideias e conceitos. Para além disso, é muito mais fácil para o olhar
do usuário identificar a informação que pretende, se ela estiver organizada em listas.

As listas que se inserem em páginas web são essencialmente de três tipos distintos, a saber: lista
ordenada/numerada, lista não ordenada/numerada e lista de definição ou glossário. Porém,
quando combinados os diferentes estilos de listas, origina mais um estilo, ao qual dá-se o nome
de lista intercalada ou encadeada.

Lista numerada (ordered list)

As listas ordenadas são criadas através da tag <ol>. Tem como atributos <ol type> e <ol start>.
O valor para o atributo <ol type> assume cinco tipos distintos – 1 (números), A (letra maiúscula),
a (letra minúscula), I (numeração romana maiúscula) e i (numeração romana minúscula) -.
Lista não ordenada (unordered list)
38
As listas não ordenadas são criadas através da tag <ul>. Tem como atributo <ul type>, o valor
para o atributo <ul type> assume três tipos distintos – disc (círculo cheio (default)), circle (disco
vazio) e square (quadrado cheio) -.

Ambas tags <ol> e <ul> funcionam com a tag <li> por isso as listas são consideradas elementos
aninhados. Contudo, a tag <li> assume o atributo type e os respectivos valores atribuídos a tag
<ol> e <ul>.

Lista de definição (definition list)

A tag <dl> cria uma lista de definição.

Definição do termo (definition term)

A tag <dt> funciona dentro da tag <dl>. Onde é feita a definição do termo – ou rótulo –.

Descrição da definição (description definition)

A descrição de definição é feita através da tag <dd> e é usada entre a tag <dt> … </dt>.

Hiperlinks (Hiperligações)

As hiperligações ou simplesmente links são a essência da World Wide Web, pois definem a
interacção mais básica e fundamental de uma página. A tag <a> que representa a anchor (âncora)
dá-nos o silogismo de navegação na Web, no qual através da simplicidade de acesso a outros
documentos interligados por esta tag, originou-se o conceito de hipertextos.

Os Hiperlinks, além da sua principal utilização que é a interligação entre as páginas web,
indiferentemente da sua localização física (link externo) ou entre partes dentro de um mesmo
documento (links internos), podem ser aplicados para algumas outras finalidades como o
download de arquivos, disponibilização de um canal de contacto (através do correio electrónico,
através de uma chamada, …).
A localização de documentos pode assumir duas formas: absoluta e relativa . 7 8
39
A sintaxe para a inserção de um link é <a href = "URL"> …</a>. Os seus atributos são: <a href>
é o atributo principal (obrigatório) da tag <a>, <a title> apresentará uma descrição alternativa
para o link, <a accesskey> é utilizado para atribuir uma tecla de atalho ao link (fazendo a
combinação entre as teclas “alt” + “alfanumérica”).

A tecla de atalho deverá ser composta por um carácter alfanumérico e este, ao ser combinado
com a tecla (alt) durante a navegação focalizará directamente o link correspondente,
indiferentemente da posição actual do cursor dentro da página activa. <a tabindex> especifica a
ordem de tabulação de um elemento (quando a tecla “tab” é usada para navegar), <a name> é
usado para dar um nome, à sua escolha, para a âncora.

O nome serve para marcar o lugar em que a âncora se encontra e o identifica, e tornando possível
“saltar” directamente para esse local a partir de outros documentos ou de outros pontos do
mesmo documento, <a target> (seus valores: _top, _blank, _parent, _self) permite-nos abrir uma
nova janela ou moldura (frame).

Links internos
Os links internos são utilizados para interligar secções que estão dentro de um mesmo
documento. Devemos criar uma âncora mais ou menos da mesma forma como criamos um link:
usando a tag <a>, em vez de usarmos o atributo <a href> na tag de abertura, usamos o atributo
<a name>. O atributo <a name> parte de uma (ou mais) palavras-chave que será usada para
nomear a âncora.

Na prática, devemos ter um link de origem (<a href ="#nome"> … </a>) e outro de destino (<a
name="nome"> … </a>).

Outra maneira de usar o recurso de ancoragem, primeiro devemos identificar a secção que será
o destino do link – essa identificação é realizada com o atributo id (o id é um atributo global, ou

7 A localização absoluta faz a localização completa do documento em relação a toda a Internet. Por exemplo:
http://www.brunogamito.edu.mz/index.html, este tipo de localização só deve ser utilizado na ligação a páginas web externas àquele
onde nos encontramos.

8 A localização relativa é feita em relação ao documento em que nos encontramos. Se o documento ao qual pretendemos efectuar a
ligação se encontra na mesma pasta que o documento actual, basta indicar o seu nome: índex.html.
seja, todos os elementos possuem esse atributo) -. O segundo passo é criar os links utilizando
40
os identificadores das secções antecedido do cardinal (#).

<a href ="#nome"> Introdução </a> (link de origem)

<a name="nome">Introdução </a> (link de destino)

Links externos
Podemos considerar que existe dois tipos de links externos: (i) que servem para interligar páginas
que estão em outras pastas, mas no mesmo computador e (ii) e os que permitem fazer ligações
com qualquer página devidamente conectada à rede mundial de computadores (Internet),
indiferentemente da localização física. Porém, no segundo caso devemos referenciar o protocolo
de comunicação (por exemplo, <a href ="http://www.brunogamito.edu.mz"> … </a>)

Links para download de arquivos

Pode-se utilizar o recurso dos links para realizar a transferência de arquivos entre o servidor e o
cliente, a este processo dá-se o nome de download. É possível disponibilizar para os usuários
inúmeros tipos e formatos de arquivos diferentes do HTML, como por exemplo: arquivos
executáveis, multimédia, textos (em diversos formatos), etc. Caso o arquivo referenciado no link
não possa ser aberto automaticamente pelo browser, será apresentado ao usuário uma caixa de
diálogo onde o mesmo deverá optar por salvá-lo ou abri-lo.

<a href = "arquivo.extensão"> … </a>

Nessa óptica fica evidente que não existe um comando especifico que faça o download, o que
acontece é que, sempre que aparece um tipo de arquivo que o browser não reconhece, ele
automaticamente inicia o download.

Alguns tipos de URLs para o atributo hypertext reference

<a href ="http://...”> … </a>
<a href ="página.html"> … </a>
<a href ="ftp://..."> … </a>
<a href ="mailto:mail@provedor"> … </a>
indica um link para uma página externa (Internet)
indica um link para uma página externa (localmente)
Indica um link para apontar para arquivos que estão
localizados em servidores de ficheiros (FTP).
Indica um link para envio de um email
<a href ="file ://…"> … </a> Referem a arquivos localizados no mesmo PC que o browser
9
41
<a href ="callto:+prefixo_número do telefone"> … </a> Indica um link para efectuar uma chamada
<a href ="Skype:nome_do_perfil?call”> … </a> Faz uma ligação via Skype
<a href ="Skype:nome_do_perfil?chat”> … </a> “Bate-papo” via skype

Link
É usado para vincular uma página a outro recurso, ou seja, a tag <link> define uma ligação entre
um documento e um recurso externo. Os seus atributos fundamentais são o <link rel> e <link
href>.

Atributo Valores
href URL
alternate | archives | author | bookmark | external | first | help | icon | last | license
next | nofollow | noreferrer | pingback | prefetch | prev | search | sidebar | stylesheet
rel
| tag | up

target _blank | _parent | _self | _top

media Define o meio de destino (screen, print, projection, braille, speech, all)
Tipo de media: text/css | text/dns | text/html | text/xml, …
type
Ver lista completa: http://www.iana.org/assignments/media-types/media-types.xhtml

Tabelas

As tabelas são dos elementos mais complexos de formatar. Porém, sem elas, uma boa
estruturação do layout é virtualmente impossível. Parte da sua complexidade advém das fusões
entre as células, que num programa de processamento de texto se processa de forma
inteiramente visual e que em HTML não passa sem ser especificada em código.

<caption> … </caption>
Exibe a legenda de uma tabela. Os seus atributos são: id, class, style, title e <caption align>.
Assume os valores: top | bottom.

9
Para os arquivos locais, os URLs assumem dois formatos: (i) com um nome de host vazio (quando apresenta três barras em vez de
duas) ou com o nome do host.

file:///dir1/dir2/file
file://localhost/dir1/dir2/file
<table> … </table>
42
A tag <table> cria uma tabela. Os seus atributos são: <table border> define a espessura da borda
em volta da tabela, <table width> indica a largura/comprimento da tabela (px, %), <table cols>
especifica o número de colunas, <table frame> define os lados visíveis da tabela, os seus valores
(void, above, below, hsides, vsides lhs, rhs, box e border), <table rules> define as réguas visíveis
dentro de uma tabela, seus valores (none, groups, rows, cols, all), <table cellspacing> indica o
espaçamento entre células, <table cellpadding> especifica o espaçamento nas células, <table
align> controla o alinhamento (left, center, right, justify), <table bgcolor> define a cor do fundo
da tabela e <table background> define uma imagem para fundo da tabela.

<tr> … </tr>
Define uma linha na tabela. Os seus atributos são: <tr align> alinha horizontalmente o conteúdo
dentro da célula (left | right | justify | center), <tr valign> alinha verticalmente o conteúdo dentro
da célula (top | middle | bottom | baseline), <tr bgcolor> define a cor do fundo dentro de uma
linha na tabela.

<td> … </td>
Define uma célula na tabela. Na verdade, não existe uma tag especifica para a criação de colunas,
é a combinação de várias <td> que formam a coluna. Para a tag <td> temos como atributos: <td
align> alinha horizontalmente o conteúdo dentro da célula (left | right | center | justify), <td valign>
alinha verticalmente o conteúdo dentro da célula (top | middle | bottom), <td rowspan> define o
número de linhas ocupadas por uma célula, <td colspan> especifica o número de colunas
ocupadas por uma célula, <td nowrap> coloca o texto sem quebra de linha dentro de uma célula,
<td bgcolor> define a cor de fundo da célula, <td height> define a altura da célula, <td width>
define a largura da célula, <td background> define a fundo de uma célula.

<th> … </th>
Define o conteúdo da célula do cabeçalho da tabela. Para a tag <th> temos como atributos: <th
align> alinha horizontalmente o conteúdo dentro da célula (left | right | center | justify), <th valign>
alinha verticalmente o conteúdo dentro da célula (top | middle | bottom), <th rowspan> define o
número de linhas ocupadas por uma célula, <th colspan> especifica o número de colunas
ocupadas por uma célula, <th nowrap> coloca o texto sem quebra de linha dentro de uma célula,
<th bgcolor> define a cor de fundo da célula, <th height> define a altura da célula, <th width>
43
define a largura da célula, <th background> define a fundo de uma célula.

<col>
Agrupa colunas dentro de grupos de coluna a fim de partilhar valores de atributos. Os seus
atributos são: <col span> define o número de colunas que o grupo contém, <col width> especifica
a largura da coluna (%, px ou um valor mínimo), <col align> alinha horizontalmente o conteúdo
das células (left | right | justify |center), <col valign> alinha verticalmente o conteúdo dentro de
uma célula (top | bottom | middle | baseline).

<colgroup> … </colgroup>
Define duas ou mais colunas como um grupo. Os seus atributos são: <colgroup span> define o
número de colunas que o grupo contém, <colgroup width> especifica a largura da coluna (%, px
ou um valor mínimo), <colgroup align> alinha horizontalmente o conteúdo das células (left | right
| justify |center), <colgroup valign> alinha verticalmente o conteúdo dentro de uma célula (top |
bottom | middle | baseline).

<tbody> … </tdbody>
Define o corpo da tabela. Os seus atributos são: <tbody align> alinha horizontalmente o conteúdo
das células (left | center | right | justify), <tbody valign> alinha verticalmente o conteúdo das
células (top | middle | bottom | baseline).

<tfoot> … </tfoot>
Define o rodapé da tabela. Os seus atributos são: <tfoot align> alinha horizontalmente o conteúdo
das células (left | center | right | justify), <tfoot valign> alinha verticalmente o conteúdo das células
(top | middle | bottom | baseline).

<thead> … </thead>
Define o cabeçalho da tabela. Os seus atributos são: <thead align> alinha horizontalmente o
conteúdo das células (left | center | right | justify), <thead valign> alinha verticalmente o conteúdo
das células (top | middle | bottom | baseline).
Frames
44
As molduras <frame> são um dos elementos mais complexos de formatar numa página web e a
interacção do usuário com as frames foge muitas vezes ao comportamento intuitivo evidenciado
por outras formas de navegação.

Na verdade, as molduras são simultaneamente um elemento de estruturação e de navegação.

Através delas podemos apresentar num só ecrã mais do que um documento em simultâneo. A
vantagem delas reside na possibilidade de atribuir a um documento o menu de navegação e a
outro o conteúdo, e assim facilitar a actualização da navegação mudando um só ficheiro. A
principal desvantagem é dificultar a impressão e a catalogação das páginas, para além da
evidente dificuldade de interacção entre mais do que um documento simultaneamente.

<frame>
Define uma frame. Cada <frame> corresponde a um documente independente. Os seus atributos
são: <frame name> define o nome de um frame, <frame src> define a URL a ser exibida em um
frame, <frame frameborder> alterna a borda entre os frames (0, 1), <frame marginwidth> define
o espaço entre a borda do frame e o conteúdo, <frame marginheight> define o espaço entre a
borda do frame e o conteúdo, <frame noresize> desactiva o dimensionamento, <frame
scrolling> determina a presença da barra de rolagem (auto | yes | no).

<frameset> … </frameset>
Define o layout dos frames dentro de uma janela. Os seus atributos são: <frameset cols> indica
o número de colunas – divide a tela verticalmente -, <frameset rows> define o número de linhas
– divide a tela horizontalmente -. Os valores a atribuir a estes atributos <frameset cols> e
<frameset rows> são de três tipos: absolutos (indicados em pixéis – número), relativos (indicados
em percentagem - %) e globais (indicados por um asterisco - *). Outro atributo é <frame
bordercolor> define a cor da barra de divisão do frame.

<iframe> … </iframe>
Cria um frame in-line. Os seus atributos são: <iframe name> define o nome de um frame, <iframe
src> define a URL a ser exibida em um frame, <iframe frameborder> alterna a borda entre os
frames (0, 1), <iframe marginwidth> define o espaço entre a borda do frame e o conteúdo,
<iframe marginheight> define o espaço entre a borda do frame e o conteúdo, <iframe scrolling>
45
determina a presença da barra de rolagem (auto | yes | no), <iframe height> define a altura (px,
%), <iframe width> define a largura (px, %), <iframe align> controla o alinhamento (left | center |
right | justify).

<noframes> … </noframes>
Conteúdo alternativo para quando os frames não forem suportados.

Conteúdo incorporado

São chamados também de inclusões, os conteúdos incorporados se aplicam a applets (Java),

mapas de imagens e outros conteúdos de multimédia ou programáticos que são colocados em
uma página web para fornecer uma funcionalidade adicional.

<applet> … </applet>
Inclui um applet Java. Os seus atributos são: <applet align> controla o alinhamento (left | right |
center | justify), <applet alt> exibe texto enquanto está carregando, <applet archive> identifica
os recursos que deverão ser pré-carregados, <applet code> define o arquivo de classe applet,
<applet codebase> define a URL base para o applet, <applet height> a altura do applet exibido,
<applet hspace> o espaço horizontal separando a imagem de outro conteúdo, <applet name>
define o nome do applet, <applet objecto> o arquivo applet serializado, <applet vspace> o
espaço vertical que separa a imagem do restante do conteúdo, <applet width> a altura do applet
exibido.

<area>
Define links e âncoras em um mapa de imagens do lado cliente. Os seus atributos são: <area
shape> permite que o “programador” defina mapas de imagens usando formas definidas (default,
rect10, poly11, circle12), <area coords> define as coordenadas, <area href> indica o URL do

10
Para se criar em rectângulo, deve-se especificar as coordenadas do vértice (da parte superior esquerda e do vértice inferior direito).
11
No caso de um triângulo, deve-se indicar as três coordenadas de cada um dos vértices do triângulo. Para criar um polígono com
mais faces, faz-se da mesma forma, mas com mais de três vértices.

12
Para criar um círculo, por sua vez, é um pouco diferente. Primeiramente deve-se escrever as coordenadas do centro do círculo, e
depois o quanto esse círculo terá de raio (medida do centro ao extremo, ou seja, metade da medida de extremo a extremo).
recurso vinculado, <area target> determina onde o recurso será exibido (nome definido pelo
46
usuário, _blank, _parent, _self, _top), <area nohref> indica que a região não realiza qualquer
acção, <area alt> ou <area title> exibe um texto alternativo, <area tabindex> define a ordem de
tabulação entre elementos com um tabindex (índice de tabulação) definido.

<map> … </map>
Quando usado com o elemento <area>, cria um mapa de imagens do lado cliente. Para além
desses atributos: <map id>, <map class>, <map title> e <map style>. A tag <map> conta com
o atributo <map name> indica o nome do mapa de imagens a ser criado.

<img>
A tag responsável pela inserção de uma imagem é a tag <img>, e é de inserção pontual, o que
significa que não necessita de tag de fecho, pois não formata uma área, apenas referencia a
introdução de um documento externo. Os seus atributos são: <img src> - obrigatório – define o
caminho da imagem (URL), <img alt> ou <img title> texto alternativo a ser exibido, <img
height> define a altura da imagem, <img width> a largura da imagem, <img border> define a
espessura da borda, <img align> controla o alinhamento (left | right | center | justify), <img
hspace> espaço horizontal que separa a imagem do restante conteúdo, <img vspace> espaço
vertical que separa a imagem do restante do conteúdo, <img usemap> especifica a URL para
um mapa de imagens do lado cliente. Porém a URL deve ser antecedida pelo cardinal (#) e nome
do mapa.

<object> … </object>
Inclui um objecto. Os seus atributos são: <object classid> o URL da localização de um objecto,
<object codebase> indica a URL para resolver os URLs especificados pelos outros atributos,
<object data> indica a URL para os dados do objecto, <object type> especifica o tipo de conteúdo
Internet para os dados, <object codetype> o tipo de conteúdo Internet para o código, <object
standby> exibe mensagem enquanto está carregando, <object height> a altura do objecto,
<object width> define a largura do objecto, <object usemap> indica a URL para um mapa de
imagens, <object shape> permite que o “programador” define áreas para procurar por hiperlinks
se o objecto for uma imagem, <object name> indica o nome da URL a ser enviado como parte
de um formulário, <object tabindex> define a ordem de tabulação entre os elementos com um
tabindex (índice de tabulação) definido, <object align> controla o alinhamento (left | center | right
 47
| justify), <object border> exibe a borda em volta de um objecto, <object hspace> o espaço entre
os lados do objecto e o restante do conteúdo da página, <object vspace> o espaço entre a parte
superior e a parte inferior do objecto e o restante do conteúdo da página.

<param>
Inicializa um objecto. Tem como atributos: <param name> define o nome do parâmetro, <param
value> define o valor do parâmetro objecto, <param valuetype> define o tipo de valor (data, ref,
object), <param type> o tipo de media da Internet.

Estilo

As folhas de estilo (tanto inline quanto importada) são incorporadas em documento HTML através
do uso do elemento style.

<style> … </style>
O elemento style pode ser usado como tag <style> ou como atributo. Quando usada como tag
cria uma folha de estilo interna ou incorporada, enquanto que se for usada como atributo cria uma
folha de estilo inline no elemento que estiver contido o atributo. Os seus atributos são: <style
type> define o tipo de conteúdo da Internet, <style media> define a media de destino (screen |
print | projection | braille | speech | all), <style title> define um título ao estilo.

Formulários

Os formulários criam uma interface para que o usuário selecione opções e envie dados de volta
para o servidor da Web.

<form> … </form>
A tag <form> é usada para criar um formulário HTML para entrada do usuário. Este é um
importantíssimo recurso que possibilita uma valiosa interacção com os visitantes da página web.
Os seus atributos são: <form name> usado para definir um nome para o formulário, <form
method> através deste atributo define-se qual será o método utilizado para a transmissão dos
dados inseridos nos controles do formulário. Os seus valores são: <form method ="get"> envia a
informação juntamente com a URL, <form method ="post"> envia as informações em blocos
48
internamente e invisíveis aos olhos do visitante, <form action> este atributo é declarado da
mesma forma que o atributo (href) usado na inserção de links, onde o arquivo referenciado será
responsável em processar as informações enviadas do formulário, <form enctype> serve para
definir o tipo de codificação com que os dados serão enviados. Actualmente existe a codificação
<form enctype ="application/x-www-form-urlencoded"> (default) e a codificação <form enctype
="multipart/form-data">. A primeira é de uso geral, enquanto que a segunda é exclusivamente
para o usuário enviar um arquivo do seu computador (ou rede) local para o servidor, <form target>
define a janela onde a página que possivelmente será devolvida pelo script especificado no
atributo action será exibida, e tem como default o valor _self, significando a mesma janela que
contém o formulário, outros valores assumidos são: _blank, _parent, _top.

<input>
Define controles usados em formulários, ou seja, é a tag através da qual se inserem os dados.
Os seus atributos são: <input type> define o controle do tipo de input (inserção). Consoante o
valor de type, assim será o tipo de campo, <input name> o nome do controle, <input value>
define o valor inicial do controle, <input checked> define o botão de opção para a verificação de
status, <input disabled> desactiva o controle, <input readonly> controle somente de leitura,
<input size> define a largura do controle, <input maxlength> especifica o número máximo de
caracteres que pode ser digitado, <input alt> ou <input title> define um texto de descrição
alternativo, <input src> define a URL para um tipo de controle de imagem, <input tabindex>
define a ordem de tabulação entre os elementos com um tabindex (índice de tabulação) definido.

Definindo campos em um formulário

Existem diversos tipos de campos de formulário, que podem ser obtidos usando a tag <input> e
o atributo <input type>. Entre os valores de type encontram-se:

<input type ="text"> campo de inserção de uma linha de texto;

<input type ="password"> campo idêntico a text, mas orientado para a inserção de palavras-
chave. Os caracteres inseridos são substituídos por asteriscos (*) como forma de segurança;
 49
<input type ="radio"> campo de selecção entre valores pré-atribuídos. Só permite a escolha de
um entre vários. Esta tag tem sempre de vir acompanhada de outras idênticas, sendo a sua série
agrupada pelo valor idêntico dado ao atributo name;

<input type ="checkbox"> campo de selecção entre valores pré-atribuídos e que permite a
selecção simultânea de vários;

<input type ="image"> botão de acção onde uma imagem substitui o botão normal. O seu atributo
fundamental é src (source). De resto funciona como a tag <img> no que se refere a atributos de
alinhamento, dimensão e contorno;

<input type ="submit"> botão de acção segundo o qual é enviada toda a informação do formulário
para ser processada pelo programa definido em <form action>;

<input type ="reset"> limpa todos os campos já preenchidos de um formulário para que se insiram
novos dados;

<input type ="button"> botão genérico de acção. Idêntico de resto aos dois botões definidos
anteriormente;

<input type ="file"> campo através do qual se pode enviar um ficheiro externo através do
formulário.

<fieldset> … </fieldset>
A tag <fieldset> é usada para agrupar elementos relacionados dentro de um formulário,
desenhando uma borda em torno desses elementos. Os seus atributos são: <fieldset id>,
<fieldset class>, <fieldset style>.

<legend> … </legend>
A tag <legend> é usada dentro da <fieldset> para define um título para o bloco.
<button> … </button>
50
Cria um botão. Os seus atributos são: <button name> define o nome do botão, <button value>
define o valor do botão, <button type> o tipo de botão (button | submit | reset), <button disabled>
define o estado do botão (desactiva), <button tabindex> especifica a ordem de tabulação entre
os elementos com um tabindex (índice de tabulação) definido.

<isindex>
Solicita um input do usuário. O seu atributo é o <isindex prompt> solicita uma string de prompt
para o campo de input.

<label> … </label>
Nos Formulários, os rótulos são fundamentais para informar aos usuários quais dados devem ser
preenchidos. Para se adicionar um rótulo, devemos utilizar o elemento <label>. Os textos dos
rótulos são definidos no conteúdo desse elemento.

Para melhorar a acessibilidade dos documentos HTML, os rótulos devem ser explicitamente
associados aos campos dos formulários. Para estabelecer esse vínculo, o primeiro passo é
identificar os campos através do atributo id. O segundo passo é definir o atributo <label for> no
label com o identificador do campo correspondente ao rótulo.

<select> … </select>
Cria opções para o usuário selecionar. Os seus atributos são: <select name> define o nome do
elemento, <select size> a largura em número de linhas, <select multiple> permite selecções
múltiplas, <select disabled> desactiva o controle, <select tabindex> define a tabulação entre os
elementos com um tabindex (índice de tabulação) definido.

<optgroup> … </optgroup>
A tag <optgroup> é usada dentro de uma lista de selecção <select> para agrupar opções <option>
relacionadas entre si. Tem como atributo obrigatório <optgroup label>, ou seja, é preciso definir
uma descrição para cada grupo de opções.
<option> … </option>
51
Especifica as escolhas em um elemento seleccionado. Tem como atributos, <option selected>
indica se a opção foi selecionada, <option disabled> desactiva o controle, <option value> define
o valor enviado se um controle for enviado.

<textarea> … </textarea>
Cria uma área para input do usuário com várias linhas. Os seus atributos são: <textarea name>
define o nome do controle, <textarea rows> a largura em número de linhas, <textarea cols> a
altura em número de colunas, <textarea disabled> desactiva o controle, <textarea readonly>
define o texto exibido para o status de read-only (somente de leitura), <textarea tabindex> define
a ordem de tabulação entre os elementos com um tabindex (índice de tabulação definido).

Scripts

A linguagem de scripts fica disponível para processar dados e realizar outros eventos dinâmicos
através do elemento script.

<script> … </script>
Contém scripts do lado cliente que são executados pelo browser (navegador). Os seus atributos
são: <script type> tipo de conteúdo da Internet da linguagem de Script, <script src> define a URL
para o script externo.

<noscript> … </noscript>
Fornece conteúdo alternativo para os navegadores que sejam incapazes de executar um script.

Efeitos de animação e recursos multimédia

A animação foi, a par do uso de imagens, um dos factores principais de sucesso da World Wide
Web. A imagem animada foi sempre objecto de fascínio por parte do Homem, desde os teatros
de sombras chinesas, passando pela invenção do cinema pelos irmãos Lumiére e culminando na
televisão.
<marquee> … </marquee>
52
Podemos dar movimento a textos, links, imagens e a outros elementos HTML. A tag <marquee>
é utilizada em par, possuindo abertura e fechamento. Na tag inicial inserimos diversos atributos
que controlam características do seu funcionamento. Os seus atributos são: <marquee
behavior> com este atributo definimos o estilo de comportamento executado pela animação,
podendo ser utilizado um entre os três valores disponíveis (scroll13 | slide14 | alternate15),
<marquee direction> define para qual direcção será movimentado o elemento (up | down | right
| left), <marquee height> define em pixels ou em percentagem da tela, a dimensão vertical que
será reservada (ocupada) para a animação, <marquee width> define em pixels ou em
percentagem da tela, a dimensão horizontal que será reservada (ocupada) para a animação,
<marquee hspace> estabelece uma margem horizontal externa à área da animação, onde o valor
definido em pixels será assumido tanto pelo lado esquerdo como pelo lado direito, <marquee
vspace> estabelece uma margem vertical externa à área da animação, onde o valor definido em
pixels será assumido tanto pelo lado superior como pelo lado inferior, <marquee align> define o
alinhamento vertical do elemento, dentro do espaço reservado (ocupado) para a animação (top |
middle | bottom), <marquee bgcolor> define uma cor de fundo para a área reservada para a
animação, <marquee loop> especifica o ciclo de repetições que será aplicada a um
comportamento estabelecido para a animação (número | infinite), <marquee scrollamount>
define em pixels (número), o espaço para cada movimento realizado pelo elemento na animação,
<marquee scrolldelay> define o tempo em milissegundos, para cada movimento realizado pelo
elemento na animação.

<bgsound>
Para inserirmos áudio às páginas web, devemos utilizar a tag <bgsound>. Esta tag tem como
atributos: <bgsound src> através deste atributo indicamos o arquivo de áudio no qual deve ser
executado, <bgsound loop> indica o número de vezes pela qual o arquivo de som deve ser
tocado (número | infinite).

13
Este é o comportamento padrão utilizado pela tag <marquee>, faz com que o elemento entre por um lado da tela e saia pelo outro,
em ciclo.

14
Faz com que o elemento entre por um lado da tela e se desloque até o outro lado.

15 Faz com que o elemento se desloque de um lado para o outro da tela, em um ciclo.
<embed>
53
A tag <embed> define um recurso para uma aplicação externa ou conteúdo interactivo (plug-in).
Tem como atributos: <embed src> indica o arquivo de áudio no qual deve ser executado, <embed
height> define a altura do console em pixels (número), <embed width> define a largura do
console em pixels (número), <embed hidden> caso este atributo receba o valor true, o console
para o controle da reprodução do áudio será omitido, <embed autostart> caso este atributo
receba o valor true, a reprodução do áudio será inicializada juntamente com o carregamento da
página.

Caracteres especiais16

Ao usar um editor de texto que permita acentuação para criar uma página, corremos o risco dos
acentos não serem interpretados correctamente por alguns navegadores, em especial browsers
instalados em países onde não se utiliza acentuação, por exemplo países de expressão inglesa.
Se quisermos garantir que a acentuação da nossa página vai ser universalmente entendida
devemos usar as entities. Nas entities faz diferença usar caracteres maiúsculos ou minúsculos.

Não iremos esgotar nessa sebenta a lista completa de todos os caracteres especiais da tabela
ASCII. Porém, as regras de inserção de acentuação na página web é feita de duas formas:

(i) Através do sinal “&” precedido da especificação do acento e termina com ponto-vírgula
“;”. Por exemplo, &Aacute;  Á
(ii) Através do sinal “&” precedido por cardinal “#” e o número correspondente na tabela
ASCII (decimal) e termina com ponto-vírgula “;”. Por exemplo, &#193;  Á

Como visto acima, o caractere ou símbolo a ser apresentado pode ser feita em entidade nominal
(&abreviação;) ou em entidade numérica (&#número;) que o representa.

Caracteres acentuados no Português e caracteres especiais

á &aacute; Á &Aacute; ã &atilde; Ã &Atilde; â &acirc;
 &Acirc; à &agrave; À &Agrave; é &eacute; É &Eacute;
ê &ecirc; Ê &Ecirc; í &iacute; Í &Iacute; ó &oacute;

16
https://dev.w3.org/html5/html-author/charref | http://erikasarti.net/html/acentuacao-caracteres-especiais/
 Ó &Oacute; õ &otilde; Õ &Otilde; ô &ocirc; Ô &Ocirc;
54
ú &uacute; Ú &Uacute; ç &ccedil; Ç &Ccedil; &nbsp;17
& &amp; ^ &circ; ~ &tilde; ¨ &uml; ´ &acute;
“ &ldquo; ” &rdquo; ‘ &lsquo; ’ &rsquo; < &lsaquo;
> &rsaquo; « &laquo; » &raquo; • &bull; ° &ordm;
ª &ordf; - &ndash; | &brvbar; ¶ &para; … &hellip;

Legenda:
Caracteres acentuados no Português
Caracteres especiais
Espaço

Referências bibliográficas

1. COELHO, Pedro. HTML 4 & XHTML. 2ª ed. FCA – Editora de Informática. Lisboa, 2001.

2. FIGUEIREDO, Bruno. Web Design: Estrutura, concepção e produção de sites web. 2ª

ed act. E aumentada. FCA – Editora de Informática. Lisboa, 2004.

3. LEMAY, Laura. Aprenda a criar páginas web com HTML e XHTML em 21 dias. Tradução:
Aldir J. C. C. da Silva/Flávia B. Cruz/Lavio Pareschi. Revisão Técnica: Marcos Jorge. São
Paulo: Pearson Education, 2002.

4. SILVA, Maurício Samy. HTML 5: A linguagem de marcação que revolucionou a Web. São
Paulo: Novatec Editora, 2011.

17
Define um espaço (non-break space).
 Unidade 4
Folhas de Estilo em Cascata (CSS)
Unidade IV Folhas de Estilo (CSS)
55
Breve história
Desde o início do seu desenvolvimento que o HTML foi pensado como nada mais do que uma
forma simples de formatação de documentos científicos, onde a estrutura e hierarquia prevalecem
sobre a composição e o aspecto da apresentação.

O cientista Tim Berners-Lee, ao desenvolver o navegador NeXus, que serviu para implementar
suas invenções, escreveu também, ainda que de forma bastante limitada, algumas
funcionalidades intrínsecas que controlavam a apresentação dos documentos. Os navegadores
que se seguiram, nos anos de 1992 e 1993, também vinham com funcionalidades de estilização
padrão, tais como no modelo desenvolvido por Tim Berners-Lee. No browser Mosaic, lançado em
1993 e que popularizou a web, também foram previstas funcionalidades mínimas para aplicar
estilos. Na verdade, apenas o controlo de algumas fontes e de cores era possível. As
funcionalidades intrínsecas aqui referenciadas são aquelas que hoje em dia conhecemos como
folhas de estilo padrão do navegador. Um conjunto de regras de estilo forma uma folha de estilo
que o navegador aplica aos documentos por padrão nos casos em que o autor do documento ou
o usuário não tenham definido nenhuma regra de estilo.

Em setembro de 1994, surgiu a primeira proposta para a implementação das CSS. Até então, o
próprio Tim Berners-Lee considerava que a estilização era uma questão a ser resolvida pelo
navegador, razão pela qual não se preocupou em publicar a sintaxe usada para criar a folha de
estilo padrão do navegador (NeXus).

Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. A medida
que o HTML foi se popularizando e evoluindo, foram incluídas em suas qualidades, o domínio de
controlar algumas aparências para o documento. Isso fez com que a linguagem ficasse muito
complexa, mais difícil para entender e manter, não só, mas também, outro problema era que os
navegadores tinham diferenças de implementações, o que dificultava a visualização das páginas,
trazendo menos controlo na navegação pela web.

Em 1994, Håkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fácil para
formatar a informação, nisso ele propôs a criação do CSS. Porém, ele faz um convite a Bert Bos
– que naquele tempo estava trabalhando em um navegador chamado Argo – e começou a
56
trabalhar no projecto.

Em 1995, Håkon Wium Lie e Bert Bos apresentaram a proposta do CSS que logo foi apoiada pela
w3c. A ideia geral era, utilizar HTML somente para estruturar a página web e a tarefa de
apresentação fica com o CSS disposto em um arquivo separado (.css) ou no próprio HTML. Em
dezembro de 1996, as CSS1 foram lançadas como uma recomendação oficial do w3c. Dois anos
depois, no dia 12 de maio de 1998, eles lançaram a recomendação do CSS de nível 2 (terceira
geração).

Definição
CSS é abreviatura para o termo em inglês, Cascading Style Sheet, traduzido para o português
como folhas de estilo em cascata.

A definição mais precisa e simples para folha de estilo encontra-se na página web das CSS no
site do w3c, que passamos a transcrever:

“folha de estilo em cascata é um mecanismo simples

para adicionar estilos (por exemplo: fontes, cores,
espaçamentos) aos documentos web.”

Funcionamento
As folhas de estilo permitem controlar precisamente o tamanho, espaçamento e posição numa
página web de qualquer elemento de composição, seja uma imagem, um texto ou um ficheiro
multimédia.

O conceito inerente às folhas de estilo é algo a que os designers já estavam habituados, pois era
um conceito herdado das aplicações de DTP (DeskTop Publishing – edição electrónica),
utilizadas ubiquamente para a composição de edições impressas, como jornais, livros ou revistas.

Para além do controlo preciso sobre os elementos de formatação de uma página, as folhas de
estilo permitem ainda a definição num só ficheiro da formatação a aplicar a esses elementos, o
que pressupõe não só a imposição de uma linha gráfica comum a todo o site, como a sua rápida
57
modificação através da imposição de estilos gráficos.

Quando um designer elabora o layout de uma revista, trata da mesma forma todos os cabeçalhos,
marcações de página e blocos de texto. De modo a facilitar a formatação destes elementos, da
mesma forma e vezes sem conta, são também aqui empregues folhas de estilo, tornando o
conceito de certa forma universal para quem tem esta actividade como profissão.

Regra CSS
A regra CSS é a unidade básica1 de uma folha de estilo. Uma regra CSS é composta de duas
partes: o selector e a declaração (a declaração compreende uma propriedade e um valor). A
sintaxe para se escrever uma regra CSS é:

Onde:
Selector – é o alvo da regra CSS (define quais elementos do HTML serão formatados ou
estilizados);
Declaração – determina os parâmetros de estilização. Compreende a propriedade e o
valor;
Propriedade – define qual será a característica do selector a ser estilizada;
Valor – é a quantificação ou a qualificação da propriedade.

É muito importante ficar atento para os seguintes detalhes: (i) as declarações devem estar entre
chavetas { }; (ii) a propriedade e o valor são separados por dois-pontos; (iii) depois do valor,
termina-se a declaração com ponto-e-vírgula;

1
Nessa definição, o termo unidade básica significa a menor porção de código capaz de produzir efeito de estilização.
O esquecimento de uma dessas regras levará a uma sintaxe inválida podendo anular o efeito da
58
regra CSS. Por questões de legibilidade do código e de convenção, cada declaração fica em sua
própria linha.

Selectores, especificidade, cascata e herança

Um selector CSS2 é uma declaração em um formato que “casa” com todos os elementos que
sigam aquele formato na árvore do documento. Quando todas as condições estabelecidas no
formato da declaração são satisfeitas o selector “casa” com o elemento (ou elementos) no
documento e as regras escritas no selector são aplicadas. Por exemplo: p {color: red;}, o selector
é a parte da regra CSS que está antes do sinal “{“. O selector neste caso é o elemento <p>, que
“casa” com todos os elementos <p> do documento e faz com que qualquer texto dentro de um
parágrafo seja na cor vermelha.

Um dos factores que influenciam na determinação da ordem do efeito cascata é a especificidade

do selector. A especificidade é uma característica que leva em conta a maneira como o autor
escreveu o selector.

De forma geral, a especificidade segue uma ordem de prioridade. Quando um conflito é

detectado, as seguintes regras prevalecerão conforme a prioridade abaixo:
(i) Estilos inline;
(ii) Selectores por ID;
(iii) Classes, pseudoclasses, atributos;
(iv) Elementos e pseudo-elementos.
Quando as especificidades são iguais, a última regra é a que prevalece. O CSS também oferece
o termo !important para destacar uma regra específica.

O termo em cascata é usado porque há uma sequência ordenada nas folhas de estilo. Quanto
mais próxima estiver uma regra do elemento HTML que ela afecta, maior prioridade terá. Para
definir de maneira mais simples, veremos o que acontece quando estilos externos (out-file),
embutidos (in-file) e alinhados (in-line) são aplicados à mesma página: (i) os estilos definidos em
uma folha de estilos externa são os primeiros a ser aplicados à página; (ii) os especificados em

2
Vide apêndice 1.
uma folha de estilo embutida vêm a seguir e sobrepõem os da primeira, onde foram aplicados; e
59
(iii) os estilos alinhados sobrepõem tanto as folhas de estilo externas quanto as embutidas, onde
foram aplicadas.

A herança é um conceito fundamental no CSS. Pode-se fazer uma comparação com a biologia
quando se fala em herança genética (é consequência natural que herdemos características de
nossos ancestrais, como cor dos olhos, cor do cabelo, traços e feições do rosto, predisposição a
doenças, etc.). No CSS podemos aproveitar este princípio para definir regras que possam ser
herdadas por elementos que tenham relação de ancestralidade entre si.

Para entendermos a herança CSS é necessário que se saiba o que é árvore do documento. O
conceito de árvore do documento é melhor entendido quando fazemos uma analogia com a
árvore genealógica de uma família, que é uma noção bem entendida pela maioria das pessoas.

Em uma família o relacionamento entre seus membros é expresso pelo grau de parentesco.
Assim, temos indivíduos que são filhos, pais, avós, irmãos, primos, ancestrais, descendentes,
etc.

Um documento HTML cria o que chamamos de árvore do documento no qual os elementos da

marcação se relacionam entre si de maneira idêntica como se relacionam os membros de uma
família.

Conforme a árvore do documento, alguns

“graus de parentesco” entre os elementos
HTML do documento representados no
diagrama são expressos a seguir:
 HTML é pai de HEAD e BODY
 UL é pai de três LI
 TITLE é filho de HEAD
 Os três LI são irmãos
 UL, BODY e HTML são ancestrais de LI
 TITLE e UL são descendentes de HTML

Essa regra demonstra o princípio de herança do CSS, pois todos os filhos de <body> herdarão
as formatações feitas no <body>.
Formatação de cores
60
As cores são aplicadas a quase todos os elementos que compõem uma página web, sejam eles
texto, tabelas ou fundos de página. No CSS podemos representar cores em 4 (quatro) diferentes
formas: (1) código hexadecimal, (2) nome de cores (palavra-chave), (3) valores RGB e (4) HSL –
CSS3.

Propriedade color
Essa propriedade destina-se a definir a cor dos conteúdos textuais (ou cor de frente) de
elementos da marcação. Os valores possíveis são: um valor hexadecimal (começa com um sinal de
cardinal “#” seguido de seis números hexadecimais, 0-9, A-F). A grafia dos números hexadecimais é
insensível ao tamanho da caixa, isto é, letras maiúsculas e minúsculas são igualmente válidas.

O valor de uma cor hexadecimal é determinado decompondo-se o número hexadecimal que

representa a cor em três grupos de dois números hexadecimais – essa estrutura para o código
hexadecimal é denominada tripleto hexadecimal.
Cada um dos três grupos representa as cores vermelha, verde e azul, respectivamente, que
entram na composição final da cor.

Cada grupo de dois números hexadecimais é representado por 1 byte (28 = 256), que por sua vez
é capaz de armazenar um número na faixa de 0 a 255 (em notação decimal) ou 00 a FF (em notação
hexadecimal) ou ainda uma percentagem na faixa de 0% - 100%.

É sabido que na faixa de 0 a 255 existem 256 números. Assim, o total de combinações de
números para formação de cores é igual a 256 x 256 x 256 = 16.777.216, o que significa que o
uso dessa representação de cores permite que se defina mais de 16 milhões de cores.

Pensemos no seguinte valor para a propriedade color: #FF4C00; vamos decompor em três
grupos de dois números, assim, a cor é obtida pela mistura da cor vermelha em quantidade FF
de vermelho (R), 4C de verde (G) e 00 de azul (B). Transformando os três grupos hexadecimais
em decimais, teremos:
 61

Transformando os três números decimais (255, 76, 00) em percentagem, temos:

255 * 100/255 = 100%

Assim, a cor #FF4C00; é resultante de uma mistura cujo componente de cor
76 * 100/255 = 29.8% vermelha entra com uma intensidade de 100%, de cor verde 29.8% e de cor
00 * 100/255 = 0% azul 0%.

As seguintes sintaxes para declaração dessa cor são válidas (representam a mesma cor):
color: #FF4C00; color: rgb(255,76,0); color: rgb(100%, 29.8%, 0%);

As folhas de estilo admitem que a declaração de cores com uso de números hexadecimais seja
abreviada para aquelas cores nas quais cada um dos três grupos seja representado por dígitos
iguais, ou seja, números hexadecimais no formato #FF00CC;  #F0C; (ficando subentendido
que cada um dos três dígitos da forma abreviada é dobrado).

nome da cor
Outra forma de declarar cores é com uso de valores expressos por palavras-chave. As
especificações para as CSS preveem três grupos de palavras-chave, a saber: (i) palavras-chave
para definir cores básicas3, (ii) palavras-chave para definir cores estendidas4 ou cores X11 e
(iii) palavras-chave para definir cores de acordo com o sistema operativo5 (esse grupo é constituído
de 28 palavras-chave que se referem a componentes da interface gráfica do sistema operativo do usuário) .

3
Esse grupo é constituído de 16 palavras-chave, a saber: aqua, black, blue, fúchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white e yellow.

4
Esse grupo é constituído de 147 palavras-chave (incluindo as 16 para cores básicas), como: brown, coral, cian, dimgray, indigo,
khaki, mintcream, mistyrose, sienna, turquoise, tomato, whitesmoke, etc).

5
As cores previstas são: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow,
ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground,
valores RGB (Red, Green, Blue)
62
RGB é uma sigla que representa a combinação entre três cores: Red, Green e Blue. O RGB
utiliza a combinação dessas três cores para gerar outras cores. Um valor de cor RGB é
especificado com: rgb (red, green, blue). Cada parâmetro define a intensidade da cor e pode ser
um número inteiro entre 0 e 255 ou um valor de percentagem (0% até 100%).

As CSS3 criaram uma extensão do valor RGB denominada RGBA, para definição de cores. Esse
valor acrescenta um quarto parâmetro à declaração (red, green, blue, alpha). O quarto parâmetro,
denominado alpha, define a opacidade (ou transparência) da cor.

HSL (hue, saturation, Lightness)

As CSS3 criaram o valor HSL, para definir cores. A declaração de cores com uso de
HSL não existia nas CSS2.1. Ela permite que o “desenvolvedor” declare as cores
com uso de três parâmetros: Hue (tom); saturation (saturação) e lightness
(luminosidade)

A sintaxe geral para a declaração com uso desse valor é a seguinte:

color: hsl (valor-1, (valor-2)%, (valor-3)%); O primeiro (valor-1) é para o tom (hue)
da cor. O seu valor é um número que representa a medida de um ângulo (varia de 0
grau a 360 graus) apontando para um tom de cor na roda de cores.

Ângulo Tons de cor

0 Vermelho
60 Amarelo
120 Verde
180 Ciano
240 Azul
300 Púrpura
360 Vermelho

O segundo (valor-2) é para a saturação da cor. O seu valor é expresso em

percentagem. (0% - 100%).

O terceiro (valor-3) é para a luminosidade. O seu valor é expresso em percentagem.

(0% - 100%).
HSLA (hue, saturation, Lightness, Alpha)
As CSS3 criaram uma extensão do valor HSL denominada HSLA, para definição de
cores. Esse valor acrescenta um quarto parâmetro à declaração (hue, saturation,
lightness, alpha). O quarto parâmetro, denominado alpha, define a opacidade (ou
transparência) da cor.

InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow,

Window, WindowFrame, WindowText
 63
Os três parâmetros têm o mesmo significado que têm quando se usa a declaração
HSL, e o quarto é um valor compreendido entre 0 e 1 (o valor 0 representa
transparência total, e o valor 1, opacidade total).

Unidades de medida

O CSS trabalha com diversas unidades de medida. Usa-se uma unidade de medida, geralmente,
para definir o tamanho e a altura de um elemento. Entretanto, existem diversas outras aplicações,
como, por exemplo, definir a margem, o padding, a localização de determinado elemento na tela,
entre outros. Diversas propriedades do CSS necessitam da definição de um tamanho, como:
width, margin, padding, font-size, border-width entre outros. O valor é definido com um número
seguido da unidade de medida, por exemplo, 2px.

O importante é lembrar que o espaço em branco não pode aparecer entre o número e a unidade
de medida. Assim, o valor 2 px não é válido. Além disso, valores negativos são permitidos em
algumas propriedades, como a propriedade margin. As unidades de medidas podem ser
classificadas como absolutas e relativas.

medidas absolutas
São unidades com tamanhos fixos e conhecidos. São ideais para utilização quando o tipo e o
tamanho da media são conhecidos. São unidades de medidas de comprimento definidas nos
sistemas de medidas pela física, tais como: centímetro, polegada, etc. e a unidade pixel para o
ângulo visual.

Unidade Descrição
cm Centímetro
mm Milímetro
in Polegada (1 in = 96px = 2.54cm)
pt Point (1pt = 1/72 de 1in)
pc Picas (1pc = 12pt)

medidas relativas
O tamanho de um elemento é relativo ao tamanho de outro elemento. As unidades de medidas
relativas são redimensionadas melhor entre diferentes tipos de medias.
 Unidade Descrição
64
Relativo ao tamanho da fonte base. Por exemplo, se a font-size da <body> é 12px, e o
em tamanho do elemento for definido com 2em, isso definirá que o seu tamanho será de 24px.
Percentagem. Define o tamanho de um elemento em relação ao tamanho da tela. Por
% exemplo, <body style="width:50%;"> definirá que o tamanho da <body> ocupa 50% da tela,
independente da resolução.
px Pixel. Define o tamanho do elemento em relação ao tamanho do pixel da tela.

As unidades de medida recomendadas para a utilização no layout para telas são: em, px e %.
Para medias impressas recomenda-se o uso das unidades: em, cm, mm, in, pt, pc e %.

Vinculando folhas de estilo a documentos

Existem 4 (quatro) formas para vincular o código CSS a uma página. As folhas de estilo podem
ser escritas no próprio documento HTML ao qual serão aplicadas -style como atributo/tag – ou
ser arquivos externos independentes, gravados com a extensão (.css).

Estilos inline
O método direito e simples de aplicar estilos a um elemento da marcação é com o emprego do
atributo style da HTML. O “desenvolvedor” escreve as regras de estilo directamente dentro da tag
de abertura do elemento a estilizar, conforme abaixo:
<tag style ="propriedade: valor; ">

Estilos incorporados
Outro método de escrever a folha de estilo no próprio documento HTML é com o emprego do
elemento style. A tag <style> deve estar contida na secção do <head> … </head>. O
“desenvolvedor” escreve as regras de estilo dentro das tags <style> … </style>, conforme abaixo:

<style type ="text/css"> inserção das regras de estilo </style>

Estilos externos
A folha de estilo é aquela que não foi escrita no documento HTML. É um arquivo de texto contendo
as regras de estilo e os comentários CSS. O mesmo arquivo deve ser gravado com a extensão
(.css). O “desenvolvedor” vincula uma folha de estilo externa a um documento empregando o
elemento <link>. O elemento <link> deve estar contido na secção do <head> … </head> do
documento HTML. A seguir, o uso de link para associar (ou vincular) uma folha de estilo ao
65
documento:
<link rel ="stylesheet" type ="text/css" href ="URL">

Estilos importados
Nesse método, o “desenvolvedor” vincula uma folha de Estilo externa a um documento usando a
directiva @import dentro do elemento <style> … </style>. A sintaxe para esse tipo de vinculação
é mostrada a seguir:

<style type ="text/css"> @import url("nome.css"); </style>

<style type ="text/css"> @import "nome.css"; </style>

Formatação de textos e fontes

Através da utilização de folhas de Estilo podemos especificar quase tudo aquilo que
especificamos num programa de processamento de texto (por exemplo, o Word). Existem
propriedades de formatação normal de texto e propriedades de margens e afastamentos do
mesmo.

Para a formatação normal das letras, existem as seguintes propriedades e valores:

font
É a versão shorthand para estilação de fontes. Também chamada versão reduzida que permite
definir diversas propriedades da fonte em uma só linha. Por exemplo, podemos definir em uma
só linha que a fonte será [font-style: italic;] [font-weight:bold;], [font-size:12px;] [font-
family:verdana;]. Resumindo: font: italic bold 12px verdana;

font-size
Especifica o tamanho das letras, ou seja, permite alterar o tamanho da fonte (o tamanho pode
ser definido usando diversos tipos de unidades de medida). Por exemplo: font-size: 10px;
(modifica o tamanho da fonte para 10 pixels), font-size: 150%; (aumenta o tamanho em termos
percentuais), font-size: 12pt; (define o tamanho da fonte em 12pt (points).
font-weight
66
Permite alterar a espessura da fonte. Por exemplo: font-weight: bold; (modifica a fonte para
negrito), font-weight: 100 – 900; (modifica para a espessura mais fina a espessura mais grossa
– a escala de valores varia entre 100 a 900, incrementando de 100 em 100).

font-variant
Define se o texto deve ser exibido em caixa alta ou não. Por exemplo: font-variant: small-caps |
normal; (converte todas as letras para caixa alta. No entanto, as letras maiúsculas convertidas
aparecem em um tamanho de fonte menor do que as letras maiúsculas originais no texto)

font-style
Altera o estilo da fonte para itálico ou normal. Por exemplo: font-style: italic | normal | oblique;
(formata a fonte em itálico; formata a fonte para o padrão normal; formata a fonte para o padrão
oblíquo).

font-family
Modifica a família da fonte. Só são de facto aplicadas as fontes suportadas pelo navegador. Por
exemplo: font-family: nome da fonte 1, nome da fonte 2, etc… (podemos oferecer fontes
alternativas caso a primeira opção não seja suportada pelo navegador. Nesse caso, basta separar
as fontes por vírgula. Assim, a primeira opção será fonte 1, porém, se a mesma não estiver
instalada no cliente, o CSS tentará a fonte 2, e assim sucessivamente). Para fontes com mais de
uma palavra, como, o caso do Times New Roman, deve-se colocar entre aspas duplas (“).

line-height
Define o espaçamento entre as linhas do texto. Por exemplo: font-height: (valor)px; (modifica o
espaçamento entre as linhas do texto).

letter-spacing
Define o espaçamento entre cada caractere de um termo. Por exemplo: letter-spacing: (valor)px;
(modifica o espaçamento para n valor entre cada caractere).
Word-spacing
67
Define o espaçamento entre as palavras. Por exemplo: word-spacing: (valor)px; (define um
espaçamento de n valor entre cada palavra).

text-align
Permite alinhar o texto. Por exemplo: text-align: justify | center | right | left; (permite alinhamento
horizontal: justificado, centralizado, à direita e à esquerda).

text-decoration
Especifica uma decoração para o texto. Por exemplo: text-decoration: none | overline | underline
| line-through; (texto simples, cada linha do texto fica marcada com uma linha superior; cada linha
fica marcada com um sublinhado; cada linha tem seu texto riscado).

text-transform
Permite controlar a capitalização do texto. Por exemplo: text-transform: none | uppercase |
lowercase | capitalize; (apresentação do texto simples; transforma todas as letras para maiúsculo;
transforma todas as letras para minúsculo; transforma apenas as letras iniciais em maiúsculas).

text-indent
Define a indentação de um parágrafo. Por exemplo: text-indent: (valor)px; (define que o
parágrafo terá n valor de indentação na primeira linha).

text-shadow
Cria um efeito de sombra sob o texto. A sintaxe geral para escrever uma regra CSS que contenha
esta propriedade é a seguinte:

selector {
text-shadow: medida-1 medida-2 medida-3 cor;
}

Onde:
medida-1  é o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor
68
negativo);
medida-2  é o deslocamento da sombra para baixo (valor positivo) ou para cima (valor
negativo);
medida-3  é o raio para um efeito blur na sombra;
cor  é a cor da sombra.

Os valores de medida-3 e de cor são opcionais. Omitir a medida-3 significa que não haverá um
efeito blur na sombra, omitir a cor significa que a sombra terá a mesma cor definida para o texto.
Os valores medida-1 e medida-2 são obrigatórios. Ressaltar que o valor da cor pode ser
declarado depois das medidas ou antes, é indiferente.

Formatação de fundo

A propriedade background é um poderoso recurso que permite criar plano de fundo com imagens
e cores para os elementos do HTML. Uma das finalidades que mais se usa a background é para
decorar um site com uma imagem de fundo.

background (declaração abreviada)

Esta é a maneira abreviada que o “desenvolvedor” escreve uma regra para as propriedades do
fundo. Por exemplo: [background-image] [background-position] [background-repeat]
[background-attachment] [background-color];.

background-image
Define uma imagem de fundo. As propriedades válidas para a inserção de uma imagem como
fundo são:
background-image: url (caminho/imagem. extensão);
background-image: url (‘caminho/imagem. Extensão’);
background-image: url ("caminho/imagem. extensão");
background-image: linear-gradient6 ((valor)deg, cor-1, cor-2);
background-image: radial-gradient7 ((valor-1)px (valor-2)px, cor-1, cor-2);

6
Gradiente linear.
7
Gradiente radial.
background-position
69
Define como e onde a imagem de fundo é posicionada. As propriedades válidas para o
posicionamento de uma imagem como fundo são:
background-position: (valor-X)px (valor-Y)px; | x% y% | top left/center/right |
center left/center/right | bottom left/center/right | top | right | bottom | left

background-repeat
Por padrão do CSS, toda imagem de fundo é repetida na horizontal e na vertical enquanto houver
espaço de plano de fundo. Entretanto, esse comportamento pode ser alterado com a propriedade
background-repeat. As propriedades válidas para a propriedade background-repeat são:
background-repeat: no-repeat8 | repeat9 | repeat-x10 | repeat-y11

background-attachment
Define se a imagem será fixada ou não na página. Caso, a página web possuir uma grande
quantidade de texto, ao rolar a página para baixo, chegará um ponto onde a imagem de fundo,
por maior que seja, acabará. Um recurso interessante, nesse caso, é deixar a imagem de fundo
estática, ou seja, ao rolar a página para baixo apenas o texto e os demais elementos se
movimentam, mas a imagem permanece fixa. As propriedades válidas para a propriedade
background-attachment são:
background-attachment: fixed12 | scroll13

background-color
Define a cor do fundo da página. Os valores válidos para a propriedade destinada a estilizar a cor
do fundo são:
background-color: #código hexadecimal; | rgb(red,green,blue); |
rgba(red,green,blue,opacidade); | hsl(360,100%,0%); | hsla(0,0%,100%,0.4); |
palavra-chave (nome da cor) | transparent

8
Imagem não repete.
9
Imagem repete na vertical e horizontal.
10
Imagem repete na horizontal.
11
Imagem repete na vertical.

12
Imagem permanece fixa em relação à viewport (janela do navegador) e não rola juntamente com o conteúdo.
13
Imagem não permanece fixa em relação à viewport (janela do navegador) e rola juntamente com o Conteúdo (este é o valor padrão
– scroll).
A propriedade CSS border
70
Em linhas gerais, podemos definir bordas como elementos decorativos a serem anexados aos
quatro lados dos box’s. As CSS possibilitam especificar a espessura, cor, estilo para as bordas,
bem como definir cada uma das quatro bordas individualmente.

As propriedades para estilizar as bordas são as seguintes: border (declaração única) – esta é a
maneira abreviada do “desenvolvedor” declarar todos os valores para as propriedades das bordas
(border-width, border-style e border-color) em uma declaração única.

Alternativamente, pode-se usar a sintaxe abreviada, lembrando que a declaração de valores

para qualquer propriedade CSS que admita uma sintaxe abreviada pode ser feita de quatro
maneiras.

border-width
Essa propriedade destina-se a definir a espessura da borda. Os valores possíveis são:
border-width: uma medida CSS (px, pt, em, cm, …) | palavra-chave (thin–fina)
(médium–média) (thick–grossa)
É possível definir a espessura das bordas individualmente, uma para cada lado do box, conforme
a sintaxe mostrada: border-[top | right | bottom | left]-width.

border-width: (valor-1) px (valor-2) px (valor-3) px (valor-4) px; /* top | right | bottom | left */
border-width: (valor-x) px (valor-y) px (valor-z) px; /* top | (right e left) | bottom*/
border-width: (valor-a) px (valor-b) px; /* (top e bottom) | (right e left) */
border-width: (valor-c) px; /* (top | right | bottom | left) */

border-style
Esta propriedade destina-se a definir o estilo da borda. Os valores possíveis são: border-style:
none (define espessura 0 para a borda, ou seja, ausência de borda) | hidden (equivalente ao efeito none, mas com
precedência na resolução de bordas conflituantes) | dotted (borda pontilhada) | dashed (borda tracejada) | solid
(borda contínua ou sólida) | double (borda constituída de duas linhas contínuas -borda dupla) | groove (borda com
aparência entalhada) | ridge (borda com aparência de ressalto) | inset (borda em baixo-relevo) | outset (borda
em alto-relevo).
É possível definir o estilo das bordas individualmente, uma para cada lado do box, conforme a
71
sintaxe mostrada: border-[top | right | bottom | left]-style.

border-style: (valor-1) (valor-2) (valor-3) (valor-4); /* top | right | bottom | left */

border-style: (valor-x) (valor-y) (valor-z); /* top | (right e left) | bottom*/
border-style: (valor-a) (valor-b); /* (top e bottom) | (right e left) */
border-style: (valor-c); /* (top | right | bottom | left) */

border-color
Esta propriedade destina-se a definir a cor da borda. Os valores possíveis são:
border-color: #código hexadecimal; | rgb (red, green, blue); | rgba (red, green,
blue, opacidade); | hsl (360,100%,0%); | hsla (0,0%,100%,0.4); | palavra-chave
(nome da cor) | transparent

É possível definir a cor das bordas individualmente, uma para cada lado do box, conforme a
sintaxe mostrada: border-[top | right | bottom | left]-color.

border-radius (borda arredondada)

Essa propriedade foi criada pelas especificações para as CSS3 e destina-se a definir
um raio de curvatura a ser aplicado nos quatro cantos de uma box. Convém ressaltar
que o raio de curvatura será aplicado independentemente de o box ter ou não uma
borda.

Listas

list-style
Notação de atalho para a definição de list-style-type | list-style-image | list-style-position no
mesmo lugar na folha de estilo.

list-style-type
Especifica a aparência do marcador do item de lista quando o list-style-image está definido para
none. Os seus valores são: list-style-type: disc | circle | square | decimal | lower-roman | upper-
roman | lower-alpha | upper-alpha | none | leading-zero | western-decimal | lower-greek | lower-
latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-
iroha | katakana-iroha.
list-style-image
72
Define a imagem que será usada como marcador de item de lista. O seu valor é: URL.

list-style-position
Especifica a posição da caixa do marcador em relação a caixa de conteúdo do item da lista. Os
seus valores são: inside | outside.

Propriedade CSS para layout

margin
As propriedades para as margens, definem a dimensão de cada uma das quatro margens de um
elemento HTML. Os tamanhos das margens externas da box de elemento HTML podem ser
definidos individualmente com as propriedades: margin-[left | top | right | bottom]. Os seus valores
são: auto (o tamanho da margem é calculado automaticamente pelos navegadores) , comprimento (um valor
CSS para comprimento – px, em, pt, etc. -), percentagem (um valor expresso em percentagem). É válido
declarar valores negativos para margem, com o objectivo de sobrepor elementos.

padding
A propriedade padding se destina a criar um espaçamento interno em uma box entre seus 4
(quatro) lados e a área de conteúdo da box. As propriedades para declarar padding, definem a
dimensão de cada uma dos 4 (quatro) espaçamentos entre a área das bordas e a área de
conteúdo de um elemento HTML e seguem: padding-[ top | right | bottom | left]. Os seus valores
são: comprimento (um valor CSS para comprimento (px, em, pt, etc.)), percentagem (um valor expresso em
percentagem). Os valores declarados com uso de percentagem são calculados, para os 4 (quatro)
lados da box, tornando-se a percentagem em relação à largura (width) da box. Importa referir que
não é válido declarar valores negativos para padding.

Tanto margin quanto padding podem aceitar de um a quatro valores como descrito a seguir:
(um valor) aplicado a todos os lados;

(dois valores) o primeiro é aplicado às partes (superior e inferior), e o segundo à (esquerda e à direita).

(três valores) o primeiro valor é aplicado à parte superior, o segundo (à esquerda e à direita), e o terceiro
à parte inferior.
(quatro valores) aplicados às partes superior, direita, inferior e esquerda, respectivamente.
73
Propriedades de bloco

Os elementos de bloco são aqueles que são formatados visualmente como blocos. Um parágrafo
ou uma lista, por exemplo, é um bloco.

bottom, left, right, top

Especifica o quão distante a parte inferior, esquerda, direita ou superior da margem de conteúdo
está da parte inferior, esquerda, direita ou superior do bloco que a contém. Os seus valores são:
<length> | <percentagem> | auto.

direction
Especifica a direcção do fluxo da caixa inline, a direcção incorporada do texto, layout da coluna
e excesso de conteúdo. Os seus valores são: ltr | rtl.

display
Especifica como o conteúdo de um bloco deve ser criado. Os seus valores são: display: run-in |
inline | block | list-item | compact | marker | table | inline-table | table-row-group | table-column-
group | table-row | table-header-group | table-footer-group | table-cell | table-caption | none.

float
Especifica se uma caixa deve flutuar para a esquerda, para a direita ou de forma alguma. Os seus
valores são: none | left | right.

position
Determina quais algoritmos de posicionamento serão usados para calcular as coordenadas de
uma caixa. Os seus valores são: static (é o valor padrão da propriedade position) | relative (é
colocado em uma posição relativa à sua posição natural) | absolute (é colocado em uma posição
relativa à posição da box do elemento HTML ancestral mais próximo com position diferente de
static) | fixed (é colocado em uma posição relativa à página e não acompanha a rolagem do
conteúdo).
z-index
74
Especifica o nível de pilha da caixa e se a caixa estabelece um contexto de empilhamento local.
Os seus valores são: auto | integer.

Propriedade de Interface do usuário

cursor
Especifica o tipo de cursor que exibe um mecanismo de ponteiro. Tem como valores os seguintes:
cursor: auto | crosshair | default | e-resize | grab | help | move | n-resize | ne-resize | nw-resize |
pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | not-allowed | no-drop |
alias | cell | all-scroll | contexto-menu | copy | grab | grabbing | row-resize | vertical-text | zoom-in
| zoom-out | url14

height e width
A altura e a largura dos boxes dos elementos HTML podem ser definidas com as propriedades
height e width respectivamente. Os seus valores podem ser: auto (a altura ou largura são calculadas
automaticamente pelos navegadores), <length> (a medida corresponde à largura ou a altura) e x% (a medida
correspondente à largura ou a altura como percentagem das dimensões do elemento HTML pai) .

opacity
Pode-se definir a opacidade dos elementos HTML com a propriedade opacity. O seu valor varia
entre 0 (totalmente transparente) e 1 (sem transparência, padrão).

Pseudo classes

Os efeitos em links são possíveis através de declarações de regras de estilo para as

Pseudoclasses do elemento <a> da linguagem HTML.

14
cursor: url(nome.gif), auto;
sintaxe
75
A sintaxe das pseudoclasses é a seguinte: selector: pseudoclasse {propriedade: valor;}

As classes em CSS podem também ser utilizadas com pseudoclasses. Esta regra permite que o
“desenvolvedor” defina diferentes efeitos para links localizados em diferentes lugares em uma
mesma página web.

O selector: pseudoclasse para links aceitam quatro pseudoclasses para links:

a: link (define o estilo do link no estado inicial)
a: visited (define o estilo do link visitado)
a: hover (define o estilo do link quando passa-se o mouse sobre ele)
a: active (define o estilo do link activo – o que foi clicado -)

Prioridade nas declarações para links

É importante a ordem de definição das regras para os estados dos links.
Lembre-se de que pelo “efeito cascata”, quando duas ou mais regras são
conflituantes aquela ocupando uma posição na folha de estilo é sobrescrita (“perde
para”) uma regra posterior a ela na folha.

Se porventura definimos a: hover ANTES de a: visited, esta prevalecerá sobre a:

hover e em consequência, o link visitado pela primeira vez assumirá a regra
definida em a: visited e a partir de então a: hover não funcionará naquele link pois
a: visited prevalecerá sobre a: hover.

Algumas aplicações em CSS3

Aplicando filtros CSS3

O avanço das folhas de estilo está permitindo que páginas web evoluam constantemente e
permitindo não ser mais necessário contar com scripts externos para criar efeitos
verdadeiramente surpreendentes. Para garantir uma melhor compatibilidade dos navegadores –
visto que nem todos navegadores suportam alguns recursos das CSS3 – é necessário fazer uso
do prefixo -moz- (Firefox), -webkit- (Opera, Chrome, Safari), -ms- (Internet Explorer).
Blur ()
76
O efeito blur – embaçado – pode ser aplicado as imagens, especificando o raio do blur, em pixels,
para alcançar o efeito desejado. A função de filtragem blur() é conhecido também como Gaussian
blur ou desfoque gaussiano. O maior ou menor grau de desfoque é obtido pelo chamado raio de
desvio da curva de Gauss. O raio de desvio é o parâmetro da função e deve ser expresso em
uma unidade de medida CSS, excepto percentagem (%) que não é válida e medidas negativas
que também são inválidas.

A sintaxe é:

selector {
filter: blur(px) | none;
}

brightness ()
O efeito obtido com a aplicação desta função de filtragem é o de aumentar ou diminuir o brilho da
imagem. O valor possível para o parâmetro desta função é a percentagem (%). Os valores
negativos são inválidos. O valor igual a 0% ou 0 resulta em imagem completamente escura (preta)
e o valor igual a 100% ou 1 é o valor padrão, isto é, a imagem original. Para valores maiores que
100% são permitidos e resultam em imagens mais brilhantes que a original.

contrast ()
O efeito obtido com aplicação desta função de filtragem é o de aumentar ou diminuir o contraste
da imagem. O valor CSS possível para o parâmetro desta função é a percentagem. Os valores
negativos são inválidos. O valor igual a 0% ou 0 resulta em imagem com máximo contraste (cinza)
 77
e o valor igual a 100% ou 1 é o valor padrão, isto é, a imagem original. Também são permitidos
valores maiores que 100% e resultam em imagens com menor contraste que a original.

grayscale ()
O efeito obtido com aplicação desta função de filtragem é o de passar a imagem para tons de
cinza. O valor CSS possível para o parâmetro desta função é a percentagem. Os valores
negativos são inválidos. O valor igual a 100% ou 1 resulta em imagem totalmente em tons de
cinza e o valor igual a 0% ou 0 é o valor padrão, isto é, a imagem original. Os valores maiores
que 100% são permitidos, mas causam o mesmo efeito que o valor 100% ou 1.

invert ()
O efeito obtido com aplicação desta função de filtragem é o de inverter as cores da imagem. O
valor CSS possível para o parâmetro desta função é a percentagem. Os valores negativos são
inválidos. O valor igual a 100% ou 1 resulta em imagem com cores totalmente invertidas e o valor
igual a 0% ou 0 é o valor padrão, isto é, a imagem original. Os valores maiores que 100% são
permitidos, mas causam o mesmo efeito que o valor 100% ou 1.
 78

opacity ()
O efeito obtido com aplicação desta função de filtragem é o de aplicar opacidade na imagem. O
valor CSS possível para o parâmetro desta função é a percentagem. Os valores negativos são
inválidos. O valor igual a 0% ou 0 resulta em imagem totalmente transparente e o valor igual a
100% ou 1 é o valor padrão, isto é, a imagem original. Os valores maiores que 100% são
permitidos, mas causam o mesmo efeito que o valor 100% ou 1.

saturate ()
O efeito obtido com aplicação desta função de filtragem é o de saturar as cores da imagem. O
valor CSS possível para o parâmetro desta função é a percentagem. Os valores negativos são
inválidos. O valor igual a 0% ou 0 resulta em imagem não saturada e o valor igual a 100% ou 1 é
o valor padrão, isto é, a imagem original. Os valores maiores que 100% são permitidos e resultam
em supersaturação da imagem.
sepia ()
79
O efeito obtido com aplicação desta função de filtragem é o de converter as cores da imagem
para tons sépia. O valor CSS possível para o parâmetro desta função é a percentagem. Os
valores negativos são inválidos. O valor igual a 100% ou 1 resulta em imagem totalmente em tons
sépia e o valor igual a 0% ou 0 é o valor padrão, isto é, a imagem original. Os valores maiores
que 100% são permitidos, mas causam o mesmo efeito que o valor 100% ou 1.

hue-rotate ()
O efeito obtido com aplicação desta função de filtragem é o de converter as cores da imagem
para tons em acordo com o ângulo da propriedade hue da cor. O valor CSS possível para o
parâmetro desta função é o ângulo. Os valores negativos são inválidos. O valor igual a 0% ou 0
é o valor padrão, isto é, a imagem original.

drop-shadow ()
O efeito obtido com aplicação desta função de filtragem é o de sombras na imagem. Os valores
CSS possíveis para o parâmetro desta função são duas ou três unidades de medida de
comprimento CSS e uma cor. Os valores declarados nos parâmetros desta função têm o mesmo
significado e finalidades dos valores declarados para a propriedade CSS box-shadow, ou seja,
o primeiro valor define um offset horizontal para a sombra o segundo um offset vertical e o
terceiro, opcional, um raio para blur da sombra. Não existe um quarto valor para definir a
expansão ou contração da sombra tal como existe para a propriedade box-shadow. O quarto
80
parâmetro da função define a cor da sombra.

Layout multicolunas com CSS3

A construção de layouts com uso das funcionalidades desse módulo resulta em vantagens,
principalmente em relação à flexibilidade do layout e à acomodação do fluxo de conteúdos pelas
colunas, de modo que eles possam pertencer a colunas diferentes.

No modelo tradicional dos boxes CSS, os conteúdos inseridos em um elemento container fluem
da esquerda para a direita (em escrita ocidental) e de cima para baixo, ocupando a box container.
Entretanto, o modelo de boxes CSS multicolunas, definido nas especificações para as CSS3,
criou funcionalidades capazes de fazer com que os conteúdos inseridos em um elemento
container fluam por colunas dentro do elemento container.

O layout multicolunas é regido pelas seguintes directrizes: (i) as colunas ou boxes colunas se
distribuem, pelo elemento container, em linhas; (ii) tal como ocorre com as células de uma tabela,
os boxes colunas de uma linha são ordenados em sequência inline dentro do elemento container;
(iii) a largura de uma coluna é o comprimento da box coluna na direcção inline; (iv) a altura de
uma coluna é o comprimento da box coluna na direcção do bloco container; (v) todas as boxes
colunas em uma linha têm a mesma largura e a mesma altura; (vi) as boxes colunas em uma
linha são separados por um espaço denominado column-gap; (vii) o espaço column-gap, entre
as boxes colunas, poderá conter um separador denominado column-rule; (viii) todos os espaços
column-gap e separadores column-rule (se existirem) têm a mesma largura; e (ix) não é possível
declarar regras CSS para boxes colunas individualmente (por exemplo: o fundo, as cores, as
margens e as bordas de uma determinada coluna não são passíveis de estilização.
A seguinte figura mostra os locais que são estilizados pelas propriedades column-width,
81
column-gap e column-rule em um elemento multicolunas.

As propriedades CSS para criar e estilizar elementos multicolunas são descritas a seguir:

column-count
Essa propriedade se destina a definir o número de colunas a ser criado em um elemento. Os
valores possíveis para essa propriedade são: auto | número inteiro. O valor padrão é auto e
significa que não há divisão em colunas ou que a divisão é definida por outra propriedade (por
exemplo: column-width). O valor inteiro é um número inteiro maior do que zero, definindo
quantidade de boxes colunas a serem inseridos no elemento multicolunas.

column-width
Essa propriedade se destina a definir a largura das colunas a serem criadas em um elemento.
Os valores possíveis para essa propriedade são: auto | medida CSS. O valor padrão é auto e
significa que não há divisão em colunas ou que a divisão é definida por outra propriedade (por
exemplo: column-count). O valor da medida CSS deve ser maior que 0 (zero), definindo a largura
dos boxes colunas a serem inseridos no elemento multicolunas.

Ao contrário da propriedade column-count, para a qual o número de colunas é fixo, essa

propriedade faz com que o número de colunas seja dinâmico, ou seja, a quantidade de colunas
necessárias para acomodar o conteúdo depende da resolução do dispositivo – viewport -.
column-gap
82
Essa propriedade se destina a definir a largura das colunas a serem criadas em um elemento.
Os valores possíveis para essa propriedade são: normal | medida CSS. O valor padrão é normal
e significa que o espaçamento entre colunas será calculado pelo navegador. O valor
recomendado pela especificação para a largura do espaçamento entre colunas é de 1em. O valor
para a medida CSS deve ser maior do que 0 (zero).

column-rule
Essa propriedade se destina a definir uma barra vertical entre as colunas. A barra será
posicionada no meio do espaçamento entre colunas e a propriedade permite que se defina a
espessura, estilo e cor da barra, de modo semelhante à definição de bordas CSS. Os valores
possíveis para essa propriedade são: uma medida CSS para espessura, um estilo de borda, uma
cor.

A sua sintaxe: column-rule: espessura | estilo de borda | cor;

Transformações com CSS3

Nas folhas de estilo CSS 3, foram adicionadas funcionalidades que permitem a manipulação da
estrutura de elementos, criação de animações e definição de transições. Porém, antes de
começarmos, é importante ressaltar que existem navegadores que ainda não suportam algumas
propriedades abaixo indicadas. Para colmatar essa situação é preciso o uso de prefixos, a saber:
-webkit- (chrome e safari), -moz- (firefox), -o- (opera), -ms- (Internet explorer).

transform
Um recurso bastante útil adicionado às CSS nível 3, é a propriedade transform, que permite ao
desenvolvedor front-end aplicar alguns efeitos visuais em elementos que antes só poderiam ser
obtidos através do uso de imagens. Por exemplo, para rotacionar um rectângulo (uma div, por
exemplo), incluindo seu conteúdo. Seria necessário criar uma imagem, aplicar a rotação desejada
e inseri-la como uma tag <img> ou como background da div.
A propriedade transform permite modificar as coordenadas espaciais de um elemento, alterando
83
a posição e o seu formato. Os seus valores são: rotate, translate, skew e scale.

rotate ()
A função rotate destina-se a rotacionar uma box, e sua sintaxe é: selector {transform: rotate (a);}
onde: O parâmetro (a) para essa função é uma medida CSS para ângulos15.

translate ()
Essa função destina-se a deslocar uma box na horizontal e na vertical ao mesmo tempo, sua
sintaxe é: selector {transform: translate (x, y);}

Onde: (x, y) são parâmetros dessa função e suas medidas CSS de comprimento. Caso um dos
parâmetros seja omitido, o parâmetro presente representa uma translação horizontal, e o outro
parâmetro será considerado 0 (zero), ou seja, não haverá translação vertical.

skew16 ()
Essa função destina-se a deslocar uma box na horizontal e na vertical ao mesmo tempo, sua
sintaxe é: selector {transform: skew (x, y);}

Onde os parâmetros x e y para essa função são medidas CSS para ângulos. Caso um dos
parâmetros seja omitido, o parâmetro presente representa uma translação horizontal, e o outro
parâmetro será considerado 0 (zero), ou seja, não haverá translação vertical.

scale ()
Essa função destina-se a expandir ou contrair as dimensões horizontal e vertical de uma box, sua
sintaxe é: selector {transform: scale (a, b);}

Onde os parâmetros a (define a transformação horizontal) e b (define a transformação vertical).

Ambos os parâmetros dessa função são um número positivo decimal maior que 1 (expansão) ou
menor que 1 (contração), que define o número de vezes que as medidas serão expandidas ou
contraídas.

15
As medidas para ângulos em CSS são: deg, grad, rad e turn.
16
skewX() e skewY().
Caso um dos parâmetros seja omitido, os dois parâmetros serão considerados iguais ao
84
parâmetro declarado, e a contração ou expansão será a mesma nas direcções horizontal e
vertical.

Transições
Segundo o consórcio W3C, a finalidade do módulo para transições é criar funcionalidades que
permitam ao autor definir uma mudança de valor de uma propriedade CSS, de modo que a
mudança de valor ocorra de forma suave, em um espaço de tempo especificado.

Normalmente, quando o valor de uma propriedade CSS é alterado, ocorre uma mudança
instantânea na renderização. Entretanto, as funcionalidades desse módulo visam a criar
mecanismos que permitam definir uma mudança de apresentação de forma suave ao longo de
um determinado tempo.

Vale ressaltar que nem todas propriedades CSS são elegíveis para transições. As especificações
para as CSS3 estabelecem que somente as propriedades animáveis (passíveis de ser animadas)
podem ser declaradas com transição. São apresentadas as propriedades CSS animáveis na
tabela:

Propriedade Tipo Propriedade Tipo

background-color cor outline-color cor
background-image somente gradientes outline-offset número inteiro
background-position medida CSS e % outline-width medida CSS
border-color cor padding-bottom
border-width medidas CSS padding-top
medida CSS
border-[top | left | right | bottom]-color cor padding-right
border-[top | left | right | bottom]-width padding-left
medidas CSS
border-spacing text-indent medidas CSS / %
bottom medidas CSS e % text-shadow sombra
color palavra-chave /
cor vertical-align
medidas CSS / %
crop rectângulo visibility visibilidade
font-size medidas CSS e % width
medidas CSS / %
font-weight número word-spacing
grid-* vários z-index integer
height zoom número
left
max-height
max-width medidas CSS e %
min-height
min-width
right
 top
85
letter-spacing medida CSS
Medida CSS, % e
line-height
número
margin-bottom
margin-top
medida CSS
margin-left
margin-right
opacity número

As propriedades para transições são: transition-property, transition-duration, transition-

timing-function, transition-delay e transition (função abreviada).

transition-property
Essa propriedade destina-se a definir a qual(is) propriedade(s) CSS será(ão) aplicada(s) a(s)
transição(ões). Os valores possíveis são: none | all ou uma lista dos nomes das propriedades às
quais serão aplicadas a(s) transição(ões). Essa lista deverá ter os nomes das propriedades
separados por vírgula. O valor inicial é all (todas as propriedades elegíveis para transição), e
essa propriedade não é herdável. Aplica-se a todos os elementos da marcação, bem como aos
Pseudo-elementos :before e :after.

transition-duration
Essa propriedade define a duração da transição. O valor dessa propriedade é o número de
segundos, expressando a duração da transição. No caso de uma lista de nomes das propriedades
às quais serão aplicadas transições, o valor dessa propriedade poderá ser também uma lista de
números de segundos, separados por vírgula, ou um só número de segundos válido para todas
as propriedades.

Caso a lista dos números de segundos não seja em quantidade igual ao número de propriedades,
a lista de segundos se repetirá até completar o total do número de propriedades. O valor inicial
para a duração da transição é 0 (zero) (a transição instantânea), e números negativos serão
considerados zero. Essa propriedade não é herdável e se aplica a todos os elementos da
marcação, bem como aos pseudo-elementos :before e :after.
transition-timing-function
86
Essa propriedade define a forma como a transição progride no tempo. Pode ser usado de duas
maneiras:

(i) uma é utilizando alguns valores já pré-definidos que são: linear (especifica um efeito de transição
que começa e termina com a mesma velocidade) | ease (padrão) (especifica um efeito de transição que: começa
devagar, então rápido, e no final devagar novamente) | ease-in (especifica um efeito de transição que começa
devagar) | ease-out (especifica um efeito de transição que termina devagar) e ease-in-out (especifica um efeito
de transição que começa e termina devagar).

(ii) e a outra é definindo uma função customizada, especificando quatro coordenadas para definir
a cubic bezier curve17. Para definir uma curva Bézier de transição personalizada, usamos a
função cubic-bezier (x1, x2, y1, y2), na qual os parâmetros têm o seguinte significado: x1 –
coordenada horizontal do ponto P1; x2 – coordenada vertical do ponto P1; y1 – coordenada
horizontal do ponto P1; y2 – coordenada vertical do ponto P2. Os valores possíveis para cubic-
bezier devem ser numéricos que vão de 0 a 1.

transition-delay
Essa propriedade define um tempo de espera para o começo da transição a ser contado a partir
do momento em que uma acção inicia a transição. O valor dessa propriedade é o número de
segundos expressando o tempo de espera.

transition
Essa propriedade é a forma abreviada de se declarar todas as propriedades para transição. A
sua sintaxe é:

selector {transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];}

[transition-property]  especifica a propriedade CSS que se deseja animar (all, background,

border, border-radius, font-size, padding, …);
[transition-duration]  especifica o tempo de execução em segundos ou milissegundos;
[transition-timing-function]  especifica o tipo de animação;

17
https://matthewlein.com/ceaser/
[transition-delay]  define quando a animação irá começar.
87
Gradientes18

Um gradiente consiste na transição gradual entre duas ou mais cores. No entanto, gradiente é
uma palavra que pode ter inúmeros significados. No contexto das CSS, gradiente é uma imagem
constituída de no mínimo duas cores, na qual a transição de uma cor para outra se faz de forma
gradual e suave, com uso de um efeito de esfumaçamento.

A função gradient do CSS3 é utilizada apenas incluindo um parâmetro na propriedade do

background-image. A sua sintaxe simples: background-image: linear-gradient (cor-1, cor-2, …);

A propriedade linear-gradient gera um efeito padrão do gradient onde é feita a transição de uma
cor para a outra em linha recta ou linear. Para entendermos, observe o exemplo abaixo:

Na linha 4 é utilizada a propriedade background-color para declarar a cor do fundo de tela caso
o navegador não suporte o efeito gradiente.

Na linha 5 e 6, a vírgula é utilizada para separar as cores que vão gerar o gradiente. As cores
podem ser declaradas pelo código hexadecimal, nome da cor, rgba, hsla, etc…

Podemos também definir a que direcção inicia o efeito gradiente com os parâmetros right | left |
top | bottom. A direcção também pode ser dada com graus (deg, rad, grad, turn).

18
http://www.westciv.com/tools/gradients/index.html.
radial-gradient
88
Também existe a possibilidade de gerar um gradiente circular, que vem de dentro para fora em
forma de círculo. Ressaltar que a primeira cor declarada inicia o gradiente de dentro para fora.
Por exemplo:

O radial-gradient padrão vai gerar um gradiente circular, mas o desenvolvedor pode forçar que o
mesmo seja renderizada de forma diferente com o parâmetro circle closest-side (esse recurso vai
centralizar mais o gradiente para o centro), conforme o exemplo de código abaixo:

Assim, como na propriedade linear-gradient, o radial-gradient também tem alguns parâmetros

para alterar a posição de inicio do gradiente. A seguir os elementos que podem ser utilizados:
closest-corner, closest-side, farthest-corner, farthest-side.

Algumas ferramentas online para gerar gradiente em CSS:

 Ultimate CSS Gradient Generator – ColorZilla (http://www.colorzilla.com/gradient-editor/)
 CSS Gradient Background Maker19 – Microsoft / Internet Explorer
 Grad3 (http://grad3.ecoloniq.jp/)
 CSS3Gen (http://css3gen.com/gradient-generator/)

19
(https://developer.microsoft.com/en-us/microsoft-edge/testdrive/)
Inserindo várias imagens de fundo
89
O uso de CSS3 permite ao desenvolvedor inserir múltiplas imagens por elemento simplesmente
separando por vírgulas a propriedade background ou background-image.

Referências bibliográficas

1. COELHO, Pedro. HTML & XHTML. 2ª ed. FCA – Editora de Informática, Lda. 2001.

2. FIGUEIREDO, Bruno. Web Design: Estrutura, concepção e produção de sites Web. 2ª

ed. act. e aumentada. FCA – Editora de Informática, Lda. 2004.

3. FREEMAN, Elisabeth; FREEMAN, Eric. Use a cabeça: HTML com CSS e XHTML. Rio de
Janeiro: Alta Books, 2008.

4. SCHEIDT, Felippe Alex. Fundamentos de CSS: Criando Design para Sistemas Web. 1ª
ed. Foz do Iguaçu, 2015.

5. LEMAY, Laura. Aprenda a criar páginas web com HTML e XHTML em 21 dias. Tradução:
Aldir J. C. C. da Silva/Flávia B. Cruz/Lavio Pareschi. Revisão Técnica: Marcos Jorge. São
Paulo: Pearson Education do Brasil, 2002.

6. SILVA, Maurício Samy. CSS3: desenvolva aplicações web profissionais com uso dos
poderosos recursos de estilização das CSS3. São Paulo: Novatec Editora, 2012.
Unidade 5
JavaScript
Unidade V JavaScript
90
Antecedentes da linguagem…
A história começa no ano de 1994, quando a Sun Microsystems tinha acabado de construir uma
nova linguagem de programação que se destinava a ser utilizada em chips para electrónica de
consumo, por exemplo, torradeiras, geladeiras, remotos controles, etc. Inicialmente chamada de
Oak, a nova linguagem foi finalmente baptizada de Java, em homenagem a um café da Califórnia
(EUA) que era habitualmente frequentado pela equipa que desenvolveu (Java Development
Team da Sun). A ideia era revolucionária: pretendia-se que o código máquina (o resultado de
uma compilação) Java pudesse ser executado em diversos tipos de hardware, de fabricantes
distintos e com arquitecturas completamente diferentes.

A ideia de independência do código em relação à plataforma de hardware utilizada era bastante

nova na altura. Pretendia-se evitar a necessidade de recompilar todo o código existente numa
aplicação cada vez que se mudava de processador (isto era particularmente importante no caso
da aplicação em electrónica de consumo, porque é muito mais difícil voltar a gerar o código que
está armazenado em chips de hardware).

Não passaria pela cabeça de ninguém, antes desta data, tentar executar um programa compilado
em Windows numa máquina Unix ou num Mac, sendo sempre necessário recompilar. Com o Java
isto era possível, porque a dependência em relação ao hardware residia num módulo de software,
designado por Runtime, que era específico para cada plataforma e que executava o código
binário Java (bytecode) que era idêntico para todos os casos.

Reconhecendo estes factos, a Netscape anunciou, ainda em 1995, que o seu Navigator 2.0
incluiria não só suporte para Java, mas também para uma linguagem mais simples, de natureza
interpretada (não compilada), designada de LiveScript. Esta linguagem, com sintaxe totalmente
baseada no Java, teria o seu código embebido no próprio HTML (ao contrário do Java, em que o
código binário das applets é apenas referenciado no HTML) e assim faria melhor a ponte entre a
linguagem de construção das páginas web (HTML) e as funcionalidades pretendidas em termos
de interactividade na World Wide Web. Para além disso, seria muito mais simples de aprender
que o Java e produziria o mesmo tipo de efeitos, embora naturalmente não tivesse uma
performance, uma vez que seria interpretada directamente pelo navegador, em vez de compilada
e executada.
A linguagem JavaScript é uma linguagem de programação interpretada, multiplataforma e
91
orientada a objectos, projectada em 1995 durante apenas10 dias, por Bredan Eich enquanto
trabalhava para a empresa Netscape Communications Corporation, sendo por isso usada em
primeiro lugar nos navegadores Netscape. Esta linguagem foi desenhada com foco na extensão
das funcionalidades das páginas web através da execução de código executável do lado do
cliente directamente no browser, tornando possível a implementação de páginas web mais
interactivas, permitindo interacção com o utilizador, comunicação assíncrona com outras
aplicações web bem como alterar o conteúdo apresentado.

A linguagem JavaScript é uma linguagem baseada em protótipos, com capacidade para vários
paradigmas, possuindo suporte para programação através de diferentes estilos, tais como:
imperativo, orientado a objectos e funcional.

De modo que outros fabricantes de browsers pudessem seguir os trabalhos feitos por Netscape,
em 1996-1997, a linguagem JavaScript foi levada para European Computer Manufacturers
Association (ECMA) de modo a ser criada uma especificação padrão com base na linguagem
JavaScript, que posteriormente ficou denominada de ECMA-262, ficando o padrão oficial
conhecido como ECMAScript.

Assim, ECMAScript pode ser definido simplesmente como uma descrição, definindo todas as
propriedades, métodos e objeto de uma linguagem de script. Com isto, e obedecendo à
especificação definida, surgiram algumas implementações como é o caso de JavaScript, sendo
a implementação mais conhecida, existem também outras como JScript e ActionScript.

Introdução à JavaScript

O JavaScript é uma linguagem interpretada, isto significa que o código é executado directamente
(sem compilação prévia) quando a página HTML é carregada no navegador. As linguagens de
programação de tipo interpretado têm, normalmente, a vantagem de serem mais simples de
aprender e de utilizar, e a desvantagem de apresentarem uma performance mais pobre.

O JavaScript é uma linguagem de programação simples criada para dar mais interactividade e
maior funcionalidade às páginas da Web. Tendo sido inicialmente desenvolvida pela Netscape, a
linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript, que é um
92
padrão oficial reconhecido pela indústria.

Apesar desta linguagem ser mais conhecida pelo nome de JavaScript, e de a versão produzida
pela Microsoft ter recebido o nome de JScript, a verdade é que se tratam de implementações que
sendo fiéis à norma ECMAScript lhe acrescentaram novas funcionalidades úteis, mas respeitando
sempre as especificações oficiais.

O código escrito em JavaScript destina-se a ser executado pelo web browser quando a página
HTML que o contém é visualizada. O código é uma parte integrante da página e permite que o
browser seja capaz de tomar decisões quanto ao modo com que o conteúdo é apresentado ao
utilizador e como pode ser manipulado.

Inserção do código JavaScript numa página Web

O elemento <script> é responsável que faz com que os navegadores reconheçam o elemento
<script>, ou seja, é dentro do elemento <script> que se coloca todo o código, por exemplo:

Como podemos ver na linha 3 do código acima colocou-se o caractere “;” o qual dá ao
interpretador de JavaScript a indicação de que a instrução termina nesse local. A linguagem
JavaScript não obriga a terminar as instruções deste modo, bastando que mudemos de linha para
que ele perceba que a instrução chegou ao fim. No entanto, isso torna mais difícil a localização
dos erros e pode também contribuir para gerar mais erros.

É com a utilização do JavaScript que podemos fazer com que os objectos gráficos apresentados
na página (uma imagem, um botão ou uma ligação de hipertexto) respondam dinamicamente às
acções do utilizador. Para que isso aconteça basta adicionar um novo atributo ao elemento
responsável pela apresentação desse objecto e escrever o código que ao ser executado dará
93
origem ao comportamento esperado.

O JavaScript se colocado na secção do <head> … </head> irá ser executado quando chamado;
se colocado na secção de <body> … </body> irá ser executado ENQUANTO a página carrega.

No cabeçalho <head> … </head>, os scripts que contém funções podem ser colocados no
cabeçalho do documento. Assim, pode-se garantir que o script é carregado antes da função ser
chamada. Por exemplo:

Na secção do <body> … </body>, os scripts para serem executados quando a página é

carregada, quando se coloca um <script> na secção do <body> … </body> o mesmo é
geralmente conteúdo da página.
Os scripts podem ser colocados tanto na secção do <head> … </head> quanto na secção do
94
<body> … </body>, também podemos colocar um número ilimitado de scripts em um documento.

Algumas vezes podemos querer executar um <script> em diversas páginas, sem ter que escrever
o mesmo script em cada uma das páginas. Para exemplificar, podemos escrever um documento
(arquivo) JavaScript externo e, guardar o arquivo JavaScript externo com a extensão “.js”. No
entanto, o arquivo externo não pode conter a tag <script>. Para usar o <script> externo, devemos
indicar o arquivo “.js” com o atributo “src” da tag <script>. Conforme o exemplo:

Em suma, a tag <script> … </script>, portanto serve para identificar para o navegador o que deve
ser interpretado como comando html e o que deve ser interpretado como comando JavaScript.
Tudo que estiver entre a tag <script> … </script> deve ser interpretado como JavaScript.

O atributo <script type> serve para especificar para o navegador qual é a linguagem de script
que será utilizada. Como a linguagem JavaScript é a linguagem padrão em praticamente todos
os navegadores, muitas vezes o programador pode utilizar apenas <script> ao invés de <script
type = "text/JavaScript">.

Comentários
// comentário com uma única linha
/* Comentário que pode ocupar uma linha ou mais */
 95
<script> no cabeçalho <head> …
</head> é executado antes da página
ser exibida.

No <body> … </body> é executado

durante a exibição, na ordem em que
aparecer dentro do arquivo.

Características da Linguagem

O código-fonte do JavaScript é incluído no próprio arquivo HTML (para isso existe uma tag
do HTML que permite identificar e separar o que é script do que é marcação HTML). Esta tag
chama-se <script>.

É uma linguagem interpretada (também chamada de linguagem de script), isso, significa que
os comandos JavaScript são executados um a um directamente por um interpretador, sem que
haja necessidade de compilação como nas linguagens de programação convencionais. No caso
da linguagem JavaScript, quem faz o papel do interpretador é o navegador do usuário que, ao
receber um arquivo (.html / .htm), executa o script na medida em que encontra os comandos
JavaScript dentro do código HTML.

A linguagem JavaScript (é uma linguagem baseada em objectos), o projecto de programas

orientados a objectos tenta tratar um programa como um conjunto de partes individuais (objectos)
que executam tarefas distintas, e não como uma sequência de comandos que executam uma
tarefa específica. Os objectos similares são agrupados em classes. Numa linguagem orientada a
objectos o “desenvolvedor/programador” precisa construir (instanciar) todos os objectos que o
desenvolvedor for utilizar no seu programa. No entanto, a linguagem JavaScript é dita “baseada
em objectos” porque a mesma já possui um conjunto de objectos embutidos. Como exemplo,
para construir um objecto para manusear datas e horas, não é necessário construir um objecto,
pois em JavaScript já existe um pronto para ser usado.
Sintaxe parecida com C, C++ e Java
96
Em termos de sintaxe, a linguagem JavaScript herdou suas principais construções e comandos
da linguagem Java que por sua vez os havia herdado das linguagens C e C++. Devido ao escopo
de aplicação limitado de JavaScript vários recursos existentes nestas outras linguagens foram
deliberadamente omitidos.

Programação dirigida por eventos

Esta é uma característica muito importante de JavaScript. Sempre que alguma coisa que tenha
um significado importante acontece ocorre um evento. O clique num botão, o arrastar do mouse,
o preenchimento de um campo de um formulário ou o envio do mesmo, são exemplos de eventos
provocados pela interacção do usuário com a página. A linguagem JavaScript permite que
criemos trechos de programa (geralmente implementados na forma de funções) que respondem
de acordo com a ocorrência destes eventos. A consequência disso é que a página deixa de ser
um documento estático e parece ganhar inteligência, reagindo de acordo com as acções do
usuário.

JavaScript é independente de plataforma

Numa linguagem de programação convencional, o programador compila o seu programa gerando
um arquivo executável que, se distribuído, só poderá ser executado num ambiente operacional
de hardware e software específicos. Como os comandos JavaScript são interpretados pelo
navegador do usuário, não existe este problema. Uma mesma página Web com código JavaScript
poderá ser interpretada pelo Netscape, independentemente do usuário estar utilizando um PC
com Windows ou uma máquina RISC com UNIX. Os problemas de compatibilidade que existem
são outros e normalmente dizem respeito ao navegador utilizado e suas versões.

JavaScript versus Java

Diferentemente de Java, que se propõe a ser uma linguagem de uso geral e que pode também
ser utilizada no contexto de uma página Web na forma de applets, o JavaScript é uma linguagem
simples, interpretada pelo navegador, e cuja utilização se restringe ao ambiente Web. Na
verdade, essa diferença é uma grande fonte de dúvida e confusão para aqueles que estão
começando a entrar em contacto com estas tecnologias. É importante deixar claro que Java e
JavaScript são linguagens diferentes e com propósitos também diferentes.
Java é uma linguagem de programação orientada a objetos, criada pela Sun Microsystems. Os
97
programas escritos em Java (arquivos com extensão .java) precisam ser compilados para um
formato intermediário chamado bytecodes (arquivos com extensão .class). Estes bytecodes
podem ser então executados por um interpretador ou máquina virtual Java. Costuma-se dizer que
Java é independente de plataforma porque existem versões destes interpretadores
implementadas na maioria dos sistemas operativos existentes como Unix, Mac e Windows.

Applets são pequenos programas escritos em Java que são carregados a partir de um servidor
Web, produzindo uma saída que pode ser embutida no conteúdo de uma página web.

A outra diferença importante é que JavaScript não é considerada uma linguagem totalmente
orientada a objetos, uma vez que ela não implementa alguns mecanismos como por exemplo a
herança.

Alguns efeitos rápidos com JavaScript

Antes de prosseguirmos com o estudo desta unidade, podemos ver alguns conceitos rápidos que
se podem programar com JavaScript.

Abrir uma janela secundária

Podemos abrir uma janela secundária sem barras de menus e que mostre o buscador Google.

Uma mensagem de boas vindas

Podemos mostrar uma caixa de texto emergente ao terminar de carregar uma página web, que
poderia dar as boas vindas aos visitantes.
Data actual
98
Para mostrar a data de hoje.

Mudar a cor de fundo de uma página

Podemos mudar a cor de fundo da página, através de links ou botões.

Variáveis
Uma variável é um “local de armazenamento” para a informação. Ou seja, de uma maneira geral,
são espaços reservados na memória do computador para guardar informações que serão
utilizadas durante a execução de um programa.

Nomes de variáveis
Toda variável precisa ser referenciada através de um nome. Para criar nomes de variáveis, é
necessário seguir algumas regras básicas de sintaxe:
 Todo nome deve ser composto apenas por letras, números e sublinhado “_”;
 Deve começar com uma letra;
  Não pode ser igual a nenhuma palavra reservada, ou seja, palavras que já possuam um
99
significado próprio para a linguagem como por exemplo, true, var ou if, …

Operadores e Expressões
São símbolos especiais que tem um significado próprio para a linguagem e estão associados a
determinadas operações. Existem operadores aritméticos como a soma (+) ou a subtracção (-),
operadores relacionais como a comparação de igualdade (==) e operadores de cadeias de
caracteres como a concatenação (+). A sintaxe dos operadores em JavaScript é baseada nas
linguagens C, C++ e Java.

Aritméticos
Operadores Significado Exemplos Explicação
Soma o valor da variável a com o
+, - Soma / Subtracção a+b valor da variável b.
Multiplica o valor da variável x por
x*2 2.
*, / Multiplicação / Divisão
Divide o valor da variável soma
soma / 3
por 3.
Calcula o resto da divisão do valor
de x por 2. Ou seja, retorna 0 se x
% Resto da divisão x%2 for um número par ou 1 se for
ímpar.
i ++ Incrementa o valor de i, ou seja, i
++ Incremento passa a valer i + 1.
++ i
i -- Decrementa o valor de i, ou seja, i
-- Decremento passa a valer i – 1.
-- i
Armazena a cadeia de caracteres
“Bruno” dentro da variável nome.
nome ="Bruno";
= Atribuição simples Calcula a soma a+b+c, divide-a
media = (a+b+c)/3; por 3 e armazena o resultado na
variável media.
Soma o valor de s com 3 e
+= s += 3; armazena o resultado na própria
variável s. É equivalente a s=s+3;
Subtrai o valor de a de 1 e
-= a -= 1; armazena o resultado na própria
variável p. Equivale a = a - 1;
Multiplica o valor de p por 2 e
*= p *= 2; armazena o resultado na própria
Atribuição Composta
variável A.É equivalente a p=p*2;
Divide o valor de x por 2 e
/= x /= 2; armazena o resultado na própria
variável x. É equivalente a x = x/2;
Divide o valor de y por 2 e
armazena o resto desta divisão na
%= y %= 2; própria variável y. É equivalente a
y= y % 2;
 100
Os operadores relacionais e lógicos produzem resultados do tipo verdadeiro ou falso. A sua
utilização será melhor compreendida quando apresentarmos os comandos de decisão e
repetição.

Relacionais
Operadores Significado
== Igualdade
!= Desigualdade
<<= Menor / menor ou igual
>>= Maior / maior ou igual

Lógicos
Operadores significado
! Negação (NOT)
&& E (AND)
|| OU (OR)

Uma string é uma sequência de caracteres delimitada por aspas (“) ou plicas (‘). Para juntar duas
strings numa única, existe o operador de concatenação representado pelo símbolo +.

Os operadores podem ser utilizados em conjunto com variáveis e valores constantes no que
chamamos de expressões. Da mesma forma que com expressões matemáticas, podemos usar
parêntesis para definir a ordem de precedência em que as operações devem ser realizadas.

Entrada e Saída

Uma das principais aplicações de JavaScript é interagir com o usuário. As formas mais simples
de interacção são através dos métodos window.prompt e window.alert.

window.prompt
Abre uma janela para pedir uma string ao usuário, ou seja, a caixa de diálogo de prompt nos
possibilita requerer uma entrada ao usuário.
window.alert
101
Abre uma janela para exibir um aviso ao usuário. As caixas de diálogo de alerta são simples e
informativas. Elas, geralmente, são utilizadas em validação de formulários ou bloqueio de acções.
A sua função é mostrar apenas uma mensagem com um botão de confirmação para que esta
seja fechada.

Comandos de decisão

Os comandos de decisão permitem implementar desvios condicionais, isto é escolher qual

comando (ou conjunto de comandos) será executado de acordo com a avaliação de uma
condição.

O comando IF
Permite executar comandos de acordo com uma condição.

O comando IF - ELSE
Permite executar alguns comandos se uma condição for verdadeira e outros se ela for falsa.

É comum precisarmos selecionar um entre vários blocos de comandos a serem executados.

 102

O comando SWITCH
Outra construção que permite selecionar um entre vários blocos de comandos a serem
executados.

Neste caso, a expressão será avaliada e comparada com cada um dos valores especificados. A
execução do script será desviada para os comandos abaixo do valor que seja igual ao resultado
da expressão. Caso a expressão não seja igual a nenhum dos valores, será executada a opção
default.

Algumas funções predefinidas

As seguintes funções predefinidas retornam valores lógicos e podem ser utilizadas em conjunto
com comandos de decisão.
isNaN(valor)
103
Serve para determinar se um valor é numérico ou não. Isso pode ser útil em caso de críticas de
valores digitados pelo usuário. A função isNaN (abreviação de "IS NOT A NUMBER") retorna
"true" se o valor NÃO for numérico.

window.confirm (pergunta)
O método do objecto window que serve para abrir uma janela pedindo uma confirmação ao
usuário.

O comando WHILE
Permite repetir um comando ou bloco de comandos enquanto uma condição for verdadeira. Faz
o teste da condição no início de cada iteração, isto é, antes de executar o bloco de comandos.

O comando DO-WHILE
Permite repetir um bloco de comandos enquanto uma condição for verdadeira. Diferentemente
do comando while, o teste da condição é realizado ao final da iteração. Como consequência deste
facto, os comandos são executados pelo menos uma vez.
 104

O comando FOR
Repete um comando ou bloco de comandos, controlado por uma variável. É muito comum a
criação de laços de repetição controlados por variáveis que são incrementadas a cada iteração.
Tais laços constituem-se de uma inicialização da variável de controle, um teste que verifica se a
condição de término foi atingida, além do incremento que deve ser realizado a cada iteração.

Desta forma, será possível determinar a cada iteração, se o laço deverá ou não ser interrompido.
Esta é a ideia do comando for.

Repare que a atribuição (i=0) é executada apenas uma vez, antes do início da execução do laço.
A seguir, é feito o teste da condição (i<10). Se esta for falsa, o laço não é executado. Se for
verdadeira, os comandos do interior do laço são executados, seguido da execução do incremento
(i++), voltando depois ao teste da condição (novamente i<10).
O comando BREAK
105
O comando break permite um controle adicional sobre os laços de repetição, de forma que ele
possa ser interrompido antes da condição ser satisfeita. Este comando normalmente é utilizado
após um comando condicional que testa uma segunda condição para o fim do laço.

O comando CONTINUE
O comando continue também permite um controle adicional sobre os laços de repetição,
interrompendo a iteração actual do laço, e passando imediatamente à próxima iteração. Este
comando normalmente, também é utilizado após um desvio condicional.

Uso de funções

Uma função é uma sequência de comandos que realiza uma tarefa específica dentro de um
programa maior. O uso de funções leva à modularização dos programas, o que é desejável pois
melhora sua legibilidade e facilita sua manutenção.
Declaração e uso de funções
106
Assim como todas as variáveis recebem um nome através do qual podem ser identificadas, as
funções também precisam ter um nome definido. Este nome permite fazer referência à função
ou, como também costumamos dizer, "chamar a função". Quando uma função é chamada, o fluxo
de execução do programa é transferido para dentro da função, retornando para o comando
imediatamente após a chamada, quando a função terminar de ser executada.

Por exemplo, imaginemos que uma página tem um formulário onde o usuário digitará o seu
número de celular. Como todas operadoras possuem 9 dígitos, para garantir que somente
números de telefones "aparentemente correctos" sejam considerados, o programador pode fazer
uma função que verifica a consistência do valor digitado. Assim, o programador pode nesta
função, verificar se o dado digitado é composto de exatamente 9 dígitos. Um telefone preenchido
com apenas 5 caracteres deve ser considerado inválido. Sempre que o formulário for enviado,
será feita uma "chamada à função", ou seja, ela será executada verificando a consistência da
variável telefone.

Para executar o código desta função será necessário chamá-la através da referência para o seu
nome: verificaNumero ();

Generalizando, para definir uma função usamos a declaração function seguida do bloco de
comandos que compreende a função. Para chamá-la é só referenciar o nome da função seguido
de parêntesis.
Sintaxe mínima: Invocação (chamada à função):
107

Em JavaScript, é recomendável agrupar todas as definições de funções

dentro da secção <head> do documento html. Isso garante que não haja o
risco de uma função ser chamada antes que a mesma seja declarada.

Funções com parâmetros

É muito conveniente adaptar o código de uma função de forma que ela possa ser chamada em
situações um pouco diferentes. No exemplo anterior, a função verificaNumero critica sempre o
conteúdo da variável telefone. Essa função pode ser generalizada de forma que ela possa criticar
o conteúdo de qualquer variável. Desta forma teríamos:

Agora especificamos a variável t entre parêntesis na declaração da função. Esta variável é

chamada de parâmetro da função. Isso significa que ela pode ser substituída por qualquer outra
variável no momento da chamada à função.

Retorno de valores
Outra característica útil das funções é a possibilidade delas retornarem valores. Estes podem ser
utilizados como indicadores do funcionamento da função (por exemplo, se a crítica foi bem-
sucedida ou não) ou simplesmente um valor calculado pela própria função.
Para retornar valores, utilizamos o comando return. Este comando se usado sem nenhum
108
parâmetro, interrompe a execução da função e retorna para o local onde a função foi chamada.
Por exemplo:

Variáveis locais
Quando uma variável é criada em uma função numa declaração precedida da palavra var, ela só
existe dentro dessa função, enquanto ela estiver sendo executada. Estas variáveis são chamadas
de variáveis locais à função.

A declaração pode ser feita em qualquer ponto da função, embora seja recomendável em termos
de legibilidade, fazê-la no início.

Usando links para executar funções

É possível associar uma função à selecção de um link. Neste caso ela será chamada quando
ocorrer o evento de clique no link.
 109
Para isso, é necessário incluir a string 'javascript:' antes da referência à função, dentro do atributo
href da tag a do html. Como a sintaxe desta tag inicialmente prevê a existência de uma URL neste
atributo, desta forma não existe o risco de haver uma interpretação incorrecta do valor do atributo.

Chamada:

Objectos predefinidos

A linguagem JavaScript é considerada por alguns autores uma linguagem baseada em objectos.
Isto porque, fora a capacidade de criar e utilizar objectos, JavaScript não contém características
que permitam defini-la como uma linguagem de programação totalmente orientada a objetos.

Os objectos utilizados em JavaScript podem ser divididos em 3 categorias:

Objectos predefinidos
Definem alguns tipos de dados compostos úteis. Exemplos: Date, Array, String, Math.

Objectos do browser (Document Object Model)

Reflectem o documento e o navegador. Exemplos: Window, Document, Navigator, etc.

Objectos personalizados criados pelo programador

Criados pelo programador para representar os dados de seu problema.
Programação Orientada a Objectos
110
Constantemente, vem sendo criadas técnicas para facilitar o desenvolvimento e a manutenção
dos programas. Estas técnicas consistem principalmente em regras que, uma vez seguidas,
agilizam e facilitam o processo de desenvolvimento. Mais que uma técnica, a programação
orientada a objetos busca modificar a forma como o programador vê o problema a ser
solucionado, criando uma abstração mais próxima do mundo real do que nas linguagens de
programação mais antigas.

A programação orientada a objetos vê um problema como um conjunto de entidades (objectos)

que interagem. Cada entidade tem suas características próprias (atributos ou propriedades) e faz
interação com outros objectos por meio de uma interface (métodos).

Na perspectiva tradicional de resolução de problema, primeiro se decide quais as operações

(funções) serão efectuadas, depois se pensa em quais dados estarão envolvidos. Numa
perspectiva orientada a objetos, primeiro se identificam as entidades envolvidas para depois
pensar na interação entre elas.

Propriedades e métodos
Propriedades – são os valores associados aos objectos. No exemplo seguinte, usamos a
propriedade length do objecto string para determinar o tamanho de uma string.

Métodos - são as acções que podem ser executadas com os objectos. O método toUpperCase()
é um método do objecto string que converte o valor de uma string para letras maiúsculas.
 111

O Objecto String
Cadeias de caracteres (Strings) são implementadas em JavaScript como objectos embutidos
embora as operações de atribuição e concatenação funcionem directamente como se a string
fosse um tipo básico de dado.

Para executar operações mais complexas com strings existem algumas propriedades e métodos
úteis.

Propriedades
length – devolve o tamanho da string.

Métodos
toLowerCase() Retorna a string convertida para minúsculas.
toUpperCase() Retorna a string convertida para maiúsculas.
charAt(n) Retorna o n-ésimo caractere (o primeiro caracter está em zero).
indexOf(str, p) Procura str a partir da posição p, se não achar retorna -1.
substring(pi, pf) Retorna a string começada em pi e terminada em pf-1.
split(sep) Divide uma string num Array, elementos delimitados por sep.
 112

O objecto Array
O objecto predefinido Array permite criar variáveis indexadas capazes de armazenar um conjunto
de valores. Antes de utilizar um array é preciso criá-lo utilizando o operador new, indicando o seu
tamanho (número de elementos que ele poderá guardar). Caso, ao instanciar um array o
programador passar mais de um parâmetro ao método construtor, estes valores serão
interpretados como valores iniciais de cada uma das posições do array.

Para aceder cada elemento de um Array, utiliza-se um índice entre colchetes após o nome da
variável. A primeira posição de um array é sempre zero.
Alteração dinâmica do tamanho do array.
113
Os arrays em JavaScript são redimensionados dinamicamente, isto é, mesmo que o programador
tente armazenar um valor fora dos limites de memória inicialmente alocados, ele não acusará
erro, redimensionando automaticamente o array para o tamanho necessário.

Principais propriedades e métodos

Propriedades
length – Retorna o tamanho do array
tamanho = valores. length;

Métodos
sort() Ordena o vector alfabeticamente (10 < 5).
reverse() Inverte a ordem dos elementos.
Retorna uma string, concatenando todos os elementos de um array
array.join(sep)
intercalados pela constante sep.

O objecto Math
O objecto Math não precisa ser instanciado, seus métodos e propriedades são ditos estáticos
pois não se aplicam a nenhuma instância em particular. Ele é utilizado para armazenar constantes
úteis a operações matemáticas e funções para efectuar diversos tipos de cálculo.

Principais propriedades e métodos

Propriedades:
E - Constante de Euler (2.718).
e = Math.E;

PI - Valor de PI (3.14159...)
perímetro = 2 * Math.PI * r;

SQRT2 - Raiz quadrada de 2

raiz = Math.SQRT2;
abs(), max(), min() Valor absoluto, máximo e mínimo
cos(), sin(), tan() Funções trigonométricas
 exp(), log() Exponencial e logaritmo
114
round(), ceil(), floor() Truncamento e arredondamento
pow(), sqrt() Potência e raiz quadrada
random() Gerador de números aleatórios

O objecto Date
O objecto Date permite trabalhar com datas e horários. Algumas operações com datas podem
ser bastante simplificadas através do uso deste objecto. Por exemplo: (i) Obter a data do relógio
do sistema; (ii) Realizar operações com datas como comparações ou soma; (iii) Saber o número
de dias de um mês; (iv) Saber se um ano é bissexto; (v) Saber em que dia da semana caiu um
dia qualquer.

Este objecto precisa ser criado através do operador new. Há 4 formas de criar uma data:

Métodos do objecto Date

O objecto Date tem uma série de métodos que permitem a manipulação de cada parte de uma
data em separado.
Métodos
getDate() / setDate() obtém/define o dia do mês
getMonth() / setMonth() obtém/define o mês (de 0 a 11)
getYear() / setYear() obtém/define o ano
getFullYear() / setFullYear() obtém/define o ano com 4 dígitos
getDay() / setDay() obtém/define o dia da semana (de 0 a 6)
getHours() / setHours obtém/define as horas
getMinutes() / setMinutes() obtém/define os minutos
 getSeconds() / setSeconds() obtém/define os segundos
115
getTime() / setTime() obtém/define o nº milissegundos desde 01/01/70

Objectos do navegador
Estes objectos pertencem ao chamado Document Object Model (DOM), implementado por cada
navegador.

Quando dizemos que o JavaScript é dependente do navegador, estamos nos referindo ao DOM.
Este modelo de objectos evoluiu bastante desde o Netscape 2, o que na verdade, cria muitos
problemas para os desenvolvedores pois o programador nunca sabe qual a versão do navegador
está sendo utilizada pelo usuário que tenta visualizar seu site.

Historicamente, o Netscape, navegador que primeiro incorporou a linguagem JavaScript,

introduziu um modelo de objectos original que foi posteriormente chamado de DOM nível 0.

Através dele era possível acesso a alguns elementos da página HTML. A Microsoft, entrando no
mercado com o seu Internet Explorer, ofereceu no IE3 o mesmo modelo de objectos do Netscape
2, que apesar de nunca ter sido padronizada por um organismo como a W3C, acabou se tornando
um padrão de facto.

As versões 4 do Internet Explorer e do Netscape trouxeram o DHTML (ou HTML dinâmico) que é
uma técnica de fazer páginas dinâmicas através da utilização de scripts para manipular estilo,
layout e conteúdo de um documento HTML, através da combinação dos recursos: HTML 4.0
(camadas); Folhas de estilo e programação com JavaScript. Para viabilizar o DHTML, cada
navegador (IE e NN) criou o seu DOM particular o que dificultou bastante o trabalho dos
desenvolvedores. Com modelos de objectos diferentes era necessário produzir códigos bastante
complexos de forma a garantir o seu funcionamento em todos os navegadores.

A W3C iniciou então um trabalho de padronização no sentido de gerar um modelo de objectos

que fosse utilizado em todos os navegadores e que permitisse acesso a todos os elementos de
uma página HTML. Este padrão foi chamado de DOM W3C ou DOM de nível 1. A Microsoft
implementou o DOM de nível 1 a partir do IE5 enquanto a Netscape implementou-o a partir do
Netscape 6. Embora se diga que hoje todos os navegadores implementam o nível 1, ainda
116
existem incompatibilidades.

Hierarquia de objectos
O navegador cria automaticamente uma hierarquia de objectos reflectindo alguns elementos
inseridos na página. Há três objectos básicos: navigator, screen e window. O objecto navigator
representa o próprio navegador e através dele é possível controlar seu comportamento além de
obter informações sobre suas características. O objecto screen está associado a características
da tela onde a página é exibida como, por exemplo, a sua resolução. O objecto window representa
uma janela do navegador e contém nele todos os elementos da janela, como o próprio documento
HTML e todos os elementos nele contidos.

A figura abaixo mostra esta hierarquia de objectos. Nesta ilustração, cada ligação de um objecto
a um outro acima representa uma relação de "contido em". Repare, por exemplo, que o elemento
"select" está contido no elemento "form", que está contido no documento HTML (document) que,
por sua vez, está contido na janela do navegador (window).
Dentro do objecto window, na forma de propriedades, encontramos os objectos location,
117
document e history. Para aceder os métodos ou propriedades de qualquer um deles é necessário
fazer:

Por uma questão de simplificação, o JavaScript permite referenciar os objectos internos a window,
sem citar o próprio window. Assim é possível fazer:

O objecto document mapeia o próprio documento HTML que está sendo exibido. Ele contém outro
conjunto de objectos que, por sua vez, mapeiam as principais características que compõem o
próprio documento, como as tags <img>, <a>, <form> e todos os elementos contidos nos
formulários. Os atributos destas tags são representados como propriedades dos objectos
correspondentes. Algumas destas propriedades podem ter seu valor modificado, sendo que o
navegador mantém a coerência entre o valor da propriedade e o que está sendo visualizado pelo
usuário.

Os objectos contidos em document são representados através de arrays de imagens, formulários

e de links, entre outros. O número de elementos de cada um destes tipos contidos no documento,
indica o número de elementos de cada array, existindo uma correspondência directa entre cada
tag HTML e o objecto que é acedido através de um elemento do array.

Estes objectos podem ainda ser referenciados através do nome definido no atributo "name" da
tag. Por exemplo, imagine um documento HTML que contenha um formulário, criado através da
tag <form>:
 118
É possível aceder o objecto form correspondente a este elemento HTML das seguintes formas:

O array elements é uma propriedade do objecto form, e serve para referenciar todos os elementos
de um formulário, independentemente de seu tipo.

Eventos
Uma das características da linguagem JavaScript, é o facto dela ser uma linguagem dirigida por
eventos, ou seja, ela é projectada de forma que ela possa ser programada para reagir sempre
que algum evento ocorre.

Um evento é um acontecimento envolvendo alguma atitude do usuário (o movimentar do mouse,

o pressionar de uma tecla, o envio de um formulário, etc.) ou o próprio funcionamento do
navegador (o carregamento de uma página para a exibição, não conseguir carregar uma imagem,
etc.).

Alguns eventos
 119

Cada objecto contém um conjunto de eventos associados. O tratamento destes eventos é feito
associando trechos de código ou chamadas de funções a eles através de um atributo da tag
relativa ao elemento considerado. Para cada tipo de evento há um atributo específico.

O objecto Navigator
Fornece uma série de informações sobre o navegador utilizado pelo usuário, permitindo
configurar as aplicações para navegadores diferentes.

Principais propriedades e métodos

O objecto Document
120
Serve para consultar ou modificar características do documento actual.

Principais propriedades e métodos

O objecto Location
121
Contém informações acerca da URL corrente, além de permitir desviar o navegador para um
outro endereço através da alteração desta URL. Uma URL normalmente é constituída da seguinte
forma:

Existem propriedades que reflectem cada uma destas partes da URL.

Conforme o código abaixo, onde a página solicita que o usuário digite uma senha. Caso a mesma
esteja correcta, o navegador será redirecionado para uma outra URL através do objecto location.
O objecto History
122
Dá acesso ao histórico de navegação do usuário, isto é, a lista de URLs navegadas por ele, dentro
de uma janela ou frame. Estas URLs normalmente podem ser acedidas pelo usuário através dos
botões de Voltar e Avançar do navegador. Através do objecto history é possível, por exemplo,
criar uma função que simule o clique do usuário num destes botões.

Biblioteca de funções JavaScript

Em todas as linguagens de programação existem bibliotecas de funções que servem para fazer
diversas coisas e muito competitiva na hora de programar. As bibliotecas das linguagens de
programação economizam a tarefa de escrever as funções comuns que em geral os
programadores podem necessitar. Uma linguagem de programação bem desenvolvida terá uma
boa quantidade de bibliotecas. Em algumas ocasiões é mais complicado conhecer todas as
bibliotecas do que aprender a programar a linguagem.

eval (string)
Esta função recebe uma cadeia de caracteres e a executa como se fosse uma sentença de
JavaScript.
parseInt(cadeia,base)
123
Recebe uma cadeia e uma base. Devolve um valor numérico resultante da conversão da cadeia
em um número na base indicada.

Esta função recebe um número, escrito como uma cadeia de caracteres, e um número que indica
uma base. Na verdade, pode receber outros tipos de variáveis, dado que as variáveis não têm
tipo em JavaScript, mas costuma-se utilizar passando um string para converter a variável de texto
em um número.

As distintas bases que pode receber a função são: 2, 8, 10 e 16. Se não passamos nenhum valor
como base a função interpreta que a base é decimal. O valor que devolve a função sempre tem
base 10, de modo que se a base não é 10 converte o número a essa base antes de devolvê-lo.

parseFloat(cadeia)
Converte a cadeia em um número e o devolve.

escape(caractere)
Devolve um caractere que recebe por parâmetro em uma codificação ISO Latin 1.

unescape(caractere)
Faz exactamente o oposto da função escape.

isNaN(número)
Devolve um booleano dependendo do que recebe por parâmetro. Se não é um número devolve
um true, se é um número devolve false.
Métodos
124
Os métodos de um objecto são funções que pertencem a um objecto. No entanto, enquanto que
as propriedades correspondem a variáveis, os métodos correspondem a funções.

Métodos estáticos
Alguns objectos oferecem métodos estáticos. Esses métodos diferem dos métodos normais pelo
facto de não pertencerem a um objecto criado com a instrução new.

A declaração this
A declaração this representa o próprio objecto em que é usada. Esse objecto pode ser uma
função, uma ligação de hipertexto, uma imagem, etc. Esta declaração é bastante útil em HTML
dinâmico porque nos ajuda muito a construir funções que respondem a eventos sabendo sempre
qual foi o objecto que originou o evento e funcionam correctamente em todos os browsers.

A declaração with
Esta declaração estabelece o objecto ao qual se aplica uma série de instruções. Os dois
exemplos seguintes usam o objecto Math para ilustrar o uso desta declaração e são totalmente
equivalentes.

Exemplo 1:

Exemplo 2:

Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas se esse
número crescer muito o código será mais compacto e fácil de ler se usarmos esta declaração.

Método getElementById
Este método retorna um objecto que foi encontrado em toda árvore no documento, com o ID
correspondente. Ele pode ser usado em qualquer posição dos nodos da árvore de objectos da
API DOM.
 125
Sua função simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento
não exista ou o ID informado seja incorrecto ele retornará null.

É importante lembrarmos que somente um objecto pode conter um ID específico, ou seja, não
podem existir dois objectos em uma página com o mesmo valor de um atributo ID.

Por exemplo:

Para acedermos o valor digitado nesse campo de texto em JavaScript procederemos assim:

Ou seja, precisamos declarar document mais o nome do formulário em que o campo se localiza
e o seu nome espeficado no atributo name.

Se utilizarmos o método getElementById, podemos acede-lo assim:

Assim, ao invés de informarmos toda a localização do objecto, dizemos apenas o seu atributo ID
ao método getElementById.

Método innerHTML
Interno é o equivalente de inner em inglês. Então innerHTML quer dizer HTML interno de algo,
sendo esse último um objecto, ou seja, uma tag. Assim, para alterarmos ou inserirmos conteúdo
ou uma marcação HTML em um objecto, utilizamos o método innerHTML.

Imaginemos uma tag div (ou qualquer outra) em sua marcação HTML e que essa tag esteja com
o atributo ID definido como box. Então, podemos utilizar o método getElementById para acede-
la e usufruir do método innerHTML para manipular seu conteúdo ou marcação HTML.
 126

Formulários

Uma das principais aplicações de JavaScript, é a possibilidade de “criticar” dados fornecidos pelo
usuário através de formulários HTML.

Propriedades, Métodos e Eventos dos Formulários

Os formulários são mapeados em JavaScript através do objecto form. Este objecto possui as
seguintes características:
Elementos de um Formulário
127
O objecto form contém um array, onde são armazenados os elementos de interação do
formulário. Um elemento pode ser acedido pelo array elements ou pelo seu nome definido no
HTML.

Cada elemento inserido num formulário, pode ser um dos seguintes objectos: (i) Campos de texto:
text, hidden, password, file; (ii) Áreas de texto: textarea; (iii) Botões: button, reset, submit; (iv)
Caixas de seleção: checkbox; (v) Botões de opção: radio; (vi) Listas de seleção: select.

Campos de Texto
São os campos que permitem que o usuário digite texto. Estes elementos podem ser criados
pelas tags <textarea> e <input>, sendo que, neste caso, o atributo type pode ser text, password,
hidden ou file.
Botões
128
São os campos que permitem que o usuário clique para executar alguma acção. Estes elementos
podem ser criados pela tag <input> com o atributo type=button, reset ou submit. Os botões do
tipo button e reset já possuem uma funcionalidade predefinida de enviar ou reinicializar o
formulário. Os botões do tipo button não possuem nenhuma funcionalidade, sendo que a mesma
deve ser atribuída pelo script através do tratamento do evento onclick.

Checkbox
São os campos que permitem que o usuário marque e desmarque uma opção. Estes elementos
podem ser criados pela tag <input> com o atributo type=checkbox.
 129

Botões de radio
São os botões que permitem que o usuário selecione uma entre várias opções. Estes elementos
podem ser criados pelas tag <input> com o atributo type=radio.
 130

Elementos HTML diferentes, mas definidos com um mesmo nome (atributo name),
podem ser acedidos com o JavaScript através de um array. Isso é particularmente
útil quando temos botões de radio, pois, para agrupá-los precisamos defini-los com
um mesmo nome. Estes elementos são tratados em conjunto pois o seu
comportamento depende do grupo (apenas um dos botões do grupo pode estar
selecionado em um determinado instante).

Listas de Selecção
São os campos que permitem que o usuário selecione opções a partir de uma lista. Estes
elementos podem ser criados pela tag <select> e suas respectivas opções criadas pela tag
<option>.
 131

Opções

A palavra-chave this
A hierarquia de objectos do JavaScript muitas vezes gera referências muito longas, e isso é
particularmente notado quando trabalhamos com formulários.

Exatamente para simplificar estas referências existe a palavra-chave this. Ela serve para
referenciar o objecto corrente, e o seu significado depende do contexto de onde ela é usada.
Utilizada dentro de uma tag HTML, ela está associada ao objecto relacionado a esta tag.

É o mesmo que:
 132

A palavra this dentro da tag <form> substitui a referência ao formulário que de outra forma poderia
ser definida como document.forms[0].

Dentro da tag <input type="text"> substitui a referência ao elemento text que normalmente seria
definido como document.forms[0].elements[0].

Finalmente, usada na tag <a href="">, a palavra this substitui a referência document.links[0].

Crítica de Formulários
Os atributos onSubmit e onReset permitem associar funções aos eventos de submit ou reset do
formulário, que serão activadas quando os respectivos botões forem pressionados pelo usuário.

É possível, através da função associada ao submit, fazer a verificação final nos campos do
formulário, evitando o envio se ainda houver algum erro. Se em algum momento esta função
retornar false, a acção correspondente será cancelada.

Se a função de tratamento do evento retornar false, o formulário não será submetido.

Se a função de tratamento do evento retornar false, o formulário não será apagado.

Este comportamento padrão pode ainda ser evitado em outras situações, como por exemplo,
quando o usuário clica num hiperlink.
Crítica campo a campo
133
Muitas vezes é conveniente acusar erros de preenchimento a cada campo que o usuário digita,
ao invés de acusar todos de uma vez quando o formulário é enviado. Para isso é necessário
utilizar o evento onchange no campo digitado, verificando sua integridade quando ele termina de
ser digitado. Para forçar o usuário a permanecer no campo incorrecto podemos utilizar o método
focus().

Normalmente as mesmas críticas precisarão ser repetidas quando o formulário for enviado pois
é necessário verificar o preenchimento de campos obrigatórios.

Imagens

O objecto Image, disponível a partir da versão 1.1 do JavaScript (Netscape 3.0), permite a criação
de animações simples com imagens. Este efeito é usado frequentemente na implementação de
menus, alterando uma imagem sempre que o usuário passa com o mouse sobre ela. Este
procedimento pode ainda ser utilizado com as seguintes finalidades:

 Exibir alguma informação adicional (uma legenda, por exemplo);

 Exibir um conjunto de subopções num menu hierárquico;
 Produzir um efeito visual agradável quando o usuário percorre os itens do menu com o
mouse.

Para optimizar a performance durante a interação do usuário com a página, através do objecto
Image, é possível fazer com que as imagens envolvidas nestes efeitos sejam carregadas de uma
vez, antes mesmo da sua utilização ser necessária.

Características do objeto Image

Acedendo à imagens: Da mesma forma que nos demais objectos da hierarquia, uma imagem
pode ser referenciada pelo script através do array images [] (por exemplo, document.images[0]) ou
pelo nome definido no HTML através do atributo name da tag <img>.
 134

O código acima pode ser lido da seguinte forma:

"Quando o usuário passar o mouse sobre o link, troque a imagem que aparece na página, por
uma outra que está no arquivo fig1.gif; quando o mouse sair do link restaure a imagem original
(fig2.gif)."

A técnica utilizada neste exemplo, consiste em criar no menu dois conjuntos de imagens
levemente diferentes de forma a ressaltar a imagem onde o mouse está passando. Os eventos
onMouseOver e onMouseOut permitem que a imagem seja alterada convenientemente.

Propriedades do objecto Image

As características da imagem definidas na tag HTML são propriedades que podem ser
consultadas ou alteradas dentro do script.
Criando objectos Image com new
135
É possível também criar objectos image directamente através do construtor Image(). O principal
uso deste construtor é permitir que uma imagem seja carregada através da Internet e
decodificada pelo navegador, antes mesmo que a sua utilização seja necessária, o que no
exemplo anterior, só acontecerá quando e se o usuário passar com o mouse sobre uma
determinada imagem. Como cada imagem adicional é um arquivo separado que precisa ser
trazido do servidor, é melhor trazer esses arquivos todos de uma vez no momento da carga da
página do que ter que esperar a imagem ser carregada durante a interação do usuário, o que
pode inviabilizar toda a ideia do efeito criado. É claro que essas observações podem se tornar
insignificantes caso estejamos lidando com uma conexão extremamente rápida e com imagens
muito pequenas. De qualquer forma, normalmente é recomendável fazer a carga das imagens
previamente através do construtor Image().

Janelas

O principal objecto da hierarquia do JavaScript é o objecto Window. Dentro dele encontram-se

todos os elementos das páginas HTML que podem ser manipulados através do JavaScript.

Através do objecto Window, é possível:

 Abrir e ter controle sobre janelas secundárias (chamadas de janelas pop-up);

 Alterar características da janela como, por exemplo, suas dimensões ou o texto que
aparece na linha de status do navegador;
 Enviar um documento para a fila de impressão;
 Programar a execução de funções para após um determinado intervalo de tempo;
 Ter controle sobre a utilização de frames; entre outras aplicações.

Algumas propriedades e métodos de Window

Diversas características das janelas podem ser alteradas através do objecto window. Além disso,
como todo documento está contido numa janela, o objecto window tem propriedades que
permitem acesso à vários outros objectos permitindo controlar todo o ambiente de execução do
navegador.
 136

Reposicionando, redimensionando e imprimindo janelas

Uma Janela pode ser redimensionada ou reposicionada na tela em qualquer instante através dos
métodos:

É possível ainda controlar o posicionamento das barras de rolagem através dos métodos:
 137

A partir das versões Netscape6.x e Explorer 5.x foi incorporado o método print() ao objecto
window. Com ele é possível enviar uma página para a fila de impressão. Quando este método é
chamado, aparecerá para o usuário o mesmo diálogo do Windows que apareceria se ele clicasse
o botão print do navegador.

Janelas secundárias
Abrir um documento numa janela diferente da actual pode ser útil em diversas situações.

 Para abrir documentos externos ao site, sem com isso sobrescrever sua página com um
documento alheio;
 Para chamar a atenção do usuário com algum aviso ou propaganda;
 Mostrar instruções de preenchimento de um formulário, sem contudo apagar o próprio
formulário.
Abrindo uma janela sem configuração
138
A forma de abrir uma nova janela em JavaScript é através do método open do objecto window.
Este método recebe três parâmetros: o nome do arquivo do documento a ser carregado na nova
janela (uma string vazia permite a criação de uma página em branco); um nome para ser atribuído
à propriedade name (não pode conter espaços) e; um terceiro parâmetro opcional, com uma
string de configuração da janela.

Abrindo uma janela com características específicas

Para definir algumas características da janela aberta, usamos o terceiro parâmetro do método
open serve para isso. Esta string pode informar as dimensões da janela, se ela deve possuir
barras de rolagem ou menus, ou ser redimensionável ou não. Ela deve ser composta de um
conjunto de definições separadas por vírgulas e sem espaços. A tabela a seguir mostra as
principais definições existentes:
Temporização
139
O método setTimeout permite programar a execução de uma função para após um determinado
tempo dado em milissegundos.

Esse método faz com que a função seja executada apenas uma vez. Para executar um número
indeterminado de vezes, uma técnica utilizada com frequência, é a de simular uma recursividade
incluindo dentro da função uma nova chamada ao setTimeOut.

É possível que seja necessário interromper a sequência após alguma condição, o que é feito
através do método clearTimeout.

As duas linhas de código abaixo ilustram como estes métodos devem ser utilizados:

Frames

Em HTML é possível dividir uma janela em várias partes independentes, chamadas frames. De
certa forma, cada frame se comporta como uma janela independente, uma vez que é possível
carregar em cada um deles um outro documento HTML com suas características específicas. Em
JavaScript, o comportamento de frames baseia-se nestas características: cada tag gera um
objecto no array frames da window do arquivo de layout. Documentos exibidos em um frame
podem aceder este vector através das propriedades de window:
 140

O objecto frame é equivalente a um objecto window, utilizado para lidar com aquele frame.

Cada frame é uma propriedade do objecto window e pode ser acedido pelo array frames [] ou
pelo seu nome definido no HTML através do atributo name da tag.

Referências bibliográficas

1. COELHO, Pedro. JavaScript: Animação e Programação em Páginas Web. 4ª ed. FCA –

Editora de Informática, Lisboa, 2003.

2. POWERS, Shelley. Aprendendo JavaScript. São Paulo: Novatec Editora, 2010.

3. SILVA, Maurício Samy. JQuery: A biblioteca do Programador JavaScript. São Paulo:

Novatec Editora, 2010.

4. SILVA, Maurício Samy. JavaScript: Guia do Programador. São Paulo: Novatec Editora,
2010.

Websites
1. Material disponível em: http://www.nce.ufrj.br/.