quarta-feira, 27 de fevereiro de 2013

Como configurar e gerenciar sua conexão Wireless no Windows 7

Você que utiliza o Windows 7 e veio de um sistema mais antigo da Microsoft (como o XP), sabe que ele trouxe novos recursos e facilidades para gerenciar suas conexões de rede, em especial as conexões Wireless que está em alta no mercado de TI. A maioria das casa dos usuários de computadores e notebooks hoje em dia utilizam um AP (Access Point), para realizar suas conexões de rede sem fio. Mas com isso vem um pequeno problema: "Como eu configuro e gerencio as minhas conexões de rede sem fio?" - Esta é uma pergunta que recebo diariamente em e-mails enviados pelos leitores do TEO e em meu trabalho (é, para quem não sabe, Trabalho com provedores de Internet e Manutenção de Computadores).

Este é o motivo deste artigo, vou tentar tratar de todos os ponto mais importantes para a configuração de sua conexão de rede no Windows 7, começando pelo básico e passando pelos pontos um pouco mais avançados (se é que eles existem no Windows 7). Então vamos lá?

Conectando a primeira vez

Primeiramente, vou mostrar como é simples e básico para configurar sua conexão Wireless no Windows 7, vamos realizar nossa primeira conexão em uma rede com segurança WPA2 (Um dos métodos mais seguros para conexões Wireless domésticas e empresariais).

Primeiramente, você deve saber que o driver de sua placa de rede wireless está instalado e funcionando corretamente. Outro ponto interessante a ser lembrado, é que se você está utilizando um notebook, provavelmente este deve ter uma chave ou tecla que ativa ou desativa a conexão Wireless, portanto, encontre essa tecla e verifique se ela está ativada, veja um exemplo da chave na imagem abaixo:

Chave que liga a conexão Wireless em Notebooks


Na imagem acima, quando a conexão está azul ela está ativa, quando vermelha desativada, mas fique atento, pois isso varia de marca para marca e modelo para modelo.

Sabendo que sua conexão está ativa, verifique o ícone de um computador que fica ao lado do relógio do Windows 7 (canto inferior direito da tela), e apenas clique sobre este ícone, fazendo isso você já deverá encontrar todas as conexões que estão ativas ao seu redor, veja um exemplo na imagem abaixo:

Como configurar e gerenciar sua conexão Wireless no Windows 7


Na imagem acima encontramos apenas uma conexão ativa que é a FOREBA_WI_FI (Foreba é meu apelido feio e WI_FI foi o nome que eu escolhi para colocar depois).

A partir do momento que eu dou dois cliques com o mouse sobre esta conexão, o próprio sistema vai detectar se ela tem segurança ativa ou não (aliás, ele detecta antes de conectar), mas enfim, o sistema detecta tudo para facilitar sua vida, então basta você seguir o assistente e finalizar a configuração, veja os exemplo nas imagens abaixo:

Como configurar e gerenciar sua conexão Wireless no Windows 7


O sistema pede a senha, coloque e clique em "OK";

Como configurar e gerenciar sua conexão Wireless no Windows 7


O sistema aceitou a senha e começa a procurar pela conexão, ou seja, vai encontrar os servidores DHCP (se eles existirem) e verifica a conexão com a internet.

Agora vamos começar com a parte chata da situação, o sistema não encontrou um DHCP, não retornou um IP e não retornou nenhuma conexão, o que fazer?

Como configurar e gerenciar sua conexão Wireless no Windows 7


Certo, neste caso vamos aos dados técnicos, se faça as seguintes perguntas:
  • Meu roteador tem um servidor DHCP ativo?
  • Meu roteador está recebendo conexão com a internet pela porta WAN ou em alguma porta LAN?
  • Meu provedor de Internet está em manutenção?
  • Existe outro computador na rede que está funcionando?


Então vamos explicar o motivo do questionamento:

DHCP no modo grosso de dizer, é um servidor que disponibiliza organizadamente os endereços IPs na sua rede, isso facilita a manutenção, já que o administrador não precisa saber o IP de cada maquina na rede, o DHCP se encarrega disso. A maioria dos roteadores do mercado (se não todos), tem um servidor DHCP integrado e vem com ele ativo, e no modo de operação gateway, ou seja, todos os computadores da rede devem passar por ele para sair ao mundo externo e se conectar a internet.

