Apostila de HTML - Básico para iniciantes

HyperText Markup Language - Linguagem de Marcação de Hipertexto
Com esta apostila você aprenderá tanto HTML, quanto CSS, e mais algumas dicas em outras áreas como WEB DESIGN, utilizando o PHOTOSHOP. Também vai adquirir algumas noções no Dreamweaver 8. Aprenderá a enviar arquivos fia FTP para servidores, e muito mais. A apostila está toda detalhada com fotos ilustrativas, exemplos já prontos e também com exercícios.
Para visualizar os arquivos em PDF use o SlimPDF Reader

TUTORIAL BÁSICO HTML

O QUE É HTML?
Um documento escrito em HTML (Hiper Textos Markup Language) é um texto comum no formato ASCII.

O QUE É HIPERTEXTO?
Hipertexto são aqueles itens marcados numa página WEB que, quando clicados, levam a imagens ou informações mais detalhadas sobre o assunto. O Hipertexto é um texto (ou uma imagem) grifado e destacado na página por uma cor diferente da cor do texto no qual está inserido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um ícone representado por uma mão.
Exemplo de Hipertexto: Clique aqui para...
CRIANDO UMA PÁGINA HTML USANDO UM EDITOR DE TEXTO
Uma página HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad, etc), desde que seja salvo no formato ASCII.
Por exemplo: Se você criar um documento usando Bloco de Notas, deve salvá-lo no formato .txt. Ao salvá-lo modifique a extensão .txt para .htm ou .html. Se seu documento, no formato .txt se chama Index.txt altere-o para Index.htm ou Index.html. Porém, lembre-se que o documento somente pode ser considerado HTML se nele houver o esqueleto da linguagem HTML.
AS TAGS
As marcas utilizadas para produzir o hipertexto são chamadas tags. Uma tag consiste dos sinais < (menor que) e > (maior que) e um texto dentro deles. A notação <title> por exemplo é uma tag para o título do documento.
As tags devem ser usadas em pares, devendo haver uma tag que inicia a marcação e uma tag que a finaliza. A tag de finalização deve ter uma barra "/" antes do texto. Por exemplo, a marcação completa para o título de um documento é:
<title>Título do Documento</title>
Algumas marcações, no entanto, como as tags de início de parágrafo <p>, quebra de linha <br> e inserção de barra <hr> não necessitam de seus pares.
Todo documento HTML deve iniciar com a tag <html> e finalizar com o seu par </html>.
Um documento HTML não faz diferença entre maiúsculas e minúsculas. Portanto tanto faz usar <TITLE> como <title>.

O ESQUELETO DE UMA PÁGINA HTML
Um documento HTML divide-se em 2 partes essenciais: cabeçalho e corpo. Veja o exemplo abaixo:
<html>
Tag de início do documento
<head> (cabeça do documento)
<title>título do documento</title>
</head> (final de cabeça do documento)
CABEÇALHO
<body> (tag de início do corpo)
<h1>Primeiro nível de cabeçalho</h1>
<h2>Segundo nível de cabeçalho</h2>
</body> (tag de final do corpo)
CORPO
</html>
Tag de final do documento

CABEÇALHO DO DOCUMENTO
A cabeça do documento deve conter as informações mais essenciais da página.
Coloca-se no cabeçalho o Título do documento, a descrição, palavras chaves e comentários
O TÍTULO
Todo documento HTML deve ter um título que servirá para identificar o documento. O título do documento não é visualizado na página mas aparece na barra de título do browser de navegação. O título não é o mesmo que cabeçalho. O título é o nome do arquivo. É através do título que sua home page será procurada pelos catálogos de busca.
A tag de título é:
<title></title>
Por exemplo: minha página tem o título CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE. Então a tag para o título de minha página é:
<title> CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</title>
A DESCRIÇÃO
A cabeça do documento deve conter uma descrição da página. Sobre o que ela trata e o que tem a oferecer. A tag para a descrição é:
<meta name="description" content="descrição">
Por exemplo: minha página trata de HTML. A notação para minha página é a seguinte:
<meta name="description" content="Tutorial sobre HTML, dicas para construir homepage">
PALAVRAS CHAVES
As palavras chaves também servirão para a busca de sua home page. A tag de palavras chaves é:
<meta name="keywords"content="palavras chaves">
A notação acima para minha página é:
<meta name="keywords"content="HTML, tutorial, gif, homepage">
COMENTÁRIOS
Você pode inserir comentários adicionais na cabeça do seu documento usando a marcação <!>
Portanto o cabeçalho de um documento HTML ficaria assim:
<head> (início da cabeça)
<title>Como Fazer uma Home Page</title>
<meta name="description" content="dicas de linguagem HTML, endereços
de imagens gifs, download de editores HTML.">
<meta name="keywords"content="home page, html, barras, gifs,
programação">
<!Home Page criada por...usando o programa... >
</head> (final de cabeça)

