Autora:

MARCIA BUCHI DO NASCIMENTO

HTML AVANADO
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
1
SUMARIO
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Apresentao
Curso On-Line
Introduo
a!e"as
#or$u"%rio
#ra$e
&n'ora (o$inada
#o")a de *sti"o
Adi'ionando +,si'a
Adi'ionando e-to Ani$ado.+A/01**2
Cara'teres *spe'iais
3i'as I$portantes
3
3
4
5
10
15
20
21
22
23
24
25
1 - APRESENTAO:
Esta apostila foi cuidadosamente elaborada pelo Portal E-Learning www.cadex.com.br e
parte didtico do curso http://www2.cadex.com.br/html.htm. Material exclusivo com finalidade
de auxiliar o usurio sobre a forma de consulta e acompanhamento do curso On-Line E-CADEX.
O CADEX, tentou abranger o mximo de aproveitamento sobre todo o assunto relacionado ao
HTML.
Toda informao referente ao contedo desta apostila de inteira responsabilidade da
autora e administradora do curso. A reproduo do material e circulao ser permitida desde
que citados a fontes e o nome da Autora.
O curso On-Line foi desenvolvido em 02 (dois) Mdulos com objetivos de levar maiores
conhecimentos e aprendizado a aqueles que querem iniciar a criao de Sites atravs desta
linguagem de marcao de hipertexto.
2. CURSO ON-LINE:
O qu !"
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
2
HTML - Hypertext Markup Languagem - Linguagem de Marcao de Hipertexto. a
linguagem utilizada na criao de pginas Web (World Wide Web) uma linguagem simples e
acessvel porque no h necessidade de ser traduzida para a linguagem de computador como
em outras linguagens de programas do tipo: Delphi, Clipper e etc... pois os prprios browser
(Netscape ou Internet Explorer) executam os comandos contidos nos arquivos.
#$%&i'o (&)o"
O curso foi desenvolvido para auxiliar o usurio a conhecer a linguagem HTML. Atravs
de temas que sero abordados em ordem cronolgica. Este curso tem como objetivo levar aos
principiantes em HTML conhecimentos tericos e prticos para realizao da construo de
pginas Web e assim proporcionando ao usurio conhecimento e aperfeioamento e com o
conhecimento adquirido aqui, ele estar apto para criar e inovar pginas Web.
Dur(*+o ,o Cur-o"
Um dos benefcios de se utilizar o Portal e-learning (O CADEX) quanto ao tempo de
durao do curso, onde cada Membro encarrega-se de se programar conforme sua
disponibilidade de tempo e horas nos estudos e realizar os exerccios propostos pelo Curso.
Lembrando-se que o aperfeioamento depender da disponibilidade de horas e pela dedicao
de cada aluno.
#rogr(.("
HTML /0SICO 12 ETA#A" Tem como finalidade introduzir a inicializao do
conhecimento HTML, trazendo a familiarizao com os comandos e as principais caractersticas
do uso habitual dos comandos simples como: formatao de texto, colocao de imagens, links
e etc.
HTML A3AN4ADO 22 ETA#A" Introduo de comandos mais avanados para a
realizao de pginas WEB como: tabelas, frames, som e etc.
Co.o 5u6'io6("
As aulas esto disponveis on-line de forma gradativamente para membros cadastrados
no www.cadex.com.br. Cada aluno poder programar o melhor horrio para estudar e realizar os
exerccios, propostos ao longo do curso. Os alunos que possuem algum conhecimento de HTML
podero pular o cronograma de ensino, mais sempre respeitando os trabalhos a serem
entregues no final do curso para avaliao final do que desempenhou.
Os Alunos podero tirar as suas dvidas enviando suas perguntas atravs do e-mail do
mabuc@cadex.com.br.
O Grupo poder participar e interagir com outros membros e com profissionais da rea
atravs de nosso frum no http://www.cadex.com.br/forum/index.php enviando suas
mensagens de duvidas e dicas para o frum, onde diariamente estaremos verificando e
respondendo todas as mensagens.
No final do treinamento os alunos podero disponibilizar seus trabalhos realizados, em
nosso MURAL e a Certificao do conceito de reconhecimento virtual concedido atravs de uma
avaliao feita atravs dos trabalhos realizados do inicio at o fim do curso, avaliando cada
aluno em suas atitudes individuais e em comparao as atitudes do coletivo. Ao termino do
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
3
contedo avaliado o aluno submetido a uma avaliao final para comprovar a avaliao do
desempenho dele ao logo de toda a trajetria do curso.
3. INTRODUO:
Os documentos em HTML so como arquivos ASCIL comuns, que podem ser editados
em: vi, emacs, textedit, notepad ou qualquer outro editor simples.
Para editarmos os comandos HTML utilizaremos o bloco de notas que possui no prprio
7i6,o8-. Todo documento HTML comandos tambm chamados de TAGs so apresentados
entre parnteses angulares <..> inicio e </..>fim.
Os comandos no so sensveis a caixa, ou seja, tanto faz escrever: <HTML>, <HTml> <
html>, <Html>.
importante (para fins de organizao) que as TAGs sejam sempre fechadas do ltimo
para o primeiro desde modo: <head><title>documento </title></head>.
. TABELAS:
Podemos atravs da tabela organizar textos e imagens de maneira
harmoniosa.As tabelas implementam um conceito importante de layout. Podem conter
qualquer tipo de formatao como: textos, imagens, listas e etc...
A tabela representada pelas TAGs 9t(%&: e 9;t(%&: e possui os seguintes
atributos:
%or,r<=)(&or= : Define a largura da borda (contorno).
'&&-p('i6g<>)(&or> : Define o espao horizontal entre as clulas.
'&&p(,,i6g<>)(&or> : Define o espao vertical entre as clulas.
8i,th<=)(&or= : Define a largura da tabela em pixels ou em porcentagem.
hight<=)(&or= : Define a altura da tabela em pixels ou em porcentagem.
%g'o&or<=?'or= : Define a cor de fundo da tabela.
%or,r'o&or<>?'or> : Define a cor da borda.
%('@grou6,<>6o.,(i.(g..Apg> : Define uma imagem de fundo.
A tabela possui alguns comandos que so:
9'(ptio6: 9;'(ptio6: : Define o ttulo da tabela.
9tr: 9;tr: : Define uma linha da tabela.
9th: 9;th: : Define um cabealho da tabela.
9t,: 9;t,: : Define a coluna de dados.
EB.p&o 1"
9t(%& %or,r<=C= %or,r'o&or<=?550000= '&&-p('i6g<=12= '&&p(,,i6g<=D=
8i,th<=1C0= hight<=C0= %g'o&or<=?EEEE55=9tr:9t,:primeira
coluna9;t,:9t,:segunda coluna9;t,:9t,:terceira coluna9;t,:9;tr:9tr:
9t,:primeira linha9;t,:9t,:primeira linha9;t,:9t,:primeira
linha9;t,:9;t(%&:9%r:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
4
EB.p&o 2"
9t(%& %or,r<=1= %or,r'o&or<=?EEEE55= '&&-p('i6g<=0= '&&p(,,i6g<=0=
8i,th<=F00= hight<=100= %('@grou6,<=i.g01.Apg= 9tr:9t,:primeira
coluna9;t,:9t,:segunda coluna9;t,:9t,:terceira coluna9;t,:9;tr:
9tr:9t,:primeira linha9;t,:9t,:primeira linha9;t,:9t,:primeira
linha9;t,:9;t(%&:9%r:
EB.p&o F"
9t(%& %or,r<=1= '&&-p('i6g<=1= '&&p(,,i6g<=1= 8i,th<=C00=
hight<=100=:9'(ptio6:Ttulo da tabela9;'(ptio6:
9tr:9th:Cabealho da tabela9;th:9th:Cabealho da tabela9;th:9th:Cabealho
da tabela9;th:9;tr:
9tr:9t,:primeira linha9;t,:9t,:primeira linha9;t,:9t,:primeira
linha9;t,:9;tr:
9tr:9t,:segunda linha9;t,:9t,:segunda linha9;t,:9t,:segunda
linha9;t,:9;tr:9;t(%&:9%r:9%r:
3A( 'o.o 5i'(r(. -t(- t(%&(-"
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
5
Seguindo estes mesmos exemplos, vamos eliminar as bordas colocando o valor
G0> em cada um desses mesmos exemplos.
3A( 'o.o -t(- .-.(- t(%&(- 5i'(r(."
Podemos alinhar o texto dentro das clulas utilizando os seguintes atributos.
A&ig6<>&5t> : Alinha o texto esquerda.
A&ig6<>right> : Alinha o texto direita.
A&ig6<>'6tr> : Alinha o texto ao centro.
3(&ig6<>top> : Alinha o texto no topo da clula.
3(&ig6<>.i,,&> : Alinha o texto no meio da clula.
3(&ig6<>%otto.> : Alinha o texto na parte inferior da clula.
O/S" Se for definido o alinhamento na TAG 9tr: no haver necessidade de alinha-lo
nas TAGs 9th: e 9t,:.
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
6
EB.p&o"
9t(%& %or,r<=1= 8i,th<=E00= hight<=1C0=:
9tr:9t,:Alinhamento padro9;t,:
9t, (&ig6<='6tr= )(&ig6<=top>=:Alinhamento ao centro e no topo9;t,:
9t, (&ig6<=&5t= )(&ig6<=.i,,&=:Alinhamento esquerda no meio da
clula9;t,:
9t, (&ig6<=right= )(&ig6<>%otto.>:Alinhamento direita e na parte inferior da
clula9;t,:
9;tr:9;t(%&:9%r:
Para englobarmos colunas e linhas (.-'&(r) utilizamos os seguintes atributos:
Co&-p(6: Mesclam as colunas.
Ho8-p(6: Mesclam as linhas.
EB.p&o"
9t(%& %or,r<=1=:
9tr:9t, 'o&-p(6<2:Mesclando primeira e segunda coluna9;t,:9;tr:
9tr:9t,:primeira linha9;t,:9t,:primeira linha9;t,:9;tr:
9tr:9t,:segunda linha9;t,:9t,:segunda linha9;t,:9;tr:
9tr:9t, ro8-p(6<F:Mesclando trs linhas9t,:uma linha9;t,:9;tr:
9tr:9t,:duas linhas9;t,:9;tr:
9tr:9t,:trs linhas9;t,:9;tr:
9;t(%&:
Como foi dito anteriormente podemos utilizar qualquer formatao dentro da
clula, utilizando as TAGs e os atributos correspondentes. Vamos adicionar uma
imagem na tabela.
EB.p&o"
9t(%& %or,r<F 8i,th<100 hight<100:
9tr (&ig6<='6tr=:9t,:9i.g -r'<=img02.jpg=:
9;t,:9;tr:9;t(%&:
Vamos agora adicionar uma lista dentro da clula
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
7
EB.p&o"
9t(%& %or,r<>1>:9tr:
9t,:Adicionando uma lista dentro da clula
9u&:9&i:primeiro item
9&i:segundo item
9&i:terceiro item
9;u&:9;t,:9;t(%&:
3A( 'o.o 5i'(r(. -t- B.p&o- ('i.("
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
8
!. "ORMUL#RIO:
Um formulrio tem como finalidade de interao entre o usurio e o servidor ao
qual so transmitidas informaes para o proprietrio da pgina. possvel criar reas
para entrada de texto, fazer pesquisas, pginas cujo formato dependem de uma opo
escolhida pelo usurio.
A tag correspondente 95or.: e 9;5or.: que determinam o incio e o fim de um
formulrio.
Outros comandos so:
9tBt(r(:9;tBt(r(: - Define uma caixa de texto.
Seus atributos so:
N(.<>6o.> - Define o nome dos dados.
Ho8-<>)(&or> - Define quantas linhas ter a caixa de texto.
Co&-<>)(&or> - Define quantas colunas ter a caixa de texto.
3(&u<>tBto> - Define qual o texto que ser enviado.
EB.p&o"
95or.:
9tBt(r( 6(.<>Ar(I,ItBto> ro8-<4 'o&-<40 )(&u<>Co.6t(rio->:Texto
padro9;tBt(r(:
9;5or.:
9-&'t:9;-&'t: - Define uma lista de opo.
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
9
Antes da tag 9;5or.: digite mais este B.p&o:
9-&'t:
9optio6 -&'t:Escolher um item9;optio6:
9optio6:primeiro item9;optio6:
9optio6:segundo item9;optio6:
9optio6:terceiro item9;optio6:9;-&'t:
Passe o mouse sobre a imagem abaixo e veja como ficaram estes exemplos.
Pode ser colocada uma alternativa pr-escolhida usando -&'t,
Antes da tag 9;5or.: digite este B.p&o:
9-&'t 6(.<>escolhido>:
9optio6:primeiro item9;optio6:
9optio6:segundo item9;optio6:
9optio6 -&'t,:terceiro item9;optio6:9;-&'t:
9i6put-: - Define botes e caixas de seleo.
Atributos
Typ<>tBt> - Caixa de texto simples.
Typ<>p(--8or,> - Dados confidncias.
No GtBt> e no Gp(--8or,> podem ser usados os seguintes atributos:
N(. - Define o nome dos dados.
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
10
SiJ - Define o tamanho do campo.
M(B&6gth - Define o mximo de caracteres.
Antes da tag 9;5or.: digite mais este B.p&o.
9i6put typ<>tBt> 6(.<>6o.>-iJ<>1C> .(B&6gth<>FC>:9%r:
9i6put typ<>p(--8or,> 6(.<>-6h(> -iJ<>10> .(B&6gth<>E>:
Passe o mouse sobre a imagem abaixo e veja como ficaram os exemplos acima.
Typ<>'h'@%oB> - Permite selecionar vrias opes.
Atributos
N(. - Define o nome de dados.
3(&u - Define o valor a ser retornado para o nome escolhido.
Antes da tag 9;5or.: digite mais este B.p&o:
9i6put typ<>'h'@%oB>6(.><op*+o>)(&u<>pri.ir(
-'o&h(>:primeira9%r:
9i6put typ<>'h'@%oB>6(.><op*+o>)(&u<>-gu6,(
-'o&h(>:segunda9%r:
9i6put typ<>'h'@%oB>6(.><op*+o>)(&u<>tr'ir( -'o&h(>:terceira9%r:
typ<'h'@, - Marca uma escolha inicial, ou seja, se o usurio no escolher a
opo, o formulrio ir considerar a alternativa pr escolhida.
Antes da tag 9;5or.: digite mais este B.p&o:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
11
9i6put typ<>'h'@%oB> 6(.<>op*+o>)(&u<>pri.ir(
-'o&h(>:primeira9%r:
9i6put typ<>'h'@%oB> 6(.<>op*+o>)(&u<>-gu6,(>
'h'@,:segunda9;'h'@,:9%r:
9i6put typ<>'h'@%oB> 6(.<>op*+o>)(&u<>tr'ir(
-'o&h(>:terceira9%r:
typ<>r(,io> - Permite selecionar apenas uma opo.
Atributos
N(. - Define o nome de dados.
3(&u - Define o valor a ser retornada para o nome escolhido.
Antes da tag 9;5or.: digite mais este B.p&o.
9i6put typ<>r(,io> 6(.<>r-po-t(> )(&u<>-i.>:sim9%r:
9i6put typ<>r(,io> 6(.<>r-po-t(> )(&u<>6+o>:no9%r:
typ<>-u%.it> - Processa os dados do formulrio.
Atributos
3(&u - Define o nome que aparecer mo boto.
Antes da tag 9;5or.: digite mais este B.p&o.
9i6put typ<>-u%.it> )(&u<>enviar>:
typ<>r-t> - Limpa os dados do formulrio.
Atributo
3(&u - Define o nome que aparecer no boto.
Antes da tag 9;5or.: digite mais este B.p&o.
9i6put typ<>r-t> )(&u<>Limpar>:
Veja como ficaram estes exemplos:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
12
Cada marcao de entrada em um formulrio tem a opo "NAME associada,
de tal forma que o script saiba qual o nome, isto como chamar cada valor digitado.
Certamente voc pode definir mais de um campo de entrada textual ou menu dentro
de um formulrio, mas certifique-se de que cada um possui um nome diferente.
OBS: Utilize sublinhado ao valor informado em "NAME em vez de espaos em branco,
para no gerar problemas no servidor na decodificao dos valores informados
(exemplo: name=opiniao_do_usuario)
Existem dois mtodos: "GET e "#OST para enviar a informao do formulrio
para o servidor.
METHOD<>GET> - Este mtodo envia toda sua informao ao final da URL ativada,
pois a maioria dos documentos HTML so recuperados a partir da requisio de uma
nica URL ao servidor.
METHOD< G#OST> - Este mtodo transmite toda a informao fornecida, via
formulrio, imediatamente aps a URL ativada, ou seja, quando o servidor recebe uma
ativao de um formulrio utilizando POST, ele sabe que precisa continuar "ouvindo
para obter a informao. Este o melhor mtodo.
Utilizando a marcao ACTION, voc estar indicando para onde o formulrio
deve enviar as informaes. Esta URL em geral aponta para um script CGI que ir
receber e decodificar os resultados. Lembre-se que se voc est referenciando um
script que reside no mesmo servidor do formulrio, voc no precisa incluir a URL
completa.
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
13
Neste exemplo abaixo as informaes esto sendo enviadas para um script local
chamado: po-t-qury 6o ,irtKrio" ;'gi-%i6 ,o -r)i,or.
EB.p&o"
95or. METHOD<>#o-t> ACTION<>;'gi-%i6;po-t-qury>:
Neste outro exemplo abaixo as informaes esto sendo enviadas para o
endereo de correio eletrnico.
<5or. METHOD<>#o-t> ACTION<mailto:nomedoemail@provedor.com.br>
$. "RAME:
Os frames so divises da tela do browser, ou seja, mais de uma pgina em
uma s tela. Para se criar uma pgina com 2 frames ser necessrio 3 pginas, sendo
uma para cada frame e outra para a pgina principal que ter as informaes destes
frames dentro dela e somente nesta pgina ser utilizado as tags referentes ao FRAME.
Esta pgina principal dever ser salva como: index.html.
A TAG correspondente 9 5r(.: e 9;5r(.:utilizada antes da TAG
9%o,y:.
Outros comandos:
95r(.-t:9;5r(.-t: - Define a diviso da pgina e quadros, onde o atributo
'o&- divide em colunas (so definidas da esquerda para a direita) e ro8- divide em
linhas.
Dentro da formatao da 5r(.-t temos os 5r(.- -r' que so referncias
s pginas que sero mostradas no frame definido.
Tambm tem 6o5r(., utilizado para informar ao usurio que utilizam antigos
browser (anteriores ao Netscape 2.0) que a pgina contm frames, mas que no as
conseguem visualizar.
Abaixo daremos alguns exemplos para que voc tenha a noo de como
ficariam suas pginas com as frames, mas antes disto, crie 5 pginas simples
mudando apenas a cor de fundo e salvando-as como: pagina1.html; pagina2.html;
pagina3.html; pagina4.html e pagina5.html.
EB.p&o"
9ht.&:
9h(,:
9tit&:Pgina 019;tit&:
9;h(,:
9%o,y %g'o&or<=?LLLLCC=:
9;%o,y:
9;ht.&:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
14
Como montar os frames em colunas.
EB.p&o"
9ht.&:
9h(,:
9tit&:Exemplo de Frame 9;tit&:
9;h(,:
95r(.-t 'o&-<>20 M N O0 M>:
95r(. -r'<>pagina1.html>:
95r(. -r'<>pagina2.html>NAME<pri6'ip(&:
96o5r(.:
9;6o5r(.:
9;5r(.-t:
9%o,y:
9;%o,y:
9;ht.&:
Salve esta pgina como: index.html
3A( 'o.o 5i'(ri( -u( pPgi6("
Criado este frame voc pode criar outro frame em linha. Faa as seguintes alteraes
que esto grifadas em vermelho
EB.p&o"
9ht.&:
9h(,:
9tit&:Exemplo de Frame 9;tit&:
9;h(,:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
15
95r(.-t 'o&-<>20MN O0M>:
95r(. -r'<>pagina1.html>:
95r(.-t ro8-<>20MNO0M>:
95r(. -r'<>pagina3.html>:
95r(. -r'<>pagina2.html> NAME<pri6'ip(&:
96o5r(.:
9;6o5r(.:
9;5r(.-t:
9;5r(.-t:
9%o,y:
9;%o,y:
9;ht.&:
3A( 'o.o 5i'(ri( -u( pPgi6("
Como montar os frames em linhas:
EB.p&o"
9ht.&:
9h(,:
9tit&:Exemplo de Frame 9;tit&:
9;h(,:
95r(.-t ro8-<>20MNO0M>:
95r(. -r'<>pagina1.html>:
95r(. -r'<>pagina2.html> NAME<pri6'ip(&:
96o5r(.:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
16
9;6o5r(.:
9;5r(.-t:
9%o,y:
9;%o,y:
9;ht.&:
3A( 'o.o 5i'(ri( -u( pPgi6("
Criado este frame voc pode criar outro frame em coluna.
EB.p&o"
9ht.&:
9h(,:
9tit&:Exemplo de Frame 9;tit&:
9;h(,:
95r(.-t ro8-<>20MNO0M>:
95r(. -r'<>pagina1.html>:
95r(.-t 'o&-<>20MNO0M>:
95r(. -r'<>pagina3.html>:
95r(. -r'<>pagina2.html> NAME<pri6'ip(&:
96o5r(.:
9;6o5r(.:
9;5r(.-t:
9;5r(.-t:
9%o,y:
9;%o,y:
9;ht.&:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
17
3A( 'o.o 5i'(ri( -u( pPgi6("
Agora iremos fazer os links. Abra as pginas: pagina1.html e pagina3.html e
acrescente:
<a href=pagina4.html target=principal>Link 01<a><!r>
<a href=pagina5.html target=principal>Link 02<a><!r>
%. &NCORA NOMINADA:
A ncora nominada utilizada para definir o ponto de chegada do documento,
ou seja, se sua pgina for longa e voc deseja que o usurio quando chegar ao final
da pgina , volte ao topo da mesma sem ter que utilizar a barra de rolagem, ou para o
usurio ir a um determinado item de uma outra pgina de seu site voc ir utilizar a
ncora.
O/S" Poder ser utilizado um texto ou uma imagem para determinar a ncora.
Redirecionar para um ponto qualquer da mesma pgina, digite no local
desejado (se for para o topo da pgina, voc poder digitar o cdigo antes da tag
<body>):
9( 6(.<>6o.,((6'or(>:9;(:
Digite no local onde voc deseja que a pgina retorne para outro ponto da
mesma, ou seja, no corpo da pgina depois do 9%o,y:.

9( hr5<>?6o.,((6'or(>:Retornar ao incio9;(:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
18
Utilizando uma imagem como ncora:
9( hr5<>?6o.,((6'or(>:9i.g -r'<>6o.,(i.(g..Apg>:9;(:
Para ir a outra pgina:
9( hr5<>6o.,(p(gi6(.ht.&?6o.,((6'or(>:Outra pgina9;(:
Utilizando uma imagem como ncora:
9( hr5<>6o.,(p(gi6(.ht.&?6o.,((6'or(>:
9i.g -r'<>6o.,(i.(g..Apg>Q9;(:

O/S" Nesta outra pgina voc dever colocar a R6'or( 6o.i6(,(, no local onde voc
desejar que o usurio se direcione. Digite no local desejado:
9( 6(.<>6o.,((6'or(>:9;(:
'. "OLHA DE ESTILO:
Voc pode personalizar sua pgina utilizando a folha de estilo que permitir a
voc definir a fonte, cor e tamanho de toda sua pgina,quando se tratar de um texto
longo.
Aps a TAG 9h(,: digite:
9-ty& typ<>tBt;'-->:
%o,yS5o6t"14pt )r,(6(T
hFS'o&or"?EEEE55T
.,-t(quS'o&or"?550000T
9;-ty&:
No decorrer do seu texto voc s precisar acrescentar a TAG: 9-p(6
'&(--<=,-t(qu=:...9;-p(6: , quando precisar realar alguma palavra.Quanto
formao de fonte, estilo de fonte e a cor do cabealho, j esto personalizados. Seu
texto ficaria parecido com o exemplo abaixo:
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
19
(. ADICIONANDO M)SICA:
Para se inserir uma msica no site, digite antes da tag 9;h(,: a tag: 9%g-ou6,
-r'<>6o.,o(rqui)o..i,> Uou .8()Q:
Ou utilize a mesma tag e no lugar do: >6o.,o(rqui)o. .i,>, coloque o
endereo da VHL do site de msica.
EB.p&o"

9%g-ou6, -r'<http://www.nomedosite/nomedamusica.mid :

Utilizando esta tag no aparecer nenhum reprodutor(display).
Para que a msica toque vrias vezes acrescente: &oop<=-1=
EB.p&o"
9%g-ou6, -r'<>6o.,o(rqui)o..i,> &oop<>-1>

Outra forma seria colocar a tag: 9.%, -r'<=6o.,o(rqui)o..i,=
(uto-t(rt<=tru= Loop<=1=:, onde aparecer um reprodutorU,i-p&(yQno local que
voc desejar dentro da tag 9%o,y:.
Ou utilize a mesma tag e no lugar do" >6o.,o(rqui)o. .i,>, coloque o
endereo da VHL do site de msica.

EB.p&o"
9.%, -r'<"http://www.nomedosite/nomedamusica.mid" (uto-t(rt<=tru=
Loop<=1=:
Veja um exemplo do display
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
20
1*. ADICIONANDO TE+TO ANIMADO ,MAR-UEE.:
Para se colocar um texto animado ser utilizado a tag:
9.(rqu:9;.(rqu: e o texto ir rolar da direita para a esquerda. Para que o
texto role da esquerda para a direita acrescente ,ir'tio6<=right=. Para que o texto
role de baixo para cima acrescente ,ir'tio6<>up>. Para que o texto role de cima
para baixo acrescente ,ir'tio6<>,o86>.
Utilizando o Gup> ou G,o86>, os mesmos podem ser definidos a altura:
hight<>)(&or> e a largura: 8i,th<>)(&or>
O/S: Efeito visualizado somente no Internet Explorer.
EB.p&o:
9.(rqu: digite seu texto9;.(rqu:
9.(rqu ,ir'tio6<=right=: digite seu texto9;.(rqu:
9.(rqu ,ir'tio6<>up> hight<>F0> 8i,th<>100>:digite seu
texto9;.(rqu:

Seus atributos so:
/EHA3IOH<=)(&or= - Define o tipo de comportamento.

GA&tr6(t> - o texto rola at o canto esquerdo e volta.
GS&i,> - o texto rola at o canto direito e para.

EB.p&o"
9.(rqu %h()ior<=(&tr6(t=:digite seu texto9;.(rqu:
9.(rqu %h()ior<=-&i,=:digite seu texto9;.(rqu:

SCHOLLDELAW<=)(&or= - define a velocidade.

EB.p&o"

9.(rqu -'ro&&,&(y<>F00>:digite seu texto9;.(rqu:

O/S" O texto pode ser formatado e o marquee poder ser alinhado. O texto poder
ser substitudo por uma imagem.

3A( (&gu6- B.p&o-"

9p:9.(rqu:Exemplo de texto animado9;.(rqu:

9p:9.(rqu ,ir'tio6<=right=:95o6t -iJ<=F='o&or<=?5500''=
5('<=Co.i' S(6- MS=:Exemplo de texto animado9;5o6t:9;.(rqu:9;p:

Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
21
9p:9.(rqu (&ig6<=.i,,&= %h()ior<=-&i,= %g'o&or<=?C0C0C0=:95o6t
-iJ<=C='o&or<=?55''00= 5('<=Lu'i,( Co6-o&=:Exemplo de texto animado
9;5o6t:9;.(rqu:9;p:

9p:9.(rqu (&ig6<=%otto.= %h()ior<=(&tr6(t=
%g'o&or<=?LLLLLL=:95o6t -iJ<=4='o&or<=?''0000= 5('<=Mo6otyp
Cor-i)(=:Exemplo de texto animado9;5o6t:9;.(rqu:9;p:

9p:9p (&ig6<='6tr=:9.(rqu:9img src=nomedaimagem.jpg:
9;.(rqu:9;p:

9p:9p (&ig6<=right=:9.(rqu %g'o&or<=?LLLLXX= 8i,th<=FC0=
hight<=F0= %h()ior<=(&tr6(t=:95o6t -iJ<=E='o&or<=?55''55=
5('<=Mo6otyp Cor-i)(=:Exemplo de texto animado9;5o6t:9;.(rqu:
9;p:

9p:9.(rqu %g'o&or<=?EECCLL= 8i,th<=400= hight<=F0=
%h()ior<=(&tr6(t= -'ro&&,&(y<=F00=:Exemplo de texto
animado9;.(rqu:9;p:


11. CARACTERES ESPECIAIS:

Para garantir que sua pgina seja visualizada sem nenhum problema, em
qualquer idioma, equipamento ou sistema operacional na Web, a linguagem HTML
possui uma codificao para caracteres especiais.

Cada caracteres deve ser apresentado da seguinte forma: um caracteres (&)
inicial, um nmero ou um cdigo especial correspondente ao caractere desejado, e um
caracteres (;) final (ponto-e-vrgula obrigatrio).
EB.p&o" Para escrever a palavra voc, digite: voc&ecirc;

ENTIDADE CARACTER ENTIDADE CARACTER
&aacute; &Aacute;
&acirc; &Acirc;
&agrave; &Agrave;
&atilde; &Atilde;
&ccedil; &Ccedil;
&eacute; &Eacute;
&ecirc; &Ecirc;
&iacute; &Iacute;
&oacute; &Oacute;
&ocirc; &Ocirc;
&otilde; &Otilde;
&uacute; &Uacute;
&uuml; &Uuml;
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
22


12. DICAS IMPORTANTES:

Podemos criar pginas com tima estrutura e bom acabamento. Associando-se
folhas de estilo e funes em linguagem de script, o documento ganha grande
capacidade dinmica e interativa.
Contudo, muitas vezes um trabalho requintado e impressionante pode ser
perdido pela inobservncia de alguns aspectos importantes, relativos ao meio atravs
do qual essas informaes sero apresentadas. Outras vezes, o problema pode estar
no uso exagerado ou mal adequado de algum recurso.
Antes de iniciar um projeto do site, voc dever observar alguns detalhes
importantes:
1 - Procure colocar informaes claras e objetivas.
2 - Evite excessos de recursos.
3 - Procure deixar um visual equilibrado.
4 - Evite criar pginas muito longas.
5 - Procure usar imagens pequenas para evitar a demora da visualizao da pgina.
6 - Faa um teste do site atravs do seu browser, para verificar se tudo est
funcionando assim como: os hiperlinks, as pginas e etc... antes de envi-los para o
seu servidor.

O/S: Se seu trabalho ser distribudo pela internet, preciso tentar conhecer o tipo de
equipamento que seu pblico poder estar usando. No se surpreenda se um nmero
muito grande esteja usando um 486 a 66 MHz, com 8 Mbytes de memria,
sobrecarregado com uma verso recente e pesada de um navegador e sistema
operacional. Procure ser simples, no abusando dos recursos de scripts. Afinal o que
voc quer que seu trabalho seja visto.

#u%&i'(r -u( 7%

Publicar uma Web basicamente copiar os arquivos do site para o servidor que
poder ser o seu prprio provedor de acesso ou um outro que preste servio de
hospedagem.
Existem alguns provedores que liberam um determinado espao gratuitamente,
para que voc possa ter sua Home Page publicada.
A diferena entre um servio pago e um gratuito, que no servio gratuito voc
no poder registrar o site como um domnio seu (exemplo: www.cadex.com.br ),
voc ter que usar o nome do prestador do servio (exemplo:
www.prestadordeservico.com.br/cadex.
Atravs do site http://registro.br voc consegue se cadastrar no sistema,
registrar domnios, fazer pesquisas e obter informaes e estatsticas, porm, o
registro de domnios acarretar em custos e se seu objetivo no investir, a soluo
fazer um cadastro gratuito.
H vrios servidores gratuitos na Internet como o Terravista em portugus, que
pode ser acessado pelo endereo www.terravista.pt ou o Geocities, este em ingls que
pode ser acessado pelo endereo www.geocities.com.
Outro servio interessante que poder te oferecer vrios servios o HPG que
pode ser acessado pelo endereo www.hpg.com.br.
Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
23
Aps fazer o seu cadastro voc receber um nome de usurio e uma senha
(palavra chave) que sero utilizados para que voc possa fazer acesso ao seu espao e
transferir seus arquivos.
Para a transferncia de arquivos voc precisar ter conhecimento em FTP ou
algum software que utilize este protocolo. Atualmente existem bons softwares de FTP
como o Cuteftp e WSFTP que fazem a transferncia de arquivos de forma grfica, do
mesmo modo como voc manipula seus arquivos no Windows Explorer.
Um hospedador que no requer FTP o http://vila.bol.com.br/index.html
gratuito, basta se cadastrar e colocar seu site na Internet.

Sr)i*o , %u-'(

Depois do site pronto e publicado, voc precisa cadastrar o site em servios de
busca para que ele entre na lista de sites do sistema de procura, para que outros
internautas possam acesa-lo.
Abaixo fornecemos alguns sites de busca onde voc poder incluir seu site:


www.cade.com.br
www.achei.com.br
www.yahoo.com.br
www.google.com.br
www.radar.com.br
www.encontrei.com.br
www.aonde.com.br


CADEX INLOHMA.

Solicite ao nosso suporte on-line o teste de qualificao de concluso
on-line do curso.
Voc poder criar um Website baseado no contedo do curso, com um
tema que desejar, publique em um servidor pa!o ou !ratuito" e nos envie o
endereo da #$%. & aprovao do projeto ser e'posta em nosso mural com o
t(tulo de recon)ecimento e certificado on-line de concluso e divul!ao do
seu Website, destinados para trabal)os de aperfeioamento de alunos do
*&+,-.

Copyright 2004 CADEX DESING.
Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
24