Mas caso alguém tenha configurado seu AP para que este não sirva IPs você deve fazer isso manualmente, minha dica é que você procure em outros computadores, qual é a classe de IP da rede, pois cada IP deve ser único na rede.

Para facilitar esta conversa, já temos um tutorial que detalha exatamente este ponto da configuração de sua rede, este pode ser lido aqui.

Voltando ao nosso ponto (a segunda pergunta), você deve verificar se o seu AP ou Roteador (ou AP e Roteador no mesmo aparelho) está conectado à Internet, pois é claro que a sua internet chega em sua residência ou empresa por algum cabo ou sem fio mesmo.

Neste caso, temos que verificar se este cabo está conectado ao computador, normalmente, o cabo de conexão com a Internet, vai conectado à porta WAN do aparelho, mas em outros casos, este também pode está conectado em portas LAN ou até mesmo na porta WAN sem fio. Então verifique o cabo que vem da internet para saber onde ele está conectado.

Seguindo este mesmo ponto, poderiamos remover o cabo do AP e conectá-lo diretamente ao PC, assim poderiamos saber se a internet está ou não funcionando, entretanto, já passamos para parte de LAN e fugimos do assunto principal que é a porta Wireless do seu PC.

Na terceira pergunta, podemos chatear um pouco o suporte do seu provedor, ligue na empresa e pergunte se existe algum problema na Internet, pode ser que você consiga até mesmo uma visitinha grátis de algum técnico!

Na quarta pergunta, é a coisa mais óbvia do mundo, se você tem uma rede onde existem três computadores e apenas um deles não está funcionando, onde está o problema?

Claro que não vai ser nos outros dois, não é mesmo?

Depois de passar por este questionário, pode ser que você já tenha resolvido seus problema, entretanto, vamos verificar como saber algumas configurações da rede para detectar o problema.

Verificando o IP

Estando ou não conectado a um servidor DHCP, o seu computador tem que ter um IP e mascara de subrede para se conectar à rede, além disso, para se conectar à internet, é necessário um Gateway e um DNS.

Você deve saber exatamente qual o IP da sua rede, e mais uma vez, temos um tutorial simples para que você descubra isso, este pode ser acessa aqui.

Ta certo, ainda não chegou em lugar nenhum? Então utilize o tutorial para descobrir os IPs dos outros computadores, se você conseguir encontrar (e é claro que vai), coloque IP fixo no seu PC, você pode fazer isso facilmente seguinte este tutorial.

Segurança e SSID oculto

Não é muito comum, mas alguns provedores de Internet, Roteadores ou APs, utilizam o SSID oculto, para quem não sabe, SSID é aquele nome que a gente da para a rede (no nosso caso FOREBA_WI_FI), neste caso, o sistema não vai encontrar uma conexão, ou vai encontrar mais não atribui nenhum valor a ela, assim não é possível realizar a conexão.

Então vamos ver como colocar o SSID manualmente, e "de quebra" vamos ver os tipos de segurança que poderão ser utilizados.

Para isso, clique com o botão direito do mouse sobre o computador que fica do lado do relógio, e selecione "Abrir a central de rede e compartilhamento";

Como configurar e gerenciar sua conexão Wireless no Windows 7


No lado esquerdo da tela, você encontra a opção "Gerenciar rede sem fio", clique sobre esta opção;

Logo clique em "Adicionar" e siga o assintente, você só precisa saber qual a segurança na sua rede e qual o SSID oculto para escrever nos campos certos.

O SSID verifica letras maiúsculas e minúscula, portanto "foreba_wi_fi" é diferente de "FOREBA_WI_FI", preste bastante atenção nas letras.

No Windows 7, o SSID é conhecido como "Nome da Rede", veja na imagem abaixo uma rede já configurada;

Como configurar e gerenciar sua conexão Wireless no Windows 7


Feito isso, basta finalizar a configuração seguindo as instruções do assistente.

Gerenciando várias redes Wireless

Se você tem muitas redes Wireles em seu computador, pode ser que você queira que uma delas seja preferencial, para isso basta movê-la ao topo da lista.

No mesmo local onde você clicou em Adicionar para configurar a nova conexão, você verá todas as redes já configuradas, para mover qualquer uma delas para cima, basta clicar com o botão direito do mouse sobre a conexão desejada e clicar em "Mover para cima". O sistema vai fazer tentativas de conexão de cima para baixo, logo a sua primeira conexão será a preferencial.

