segunda-feira, 12 de dezembro de 2011

Você pode adicionar atributos às tags.

O que é atributo?

Como você deve estar lembrado, uma tag é um comando para o navegador (por exemplo, <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:

 <h2 style="background-color:#ff0000;">Eu adoro HTML</h2>
 
   
Atributos 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:

 <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: Carta das 216 cores seguras para a Web.
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:

 <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 (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 7: Atributos

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

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

E agora?

Agora vamos aprender mais sete tags.
Você já sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itálico - letras inclinadas - com a tag <i>. Já percebeu não é?, "i" vem de "italic".
Exemplo 1:

 <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 <small>:
Exemplo 2:

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

 <b><i>Texto em negrito e itálico.</i></b>
 
 
 
E não assim:

 <b><i>Texto em negrito e itálico.</b></i>
 
 
 
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </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 <br /> que serve para criar uma quebra de linha:
Exemplo 4:

 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: <br />. A princípio podemos escrever também <br></br> (sem conteúdo), mas para que complicar?
Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):
Exemplo 5:

 <hr />
 
 
Será renderizado no navegador assim:

Exemplo 6:

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

 <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

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:

 <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 6: Mais tags HTML

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

 <html>
 
   <head>
     <title></title>
   </head>
 
   <body>
   </body>
 
 </html>
 
 
Coloque sempre o título do seu documento na seção head: <title>Título da sua página</title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:
Titulo mostrado no 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:

 <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 5: O que você já aprendeu?

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 <html> (nenhuma novidade nisto). Então, antes de mais nada digite "<html>" na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores, <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 "</html>" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <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" (<head> e </head>) fica em cima do "corpo" (<body> e </body>).
Seu documento agora está como mostrado abaixo:

 <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 é <title>:

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

 <p>Hurrah! Esta é a minha primeira página web.</p>
 
 
A letra p na tag <p> é 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:

 <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.
Salvando o documento
Agora vá ao seu navegador:
  • No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir" (CTRL+O).
  • 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.

Lição 4: Criando seu primeiro website

Agora você está pronto para aprender a essência do HTML: elementos.
Elementos dão estrutura a um documento HTML e informa ao navegador como você quer seu Web site a ser apresentado. Geralmente elementos consiste de uma marca de início, algum conteúdo, e uma tag final.

"Tags"?

Tags são etiquetas que utiliza para marcar o início eo fim de um elemento.
Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e terminam com um sinal de maior ">".
De modo geral, existem dois tipos de tags - tags de abertura: <html> e marcas de fechamento: </ html>. A única diferença entre uma tag de abertura e uma tag de fechamento é a barra "/". Você rótulo de conteúdo, colocando-o entre uma tag de abertura e uma tag de fechamento.
HTML é tudo sobre os elementos. Para aprender HTML é aprender e usar marcas diferentes.

Você pode me mostrar alguns exemplos?

Ok, o elemento em texto ênfase. Todo o texto entre a tag de abertura <em> ea tag de fechamento </em> é enfatizada no navegador. ("Em" é a abreviação de "ênfase".)
Exemplo 1:
<i>Emphasised text.</i> 
 
Será parecido com este no navegador:
Salientou texto.

Os elementos h1 , h2 , h3 , h4 , h5 e h6 é usado para fazer posições (h significa "título"), onde h1 é o primeiro nível e, normalmente, o maior texto, h2 é o segundo nível e texto normalmente um pouco menor, e h6 é o sexto e último na hierarquia das posições e, normalmente, de texto menor.

Exemplo 2:
<h1>Este é um título</h1> 
 <h1>Este é um título</h1> 
 
Será parecido com este no navegador:

Este é um título

Este é um subtítulo

  Então, eu sempre preciso de uma tag de abertura e uma tag de fechamento?

Como se costuma dizer, há uma exceção para cada regra e em HTML a exceção é que existem alguns elementos que tanto abre e fecha na mesma tag. Estes elementos chamados vazios não estão conectados a uma passagem específica no texto, mas são rótulos isoladas, por exemplo, uma quebra de linha que se parece com isso: <br /> .

Etiquetas devem ser digitados em maiúsculas ou minúsculas?

A maioria dos navegadores pode não se importam se você escrever suas tags em casos superior, inferior ou misto. <HTML>, <html> Ou <HTML> normalmente dão o mesmo resultado. No entanto, a maneira correta é digitar as tags em letras minúsculas. Então adquira o hábito de escrever suas tags em letras minúsculas.

Onde devo colocar todas estas tags?

Você digita suas tags em um documento HTML. Um site contém um ou mais documentos HTML. Quando você navega na Web, você simplesmente abrir diferentes documentos HTML.
Se você continuar para a próxima lição em 10 minutos você terá feito seu primeiro website.

Lição 3: Elementos e tags

Lição 2: O que é HTML?

Esta lição lhe dará uma breve apresentação do seu novo amigo, HTML.

O que é HTML?

HTML é a "língua mãe" do seu navegador.
Para fazer um short longo da história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. O objetivo era tornar mais fácil para os cientistas de diferentes universidades para ganhar acesso aos documentos uns dos outros de pesquisa. O projeto tornou-se um maior sucesso do que Tim Berners-Lee já havia imaginado. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos hoje.

HTML é uma linguagem, o que torna possível apresentar informações (pesquisas científicas) na Internet. O que você vê quando você exibir uma página na Internet é a interpretação do seu navegador de HTML. Para ver o código HTML de uma página na internet, basta clicar em "View" no menu superior do seu navegador e escolha "Source".
Exibição da fonte
Para o olho destreinado, o código HTML pode parecer complicado, mas este tutorial irá ajudá-lo a fazer sentido de tudo isso.

O que eu posso usar o HTML?

Se você quiser fazer sites, não há nenhuma maneira em torno HTML. Mesmo se você estiver usando um programa para criar sites, como o Dreamweaver, um conhecimento básico de HTML pode tornar a vida muito mais simples e seu site muito melhor. A boa notícia é que HTML é fácil de aprender e usar. Em apenas duas lições a partir de agora você terá aprendido como fazer o seu primeiro website.

HTML é usado para fazer sites. É tão simples quanto isso!

Ok, mas o que significa HTML?

HTML é a abreviatura de "HyperText Mark-up Language" - que já está mais do que você precisa saber nesta fase. No entanto, em prol da boa ordem, vamos explicar em maiores detalhes.
  • Hyper é o oposto de linear. Nos dias bons e velhos - quando um rato era algo caçado por gatos - os programas de computadores rodavam linearmente: quando o programa tinha executado uma ação que foi para a linha seguinte e, depois disso, a linha seguinte e assim por diante. Mas HTML é diferente - você pode ir onde quiser e quando quiser. Por exemplo, não é necessário visitar MSN.com antes de visitar HTML.net.
  • Texto é auto-explicativo.
  • Mark-up é o que você faz com o texto. Está marcando o texto da mesma forma que você faz em um programa de edição de texto com títulos, marcadores, negrito e assim por diante.
  • Linguagem é o que é HTML. Ele usa muitas palavras em Inglês.
Neste tutorial, você aprenderá os chamados XHTML (Extensible HyperText Mark-up Language) que, em suma, é uma maneira nova e mais bem estruturada de escrever HTML. Agora você sabe o HTML (e XHTML) vamos começar com o que tem tudo a ver: fazer websites.

Lição 2 : O que é HTML?

Lição 1: Vamos começar

Nesta primeira lição, você terá uma breve apresentação das ferramentas que você precisa para fazer um site.

O que é necessário?

Muito provavelmente você já tem tudo que você precisa. Você tem um "browser". Um browser é o programa que torna possível navegar e abrir sites. Agora você está olhando para esta página em seu navegador.
Não importa qual navegador você usa. O mais comum é o Microsoft Internet Explorer. Mas há outros, como Opera e Mozilla Firefox e todos eles podem ser usados.

Você pode ter ouvido falar ou até mesmo usado, programas como o Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que pode - ou afirmam que eles podem - criar websites para você. Esqueça esses programas para agora! Eles não têm qualquer utilidade para você quando aprender a código de seu próprio site.

Em vez disso, você precisa de um editor de texto simples. Se você estiver usando Windows, você pode usar o Notepad, que normalmente é encontrado no menu Iniciar em Programas em Acessórios:


Como encontrar o Bloco de Notas

Se você não estiver usando Windows, você pode usar um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac).

Bloco de notas é um programa de edição de texto básico que é excelente para codificação, porque não interfere com o que você está digitando. Ele lhe dá o controle completo. O problema com muitos dos programas que afirmam que podem criar sites é que eles têm um monte de funções padrão, que você pode escolher. A desvantagem é que, tudo precisa se encaixar nestas funções padrão. Assim, este tipo de programas muitas vezes não pode criar um site exatamente como você quer. Ou - mais frustante ainda - eles fazer alterações em sua mão o código escrito. Com o bloco de notas ou outros editores de texto simples, você só tem a si mesmo para agradecer por seus sucessos e erros.

Um navegador eo Notepad (ou um editor de texto similar) é tudo que você precisa passar por este tutorial e construir seu website.

Preciso estar online?

Você não precisa estar conectado à Internet - tanto para ler este tutorial como para construir seus sites.
Se você quiser evitar ser on-line durante a leitura deste tutorial, você pode imprimi-lo ou simplesmente desconectar-se da Internet enquanto lê a tela. Você pode fazer o site no disco rígido do seu computador e enviá-lo à Internet quando ele for concluído.

Fim da lição 1 pessoal, agora vamos começar de verdade.

Lição 1: Vamos começar