Você está na página 1de 26

HTML

Advanced Graphic Computing and Arts



Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
2

Sumrio
Aula 01- Introduo .................................................................................... 4
Tim Berners-Lee ........................................................................................................................................................ 4
O que HTML? ......................................................................................................................................................... 5
Para que devo usar HTML? ....................................................................................................................................... 5
Preciso estar online? ................................................................................................................................................ 6
O que so tags? ........................................................................................................................................................ 6
Maisculas ou Minsculas? ...................................................................................................................................... 6
O que necessrio para trabalhar com HTML? ....................................................................................................... 6
Salvando arquivos em HTML .................................................................................................................................... 7
Estrutura Bsica ........................................................................................................................................................ 8
Tags de Formatao .................................................................................................................................................. 9
Cabealhos ................................................................................................................................................................ 9
<br> e <p> ................................................................................................................................................................. 9
Como ver a fonte HTML ............................................................................................................................................ 9
Exerccio Aula 01 ........................................................................................ 10
Aula 02- Formatao .................................................................................. 11
Font ......................................................................................................................................................................... 11
Align ........................................................................................................................................................................ 11
Cores em ingls ....................................................................................................................................................... 11
Cores em hexadecimal ............................................................................................................................................ 12
Exerccio 02 ............................................................................................... 14
Aula 03- Listas ............................................................................................ 15
Lista no-ordenada (Marcadores) .......................................................................................................................... 15
Tipos de marcadores .............................................................................................................................................. 15
Lista ordenada (Numeraes) ................................................................................................................................ 15
Tipos de numeraes .............................................................................................................................................. 16
Listas de Definio .................................................................................................................................................. 16
Exerccio 03 ............................................................................................... 17
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
3

Aula 04- Imagens ....................................................................................... 18
Imagem ................................................................................................................................................................... 18
Propriedades da imagem: ....................................................................................................................................... 18
Imagem de Fundo ................................................................................................................................................... 19
Exerccio 04 ............................................................................................... 20
Aula 05- Marquee ...................................................................................... 21
Animaes (marquee) ............................................................................................................................................ 21
Velocidade (scrollamount)...................................................................................................................................... 22
Direo (direction) .................................................................................................................................................. 22
Comportamento (behavior).................................................................................................................................... 22
Repeties (Loop) ................................................................................................................................................... 23
Largura (width) ....................................................................................................................................................... 23
BGCOLOR ................................................................................................................................................................ 23
HSPACE e VSPACE ................................................................................................................................................... 23
Onmouseover e Onmouseout ................................................................................................................................ 23
Exerccio 05 ............................................................................................... 24
Aula 06- Links ............................................................................................ 25
Criando links ........................................................................................................................................................... 25
Alvo (Target) ........................................................................................................................................................... 25
Cor dos links ............................................................................................................................................................ 25
Exerccio 06 ............................................................................................... 26

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
4

Aula 01- Introduo
As pessoas imaginam que muito difcil construir um website. Isto no verdade!
Qualquer um pode aprender como construir um website. Se voc continuar lendo, estar
apto a construir um website em uma hora.
Outros pensam - erroneamente - que so necessrios softwares avanados e caros
para construir websites. verdade que existem muitos softwares capazes de criar um
website para voc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o
caminho certo, dever criar voc mesmo o website. Felizmente, isto simples voc j
tem a sua disposio todos os softwares que precisa.
O objetivo desta mini apostila fornecer os conhecimentos bsicos que permitiro
construir um website de forma correta.
necessrio que voc se empenhe, pratique e consolide os ensinamentos aqui
contidos. Mas, no se aborrea - aprender como construir um website divertido e
bastante satisfatrio quando voc trilha o caminho certo de aprendizado.
Ns sugerimos que voc estude somente duas ou trs lies por dia e pratique
bastante tudo o que voc aprender em cada lio.