Como configurar e gerenciar sua conexão Wireless no Windows 7

Finalizando

Bom, em modo resumido, é muito simples configurar a sua conexão de rede Wireless no Windows 7, entretanto, como você pôde ver no tutorial anterior, pode acontecer alguns problemas que só serão possíveis de ser resolvidos se você conhecer a rede que tem, portanto, se você está lendo este tutorial apenas para aprender, trate de procurar saber detalhes da sua rede, isso vai facilitar muito na hora de resolver seus problemas de conexão.

Este tutorial foi bem superficial, mas você pode tirar todas as suas dúvidas utilizando o nosso fórum, se nenhum usuário o ajudar, eu mesmo vou tentar ajudar. Mais sobre: Como Configurar Gerenciar Conexão Wireless Windows 7
Comentar | Relatar um problema

Mais sobre "Tutoriais Windows"

Comentários

Deixe a sua opinião, recado ou dúvida abaixo:

Comentar usando o facebook

João Antonio do Nascimento disse:
Em 30/09/2011 às 09:40:18
Tenho 2 notes com windows 7 e dois pc com XP em rede. O meu roteador é Dlink DIR 600. Quando deixo a rede aberta, ou seja, sem a senha todos os computadores conectam normalmente na internet, mas quando coloco a proteção da senha, os note não conectam e aparece um "X" em vermelho no nome da rede sem fio. Como devo proceder para resolver este problema?

Sem mais,

João Antonio Nascimento
Responder para João Antonio do Nascimento | Denunciar
@todoespaco (Luiz Otávio) respondeu:
Em 30/09/2011 às 10:05:43
Amigo, ou você está configurando a senha do roteador de modo incorreto ou os computadores não suportam a criptografia que você escolheu. Tente colocar o modo mais simples que é criptografia WEP e veja se funciona!
Responder para João Antonio do Nascimento | Denunciar
@luismar_montalvao (luismar) respondeu:
Em 02/11/2011 às 21:43:36
no meu trabalho todo windowns xp conecta normalmente na rede, mas todo w7 nao conecta vc sabe me dizer pq, se é alguma configuraçao??
obrigado!!
Responder para João Antonio do Nascimento | Denunciar
@dirce_ap (dirce) disse:
Em 16/11/2011 às 18:57:13
As configuração salva no computador não corresponde aos requisitos da rede.
Responder para dirce | Denunciar
allan disse:
Em 10/02/2012 às 19:21:02
nossa, ta dificio aqui, ja bati cabeça pacas... acabei de resetar o "tp-link (roteador)"
o modem com o cabo direto no notebook,libera acesso a net de boa, o provedor ta ok!
ja conectei o roteador com o not pra configurar tudinho o que dizem os tutoriais, mas não consigo fazer com que a net seja liberado direto! ou seja, o que falta mas fazer?
tenho o modem! roteador (tp-link modelo: TL-WR740N) e meu not windowns7... depois de ter feito AS configurações, o not ver o sinal assim como meu smarthfone, mas não conecta! alguem tem conragem de tentar me ajudar? nem que seja por telefone?
Responder para allan | Denunciar
Frederico respondeu:
Em 22/03/2012 às 11:57:56
E aí, Allan. Conseguiu resolver? Estou com o mesmo problema.
Responder para allan | Denunciar
Laira Lacerda disse:
Em 05/04/2012 às 21:45:34
Foi instalado um roteador TP link e tudo estava funcionando perfeitamente (o computador e o meu notbook) ate q meu irmagou a cpu, onde estava conectada a tomada do roteador e agora nao consigo mais conectar pelo notbook (pelo computador sim). No notbook localizo varias redes, menos a minha (Laira) q aparece um X vermelho ao inves do sinal... ja li mil posts e nao consigo resolver!!!
Responder para Laira Lacerda | Denunciar
mariane disse:
Em 05/06/2012 às 13:15:02
É o seguinte: eu tenho um tablet android 2.3 MOX-PAD720
só que a net dele é wii-fi e só pega onde tem sinal tipo em lan-houses,só que eu quero fazer ele pegar na minha casa tem como eu configurar meu pc pro tablet pegar a net dele?
Responder para mariane | Denunciar
Rogério disse:
Em 29/06/2012 às 23:10:27
Boa noite !
ta dificil ja fiz de tudo e o not nada de ser ligado e entrar na net tem que desligar o rotiador e ligar para ele entrar na net, ja tou algum tempo e nada o problema ta na configuração do not?
meu windows 7 ja falei com um amigo ele me diz que esse windows da mesmo esse problema se alguem tiver uma dica me fale para resolver meu problema.
Responder para Rogério | Denunciar
@não (Edivan) disse:
Em 16/01/2013 às 14:36:21
Uso internet via rádio, em meu pc com owinduws 7 starter. Gostaria de compartilhar com o notekook. Tentei diversas formas e não consegui. Agradeço a quem me ajudar.
Responder para Edivan | Denunciar

