Lissão 4 de HTML - Criar um site

Lição 4: Criando seu primeiro website

Com o que você aprendeu nas lições anteriores está a alguns minutos de criar seu primeiro website.
Como?

Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.

Abra também o Notepad ( Iniciar » Programas » Acessórios):

O caminho para o Notepad

Agora, estamos prontos para começar!
O que posso fazer?

Vamos começar com algo simples. Que tal uma página que diga: "Hurrah! Esta é a minha primeira página web." Continue e você verá como isto é simples de fazer.

HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer.

A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag (nenhuma novidade nisto). Então, antes de mais nada digite "" na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores, é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando "" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas e .

A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a "cabeça" ( e ) fica em cima do "corpo" ( e ).

Seu documento agora está como mostrado abaixo:













Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e indentação (recuos), como mostrado no exemplo acima.

Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma página particularmente chata e provalvelmente nada parecido com o que você sonhou fazer quando começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um template base para seus futuros documentos HTML.
Até aqui tudo bem, mas como colocar conteúdo no meu website?

Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página.

Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é :<br /><br /><br /><title>Minha primeira página web



Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags "body".

Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira página web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:


Hurrah! Esta é a minha primeira página web.





A letra p na tag

é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo.

Seu documento HTML agora está como mostrado a seguir:





Minha primeira página web



Hurrah! Esta é a minha primeira página web.








Pronto! Você acaba de construir seu primeiro website!

Agora basta que você salve seu trabalho no HD e depois visualize no navegador:

* No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".
* Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
* Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um documento HTML. A extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade.

Salvando o documento

Agora vá ao seu navegador:

* No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir".
* Clique em "Procurar" no box que aparece.
* Localize o seu documento HTML e clique em "Abrir".

Abrindo o documento

Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!

Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas começou.

Lissão 3 de HTML - Criar um site

Lição 3: O que são tags HTML?

Você já está em condições de aprender a chave do HTML - tags.
"Tags"?

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: e tags de fechamento: . A diferença entre elas é que na tag de fechamento existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.

Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag
.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.
Você pode mostrar alguns exemplos?

OK, a tag informa ao navegador que todo o texto colocado entre e deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)

Exemplo 1:


Este texto deve ser em negrito.

Vai ser apresentado no navegador, como mostrado a seguir:
Este texto deve ser em negrito.

As tags

,

,

,

,

e
informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ), sendo

o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho de texto,

o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor e

o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.

Exemplo 2:


Este é um título


Este é um sub título



Vai ser apresentado no navegador, como mostrado a seguir:
Este é um título
Este é um subtítulo
As tags devem ser escritas com letras maiúsculas ou minúsculas?

Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas., ou normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.
Onde devo colocar todas estas tags?

Você deve escrever suas tags em um documento HTML. Um website é constituido por um ou mais documentos HTML. Quando você navega na Web, você está abrindo diferentes documentos HTML.

Se você passar para a próxima lição, em dez minutos estará construindo seu primeiro website.

Lissão 2 de HTML - Criar um site

Lição 2: O que é HTML?

Esta lição apresentará à você seu novo amigo, o HTML.
O que é HTML?

HTML é a "língua mãe" do seu navegador.

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu "View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).

Ver o codigo fonte

Para quem não conhece, o código HTML pode parecer complicado, mas este tutorial irá tornar as coisas claras para você.
Para que devo usar o HTML?

Se você quer construir websites terá que conhecer HTML. Mesmo que você use um programa para criar seu website, tal como o Dreamweaver, um conhecimento básico de HTML será necessário para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como construir seu primeiro website.

HTML é usado para construir websites. É simples!
OK, mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber por enquanto. Contudo, vamos detalhar isto.

* Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caçado por gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net.
* Text é texto e não há mais nada a acresentar.
* Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc
* Language significa linguagem e é exatamente o que HTML é; uma linguagem. A linguagem HTML usa muitas palavras do inglês.

Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que nada mais é do que uma maneira mais bem estruturada de escrever HTML.

Agora que você já sabe o que é HTML (e XHTML) vamos começar aplicando eles para: construir websites.

Lissão 1 de HTML - Criar um site

Lição 1: Vamos começar

Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website.
O que é necessário?

É muito provável que você já tenha as ferramentas que precisa.

Você tem um "navegador". Navegador é um programa que permite visualizar e navegar por páginas na Internet. Você está lendo está página em um navegador.

Não importa qual navegador você usa. O mais comum é o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.

Você já deve ter ouvido falar ou até mesmo pode já ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem - criar websites para você. Por ora, esqueça estes programas! Eles não têm qualquer utilidade para você na tarefa de codificar seu website.

Você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas » Acessórios):

Caminho para o Notepad

Se você não tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou Simple Text (Mac).

Notepad é um editor de texto básico e simples, mas excelente para codificação, porque não interfere no que você está digitando. Com ele o controle é todo e somente seu. O problema com programas que criam o website para você, é que eles vêm com uma série de funções pré-instaladas para você escolher. Tudo deverá ser projetado para se encaixar nestas funções padrão. Assim, muitas vezes não é possível criar exatamente aquilo que você planejou. Ou - mais frustante ainda - os programas inserem modificações no código que você cria. Usando o Notepad ou qualquer editor de textos simples você é o único responsável pelo acertos ou pelos erros do seu código.

