MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Autora: MARCIA BUCHI DO NASCIMENTO

HTML AVANADO

1
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

SUMARIO
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Apresentao Curso On-Line Introduo Tabelas Formulrio Frame ncora Nominada Folha de Estilo Adicionando Msica Adicionando Texto Animado(MARQUEE) Caracteres Especiais Dicas Importantes 3 3 4 5 10 15 20 21 22 23 24 25

2
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

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 que : 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. Pblico alvo: 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. Durao do Curso: 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.

3
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Programa:

HTML BSICO 1 ETAPA: 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 AVANADO 2 ETAPA: Introduo de comandos mais avanados para a realizao de pginas WEB como: tabelas, frames, som e etc. Como funciona: 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 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 Windows. 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>.

4. TABELAS:

4
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. 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 <table> e </table> e possui os seguintes atributos: border="valor" : Define a largura da borda (contorno). cellspacing= valor : Define o espao horizontal entre as clulas. cellpadding= valor : Define o espao vertical entre as clulas. width="valor" : Define a largura da tabela em pixels ou em porcentagem. height="valor" : Define a altura da tabela em pixels ou em porcentagem. bgcolor="#cor" : Define a cor de fundo da tabela. bordercolor= #cor : Define a cor da borda. background= nomedaimagem.jpg : Define uma imagem de fundo. A tabela possui alguns comandos que so: <caption> e </caption> : Define o ttulo da tabela. <tr> e </tr> : Define uma linha da tabela. <th> e </th> : Define um cabealho da tabela. <td> e </td> : Define a coluna de dados. Exemplo 1: <table border="5" bordercolor="#ff0000" cellspacing="12" cellpadding="7" width="150" height="50" bgcolor="#6666ff"<tr><td> primeira coluna</td><td> segunda coluna</td><td> terceira coluna</td></tr><tr> <td>primeira linha</td><td> primeira linha</td><td> primeira linha</td></table><br> Exemplo 2: <table border="1" bordercolor="#6666ff" cellspacing="0" cellpadding="0" width="300" height="100" background="img01.jpg" <tr><td> primeira coluna</td><td> segunda coluna</td><td> terceira coluna</td></tr> <tr><td>primeira linha</td><td> primeira linha</td><td> primeira linha</td></table><br>

Exemplo 3:

5
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <table border="1" cellspacing="1" cellpadding="1" width="500" height="100"><caption> Ttulo da tabela</caption> <tr><th>Cabealho da tabela</th><th> Cabealho da tabela</th><th> Cabealho da tabela</th></tr> <tr><td>primeira linha</td><td> primeira linha</td><td> primeira linha</td></tr> <tr><td>segunda linha</td><td> segunda linha</td><td> segunda linha</td></tr></table><br><br> Veja como ficaram estas tabelas:

6
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Seguindo estes mesmos exemplos, vamos eliminar as bordas colocando o valor 0 em cada um desses mesmos exemplos. Veja como estas mesmas tabelas ficaram:

Podemos alinhar o texto dentro das clulas utilizando os seguintes atributos. Align=left : Alinha o texto esquerda. Align=right : Alinha o texto direita. Align=center : Alinha o texto ao centro. Valign=top : Alinha o texto no topo da clula. Valign=middle : Alinha o texto no meio da clula. Valign=bottom : Alinha o texto na parte inferior da clula. OBS: Se for definido o alinhamento na TAG <tr> no haver necessidade de alinha-lo nas TAGs <th> e <td>.

Exemplo:

7
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <table border="1" width="600" height="150"> <tr><td>Alinhamento padro</td> <td align="center" valign="top">Alinhamento ao centro e no topo</td> <td align="left" valign="middle"> Alinhamento esquerda no meio da clula</td> <td align="right" valign= bottom >Alinhamento direita e na parte inferior da clula</td> </tr></table><br> Para englobarmos colunas e linhas (mesclar ) utilizamos os seguintes atributos: Colspan: Mesclam as colunas. Rowspan : Mesclam as linhas. Exemplo: <table border="1"> <tr><td colspan=2> Mesclando primeira e segunda coluna</td></tr> <tr><td>primeira linha</td><td> primeira linha</td></tr> <tr><td>segunda linha</td><td> segunda linha</td></tr> <tr><td rowspan=3> Mesclando trs linhas<td> uma linha</td></tr> <tr><td>duas linhas</td></tr> <tr><td>trs linhas</td></tr> </table> Como foi dito anteriormente podemos utilizar qualquer formatao dentro da clula, utilizando as TAGs e os atributos correspondentes. Vamos adicionar uma imagem na tabela. Exemplo: <table border=3 width=100 height=100> <tr align="center"><td><img src=" img02.jpg"> </td></tr></table>