Comentar usando o TEO

Nome *:
Email *:
Twitter (@nomedoseuusuario):
Quanto é *?
Comentário *:
Campos Obrigatórios *
Copyright © 2011 todoespacoonline.com ®. Todos os direitos r

terça-feira, 26 de fevereiro de 2013

Tutorial Grátis de CSS videos

Tutorial Grátis de CSS

Como Fazer Um Site >> Design >> Tutorial CSS


Confesso que no inicio custou-me um pouco a me familiarizar com CSS (Cascading Style Sheets) porque estava habituado a usar apenas o HTML nas páginas que fazia. Mas desde que descobri as vantagens que CSS traz à construção de um site passei a usar sempre um ficheiro com a definição de estilos. Penso que nunca mais vou criar um site sem CSS.
Com os códigos de estilos você vai poupar muito tempo e trabalho pois CSS permite actualizar várias partes do seu site através da actualização de apenas um ficheiro. Os videos tutoriais que se seguem vão-lhe mostrar como você pode criar um site CSS de raiz.
Não se esqueça de fazer DOWNLOAD do template que acompanha este tutorial.

Tutorial de CSS, Parte 1 - Layout Básico

Neste tutorial você vai aprender a criar um layout básico de 3 colunas em CSS.

http://www.youtube.com/watch?v=nU08-VvTS1g&feature=player_embedded

Tutorial de CSS, Parte 2 - Formatar Links e Texto

Neste tutorial você vai aprender a atribuir estilos aos seus links e textos.


http://www.youtube.com/watch?v=GXQ6_iFwveE&feature=player_embedded

Tutorial de CSS, Parte 3 - "Barra Menu" de Links

Neste tutorial você vai aprender como definir uma "barra menu" de links de navegação dispostos na horizontal, abaixo do cabeçalho da página.


http://www.youtube.com/watch?v=vlNMi8d_oas&feature=player_embedded

Tutorial de CSS, Parte 4 - Criar caixas

 http://www.youtube.com/watch?v=vlNMi8d_oas&feature=player_embedded

Neste tutorial você vai aprender a criar caixas através de CSS.

Estes videos fazem parte do meu canal do YouTube. Subscreva-o aqui!

Tutorial de FTP - Como Usar o FileZilla

Tutorial de FTP - Como Usar o FileZilla

Como Fazer Um Site >> Criar um Site >> Tutorial de FTP - Como Usar o FileZilla


FTP significa "File Transfer Protocol" (Protocolo de Transferência de Ficheiros). É o processo mais usado na internet para transferir ficheiros. Através de uma ligação FTP você poderá transferir vários ficheiros, de uma só vez, do seu computador para o serviço de alojamento onde tem o seu site alojado. Para isso é preciso ter um programa de FTP instalado no seu computador.
Antes de continuar certifique-se que o seu servidor de alojamento lhe dá acesso FTP. A maior parte dos servidores gratuitos não oferece esta possibilidade. Normalmente os servidores para sites grátis oferecem apenas uma página através da qual se pode fazer upload de ficheiros, mas de uma forma muito limitada, com poucos ficheiros de cada vez, o que torna o processo bastante lento e nada prático.
Os sites gratuitos têm algumas limitações, pense bem antes de criar um site grátis. Se pretende ter uma presença mais sólida na internet, considere investir num dominio próprio, num servidor de alojamento pago, que lhe vai oferecer todos os recursos que o seu site precisa para crescer, nomeadamente o acesso FTP. É o caso por exemplo da Globat, que é o servidor de alojamento deste site, do Como Fazer Um Site. A Globat suporta uploads através de FTP e espaço ilimitado para alojar os ficheiros que precisar.

 