Tim Berners-Lee
Sir Timothy John Berners-Lee nasceu em
Londres, em 8 de junho de 1955.
Em 1989, na poca em que trabalhava no
Laboratrio Europeu de Fsica de Partculas
(CERN), na Sua, o fsico Tim Berners-Lee
props um projeto de hipertexto global, que
viria a ser conhecido como a World Wide Web.
A tecnologia permitia que as pessoas
trabalhassem em conjunto, combinando seus
conhecimentos em uma rede de documentos de hipertexto. Ele escreveu o cdigo do
primeiro servidor WWW e o primeiro editor de hipertexto para a plataforma NeXTStep.
Esse trabalho foi disponibilizado dentro do CERN, em 1990, e na Internet em geral, em
1991.
At 1993, Tim continuou a trabalhar no projeto da Web, coordenando o feedback
dos usurios atravs da Internet. Suas especificaes iniciais de HTTP e HTML foram
refinadas e discutidas em crculos maiores como a disseminao da tecnologia web.
Tim Berners-Lee graduou-se pela Universidade de Oxford, Inglaterra, em 1976. L,
ele construiu seu primeiro computador usando portas TTL, um processador M6800 e uma
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
5

televiso velha. Depois passou dois anos na Plessey Telecommunications, em Dorset,
uma grande fabricante de equipamentos de telecomunicaes no Reino Unido,
trabalhando com sistemas de transaes distribudas, rels de mensagem e tecnologia de
cdigo de barras. Em 1978, Tim deixou Plessey e entrou na DG Nash, no mesmo condado,
onde escreveu, entre outras coisas, um software para impressoras inteligentes e um
sistema operacional multitarefa.
Em seguida, passou um ano e meio como consultor independente, incluindo uma
temporada de seis meses (junho-dezembro de 1980) como engenheiro de software do
CERN. L, ele escreveu para uso pessoal o Enquire, seu primeiro software para
armazenamento de informaes, que inclua o uso de associaes aleatrias. Esse
programa foi base conceitual para o desenvolvimento futuro da World Wide Web.
De 1981 at 1984, Tim trabalhou na Image Computer Systems, na rea de design
tcnico, incluindo firmware de controle em tempo real, grficos e softwares de
comunicaes, e uma linguagem macro genrica. Em 1984, ele passou a trabalhar no
CERN em sistemas distribudos de tempo real para aquisio de dados cientficos e
controle do sistema.
Em 1994, Tim fundou a World Wide Web Consortium (W3C) no, ento, Laboratrio
de Cincia da Computao (LCS) que se fundiu com o Laboratrio de Inteligncia
Artificial, em 2003, para tornar-se o Laboratrio de Cincia da Computao e Inteligncia
Artificial (CSAIL) no Instituto de Tecnologia de Massachusetts (MIT). Desde esse tempo,
ele serviu como diretor do World Wide Web Consortium, uma organizao de padres
Web que desenvolve tecnologias interoperveis (especificaes, diretrizes, software e
ferramentas) para levar a Web ao seu potencial pleno. O W3C tem ramificaes no MIT,
no ERCIM na Europa, e na Universidade de Keio, no Japo, bem como escritrios ao redor
do mundo.

O que HTML?
HTML (Hiper Text Markup Language) uma linguagem que possibilita apresentar
informaes na Internet. Aquilo que voc v quando abre uma pgina na Internet a
interpretao que seu navegador faz do HTML.

Para que devo usar HTML?
Se voc quer construir websites ter que conhecer HTML. Mesmo que voc use um
programa para criar seu website, tal como o Dreamweaver, um conhecimento bsico de
HTML ser necessrio para tornar as coisas mais simples e para criar um website de
melhor qualidade. A boa notcia que HTML fcil de aprender e de usar.

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
6

Preciso estar online?
No. Voc no precisa estar conectado Internet - tanto para ler esta apostila
como para construir seus websites.
Se voc quer desconectar-se enquanto l esta apostila, voc poder imprimir ou
simplesmente desconectar-se da Internet enquanto l a tela. Voc pode construir seu
website no HD do seu computador e fazer o upload para a Internet quando terminar.

O que so tags?
Tags so rtulos usados para informar ao navegador como deve ser apresentado o
website.
Todas as tags tm o mesmo formato: comeam com um sinal de menor "<" e
acabam com um sinal de maior ">".
Genericamente falando, existem dois tipos de tags - tags de abertura: <comando>
e tags de fechamento: </comando>. A diferena entre elas que na tag de fechamento
existe um barra "/".
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento ser
processado segundo o comando contido na tag.