Vamos agora adicionar uma lista dentro da clula

8
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.

Exemplo:

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

<table border=1><tr> <td>Adicionando uma lista dentro da clula <ul><li> primeiro item <li>segundo item <li>terceiro item </ul></td></table> Veja como ficaram estes exemplos acima:

9
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

5. FORMULRIO:

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 <form> e </form> que determinam o incio e o fim de um formulrio. Outros comandos so: <textarea></textarea> - Define uma caixa de texto. Seus atributos so: Name=nome Define o nome dos dados. Rows=valor Define quantas linhas ter a caixa de texto. Cols=valor Define quantas colunas ter a caixa de texto. Value=texto Define qual o texto que ser enviado.

Exemplo: <form>

10
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <textarea name=Area_de_texto rows=4 cols=40 value= Comentarios >Texto padro</textarea> </form> <select></select> - Define uma lista de opo. Antes da tag </form> digite mais este exemplo : <select> <option select>Escolher um item</option> <option>primeiro item</option> <option>segundo item</option> <option>terceiro item</option></select>

Passe o mouse sobre a imagem abaixo e veja como ficaram estes exemplos.

Pode ser colocada uma alternativa pr-escolhida usando selected Antes da tag </form> digite este exemplo:

<select name=escolhido> <option>primeiro item</option> <option>segundo item</option> <option selected> terceiro item</option></select>

11
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <inputs> - Define botes e caixas de seleo. Atributos Type=text Caixa de texto simples. Type=password Dados confidncias. No text e no password podem ser usados os seguintes atributos: Name Define o nome dos dados. Size Define o tamanho do campo. Maxlength Define o mximo de caracteres. Antes da tag </form> digite mais este exemplo . <input type=text name=nomesize=15 maxlength= 35><br> <input type=password name= senha size= 10 maxlength= 6> Passe o mouse sobre a imagem abaixo e veja como ficaram os exemplos acima.

Type=checkbox Permite selecionar vrias opes. Atributos Name Define o nome de dados.

12
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Value Define o valor a ser retornado para o nome escolhido. Antes da tag </form> digite mais este exemplo : <input type=checkboxname =opo value= primeira escolha>primeira<br> <input type=checkboxname =opo value= segunda escolha>segunda<br> <input type=checkboxname =opo value= terceira escolha>terceira<br> type=checked Marca uma escolha inicial, ou seja, se o usurio no escolher a opo, o formulrio ir considerar a alternativa pr escolhida. Antes da tag </form> digite mais este exemplo : <input type=checkbox name=opo value=primeira escolha>primeira<br> <input type=checkbox name=opo value=segunda checked>segunda</checked><br> <input type=checkbox name=opo value=terceira escolha>terceira<br> type=radio Permite selecionar apenas uma opo. Atributos Name Define o nome de dados. Value Define o valor a ser retornada para o nome escolhido. Antes da tag </form> digite mais este exemplo . <input type=radio name=resposta value=sim>sim<br> <input type=radio name=resposta value=no>no<br> type=submit Processa os dados do formulrio. Atributos Value Define o nome que aparecer mo boto. Antes da tag </form> digite mais este exemplo .

<input type=submit value=enviar> type=reset Limpa os dados do formulrio. Atributo

13
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Value Define o nome que aparecer no boto. Antes da tag </form> digite mais este exemplo . <input type=reset value= Limpar> Veja como ficaram estes exemplos:

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 POST para enviar a informao do formulrio para o servidor.