Programa de FTP gratuito

O FileZilla é o programa que eu uso para fazer upload de ficheiros para os meus sites. É absolutamente gratuito e muito simples de usar. Veja o vídeo do tutorial de FTP:
Faça download do programa em http://filezilla-project.org .
Instale o FileZilla no seu computador.
Depois de ter o programa instalado é necessário configurar a ligação FTP ao servidor de alojamento do seu site.
Você tem que aceder ao seu servidor de alojamento e criar uma conta FTP. Anote os dados da conta FTP que acabou de criar pois vai precisar desses dados para configurar o FileZilla. Normalmente os dados que precisa são:
  • Host (normalmente é seudominio.com ou ftp.seudominio.com)
  • Username
  • Password
Depois de introduzir os dados correctos no FileZila vc poderá então estabelecer a ligação FTP e assim enviar ficheiros para o seu servidor de uma forma eficiente através do FileZilla.

Leia também o artigo Como criar uma lista de arquivos frequentes no Filezilla.


DICAS HTML INICIAIS


Como salvar o seu primeiro documento HTML
Neste artigo espero sanar uma dúvida muito comum, que é a maneira de salvar um documento como html em programas com o bloco de notas do windows (Notepad).
por Ricardo Arrigoni

 2 0 0 0
 

Olá pessoal, nesse artigo irei explicar uma dúvida que eu tenho visto bastante gente que está iniciando me perguntar, que é: Como eu salvo um documento HTML?
Bom, a resposta para essa pergunta é bem simples e existem diversas maneiras de serem feitas. Primeiramente vou mostrar como fazer isso pelo bloco de notas do Windows mesmo (notepad.exe).
Primeiro abra o bloco de notas, com ele aberto iremos começar a digitar a estrutura do HTML, com suas tag’s principais que são:
  • </li> <li><body></li> </ul> <p> Vamos então montar a estrutura da nossa página HTML.</p> <h3> Listagem 1: Estrutura da Página Html</h3> <div> <div id="highlighter_360352" class="syntaxhighlighter js"> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td class="gutter"><div class="line number1 index0 alt2"> 1</div> <div class="line number2 index1 alt1"> 2</div> <div class="line number3 index2 alt2"> 3</div> <div class="line number4 index3 alt1"> 4</div> <div class="line number5 index4 alt2"> 5</div> <div class="line number6 index5 alt1"> 6</div> <div class="line number7 index6 alt2"> 7</div> <div class="line number8 index7 alt1"> 8</div> </td><td class="code"><div class="container"> <div class="line number1 index0 alt2"> <code class="js plain"><html></code></div> <div class="line number2 index1 alt1"> <code class="js plain"><head></code></div> <div class="line number3 index2 alt2"> <code class="js plain"><title>
 
Agora vamos salvar o arquivo, que é o objetivo desse nosso artigo.
No bloco de notas você vai em Arquivo -> Salvar Como, como mostra a figura a seguir:
Salvando Html
Figura 1: Salvando o HTML
Após clicar em “Salvar como...” vamos ter que fazer algumas alterações. Primeiro temos que modificar o tipo de arquivo, troque de Documento de texto(*.txt) para Todos os arquivos (*.*), como mostra a figura a seguir:
Alterando o Tipo
Figura 2 : Alterando o Tipo
Feito isso, podemos dar um nome ao nosso arquivo, mas não podemos esquecer de no final do nome escrever o ".html", ele será o responsável por fazer nosso arquivo virar uma página de internet.
Nomeando o arquivo
Figura 3: Nomeando o arquivo
Feito isso o nosso arquivo HTML estará pronto. Como caráter de exercício, vamos criar o famoso "Alô Mundo" em HTML.
Para isso iremos usar o mesmo arquivo HTML e a tag

, ficando da seguinte forma:


Listagem 2 : Criando um Alô Mundo

1
2
3
4
5
6
7
8
9
Criando um Alô Mundo
 

Alô Mundo