Exemplo:
<b>Este texto deve ser em negrito. Brasil</b>

Maisculas ou Minsculas?
Para a maioria dos navegadores indiferente se voc usa maiscula, minscula ou
mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem
o mesmo efeito. Contudo a maneira correta usar minsculas. Ento, crie o hbito de
escrever suas tags com minsculas.

O que necessrio para trabalhar com HTML?
muito provvel que voc j tenha as ferramentas que precisa.
Voc tem um "navegador". Navegador um programa que permite visualizar e
navegar por pginas na Internet. Voc est lendo est pgina em um navegador.
No importa qual navegador voc usa. O mais comum o Microsoft Internet
Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
7

Voc j deve ter ouvido falar ou at mesmo pode j ter usado programas tais
como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que
podem - pelo menos anunciam que podem - criar websites para voc. Por ora, esquea
estes programas! Eles no tm qualquer utilidade para voc na tarefa de codificar seu
website.
Voc precisar de um simples editor de textos. Se voc tem instalado o Windows,
poder usar o Notepad (Bloco de Notas), que normalmente pode ser encontrado na
pasta Acessrios.
Se preferir poder utilizar um programa mais avanado como Notepad ++ que
pode ser obtido no site do www.baixaki.com.br


Salvando arquivos em HTML
No Notepad v ao menu "Arquivo" no topo da janela e escolha a opo "Salvar
como...".
Escolha "Todos os arquivos" no box "Salvar como tipo". Isto muito importante -
caso voc no faa isto, o arquivo ser salvo como texto e no como documento HTML.
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
8

Salve seu documento com o nome "pagina1.htm" (a extenso ".htm" indica que se
trata de um documento HTML. A extenso ".html" d o mesmo resultado. Eu sempre uso
".htm", mas voc pode escolher a que voc preferir .htm ou .html). Voc pode salvar o
documento onde voc quiser no seu HD - esteja certo de salvar em um lugar que depois
voc possa achar com facilidade.


Estrutura Bsica
<html>
<head>
<title> Minha primeira pgina web </title>
</head>
<body>
<p>Hurrah! Esta a minha primeira pgina web.</p>
</body>
</html>

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
9

Tags de Formatao
<b> este texto est em negrito </b>
<i> este texto est em itlico </i>
<u> este texto est sublinhado </u>
<s> este texto est riscado </s>

Cabealhos
Formataes usadas para ttulos e subttulos:
<h1> Cabealho nvel 1 </h1>
<h2> Cabealho nvel 1 </h2>
<h3> Cabealho nvel 1 </h3>
<h4> Cabealho nvel 1 </h4>
<h4> Cabealho nvel 1 </h5>
<h6> Cabealho nvel 1 </h6>

<br> e <p>
<br> Quebra de Linha
<p> Criao de pargrafo

Como ver a fonte HTML
Voc j viu uma pgina Web e imaginou "Como eles fazem isso"?
Para descobrir, simplesmente clique na opo EXIBIR na barra de ferramentas do
seu navegador e selecione CDIGO FONTE ou PGINA FONTE. Uma janela ir abrir para
mostrar-lhe a HTML real da pgina.


Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
10

Exerccio Aula 01
Crie um novo documento com a estrutura bsica HTML, digite a seguinte Receita
de Bolo e salve no seu pendrive como receita.html


Bolo de Iogurte

Ingredientes:

1 copo de iogurte natural
2 copos de farinha de trigo
2 copos de acar
4 ovos inteiros
1 colher (sopa) de fermento em p
1/2 copo de leo

Como fazer:

Bata bem todos os ingredientes no liquidificador , deixando o fermento por ltimo.
Despeje a massa em uma assadeira redonda, com furo no meio, untada com manteiga
e polvilhada com farinha. Leve ao forno pr-aquecido, 180C (mdio), at assar (ao
enfiar no bolo um palito, ele deve sair limpo).

Observao: Utilize o copo de iogurte como medida dos outros ingredientes.

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
11

Aula 02- Formatao
Font
A tag font usada para definir a formatao completa do texto.

Exemplo:
<font face=arial size=7 color=red>
A vida bela
</font>

Onde:
Font- define a letra
Size- tamanho, somente at 7
Color: cor da fonte