14
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. 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= POST 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. Neste exemplo abaixo as informaes esto sendo enviadas para um script local chamado: post-query no diretrio: /cgi-bin do servidor. Exemplo: <form METHOD= Post ACTION= /cgi-bin/post-query > Neste outro exemplo abaixo as informaes esto sendo enviadas para o endereo de correio eletrnico. <form METHOD=Post ACTION=mailto:nomedoemail@provedor.com.br>

6. FRAME:

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 < frame> e </frame> utilizada antes da TAG <body>.

Outros comandos: <frameset></frameset> - Define a diviso da pgina e quadros, onde o atributo cols divide em colunas (so definidas da esquerda para a direita) e rows divide em linhas.

15
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Dentro da formatao da frameset temos os frames src que so referncias s pginas que sero mostradas no frame definido. Tambm tem noframe , 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. Exemplo: <html> <head> <title>Pgina 01</title> </head> <body bgcolor="#FFFFCC"> </body> </html> Como montar os frames em colunas. Exemplo: <html> <head> <title>Exemplo de Frame </title> </head> <frameset cols=20 % , 80 %> <frame src=pagina1.html> <frame src=pagina2.htmlNAME=principal> <noframe> </noframe> </frameset> <body> </body> </html> Salve esta pgina como: index.html Veja como ficaria sua pgina:

16
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Criado este frame voc pode criar outro frame em linha. Faa as seguintes alteraes que esto grifadas em vermelho Exemplo: <html> <head> <title>Exemplo de Frame </title> </head> <frameset cols=20%, 80%> <frame src=pagina1.html> <frameset rows=20%,80%> <frame src=pagina3.html> <frame src=pagina2.html NAME=principal> <noframe> </noframe> </frameset> </frameset> <body> </body> </html>

Veja como ficaria sua pgina:

17
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Como montar os frames em linhas: Exemplo:

<html> <head> <title>Exemplo de Frame </title> </head> <frameset rows=20%,80%> <frame src=pagina1.html> <frame src=pagina2.html NAME=principal> <noframe> </noframe> </frameset> <body> </body> </html>

Veja como ficaria sua pgina:

18
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Criado este frame voc pode criar outro frame em coluna. Exemplo: <html> <head> <title>Exemplo de Frame </title> </head> <frameset rows=20%,80%> <frame src=pagina1.html> <frameset cols=20%,80%> <frame src=pagina3.html> <frame src=pagina2.html NAME=principal> <noframe> </noframe> </frameset> </frameset> <body> </body> </html> Veja como ficaria sua pgina:

19
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Agora iremos fazer os links. Abra as pginas: pagina1.html e pagina3.html e acrescente:

<a href=pagina4.html target=principal>Link 01</a><br> <a href=pagina5.html target=principal>Link 02</a><br>

7. 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. OBS: 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>): <a name= nomedaancora ></a> Digite no local onde voc deseja que a pgina retorne para outro ponto da mesma, ou seja, no corpo da pgina depois do <body>.

20
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <a href= #nomedaancora>Retornar ao incio</a> Utilizando uma imagem como ncora: <a href= #nomedaancora><img src=nomedaimagem.jpg ></a> Para ir a outra pgina: <a href= nomedapagina.html#nomedaancora >Outra pgina</a> Utilizando uma imagem como ncora: <a href= nomedapagina.html#nomedaancora > <img src= nomedaimagem.jpg )</a> OBS: Nesta outra pgina voc dever colocar a ncora nominada , no local onde voc desejar que o usurio se direcione. Digite no local desejado: <a name= nomedaancora ></a>