O resultado do nosso exemplo você pode ver a seguir:
Exemplo Alô Mundo
Exemplo alo mundo
Bom pessoal, fico por aqui, espero que tenham entendido como fazemos para salvar um documento HTML e de quebra ainda tenham aprendido a fazer o famoso Alô Mundo.
A propósito a Devmedia tem um curso sobre HTML para iniciantes.
Um abraço e até o próximo artigo.
Ricardo Arrigoni - Desenvolvedor Front-end e Analista SEO
Ricardo ArrigoniRicardo Arrigoni - Desenvolvedor Front-End, Analista SEO, Atuo na área de Webdesign há mais de 4 anos. Para trabalhos freelancers visite meu portfólio: www.ricardoarrigoni.com.br ou se preferir me mande um e-mail.


Tutorial de HTML

Como Fazer Um Site >> Criar um Site >> Dicas de HTML





Por esta altura você já deve ter reservado o seu domínio e já deve ter encontrado um serviço de alojamento para o seu site.
Se você não está muito interessado em aprender HTML para criar as suas páginas, não se preocupe, muitos serviços de alojamento disponibilizam software de criação de sites de uso fácil, tornando o processo muito simples, bastando alguns cliques para construir rápidamente um site sem que seja preciso saber HTML. Neste caso, verifique se o seu serviço de alojamento lhe proporciona estas ferramentas ou então, se ainda não tem alojamento, certifique-se que escolhe um serviço que inclua uma ferramenta de criação de páginas web.
Mas, se você está com vontade de aprender HTML, ainda bem para si! É sempre vantajoso saber HTML, ou pelo menos ter umas bases.

Noções Básicas

O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afectado pelo código.
Uma tag de inicio é por exemplo a tag que é usada para colocar uma porção de texto em negrito. A tag de fecho correspondente será
que será usada no final desse texto que queremos formatar. Assim, se quisermos colocar em negrito a palavra "Olá!" da frase abaixo, então o código HTML fica:
Olá! O meu nome é Cátia.
e o resultado será:
Olá! O meu nome é Cátia.
Pode experimentar introduzir você mesmo os códigos HTML indicados neste tutorial, e ver automaticamente o seu resultado, na página "Editor de HTML em tempo real".


Estrutura Básica do Código HTML de um Documento

Comece por definir o layout básico do documento. Pode copiar e colar este código no Bloco de Notas ou outro editor de texto:


Título da sua página





Nesta área fica tudo aquilo que se visualiza no navegador da internet, texto e imagens, juntamente com todos as tags HTML de formatação.


As tags e
dizem ao navegador de internet aonde começa e aonde acaba o código HTML. As tags </span> e <span class="codigohtml"> dizem ao browser qual é o título da página. O título pode ser visto no canto superior esquerdo do seu navegador de internet. O texto que for definido entre estas tags é também o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa.
A tag é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no da sua página.
A tag também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag.
Entre as tags e
é colocado o conteúdo da página, que é o que é visualizado no browser. Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro.
Voltar ao Índice

Tags Básicas para Fonte e Texto

Itálico: texto
Sublinhado: texto
Negrito: texto
Texto Riscado: texto
Novo Parágrafo: texto
Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior.
Quebra de linha:

Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo.
Centrar:
texto

Alinhar texto à esquerda:
texto

Alinhar texto à direita:
texto

Mudar cor do texto: texto
Pode também utilizar os códigos HEX para definir as mais variadas cores.
Mudar a fonte: texto
Mudar o tamanho: texto
(escolher entre 1 e 7)

Atenção:
Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico e sublinhado, colocando todas as tags ao mesmo tempo, acumulando os efeitos:
texto
e o resultado é:
texto
Voltar ao Índice


Imagens de Fundo e Cores de Fundo


Cor de Fundo

Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores claras funcionam bem com uma cor escura para o texto.
Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag :
Pode também utilizar os códigos HEX para definir as cores que combinem melhor.

Inserir uma Imagem de Fundo

Se você quiser definir uma imagem de fundo use o seguinte código:
Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:
Voltar ao Índice

Inserir Imagens

A tag para se inserir imagens é .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:
.

Atributo "alt"

O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:
Aniversário da Joana


Definir Altura e Largura

Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:



Definir Contorno da Imagem

Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior é a espessura do contorno. O código pode ser por exemplo:


Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:
Aniversário da Joana

Inserir Imagens em Hiperligações

Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):



Voltar ao Índice

Inserir Hiperligações