Align
Por regra o texto aparece sempre alinhado esquerda, porm usando a tag align
podemos alterar o alinhamento (o mesmo vale para imagens).

Exemplo:

<p align=center> Centralizado </p>
<p align=right> Direita </p>
<p align=left> Esquerda </p>
<p align=justify> Justificado </p>

*o alinhamento justificado somente ser visualizado com um texto contendo vrios
pargrafos.

Cores em ingls
A cor do texto pode ser definida atravs do atributo cor. Cada cor por sua vez
definida por um nmero hexadecimal que est composto por trs partes. Cada uma
destas partes representa a contribuio do vermelho, verde e azul cor em questo.

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
12

Por outro lado possvel definir de uma maneira imediata algumas das cores mais
frequentemente usadas para as que se criaram um nome mais memotcnico:




Cores em hexadecimal
As cores possuem um papel muito importante na composio de webs. So
indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos
quantidades de Vermelho, Verde e Azul.
Os valores RBG so indicados em numerao hexadecimal, em base 16. (Os
dgitos podem crescer at 16). Como no existem tantos dgitos numricos se utilizam as
letras da A F.


Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
13

Para conseguir uma cor, misturaremos valores desta maneira:
RRGGBB
Onde cada valor pode crescer desde 00 at FF.

Exemplo: Como se mudaria a fonte para escrever em vermelho:
<font color="#FF0000">Vermelho</font>

Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere #
se coloca ao princpio da expresso.

Outras cores:


Exemplo da web:



Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
14

Exerccio 02
Abra a receita de Bolo de Iogurte criada na aula 01 e formate-a como o exemplo
abaixo:





Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
15

Aula 03- Listas
Lista no-ordenada (Marcadores)
Uma lista no ordenada uma lista de itens. As listas de itens so marcadas com
bullets (tipicamente pequenos crculos pretos).
Uma lista no ordenada comea com a tag <ul>. Cada item da lista comea com a
tag <li>.



Aqui est como aparece em um navegador:



Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha,
imagens, vnculos, outras listas, etc.

Tipos de marcadores
Pode-se alterar o tipo de marcador usando o atributo:
<ul type=square> ou <ul type=circle> ou <ul type=disc>

Lista ordenada (Numeraes)
Uma lista ordenada tambm uma lista de itens. As listas de itens so marcadas
com nmeros.
Uma lista ordenada comea com a tag <ol>. Cada item da lista comea com a tag
<li>.


Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
16

Aqui est como aparece em um navegador:

Tipos de numeraes
Pode-se alterar o tipo de numerao usando o atributo:
<ol type=a>
<ol type=A>
<ol type=I>
<ol type=i>
<ol type=1>

Alm disso determina por qual nmero comear usando o atributo:

<ol start=5 type=a>

Listas de Definio
Uma lista de definies no uma lista de itens. Esta uma lista de termos e
explicaes dos termos.
Uma lista de definies comea com a tag <dl>. Cada termo da lista de definies
comea com a tag <dt>. Cada definio da lista de definies comea com a tag <dd>.


Aqui est como aparece em um navegador:


Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
17

Exerccio 03
Digite os seguintes comandos e salve como listas.html


<html>
<body>

<h4>Lista numerada:</h4>
<ol>
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com letras:</h4>
<ol type="A">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com letras
minsculas:</h4>
<ol type="a">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com nmeros
romanos:</h4>
<ol type="I">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com nmeros romanos
minsculos:</h4>
<ol type="i">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>

</body>
</html>
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
18

Aula 04- Imagens
Imagem
Algumas imagens num site Web podem torn-lo mais atrativo e mais convivial. No
obstante, importante no exagerar, porque as imagens podem implicar um tempo de
carregamento bastante longo e podem em certos casos prejudicar a legibilidade.
A baliza IMG da linguagem HTML permite inserir imagens numa pgina HTML. A
imagem pode estar situada no mesmo servidor que a pgina na qual inserida mas
igualmente num outro servidor especificando a sua URL completa.
S os seguintes formatos de imagens so aceites em standard nas especificaes
do W3C:
As imagens JPEG (.JPG) : as imagens que tm um grande nmero de cores sero
bem comprimidas, o que quer dizer que ocuparo menos espao, por conseguinte
necessitaro um tempo de carregamento menor)
As imagens PNG : A sua dimenso fraca no caso de imagens com poucas cores ou
com toms uniformes. Este formato permite, alm disso, ter imagens entrelaadas (que se
afixam progressivamente) com uma profundidade de cores de 24 bits e imagens nas
quais se define uma cor como transparente.
As imagens GIF : Possuem as mesmas vantagens que as imagens PNG,mas o
formato GIF est limitado a 256 cores no mximo e este formato no totalmente livre.