8. FOLHA 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 <head> digite: <style type= text/css > body{font:14pt verdana} h3{color:#6666ff} .destaque{color:#ff0000} </style> No decorrer do seu texto voc s precisar acrescentar a TAG: <span class="destaque">...</span> , 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:

21
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

9. ADICIONANDO MSICA:

Para se inserir uma msica no site, digite antes da tag </head> a tag: <bgsound src=nomedoarquivo.mid (ou .wav)> Ou utilize a mesma tag e no lugar do: nomedoarquivo. mid, coloque o endereo da URL do site de msica. Exemplo: <bgsound src= http://www.nomedosite/nomedamusica.mid > Utilizando esta tag no aparecer nenhum reprodutor(display). Para que a msica toque vrias vezes acrescente: loop="-1" Exemplo: <bgsound src= nomedoarquivo.mid loop=-1 Outra forma seria colocar a tag: <embed src="nomedoarquivo.mid" autostart="true" Loop="1"> , onde aparecer um reprodutor(display) no local que voc desejar dentro da tag <body>. Ou utilize a mesma tag e no lugar do: nomedoarquivo. mid, coloque o endereo da URL do site de msica. Exemplo: <embed src="http://www.nomedosite/nomedamusica.mid" autostart="true" Loop="1"> Veja um exemplo do display

22
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

10. ADICIONANDO TEXTO ANIMADO (MARQUEE):

Para se colocar um texto animado ser utilizado a tag: <marquee></marquee> e o texto ir rolar da direita para a esquerda. Para que o texto role da esquerda para a direita acrescente direction="right" . Para que o texto role de baixo para cima acrescente direction= up. Para que o texto role de cima para baixo acrescente direction= down. Utilizando o up ou down, os mesmos podem ser definidos a altura: height=valor e a largura: width=valor OBS: Efeito visualizado somente no Internet Explorer. Exemplo: <marquee> digite seu texto</marquee> <marquee direction="right"> digite seu texto</marquee> <marquee direction= up height= 30 width= 100>digite seu texto</marquee> Seus atributos so: BEHAVIOR="valor" - Define o tipo de comportamento. Alternate - o texto rola at o canto esquerdo e volta. Slide - o texto rola at o canto direito e para. Exemplo: <marquee behavior="alternate"> digite seu texto</marquee> <marquee behavior="slide"> digite seu texto</marquee> SCROLLDELAY="valor" - define a velocidade. Exemplo: <marquee scrolldelay= 300>digite seu texto</marquee>

OBS: O texto pode ser formatado e o marquee poder ser alinhado. O texto poder ser substitudo por uma imagem.

23
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Veja alguns exemplos: <p><marquee> Exemplo de texto animado</marquee> <p><marquee direction="right"><font size="3"color="#ff00cc" face="Comic Sans MS">Exemplo de texto animado</font></marquee></p> <p><marquee align="middle" behavior="slide" bgcolor="#C0C0C0"><font size="5"color="#ffcc00" face="Lucida Console"> Exemplo de texto animado </font></marquee></p> <p><marquee align="bottom" behavior="alternate" bgcolor="#FFFFFF"><font size="4"color="#cc0000" face="Monotype Corsiva"> Exemplo de texto animado</font></marquee> </p> <p><p align="center"><marquee>< img src=nomedaimagem.jpg> </marquee></p> <p><p align="right"><marquee bgcolor="#FFFF99" width="350" height="30" behavior="alternate"><font size="6"color="#ffccff" face="Monotype Corsiva"> Exemplo de texto animado</font></marquee> </p> <p><marquee bgcolor="#66CCFF" width="400" height="30" behavior="alternate" scrolldelay="300"> Exemplo de texto animado</marquee></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). Exemplo: Para escrever a palavra voc, digite: voc&ecirc;

ENTIDADE &aacute; &acirc;

CARACTER

ENTIDADE &Aacute; &Acirc;

CARACTER

24
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.

&agrave; &atilde; &ccedil; &eacute; &ecirc; &iacute; &oacute; &ocirc; &otilde; &uacute; &uuml;

MATERIAL EXCLUSIVO

E-CADEX WWW.CADEX.COM.BR. &Agrave; &Atilde; &Ccedil; &Eacute; &Ecirc; &Iacute; &Oacute; &Ocirc; &Otilde; &Uacute; &Uuml;

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. 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.
OBS:

Publicar sua Web

25
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. 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. 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. Servio de busca 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 INFORMA.

Solicite ao nosso suporte on-line o teste de qualificao de concluso on-line do curso.

26
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.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Voc poder criar um Website baseado no contedo do curso, com um tema que desejar, publique em um servidor (pago ou gratuito) e nos envie o endereo da URL. A aprovao do projeto ser exposta em nosso mural com o ttulo de reconhecimento e certificado on-line de concluso e divulgao do seu Website, destinados para trabalhos de aperfeioamento de alunos do CADEX.

27
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.