Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Curso HTML

    Загружено:

    Francisco A Peixoto
    55 просмотров28 страниц

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    RTF, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате RTF, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    55 просмотров28 страниц

    Curso HTML

    Загружено:

    Francisco A Peixoto

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате RTF, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 28

    O espao para sua pgina na Internet fica em um computador, onde esto todos os seus arquivos de HTML, som, imagem,

    etc. O computador onde fica a sua home page chamado de Servidor, pois a qualquer hora do dia ou da noite ele vai estar ligado para as pessoas poderem acessar sua home page. Quando a pessoa entra na sua home page, ela est acessando este espao. As pginas so feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma linguagem simples e bem leve, por isso ela o padro da Internet. Nas pginas voc coloca sons, imagens, cores. Alm disso, as pginas da Web podem ser ligadas entre si, formando o que se chama de Link. Com isso, voc pode criar uma pgina sobre um assunto que lhe agrade a partir de uma outra, com sua foto e um link entre elas. Quando uma pessoa clica neste link, ela vai diretamente para aquela pgina que voc definiu. Vamos passar agora s aulas de HTML para voc poder comear a construir seu site. Para visualizar as pginas necessrio um navegador. Os mais conhecidos e utilizados so o Internet Explorer e o Netscape. Estes navegadores fazem basicamente a mesma coisa - mostrar as pginas -, mas devido a algumas diferenas de programao, alguns recursos so visveis em um e no outro no. O mesmo acontece com verses mais antigas. Navegadores verso 3 no conseguem mostrar uma pgina HTML corretamente. Por isso, durante a construo do seu site, procure test-lo nos dois navegadores para verificar se a visualizao est correta. Introduo ao HTML Todo documento HTML composto de Tags. Este o nome dados aos comandos HTML. Voc deve comear sua pgina com a tag <HTML>, na primeira linha do cdigo, e terminar com </HTML> na ltima linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento necessrio para que ela possa ser interpretada pelo navegador. A estrutura das tags formada por: <xxx>: Este o inicio da tag;* </xxx>: Este o fechamento da tag para que ela possa funcionar.** * xxx apenas uma representao de uma tag, no uma tag HTML. ** Algumas tags no necessitam do fechamento. Neste caso voc ser avisado. Entre o incio da tag e o seu fechamento ficam os textos, parmetros, atributos e at outras tags que vo formando a sua pgina. Se voc no fechar corretamente as tags, a pgina no ir ser mostrada direito ou nem mesmo ir aparecer. Aps iniciar o documento com a tag <HTML> voc deve incluir o cabealho que feito com as tags <HEAD> </HEAD>. E tambm um ttulo usando o par <TITLE> ... </TITLE>. Geralmente, o ttulo no mostrado na pgina, porm os navegadores o utilizam para entitular a janela de visualizao. Coloque um ttulo bem claro e explicativo para seus documentos. - A tag <BODY> O "corpo" do documento deve ser demarcado pelo par <BODY> ... </BODY>. Nesta parte do documento sero colocados todos os comandos para apresentao de uma pgina HTML. Entre as tags <BODY> e </BODY> que voc vai colocar todos os cdigos para sua pgina. Um documento simples seria digitado da seguinte maneira:

    <HTML> <HEAD> <TITLE> Meu documento HTML </TITLE> </HEAD> <BODY> Aqui voc coloca os comandos em HTML. </BODY> </HTML> Os espaos em branco so ignorados quando o navegador "l" o cdigo. Assim o cdigo acima poderia ser escrito da seguinte forma: <HTML><HEAD><TITLE> Meu documento HTML </TITLE></HEAD><BODY>Aqui voc coloca os comandos em HTML.</BODY></HTML> A vantagem que isto economiza espao em disco, mas uma maneira muito confusa e relaxada de programar. Acostume-se a organizar seus programas para poder entend-los posteriormente. - Atributos do <BODY> Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (papel de parede da pgina): <BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer"> Onde: - BGCOLOR Cor de fundo (padro: cinza ou branco) - TEXT Cor dos textos da pgina (padro: preto) - LINK Cor dos links (padro: azul) - ALINK Cor dos links, quando acionados (padro: vermelho) - VLINK Cor dos links, depois de visitados (padro: azul escuro ou roxo) - BACKGROUND Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui. Em "cor", voc pode colocar os valores de cores em ingls como: Preto = black Branco = white Azul = blue Amarelo = yellow Vermelho = red Voc tambm pode usar o valor hexadecimal de cores ou "RRGGBB", que a forma mais

    comum de definir cores usadas na Internet.. Com isso voc pode colocar em sua pgina outras cores diferentes, como um azul-claro. Para isso voc deve ter o cdigo das cores, e no lugar de escrever o nome da cor em ingls, voc coloca o valor da cor Algumas cores disponveis RRGGBB (hexadecimal): Cor - Cdigo HTML PRETO - #000000 BRANCO - #FFFFFF VERMELHO - #FF0000 VERDE - #00FF00 AZUL - #0000FF ROSA - #FF00FF AMARELO - #FFFF00 Agora que voc j aprendeu como o arquivo HTML bsico , pode comear a ver tags. Elas ficam aps o comando <BODY> , no meio do seu texto. Aps <BODY> voc j pode comear a escrever o que quiser. H duas formas de formatar o seu texto: - Tags de ttulo <H> - "Headings" Com elas voc pode apenas definir o tamanho das letras, mas no o tipo de fontes. Veja agora como ficam as tags "headings" para cabealhos que vo do tamanho 1 at 6. <H1> Este o primeiro nvel </H1> <H2> Este o segundo nvel </H2> <H3> Este o terceiro nvel </H3> <H4> Este o quarto nvel </H4> <H5> Este o quinto nvel </H5> <H6> Este o sexto nvel </H6> Este o primeiro nvel Este o segundo nvel Este o terceiro nvel Este o quarto nvel Este o quinto nvel Este o sexto nvel - Tag <FONT> - Voc pode tambm usar as tags de fonte no lugar das tags de "headings". Este tipo de tag a mais usada, pois voc pode definir mais facilmente o tamanho do texto e fonte que voc deseja, e personalizar ainda mais a sua pgina. A tag <FONT>, e dentro dela voc pode definir vrios parmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes: - Atributo FACE - FACE: Uma evoluo que permite a escolha da fonte (tipo de letra) para os textos, a tag feita assim: <FONT FACE=fonte_da_letra>Texto</FONT> Exemplo: <FONT FACE=Times>Fonte Times New Roman </FONT>

    Fonte Times New Roman <FONT FACE=Arial>Fonte Arial </FONT> Fonte Arial <FONT FACE=Courier>Fonte Courier New </FONT> Fonte Courier New - Atributo COLOR e SIZE - COLOR e SIZE: Atributos cor e tamanho: <font size="3"> A palavra ter o tamanho 3</font> A palavra ter o tamanho 3 <font color="red"> A palavra ter a cor vermelha </font> A palavra ter a cor vermelha. Podemos tambm combinar as tags acima: <font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font> O resultado final ser: Palavra com tamanho 3 e em vermelho Formatando textos Voc pode formatar o texto, colocando-o em negrito, itlico, sublinhado e centralizado. Assim: - Tags <B> , <U> , <I> e <CENTER> <B> Texto </B> - Texto fica em Negrito. <U> Texto </U> - Texto Sublinhado. <I> Texto </I> - Texto em Itlico. <CENTER> Texto </CENTER> Texto centralizado. Os cdigos tambm podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo: <CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER> O resultado : Teste 1 e Teste 2 Pargrafos - Tag <P> - Pargrafos: Em HTML so necessrios comandos para definir pargrafos. No basta voc simplesmente pressionar "ENTER" para que a linha v para baixo, como em editores de texto comuns. Voc ter que colocar uma tag para um pargrafo ou para uma linha nova.

    Para fazer um pargrafo novo, basta colocar a tag <P>. Por exemplo, escreva no editor o seguinte, deste jeito: Pargrafo 1<P>Pargrafo 2. O resultado ser este: Pargrafo 1 Pargrafo 2 - Tag <BR> - Linhas Como voc pode ver, o navegador mesmo faz um pargrafo novo cada vez que voc coloca esta tag. Caso voc queira simplesmente mudar de linha, ao invs de mudar de pargrafo, coloque a tag <BR>. Por exemplo, escreva: Pargrafo 1<BR>Linha 1<P>Pargrafo 2<BR>Linha 2. O resultado ser este: Pargrafo 1 Linha 1 Pargrafo 2 Linha 2 - Alinhamento de textos com a tag <P> Os pargrafos tambm podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parmetro "align=tipo de alinhamento". Os atributos so: - Left: Alinhamento esquerda - Rigth: Alinhamento direita - Center: Centralizado - Justify: Texto justificado (S funciona em navegadores verso 4 ou superior) Para incluir um destes atributos simples. Veja os exemplos: <p align="left">Texto alinhado esquerda</p> <p align="right">Texto alinhado direita</p> <p align="center">Texto centralizado</p> <p align="justify">Texto justificado</p> Incluindo imagens Agora que voc j sabe incluir e formatar os textos de sua pgina, possvel que voc queira dar mais vida sua pgina, incluindo imagens e fundos nela. Voc faz as imagens em programas separados, em seu editor grfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages so GIF e JPG. Voc no poder usar o formato BMP.

    A tag para inserir uma imagem em sua pgina a seguinte: <img src="nome do arquivo de imagem que vai aparecer"> Em "imagem que vai aparecer" voc coloca o nome da imagem .gif ou .jpg ou o URL onde ela est para ser mostrada. Na verdade, apenas <img src="nome do arquivo de imagem que vai aparecer"> j seria o suficiente, mas com o tempo voc vai precisar usar os outros atributos. - Atributos de Imagem - Width e Height So os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se voc no inclu-los, no se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregar mais rpido. Outra vantagem em usar o Width e Height que voc pode diminuir ou aumentar o tamanho de uma figura como voc desejar, porm no recomendamos que voc redimensione as imagens com esta opo. Se voc quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficar mais bonita e tambm ser mais leve para carregar. Se voc tem uma pgina com galeria de imagens e uma "pr-vizualizao" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualizao no ficar boa. - Alt Texto alternativo. A funo apresentar um texto no lugar da imagem, enquanto esta ainda no apareceu. - Border Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem ocultar a borda que aparece e que indica que h um link em volta das figuras clicveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribudo zero. Veja um exemplo de imagem com borda igual a zero: Agora veja a mesma imagem com uma borda igual a 2: Uma tag de imagem com os atributos acima combinados ficaria assim: <img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0 width="largura da imagem" height="altura da imagem"> Um exemplo: <img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100" height="50"> O resultado : Aqui aparece o texto alternativo - Dicas e Formato de Arquivos de imagem - TAMANHO EM Kb: Evite ao mximo colocar imagens maiores do que 30Kb em sua pgina pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta ser a transfncia, no bom ter imagens "pesadas" na pgina, isso s vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que

    ele no fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens. - PROGRAMAS: essencial que seja escolhido um bom programa de edio de imagens para que seu site tenha uma boa apresentao grfica. Entre os mais usados esto o Corel Draw, Adobe Photoshop e Paint Shop Pro. - O FORMATO GIF: Formato dominante na Internet, o GIF um tipo de arquivo grfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, no transparente ou animado. Um GIF transparente aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que h embaixo. Os programas que so mais usados para criar gifs e permitem que se crie transparncias so o Photoshop e o Fireworks. Os GIFS animados so aqueles que tm movimento. Nada mais so que uma seqncia de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formaro a seqncia que dar a idia de movimento. - O FORMATO JPEG (jpg): Grandes fotos geralmente so salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. aconselhvel, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG. - O FORMATO BMP: Esses bitmaps, apesar de muito utilizados no Windows, so muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks. Alinhando as imagens Voc pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua pgina, e dar uma organizao e visual diferentes. Para fazer os alinhamentos, voc inclui parmetros do alinhamento dentro da tag de imagem. Assim: Veja como o texto fica na imagem. Este um exemplo de alinhamento padro; voc no precisa incluir nenhuma tag. Agora veja como o texto fica no topo da imagem. Este um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de alinhamento, a tag de imagem deve ficar assim: <img src="nome da imagem " align="top"> Repare que s inclumos o align="top" na tag de imagem. Veja como o texto fica no meio da imagem. Este um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:

    <img src="nome da imagem" align="middle"> Repare que s inclumos o align="middle" na tag de imagem. Veja que agora voc tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um timo recurso para quando voc deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto. A tag para este alinhamento : <img src="nome da imagem" align="left"> Veja que agora a imagem est alinhada do lado direito e o texto fica ao redor. exatamente o oposto do alinhamento esquerda. A tag para este alinhamento : <img src="nome da imagem" align="right"> - Para se ter uma imagem centralizada: <CENTER><img src="nome da imagem"></CENTER> O resultado : Criando links Links so os pontos clicveis do documento HTML que levam a qualquer outro documento da sua pgina ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou at mesmo links para um mesmo ponto dentro de uma pgina. Ambos dependem da tag: <a href="nome-do-lugar-a-ser-levado">descrio</a> - "Nome-do-lugar-a-ser-levado" voc coloca o arquivo html que voc quer que seja visitado, por exemplo dados.htm ou por um URL como http://www.starmedia.com . - "Descrio" o que vai aparecer sublinhado na home page indicando que pode ser clicado. Por exemplo, se a descrio fosse "Clique aqui para visitar a StarMedia", voc colocaria este cdigo: <a href="http://www.starmedia.com">Clique aqui para visitar a StarMedia </a> Resultado: Clique aqui para visitar a StarMedia Tambm existem os links para fazer com que as pessoas enviem um email. Se voc quer um lugar para os usurios deixarem um email, faa assim: <a href="mailto:seu email">Deixe um email para mim ! </a> Resultado: Deixe um email para mim! - Dica: Se voc quiser colocar um link para uma outra pgina dentro da sua home page, voc no precisa colocar todo o endereo como http://orbita.starmedia.com/~seunome/pagina.html. Basta apenas colocar o nome do arquivo e, pronto, ficaria assim: <a href="pagina.html">Este um link para uma pgina no seu site </a> - Como fazer um link

    abrir em outra janela? possvel que voc queira colocar um link em sua pgina que abra em uma outra janela para que o visitante no saia do seu site, por exemplo, colocar um link para uma home page fora do site. Fazer isso muito simples. Basta incluir um atributo "TARGET" (alvo), assim: <a href="http://www.starmedia.com" target="_blank" >Clique aqui para visitar a StarMedia </a> O resultado : Clique aqui para visitar a StarMedia Se voc clicar, ser aberta uma nova janela. H outras opes que podem ser colocadas como alvos, mas isso voc ver mais adiante na seo de Frames, em HTML Avanado. - Como fazer um link para um ponto na mesma pgina? possvel fazer com que clicando em um link voc v diretamente para uma determinada pate da pgina. Este recuso chamado de ncoras. Voc pode saber mais sobre este recursos na seo "Avanado" na barra de navegao. - Como fazer uma imagem ter um link Voc pode fazer com que uma imagem possa ter um link. bem simples. Na tag de link, em vez de colocar o texto com a descrio, coloque a tag de imagem. Veja: <A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai aparecer"> </A> Em "nome-do-lugar-a-ser-levado" voc coloca o arquivo html que voc quer que seja visitado, por exemplo, dados.htm ou um URL como http://www.starmedia.com. Em "nome do arquivo de imagem que vai aparecer" voc deve colocar o nome correto da imagem que vai estar na pgina, por exemplo, "foto.gif". Veja um exemplo de imagem com link: <A HREF="http://www.starmedia.com/orbita"><img src="orbita.gif" width="100" height="75" alt="Esta imagem tem um link para a StarMedia Home Pages" border="1"></a> O resultado : Esta imagem tem um link para a StarMedia Home Pages Repare que, alm da tag "comum" de imagem, colocamos outros atributos como "border=1" (borda da imagem) , tamanho e o texto alternativo. Tudo isso voc aprendeu na seo "Incluindo imagens". - Como fazer links para download de arquivos Para saber como fazer links para download de arquivos, voc deve visitar a seo "Criar links para download" e descobrir todos os detalhes e dicas para criar os links. Criar links para download provvel que, depois de criar suas pginas, voc queira colocar arquivos para que os visitantes faam download em sua home page. Este um recurso bem fcil e simples. Vamos explicar. No existe um comando que faa o download. O que acontece que, sempre que aparece um tipo de arquivo que o navegador no reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador no consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download.

    Os links normalmente so direcionados a arquivos html. Se voc deseja colocar um arquivo para download, tudo que voc precisa fazer direcionar o link para ele como se estivesse colocando um link para uma pgina. Exemplo: Para o download de um arquivo "exemplo.exe", o cdigo de um link simples ficaria assim: <a href="exemplo.exe">Descrio do link</a>

    - Observaes Existem alguns tipos de arquivos que voc pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que voc j tenha instalado. Se voc, por exemplo, colocar um link para um arquivo de vdeo ".avi" ou ".mpg", o navegador abrir o programa para exibir esse vdeo. Para evitar isso, a melhor soluo compactar estes arquivos para o formato .zip. Assim, no haver problemas. Alm disso, a compactao do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito. Listas Voc usa listas para criar menus simples ou organizao de temas e textos em sua pgina. O HTML permite definir trs categorias distintas de listas: - Ordenadas, - Sem ordenao - E uma especial, chamada lista de definio. - Listas Ordenadas As listas ordenadas so numeradas e s usam um bullet (marca de ) para demarcar cada uma das linhas. Em listas ordenadas, o navegador se encarrega de colocar os nmeros que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par <OL> ... </OL>. Exemplo 1: <OL> <LI> Primeiro item de uma lista ordenada <LI> Segundo item de uma lista ordenada <LI> Terceiro item de uma lista ordenada </OL> Produz o seguinte resultado: 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada - Listas sem Ordenao Em listas no ordenadas utilizado algum smbolo grfico. Este tipo de lista ser envolvido pelo par <UL> ... </UL>. Para que o interpretador distinga um trecho de texto de uma lista dever ser colocado no incio de cada linha a diretiva <LI>, no havendo a necessidade de fechar esta tag com </LI>. Alguns exemplos:

    Exemplo 2: <UL> <LI> Primeiro item de uma lista no ordenada <LI> Segundo item de uma lista no ordenada <LI> Terceiro item de uma lista no ordenada </UL> Produz o seguinte resultado: * Primeiro item de uma lista no ordenada * Segundo item de uma lista no ordenada * Terceiro item de uma lista no ordenada - Listas Encadeadas O prximo exemplo ser de uma lista encadeada. Voc pode encadear tantas listas quantas quiser, desde que envolva cada nvel de encadeamento com <OL> ... </OL> ou <UL> ... </UL>. <OL> <LI> Primeiro item de uma lista encadeada. <LI> Segundo item de uma lista encadeada. <UL> <LI> Terceiro item de uma lista encadeada. <LI> Quarto item de uma lista encadeada. </UL> <LI> Quinto item de uma lista encadeada. </OL> Produz o seguinte resultado: 1. Primeiro item de uma lista encadeada. 2. Segundo item de uma lista encadeada. * Terceiro item de uma lista encadeada. * Quarto item de uma lista encadeada. 3. Quinto item de uma lista encadeada. A numerao de listas ordenadas obedece ao nvel de encadeamento das respectivas linhas. No preciso usar a tag <P> para forar quebras de linha, pois os comandos <UL> e <OL> foram uma quebra de linha automaticamente. Voc pode incluir tags aps cada tag de lista como uma tag para definir a fonte e o tamanho da letra ou a cor. Voc pode combinar estas tags. Voc tambm pode colocar links em cada lista, bastando apenas usar a tag de link logo aps a tag de lista. Veja o exemplo: <OL> <LI><a href="#"> Primeiro item de uma lista ordenada com link </a> <LI> Segundo item de uma lista ordenada sem link <LI><a href="#"> Terceiro item de uma lista ordenada com link </a></OL> O resultado : 1. Primeiro item de uma lista ordenada com link 2. Segundo item de uma lista ordenada sem link 3. Terceiro item de uma lista ordenada com link

    Inserindo Imagem de Fundo Da mesma forma que possvel definir uma cor de fundo diferente para as pginas, pode-se colocar uma imagem como papel de parede. Com isso voc pode criar um site muito mais bonito. Vamos explicar como colocar uma imagem de fundo e tambm caractersticas bsicas sobre as imagens de fundo. A imagem de fundo um atributo que colocamos dentro da Tag <BODY> que voc aprendeu no incio deste tutorial. Veja como fica: <BODY BACKGROUND="nome da imagem"> Em "nome da imagem" voc coloca o nome do arquivo de imagem que voc deseja que seja o fundo. Ele pode ser do tipo GIF ou JPG. - Caractersticas de imagens de fundo Quando uma imagem menor que o tamanho da tela, o navegador se encarrega de "repetir" essa imagem por toda a tela para que ela possa cobrir todo o espao. Este um timo recurso, pois voc no vai ter que criar uma imagem do tamanho da tela. Isso faria a imagem ser muito grande e demorar muito a carregar. Alm disso, h muita diferena entre os tamanhos das telas dos micros. Letreiros e Linhas - Letreiros possvel colocar mais recursos em seu site. Um deles o letreiro. A imagem fica "rolando" pela tela. Ele feito com a tag "<MARQUEE>", porm este recurso s funciona no Internet Explorer. No Netscape, o texto ficar parado. Por isso analise bem quando valer a pena us-lo! Veja como usar este recurso: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> - Em "BEHAVIOR" voc coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE". - Em "WIDTH" voc pode definir o tamanho que o letreiro vai ocupar na tela. Veja : <MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE> Resulta em: Texto - Linhas Com as linhas possvel que voc crie separaes entre textos e imagens. muito simples criar uma linha. Basta incluir a tag <HR> (no preciso fazer o fechamento dela). Veja o resultado: Atributos da linha: Voc pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: WIDTH Voc define a largura da rgua, em pixels ou em porcentagem. Veja:

    <HR WIDTH=50%> insere uma linha que ocupa 50% do espao disponvel na tela. - ALIGN Define o alinhamento da rgua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado): <HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espao disponvel na tela) e alinhada direita. - COLOR Define a cor para a linha, este recurso no funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma: <HR WIDTH=100% COLOR="#FFFFFF> - NOSHADE Define se a linha vai ter um efeito tridimensional. Se voc no incluir este atributo, a linha ter o efeito tridimensional. Exemplo combinando os atributos: <HR WIDTH=100% ALIGN=RIGHT COLOR="#CC0000" NOSHADE> Insere uma linha de comprimento 100% (do espao disponvel), alinhada direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.

    Tabelas As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas possvel, por exemplo, termos estas pginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegao e observaes. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustraes de maneira organizada. Como j foi possvel perceber, as tabelas podem conter textos, listas, pargrafos, imagens, diversas outras formataes - inclusive outras tabelas. Novas verses de HTML e de navegadores populares vm acrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis. A formatao de tabelas faz parte da verso 3.0 da linguagem HTML. Manipular tabelas em HTML d trabalho e necessita de calma. A tag para criao de uma tabela <TABLE>, e dentro dela voc coloca atributos importantes para a criao correta da sua tabela. No esquea de fazer o fechamento da tag com </TABLE>. - Atributos de Tabela - <TABLE BORDER> O elemento delimita uma tabela e a espessura de sua borda: <TABLE BORDER=valor da espessura> ... </TABLE> - WIDTH e HEIGHT

    Com estes atributos, voc pode definir o tamanho que a tabela vai ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem. Basicamente o HEIGHT no usado , mas o valor de largura muito til. Veja como usar: <TABLE BORDER=valor da borda WIDTH="valor da largura"> Um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"): Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 - Dentro dessa formatao, inserimos as linhas e elementos da tabela: - <TH> ... </TH> Define um cabealho para a tabela - <TR> ... </TR> Delimita uma linha - <TD> ... </TD> Delimita um elemento da tabela Veja como fica a tag para a criao de uma tabela com 2 linhas e 2 colunas: <TABLE BORDER=2> <TH> Coluna 1</TH><TH> Coluna 2 </TH> <TR><TD> linha1, coluna 1</td><td> linha 1, coluna 2 </TD></TR> <TR><TD> linha 2, coluna 1</TD><TD>linha 2, coluna 2 </TD></TR> </TABLE> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Agora veja a mesma tabela sem bordas (border=0): Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 - Atributos COLSPAN e ROWSPAN possvel dividir colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=2> <TH COLSPAN=2>Colunas 1 e 2</TH> <TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</T><TD>linha 2, coluna 2</TD></TR> <TH ROWSPAN=3>3 linhas juntas</TH> <TD>uma linha</TD> <TR><TD>duas linhas</TD></TR>

    <TR><TD>trs linhas</TD></TR> </TABLE> Resultado: Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 3 linhas juntas uma linha duas linhas trs linhas Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3). - Cores de fundo Quando voc cria uma tabela, ela tem o fundo transparente e, portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da pgina. Mas possvel que voc defina uma cor de fundo para cada clula, linha e coluna da sua tabela. Para isso voc deve incluir o atributo "BGCOLOR", veja como fica: <table border=2> <th bgcolor="#FF0000">Coluna 1</th> <th bgcolor="#009900">Coluna 2</th> <tr> <td>linha1, coluna 1</td> <td> linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Voc pode definir a cor de fundo de qualquer linha ou coluna que quiser, bastando apenas incluir o atributo junto da tag de linha ou coluna. Da mesma forma voc pode incluir tags de fonte e imagem para colocar dentro de cada clula da tabela. - Imagem de fundo Voc tambm pode colocar em uma tabela uma imagem de fundo, como um papel de parede somente para a tabela. Para isso, voc s precisa colocar o atributo "BACKGROUND". Veja como fazer: <table border=2 background="nome da imagem que vai aparecer"> <th><font color="#000000">Coluna 1</font></th> <th><font color="#000000">Coluna 2</font></th> <tr> <td><font color="#000000">linha1, coluna 1</font></td>

    <td><font color="#000000"> linha 1, coluna 2</font></td> </tr> <tr> <td><font color="#000000">linha 2, coluna 1</font></td> <td><font color="#000000">linha 2, coluna 2</font></td> </tr> </table> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Assim como quando colocamos uma imagem de fundo em uma pgina, a imagem de fundo em uma tabela ser "repetida" at preencher todo o espao da tabela. Onde houver uma cor de fundo definida para a clula, coluna ou linha a imagem de fundo no vai aparecer. Veja: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Frames - Parte 1 Os frames so divises da tela do navegador em diversas telas (ou "quadros"). Com isso, tornase possvel apresentar mais de uma pgina por vez, por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte. Trata-se de um recurso muito usado para criar menus de navegao em que o menu sempre est fixo e somente o outro frame muda para que apaream as pginas. Para criar uma pgina com 2 frames, voc ter que criar no mnimo 3 pginas, para resultar em uma. Isso porque, neste caso, cada frame uma pgina HTML (2 frames) e h uma terceira pgina principal que vai ter as informaes destes frames dentro dela. Para criar um frame, primeiro crie duas pginas simples e salve no mesmo diretrio. Crie agora uma terceira pgina, com a seguinte tag: <HTML> <HEAD> <TITLE> Coloque o Ttulo aqui </TITLE> </HEAD> <FRAMESET COLS=20%,80%> <FRAME SRC="a.html"> <FRAME SRC="b.html"> </FRAMESET> <BODY> </BODY> </HTML> Lembre-se de sempre colocar o cdigo para os frames abaixo da tag </head> e antes da tag <body>. A parte FRAMESET define a diviso da pgina em "quadros". Neste exemplo, a pgina ser dividida em duas colunas (Atributo COLS), sendo a primeira com 20% do tamanho da tela, e a

    segunda coluna com os restantes 80% da tela. Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero mostradas nos frames definidos Assim, aqui vemos que a pgina "a.html" ser mostrada na primeira coluna (que ocupar 20% da tela), e "b.html" ser mostrada na segunda (ocupando 80% da tela). Substitua "a.htm" para a primeira pgina que voc criou por "b.htm" na segunda. Salve e veja o resultado. Este o comando bsico para fazer uma pgina com frames. Vamos ver os tipos de frames que possvel voc criar. Na seo de "Download de Exemplos" voc poder baixar arquivos com exemplos de frames para facilitar a construo de suas pginas. Frames - Parte 2 Como j foi possvel observar, FRAMESET tem atributos que definem a diviso da janela do navegador em colunas; essa diviso tambm pode ser feita em linhas, e utilizando uma combinao de "framesets" para variadas apresentaes. Lembre-se de sempre colocar o cdigo para os frames abaixo da tag </head> e antes da tag <body>. Confira os tipos mais comuns de divises que voc pode fazer. Voc poder fazer o download dos arquivos de exemplos neste tutorial. frame em colunas <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html"> </FRAMESET> frames em linha <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> frame em coluna e linha <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> </FRAMESET> frame em linha e coluna <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html">

    <FRAME SRC="coluna2.html"> </FRAMESET> </FRAMESET> Lembre-se de que os frames fixos no precisam ter nomes, mas os frames que recebero textos, sim! O exemplo simples visto at agora segue o modelo da primeira composio (em colunas). As composies com mais de um frameset precisam ser bem planejadas para funcionarem bem. Os valores dos atributos COLS e ROWS, voc pode alterar conforme a necessidade. - Atributos Especiais: At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). Outros atributos permitem um maior controle sobre a apresentao: - FRAMEBORDER="NO" Eliminao das bordas dos frames: "NO" sem bordas, "YES" com bordas. - BORDER="valor do espao" Eliminao do espao entre os frames. - SCROLLING="NO" Frame sem barra de rolagem. A opo "YES" define a existncia da barra de rolagem. Combinando estes atributos em uma tag de frames simples teramos: <FRAMESET COLS="20%, 80%" FRAMEBORDER="NO" BORDER="0" SCROLLING="NO"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> Frames - Parte 3 Sempre que se aciona um link dentro de uma pgina, o padro que a pgina referente a esse link seja carregada na mesma janela da pgina anterior. No exemplo visto com frames, seguir um link dentro da janela direita faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de 80%). Para isso voc tem que indicar ao navegador, em que frame deseja que a pgina do link seja mostrada. Para isso voc usa o atributo "NAME". <HTML> <HEAD> <TITLE>Coloque o Ttulo aqui</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html" NAME=principal> </FRAMESET> </HTML> Veja no cdigo-fonte acima que o frame associado coluna2.html tem um atributo NAME. Isso faz com que se possa "direcionar" o frame em que queremos mostrar determinada pgina ao acionarmos um link. Veja como ficaria a tag de link para isso: <a href="apresenta2.html" target="principal">Exemplo</a>.

    Quando se acionar esse link, a pgina ser mostrada no frame onde est a coluna2.html, ou seja, em vez de carregar o link na mesma coluna em que est coluna1.html, ela ser mostrada na coluna em que est coluna2.html. O "Target" define que o link deve abrir no frame que tem este nome, no caso o "coluna2.html". Voc define o nome de cada frame e, no target, voc define para qual frame ser aberto o link. Download de Exemplos Agora que voc j viu como criar os frames e alterar seus atributos, voc poder fazer o download de arquivos de exemplo que vo servir para que voc possa ter uma idia e uma base para o incio da construo de suas pginas com frames. Ao lado de cada exemplo voc encontra o link para fazer o download do arquivo que est no formato "exe". Todos devem ser colocados em um mesmo diretrio. Abrindo o arquivo "principal.html" voc v o exemplo, os outros arquivos so os frames que voc poder editar com tudo aquilo que voc est aprendendo aqui. frame em colunas Exemplo 1: Fazer o download deste exemplo frames em linha Exemplo 2: Fazer o download deste exemplo frame em coluna e linha Exemplo 3: Fazer o download deste exemplo frame em linha e coluna Exemplo 4: Fazer o download deste exemplo Formulrios - Parte 1 Um formulrio um modelo para a entrada de um conjunto de dados. Eles so muito usados em registros eletrnicos ou em formulrios para o envio de emails para as pginas sem precisar abrir um programa de email ou digitar endereos, alm da vantagem de ter campos para cada tipo de informao. O primeiro passo para fazer formulrios aprender as tags que fazem os campos de entrada de dados. O elemento <FORM> inicia um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento. <FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM> - Atributos da tag <FORM> - ACTION

    Especifica o URL do script ao qual sero enviados os dados do formulrio. - METHOD Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do navegador para o servidor, com a seguinte diferena bsica: . POST Os dados inseridos fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. . GET Os dados inseridos fazem parte do URL associado consulta enviada para o servidor; suporta at 128 caracteres. Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo sistema para enviar os dados. Normalmente so usados "scripts". Os scripts que organizam esses dados de entrada de todos os campos em um conjunto de informaes e realizem uma tarefa programada, como por exemplo enviar os dados do formulrio para o seu email. HTML no tem condies de fazer isso, por isso necessrio utilizar scripts CGI, PERL ou ASP para executar estas tarefas, porm estes tipos de scripts necessitam de aprendizado mais dedicado para se criar o que voc deseja e so muito mais complexos do que a linguagem HTML, pois eles processam informaes. Voc pode usar scripts prontos em seus formulrios, mas no momento ainda no possvel membros da StarMedia Home Pages executarem os scripts nos servidores.

    HTML Avanado Publicado em: 28/04/2003 Compartilhe Formulrios - Parte 2 Agora precisamos criar os campos onde os usurios vo digitar os dados e selecionar as opes. Voc inclui estes campos dentro da tag <FORM>. Conhea a funo de cada um e como cri-los: <INPUT> Esta a tag para iniciar a criao de campos de dados. H vrios atributos que permitem a criao de diferentes campos de entrada de dados. Vejamos: - Campo de dados texto Quando INPUT no apresenta atributos, assume-se TYPE=TEXT como padro formatao: <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> </FORM> Ou apenas:

    <FORM> Nome: <INPUT NAME="Nome"> </FORM> Resultado: Nome: - Campo de dados de texto em formato senha Entrada de texto na qual os caracteres so escondidos por asteriscos. muito usado para entradas de senhas, como se pode ver no exemplo. <FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> </FORM> Resultado: Usurio: Senha: - Atributo NAME Ele especialmente para que voc d um nome ao campo, ele no aparece na pgina, mas serve para identificar o campo e o valor digitado no email que voc receber, nunca deixe de definir o nome dos campos, s assim voc voc poder saber o que cada usurio preencheu em cada campo. Por exemplo se voc tem vrios campos de texto, cada um para um tipo de infromao diferente, voc usa o name para identificar o campo. Voc vai ver sempre que em todas as tags INPUT este atributo est presente. Basta incluir ele da seguinte forma: <INPUT TYPE=TEXT NAME="coloque o nome do campo"> - Atributo VALUE - VALUE Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usurio no preencher este campo, ser adotado este valor padro. Se o usurio quiser inserir dados, ele somente precisar apagar o que j estiver escrito. Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> Resultado: Nome: - Atributo SIZE - SIZE Especifica o tamanho do espao no vdeo para o campo do formulrio. S vlido para campos TEXT e PASSWORD. O valor padro 20. <FORM> Endereo: <INPUT TYPE=TEXT SIZE=35> </FORM>

    Endereo: - Atributo MAXLENGTH - MAXLENGTH o nmero de caracteres aceitos em um campo de dados; este atributo s vlido para campos de entrada TEXT e PASSWORD. <FORM>Dia do ms: <INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> </FORM> Resultado: Dia do ms: Apenas 2 caracteres sero lidos pelo formulrio, no importa o quanto se escreva neste campo. - Campo de Dados Escondido (Hidden) Este tipo de campo funciona igual a um campo de texto, s que ele no aparece no formulrio para o visitante. Ele est l no cdigo, mas o visitante no pode v-lo ou alter-lo. Isso importante para voc incluir informaes que achar necessrias, mas que no deseja que o visitante altere. Veja um exemplo: <FORM> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> Aqui o campo est escondido. O visitante no o v, mas ele vai ser processado pelo formulrio. Voc pode inclu-lo sem problemas junto com os outros elementos. Por exemplo: <FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> - Mltipla escolha Voc tambm pode criar um campo onde o usurio s precisa selecionar as opes, sem digitar nada. H dois tipos bsicos de seleo: - CHECKBOX Insere um boto de escolha de valores para vrias opes. <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br > <INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha Um atributo "CHECKED" marca uma escolha inicial, isto , se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vlei <br>

    <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol Resultado: Esportes que voc pratica: Futebol Vlei Natao Basquete Tnis Bocha - Escolha nica - RADIO Insere um boto de escolha de valores para uma opo, isto , somente uma alternativa pode ser escolhida. <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional Uma diretiva CHECKED marca uma escolha inicial - se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> <INPUT TYPE=RADIO NAME="time" VALUE="naut">Nutico Resultado: Seu time do corao: Palmeiras Internacional Cruzeiro - Botes de ao Os botes so usados para executar aes dentro do formulrio, como enviar os dados ou limpar os campos. - SUBMIT Apresenta o boto que causa o envio dos dados de entrada para o servidor. <FORM> <INPUT TYPE=SUBMIT> </FORM> Resultado: possvel modificar a mensagem desse boto atravs do atributo VALUE. <FORM> <INPUT TYPE=SUBMIT VALUE="Envia mensagem"> </FORM> - RESET Restaura os valores iniciais das entradas de dados.

    <FORM> <INPUT TYPE=RESET> </FORM> Resultado: possvel modificar a mensagem desse boto atravs do atributo VALUE <FORM> <INPUT TYPE=RESET VALUE="Apaga tudo!"> </FORM>

    Formulrios - Parte 3 - <SELECT> Apresenta uma lista de valores em um menu suspenso. timo para criar escolhas que o usurio seleciona sem precisar digitar atravs de campos <OPTION>. Veja como fazer: . <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado:

    - Atributo SELECTED Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado: Aqui o Creme j aparece previamente selecionado. - Atributo SIZE Com o atributo SIZE, escolhe-se quantos itens da lista sero mostrados (no exemplo, SIZE=4): - <TEXTAREA> Abre uma rea para entrada de texto, de acordo com atributos para nmero de colunas, linhas, e

    - se for o caso - um valor inicial. um campo onde as pessoas podero digitar mais texto do que nos campos de texto que vimos na parte 2. Alm disso, o usurio pode ver o texto que est digitando. A tag fica assim: <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentrio </TEXTAREA> Resultado: Deixe seu comentrio Repare que, no atributo "COLS", definimos o nmero de colunas para a largura do campo de texto e, em "ROWS", o nmero de linhas para o campo de texto. Se o usurio digitar mais do que cinco linhas, surgir uma barra de rolagem para ele cortar o texto se desejar. Os valores destes atributos podem ser modificados vontade de acordo com a sua necessidade.

    Inserindo Sons Voc pode incluir em sua pgina um som de fundo. Com isso, sempre que algum acessar sua pgina, este som ser tocado. Desta forma voc pode fazer seu site ter mais recursos e personalidade. Os arquivos de som ideais para serem inseridos em uma home page so aqueles no formato MIDI (.MID), mas voc tambm pode incluir sons do tipo WAVE (.WAV). O Netscape e o Internet Explorer tm algumas diferenas em seu sistema e, por isso, em algumas verses do Netscape o som pode no tocar. A tag deve ser <EMBED>. Veja o exemplo: <embed src="nome da msica" autostart="true" loop=10> - Em "nome da musica" voc coloca o nome da msica mid ou wav. - Em "loop" voc coloca o nmero de vezes que o som vai ser repetido. - Em "autostart" voc define se quer que a msica comece a tocar sozinha (atributo TRUE), se voc colocar "FALSE" o usurio ter que clicar no boto de "play"para ouvir a msica Se voc quiser que ele fique se repetindo infinitamente, basta colocar "infinity" no lugar de um nmero. No necessrio colocar "</embed>" neste caso. ncoras ncoras so links estabelecidos para certas partes de uma mesma pgina ou de outra pgina qualquer, por exemplo, se voc quer que um link v direto para um texto que est no meio de uma pgina sem o visitante ter que descer a pgina. Por exemplo, clicando aqui voc salta automaticamente para o fim da pgina. Para o funcionamento de uma ncora deve-se estabelecer dois comandos: - Um que defina o lugar da pgina para onde se pretende "saltar" e - Outro que identifique esse ponto de destino. - Links com ncoras para uma mesma pgina Voc pode fazer com que links saltem para determinados pontos de uma mesma pgina, facilitando a navegao. Veja como. Primeiro vamos definir o ponto de destino. Voc deve incluir a seguinte tag exatamente no local onde quer que o link v:

    <A NAME="Coloque o nome da ancora aqui"></A> - NAME um parmetro que define um ponto de destino. - Agora voc pode usar a tag de link "comum" para fazer o link saltar para o ponto onde voc definiu: <a href="#nome da ancora">Texto</a> Repare que h um smbolo "#" antes do nome da ncora. ele que vai fazer o navegador entender que deve ir para a ncora que voc definiu. - Links com ncoras para uma outra pgina Agora digamos que voc queira que o link v para uma outra pgina e direto para um texto no final dela. Primeiro voc deve incluir, na pgina de destino, a tag da ncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a pgina. Em seguida, na pgina que ter o link, voc deve construir a tag assim: <a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto</a> Em "nome-do-lugar-a-ser-levado" voc coloca o URL ou a pgina html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de ncora deve ser o mesmo nome de ncora que voc definiu na pgina de destino. Voc pode incluir quantas ncoras quiser em sua pgina, mas lembre-se de que cada uma deve ter um nome diferente. Cores Hexadecimais A tabela abaixo apresenta os cdigos de cores que podem ser utilizados em documentos HTML. As cores marcadas por um asterisco vermelho podem ser escritas no lugar dos cdigos. Nome da cor Cdigo da cor Aparncia * White #FFFFFF * Red #FF0000 * Green #00FF00 * Blue #0000FF Magenta #FF00FF Cyan #00FFFF * Yellow #FFFF00 * Black #000000 * Aqua #70DB93 Baker's Chocolate #5C3317 Blue Violet #9F5F9F Brass #B5A642 Bright Gold #D9D919 Brown #A62A2A Bronze #8C7853 Bronze II #A67D3D Cadet Blue #5F9F9F Cool Copper #D98719 Copper #B87333 Coral #FF7F00 Corn Flower Blue #42426F Dark Brown #5C4033

    Dark Green #2F4F2F Dark Green Copper #4A766E Dark Olive Green #4F4F2F Dark Orchid #9932CD Dark Purple #871F78 Dark Slate Blue #6B238E Dark Slate Grey #2F4F4F Dark Tan #97694F Dark Turquoise #7093DB Dark Wood #855E42 Dim Grey #545454 Dusty Rose #856363 Feldspar #D19275 Firebrick #8E2323 Forest Green #238E23 Gold #CD7F32 Goldenrod #DBDB70 *Gray #C0C0C0 Green Copper #527F76 Green Yellow #93DB70 Hunter Green #215E21 Indian Red #4E2F2F Khaki #9F9F5F Light Blue #C0D9D9 Light Grey #A8A8A8 Light Steel Blue #8F8FBD Light Wood #E9C2A6 *Lime #32CD32 Mandarian Orange #E47833 *Maroon #8E236B Medium Aquamarine #32CD99 Medium Blue #3232CD Medium Forest Green #6B8E23 Medium Goldenrod #EAEAAE Medium Orchid #9370DB Medium Sea Green #426F42 Medium Slate Blue #7F00FF Medium Spring Green #7FFF00 Medium Turquoise #70DBDB Medium Violet Red #DB7093 Medium Wood #A68064 Midnight Blue #2F2F4F * Navy #23238E Neon Blue #4D4DFF Neon Pink #FF6EC7 New Midnight Blue #00009C New Tan #EBC79E Old Gold #CFB53B Orange #FF7F00 Orange Red #FF2400 Orchid #DB70DB Pale Green #8FBC8F Pink #BC8F8F Plum #EAADEA Quartz #D9D9F3 Rich Blue #5959AB

    Salmon #6F4242 Scarlet #8C1717 Sea Green #238E68 Semi-Sweet Chocolate #6B4226 Sienna #8E6B23 * Silver #E6E8FA Sky Blue #3299CC Slate Blue #007FFF Spicy Pink #FF1CAE Spring Green #00FF7F Steel Blue #236B8E Summer Sky #38B0DE Tan #DB9370 Thistle #D8BFD8 Turquoise #ADEAEA Very Dark Brown #5C4033 Very Light Grey #CDCDCD Violet #4F2F4F Violet Red #CC3299 Wheat #D8D8BF Yellow Green #99CC32

    Вам также может понравиться