A tag para se inserir hiperligações é Nome do Link.
O resultado deste código é:
Nome do Link

Abrir links em Novas Janelas

Se você não quer que as pessoas abandonem completamente o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'":
Nome do Link

Endereços Absolutos e Relativos

URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites que todos estamos habituados a colocar na barra de endereços do navegador de internet.
Pode-se linkar para outras páginas usando URLs absolutos ou relativos.
URLs absolutos
Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende.
Se por exemplo você quisesse abrir uma página chamada camoes.html, que se encontrava no interior de uma pasta chamada "poetas", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria:
Camões É preferível o uso de URLs absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar.
URLs relativos
Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos.
Se por exemplo estivessemos na página camoes.html (que se encontra dentro da pasta "poetas") e quisessemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria:
Página Principal os dois pontos, seguidos de uma barra, dizem ao browser para subir um nivel na hierarquia na estrutura de pastas do site.
O URL relativo permite que o site possa ser testado offline, quando tivermos as pastas e os ficheiros html no disco duro. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do disco.

Hiperligações Âncora ou Marcadores

Uma hiperligação (link) âncora ou marcador é um link interior para dentro da própria página. É um link que leva o visitante para outra secção da mesma página (em vez de o levar para outra página ou site).
1- Para fazer um marcador primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora.
Este é o Texto Onde a âncora vai parar "nome1" é o nome da âncora que você escolhe.
2 - Agora para linkar para aquele local da página, use a tag para hiperligações, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora:
clique aqui

Links para E-mails

Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de hiperligação:
Envie-me um Email

Mudar as Cores dos Links

Por defeito as hiperligações têm a cor azul. Mas você pode alterar as cores usando o código "link" no interior da tag . Exemplo:

  • link - cor dos links, vermelho neste caso
  • vlink - links visitados, verde neste caso
  • alink - links activos, amarelo neste caso

Voltar ao Índice

Você pode também usar os códigos HEX para definir estas cores:

Códigos HEX das Cores

Clique para seleccionar uma cor e depois poderá copiar e colar o respectivo código HEX:


ou então copie directamente do seguinte quadro o código da cor desejada:
#000000#000033#000066#000099#0000CC#0000FF
#003300#003333#003366#003399#0033CC#0033FF
#006600#006633#006666#006699#0066CC#0066FF
#009900#009933#009966#009999#0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000#330033#330066#330099#3300CC#3300FF
#333300#333333#333366#333399#3333CC#3333FF
#336600#336633#336666#336699#3366CC#3366FF
#339900#339933#339966#339999#3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000#660033#660066#660099#6600CC#6600FF
#663300#663333#663366#663399#6633CC#6633FF
#666600#666633#666666#666699#6666CC#6666FF
#669900#669933#669966#669999#6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000#990033#990066#990099#9900CC#9900FF
#993300#993333#993366#993399#9933CC#9933FF
#996600#996633#996666#996699#9966CC#9966FF
#999900#999933#999966#999999#9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF
Voltar ao Índice

Criar Tabelas

Perceber como funcionam as tabelas em HTML é muito importante. Com elas podemos fazer muita coisa no design do nosso site. Podemos ordenar o nosso conteúdo de uma determinada forma, podemos ordenar imagens lado a lado, ou em fila, podemos criar colunas para o layout do site, criar uma barra lateral, etc.

Tags de tabela básicas

São 3 as tags básicas para inserir tabelas:
  • é a tag que inicia e finaliza uma tabela
  • significa "table row"( linha de tabela), é a tag que representa uma linha na tabela
  • significa "table data" (dados da tabela), é a tag que representa uma célula da tabela dentro da linha
Vamos então criar uma tabela simples:

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6
e o resultado desta tabela é:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6
Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no código HTML acima como cada é uma linha. Como abrimos 3 tags vamos ter 3 linhas. E reparem como no interior de cada linha temos 2 tags o que vai resultar em 2 células por cada linha, ou 2 colunas na tabela final.

Definindo um Contorno para a Tabela

Para definir um contorno para uma tabela basta colocarmos no atributo "border" a espessura do contorno que queremos:

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

e o resultado é:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Alterando a Cor do Contorno da Tabela

Para alterar o contorno da tabela colocamos no atributo "bordercolor" a cor que pretendemos:

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

