[HTML] Tutorial HTML - Desde o início

por **Striip** Ter Jul 14, 2009 7:55 am

Introdução:

HTML significa ‘HyperText Markup Language’, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples: Certos itens de um documento contêm uma ligação a outra zona do mesmo documento ou, como é mais vulgar, a outros documentos.
A principal aplicação do HTML é a criação de páginas na Web, e convém esclarecer que não se trata de uma linguagem de programação. De facto, o HTML é antes uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de uma série de comandos – ‘tags’.

As bases do HTML:

Antes de mais, importa esclarecer que para a criação de uma página em HTML não é necessário nenhum software especial. Se bem que existam programas especializados, o Notepad do Windows ou mesmo o Edit do MS-DOS são mais que suficientes para a criação de uma página.

O HTML consiste em texto formatado por ‘tags’. Embora existam várias dezenas destes ‘tags’, apenas uma pequena parte destes é utilizada normalmente. Há algumas regras básicas que é necessário compreender antes de se começar com a criação de páginas...

Todos os ‘tags’ são inseridos entre o sinal de menor e maior:

Código:: <tag>

Tirando aqueles que representam a posição de um objecto (a inserção de uma imagem, por exemplo), todos os ‘tags’ de formatação devem ser abertos e fechados (utilizando o caracter ‘/’):

Código:: <tag> </tag>

Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo:

O primeiro a abrir é o último a fechar, e vice-versa.

Código:: <a> <b> <c> </a> </b> </c>

É ERRADO.

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura.
é igual a e a

Todas as páginas em HTML são identificadas pelo ‘tag’ , que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com .

Código:: <HTML> . . . </HTML>

Todas as páginas em HTML contêm duas partes: Aquela definida por , e que contém todas as informações do cabeçalho da página; Outra parte definida por , contém quase tudo aquilo que iremos ver realmente na nossa página.

Código:: <HTML> <HEAD> . . </HEAD> <BODY> . . </BODY> </HTML>

3. Uma primeira página
Página: 1 2 3 4 5 6 7 8 9 10 11

Para criarmos a nossa primeira página em HTML, como já disse no capítulo anterior, basta qualquer simples editor de texto, como o Notepad. Podemos começar por inserir o seguinte:

Código:: <HTML> <HEAD> <TITLE>A minha primeira página</TITLE> </HEAD> <BODY> </BODY> </HTML>

Dica:
Devemos criar uma pasta nova no nosso disco para conter a página, e devemos gravar o nosso ficheiro de texto como 'index.htm'. Porquê? Quando a página está a ser visualizada no nosso disco, é indiferente, mas nos servidores onde são alojadas as páginas na Internet, a página inicial por defeito chama-se index.html ou index.htm.

Se visualizarmos a página que acabámos de criar num browser (programa que permita navegar na internet, por ex. IExplorer), teremos qualquer coisa como isto:

[HTML] Tutorial HTML - Desde o início 00001c01bo1

