Como eu falo sempre um bom designer deve saber html,php,css como outros entao eu vou colocar um tuto basico

Introdução

As pessoas imaginam que é muito difícil construir um website. Isto não é verdade! Qualquer um pode aprender como construir um website.Se você continuar lendo, estará apto a construir um website em uma hora.

Outros pensam - erroneamente - que é necessário softwares avançados e caros para construir websites. É verdade que existem muitos softwares capazes de criar um website para você. Alguns mais fechados que outros. Mas, se você pretende trilhar o caminho certo, deverá criar você mesmo o website. Felizmente, isto é simples é você já tem a sua disposição todos os softwares que presisa.

O objetivo deste tutorial é fornecer os conhecimentos básicos que permitirão construir um website de forma correta. O tutorial parte do zero e não requer qualquer conhecimento prévio de programação.

O tutorial não ensina tudo. Assim é necessário que você se empenhe, pratique e consolide os ensinamento aqui contidos. Mas, não se aborreça - aprender como construir um website é divertido e bastante satisfatório quando você trilha o caminho certo de aprendizado.

Como tirar o melhor proveito do tutotial é uma decisão sua. Nós sugerimos que você estude somente duas ou três lições por dia e pratique bastante tudo o que você aprender em cada lição.

OK. Chega de conversa. Vamos começar!

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):


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.

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).



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 Forum ou site psextreme.forumeiros.com

*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.

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

Código:

<b></b>

informa ao navegador que todo o texto colocado entre

Código:

<b> e </b>

deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)

Código:

<b>Este texto deve ser em negrito.</b>

e fica assim

Este texto deve ser em negrito.

As tags

Código:

<h1>, <h2>, <h3>, <h4>, <h5> e <h6>

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

Código:

<h1>

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

Código:

<h2>

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

Código:

<h6>

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

Exemplo 2:

Código:

<h1>Este é um título</h1>
<h2>Este é um sub título</h2>

Vai ser apresentado no navegador, como mostrado a seguir:

Este é um título
Este é um sub tí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.

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):



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

Código:

<html>

(nenhuma novidade nisto). Então, antes de mais nada digite

Código:

"<html>"

na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores,

Código:

<html>

é 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

Código:

"</html>"

localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas

Código:

<html> e </html>.

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"

Código:

(<head> e </head>)

fica em cima do "corpo"

Código:

(<body> e </body>)

.

Seu documento agora está como mostrado abaixo:

Código:

<html>
  <head>
  </head>

  <body>
  </body>

</html>

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 é

Código:

<title>

Código:

<title>Minha primeira página web</title>

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:

Código:

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

A letra p na tag

Código:

<p>

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

Código:

<html>

  <head>
  <title>Minha primeira página web</title>
  </head>

  <body>
  <p>Hurrah! Esta é a minha primeira página web.</p>
  </body>

</html>

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.

Seu documento HTML agora está como mostrado a seguir:



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".

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.

Lição 5: O que você já aprendeu?

Comece sempre com o template básico que construímos na lição anterior:

Código:

<html>

  <head>
  <title></title>
  </head>

  <body>
  </body>

</html>

Coloque sempre o título do seu documento na seção head:

Código:

<title>Título da sua página</title>

. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:



O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:

Titulo mostrado no Google



Na seção body você escreve o conteúdo da sua página. Você conhece algumas das mais importantes tags:

Código:

<p>É usado para parágraos.</p>
<b>Torna o texto negrito.</b>

<h1>Cabeçalho</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

Lembre-se, o único caminho para aprender HTML é por ensaio e erro. Mas, não se preocupe, você não destruirá seu computador e nem a Internet. Então, faça seus experimentos e testes - esta é a melhor maneira de ganhar experiência.

O que significa isto?
Ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste tutorial. O que você aprenderá neste tutorial é simplesmente o básico para criação - para se tornar um bom desenvolvedor você deverá descobrir caminhos por si mesmo em maneiras criativas.

Então mãos à obra. Comece suas experiências com tudo que você aprendeu até agora.

O que fazer agora?

Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem consultar - "cola" não permitida.

Lição 6: Mais tags HTML

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir um exemplo:

Código:

<html>

  <head>
  <title>Meu website</title>
  </head>

  <body>
  <h1>Um cabeçalho</h1>

  <p>texto, texto texto, texto</p>
  <h2>Subtítulo</h2>
  <p>texto, texto texto, texto</p>
  </body>

 
</html>

Eagora?

Agora vamos aprender mais sete tags.

Você já sabe que pode obter negrito com a tag

Código:

<b>

, agora saiba que pode obter itálico - letras inclinadas - com a tag

Código:

<i>

. Já percebeu não é?, "i" vem de "italic".

EXEMPLO !

Código:

<i>Este texto deve ser itálico.</i>

Será renderizado no navegador assim:

Este texto deve ser itálico.