neste caso vamos ter uma tabela com um contorno vermelho:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Definir Espaço que Envolve as Células - CELLSPACING

Podemos aumentar ou diminuir o espaço no interior da tabela que envolve as células. Para isso usamos o atributo "cellspacing".

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

temos assim:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Definir Espaço no Interior das Células - CELLPADDING

Para aumentar ou diminuir o espaço no interior das células usamos o atributo "cellspadding".

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

vejam como fica:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Definir a Largura de uma Tabela

Para definirmos a largura de uma tabela usamos o atributo "width". O valor pode ser em pixels ou em percentagem.
Se usarmos uma percentagem, por exemplo um valor de 100%, a tabela vai ocupar todo o espaço disponivel dentro da secção aonde se encontra.

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

resultado:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa de 400px.

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

o resultado final desta tabela:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6

Definir a Largura das Colunas

Se não quisermos que todas as colunas tenham a mesma largura temos que definir um atributo de largura dentro da tag . Se usarmos percentagens temos por exemplo o seguinte código:

      
     
Célula 1Célula 2 Célula 3
Célula 4 Célula 5Célula 6

e o resultado da tabela:
Célula 1Célula 2Célula 3
Célula 4Célula 5Célula 6
Reparem que nas duas linhas tivemos que definir uma largura de 50% para a primeira coluna. Se para as restantes colunas não definirmos nenhum valor, o espaço que sobra vai ser dividido de forma automática igualmente por todas elas.

Se usarmos um valor em pixels, por exemplo 250px, a tabela vai ter uma largura fixa de 400px:

      
     
C 1C 2 C 3
C 4 C 5C 6

o resultado da tabela:
C 1C 2C 3
C 4C 5C 6
Em cada linha a soma dos valor de largura definido para as colunas totaliza o valor da largura da tabela 250+75+75=400.

Definir a Altura de uma Tabela

Podemos também definir uma altura para a tabela adicionando o atributo "height":

      
     
C 1C 2 C 3
C 4 C 5C 6

resultado:
C 1C 2C 3
C 4C 5C 6

Alinhamento Horizontal do Conteúdo das Células

Por defeito o conteúdo das células está alinhado à esquerda, mas é possivel também centrar o conteúdo e alinhar à direita. Para isso usamos o atributo "align" no interior da tag :

      
     
C 1C 2 C 3
C 4 C 5C 6

resultado:
C 1C 2C 3
C 4C 5C 6
Se quisermos alinhar à direita temos que usar align="right".

Alinhamento Vertical do Conteúdo das Células

Por defeito os dados ficam alinhados verticalmente no meio (middle) da célula, mas é possivel também alinhar o conteúdo e alinhar para o fundo (bottom) e para o topo (top) da célula. Para isso usamos o atributo "valign" no interior da tag :

      
     
C 1C 2 C 3
C 4 C 5C 6

resultado:
C 1C 2C 3
C 4C 5C 6
Reparem como o C1 ficou alinhado pelo fundo e o C4 pelo topo da célula.
Voltar ao Índice

Definir Listas

Lista numerada
Para apresentar uma lista de itens numerada usamos a tag
    , iniciais de "ordered list", para a lista, e a tag
  1. , iniciais de "list item", para cada item:


  1. Item 1

  2. Item 2

  3. Item 3



e o código resulta em:
  1. Item 1
  2. Item 2
  3. Item 3
Lista não numerada
Para apresentar uma lista de itens não numerada usamos a tag
    , iniciais de "unordered list", para a lista, e a tag
  • , iniciais de "list item", para cada item:


  • Item 1

  • Item 2

  • Item 3



e o código resulta em:
  • Item 1
  • Item 2
  • Item 3
Voltar ao Índice

Caracteres Especiais

Código
Carácter
Descrição
<
<
Menor que
>
>
Maior que
Trademark
&
&
Ampersand
®
®
Marca Registada
©
©
Copyright
Cruz
"
"
Aspas
»
»
Seta de citação
«
«
Seta de citação
———
Tracejado
°
20°
Grau
¼
¼
Um quarto
½
½
Um meio
¾
¾
Três quartos
·
·
Ponto no meio
¡
¡
Ponto exclamação invertido
Para se conseguir que apareça um dos simbolos da coluna amarela basta colocar o respectivo código no HTML da página.
Voltar ao Índice