Que conclusão podemos tirar? O texto que aparece como título da janela é definido pelo ‘tag’ , que surge sempre na área correspondente ao cabeçalho da página (<HEAD>).<br /> <br />Vamos agora fazer a seguinte alteração:<br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><br /><HEAD><br /><TITLE>A minha primeira página</TITLE><br /></HEAD><br /><BODY><br />Olá mundo!<br /></BODY><br /></HTML><br /></code></dd></dl>Iremos obter o seguinte resultado:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img140/345/00001c02wi4.gif" alt="[HTML] Tutorial HTML - Desde o início 00001c02wi4" /></a><br /><br />Como já disse antes, a área definida pelo ‘tag’ <BODY> é aquela onde reside quase todo o conteúdo visível de uma página. Vamos concentrar-nos nesta área.<br />Comecemos por acrescentar uma frase:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Olá mundo!<br /><br />Chamo-me Eduardo.<br /><br /><br /></BODY><br /></code></dd></dl><br />Inesperadamente, o resultado obtido será o seguinte:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img72/47/00001c03li2.gif" alt="[HTML] Tutorial HTML - Desde o início 00001c03li2" /></a><br /><br />Convém então esclarecer algo: Em HTML, os espaçamentos e mudanças de linha processam-se de um modo algo diferente. Todo o texto é interpretado continuamente, e na verdade é possível que todo o HTML de uma página esteja numa única linha. Os espaços, tal como neste tutorial, apenas servem para tornar o código mais legível a quem o cria. Vamos introduzir o seguinte ‘tag’:<br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Olá mundo!<br /><BR><br />Chamo-me Eduardo.<br /></BODY><br /><br /></code></dd></dl>Este <strong><BR></strong> (de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img262/6272/00001c04he0.gif" alt="[HTML] Tutorial HTML - Desde o início 00001c04he0" /></a></div></div></div><div class="postprofile" id="profile7542"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7544" class="post row1 post--7544" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7544"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7544">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:55 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="red"><span style="font-size: 18px; line-height: normal">2.Uma primeira página (continuação)</span></font><br /><br />Vamos agora tentar o seguinte:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Olá mundo! Chamo-me Eduardo.<br /></BODY></code></dd></dl><br />Iremos obter novamente o seguinte resultado:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img128/6060/00001d01df5.gif" alt="[HTML] Tutorial HTML - Desde o início 00001d01df5" /></a><br /><br />Porquê? Como foi dito, a noção de espaçamento em HTML é um pouco diferente, e os browsers não reconhecem mais que um único espaço entre caracteres. Para contornar isto, utiliza-se uma referência especial - (Non-Breaking SPace), que convém esclarecer que não é um ‘tag’. Antes de mais explicações, experimentemos isto:<br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Olá mundo!<br /> <br />Chamo-me Eduardo.<br /></BODY></code></dd></dl><br /><br />O resultado será este:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img255/3541/00001d02zs1.gif" alt="[HTML] Tutorial HTML - Desde o início 00001d02zs1" /></a><br /><br /><font color="red">Dica:</font><br /> <br />Estes caracteres especiais são utilizados para definir caracteres que normalmente não são reconhecidos pelo HTML. Por exemplo, visto que os sinais de maior e menor são utilizados pelo próprio HTML para definir os ‘tags’, se quisermos utilizar estes sinais na nossa página utilizaremos <strong>></strong>; e <strong><</strong>; respectivamente.<br /> <br />Uma das bases do HTML é o facto de ser uma linguagem de hiper-texto. Vamos agora tentar introduzir uma ligação a outra página:<br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Olá mundo! Chamo-me Eduardo.<BR><br />Visitem a minha <A HREF="outra.htm"> outra página</A>.<br /></BODY></code></dd></dl><br /><br />iremos então obter uma ligação a uma página, que seria o ficheiro ‘outra.htm’ gravado na mesma pasta que o ficheiro da página que estamos a editar. Seria interessante criar rapidamente essa página para testar a ligação que acabámos de criar.<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img111/2559/00001d03pi3.gif" alt="[HTML] Tutorial HTML - Desde o início 00001d03pi3" /></a><br /><br />Este ‘tag’ é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O ‘tag’ <<strong>A</strong>> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o <strong>HREF</strong>) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até o ‘tag’ ser fechado com </A>.<br /><br />O parâmetro HREF pode conter também o endereço de outro site, como em <<strong>A HREF="http://www.site.com"</strong>> (neste caso é indispensável o prefixo <a href="http://)" target="_blank" rel="nofollow">http://)</a> ou qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download usar-se-ia <<strong>A HREF="ficheiro"</strong>>.<br /><br /><font color="red">Dica:</font><br /> <br />IMPORTANTE: Aconselho vivamente que todos os ficheiros referidos numa página, quer links a outras páginas, quer imagens, etc, tenham o seu nome em minúsculas, pois a grande maioria dos servidores Web fazem uma distinção entre maiúsculas e minúsculas. Existe uma forte possibilidade que se tivermos uma link a ‘pagina.htm’, quando o ficheiro se chama ‘Pagina.htm’, esta link não funcione.</div></div></div><div class="postprofile" id="profile7544"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7545" class="post row2 post--7545" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7545"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7545">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:56 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="red"><span style="font-size: 18px; line-height: normal">3.CONTINUAÇÃO:</span></font><br /><br />Todas as páginas que vemos na Internet têm algo mais que texto corrido e monótono. Antes de mais, podemos mudar a cor de uma página:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><HEAD><TITLE>Página com cor</TITLE></HEAD><br /><BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000"><br />Texto normal<BR><A HREF="outra.htm">Texto com link</A><br /></BODY><br /></HTML></code></dd></dl><br />O resultado será o seguinte:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img99/4115/00001e01tj6.gif" alt="[HTML] Tutorial HTML - Desde o início 00001e01tj6" /></a><br /><br />Aqui foram acrescentados três parâmetros adicionais ao ‘tag’ <<strong>BODY</strong>>.<strong> BGCOLOR</strong> define a cor de fundo da página, TEXT a cor por defeito do texto, <strong>LINK</strong> a cor de uma hiper-ligação. Existem ainda os parâmetros adicionais <strong>ALINK</strong> e <strong>VLINK</strong> que definem, respectivamente, a cor de uma ligação activa (quando se clica sobre ela) e a cor de uma ligação já visitada previamente.<br /><br />O que está dentro destes parâmetros? O código hexadecimal correspondente à cor (mais informação sobre isto encontra-se no artigo <font color="red">sobre o uso da cor</font>, na seguinte tabela podemos ver alguns dos mais importantes:<br /><br /><font color="red">Dicas:</font><br /><br />Branco:#FFFFF Amarelo: <font color="yellow">#FFFF00</font> <br />Preto: <font color="black">#000000</font> Magenta: <font color="violet">#FF00FF</font><br />Cinza: #999999 (sem cor xD)Azul claro: <font color="cyan">#00FFFF</font><br />Vermelho: <font color="red">#FF0000</font> Laranja: <font color="orange">#FF6600</font><br />Verde: <font color="green">#00FF00</font> Verde escuro: <font color="olive">#006600</font><br />Azul: <font color="blue">#0000FF </font> Azul escuro: <font color="darkblue">#000066</font><br /><br />No entanto, muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por defeito tudo fica alinhado à esquerda, mas é possível mudar isso:<br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br /><DIV ALIGN="CENTER">TEXTO CENTRADO</DIV><br /><DIV ALIGN="RIGHT">TEXTO À DIREITA</DIV><br />Texto à esquerda<br /></BODY></code></dd></dl><br /><br />O texto em maiúsculas tem o seu alinhamento alterado, a utilização do ‘tag’ <<strong>DIV</strong>> também provoca quebras de linha:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img166/5421/00001e02hq4.gif" alt="[HTML] Tutorial HTML - Desde o início 00001e02hq4" /></a><br /><br />Porquê? O ‘tag’ <<strong>P</strong>> é utilizado para a definição de parágrafos, como o seguinte exemplo o demonstra:<br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br /><P>Bloco de texto</P><br /><P>Outro bloco de texto<BR>com mudança de linha</P><br /></BODY></code></dd></dl><br />Existe uma diferença clara entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’ <<strong>BR</strong>>, de quebra de linha:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img254/8132/00001e03gm1.gif" alt="[HTML] Tutorial HTML - Desde o início 00001e03gm1" /></a></div></div></div><div class="postprofile" id="profile7545"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7546" class="post row1 post--7546" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7546"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7546">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:56 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="orange"><span style="font-size: 18px; line-height: normal">4.Formatação e aspecto (continuação)</span></font><br /><br />Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. Antes de mais, temos os ‘tags’ <<strong>B</strong>>, <<strong>I</strong>> e <<strong>U</strong>>, respectivamente para letra carregada, em itálico e sublinhada:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br />Normal<BR><br /><B>Carregado</B><BR><br /><I>Italico</I><BR><br /><U>Sublinhado</U><BR><br /><B><I>Carregado e Italico</I></B><br /></BODY></code></dd></dl><br /><br />Obtemos este resultado:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img258/4937/00001f01lr8.gif" alt="[HTML] Tutorial HTML - Desde o início 00001f01lr8" /></a><br /><br />Além disto, também podemos escolher a fonte, o seu tamanho e cor com <FONT>:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY><br /><P>Letra normal</P><br /><P><FONT FACE="Arial">Letra com a fonte Arial</FONT></P><br /><FONT FACE="Arial"><br /><P><FONT SIZE="5">Tamanho 5</FONT></P><br /><P><FONT SIZE="2">Tamanho 2</FONT></P><br /><FONT SIZE="5"><br /><P><FONT COLOR="#0000FF">Azul T.5</FONT></P><br /><P><FONT COLOR="#FF0000">Vermelho T.5</FONT></P><br /></FONT><br /></FONT><br /><P><FONT FACE="Times New Roman" SIZE="7" COLOR="#006633"><br />Podemos combinar varios parametros</FONT></P><br /></BODY></code></dd></dl><br />Este já está um pouco mais complicado. Existem várias maneiras de fazer isto, mas esta demonstra como se devem hierarquizar os ‘tags’ correctamente. Bem executado, teremos este resultado:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img510/7414/00001f02ro5.gif" alt="[HTML] Tutorial HTML - Desde o início 00001f02ro5" /></a><br /><br />O parâmetro <strong>COLOR</strong>, que já vimos aplicado no ‘tag’ <<strong>BODY</strong>>, contém a cor do texto no seu código hexadecimal (ver Apêndice E). O parâmetro <strong>SIZE</strong> contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, <strong>FACE</strong> contém o nome do tipo de letra a utilizar.<br /><br /><font color="red">Dica:</font><br /> <br />Apesar de existirem inúmeros tipos de letra, é aconselhável que uma página apenas utilize o Arial ou o Times New Roman, visto que com outros existe uma grande possibilidade que quem vai visitar a página não tenha essa fonte instalada no seu computador.</div></div></div><div class="postprofile" id="profile7546"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7547" class="post row2 post--7547" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7547"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7547">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:56 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="red"><span style="font-size: 18px; line-height: normal">5. Multimédia: Som e Imagem</span></font><br /><br />Toda a manipulação de texto e de cor que vimos pode parecer interessante, mas é raríssima a página na Internet que não contém pelo menos uma imagem.<br /><br />Podemos começar por ver como se insere um fundo numa página:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><br /><HEAD><TITLE>Página com imagem</TITLE></HEAD><br /><br /><br /><BODY BACKGROUND="imagem.jpg"><br /><FONT FACE="Arial" SIZE="4">Imagem de fundo</FONT><br /></BODY><br /></HTML></code></dd></dl><br /><br />Teremos como fundo da página a imagem especificada no parametro <strong>BACKGROUND</strong>, presente na mesma pasta que a nossa página.<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img398/5541/00001g01yj7.gif" alt="[HTML] Tutorial HTML - Desde o início 00001g01yj7" /></a><br /><br />Embora não se veja na imagem acima, a imagem repete-se em padrão. Não é aconselhável a utilização de fundos complexos, visto que podem tornar o texto pouco legível. Também é recomendável a escolha de uma cor suficientemente contrastante para o texto.<br /><br />No entanto, para colocarmos uma imagem no corpo da nossa página utilizamos o ‘tag’ <<strong>IMG</strong>>. Este ‘tag’ insere uma imagem no ponto onde é colocado, e não é fechado, visto que não se trata de um ‘tag’ de formatação.<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY BGCOLOR="#66CCFF"><br /><P>Olá, sou o Eduardo</P><br /><P><IMG SRC="eduardo.jpg" ALT="Sou eu!"></P><br /></BODY></code></dd></dl><br />Tem o resultado seguinte:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img398/4632/00001g02xa3.jpg" alt="[HTML] Tutorial HTML - Desde o início 00001g02xa3" /></a><br /><br />As imagens são objectos inseridos no meio do texto, pelo que a sua colocação requer algum planeamento:<br /><dl class="codebox"><dt>Código:</dt><dd><code><DIV ALIGN="CENTER"><br />Olá, sou o Eduardo.<IMG SRC="eduardo.jpg" ALT="Sou eu!"><br />Benvindos à minha página.<br /></DIV></code></dd></dl><br />Tem um resultado um pouco infeliz:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img152/4127/00001g03lj6.jpg" alt="[HTML] Tutorial HTML - Desde o início 00001g03lj6" /></a><br /><br />Vamos então analizar o ‘tag’ <<strong>IMG</strong>>. O parâmetro <strong>SRC</strong> (SouRCe) indica o ficheiro da imagem. Deve ser um ficheiro .GIF ou .JPG e devemos ter atenção às maiusculas e minúsculas do seu nome. O parâmetro <strong>ALT</strong> indica o texto que irá aparecer enquanto a imagem não é descarregada da Internet, ou que aparece quando passamos com o rato por cima da Imagem.<br />Uma conclusão muito importante é que podemos inserir uma imagem numa secção formatada pelo ‘tag’ <<strong>A</strong>>, de modo a criar uma link nessa imagem:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><P>Clique abaixo para continuar</P><br /><P><br /><A HREF="paginadois.htm"><IMG SRC="link.gif" BORDER="4"></A><br /></P><br /></code></dd></dl><br />Teremos então uma link para ‘paginadois.htm’ na imagem ‘link.gif’:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img88/8752/00001g04ho6.gif" alt="[HTML] Tutorial HTML - Desde o início 00001g04ho6" /></a><br /><br />O parâmetro <strong>BORDER</strong> define a largura da borda da imagem. No caso de esta fazer uma hiper-ligação, a cor desta borda será a cor por defeito, aquela que pode ser definida por <<strong>BODY LINK="…"</strong>>, senão será igual à cor do texto. Podemos ainda utilizar <strong>BORDER="0"</strong> para suprimir a borda.</div></div></div><div class="postprofile" id="profile7547"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7549" class="post row1 post--7549" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7549"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7549">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:56 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="red"><span style="font-size: 18px; line-height: normal">5. Multimédia: Som e Imagem (continuação)</span></font><br /><br />Além de imagens, também existe a possibilidade de colocar um pequeno reprodutor de som na página. Embora muita gente ache a musica de fundo algo de gosto duvidoso, desta maneira será possível parar a música, através de um pequeno controle tipo aparelhagem.<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><P ALIGN="CENTER"><br /><BGSOUND SRC="musica.mid"><br /><EMBED SRC="musica.mid" WIDTH="140" HEIGHT="25" AUTOSTART="TRUE" CONTROLS="SMALLCONSOLE" VOLUME="60"OOP="FALSE"></EMBED><br /></P></code></dd></dl><br />Nota-se que foram utilizados dois ‘tags’ para fazer a mesma coisa. Porquê? Os dois browsers mais utilizados, o Internet Explorer da Microsoft e o Navigator da Netscape têm certas diferenças na sua interpretação do <strong>HTML</strong>. Por isso, por vezes, é necessário incluir dois comandos diferentes para uma mesma função, visto que cada um destes comandos se destina a um dos browsers.<br /><br />O ‘tag’ <<strong>BGSOUND</strong>> tem no parâmetro <strong>SRC </strong>a localização do ficheiro de som a tocar. No exemplo trata-se de um ficheiro .MID, mas pode perfeitamente ser um som <strong>.WAV</strong> ou <strong>.AU.</strong><br /><br />De forma similar, o ‘tag’ <<strong>EMBED</strong>> tem em <strong>SRC</strong> o ficheiro a tocar. Mas este ‘tag’ é substancialmente diferente. <<strong>EMBED</strong>> é um ‘tag’ poderosíssimo que tem como função a inserção de ‘plug-ins’ multimédia, que além de som também podem ser programas em Java, filmes ou mesmo visores de mundos em realidade virtual. Os parâmetros de <<strong>EMBED</strong>> são específicos conforme o conteúdo e é um domínio já bastante avançado da criação de páginas.</div></div></div><div class="postprofile" id="profile7549"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7550" class="post row2 post--7550" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7550"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7550">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:56 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="orange"><span style="font-size: 18px; line-height: normal">6. Estrutura usando tabelas</span></font><br /><br />Na criação de páginas em HTML, as tabelas são algo que serve para muito mais que para a criação de tabelas propriamente ditas. Na verdade, é rara a página bem construída que não as utilize para melhor controlar a localização do texto, imagens e outros elementos de uma página.<br /><br />Vamos seguir atentamente a criação de uma página com tabelas, visto que este é um dos processos onde os iniciados ao HTML encontram mais dificuldades.<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><br /><HEAD><TITLE>Página com uma tabela simples<br /></TITLE></HEAD><br /><BODY><br /><br /><TABLE ALIGN="CENTER" BORDER="2"></code></dd></dl><br />Isto parece um pouco óbvio. O ‘tag’ <<strong>TABLE</strong>> inicia a nossa tabela. O parâmetro <strong>ALIGN</strong> define a localização da tabela na página (neste caso ficará centrada), e BORDER define a largura da borda.<br /><br /><<strong>TR</strong>><br /><br />Agora, este ‘tag’ parece bem mais estranho. <<strong>TR</strong>> significa Table Row, e indica que vamos introduzir uma linha na nossa tabela. Parece lógico, dado que normalmente as tabelas se definem por linhas e colunas. No entanto…<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><TD ALIGN="CENTER">Uma célula</TD><br /><TD ALIGN="CENTER">Duas células</TD></code></dd></dl><br />Poder-se-ia dizer que o <<strong>TD</strong>> diz respeito à divisão em colunas, duas neste caso. No entanto, isto é pouco exacto visto que, como vamos ver mais à frente, um <<strong>TD</strong>> não corresponde necessariamente a uma coluna da nossa tabela. Na verdade este ‘tag’ apenas divide a linha actual em várias células. Mas atenção! Se quisermos apenas uma célula, teremos sempre que utilizar na mesma um <<strong>TD</strong>>! Outra coisa a notar, o parâmetro <strong>ALIGN</strong> deste ‘tag’ diz respeito ao alinhamento por defeito do texto contido na célula.<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code></TR><br /></TABLE><br /><br /></BODY><br /></HTML></code></dd></dl><br />Fechamos todos os ‘tags’ abertos e assim concluímos a nossa tabela:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img120/3965/00001i01ws0.gif" alt="[HTML] Tutorial HTML - Desde o início 00001i01ws0" /></a><br /><br />vamos ver agora mais alguns exemplos de como utilizar tabelas.<br />Primeiramente vamos ver como se utiliza uma tabela para fazer uma página de entrada num site, com uma imagem centrada no ecrã.<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><br /><HEAD><br /><TITLE>Site de Eduardo Sousa – Carregue na imagem para entrar</TITLE><br /></HEAD><br /><BODY BGCOLOR="#000000" TEXT="#FFFFFF"><br /><TABLE ALIGN="CENTER" WIDTH="100%" HEIGHT="100%"><br /><TR><br /><TD ALIGN="CENTER" VALIGN="MIDDLE"><br /><A HREF="principal.htm"><br /><IMG SRC="imagem.jpg" ALT="Clique para entrar"><br /></A><br /></TD></TR><br /></TABLE><br /></BODY><br /></HTML></code></dd></dl><br /><br />O resultado será este:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img150/3293/00001i02uk8.jpg" alt="[HTML] Tutorial HTML - Desde o início 00001i02uk8" /></a></div></div></div><div class="postprofile" id="profile7550"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7551" class="post row1 post--7551" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7551"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7551">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:57 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="red"><span style="font-size: 18px; line-height: normal">6. Estrutura usando tabelas (continuação)</span></font><br /><br /><br />Como vimos, é obrigatório respeitar sempre a hierarquia <<strong>TABLE</strong>><<strong>TR</strong>><<strong>TD</strong>> e o facto de esta tabela ter apenas uma célula não dispensa nenhum destes ‘tags’.<br /><br />Começando por <<strong>TABLE</strong>>, <strong>WIDTH </strong>e <strong>HEIGHT </strong>definem o tamanho da tabela. Neste caso foi fornecido um valor em percentagem, relativo ao tamanho do ecrã. Assim conseguimos criar uma tabela que ocupa a totalidade do ecrã. Caso estivesse escrito <<strong>TABLE WIDTH="100"</strong>>, o valor seria interpretado em termos absolutos, em pixeis, e tendo em conta que a maioria das pessoas têm o seu ecrã com 800 pixeis de largura, o resultado da tabela seria bem diferente. Cabe a cada um julgar as situações em que devem ser utilizadas percentagens ou valores em pixeis<br /><br />Em <<strong>TD</strong>>, surgem <strong>ALIGN </strong>e <strong>VALIGN</strong>. Se o primeiro é um parâmetro que surge em muitos ‘tags’ e diz respeito ao alinhamento horizontal (pode conter "<strong>CENTER</strong>", "<strong>LEFT</strong>" ou "<strong>RIGHT</strong>"), <strong>VALIGN </strong>é um parâmetro que nos surge apenas no ‘tag’ <TD>, e diz respeito ao alinhamento vertical. Pode por isso conter os valores "<strong>MIDDLE</strong>", "<strong>TOP</strong>" ou "<strong>BOTTOM</strong>", respectivamente para o centro, em cima ou em baixo.<br /><br /> <br />Finalmente, vamos analisar uma tabela complexa:<br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><BODY BGCOLOR="#000000" TEXT="#FFFFFF"><br /><TABLE BGCOLOR="#000099" ALIGN="CENTER" WIDTH="400" HEIGHT="300" BORDER="3"><br /><br /><TR><br /><TD ALIGN="CENTER" COLSPAN="3"> 1 </TD><br /></TR><br /><br /><TR><br /><TD ALIGN="CENTER" ROWSPAN="2"> 2 </TD><br /><TD ALIGN="CENTER" ROWSPAN="2"> 3 </TD><br /><TD ALIGN="CENTER"> 4 </TD><br /></TR><br /><br /><TR><TD ALIGN="CENTER"> 5 </TD></TR><br /><br /></TABLE><br /></BODY></code></dd></dl><br />Para melhor compreender esta estrutura é conveniente vermos o resultado final:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img145/5048/00001j01zu1.gif" alt="[HTML] Tutorial HTML - Desde o início 00001j01zu1" /></a><br /><br />É por isto que não se pode associar os ‘tags’ <<strong>TR</strong>> e <<strong>TD</strong>> com linhas e colunas. Se bem que exista alguma verdade nessa associação, podemos, de facto, ter apenas um <<strong>TD</strong>> para várias colunas, e um <<strong>TR</strong>> para várias linhas, como se pode ver no resultado. Analisemos então o <strong>HTML </strong>que inserimos.<br />Começamos por introduzir um novo parâmetro em <<strong>TABLE</strong>>. Através de <strong>BGCOLOR </strong>conseguimos definir, tal como fizemos para a o corpo da página, a cor de fundo da tabela. Este parâmetro também pode ser utilizado em <<strong>TR</strong>> e em <<strong>TD</strong>> para definir a cor de fundo de uma determinada linha ou célula.<br /><br />Depois introduzimos <<strong>TD COLSPAN="3"</strong>>. Este parâmetro define o número de colunas que uma determinada célula ‘percorre’. Assim, como acontece na nossa tabela, se tivermos uma única célula com três células por baixo, teremos que percorrer três colunas. No entanto, teremos sempre que considerar como número de colunas na nossa tabela o maior numero possível, por exemplo, se a célula 5 estivesse dividida em duas colunas, o parâmetro <strong>COLSPAN </strong>da célula 1 teria que ter um valor igual a 4.<br /><br />Semelhante temos também <strong>ROWSPAN</strong>, que se aplica a linhas. Vemos este parâmetro aplicado nas células 2 e 3, o que faz com que o <<strong>TR</strong>> seguinte a ser aberto vá ocupar o espaço que ficou debaixo da célula 4.</div></div></div><div class="postprofile" id="profile7551"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7552" class="post row2 post--7552" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7552"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7552">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por <span style="color:#AB1919"><strong>Striip</strong></span> Ter Jul 14, 2009 7:57 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div><font color="orange"><span style="font-size: 18px; line-height: normal">7. Estrutura avançadas: "Frames"</span></font><br /><br />Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando.<br /><br /><br />Para tal é utilizado um processo mais complexo no qual visualizamos ao mesmo tempo no ecrã mais que uma página HTML. Para isso usa-se aquilo que iremos chamar de sistema de ‘frames’.<br /><br /><br />O princípio é simples. Temos uma página que nos indica a posição na qual as outras páginas serão colocadas. No exemplo referido de um menu do lado esquerdo, ateríamos, por exemplo uma página <strong>principal.htm</strong> que nos diz para exibir a página <strong>menu.html</strong> no lado esquerdo e a página conteudo.htm no lado direito.<br /><br />Vamos agora ver como criar uma página com três ‘frames’, uma do lado esquerdo, e do lado direito um cabeçalho e o corpo, como no seguinte esquema:<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img187/9514/imagem01er9.jpg" alt="[HTML] Tutorial HTML - Desde o início Imagem01er9" /></a><br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><HTML><br /><HEAD><TITLE>Página com Frames</TITLE></HEAD><br /><br /><FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0"> <br /><FRAME SRC="esquerda.htm" NAME="esquerda" NORSIZE FRAMEBORDER="NO"><br /><br /><FRAMESET ROWS ="90,*"><br /><FRAME SRC="cima.htm" NAME="cima" NORESIZE SCROLLING="NO" FRAMEBORDER="NO"><FRAME SRC="conteudo.htm" NAME="conteudo" FRAMEBORDER="NO"><br /></FRAMESET><br /><br /></FRAMESET><br /><br /><br /><NOFRAMES><br /><BODY BGCOLOR="#FFFFFF"><br />Esta página usa frames, mas o seu browser não as consegue visualizar.<br /></BODY><br /></NOFRAMES><br /></HTML></code></dd></dl><br />Vejamos: esta página é algo diferente daquilo que aprendemos até agora. Isto porque aquilo que vemos no ecrã não é esta página, mas sim aquelas que esta refere.<br /><br /><br />Para definir frames, utiliza-se o ‘tag’ <<strong>FRAMESET</strong>>. Como não se trata propriamente do corpo da página, este ‘tag’ define uma área após a área <<strong>HEAD</strong>>, mas não contido dentro do ‘tag’ <<strong>BODY</strong>>. Ao utilizar o parâmetro <strong>COLS</strong>, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponível ou por um asterisco, que significa ‘o resto’. Estas colunas são definidas da esquerda para a direita. Temos também <strong>BORDER </strong>e <strong>FRAMESPACING</strong>, que definem a borda e o espaçamento entre frames.<br /><br /><br />Dentro de <<strong>FRAMESET</strong>>, podemos então definir a frame propriamente dita ou subdividi-la pela ordem em que foram criadas as colunas. Temos então inserido o ‘tag’ <<strong>FRAME</strong>>, que se refere à primeira coluna (de 160 pixeis). <strong>SRC </strong>define qual o ficheiro HTML a ser exibido nessa frame, <strong>NAME</strong>, muito importante, indica qual o nome da frame, para que as links possam lá recair (veremos isto mais à frente). <strong>NORESIZE </strong>indica que a frame não pode ser redimensionada com o rato, e <strong>FRAMEBORDER</strong>, mais uma vez, a borda da frame. Utiliza-se <<strong>FRAME FRAMEBORDER</strong>> e <<strong>FRAMESET BORDER</strong>> mais uma vez por uma questão de compatibilidade entre o Internet Explorer e o Netscape Navigator. <strong>SCROLLING </strong>pode ser definido com "YES" ou "NO" para obrigar a barra de scroll a estar sempre visível ou escondida.<br /><br /><a href="http://www.imagehosting.com/" target="_blank" rel="nofollow"><img src="https://2img.net/r/ihimizer/img147/9407/00001k01yn1.jpg" alt="[HTML] Tutorial HTML - Desde o início 00001k01yn1" /></a><br /><br />A segunda coluna que definimos é então ocupada por um novo <<strong>FRAMESET</strong>>, este agora que divide essa área em duas linhas, utilizando <strong>ROWS</strong>. De forma semelhante a <strong>COLS</strong>, <strong>ROWS </strong>divide a área a que diz respeito em linhas, lidas de cima para baixo.<br /><br />No final temos ainda uma estranha área<<strong>NOFRAMES</strong>>. Esta, que dentro de si contém uma área<<strong>BODY</strong>>, destina-se a alojar o conteúdo do corpo da página visível nos browsers antigos (anteriores ao Netscape 2.0), que não suportam frames.<br /><br /><br />Como é que fazemos com que as links ‘caiam’ sobre uma das frames que criamos?<br /><br /><br />Aí entra o parâmetro NAME de <FRAME>. Através do nome que definimos, podemos usar o seguinte código, por exemplo no ficheiro ‘esquerda.htm’:<br /><br /><br /><dl class="codebox"><dt>Código:</dt><dd><code><A HREF="link.htm" TARGET="conteudo">Link</A></code></dd></dl><br />Através de <strong>TARGET </strong>podemos definir o ‘alvo’ de uma link, que terá o nome que atribuímos à frame desejada. Podemos ainda utilizar <strong>TARGET="_blank"</strong>, que abre a link numa nova janela, e <strong>TARGET="_ top"</strong>, que abre a link no topo de toda a hierarquia de frames no ecrã, apagando as frames existentes. Quando não é atribuído um <strong>TARGET</strong>, as links abrem por defeito na própria frame onde existem.<br /><br />Por: Eduardo Sousa<br /><font color="orange">Adaptado e traduzido por:</font> Pedro (<font color="blue">Striip</font>)</div></div></div><div class="postprofile" id="profile7552"><dl><dt><img loading="lazy" src="https://2img.net/h/oi30.tinypic.com/10yi3bk.png" alt="Striip" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em"><span style="color:#AB1919"><strong>Striip</strong></span></strong></dt><dd><B><font color="#AB1919">Moderador Global</font></b><br /><img src="https://2img.net/h/oi25.tinypic.com/34hb6lj.png" alt="Moderador Global" title="Moderador Global" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/fdf3/garcon12.png" alt="Masculino" title="Masculino" /><br /><span class="label"><span style="color:#000000;">Posts</span> : </span> 507<br /><span class="label"><span style="color:#000000;">Localização</span> : </span> Dourados-MS<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> <a href="http://visual-arts.forumeiros.com/" title="Visitar a homepage do usuário" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/prosilver/icon_contact_www.gif" alt="http://visual-arts.forumeiros.com/" /></a></dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p7554" class="post row1 post--7554" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="7554"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#7554">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por Pedro Pereir Ter Jul 14, 2009 8:10 am</p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div>Ja tinha visto esse tutorial no Multi-Forum(antes de ser Tech-Nation e Visual Arts)Sei mais ou menos as bases.Nem preciso desses atalhos do forum para ser mais facil.<br /><br />Vlw na mesma <img src="/users/1913/79/00/88/smiles/806245.gif" alt=":vlw:" longdesc="32" /></div></div></div><div class="postprofile" id="profile7554"><dl><dt><img loading="lazy" src="https://2img.net/u/1913/79/00/88/avatars/3-65.jpg" alt="Pedro Pereir" style="max-width: 200px; max-height: 600px" /><br /><strong style="font-size:1.2em">Pedro Pereir</strong></dt><dd><B><font color="#606060">Membro</font></b><br /><img src="https://2img.net/h/oi31.tinypic.com/20zqhyr.png" alt="Membro" title="Membro" loading="lazy" /><br /></dd><dd class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;">Posts</span> : </span> 151<br /><span class="label"><span style="color:#000000;">Inscrição</span> : </span> 16/01/2009<br /></dd><dd><br /></dd><dd> </dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Gosto</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Não gosto</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><div id="p0" class="post row2 post--0" style=""><div class="inner"><span class="corners-top"><span></span></span><div style="position: relative; top: -30px; width: 1px;" id="0"></div><div class="postbody"><ul class="profile-icons"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2 class="topic-title"><img src="https://2img.net/i/empty.gif" alt="[HTML] Tutorial HTML - Desde o início Empty" loading="lazy" /> <a href="/t2077-html-tutorial-html-desde-o-inicio#0">Re: [HTML] Tutorial HTML - Desde o início</a></h2><p class="author"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="Mensagem" title="Mensagem" /> por Conteúdo patrocinado </p><div class="clearfix"></div><div style="display:none"></div><div class="content clearfix"><div>  <div id="crt-4f8b1150" style="width:600px;height:500px;"></div> <script type="text/javascript"> if (isMobile){ document.getElementById("crt-4f8b1150").style.display = "none"; } else{ CriteoAdblock("crt-4f8b1150", 1351392,'criteo_1351393'); } </script>   <div id="criteo_1351393"> <script type="text/javascript"> Criteo.events.push(function() { Criteo.Passback.RenderAd('criteo_1351393', function(){ var slotid = "criteo_1351393"; var div = document.getElementById(slotid); if (div) { window._taboola = window._taboola || []; _taboola.push({article:'auto'}); !function (e, f, u, i) { if (!document.getElementById(i)){ e.async = 1; e.src = u; e.id = i; f.parentNode.insertBefore(e, f); } }( document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/forumotion-pt/loader.js', 'tb_loader_script' ); if(window.performance && typeof window.performance.mark == 'function') {window.performance.mark('tbl_ic');} div.innerHTML+= '<div id="taboola-below-article-thumbnails"></div>'; window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-Below', container: 'taboola-below-article-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix' }); window._taboola = window._taboola || []; _taboola.push({flush: true}); } }); }); </script></div></div></div></div><div class="postprofile" id="profile0"><dl><dt><br /><strong style="font-size:1.2em">Conteúdo patrocinado</strong></dt><dd></dd><dd class="dd_award right"></dd><dd class="award_more"></dd><dd><br /></dd><dd></dd><dd><br /></dd><dd> </dd></dl></div><div class="clear"></div><p class="right"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/fdf3/down11.png" alt="Ir para baixo" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><a name="bottomtitle"></a><p class="left-box"><a href="#top"><img src="https://2img.net/i/fa/fdf3/up11.png" alt="Ir para o topo" loading="lazy" /></a></p><div class="clear"></div><div class="noprint"><p class="right"></p></div><div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em"><span class="corners-top"><span></span></span><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt="+" align="" border="0" /></a></span><span class="ptrafic"> Tópicos semelhantes</span><span class="corners-bottom"><span></span></span></div><div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em"><span class="corners-top"><span></span></span><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="" border="0" /></a></span><span class="ptrafic"> Tópicos semelhantes</span><div class="clear"></div><div>» <a href="/t362-tutorial-css-desde-o-inicio" title="[Tutorial] CSS desde o início" >[Tutorial] CSS desde o início</a><br />» <a href="/t2075-css-tutorial-css-desde-o-inicio" title="[CSS] Tutorial CSS - desde o início" >[CSS] Tutorial CSS - desde o início</a><br />» <a href="/t360-tutorial-html-basico" title="[Tutorial] HTML Básico" >[Tutorial] HTML Básico</a><br />» <a href="/t1718-html-as-bases-do-html" title="[HTML] As bases do HTML" >[HTML] As bases do HTML</a><br />» <a href="/t1526-inicio-de-carreira" title="Inicio de carreira" >Inicio de carreira</a><br /></div><span class="corners-bottom"><span></span></span></div><a name="quickreply"></a><hr /><div class="topic-actions"><div class="buttons"></div><div class="pathname-box"><p><a class="nav" href="/"></a><a class="nav" href=""></a> :: <a href="/c8-web-design" class="nav"><span>Web Design</span></a> :: <a href="/f169-tutoriais-web" class="nav"><span>Tutoriais Web</span></a> :: <a href="/f171-outros" class="nav"><span>Outros</span></a></p></div><div class="pagination">Página <strong>1</strong> de <strong>1</strong></div></div><div class="clear"></div><form action="/viewforum" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><fieldset class="jumpbox"><label>Ir para: </label><select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Selecionar um fórum</option><option value="-1"></option><option value="-1">|</option><option txt="foro" value="c1">|--Inicio</option><option txt="foro" value="f1">| |-- Regulamento & Staff</option><option txt="foro" value="f167">| |-- Cópias do Visual-Arts</option><option txt="foro" value="f3">| |-- News - 2009</option><option txt="foro" value="f4">| |-- Feedback</option><option txt="foro" value="f11">| | |--Críticas</option><option txt="foro" value="f12">| | |--Sugestões</option><option txt="foro" value="f13">| | |--Dúvidas</option><option value="-1">| | </option><option txt="foro" value="f5">| |-- Apresentações</option><option txt="foro" value="f8">| |--Apresentação da Staff</option><option txt="foro" value="f9">| |--Apresentação de Membros</option><option txt="foro" value="f10">| |--Troca de Nicks</option><option txt="foro" value="f88">| |--Parcerias</option><option value="-1">| </option><option txt="foro" value="c6">|--Tutoriais, Recursos & Suporte Gráfico</option><option txt="foro" value="f23">| |-- Suporte</option><option txt="foro" value="f150">| | |--Suporte ao membro</option><option txt="foro" value="f151">| | |--Dúvidas solucionadas</option><option value="-1">| | </option><option txt="foro" value="f6">| |-- Tutoriais Gráficos</option><option txt="foro" value="f148">| | |--Top Tutoriais</option><option txt="foro" value="f14">| | |--Adobe Photoshop</option><option txt="foro" value="f16">| | |--Adobe Fireworks</option><option txt="foro" value="f15">| | |--Adobe Flash</option><option txt="foro" value="f17">| | |--Adobe Illustrator</option><option txt="foro" value="f18">| | |--Adobe InDesign</option><option txt="foro" value="f180">| | |--Softwares 3D</option><option txt="foro" value="f149">| | |--Peça um tutorial</option><option value="-1">| | </option><option txt="foro" value="f52">| |-- Recursos</option><option txt="foro" value="f28">| | |--Shapes</option><option txt="foro" value="f29">| | |--Brushes</option><option txt="foro" value="f30">| | |--Plugins</option><option txt="foro" value="f83">| | |--Styles e Gradients</option><option txt="foro" value="f82">| | | |--Gradients</option><option txt="foro" value="f81">| | | |--Styles</option><option value="-1">| | | </option><option txt="foro" value="f147">| | |--Outros Recursos</option><option value="-1">| | </option><option txt="foro" value="f181">| |-- Arquivos .psd - Feitos para estudo</option><option value="-1">| </option><option txt="foro" value="c3">|--Design Talk & Arts</option><option txt="foro" value="f21">| |-- Galeria</option><option txt="foro" value="f152">| |-- Chat do design</option><option txt="foro" value="f25">| |-- Pedidos Gráficos</option><option txt="foro" value="f39">| | |--Regras Gerais</option><option txt="foro" value="f40">| | |--Avatares & Assinaturas</option><option txt="foro" value="f41">| | |--Logos e Banners</option><option txt="foro" value="f42">| | |--Botões, ícones & Ranks</option><option txt="foro" value="f43">| | |--Outros Pedidos</option><option value="-1">| | </option><option txt="foro" value="f26">| |-- Entregas Gráficas</option><option txt="foro" value="f44">| |--Entrega de Avatares e Assinaturas</option><option txt="foro" value="f45">| |--Entrega de Logos e Banners</option><option txt="foro" value="f46">| |--Entrega de Botões, ícones & Ranks</option><option txt="foro" value="f47">| |--Entrega de Outros Pedidos</option><option value="-1">| </option><option txt="foro" value="c4">|--Arena</option><option txt="foro" value="f20">| |-- Desafios</option><option txt="foro" value="f143">| | |--Faça seu desafio</option><option txt="foro" value="f142">| | |--Votações</option><option value="-1">| | </option><option txt="foro" value="f144">| |-- Sign of the week</option><option txt="foro" value="f146">| | |--SOTW's</option><option txt="foro" value="f145">| | |--Votações</option><option txt="foro" value="f163">| | |--Vencedores</option><option value="-1">| | </option><option txt="foro" value="f154">| |-- Job of the month</option><option txt="foro" value="f164">| | |--JOTM's</option><option txt="foro" value="f165">| | |--Votações</option><option txt="foro" value="f166">| | |--Vencedores</option><option value="-1">| | </option><option txt="foro" value="f158">| |-- Batalha de Grupos</option><option txt="foro" value="f160">| |--Crie seu grupo</option><option txt="foro" value="f159">| |--Guerras - Batalhas</option><option txt="foro" value="f162">| |--Covites para Batalhas</option><option value="-1">| </option><option txt="foro" value="c5">|--Reviewer & Presentes</option><option txt="foro" value="f153">| |-- Advice</option><option txt="foro" value="f24">| | |--Arquivo Advice</option><option value="-1">| | </option><option txt="foro" value="f141">| |-- Rate</option><option txt="foro" value="f161">| | |--Arquivo Rate</option><option value="-1">| | </option><option txt="foro" value="f2">| |-- Presentes</option><option value="-1">| </option><option txt="foro" value="c10">|--Eventos Visual Arts & Suporte</option><option txt="foro" value="f182">| |-- Campeonatos</option><option txt="foro" value="f110">| |-- Amigo Secreto</option><option txt="foro" value="f183">| |-- Como se faz isso?</option><option value="-1">| </option><option txt="foro" value="c7">|--Saindo do assunto</option><option txt="foro" value="f184"> |--Downloads</option><option txt="foro" value="f34"> | |--Fontes</option><option txt="foro" value="f90"> | |--Softwares</option><option txt="foro" value="f76"> | | |--Editores de Imagens</option><option txt="foro" value="f62"> | | |--Editores de Áudio</option><option txt="foro" value="f70"> | | |--Editores de Vídeo</option><option txt="foro" value="f77"> | | |--Anti-Vírus</option><option txt="foro" value="f78"> | | |--Navegadores</option><option txt="foro" value="f79"> | | |--Outros Softwares</option><option value="-1"> | | </option><option txt="foro" value="f38"> | |--Outros</option><option value="-1"> | </option><option txt="foro" value="f33"> |--Bate Papo</option><option txt="foro" value="f37"> | |--Piadas</option><option value="-1"> | </option><option txt="foro" value="f155"> |-- Informática</option><option txt="foro" value="f73"> | |--Suporte</option><option txt="foro" value="f75"> | |--Sistemas Operacionais</option><option txt="foro" value="f61"> | | |--Apple</option><option txt="foro" value="f63"> | | |--Windows</option><option txt="foro" value="f64"> | | |--Linux</option><option value="-1"> | | </option><option txt="foro" value="f74"> | |--Hardwares, Redes e Segurança</option><option txt="foro" value="f115"> | | |--Remoção de Malwares</option><option txt="foro" value="f114"> | | |--Dicas de Segurança</option><option txt="foro" value="f113"> | | |--Tutoriais e Dicas de Hardware</option><option txt="foro" value="f116"> | | |--Redes - Tutoriais Dicas e Dúvidas</option><option value="-1"> | | </option><option txt="foro" value="f71"> | |--Programção e Desenvolvimento</option><option txt="foro" value="f91"> | | |--HTML / XML / CSS</option><option txt="foro" value="f97"> | | | |--CSS</option><option txt="foro" value="f96"> | | | |--XML</option><option txt="foro" value="f95"> | | | |--HTML</option><option value="-1"> | | | </option><option txt="foro" value="f111"> | | |--PHP</option><option txt="foro" value="f86"> | | |--Visual Basic</option><option txt="foro" value="f85"> | | |--Delphi</option><option txt="foro" value="f112"> | | |--ASP</option><option txt="foro" value="f84"> | | |--Outras Linguagens</option><option value="-1"> | | </option><option txt="foro" value="f69"> | |--Notícias de Informática</option><option value="-1"> | </option><option txt="foro" value="f157"> |-- Multimídia</option><option txt="foro" value="f50"> | |--Vídeo e Músicas</option><option txt="foro" value="f32"> | | |--Vídeos</option><option txt="foro" value="f31"> | | |--Músicas</option><option value="-1"> | | </option><option txt="foro" value="f58"> | |--Filmes / Seriados</option><option txt="foro" value="f136"> | |--Seriados</option><option txt="foro" value="f129"> | | |--Heroes</option><option txt="foro" value="f130"> | | |--Lost</option><option txt="foro" value="f131"> | | |--Prinson Break</option><option txt="foro" value="f132"> | | |--Friends</option><option txt="foro" value="f133"> | | |--Smallville</option><option txt="foro" value="f134"> | | |--House M.D</option><option txt="foro" value="f135"> | | |--The O.C</option><option txt="foro" value="f137"> | | |--Outros Seriados.</option><option value="-1"> | | </option><option txt="foro" value="f138"> | |--Filmes</option><option txt="foro" value="f139"> | |--Nacionais</option><option txt="foro" value="f140"> | |--Internacionais</option><option value="-1"> | </option><option txt="foro" value="f156"> |-- Jogos em Geral</option><option txt="foro" value="f35"> |--Consolas</option><option txt="foro" value="f54"> | |--PlayStation</option><option txt="foro" value="f126"> | | |--Ps1</option><option txt="foro" value="f127"> | | |--Ps2</option><option txt="foro" value="f128"> | | |--Ps3</option><option value="-1"> | | </option><option txt="foro" value="f55"> | |--Nintendo DS</option><option txt="foro" value="f56"> | |--Wii</option><option txt="foro" value="f57"> | |--Xbox</option><option value="-1"> | </option><option txt="foro" value="f27"> |--Jogos</option><option txt="foro" value="f117"> |--- Gunbound</option><option txt="foro" value="f118"> |--- Habbo</option><option txt="foro" value="f119"> |--- Grand Chase</option><option txt="foro" value="f120"> |--- Priston Tale</option><option txt="foro" value="f121"> |--- Mu online</option><option txt="foro" value="f122"> |--- Counter Strike</option><option txt="foro" value="f123"> |--- Gta</option><option txt="foro" value="f124"> |--- NoLimits Coaster</option><option txt="foro" value="f125"> |--- Outros Games</option></select><input type="hidden" name="tid" value="359c21c3adbdc920e9800998ecf8427e" /> <input class="button2" type="submit" value="Ir" /></fieldset></form><div class="h3">Permissões neste sub-fórum</div>Não podes responder a tópicos<br /><div class="8d3da8" style="overflow:visible"><span class="corners-top"><span></span></span><div class="inner"><div align="center"> <div style="text-align:center; display:inline-block; margin:0 auto;"> <table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border:none;"> <tbody> <tr> <td valign="top" style="padding:32px 32px; "> <script type="text/javascript">//<![CDATA[ function AT_adFillSlot(){document.write('<scr' + 'ipt language="JavaScript" type="text/javascript">rp_account="11662";rp_site="36492";rp_zonesize="151252-15";rp_adtype="js";rp_smartfile="[SMART FILE URL]";</scr' + 'ipt><scr' + 'ipt type="text/javascript" src="https://ads.rubiconproject.com/ad/11662.js"></scr' + 'ipt>');}//]]> </script> <div id="crt-8x0c97dz1" style="width:300px;height:250px;margin:auto;"></div> <script type="text/javascript"> CriteoAdblock("crt-8x0c97dz1", 1356533,'criteo_13333601'); </script>  <div id="criteo_13333601"> <script type="text/javascript"> Criteo.events.push(function() { Criteo.Passback.RenderAd('criteo_13333601', function(){ var width = "300"; var height = "250"; var slotid = "criteo_13333601"; var div = document.getElementById(slotid); if (div) { var ifr = document.createElement('iframe'); ifr.setAttribute("id", slotid + "_iframe"), ifr.setAttribute("frameborder", "0"), ifr.setAttribute("allowtransparency", "true"), ifr.setAttribute("hspace", "0"), ifr.setAttribute("marginwidth", "0"), ifr.setAttribute("marginheight", "0"), ifr.setAttribute("scrolling", "no"), ifr.setAttribute("vspace", "0"), ifr.setAttribute("width", "300"), ifr.setAttribute("height", "250"); div.appendChild(ifr); var ifrd = ifr.contentWindow.document; var htmlcode ='<scr' + 'ipt> window._taboola = window._taboola || [];_taboola.push({article:"auto"});!function (e, f, u, i) {if (!document.getElementById(i)){e.async = 1;e.src = u;e.id = i;f.parentNode.insertBefore(e, f);}}(document.createElement("script"),document.getElementsByTagName("script")[0],"\/\/cdn.taboola.com/libtrc/forumotion-pt/loader.js","tb_loader_script");</scr' + 'ipt><div id="taboola-300x250-thumbnails-7" style="background-color:#fffd"></div><scr' + 'ipt type="text/javascript">window._taboola = window._taboola || [];_taboola.push({mode: "thumbnails-300x250",container: "taboola-300x250-thumbnails-7",placement: "300x250 Thumbnails-7",target_type: "mix"});</scr' + 'ipt> <scr' + 'ipt type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</scr' + 'ipt>'; ifrd.open(); ifrd.write(htmlcode); ifrd.close(); } }); }); </script></div> </td> <td valign="top" style="padding:32px 32px; "> <script type="text/javascript">//<![CDATA[ function AT_adFillSlot(){document.write('<scr' + 'ipt language="JavaScript" type="text/javascript">rp_account="11662";rp_site="36492";rp_zonesize="151252-15";rp_adtype="js";rp_smartfile="[SMART FILE URL]";</scr' + 'ipt><scr' + 'ipt type="text/javascript" src="https://ads.rubiconproject.com/ad/11662.js"></scr' + 'ipt>');}//]]> </script> <div id="crt-8x0c97dz" style="width:300px;height:250px;margin:auto;"></div> <script type="text/javascript"> CriteoAdblock("crt-8x0c97dz", 1356533,'criteo_1333360'); </script>  <div id="criteo_1333360"> <script type="text/javascript"> Criteo.events.push(function() { Criteo.Passback.RenderAd('criteo_1333360', function(){ var width = "300"; var height = "250"; var slotid = "criteo_1333360"; var div = document.getElementById(slotid); if (div) { var ifr = document.createElement('iframe'); ifr.setAttribute("id", slotid + "_iframe"), ifr.setAttribute("frameborder", "0"), ifr.setAttribute("allowtransparency", "true"), ifr.setAttribute("hspace", "0"), ifr.setAttribute("marginwidth", "0"), ifr.setAttribute("marginheight", "0"), ifr.setAttribute("scrolling", "no"), ifr.setAttribute("vspace", "0"), ifr.setAttribute("width", "300"), ifr.setAttribute("height", "250"); div.appendChild(ifr); var ifrd = ifr.contentWindow.document; var htmlcode ='<scr' + 'ipt> window._taboola = window._taboola || [];_taboola.push({article:"auto"});!function (e, f, u, i) {if (!document.getElementById(i)){e.async = 1;e.src = u;e.id = i;f.parentNode.insertBefore(e, f);}}(document.createElement("script"),document.getElementsByTagName("script")[0],"\/\/cdn.taboola.com/libtrc/forumotion-pt/loader.js","tb_loader_script");</scr' + 'ipt><div id="taboola-300x250-thumbnails-3" style="background-color:#fffd"></div><scr' + 'ipt type="text/javascript">window._taboola = window._taboola || [];_taboola.push({mode: "thumbnails-300x250",container: "taboola-300x250-thumbnails-3",placement: "300x250 Thumbnails-3",target_type: "mix"});</scr' + 'ipt> <scr' + 'ipt type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</scr' + 'ipt>'; ifrd.open(); ifrd.write(htmlcode); ifrd.close(); } }); }); </script></div> </td> </tr> </tbody> </table> </div></div></div><span class="corners-bottom"><span></span></span></div><div style="height:3px"></div></div></div></div></div><div id="emptyidright"></div></div></div></div></div><div id="page-footer"><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist clearfix"><li class="footer-home"><a class="icon-home" href="/" accesskey="h">Início</a></li><li class="rightside"><strong><a href="https://www.forumeiros.com/" target="_blank">Forumeiros.com</a></strong> | <span class="gensmall">©</span><a href="https://www.forumeiros.com/phpbb" target="_blank">phpBB</a> | <a name="bottom" href="https://ajuda.forumeiros.com/" target="_blank">Fórum gratuito de ajuda</a> | <a href="/abuse?page=%2Ft2077-html-tutorial-html-desde-o-inicio&report=1" rel="nofollow">Denunciar um abuso</a> | <strong><a href="https://www.forumeiros.com" target="_blank">Fórum grátis</a></strong></li></ul><span class="corners-bottom"><span></span></span></div></div><p class="copyright"><strong></strong></p></div></div></div></div></div><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'https://visual-arts.forumeiros.net/topicit/index.php/connect','data-version' : '1','data-lang' : 'pt'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: 'e2aa2ae88c2bcc3c33577d636d209bf8' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script>  <div id="criteo_sticky"> <script type="text/javascript"> function CreateStickyFooterContainer(e) { var t = document.getElementById(e); t.style.position = "fixed", t.style.zIndex = "2147483646", t.style.bottom = "0", t.style.left = "0", t.style.padding = "0", t.style.borderColor = "rgb(196, 196, 196)", t.style.width = "100%", t.style.backgroundColor = "rgba(245, 245, 245, 0.54902)", t.style.borderStyle = "solid", t.style.borderWidth = "1px"; var o = document.createElement("a"); t.appendChild(o), o.style.backgroundColor = "rgb(221, 221, 221)", o.style.backgroundImage = "url('//static.criteo.net/images/criteo/publishertag/close.png')", o.style.backgroundRepeat = "no-repeat", o.style.backgroundPosition = "center", o.style.display = "block", o.style.position = "absolute", o.style.left = "0", o.style.top = "-24px", o.style.width = "23px", o.style.height = "24px", o.style.borderBottomColor = "#6d6c71", o.style.cursor = "pointer", o.onclick = function() { t.style.display = "none" }; var l = document.createElement("div"); l.id = "cto_sticky", l.style.margin = "0 auto", l.style.display = "table"; t.appendChild(l); return l.id }; Criteo.events.push(function() { if(!isMobile){ Criteo.Passback.RenderAd(CreateStickyFooterContainer("criteo_sticky"), function(){ var slotid = "criteo_sticky"; var div = document.getElementById(slotid); div.removeAttribute("style"); }); } else{ var slotid = "criteo_sticky"; var div = document.getElementById(slotid); div.style.display = "none"; } }); </script> </div> </body></html>