De modo similar você pode fazer seu texto com letra menores usando a tag

Código:

<small>

:

EXEMPLO 2

Código:

<small>Este texto deve ser com letras em tamanho small.</small>

Será renderizado no navegador assim:

Este texto deve ser com letras em tamanho small

Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente Veja como fazer isto no exemplo abaixo:

Exemplo 3:

Para escrever um texto em negrito e itálico faça como mostrado a seguir:

Código:

<b><i>Texto em negrito e itálico.</i></b>

E não assim:

Código:

<b><i>Texto em negrito e itálico.</b></i>

Observe que no primeiro exemplo a primeira tag de abertura

Código:

<b>

corresponde a última tag de fechamento

Código:

</b>

, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.

Mais tags!

Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag

Código:

<br />

que serve para criar uma quebra de linha:

Exemplo 4:

Código:

Um texto<br /> e mais texto em nova linha

Será renderizado no navegador assim:

Um texto
e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final:

Código:

<br />

. A princípio podemos escrever também

Código:

<br></br>

(sem conteúdo), mas para que complicar?

Outra tag de comando é

Código:

<hr />

que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Será renderizado no navegador assim:

---

Exemplo 6

Código:

<ul>
  <li>Um item de lista</li>
  <li>Outro item de lista</li>

</ul>

Será renderizado no navegador assim:

Um item de lista

Outro item de lista

Se for para escrever uma menssagem aqui no nosso forum nao e nessesario por o

Código:

<ul></ul>

simplesmente fica assim

Código:

<li></li>    exemplo
<li>Sly</li>

que vai fica assim

Sly

Exemplo 7:

Código:

<ol>
  <li>Primeiro item da lista</li>
  <li>Segundo item da lista</li>

</ol>

Será renderizado no navegador assim:

1. Primeiro item da lista


2. Segundo item da lista

Dessa forma ja e obrigatorio por o

Código:

<ol></ol>

Uau! Isto é tudo?
Sim, por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus próprios experimentos, construindo algumas páginas usando as sete tags ensinadas nesta lição:

Código:

<i>Itálico</i>
<small>Texto tamanho small</small>

<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista<ul>
<ol>Lista ordenada<ol>

<li>Item de lista</li>



Lição 7: Atributos

Você pode adicionar atributos às tags.

O que é atributo?

Como você deve estar lembrado, uma tag é um comando para o navegador (por exemplo,

Código:

<br />

é um comando para mudar de linha). Em algumas tags você pode ser mais específico, acresentando na tag, informações adicionais de comando. Isto é feito através dos atributos.

Exemplo 1

Código:

<h2 style="background-color:#ff0000;">Eu amo Design</h2>

tributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo. As informações quando mais de uma, devem ser separadas por ponto e vírgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.

Como é isto?

Existem vários atributos. O primeiro que você aprenderá é o atributo style.Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo:

EXEMPLO 2:

Código:


<html>
 
  <head>
  </head>

  <body style="background-color:#ff0000;">
  </body>

</html>



O código acima renderiza uma página com cor de fundo vermelha - vá em frente! experimente você mesmo, construa uma página vermelha. A seguir explicaremos como funcionam as cores.

Notar que algumas tags e atributos usam nomes do idioma inglês dos E.U.A. É muito importante que você use os nomes exatamente como mostrados neste tutorial - se você mudar uma letra que seja, o navegador não irá entender seu código. É importante também que você não se esqueça de fechar as aspas nas informações do atributo.

Como a página ficou vermelha?

No exemplo acima nós usamos o código "#ff0000" para fazer a página na cor vermelha. Eate é o código para a cor vermelha no sistema chamado de números hexadecimal (HEX). Cada cor é representada por um número hexadecimal. A seguir alguns exemplos:

Branco: #ffffff
Preto: #000000 (zeros)
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00

Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras. Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Para facilitar as coisas nós desenvolvemos uma carta com as 216 cores mais usadas na web:clica aqui

Para algumas cores, você pode usar o nome das cores em inglês (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).

Exemplo 3:

Código:

<body style="background-color: red;">

Chega de cores. Voltemos aos atributos.

Quais tags podem usar atributos?

Atributos podem ser aplicados à maioria das tags

Você normalmente usará atributos com mais freqüência em algumas tags, tais como a tag body e raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional.

Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.

Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.

Este tutorial apresentou a você, os atributos

Então, quais são as partes que constituem uma tag?

A constituição básica de uma tag é denominada elemento

Código:

