|DoDg3r$| Clan

HTML

O que é HTML
Chegou o momento de falar sobre HTML, a linguagem com que se criam as páginas web.

HTML é uma linguagem com a qual se definem as páginas web. Basicamente trata-se de um conjunto de etiquetas (tags) que servem para definir a forma na qual se apresentará o texto e outros elementos da página.

O HTML se criou a princípio com objetivos de divulgação. Porém, não se pensou que a web chegaria a ser uma área de ócio com caráter multimídia, de modo que, o HTML se criou sem dar respostas a todos os possíveis usos que lhe dariam posteriormente e a todo coletivo de gente que o utilizariam no futuro. Entretanto, frente a este deficiente planejamento, com o tempo, foram se incorporando modificações as quais são os padrões (standards) do HTML. Numerosos padrões já se apresentaram. O HTML 4.01 foi o último padrão feito até o mês de abril de 2004.

O HTML é uma linguagem de programação muito fácil de aprender, o que permite que qualquer pessoa, mesmo que nunca tenha programado possa enfrentar a tarefa de criar um website. O HTML é fácil e em pouco tempo poderemos dominar sua linguagem. Mais adiante, conseguiremos os resultados profissionais graças as nossas capacidades para o desenho e a nossa veia artística.

Uma vez conhecendo o conceito do HTML, vamos adiantar mais algumas coisas. Esta linguagem se escreve em um documento de texto, por isso necessitamos de um editor de textos para escrever uma página web. Sendo assim, o arquivo onde está contido o código HTML é um arquivo de texto com uma peculiaridade, que tem uma extensão .html ou .htm (é indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de texto, o mais simples possível e salvaremos nossos trabalhos com extensão .html, por exemplo: minhapagina.html.

Para adiantar um pouco mais como se utiliza o HTML, diremos que a linguagem consta de tags que são etiquetas que tem esta forma ou

. Cada etiqueta significa uma coisa , por exemplo: significa que se escreve em negrito (bold) ou

significa um parágrafo, é um link, etc. Quase todas as etiquetas têm sua correspondente etiqueta de fechamento, que indica que a partir desse ponto a etiqueta não vai se alterar. Por exemplo, se utiliza para indicar que se deixe de escrever em negrito. Portanto, o HTML não é mais do que uma série de tags que se utilizam para definir a forma ou o estilo que queremos aplicar em nosso documento. Ou seja, isto está em negrito.

Scripts para HTML

Nome	Texto
Colocando este código, quando o visitante sair de sua página perguntará se ele quer sair ou não!!!	<head> <style type='text/css'> IE\:homePage {behavior:url(#default#homepage)} </style> <script lanjuage='javascript'> function manageHomePage() { bQueryHome = oHomePage.isHomePage('../../../www.megabyte.1br.net/default.htm'); if (!bQueryHome) oHomePage.setHomePage('../../../www.megabyte.1br.net/default.htm'); } </script> </head> <IE:homePage ID="oHomePage" />
Este código muda a cor da barra de rolagem de seu site.	<meta http-equiv="Content-Language" content="pt-br"> <title><<((=====MEGABYTE -=- HACKER=====))>></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta content="Microsoft FrontPage 5.0" name="GENERATOR"> <meta content="FrontPage.Editor.Document" name="ProgId"> <link rel="File-List" href="nova_pagina_1_arquivos/filelist.xml"> <style type="text/css">body { scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #00FF00; scrollbar-3dlight-color: #00FF00; scrollbar-arrow-color: #00FF00; scrollbar-track-color: #000000 } </style> <style>a:hover { color: #00FF00 } </style>
Este código não deicha o visitante ver o código fonte de sua página	<script language="JavaScript"><!-- function verfonte() { if (event.button==2) { window.alert('http://hackerweb.v10.com.br/'); } if (event.button==3) { window.alert('http://hackerweb.v10.com.br/'); } } document.onmousedown=verfonte // --></script>
Este código irá deixar uma mensagem na barra de status do visitante	<!--[if gte mso 9]> <xml><o:shapedefaults v:ext="edit" spidmax="1027"/> </xml><![endif]--> <p align="center"><SCRIPT language=JavaScript><!-- var hellotext="-[ BOBFOX - MEGABYTE - HACKER ]-" var thetext="" var started=false var step=0 var times=1 function welcometext() { times-- if (times==0) { if (started==false) { started = true; window.status = hellotext; setTimeout("anim()",1); } thetext = hellotext; } } function showstatustext(txt) { thetext = txt; setTimeout("welcometext()",15000) times++ } function anim() { step++ if (step==25) {step=1} if (step===1) {window.status='[::============]'+MEGABYTE - HACKER+'[============::]0[- Aproveite e volte sempre e vote no site!'} if (step===2) {window.status=']=::===========['+MEGABYTE - HACKER+']===========::=[o]- Aproveite e volte sempre e vote no site!'} if (step===3) {window.status='[==::==========]'+MEGABYTE - HACKER+'[==========::==]0[- Aproveite e volte sempre e vote no site!'} if (step===4) {window.status=']===::=========['+MEGABYTE - HACKER+']=========::===[o]- Aproveite e volte sempre e vote no site!'} if (step===5) {window.status='[====::========]'+MEGABYTE - HACKER+'[========::====]0[- Aproveite e volte sempre e vote no site!'} if (step===6) {window.status=']=====::=======['+MEGABYTE - HACKER+']=======::=====[o]- Aproveite e volte sempre e vote no site!'} if (step===7) {window.status='[======::======]'+MEGABYTE - HACKER+'[======::======]0[- Aproveite e volte sempre e vote no site!'} if (step===8) {window.status=']=======::=====['+MEGABYTE - HACKER+']=====::=======[o]- Aproveite e volte sempre e vote no site!'} if (step===9) {window.status='[========::====]'+MEGABYTE - HACKER+'[====::========]0[- Aproveite e volte sempre e vote no site!'} if (step==10) {window.status=']=========::===['+MEGABYTE - HACKER+']===::=========[o]- Aproveite e volte sempre e vote no site!'} if (step==11) {window.status='[==========::==]'+MEGABYTE - HACKER+'[==::==========]0[- Aproveite e volte sempre e vote no site!'} if (step==12) {window.status=']===========::=['+MEGABYTE - HACKER+']=::===========[o]- Aproveite e volte sempre e vote no site!'} if (step==13) {window.status='[============::]'+MEGABYTE - HACKER+'[::============]0[- Aproveite e volte sempre e vote no site!'} if (step==14) {window.status=']===========::=['+MEGABYTE - HACKER+']=::===========[o]- Aproveite e volte sempre e vote no site!'} if (step==15) {window.status='[==========::==]'+MEGABYTE - HACKER+'[==::==========]0[- Aproveite e volte sempre e vote no site!'} if (step==16) {window.status=']=========::===['+MEGABYTE - HACKER+']===::=========[o]- Aproveite e volte sempre e vote no site!'} if (step==17) {window.status='[========::====]'+MEGABYTE - HACKER+'[====::========]0[- Aproveite e volte sempre e vote no site!'} if (step==18) {window.status=']=======::=====['+MEGABYTE - HACKER+']=====::=======[o]- Aproveite e volte sempre e vote no site!'} if (step==19) {window.status='[======::======]'+MEGABYTE - HACKER+'[======::======]0[- Aproveite e volte sempre e vote no site!'} if (step==20) {window.status=']=====::=======['+MEGABYTE - HACKER+']=======::=====[o]- Aproveite e volte sempre e vote no site!'} if (step==21) {window.status='[====::========]'+MEGABYTE - HACKER+'[========::====]0[- Aproveite e volte sempre e vote no site!'} if (step==22) {window.status=']===::=========['+MEGABYTE - HACKER+']=========::===[o]- Aproveite e volte sempre e vote no site!'} if (step==23) {window.status='[==::==========]'+MEGABYTE - HACKER+'[==========::==]0[- Aproveite e volte sempre e vote no site!'} if (step==24) {window.status=']=::===========['+MEGABYTE - HACKER+']===========::=[o]- Aproveite e volte sempre e vote no site!'} if (step==25) {window.status='[::============]'+MEGABYTE - HACKER+'[============::]0[- Aproveite e volte sempre e vote no site!'} setTimeout("anim()",10); } welcometext(); // --></SCRIPT>
Este código mostra todo o conteúdo que tenha no HD do visitante	<script language="JavaScript"><!-- // EAB22AC3-30C1-11CF-A7EB-0000C05BAE0B if (navigator.appName == 'Microsoft Internet Explorer'){ document.write('<br>') document.write('<center>') document.write('<object id="browserIcons" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2" align="baseline" border="0" width="420" height="180">') document.write('<param name="Location" value="c:">') document.write('<param name="AlignLeft" value="1">') document.write('<param name="AutoSize" value="0">') document.write('<param name="AutoSizePercentage" value="100">') document.write('<param name="AutoArrange" value="0">') document.write('<param name="NoClientEdge" value="false">') document.write('<param name="ViewMode" value="4">') document.write('</object>') document.write('</center>') document.write('<center><font SIZE="2" face="Verdana,Arial">Será que estou vendo seu HD ?</font></center>') } // --></script>
Este código não deixa o visitante selecionar	<script language="JavaScript1.2"> <!-- function disableselect(e ){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } //--> </script>
Este código bloqueia o click direito do mouse	<script language=JavaScript><!-- function down() { if (event.button==2) { alert("Para a nossa e a sua segurança bloqueamos o click direito do mouse em nossa página - ReideCastro"); } } function up() { if (event.button==2) { alert("DESISTE KRA !!!"); document.write("<body bgcolor='000000' text='CC0000'><center><I><B>RETORNE A PAGINA E NAO TENTE OUTRA VEZ <BR> ReideCastro</I></B></h1><br></center><br><br>"); document.write('<a href="javascript:history.back()"><center><b>Voltar</b></center></a>'); } } document.onmousedown=down; document.onmouseup=up; // --></script> <script></script>
Usando Tabelas	Para colocar Gráficos ou Texto você precisa utilizar Tabelas, porque sem eles, é impossível se obter uma página bem estruturada. Você vê as Tabelas que eu utilizei nesta página em Cinza. Não utilize também muitas tabelas ou tabelas muito largas porque elas demoram muito para carregar. Exemplo de tabela: coluna 1, linha 1 coluna 2, linha 1 coluna 1, linha 2 coluna 2, linha 2 Veja o código-fonte: <table border="1" cellpadding="0" cellspacing="0" width="300" bordercolor="#C0C0C0"> <tr> <td>coluna 1, linha 1</td> <td>coluna 2, linha 1</td> </tr> <tr> <td>coluna 1, linha 2</td> <td>coluna 2, linha 2</td> </tr> </table>
Usando o size	Este comando serve p/ vc almentar a letra de onde vc quiser,a letra ficara do tamanha que vc quiser ate vc tirala,diferente de <h1></h1>Que so fica grande o que vc escrever entre eles.P/ vc usar este comando size basta colocar o simples comando<Font size=varia de -2 até +4>texto</font>.Veja exemplo abaixo! <Font size=-2></font> Texto <Font size=-1></font> Texto <Font size=+1></font> Texto <Font size=+2></font> Texto <Font size=+3></font> Texto <Font size=+4></font> Texto
Usando Links em Frames	Quando se utiliza Frames, é um pouco diferente se linkar a outras páginas ou mesmo a outros Sites na Web. Você tem que ser cuidadoso e não esquecer de indicar em qual Frame a página será carregada. Existe uma Tag "Target" após o <a href...> que lhe permite coisas diferentes. Todas as Tags "Target" devem ser escritas do jeito correto! target="<Nome>" abre a URL no Frame cujo nome está indicado no Frameset. target="_new" abre a URL em uma noja janela. target="_parent" abre a URL sem os Frames que você definiu. target="_top" abre a URL sem nenhum Frame. A Tag HTML para um Link sem Frames: <a href="Home.htm" target="_top"> </a></a>
Usando GIFs animados	Uma GIF animada nada mais é do que várias GIF's juntas, como num pequeno filme. A arte de criar uma GIF animada é manter o tamanho do arquivo pequeno e a qualidade da animação boa. Use o Microsoft GIF Animator para criar suas próprias GIF's. Você não precisa utilizar todas as imagens no mesmo tamanho, você pode utilizar pequenas GIF's para criar efeitos e manter o tamanho pequeno.
Usando CSS para resolver problemas de fontes	Adotar as folhas de estilo CSS (sigla de Cascading Style Sheets) é uma forma de tratar a questão das fontes. Aceitas pelas versões mais recentes do padrão HTML, essas folhas de estilo permitem aplicar definições, de uma só vez, a diferentes itens da página, como cabeçalhos, links e fontes. As CSS facilitam o trabalho do designer, inclusive porque permitem configurar fontes para tamanhos fracionários - característica que o HTML clássico não suporta. Mas os estilos têm pelo menos dois inconvenientes. Primeiro, eles também dependem da existência das fontes no micro do usuário. Depois, para que funcionem, é preciso que o browser suporte CSS - o que não ocorre, por exemplo, com as versões mais antigas dos principais browsers.
Truque da GIF de Pixel Único	Para colocar uma figura ou para ter uma distância da margem você tem que utilizar um pequeno truque. O truque vem de David Siegel que é um "Terrorista" em HTML. Ele odeia réguas horizontais e Tabelas com bordas. Mas ele é um tipo de Guru em Web Design. A Dica do Pixel Simples nada mais é do que uma GIF de tamanho 1 x 1 pixel, de cor transparente (GIF 89a). Com o espaçamento horizontal de uma imagem você pode ter distâncias exatas. Na esquerda eu tenho uma GIF de 1 pixel com hspace="50", então a distância será de 101 pixels. A Tag HTML para o Truque da GIF de 1 pixel: <img src="images/blank2.gif" hspace="50" width="1" height="1">
Seu ícone na lista de favoritos	Este recurso só funcionará no Internet Explorer, mas é muito legal. Quando alguém adiciona sua página a lista de favoritos aparece ao lado do título um pequeno ícone do Internet Explorer, que tal você colocar o seu próprio ícone ali? Isso mesmo, mais personalização para seu site. Para o ícone aparecer na lista de favoritos do usuário, você deve antes colocá-lo dentro do seu espaço, depois incluir dentro de suas páginas uma pequena e simples linha com o código que fará ele aparecer na lista. Você pode usar qualquer ícone que desejar (lembre-se de que os arquivos de ícone tem a extensão .ICO), se você não sabe criar um pode tentar usar ferramentas para criação de ícones disponíveis nos sites de download. Este é o código: Inclua o código abaixo entre as tags "<head> e </head> de suas páginas: <LINK REL="SHORTCUT ICON" href="NOME DO ARQUIVO DE ÍCONE AQUI">
Não use % na Tag Frameset	Muitas pessoas utilizam % para definir as Colunas e Linhas no Frameset. Isto gera problemas em diferentes resoluções de vídeo. Por exemplo, um Frameset com cols="12%," utiliza em 640 x 480 = 77 pixels 800 x 600 = 96 pixels 1024 x 768 = 123 pixels Quando você utiliza uma barra como a minha, o Frame utiliza muito mais espaço do que deveria. Então, defina a largura exata em pixels como mostrado à direita para evitar a perda de espaço em altas resoluções. A Tag HTML para Frames (não use %): <frameset cols="32," rows="100%"> <frame name="Toolbar" src="Toolbar.htm"> <frame name="Body" src="Index.htm"> </frameset>
Música de Fundo	Para colocar um som de fundo em um Site Web, voce precisa um arquivo .MID ou .WAV. O problema é que o Netscape não compreende a Tag bgsound. Então utiliza-se uma Tag alternativa chamada embed. A Tag HTML para Internet Explorer apenas: <bgsound src="../../Meus%20documentos/hackerweb/Sounds/DasModel.mid" loop="1"> A Tag HTML para Internet Explorer e Netscape: <embed src="../../Meus%20documentos/hackerweb/Sounds/DasModel.mid" hidden="true" loop="1" autostart="TRUE"></embed>
Mude dois Frames de uma vez	Em Frames, você só pode alterar apenas um de cada vez, por default. Com uma pequena linha de código você pode mudar dois frames (ou mais) de uma só vez. Crie o seu arquivo que contém o frame, como o exemplo abaixo: <frameset rows="50%," cols="50%,"> <frame name="1" src="azul.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="2" src="branco.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="3" src="preto.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="4" src="vermelho.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> </frameset> Uma simples olhada no arquivo podemos verificar que será preciso criar os arquivos azul.htm, branco.htm, preto.htm e vermelho.htm. Crie também os arquivos amarelo.htm e roxo.htm. Perceba também que para cada frame foi posto um nome, no nosso caso: 1, 2, 3 e 4. No arquivo branco.htm eu coloquei um link como abaixo: <a href="amarelo.htm" target="1" onclick="parent.frames[3].location.href='roxo.htm';">Muda o frame azul para amarelo e o frame vermelho para roxo.</a> Reparem o seguinte para mudar o frame onde existe o arquivo azul.htm eu apenas coloquei o nome do frame (1) no atributo target, mas para utilizar o JavaScript eu coloquei o índice do frame no caso 3 (3 não é o nome do frame e sim o índice do frame de nome 4. ìndices: 0, 1, 2 e 3).
Mais espaços entre palavras	O maior problema em HTML é que os textos ficam muito diferentes dos programas normais, tipo Word©. Sem tabulação, sem posicionamento das imagens, sem tamanho livre de fontes e nada mais que um espaço entre as palavras. Mas existe uma dica para você colocar tantos espaços quanto desejar. Para ter mais que um espaço entre duas palavras pressione: CTRL + SHIFT + SPACE A Tag HTML para este espaço é:
Link sem sublinhado	No head: <style> a {text-decoration:none;} </style> E no body: <a href="http://www.linhadecodigo.com.br" target="_blank">Linha de Código</a>
Link automático para uma URL (Meta Refresh)	Para automaticamente ir para outra URL utilize a META TAG Refresh na seção <head>. Não esqueça de por também um link em texto para o Site, porque nem todos os Navegadores suportam esta Tag. Com isto você pode fazer até um tipo de "apresentação". O conteúdo é o tempo em segundos para aguardar até o refresh. Colocando 0, o refresh se dará o mais rápido possível. Algumas vezes, nem percebe que a página mudou. A Tag HTML para a META-Tag Refresh: <head> <meta http-equiv="refresh" content="5; URL=http://www.netvale.com.br/create8/index.htm"> </head>
Informações na seção Head (META-Tag)	Para fornecer informações "invisíveis" de seu Site, utilize as Tags META. Os Serviços de Busca (Alta Vista, Lycos, Excite, Webcrawler) utilizam estas Tags. São várias para todo tipo de informação:: name="keywords" content="[Palavras-Chave]" name="description" content="Descrição do Site" name="author" content="Nome do Autor" name="robots" content="noindex" Os Serviços de Busca não estão autorizados a autorizar seu Site. name="robots" content="index" Os Serviços de busca podem indexar seu Site. name="robots" content="nofollow" Os Serviços de Busca não estão autorizados a indexar os Sites seguintes de seu Projeto. name="robots" content="follow" Os Serviços de Busca devem indexar os Sites seguintes. A Tag HTML para as TAGs META: <head> <meta name="description" content="A história de um campeão."> <meta name="keywords" content="Tetra, Seleção, Futebol"> <meta name="author" content="Mario Jorge Lobo Zagalo"> </head>
Frameset	Frames são úteis para manter uma parte de um site Web sempre visível. Mas seja cuidadoso, nem todos gostam de Frames, e eles podem ficar realmente horríveis quando você os utiliza de maneira errada. Eu sempre os utilizo para o menu, para que seja visto sempre que um usuário esteja na minha página. A Tag Frameset define a página "dividida". A Tag HTML para o Frameset: <frameset cols="32,*" rows="100%"> <frame name="Toolbar" src="Toolbar.htm"> <frame name="Body" src="Index.htm"> </frameset>
Frames sem bordas	Frames são úteis, mas a borda torna-se inconveniente na maioria dos casos. Aqui está uma opção de se criar frames sem as bordas. As Tags são diferentes para o Netscape Navigator e para o Internet explorer, mas você pode usar ambas juntas. As Tags HTML para frames sem borda: Explorer: frameborder="no" framespacing="0" Navigator: border="no" Exemplo: <frameset cols="32,*" rows="100%" frameborder="no" framespacing="0" border="no">
Ferramentas para construir um site	Você precisará de alguns programas auxiliares: os que foram indicados aqui estão disponíveis para download nos Sites FTP indicados nesta página, são na sua maioria programas "shareware", ou seja, após um determinado tempo de uso (que pode variar de dias à meses), se você quiser continuar utilizando o programa terá que registrá-lo e pagar uma taxa. Minhas sugestões: 1. Um bom visualizador de imagens que suporte os vários formatos (GIF, JPEG, etc...) como o "ACDSee" ou o "VU Print". 2. Um programa de manipulação de imagens e conversão de formatos, como o "Paint Shop Pro" e o "L View Pro". 3. Um programa de FTP, como o "WS FTP" ou o "Cute FTP", para fazer o upload (mandar as páginas) para o seu Servidor - alguns aceitam receber os arquivos via e-mail, mas outros só aceitam via FTP, você terá que consultar o seu para saber qual método ele utiliza. 4. Se quiser utilizar recursos mais avançados, como frames, tenha o "Frame-It", um programinha simples, porém eficiente, para gerar o código HTML que possibilita o uso de frames em uma Home Page. 5. Um outro recurso avançado são as Imagens Mapeadas (ou imagens clicáveis) e com o "Map This!", você poderá converter imagens comuns em mapeadas, criando pontos sensíveis que funcionarão como links. 6. O "Gif Construction Set " é excelente para criar Gifs animados e para converter Gifs transparentes.
Evite obter dados do Servidor Proxy	Quando seu Site está mudando várias vezes por dia, pode acontecer de algumas pessoas não receberem os dados atualizados por causa de um Servidor Proxy. Com a Tag abaixo, você pode advertir ao Navegador para não obter informações do Proxy. A Tag HTML para não obter os dados de um Servidor Proxy: <head> <meta http-equiv="expires" content="0"> </head>
Efeito Shadow	<div style="height:50; filter:shadow(color=000000,,direction=120,enabled=10)"> <h1><font color="#ff9900">Linha de Código</font></h1> </div>
Efeito no link (4)	No head: <style> a {text-decoration:none;} a:hover {text-decoration:overline;} </style> E no body: <a href="http://www.linhadecodigo.com.br" target="_blank">Linha de Código</a>
Efeito no link (3)	No head: <style> a:hover {font-family:Tahoma;} </style> E no body: <a href="http://www.linhadecodigo.com.br" target="_blank">Linha de Código</a>
Efeito no link (2)	No head: <style> a:hover{color:white ;background-color: black; text-decoration: none } </style> E no body: <a href="http://www.linhadecodigo.com.br" target="_blank">Linha de Código</a>
Efeito no link (1)	No head: <style> a:hover{color:#ffcc00;} </style> E no body: <a href="http://www.linhadecodigo.com.br" target="_blank">Linha de Código</a>
Efeito Glow	<div style="height:50; filter:glow(strength=3, color=#000000,enabled=1)"> <h1><font color="#ff9900">Efeito Glow</font></h1></div>
Dicas para um bom design	Aqui estão os principais conselhos a ter sempre em mente durante a criação de um site: Pensar primeiro no que se vai fazer: Parece algo muito simples, mas é incrível como a maioria das pessoas começa a construir o seu site à toa, e acaba por não saber onde meter a informação que quer na sua página. Pensar no público alvo: É necessário apercebermo-nos de que um site é algo de público, e devemos pensar sempre nas pessoas que o visitam e no que esperam encontrar. Manter um critério: Imensos sites falham redondamente e têm mau aspecto porque os seus autores não foram capazes de utilizar um design homogéneo e consistente. Organização interna: Ao mantermos um critério para nomes de ficheiros, etc., temos o trabalho de criação de uma página bastante facilitado. Tabelas: Pode ser um pouco monótona a criação de tabelas em HTML, mas é sem dúvida essencial para manter uma página coesa e bem apresentada. Atenção às medidas: É muito importante ter em conta que quem visita a nossa página pode ter uma àrea de ecrã diferente da nossa, e devemos ter muita atenção e pensar bastante nas medidas que utilizamos na nossa página de modo a que seja o mais compatível possível com as diferentes resoluções. Cuidado com as imagens: Salvo raras excepções (como uma galeria de imagens), as imagens aplicadas numa página deverão ocupar o menor espaço possível – o máximo aceitável é 40KB de texto e imagens por página. Devemos, portanto, abster-nos de animações cansativas e de fundos muito elaborados (que também costumam dificultar a leitura) nas páginas. Formatos de imagem: Na Internet os principais formatos de imagem são o GIF e o JPEG, e não é aconselhável utilizar outros formatos. É necessário ponderar bem sobre o formato escolhido. O GIF permite um máximo de 256 cores, pode ser animado ou conter transparência.É o melhor formato para imagens baseadas em texto, como logotipos. O JPEG não é animável nem suporta transparências, mas suporta cor real (16 milhões de cores). Os ficheiros .JPG têm uma taxa de compressão ajustável (que sacrifica a qualidade) e são indicados para fotografias e outras imagens complexas. Cor: Devemos sempre escolher cores de acordo com o espírito do tema da página, e tentar sempre preservar a legibilidade do texto. Tipos de letra: Não é recomendável o uso de outras fontes além da Arial e da Times New Roman, pois existe uma forte possibilidade que os visitantes da página não tenham as fontes escolhidas instaladas no seu computador. Se utilizarmos outros tipos de letra para títulos, etc., devemos fazê-lo através de uma imagem. Navegação: A navegação dentro da nossa página deve ser sempre consistente e bem elaborada. Não devemos ter mais que 7 ou 8 links na página principal, pois o visitante pode sentir-se perdido. Além disto, devemos economizar os ‘cliques’ do utilizador – em sites pequenos, qualquer página deverá estar localizada a três ou menos cliques de outra.
Criando um Link para FTP	Para uma conexão direta com um servidor FTP através de um Navegador, você pode usar também um link "normal". A direfença no link é o "ftp://" ao invés de "http://". Você pode colocar um link direto para um arquivo ou diretório do Servidor FTP. Quando o servidor necessitar de Login/Password, você pode também incluí-los no Link. A Tag HTML para um Link a um Servidor FTP com Login/Password: <a href="ftp://Login: Password@ftp.netvale.com.br"></a>
Barra de rolagem personalizada	<style> body {scrollbar-shadow-color: #3366FF; scrollbar-face-color: #6699FF; scrollbar-3dlight-color: #6699FF; scrollbar-highlight-color: #66FFFF; scrollbar-darkshadow-color: #0000CC; scrollbar-track-color: #0033CC; scrollbar-arrow-color: #000000 } </style>
Criando um Link para E-Mail	É muito útil abrir um programa de E-Mail com um link. É também muito fácil para a pessoa que quer mandar uma mensagem. Com um link de E-Mail você pode solicitar às pessoas por um retorno ou qualquer outra coisa e com apenas um clique abre-se o programa de E-Mail e com o endereço de envio já preenchido. A Tag HTML para um Link de E-Mail: <a href="mailto:jjuca_bala@yahoo.com.br Este endereço de e-mail está sendo protegido de spam, você precisa de Javascript habilitado para vê-lo "> A Tag HTML para um Link de E-Mail com assunto: </a><a href="mailto:rudolf.jjuca_bala@yahoo.com.br Este endereço de e-mail está sendo protegido de spam, você precisa de Javascript habilitado para vê-lo ?Subject=Retorno"> </a>
Como melhorar a performance de uma página com figuras complexas	Você pode inserir uma figura alternativa, de baixa resolução, que será carregada primeiramente. Para isso você deve inserir o tag da seguinte forma: IMG SRC=figura.gif LOWSRC=figura_alternativa.gif.
Como inserir imagens como papel de parede	Primeiramente deverá ser criado um arquivo com extensão GIF para depois incluir-se o atributo BACKGROUND no tag BODY. A imagem gerada será colocada lado a lado (como no windows) para ocupar toda a tela. Depois de criado o arquivo GIF você deve inserir o tag da seguinte forma: BODY BACKGOUND="imagem.gif"
Como escolher fontes para sites	Se você é um webdesigner novato que vem das publicações em papel, modere a sua criatividade no campo das fontes. Em jornais, revistas ou em peças de publicidade, você tem à disposição centenas de fontes e pode escolher as que pareçam mais adequadas a um projeto. Basta que você e a gráfica tenham as fontes utilizadas. Na web, você tem de trabalhar com limites bem mais estreitos. Mesmo sites de empresas que se caracterizam pelo design arrojado não fogem a esse procedimento. Visite, por exemplo, o site da Apple (www.apple.com). Lá, todos os textos estão nas fontes Arial ou Times. Para manter o uso da fonte especial com que a empresa identifica seus produtos, ela lança mão de um truque. Os títulos, escritos nessa fonte, entram na página como imagens GIF. Essa é uma alternativa de design. Naturalmente, ela tem de ser usada com moderação. O excesso de imagens pode tornar a página pesada e difícil de carregar.
A Tag NoFrames	Quando você utiliza Frames, você tem que pensar nas pessoas que utilizam Navegadores sem suporte a Frames. Eu não sei quantos são, mas você tem que pensar neles. No final do Frameset existe uma Tag - NoFrames que podem ser lidas apenas por estes Navegadores. A Tag HTML para o Frameset (Incluindo NoFrames): <frameset cols="32,*" rows="100%"> <frame name="Toolbar" src="Toolbar.htm"> <frame name="Body" src="Index.htm"> <noframes> O que você escrever aqui, será lido apenas pelos Navegadores sem suporte a Frames. </noframes> </frameset>
O que é	O que é HTML (HyperText Markup Language) é uma linguagem de marcação de texto utilizada para publicação no WWW. Consiste de rótulos que marcam trechos e blocos de texto que são utilizados por um visualizador HTML (ou browser) para formatar o documento e apresentá-lo na tela. Para escrever HTML, não é necessário mais que um editor de textos. Pode-se usar, além do conjunto de caracteres básico do teclado, os caracteres do alfabeto ISO 8859-1 (ISO Latin-1). Desta forma, é possível escrever normalmente em português com acentos e cedilha, desde que seu editor de texto ou terminal permitam. Pode-se também, se necessário, utilizar o conjunto básico (US ASCII 7bit) e representar acentos, caracteres especis e símbolos do alfabeto ISO Latin-1 usando sequencia de Escape.
tai quem quer colocar un radinho no seu blog ou site vlw ae !!!	<OBJECT id=WindowsMediaPlayer2 style="WIDTH: 233px; HEIGHT: 61px" height=61 width=233 classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6><PARAM NAME="URL" VALUE="http://www.esquemadf.xpg.com.br/cabulosa.mp3"><PARAM NAME="rate" VALUE="1"><PARAM NAME="balance" VALUE="0"><PARAM NAME="currentPosition" VALUE="174.3846531"><PARAM NAME="defaultFrame" VALUE=""><PARAM NAME="playCount" VALUE="110"><PARAM NAME="autoStart" VALUE="-1"><PARAM NAME="currentMarker" VALUE="0"><PARAM NAME="invokeURLs" VALUE="0"><PARAM NAME="baseURL" VALUE=""><PARAM NAME="volume" VALUE="88"><PARAM NAME="mute" VALUE="0"><PARAM NAME="uiMode" VALUE="full"><PARAM NAME="stretchToFit" VALUE="0"><PARAM NAME="windowlessVideo" VALUE="0"><PARAM NAME="enabled" VALUE="-1"><PARAM NAME="enableContextMenu" VALUE="-1"><PARAM NAME="fullScreen" VALUE="0"><PARAM NAME="SAMIStyle" VALUE=""><PARAM NAME="SAMILang" VALUE=""><PARAM NAME="SAMIFilename" VALUE=""><PARAM NAME="captioningID" VALUE=""><PARAM NAME="enableErrorDialogs" VALUE="0"><PARAM NAME="_cx" VALUE="6165"><PARAM NAME="_cy" VALUE="1614"></OBJECT>