O CORPO
O corpo do documento é a parte que aparece na Home Page. O texto de algumas tags colocadas nesta sessão do documento não são visualizados na tela, mas sim os seus efeitos. É o caso, por exemplo, das tags de padrão de fundo, cor de texto e cores de link, vlink e alink.

PADRÕES DE FUNDO
Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação para os dois padrões de fundo são:
(1)<body background="arquivo.gif"></body>
Esta notação indica fundos com textura. Se o arquivo gif estiver no mesmo servidor, mas em outro diretório, deve ser indicado o seu caminho path/name. Se estiver em outro servidor, sua URL deve ser indicada:
Tipo://host.domínio[:porta]/path/NomeDoArquivo.
Dica: Use <bgproperties="fixed"> para fixar o fundo da página na tela.
(2)<body bgcolor="#rrggbb"></body>
Esta notação indica fundos no padrão RGB. Usa-se um código no formato hexadecimal precedido pela tralha #. Clique em Tabela de Cores para ver as cores com seus respectivos códigos RGB.

CORES DO TEXTO
As cores do texto são indicadas, usando-se o mesmo código hexadecimal dos padrões de fundo RGB. A notação para indicar a cor do texto é:
<body text="#rrggbb"></body>
OS LINKS
Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.
A NATUREZA DOS LINKS
(1) Pode-se ligar partes de um texto ou imagens no mesmo documento. Este tipo de link encaixa-se na categoria de link relativo.
(2) Pode-se ligar partes de um texto ou imagens de outros documentos localizados no mesmo diretório. Este tipo de link encaixa-se na categoria de link relativo.
(3) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em diretório diferente. Este tipo de link encaixa-se na categoria de link relativo.
(4) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em Provedor diferente. Este tipo de link encaixa-se na categoria de link absoluto.
A tag que faz a ligação hipertexto é <a>, que é chamada de âncora. A notação completa para um link é:
<a href="texto ou imagem vinculada"></a>
LINKS RELATIVOS
(1) Links no mesmo documento:
Para interligar parte de um texto a outro texto no mesmo documento, usa-se uma âncora de nome, para identificar o primeiro trecho do texto, e uma âncora interna para identificar a outra parte do texto.
A âncora de nome e a âncora interna devem possuir uma palavra chave, idêntica em ambas.
Após as aspas da âncora interna e antes da palavra chave, usa-se a tralha (#).
No primeiro trecho, usa-se uma âncora de nome, cuja notação é:
<a name="PalavraChave">
No segundo trecho, usa-se uma âncora interna, cuja notação é:
<a href="#PalavraChave">Nome do Link</a>
(2) Links para outros documentos:
A notação utilizada para links em diretórios diferentes é igual a anterior, devendo, entretanto indicar-se o nome do arquivo na âncora interna. A notação é:
<a href="NomeDoArquivo#PalavraChave">
(3) Links para documentos em diretórios diferentes:
A notação é idêntica a do item (2), devendo, entretanto, indicar-se o nome do diretório.
Exemplo:
<a href="Diretório/NomeDoArquivo#PalavraChave">
LINKS ABSOLUTOS
Quando se interliga textos ou imagens de provedores diferentes, usa-se links absolutos.
Os links absolutos devem ser indicado pelo uso da URL (Uniform Resource Locators). A notação para links absolutos é:
protocolo://servidor[:port]/path/filename
Por exemplo, para fazer um link absoluto em sua homepage com a página inicial deste documento, usa-se:
<a href="http//members.tripod.com/~shibolete/Index.html">CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</a>

CORES DOS LINKS
1 Links
Pode-se utilizar qualquer cor para o link, no entanto recomenda-se a cor padrão azul (blue) indicada pelo código rgb=#0000FF.
Isto porque quando se clica sobre um link sua cor é alterada para indicar ao usuário que aquele link já foi consultado.
Se não for indicada a cor do link, ele será automaticamente exibido na cor padrão configurada no seu browser, geralmente na cor azul.
2 Vlink
Indica a cor dos links já consultados.
3 Alink
Indica a cor do links ativados na página.
A notação para indicar as cores dos links, alinks e vlinks é:
<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb></body>
A notação completa para as cores de textos e links é:
<body background="arquivo.gif" text="#rrggbb" link="#0000FF"
vlink="#rrggbb" alink="#rrggbb"></body>
ou
<body bgcolor="#rrggbb" text="#rrggbb" link="#0000FF" vlink="#rrggbb"
alink="#rrggbb"></body>

O SUBTÍTULO
É o título que aparece na Home Page. Não deve ser confundido com o título do documento, que não é visualizado na página, mas aparece no alto da tela. O título é inserido na seção do cabeçalho <head><title></title></head> enquanto o subtítulo é colocado na seção do corpo documento HTML <body></body>
O subtítulo possui 6 níveis de tamanho, numerados de 1 a 6.
Usa-se a tag <hy>, onde "y" é um número entre 1 a 6.
Os níveis para subtítulo são em número de seis, conforme tabela abaixo:
<h1>nível 1</h1>
nível 1
<h2>nível 2</h2>
nível 2
<h3>nível 3</h3>
nível 3
<h4>nível 4</h4>
nível 4
<h5>nível 5</h5>
nível 5
<h6>nível 6</h6>
nível 6

FORMATAÇÃO DO TEXTO
O documento HTML não segue o padrão de formatação da maioria dos editores de texto. Ele não possui recursos para aumentar o espaço entre as palavras e entrelinhas nem para forçar a justificação do texto. Para obter esses recursos é preciso utilizar a tag apropriada.
A listagem a seguir mostra a função de cada tag:
Quebra de Linha
<br> faz uma quebra de linha, mas não acrescenta espaço entre as linhas.
Exemplo:
O documento HTML não segue<br> o padrão de formatação...
O texto acima é visualizado da seguinte forma:
O documento HTML não segue (quebra de linha)
o padrão de formatação...
Quebra de texto sem alinhamento
O alinhamento de imagens muitas vezes força o texto a acompanhar o alinhamento, tornando difícil o seu posicionamento. A tag <br clear=right> ou <br clear=left> libera o texto desse alinhamento. Para posicionar o texto em ambas as margens use <br clear=all>
Parágrafo
<p> inicia um novo parágrafo acrescentando espaço entre as linhas.
Exemplo:
O documento HTML não segue<p> o padrão de formatação...
O texto acima aparece da seguinte forma:
O documento HTML não segue
(espaço entre linhas)
o padrão de formatação...
<b></b> coloca o texto em negrito.
<i></i> coloca o texto em itálico.
<center></center> centraliza o texto.
TEXTO PRÉ-FORMATADO
Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado. Usando-se a tag <pre></pre> serão mantidos os espaços e tabulações.
Exemplo:
<pre>
Existe um
recurso
para apresentar
o texto exatamente
na forma em que ele foi digitado </pre>
Este texto será mostrado na forma como foi digitado.
Existe um
recurso
para apresentar
o texto exatamente
na forma em que ele foi digitado
Para inserir espaço entre palavras usa-se &nbsp; e <p> &nbsp;</p> para espaços entre linhas.
LISTAS NÃO NUMERADAS
Para apresentar uma lista de opções não numeradas use as seguintes tags:
<ul> (tag de início de lista não numerada)
<li> item 1
<li> item 2
<li> item 3
</ul> (tag de fim de lista não numerada)
LISTAS NUMERADAS
Para apresentar uma lista de opções numeradas automaticamente, use as seguintes tags:
<ol> (tag de início de lista numerada)
<li> item 1
<li> item 2
<li> item 3
</ol> (tag de fim de lista numerada)
LISTAS DE DEFINIÇÕES
Apresenta uma série de definições, cada uma com um termo abreviado em destaque.
Exemplo:
<dl> (tag de início de lista de definições)
<dt> (tag de termo abreviado)
<dd> (defininão)
<dt> (tag de termo abreviado)
<dd> (defininão)
</dl> (tag de fim de lista de definição)
O exemplo acima poderia ser de uma lista de alimentos:
<dl>
<dt> Frutas
<dd> São alimentos comestíveis adocicados...
<dt> Legumes
<dd> São frutos secos... constituídos de um só carpelo.
</dl>
Então este exemplo é mostrado assim:
Frutas
São alimentos comestíveis adocicados...
Legumes
São frutos secos... constituídos de um só carpelo.
INSERINDO IMAGENS
Para inserir imagens use a seguinte notação:
(1) Arquivos de imagens que estão no mesmo diretório:
<img src="NomeDoArquivo">
Ex. <img src="email.gif">
(2) Arquivos de imagens que estão em diretórios diferentes:
<img src="Diretório/NomeDoArquivo">
Ex. <img src="Imagens/email.gif">
(3) Arquivos de imagens externos:
<img src="protocolo://servidor[:port]/path/filename">
<img src="http://members.tripod.com/~shibolete/constru.gif">
Para inserir imagens use a seguinte notação:
(1) Arquivos de imagens que estão no mesmo diretório:
<img src="NomeDoArquivo">
Exemplo: <img src="email.gif">
(2) Arquivos de imagens que estão em diretórios diferentes:
<img src="Diretório/NomeDoArquivo">
Exemplo: <img src="Imagens/email.gif">
(3) Arquivos de imagens externos:
<img src="protocolo://servidor[:port]/path/filename">
<img src="http://members.tripod.com/~shibolete/constru.gif">
Moldura em imagens
Use <img src="imagem.gif" vspace="30" para espaço vertical entre o texto e a imagem.
Use <img src="imagem.gif" hspace="30" para espaço horizontal entre o texto e a imagem.
Dica: Use <img src="imagem" Alt="descrição"> para uma descrição alternativa da imagem. Para usar uma imagem como link, sem borda, use < img src="imagem" border="0">
POSICIONANDO IMAGENS
Para definir a posição das imagens, usa-se 5 notações:
(1) Imagem à esquerda:
posiciona a imagem à esquerda do texto:
<img align="left" src="http://www... imagem.gif"> BorboletaTexto com imagem
alinhada à esquerda
(2) Imagem à direita:
posiciona a imagem à direita do texto:
<img align="right" src="http://www... imagem.gif">
BorboletaTexto com imagem
alinhada à direita
(3) Texto alinhado ao topo da imagem:
<img align="top" src="http://www... imagem.gif"> BorboletaTexto no topo da imagem
(4) Texto alinhado ao rodapé da imagem:
<img align="bottom" src="http://www... imagem.gif"> BorboletaTexto no rodapé da imagem
(5) Texto alinhado ao centro da imagem:
<img align="middle" src="http://www... imagem.gif"> BorboletaTexto no centro da imagem

INFORMAÇÕES DE RODAPÉ
Para inserir seu endereço na página, utilize a seguinte marcação:
<address></address>
Coloca-se no endereço o nome do autor do documento e o endereço para contato.
COMO INSERIR SEU EMAIL
Para inserir o endereço eletrônico usa-se a URL e a notação mailto.
A URL indica para onde deve ir a mensagem. A notação mailto abre o programa de correio configurado no seu navegador.
A sintaxe para o link de endereço eletrônico é:
<a href="mailto:logon@servidor">Nome do Link</a>
Exemplo:
O meu endereço eletrônico é s2705933@yahoo.com
Para inserí-lo em minha página usei a seguinte notação:
<a href="mailto:s2705933@yahoo.com">Envie-me um email</a>
Para usar uma imagem como link para seu email, use a seguinte notação:
<a href="mailto:login@provedor.com"><img src="imagem.gif"></a>
Não se esqueça de alterar o texto login@provedor.com pelo seu login e pelo nome do seu provedor de email, bem como alterar "imagem.gif pelo nome de sua imagem.
INSERINDO BARRAS
Para inserir barras horizontais basta utilizar a seguinte tag: <hr>. Esta tag é ímpar e não possui par.
Para exibir uma barra normal, use: <hr>

Grossura das Barras
Para exibir barras mais grossas, use o termo size (volume) em conjunto com a tag <hr>
<hr size=5>
<hr size=10>
<hr size=15>
<hr size=20>
Largura das Barras
Para controlar a largura das barras use a palavra width e a porcentagem com o sinal de igual. Exemplo:
<hr align="Left" Width="50%">
Alinhando as Barras
Para alinhas as barras use as palavras Left, Right ou Center para alinhar à esquerda, à direita ou centralizar a barra. Exemplo:
<hr align="Left" Width="50%">
<hr align="Right" Width="50%">
<hr align="Center" Width="50%">
Barras Animadas
Para inserir barras animadas (imagens gifs) use a sintaxe de inserção de imagens:
<img src="http://www... barra.gif">

TAGS ESPECIAIS
As notações presentes em marcações, devem ser representadas com notações especiais para que possam ser exibidas na tela. Estas notações especiais sempre se iniciam por & (E comercial) e encerram-se com ; (ponto e vírgula).

Notação

Descrição

Aparência
&lt;

Maior que

>
&gt;

Menor que

<
&amp;

E comercial

&
&quot;

Aspas duplas

"
&reg;

Marca registrada

®
&copy

Copyrights

©
É possível utilizar padrões de acentuação do Windows em documentos HTML, no entanto apenas poderá visualizar a acentuação o computador que reconhecer este padrão específico.
Para permitir a visualização de caracteres das marcações, por um grande número de máquinas, use o padrão ISO-Latin Alphabet, conforme tabela abaixo:
Caracter

Notação
Acento agudo

&xacute; onde x é uma letra qualquer, maiúscula ou minúscula
Acento grave

&xgrave; onde x é uma letra qualquer, maiúscula ou minúscula
Acento circunflexo

&xcirc; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com til

&xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com trema

&xuml; onde x é uma letra qualquer, maiúscula ou minúscula
Cedilha

&Ccedil; = Ç ou &ccedil; = ç
Letras unidas

&Aelig; = Æ ou &aelig; = æ
Letra com argola

&Aring; = Å ou &aring; = å
N com til

&Ntilde; = Ñ ou &ntilde; = ñ
O cortado

&Oslash; = Ø ou &Oslash; = ø

Tutorial Photoscape

Um programa para você trabalhar e editar suas imagens de várias maneiras. O primeiro passo é escolher uma das opções de edição localizadas na Barra Superior do programa, ou pelos ícones apresentados ao lado direito da tela, em seguida abrir a imagem a ser modificada e depois aplicar os efeitos.

Editando as imagens

Escolha a opção Editor, referente à edição das imagens. Por meio do menu esquerdo, localize a sua pasta de imagens, para então aplicar efeitos nelas. Basta clicar uma vez em cada opção, para os subníveis serem abertos.
Assim que localizar e clicar na pasta com as fotos a serem editadas, pode-se observar cada uma das imagens em tamanho miniatura. Clique na imagem a ser editada.
Aplicando efeitos de transição

Sépia e Preto & Branco

PhotoScape apresenta inúmeras opções para edição. O Painel de Edição apresenta um ícone com cores gradientes em marrom chamado "Sépia" ou cinza denominado "Grayscale". Com isto, pode-se transformar fotos coloridas em imagens sépia e preto & branco, respectivamente.
Inserindo molduras às imagens

Você pode escolher uma moldura para aplicar à imagem, deixando-a como se fosse um porta-retrato. Clique na alça "Frame" e faça sua escolha.
Alterando brilhos e contrastes

Para editar brilhos e contrastes nas imagens, clique no botão "Bright, Color".
Assim, será aberto o painel para alteração de brilho e contrates. Por meio de barras, define-se a porcentagem de edição. Opções como modificação de saturação e espessuras também são permitidas.
Aplicando filtros

Os filtros são as opções que dão efeitos às imagens. Clique no botão "Filter" e escolha uma das opções.
Para aplicar um efeito de imagem cristalizada, clique na opção "Cristalize"
Texturas para a superfície das imagens

É possível escolher várias texturas para as imagens, como aplicação de flores, por meio da opção "Flower", linhas diagonais "Line_Diagonal", quebra-cabeça com a opção "Puzzle", entre outros.
Redimensionando o tamanho das imagens

Para redimensionar o tamanho das imagens, clique na opção "Redimensionar" ou "Resize". Você pode definir o valor de pixels horizontais e verticais, para deixar a imagem em um tamanho adequado.
Auto-ajustes

Alguns dos botões centrais do PhotoScape apresentam a opção de ajustes automáticos para as suas imagens. São eles:
•Auto level: para suavizar o brilho da imagem

•Auto contrast: para aplicar contrastes automáticos à imagem

•Sharpen: opção para realçar a fotografia como traços mais nítidos

•Bloom: aplicação de efeitos esfumaçados à foto

•Backlight: opção para escurecer regiões das imagens
Desfazendo as aplicações
Caso aplique algum efeito, filtro ou contraste que não tenha gostado, pode clicar no botão "Undo", desfazendo assim a última aplicação, bem como escolher a opção "Undo All" para desfazer todas as aplicações realizadas na fotografia.
Salvando as modificações

Para salvar o efeito aplicado à imagem, clique no botão "Save".
Aparecerão três opções para você salvar a imagem:

•Save: Para salvar as alterações no próprio arquivo, ou seja, todas as aplicações feitas na imagem serão salvas no arquivo, não sendo localizada a versão anterior à edição.
•Save in the designated folder: Opção que possibilita salvar a imagem editada em um diretório específico. Basta clicar no botão ao lado da opção e escolher o diretório. Com isto, a imagem original, sem edições, continuará disponível no seu computador.
•Save As: Para salvar as modificações na imagem em um outro formato, bem como em outro diretório.
Inserindo efeitos de coleções

A aba "Batch Editor" apresenta uma coleção divertida para edição das imagens. Deve-se localizar a imagem a ser alterada, clicar em cima dela e arrastá-la para a área de edição.
Abas de edição

O menu esquerdo apresenta três abas para edição. A opção "Home" apresenta várias molduras para aplicação nas imagens.
A opção "Filter" permite a inserção de filtros com efeitos, ajustes de brilho, contraste, entre outros.

A aba "Object" possibilita a inclusão de objetos de uma coleção de imagens do PhotoScape às imagens, deixando cada uma delas com toques mais divertidos. Clique na opção "Photo 1" e escolha o primeiro objeto a incluir. É possível inserir até 4 objetos. Desta forma, marque a opção "Photo 2" para a inclusão do segundo, "Photo 3" o terceiro e, consequentemente, "Photo 4" para o último objeto
A coleção de objetos do PhotoScape é imensa, contendo desenho com temas natalinos, faces de bonecos, estampas, maquiagens para inclusão de óculos, bigodes ou lágrimas, corações diversos, materiais de escritório, números e ilustrações gerais
Fazendo montagens


A criação de montagens com as fotografias é simples e rápida. Clique na aba superior do programa a opção "Page".
O menu direito apresenta várias opções com layout de montagens. Escolha o modelo que mais lhe agrada para criar a montagem. Na opção "Background" defina uma cor para o fundo deste mural ou por meio da opção "Size" aumente e diminua o tamanho da área para montagem.
Localize as fotos que farão parte do mural, selecionando-as pelo menu esquerdo. Assim que escolher, arraste-a para o campo da montagem.

Repita o procedimento até completar todo seu mural com suas fotografias.
Aplicação de efeitos na montagem

Cada um dos murais de montagens feitos pode receber a aplicação de efeitos de edição, como aumento ou redução de brilho e contraste, inclusão de molduras, entre outros
Combinação de fotos

Além da criação de murais com montagens de fotos por meio da opção "Page", você pode criar mais um mural automático no PhotoScape.


Escolha a opção "Combine", na aba superior do programa
Criando montagens automáticas

Para fazer a combinação com as fotos automaticamente, basta abrir a pasta de imagens no menu esquerdo, escolher uma delas, clicar e arrastá-la até a área de edição do programa. Repita o processo com quantas fotos achar necessário.
Menu direito e opções de visualização

O menu direito da opção "Combine" apresenta as opções para visualização destes murais de fotografias. Além disto, é possível redimensionar as imagens, por meio da opção "Resize Ratio", selecionar tamanhos de margens, definir espaçamentos separando cada uma das imagens e até inserir molduras oferecidas pelo PhotoScape.
Visualização vertical

Aba "Down" possibilita a visualização das imagens organizadas em forma vertical, ou seja, um em baixo da outra.
Visualização horizontal

Para verificar as imagens uma ao lado da outra, clique na aba "Side".

Visualização em colunas

A aba "Checker" possibilita a visualização das combinações de fotos organizadas em colunas. Você define o alinhamento vertical e horizontal das imagens, bem como o número de colunas para apresentação desta combinação.
Crie animações com facilidade




Na aba superior do programa, escolha a opção AniGif. Ela vai permitir a criação de animações e dos famosos "Emoticons" encontrados no MSN, por exemplo.
Pelo menu esquerdo, selecione e arraste a imagem que deseja para a animação. Inclua quantas quiser. Na parte superior, você consegue verificar quais as imagens já inseriu para a animação.
Menu de edições

O menu direito apresenta as opções para se incluir efeitos nas animações.
Conheça mais cada uma das opções

•Add: permite adicionar uma imagem salva em um diretório do seu computador à animação.
•Save: opção para você salvar a animação criada.
•Web Browser Preview: possibilita a visualização da animação diretamente no seu navegador.
•Change time: opção para alteração do tempo de transição entre cada uma das imagens.
•Chenage effect: permite modificar os efeitos de transição de cada uma das imagens.
•Resize Ratio: possibilita o redimensionamento do tamanho das imagens.
•Background color: opção para alteração da cor de fundo da animação criada.

Impressão das imagens

Apesar de parecer muito comum, a função de impressão do programa é muito mais completa do que você está acostumado e permite imprimir suas fotos com muito mais controle e precisão.

Clique na aba "Print" na aba superior dom programa, para abrir a página de edição da impressão.
Pode-se escolher as fotos para a impressão por meio do menu esquerdo, selecionando e arrastando a imagem até a página de criação.
Menu de edição

O menu direito desta opção permite a edição do arquivo para impressão. As opções são as seguintes:

•Add: para adicionar imagens novas à impressão.
•Print: para enviar diretamente o arquivo para impressão, de acordo com a impressora configurada como padrão.
•Print Setup: opção para escolhe de impressora, tamanho e qualidade de papel.
•Aba Portrait shot print: você determina o tamanho em centímetros de cada uma das imagens e escolhe a opção de formato Paisagem ou Retrato que a imagem vai assumir.
•Photo size: verifica o tamanho em milímetros das imagens.
•Stretch: define o tamanho da imagem de maneira expansiva ou "esticada".
Paper full: determina o tamanho da imagem de acordo com o espaço permitido para a impressão.
•Image full: deixa a imagem em tamanho completo na área de montagem para impressão.
•DPI: esta é a sigla de "Dots per Inch" ou Pontos por Polegada. Pode-se escolher valores de 72, 96, 120 e 300 DPIs.
•Photo Align: possibilita determinar o alinhamento das fotos, como ao centro, esquerda, direita, acima ou abaixo.
PhotoScape é um programa completo, apresentado opções diversas para você deixar as suas fotografias ainda mais bonitas, repletas de efeitos e em montagens, sendo perfeito para quem adora inovar no álbum de fotos do Orkut.

Para Download entre no menu "Utilidades".

　
　
　
　
　

Tutorial Twitter

Guia completo sobre o que é o Twitter, para que serve, como mandar mensagem, como responder a alguém e ainda como usar no MSN e no ORKUT.
Conheça o Twitter, a nova febre da internet, baseada no “slogan” que você coloca no MSN e nos scraps que você manda no orkut. Não fique de fora dessa moda!
O que é o Twitter?
O Twitter é uma comunidade de amigos e pessoas desconhecidas que mandam updates, flashes do que elas estão fazendo no momento ou o que ela quer você preste atenção.
Tal como no MSN e no novo Windows Live Messenger, onde aparece o nick do seu amigos e uma mensagem um cinza que pode ser definida por você, o Twitter é uma cópia da mensagem em cinza, ele permite que você coloque mensagens extremamente curtas, as quais serão enviadas para todos seus amigos.
Parece bobo, mas é SUPER LEGAL, pois você fica atualizado no que o seu amigo está fazendo, o que ele está lendo e o que ele pretende fazer.
Por lá, vemos muito “Indo a academia”, “Estudando cálculo”, “Acidente mata 320 pessoas em uma colisão na Marginal Tietê” e assim vai.
Para que serve o Twitter?
Para ler as notícias, em especial do Twitter da BBCBrasil e do Veja Isso
Para manter-se informado sobre tudo o que seus amigos estão lendo
Saber o que os seus amigos estão fazendo
Comentar sobre os outros
Mandar micro-scraps
Como usar o Twitter?
É bem simples, alias para alguns, simples demais.
Primeiro você precisa se cadastrar. É fácil e rápido (mas é em inglês, mas é bem basico! Tem muitos brasileiros usando!) . Coloque seu nome e na tela de usuário, coloque um nome fácil das pessoas lembrarem, pois caso elas queiram mandar uma resposta para você, elas irão precisar digitar seu nome e se seu nome for X.371T3.0, tenho certeza que você não irá receber tantos recados.
A única coisa que você tem que fazer é colocar uma mensagem que diz 1 O que você está fazendo, ou 2 Algo que você está vendo ou 3 Algo que você quer fazer ou até 4 Algo que você quer que os outros vejam.
FPRIVATE "TYPE=PICT;ALT=twitter-onde-escrever-resposta"
Você só pode colocar 140 caracteres (ou seja, 140 letras, sendo que a barra de espaço também conta!) como mensagem sua.
Essa mensagem vai ficar aparecendo como sua mensagem atual e será enviada para todos os seus seguidores (followers). O Twitter também é social, ou seja, você também pode guardar seus amigos, tornando-se assim um follower (seguidor). Toda vez que seu amigo mudar a mensagem dele, você irá receber a mensagem na sua página do Twitter.
Mesmo que você troque sua mensagem, ela ficará armazenada na sua página pessoal, na parte de arquivo.
CUIDADO, não dá para editar a mensagem, portanto pense bem antes de escrever.
Como adicionar amigos ao Twitter?
Você simplesmente precisa ir até a página dele e clicar em FOLLOW, ou seja, Seguir, tornando-se um Follower e recebendo que ele colocar daqui para frente.
O botão follow fica logo abaixo da imagem que ele adicionou ao twitter.
Como respondo diretamente a mensagem que alguém enviou?
Naquele mesmo campo onde você altera sua mensagem, você digita a mensagem que você quiser, mas adiciona no final @nomedapessoa.
Para enviar mensagem para a WS Sites por exemplo, você vai precisar digitar o seguinte no seu espaço de texto:
Blah blah blah blah @wssites
Dá para encontrar meus amigos no Twitter?
Sim, simplesmente use a barra de procurar, acima das fotos das pessoas que você está seguindo.
Dá para acessar o Twitter através de programas?
Sim, tem vários programas que facilitam o uso do Twitter.
Tem um Plugin do Firefox, o Add-on chamado Twitterfox
Por email, usando o Twitter Mail
Através do MSN, do Google Talk, ICQ e outros clientes de mensagem
Pelo celular (muito usado nos EUA, pois é barato)


Além de usar o Twitter pela própria página do Twitter, você pode baixar diversos programas que permitem que você leia os Tweets (mensagens) diretamente do seu computador, e nós mostramos os Melhores programas para usar o Twitter aqui.
PS: Participe também da Tuiterfera e faça parte da comunidade Brasileira no Twitter.
Espero que com esse tutorial você tenha entendido como usar o Twitter, como enviar Tweets e como responder a Tweets. Seja bem vindo ao Twitter!
HCMAU.

Tutorial Ardamax Keylogger

Ardamax Keylogger é um ótimo keylogger invisível que com ele você pode gravar tudo que foi digitado no seu computador em um arquivo log, que pode ser visto como texto ou Página da web. Use este keylogger para saber o que está acontecendo em seu computador quando você estiver ausente, mantiver um apoio de seus dados datilografados automaticamente. Lembrando que, ele possui utilitário de instalação e desinstalação.
Instalando Ardamax KeyLogger:
Depois de ter baixado e executado o Ardamax em sua máquina, siga os passos abaixo:
1ª Tela -> I Agree
2ª Tela -> Next
(Recomendo deixar tudo marcado como está.)
3ª Tela -> Install
(Escolha um local onde deseja instalá-lo!
4ª Tela -> Finish
Obs.: Depois de ter clicado em "Finish" na última tela, automaticamente estara finalizando a instalação do mesmo, em seguinda, aparecerá um ícone dele na barra de tarefas.
Fim da instalação.
Registrando seu Ardamax:
Depois de ter instalado-o, vamos registrá-lo para que possamos usá-lo de uma forma mais adequada. Clique com o botão direito do mause no ícone do ardamax no canto inferior direito, e logo em "Enter Registration key". Depois coloque o serial
1° Passo: Clique com o botão direito do mouse e vá em "Remote Installation"
2° Passo: Após ter clicado em "Remote Installation", vai abrir uma janelinha, que é nesta janelinha que iremos configurar e criar nosso server. Mas vamos ao que interessa
1ª Tela: Avançar

2ª Tela: Em “Appearance” nós iremos juntar algum arquivo com o nosso keylogger, no caso abaixo iremos testar com um joguinho chamado “Paciência Spider”.Deixe a opção "Append keylogger engine to file or another application" habilitada que servirá para nós juntar o server com o jogo (Server+Executável) caso contrário não darás para juntar com algo, ou seja, irá criar somente o server.

Depois clique em Avançar.
3ª Tela: Em “Invisibility” irei explicar tudo e o porquê de deixar tais opções marcadas.

Traduzindo:
- HIDE TRAY ICONE: esconder o ícone perto do relógio no canto inferior direito. MARQUE.
- HIDE THE PROGRAM FROM CRTL+ALT+DEL: Esconder do ctrl alt del , pode marcar.
- REMOVE SHORTCURTS FROM START MENU: Não vai deixar nada lá no Iniciar da vítima. Marque
- REMOVE DE PROGRAM FROM UISNTALTION LIST: Tirar a opção de desinstalar o Ardamax pelo
ADICIONAR/REMOVER PROGRAMAS, Marque.
- HIDE PROGRAM FOLDER: Esconder a pasta do Ardamax lá na pasta do windows ou system.Marque!
- HIDE THE PROGRAM: Esconde o Ardamax da lista dos programas que iniciam com o windows, marque!
4ª Tela: Em “Security” iremos deixar desabilitado, não é necessário colocarmos senha no server, acho isso inútil.Clique em "avançar".

5ª Tela: Em “Web Update” desabilite tudo, não podemos deixar quaisquer tipos de pistas para a vítima.

Clique em "Avançar".

6ª Tela: Em “Options” deixe as duas opções habilitadas, vejamos o porquê agora.
- Run on Windows startup: Funcione na partida de Windows.
- Start in hidden mode: Comece na modalidade escondida.

Em "Hidden mode on", de preferência mude as teclas de atalhos, coloque a que desejar. Em "Self desctruct on" você escolhe uma data no qual o keylogger se auto-destruirá no PC da vítima, ou seja, se você marcar qualquer dia lá, e neste dia, o keylogger (Server) é desinstalado do PC da vítima.

7ª Tela: Em “Control”, marque a opção "Send logs every" e coloque o tempo desejado no qual os logs chegarão a você, por exemplo marque 30 e chegará a cada minutos. Em "Delivery method" é a forma no qual deseja pegar os logs. Em "Include" deixe como está. Na opção "Log format" é o formado do log que será visualizado, recomendo em HTML. Em "Send only if log size exceeds" coloque o tamanho desejado dos logs a serem enviados
Depois clique em Avançar.

8ª Tela: Estamos na parte final, em "Email", iremos colocar o Servidor SMTP do e-mail . Em "Send To" é o remetente, você coloca o seu e-mail. Em "Send From" é o destinatário, coloque o seu e-mail novamente. Depois de ter colocado os E-mails em ambas, aparecerá esta mensagem de sucesso:< Obs: Nem sempre pega de primeira, tente mais duas, três vezes que com certeza dará certo. Obs 2: Só funciona em e-mail com FTP com Bol, Yahoo entre outros. Obs.: Logo em seguida, veja sua caixa de e-mail e veja se a mensagem de confirmação chegou. um "SMTP Host", ao lado terás um botão chamado "Find", clique nele e veja o que aparecerá no SMTP. 9ª Tela: Em "Control", vamos traduzir: • Enable keystrokes logging: permite registrar dos keystrokes. • Enable Clipboard logging: permite registrar de "prancheta" (Clipboard). • Enable web activity monitoring: permite a monitoração da atividade da web fotorreceptora. • Enable screenshots capturing: permite capturar dos screenshots. • Enable chat logging: permite registrar do bate-papo. Vamos deixar todas as opções marcadas. Depois clique em Avançar 10ª Tela: Em "Screenshots", isso leva para um lado pessoal. Em Target: As Opções "Full Screen" é a visualização de tela cheia dos screens, em "Active Window" é em uma janela ativa. Image Quality (Qualidade de imagem). Clique em Avançar. 11ª Tela: Bom, estamos na parte final da configuração do nosso server, agora em "Destination", vamos mudar o nome do nosso. server, o nome atual é "Install" para juntar o server com um executável que no caso é o "Paciência Spider", irei renomeiar o nome Bom depois disso, clique em "Change Icon." para alterar o ícone do nosso server e deixá-lo mais "disfarçado". Assim que tiver clicado em "Change Icon" Depois clique em Avançar. 12ª Tela: Finish! Terminamos de criar o nosso server Clique em Concluir Logo a seguir vai abrir uma pasta da instalação do Ardamax Keylogger Pronto voce criou sua server, agora é so "zipar" e mandar para a vítima por e-mail ou pelo "msn", lembrando que este conteúdo tem fins apenas para estudo com intuito de se prevenir contra eventuais ataques, não me responsabilizo pelos seus atos, lembrando que seu ant-virus "apita" quando voce for executá-lo, então desative ele primeiro ate ter concluido a criação de sua server. HCMAU.
Ardamax Keylogger 3.0 em portugues.
Para download entre em programas.