Um navegador e o Notepad (ou editor similar) é tudo o que você precisa para acompanhar este tutorial e construir seu website.
Preciso estar online?

Não. Você não precisa estar conectado à Internet - tanto para ler este tutorial como para construir seus websites.

Se você quer desconetar-se enquanto lê este tutorial, você poderá imprimir ou simplesmente desconectar-se da Internet enquanto lê a tela. Você pode construir seu website no HD do seu computador e fazer o upload para a Internet quando terminar.
O que vem a seguir?

Passe para a próxima lição e leia sobre o HTML antes de começarmos a diversão a partir da Lição 3.

Tutorial de Hoje : Fireworks (Parte 3 ) - Trabalhando com Curvas

Bom Amigos,
Irei trabalhar nesse tutorial um dos pontos mais questionados do Fireworks MX. É uma técnica razoávelmente simples, mas que exige uma certa prática. Vamos pensar da seguinte forma: Você vai atribuir certos ponto na tela e interligá-los através retas. Essa são as retas que você poderá transformar em curvas.

Vamos começar...


Abra um documento novo, com fundo branco e 400x300 px. Seleciona a ferramenta Caneta (pen tool).



É através dessa ferramenta que vamos atribuir os pontos na imagem. Então mãos a obra: Defina uma cor para o contorno e para o preenchimento de seu desenho, e através da ferramenta caneta, clique na tela e faça um ponto na tela. Logo depois, em outro lugar na tela, clique, segure e arraste o cursor do mouse. Você perceberá que devido ao movimento do cursor, novas curvas vão se formando.




Vimos que uma curva se formou. Em um lugar adiante, faremos o mesmo procedimento. Clique, segure e arreste, mas para o lado contrário, a fim de formarmos um "S".




Agora vamos editar essa linha. Vemos que temos 3 pontos formados, certo? Se clicarmos nos pontos das extremidades com a caneta, podemos dar continuidade à linha, ou se clicarmos nos pontos do meio (no caso só temos um), podemos extinguir pontos. Você ainda pode alterar a curva formada por um ponto, clicando e arrastando-o. No entanto, podemos fazer alterações mais significativas com a ferramenta Selecionar Secundário (subselection tool - a setinha branca). Podemos, se clicarmos, e arrastarmos um dos pontos, alterarmos seu posicionamento , algo que não era feito pela Caneta. Porém, se você clicar em algum dos pontos, ele vai exibir algumas guias.




Clicando nos pontos de cada guia, damos mais precisão às nossas curvas e podemos moldá-las do modo que desejarmos. Pressionando a tecla ALT , alteramos as curvas individualmente e com SHIFT alteremos sua rotação em 45º. Bom para começar é isso. Agora mãos à obra.

Tutorial de Hoje : Fireworks (Parte 2 ) - Interação Fireworks x Flash

Essas comparações são as vezes providas de WebDesigners e designers que não tiveram ainda a oportunidade de obter informações e técnicas concretas para utilizar o Fireworks e tudo o que ele pode oferecer de melhor em matéria de designer da Web, a breve comparação ao Photoshop normalmente é relevante ao tratamento digital de imagens, mas o que estamos levando em questão aqui, é o quanto Fireworks nos ajuda no desenvolvimento de sites, e realmente, não pode-se tirar o mérito do gigante Photoshop, ele realmente é impecável para o que foi desenvolvido, tratamento de imagens..., como Fireworks é impecável para seu foco, criação para Web.

Dentre as grandes vantagens em se trabalhar com softwares da mesma família, está a integração entre eles, como CorelDRAW e Corel Photopain, Illustrator e Photoshop, assim também funciona a família Web da Macromedia; Fireworks X Flash X Dreamweaver.

O exemplo a seguir, revela a técnica ideal para se criar essa animação que está acontecendo abaixo, partindo de uma arte feita em Fireworks, e animada em Flash.

Vamos seguir os passos:

1. Desenvolver a criação propriamente dentro do Fireworks com todos os efeitos e recursos que você já sabe usar, caso ainda não saiba muito, continue acompanhando a coluna que em breve estarei demonstrando também recursos de construção de objetos e efeitos.

2. Após ter utilizado os recursos de multiply em camadas ou nos objetos, o segredo do sucesso da exportação para o Flash consiste em converter todos os elementos com efeitos editáveis em bitmap, mas isto só se faz no momento da exportação para Flash, durante a edição, é necessário os elementos ainda estarem em estado de edição.

Para efetuar a conversão, clique com o botão direito do mouse sobre o objeto e selecione "Convert to Bitmap".

A conversão das fontes também se faz necessário, pois o arquivo exportado ao final, irá armazenar o texto, porém nem a fonte, nem a formatação correta.