Propriedades da imagem:

SRC : Indica o lugar da imagem ( obrigatrio)
ALIGN : Especifica o alinhamento da imagem em relao ao texto adjacente. Pode
ter os valores: TOP, MIDDLE, e BOTTOM (em cima, ao meio e debaixo)
ALT : Permite afixar um texto alternativo quando a imagem no se afixa.
TITLE : Permite afixar uma bolha informativa aquando passa pela imagem com o
cursor.
WIDTH : Permite especificar a amplitude da imagem.
HEIGHT : Permite especificar a altura da imagem.





Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
19

Assim, para inserir uma imagem, ser necessrio introduzir uma baliza do tipo:

<IMG SRC="url_de_l_image"
ALT="Texto que substitui a imagem"
TITLE="Texto a afixar">


Imagem de Fundo
Este exemplo demonstra como adicionar uma imagem de fundo em uma pgina
HTML.

<html>
<body background="background.jpg">
<h3>Veja: Uma imagem de fundo!</h3>
<p>Tanto arquivos gif quanto jpg podem ser
usados como plano de fundo HTML.</p>
<p>Se a imagem for menor do que a pgina,
a imagem ser repetida.</p>
</body>
</html>


Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
20

Exerccio 04
Crie um novo documento e digite as seguintes tags:


OBS: salve 8 imagens em seu pendrive.

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
21

Aula 05- Marquee
Animaes (marquee)
possvel animar alguns textos com tipos especiais de formatao, sempre
diretamente no cdigo fonte.
importante notar que recursos de animao devem ser utilizados com cuidado e
parcimnia, pois em uma pgina que j apresenta vrios motivos que chamam a ateno
do leitor (figuras, cores, fontes) os efeitos animados so mais um deles, e seu uso pode
ocasionar um resultado final cansativo e confuso.
muito simples, basta utilizar a tag
<marquee>

Vamos ver um exemplo:

<html>
<head>
<title> Exemplo </title>
</head>
<body>
</marquee>Este texto aparecer na tela do computador movimentando-se da
direita para a esquerda como um letreiro digital</marquee>
</body>
</html>

Note que o texto fica entre as tags
<marquee> e </marquee>
Tudo o que estiver entre essas duas tags, vai se movimentar. Voc, alm de
movimentar textos, pode tambm, movimentar imagens.

Veja um outro exemplo:
<marquee>
<img src=imagem.jpg>
</marquee>

Nesse caso a figura imagem.jpg ira se movimentar na tela da direita pra
esquerda, constantemente e sem parar, igual a um letreiro digital, s que em vez de
texto, uma imagem vai de mexer.
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
22

Velocidade (scrollamount)
A propriedade scrollamount utilizada para definir a velocidade da animao
(FPS):

<marquee scrollamount=50> Rpido </marquee>

Direo (direction)
H alguns atributos teis da tag marquee. Um dos mais interessantes o de
direo. Voc pode definir pra qual direo seu objeto (texto ou imagem) vai se
movimentar, pode ser pra esquerda, pra direita, pra cima ou pra baixo. Por padro o
movimento da direita pra esquerda.
veja um exemplo:

<marquee direction=right>
Este exto vai se mexer da esquerda pra direita.
</marquee>

As opes de direction so:
- right, da esquerda para direita;
- left vice-versa da anterior;
- up, de baixo pra cima e
- down de cima pra baixo.


Comportamento (behavior)
Com este atributo, definimos o estilo de comportamento executado pela
animao, podendo ser utilizado um entre os trs valores disponveis:
Behavior="scroll" - Este o comportamento padro utilizado pela tag <marquee>.
Faz com que o elemento entre por um lado da tela e saia pelo outro, em um ciclo.