(por exemplo p em <p>). Assim, uma tag é constituida de um elemento (por exemplo [<p>), ou por um elemento e um ou mais atributos (por exemplo <p style="background-color:#ff0000;">). Simples!

Lição 8: Links

Nesta lição você aprenderá como construir links entre páginas.

O que eu preciso para construir um link?

Para construir um link você usa o que tem usado até agora para codificar HTML: uma tag.Uma simples e pequenina tag com um elemento e um atributo é suficiente para você construir links para onde quiser.A seguir um exemplo de link para o forum http://www.psextreme.forumeiros.com:

EXEMPLo 1:

Código:

<a href="http://www.psextreme.forumeiros.com">Aqui um link para o Ps Extreme</a>

Será renderizado no navegador assim:

Aqui um link para o Ps Extreme

O elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "pokepalace.forumeiros.com", que é o endereço completo do forum pokepalace e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um

Código:

</a>.

Como são os links entre minhas próprias páginas?

Se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamá-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da página1.htm para a pagina2.htm é como mostrado abaixo:

EXEMPLO 2:

Código:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo

EXEMPLO 3:

Código:


<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:

EXEMPLO 4:

Código:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo o mesmo princípio você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".

Você entendeu? Como alternativa você pode usar sempre o endereço completo do arquivo (URL).

Como são os links dentro de uma mesma página?

Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#".

Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:

Código:

<h1 id="heading1">Cabeçalho 1</h1>

Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:

Código:

<a href="#heading1">Link para o cabeçalho 1</a>

Tudo fica claro com um exemplo:

EXEMPLO 5:

Código:

<html>
 
  <head>
  </head>

  <body>

    <p><a href="#heading1">Link para cabeçalho 1</a></p>
    <p><a href="#heading2">Link para cabeçalho 2</a></p>

    <h1 id="heading1">Cabeçalho 1</h1>
    <p>Texto texto texto texto</p>

    <h1 id="heading2">Cabeçalho 2</h1>
    <p>Texto texto texto texto</p>
 
  </body>

</html>


Será renderizado no navegador assim (clique nos dois links):

Link para cabeçalho 1

Link para cabeçalho 2

Cabeçalho 1

Texto texto texto texto

Cabeçalho 2

Texto texto texto texto

(Nota: O nome de um atributo id deve começar com uma letra)

Posso criar link para mais alguma coisa?

Você pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para documentos.

EXEMPLO 6:

Código:

<a href="mailto:bestmewtwo@hotmail.com">Enviar e-mail para enviar um email para Sly  em PS Extreme</a>[/b]

Será renderizado no navegador assim:

Enviar e-mail para enviar um email para Sly em PS Extreme

A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com este tipo de link clicando no exemplo acima.

Existem outros atributos que eu deva conhecer?

Par criar links você sempre usa o atributo href. Adicionalmente você pode usar um title (título) para seu link:

EXEMPLO 7:

Código:

<a href="http://www.psextreme.forumeiros.com" title="Visite o Ps Extreme e aprende tudo sobre design">http://www.psextreme.forumeiros.com</a>

Será renderizado no navegador assim:

http://www.psextreme.forumeiros.com

O atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o pokepalace e aprenda tudo sobre pokemon".

Lição 9: Imagens

O que você acha de poder adicionar uma imagem do logo do ps em sua pagina?

Ops, isto soa como um desafio...

Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:

Exemplo 1

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png" alt="PSExtreme" />

Será renderizado no navegador assim:



O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).

Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag
que não precisa de um texto inserido nela.

"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na sua página:

* GIF (Graphics Interchange Format)
* JPG / JPEG (Joint Photographic Experts Group)
* PNG (Portable Network Graphics)

Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Como você deve saber por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustantes para o usuário.

Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão.
Onde consigo minhas imagens?

Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual.

Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no mercado.

Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens chamado Infra view que é freeware, isto é, não custa nada.

Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:

1. Clique com o botão direito do mouse na imagem da Internet.
2. No menu que aparece escolha a opção "Salvar imagem como...".
3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".

Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):



Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que você criou neste tutorial.

Isto é tudo o que eu preciso saber sobre imagens?

Existem mais algumas coisinhas que você precisa saber.

Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:

Exemplo 2

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png">

Exemplo 3

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png">

Segundo, imagens podem ser links:

Exemplo 4

Código:

<a href="http://psextreme.forumeiros.com">
<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png"></a>


Será renderizado no navegador assim: (clique na imagem):




Existem outros atributos que eu deva conhecer?

Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada. Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens em uma página.

O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:

Exemplo 5:

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.pngf" alt="Logo do ps extreme">

Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo alt quando o usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais.

O atributo title pode ser usado para fornecer uma curta descrição da imagem:

Exemplo 6:

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png" title="Aprenda tudo sobre design no ps extreme">

Será renderizado no navegador assim:



Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda tudo sobre design no ps extreme" .

Dois outros atributos importantes são width e height:

Exemplo 7:

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.png" width="141" height="32">

Será renderizado no navegador assim:



Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.

Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho real. Com width e height você pode alterar o tamanho da imagem:

Exemplo 8:

Código:

<img src="http://i408.photobucket.com/albums/pp167/bestmewtwo/k33ll4.pngf" width="32" height="32">

Será renderizado no navegador assim:



Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas.

Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens) como será o layout da página.

Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.