3. Finalizados os procedimentos de conversões, basta um clique com o botão direito do mouse na área externa cinza do arquivo e solicitar Export ou Export Preview. a diferença entre ambos é que no Preview, é possível fazer todas as modificações de formato de saída.

Agora, na tela abaixo, é onde você configura o formato de saída do arquivo, mas no caso, não é necessário a configuração de absolutamente nada pois vamos usar a exportação SWF do Fireworks.

Esta é mais uma boa dica, o melhor formato de entrada de arquivos no Flash é o que ele próprio gera, SWF, e quanto aos bitmaps? o que acontece com eles?

Os bitmaps que são incluídos no Flash por esse método tornam-se ineditáveis, porém, já são exportados em formato PNG8, ou seja, mantendo o canal alpha de suas transparências intactas, evitando assim o velho serrilhado branco do gif, que a tempos deixou de ser um problema desde o surgimento do formato PNG.

Para efetuar a exportação, portanto basta clicar em "Export".

Nessa próxima tela, configura-se o loval da exportação e tipo de objeto a ser gerado, estarei explicando todos eles ao decorrer das matérias.

Selecione "Macromedia Flash SWF", em seguida em "salvar", a partir daí você já possui um arquivo SWF perfeito, vamos ao próximo passo agora.

4. Abra o Flash, e em um arquivo novo, importe o SWF exportado pelo Fireworks. (acesso por file/import ou Ctrl+R).

Logo em seguida, você tem o arquivo SWF importado com todos os elementos separados e dispostos na biblioteca do Flash para utilização, para os mais conhecedores de Flash, sabem que já que todos são symbols, não haverá mais a necessidade de criação de motion tween, que geram novos symbols e começam a sobrecarregar o tamanho final do arquivo, dessa forma todos os elementos ja estão prontos também para serem distribuídos em camadas e animados separadamente e receberem qualquer modificação pelo painel efect.

Veja abaixo uma demonstração de como você pode movimentar livremente cada elemento dentro do Flash, repare nos elementos bitmaps que conseguem dentro do Flash simular o efeito de" Multiply", as perfeitas transparências sem serrilhados brancos ou qualquer outro impecílio.

Exemplo dos elementos já distribuídos em layers no Flash, com a animação quase finalizada.

O resultado.

Dicas:

a. Se quiser reeditar algum elemento bitmap do arquivo Flash, você pode tomar 2 procedimentos:

1. Gerar a figura separadamente no Fireworks e exporta-la em formato PNG8 com Alpha transparence;

2. Abrir o PNG no Fireworks, fazer as alterações necessárias e reexportar o arquivo SWF, desta vez com outro nome, efetuar a importação em um arquivo em branco do Flash, copiar o objeto alterado e colá-lo dentro do symbol referente ao alterado. Dessa forma, todo conjunto será alterado instantaneamente.

b. Compressão das Imagens no Flash:

1. Quando o arquivo tem saída direta do Fireworks para Flash, seu bitmaps como já foi esclarecido, dê entrada no Flash como PNG8 com Alpha transparente, sendo assim, a reconversão para JPG 50% ou qualquer outro formato torna-se desnecessária, pois o Flash, por alguma questão, trata de um jeito especial essas imagens, e o arquivo acaba ficando mais leve que se recomprimido em JPG, façam o teste se duvidarem!

c. Gradientes complexos também devem ser convertidos em bitmaps antes da exportação, já que o Fireworks possui uma biblioteca de gradientes mais evoluída e com mais tipos padrões em relação a do Flash.

Tutorial de Hoje : Fireworks (Parte 1 ) - Texto 3D

1º Passo

1: Abra o Fireworks

2: Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento", conforme mostrado na figura abaixo.

3: Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para:

4: Largura: 500 pixels - Altura: 600 pixels

5: Cor da Tela: #66CCCC. Tecle OK.



2º Passo

::O texto::
1: Clique na ferramenta texto;

2: Defina a cor de preenchimento branca;

3: Clique e arraste o cursor no palco para inserir a área de texto e digite seu texto.

4: Neste tutorial digitamos "Texto 3D" conforme mostrado na próxima figura .



3º Passo

::Um contorno::
1: Selecione o texto digitado;

2: Abra o painel de cores do botão traços;

3: Escolha uma cor para o traço. Escolhi um cinza escuro neste tutorial.



4º Passo

E agora a mágica!

Com o texto selecionado pressione a tecla "Alt" e mantendo-a pressionada vá teclando, seta para direita e depois seta para cima. Observe o que vai ocorrendo no palco a medida que você age nas teclas de setas.

Agora vá experimentando seta para baixo, para cima e para esquerda e você vai constatar que poderá controlar o efeito como quiser.

Neste tutorial usei tecla para direita sete vezes e depois para cima duas vezes.



5º Passo

::O retoque final::
Depois de aplicado o efeito 3D.

1: Selecione o texto;

2: Abra o painel de cores do botão traços;

3: Retire o traço desta primeira camada selecionada e pronto!



Parabéns, Seu texto ganhou um efeito 3D !!

Até o próximo Tutorial, qualquer dúvida e só entrar em contato!!


By : Azilado Virtual