Behavior="slide" - Faz com que o elemento entre por um lado da tela e se
desloque at o outro lado.
Behavior="alternate" - Faz com que o elemento se desloque de um lado para o
outro da tela, em um ciclo.

Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
23

Repeties (Loop)
Com este atributo, podemos definir o ciclo de repeties que ser aplicada a um
comportamento estabelecido para a animao:
(Loop="3") A animao executar o movimento estabelecido por trs vezes.
Loop="infinite" O ciclo de movimentos ser executado ininterruptamente.

Largura (width)
Largura do marquee. Se no marcamos altura, se colocar na seguinte linha, como
em um pargrafo distinto. Se marcarmos uma largura, a marquee tentar se mostrar na
mesma linha onde a tivermos colocado. Se no houver espao para ela se realizar a
conseguinte quebra de linha para mostr-la um pouco mais abaixo.

BGCOLOR
A cor de fundo do marquee. Aceita o nome de uma cor HTML ou de um valor RGB
de tal cor.

HSPACE e VSPACE
Estes dois atributos servem para definir o nmero de pixel que deve aparecer entre
o marquee e outros contedos da pgina, em horizontal e vertical.

Onmouseover e Onmouseout
Estes atributos permitem criar uma interao de acordo com a ao do usurio.
Exemplo:
<html>
<head>
<title> Animaes </title>
</head>
<body bgcolor="purple">
<p align="center">
<marquee scrollamount="40" direction="up" height="400"
onmouseover="this.stop();" onmouseout="this.start();">
<img src="jinx.png">
</p></marquee> </body> </html>
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
24

Exerccio 05
Digite a estrutura bsica HTML com os seguintes comandos e salve como
animao.html



<marquee behavior="slide" direction="left">Seu texto aqui</marquee>
<marquee behavior="scroll" direction="left"> Seu texto aqui </marquee>

<marquee behavior="alternate"> Seu texto aqui </marquee>

<marquee behavior="scroll" direction="up"> Seu texto aqui </marquee>
<marquee behavior="scroll" direction="left" scrollamount="1"> Seu texto aqui
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10"> Seu texto aqui
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20"> Seu texto aqui
</marquee>
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
25

Aula 06- Links
Criando links
Para construir um link voc usa o que
tem usado at agora para codificar HTML: uma
tag. Uma simples e pequenina tag com um
elemento e um atributo suficiente para voc
construir links para onde quiser.
A tag <a> usada para criar uma ncora
de onde vincular, o atributo href usado para
onde enderear o documento, e as palavras
entre as tags de abertura e fechamento da
ncora sero exibidas como um hipervnculo.

Exemplo:

<a href=http://www.advanced.art.br> Acesse </a>

Alvo (Target)
Com o atributo alvo, voc pode definir onde o documento vinculado ser aberto.
A linha abaixo abrir o documento em uma nova janela do navegador:

<a href=http://www.advanced.art.br target=_blank> Acesse </a>

Cor dos links
Para facilitar a navegao pode-se usar cores diferentes para os links:
- LINK: a cor dos links no visitados
- ALINK: a cor que os links devem piscar no momento em que so acessados
- VLINK: a cor dos links j visitados
Ou seja, os navegadores guardam a informao sobre os links j visitados pelo
usurio em um certo perodo de tempo, assim muito til que a cor dos links j visitados
seja diferente da cor dos no visitados, para orientar o visitante quanto ao que j viu ou
no.
Alm disso, o link pode piscar em outra cor, diferente dessas duas, no momento
em que clicado pelo usurio, para chamar a ateno para aquele ponto.
Advanced Graphic Computing and Arts

Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290
Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109
26

Exerccio 06
Crie um documento com a estrutura bsica HTML e digite os seguintes comandos
para a criao de links:


<html>
<head>
<title> Links </title>
</head>
<body bgcolor="#ff4500">

<a href="http://www.aulavaga.com.br"> Jogos </a> <p>
<a href="http://www.eumenti.com"> Comdia </a> <p>
<a href="http://www.youtube.com"> Vdeos </a> <p>
<a href="http://www.numclique.net"> Nerd </a> <p>
<a href="http://www.redbug.com.br"> Camisetas </a>
<p>

</body>
</html>

Você também pode gostar