criando um -commerce

Olá, bom dia/tarde/noite a todos!

Estou criando este post baseada em um e-mail que recebi recentemente com a seguinte dúvida: “como fazer um e-commerce?”.

.

Como funciona a criacao de sites, banners, etc?

Hoje em dia é muito fácil ter uma página própria, sem muitas dificuldades. Existem vários sites que auxiliam você nessa tarefa gratuitamente. Alguns exemplos são Webnode e uCoz, onde você faz um site sem a necessidade de conhecimentos de HTML ou CSS. Porém essas são opções para sites simples e informais, sem muitas funcionalidades e com layout (aparência) comum (muitas vezes deixando muito a desejar).

Para a criação de um site mais robusto (como sites de empresas, bandas, com aparência e funcionalidade personalizados) é recomendado contratar alguma empresa especializada para que o resultado final seja satisfatório (afinal, o site é a cara da empresa na Internet). Não adianta simplesmente fazer um site de qualquer maneira e colocar lá várias informações. O usuário de hoje em dia é mais exigente, querendo sempre algo bonito, acessível e interativo.

Para os banners é a mesma história. Existem sites que criam banners com o texto que você quer, mas suas aparências são geralmente amadoras, o que traz descredibilização para empresas que os usam. A melhor opção sempre é contratar alguém que entenda de design.

.

Como e a criação de e-commerce (comercio eletronico)?

Ao se criar um e-commerce você tem que levar em consideração que estamos falando de negócios, independente do que você vá vender. Aí a atenção já deve mudar, pois não é um simples site onde as pessoas vão visitar e ler um pouco sobre um determinado assunto. O e-commerce é um site onde as pessoas irão fazer transações comerciais, trocando dinheiro por algum produto ou serviço.

Porque estou falando tudo isso? Porque, diferente do que eu falei acima sobre sites, para se criar e-commerces você não pode simplesmente usar qualquer construtor de site, mesmo que seja um construtor próprio para e-commerce, pois sempre existe o risco de algum construtor automático ser uma fraude e “roubar” números de cartões e senhas. Por essas e outras que o e-commerce é um caso que merece maior atenção.

Algumas empresas preferem que seus e-commerces sejam criados do zero, ou seja, todas as funcionalidades e sistemas criados desde o início (o que leva muitos meses para ficar pronto). Ora, antigamente era isso mesmo que acontecia, pois não havia opções no mercado. Mas hoje é diferente…

Atualmente várias empresas especializadas em criação de sites ou hospedagem oferecem o sistema-base gratuitamente. O que precisamos fazer é apenas instalar e personalizar de acordo com as necessidades, o que leva no máximo um dia se não for feita nenhuma personalização. É o mesmo que comprar a massa da pizza já pronta no mercado e montar o restante em casa de acordo com seu gosto. Quase ninguém hoje em dia fica fazendo a massa da pizza do zero, não é mesmo?
.

.O que nós (Surgimento e outros webdesigners) fazemos é instalar o sistema já pronto e personalizar a loja com layout e módulos que o sistema-base não tem, otimizando a experiência do usuário que for comprar, e acreditem: isso faz toda a diferença! Você não serviria apenas a massa da pizza para seus convidados, não é? Por isso que eu digo que é importante fazer uma personalização. O e-commerce tem que ter a cara de sua empresa (assim como qualquer site empresarial).

Atualmente o sistema-base de e-commerce que usamos é o da Locaweb. Trata-se da Loja Exemplo.Veja aqui como é a massa da pizza, ou melhor, a aparência da loja sem personalizar:

Não muito atraente, concorda? Isso sem falar que as funcionalidades que ela tem são as básicas de um e-commerce bem simples, sem muitas opções.

Por isso resolvemos incrementar essa pizza. Colocamos nela todos os módulos grátis que você viu neste blog, e muitos outros que você não encontra nos tutoriais daqui. A loja ficou realmente muito interessante e bonita! Veja abaixo o sistema em funcionamento:

.

.

Nem parece que se trata do mesmo sistema-base (Loja Exemplo), não é? Para fazer essa personalização de layout e módulos diferentes é necessário alguém que entenda de design e programação. Qualquer tentativa sem conhecimento pode causar danos à base de dados, fazendo com que se perca tudo, desde produtos até clientes cadastrados.

O que preciso para ter essa loja mostrada acima?

Em primeiro lugar, é necessário que você assine uma hospedagem, para ter onde coloca-la. Nós sugerimos a hospedagem da Locaweb (Profissional 1, plataforma Windows) pois ela é 100% compatível com o sistema apresentado. O preço deste plano de hospedagem é R$ 29,00 ao mês. Tendo isso, basta entrar em contato conosco.

E depois, como faço para aparecer?

Um investimento que recomendo é publicidade. Dificilmente um e-commerce irá se promover se não anunciar. E como estamos falando em comércio eletrônico e não em comércio comum, a dica é fazer o anuncio em sites comparadores (que compram preços de produtos), como por exemplo Buscapé, BondFaro e Shopping Uol. Esses três citados são pagos (você paga por clique de usuário em seu produto), mas são muito bons. Você também pode procurar por classificados grátis pela Internet. São muitos, mas os resultados nesses nem sempre são satisfatórios.

.

Por fim, vale ter um bom preço em seus produtos, mas a qualidade, atendimento, organização interna e o funcionamento otimizado junto com um bom visual fazem a cabeça do cliente. E vale lembrar: o comércio é eletrônico, mas a atenção que será direcionada a ele deve ser a mesma que qualquer outro comércio físico. Não se esqueça de controlar seus estoques corretamente para não ter dores de cabeça no futuro.

Espero ter ajudado.

Tutorial de PHP

Tutorial da linguagem PHP











1. Introdução

O que é PHP?

PHP é uma linguagem que permite criar sites WEB dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. A diferença de PHP com relação a linguagens semelhantes a Javascript é que o código PHP é executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira é possível interagir com bancos de dados e aplicações existentes no servidor, com  a vantagem de não expor o código fonte para o cliente. Isso pode ser útil quando o programa está lidando com senhas ou qualquer tipo de informação confidencial.
O que diferencia PHP de um script CGI escrito em C ou Perl é que o código PHP fica embutido no próprio HTML, enquanto no outro caso é necessário que o script CGI gere todo o código HTML, ou leia de um outro arquivo.

O que pode ser feito com PHP?

Basicamente, qualquer coisa que pode ser feita por algum programa CGI pode ser feita também com PHP, como coletar dados de um formulário, gerar páginas dinamicamente ou enviar e receber cookies.
PHP também tem como uma das características mais importantes o suporte a um grande número de bancos de dados, como dBase, Interbase, mSQL, mySQL, Oracle, Sybase, PostgreSQL e vários outros. Construir uma página baseada em um banco de dados torna-se uma tarefa extremamente simples com PHP.
Além disso, PHP tem suporte a outros serviços através de protocolos como IMAP, SNMP, NNTP, POP3 e, logicamente, HTTP. Ainda é possível abrir sockets e interagir com outros protocolos.


Como surgiu a linguagem PHP?

A linguagem PHP foi concebida durante o outono de 1994 por Rasmus Lerdorf. As primeiras versões não foram disponibilizadas, tendo sido utilizadas em sua home-page apenas para que ele pudesse ter informações sobre as visitas que estavam sendo feitas. A primeira versão utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida como "Personal Home Page Tools" (ferramentas para página pessoal). Era composta por um sistema bastante simples que interpretava algumas macros e alguns utilitários que rodavam "por trás" das home-pages: um livro de visitas, um contador e algumas outras coisas.
Em meados de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o "FI" veio de um outro pacote escrito por Rasmus que interpretava dados de formulários HTML (Form Interpreter). Ele combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a mSQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir com o projeto.
Estima-se que em 1996 PHP/FI estava sendo usado por cerca de 15.000 sites pelo mundo, e em meados de 1997 esse número subiu para mais de 50.000. Nessa época houve uma mudança no desenvolvimento do PHP. Ele deixou de ser um projeto de Rasmus com contribuições de outras pessoas para ter uma equipe de desenvolvimento mais organizada. O interpretador foi reescrito por Zeev Suraski e  Andi Gutmans, e esse novo interpretador foi a base para a versão 3.
Atualmente o uso do PHP3 vem crescendo numa velocidade incrível, e já está sendo desenvolvida a versão 4 do PHP.


2. Sintaxe Básica

Delimitando o código PHP

O código PHP fica embutido no próprio HTML. O interpretador identifica quando um código é PHP pelas seguintes tags:

<?php
comandos
?>

<script language="php">
comandos
</script>

<?
comandos
?>

<%
comandos
%>

O tipo de tags mais utilizado é o terceiro, que consiste em uma "abreviação" do primeiro. Para utilizá-lo, é necessário habilitar a opção short-tags na configuração do PHP. O último tipo serve para facilitar o uso por programadores acostumados à sintaxe de ASP. Para utilizá-lo também é necessário habilitá-lo no PHP, através do arquivo de configuração php.ini.

Separador de instruções

Entre cada instrução em PHP é preciso utilizar o ponto-e-vírgula, assim como em C, Perl e outras linguagens mais conhecidas. Na última instrução do bloco de script não é necessário o uso do ponto-e-vírgula, mas por questões estéticas recomenda-se o uso sempre.

Nomes de variáveis

Toda variável em PHP tem seu nome composto pelo caracter $ e uma string, que deve iniciar por uma letra ou o caracter "_". PHP é case sensitive, ou seja, as variáveis $vivas e $VIVAS são diferentes. Por isso é preciso ter muito cuidado ao definir os nomes das variáveis. É bom evitar os nomes em maiúsculas, pois como veremos mais adiante, o PHP já possui alguma variáveis pré-definidas cujos nomes são formados por letras maiúsculas.

Comentários

Há dois tipos de comentários em código PHP:

Comentários de uma linha:

Marca como comentário até o final da linha ou até o final do bloco de código PHP - o que vier antes. Pode ser delimitado pelo caracter "#" ou por duas barras ( // ).

Exemplo:
<?  echo "teste"; #isto é um teste  ?>
<?  echo "teste"; //este teste é similar ao anterior ?>

Comentários de mais de uma linha:
Tem como delimitadores os caracteres "/*" para o início do bloco e "*/" para o final do comentário. Se o delimitador de final de código PHP ( ?> ) estiver dentro de um comentário, não será reconhecido pelo interpretador.


Exemplos:

<?
  echo "teste"; /* Isto é um comentário com mais
de uma linha, mas não funciona corretamente ?>
*/

<?
  echo "teste"; /* Isto é um comentário com mais
de uma linha que funciona corretamente
*/
?>

3. Criando os primeiros scripts
Primeiro Exemplo

Neste exemplo, criaremos um script com uma saída simples, que servirá para testar se a instalação foi feita corretamente:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
echo "Primeiro Script";
?>

</body>
</html>


Salve o arquivo como "primeiro.php3" no diretorio de documentos do Apache (ou o Web Server escolhido). Abra uma janela do navegador e digite o endereço "http://localhost/primeiro.php3". Verificando o código fonte da página exibida, temos o seguinte:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

Primeiro Script

</body>
</html>


Isso mostra como o PHP funciona. O script é executado no servidor, ficando disponível para o usuário apenas o resultado. Agora vamos escrever um script que produza exatamente o mesmo resultado utilizando uma variável:


<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
$texto = "Primeiro Script";
echo $texto;
?>

</body>
</html>

Utilizando formulários HTML

Ao clicar num botão "Submit" em um formulário HTML as informações dos campos serão enviadas ao servidor especificado para que possa ser produzida uma resposta. O PHP trata esses valores como variáveis, cujo nome é o nome do campo definido no formulário. O exemplo a seguir mostra isso, e mostra também como o código PHP pode ser inserido em qualquer parte do código HTML:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
if ($texto != "")
  echo "Você digitou \"$texto\"<br><br>";
?>

<form method=post action="<? echo $PATH_INFO; ?>">
<input type="text" name="texto" value="" size=10>
<br>
<input type="submit" name="sub" value="Enviar!">
</form>

</body>
</html>

Ao salvar o arquivo acima e carregá-lo no browser, o usuário verá apenas um formulário que contém um espaço para digitar o texto, como visto na figura 01. Ao digitar um texto qualquer e submeter o formulário, a resposta, que é o mesmo arquivo PHP (indicado pela constante $PATH_INFO, que retorna o nome do arquivo) será como na figura 02:




figura 01    figura 02

Isso ocorre porque o código PHP testa o conteúdo da variável $texto. Inicialmente ele é uma string vazia, e por isso nada é impresso na primeira parte. Quando algum texto é digitado no formulário e submetido, o PHP passa a tratá-lo como uma variável. Como no formulário o campo possui o nome "texto", a variável com seu conteúdo será $texto. Assim, no próximo teste o valor da variável será diferente de uma string vazia, e o PHP imprime um texto antes do formulário.

Interagindo com o browser

PHP também permite interagir com informações do browser automaticamente. Por exemplo, o script a seguir mostra informações sobre o browser do usuário. As figuras 03 e 04 mostram o resultado visto no Netscape Communicator e o Microsoft Internet Explorer, respectivamente.
<html>
<head><title>Aprendendo PHP</title></head>
<body>

<? echo $HTTP_USER_AGENT; ?>

</body>
</html>




figura 03    figura 04

Observe que o resultado mostra características de cada browser, como a versão, e no caso do Communicator até o idioma ("en"). Com isso, se você criar uma página com recursos disponíveis somente no Internet Explorer, por exemplo, pode esconder o código dos outros browsers, com um código semelhante ao seguinte:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?
if  (strpos($HTTP_USER_AGENT,"MSIE 5") != 0) {
  echo "Você usa Internet Explorer";
} else {
  echo "Você não usa Internet Explorer";
}
?>

</body>
</html>


Neste exemplo, será apenas exibido um texto informando se está sendo utilizado o Microsoft Internet Explorer ou não, mas para outras funções poderia ser utilizado algo semelhante.
É bom notar o surgimento de mais uma função no código anterior: strpos(string1,string2). Essa função retorna a posição da primeira aparição de string2 em string1, contando a partir de zero, e não retorna valor algum se não ocorrer. Assim, para testar se a string $HTTP_USER_AGENT contém a string "MSIE", basta testar se strpos devolve algum valor.

Acessando Bancos de Dados
Neste documento todos os exemplos referentes a acesso de bancos de dados utilizarão o gerenciador de banco de dados MySQL, que pode ser copiado gratuitamente no site http://www.mysql.org.
Para interagir com uma base de dados SQL existem três comandos básicos que devem ser utilizados: um que faz a conexão com o servidor de banco de dados, um que seleciona a base de dados a ser utilizada e um terceiro que executa uma "query" SQL.

Conexão com o servidor
A conexão com o servidor de banco de dados mySQL em PHP é feita através do comando mysql_connect, que tem a seguinte sintaxe:

int mysql_connect(string /*host [:porta]*/ , string /*login*/ , string /*senha*/ );

Os parâmetros são bastante simples: o endereço do servidor(host), o nome do usuário (login) e a senha para a conexão. A função retorna um valor inteiro, que é o identificador da conexão estabelecida e deverá ser armazenado numa variável para ser utilizado depois. No nosso exemplo, temos como servidor de banco de dados a mesma máquina que roda o servidor http, como login o usuário "root" e senha "phppwd":

$conexao = mysql_connect("localhost", "root", "phppwd");


Assim, se a conexão for bem sucedida (existir um servidor no endereço especificado que possua o usuário com a senha fornecida), o identificador da conexão fica armazenado na variável $conexão.

Seleção do banco de dados
Uma vez conectado, é preciso selecionar o banco de dados existente no servidor com o qual desejamos trabalhar. Isso é feito através da função int mysql_select_db, que possui a seguinte sintaxe:

int mysql_select_db(string /*nome_base*/, int /*conexao*/ );

O valor de retorno é 0 se o comando falhar, e 1 em caso de sucesso. O nome da base de dados a selecionar é o primeiro parâmetro fornecido, seguido pelo identificador da conexão. Se este for omitido, o interpretador PHP tentará utilizar a última conexão estabelecida. Recomenda-se sempre explicitar esse valor, para facilitar a legibilidade do código. No nosso exemplo, a base de dados a ser selecionada possui o nome "ged":

mysql_select_db("ged", $conexao);

Após a execução desse comando qualquer consulta executada para aquela conexão utilizará a base de dados selecionada.

Execução de queries SQL
Após estabelecida a conexão e selecionada a base de dados a ser utilizada, quase toda a interação com o servidor mySQL pode ser feita através de consultas escritas em SQL (Structured Query Language), com o comando mysql_query, que utiliza a seguinte sintaxe:
int mysql_query(string consulta, int [conexao] );

O valor de retorno é 0 se falhar ou 1 em caso de sucesso. Sucesso aqui significa que a consulta está sintaticamente correta e foi executada no servidor. Nenhuma informação sobre o resultado é retornada deste comando, ou até mesmo se o resultado é o esperado. No caso da consulta ser um comando SELECT, o valor de retorno é um valor interno que identifica o resultado, que poderá ser tratado com a função mysql_result() e outras. A string query não deve conter ponto-e-vírgula no final do comando, e o identificador da conexão é opcional. Vamos criar uma tabela como exemplo:
$cria = "CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50))";

mysql_query($cria, $conexao);

Agora vejamos como ficou o código completo para executar uma query SQL numa base de dados mySQL, com um exemplo que cria uma tabela chamada exemplo e adiciona alguns dados:

$conexao = mysql_connect("localhost", "root", "phppwd");
mysql_select_db("ged", $conexao);

$cria = "CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50))";

$insere1 = "INSERT INTO exemplo (nome,email) VALUES ("Mauricio Vivas","vivas@usa.net");

$insere2 = "INSERT INTO exemplo (nome,email) VALUES ("Jose da Silva","jose@teste.com");

$insere3 = "INSERT INTO exemplo (nome,email) VALUES ("Fernando Henrique Cardoso","fhc@planalto.gov.br");

$insere4 = "INSERT INTO exemplo (nome,email) VALUES ("Bill Clinton","president@whitehouse.gov");

mysql_query($cria, $conexao);
mysql_query($insere1, $conexao);
mysql_query($insere2, $conexao);
mysql_query($insere3, $conexao);
mysql_query($insere4, $conexao);

Tratamento de resultados de query SELECT

Ao executar uma query SQL SELECT através do comando mysql_query, o identificador do resultado deve ser armazenado numa variável que pode ser tratada de diversas formas. Duas maneiras interessantes de fazê-lo usam o comando mysql_result e o comando mysql_fetch_row, respectivamente.
O comando mysql_result tem a seguinte sintaxe:

int mysql_result(int resultado, int linha, mixed [campo]);

Onde resultado é o identificador do resultado, obtido com o retorno da função mysql_query, linha especifica a tupla a ser exibida, já que uma query SELECT pode retornar diversas tuplas, e campo é o identificador do campo a ser exibido, sendo o tipo descrito como mixed pela possibilidade de ser de diversos tipos (neste caso, inteiro ou string). Vejamos um exemplo utilizando a tabela criada anteriormente:

$consulta = "SELECT nome, email FROM exemplo WHERE email LIKE 'vivas'";

$resultado = mysql_query($consulta, $conexao);

printf("Nome: ", mysql_result($resultado,0,"nome"), "<br>\n");
printf("e-mail: ", mysql_result($resultado,0,"email"),"<br>");

Com o exemplo acima, o resultado será:

Nome: Mauricio Vivas<br>
e-mail: vivas@usa.net<br>

É importante notar que a utilização desta função é um pouco trabalhosa, já que no caso de um resultado com várias linhas é preciso controlar o número de linhas para tratá-las (pode-se utilizar a função mysql_num_rows(int resultado), que retorna o número de linhas de um resultado), e no caso de uma alteração no nome do campo é preciso alterar também a maneira de tratá-lo. Por isso é mais aconselhável que se use uma outra função, como por exemplo mysql_fetch_row, que possui a seguinte sintaxe:

array mysql_fetch_row(int result);

A variável resultado é o identificador da memória de resultados, obtido como retorno da função mysql_query. O resultado produzido por esta função é de retirar a primeira linha da memória de resultados, se houver, e colocá-la num array. Assim torna-se mais fácil tratar um resultado com várias linhas, e sem utilizar os nomes dos  campos na rotina de tratamento do resultado:


$consulta = "SELECT nome, email FROM exemplo";

$resultado = mysql_query($consulta, $conexao);

echo "<table border=1>\n";
echo "<tr><td>Nome</td><td>e-mail</tr>\n";
while ($linha = mysql_fetch_row($resultado)) {
  printf("<tr><td>$linha[0]</td>");
  printf("<td>$linha[1]</td></tr>");
}
echo "</table>\n";


O código acima irá imprimir todos os registros da tabela exemplo numa tabela html. Se o programador desejar "pular" alguma(s) linha(s) do resultado, poderá utilizar a função mysql_data_seek, que tem por objetivo definir qual será a próxima linha da memória de resultados a ser impressa. Sua sintaxe é:

int mysql_data_seek(int resultado, int linha);

Sendo resultado o identificador do resultado e linha o numero da linha. Retorna 0 em caso de falha, e um valor diferente de zero em caso de sucesso.
Existem diversas outras funções para o tratamento de resultados, que armazenam as linhas em arrays e objetos, assim como outras funções para administrar o banco de dados, mas como este documento trata-se de uma introdução, inicialmente não tratará tópicos mais avançados.


4. Tipos

Tipos Suportados

PHP suporta os seguintes tipos de dados:
"    Inteiro
"    Ponto flutuante
"    String
"    Array
"    Objeto

PHP utiliza checagem de tipos dinâmica, ou seja, uma variável pode conter valores de diferentes tipos em diferentes momentos da execução do script. Por este motivo não é necessário declarar o tipo de uma variável para usá-la. O interpretador PHP decidirá qual o tipo daquela variável, verificando o conteúdo em tempo de execução.
Ainda assim, é permitido converter os valores de um tipo para outro desejado, utilizando o typecasting ou a função settype (ver adiante).

Inteiros (integer ou long)
Uma variável pode conter um valor inteiro com atribuições que sigam as seguintes sintaxes:

$vivas = 1234;    # inteiro positivo na base decimal
$vivas = -234;    # inteiro negativo na base decimal
$vivas = 0234;    # inteiro na base octal-simbolizado pelo 0
# equivale a 156 decimal
$vivas = 0x34;    # inteiro na base hexadecimal(simbolizado
# pelo 0x) - equivale a 52 decimal.

A diferença entre inteiros simples e long está no número de bytes utilizados para armazenar a variável. Como a escolha é feita pelo interpretador PHP de maneira transparente para o usuário, podemos afirmar que os tipos são iguais.
Números em Ponto Flutuante (double ou float)
Uma variável pode ter um valor em ponto flutuante com atribuições que sigam as seguintes sintaxes:

$vivas = 1.234;
$vivas = 23e4;    # equivale a 230.000

Strings

Strings podem ser atribuídas de duas maneiras:

a)    utilizando aspas simples ( ' ) - Desta maneira, o valor da variável será exatamente o texto contido entre as aspas (com exceção de \\ e \' - ver tabela abaixo)
b)    utilizando aspas duplas ( " ) - Desta maneira, qualquer variável ou caracter de escape será expandido antes de ser atribuído.

Exemplo:

<?
$teste = "Mauricio";
$vivas = '---$teste--\n';
echo "$vivas";
?>
A saída desse script será "---$teste--\n".

<?
$teste = "Mauricio";
$vivas = "---$teste---\n";
echo "$vivas";
?>

A saída desse script será "---Mauricio--" (com uma quebra de linha no final).


A tabela seguinte lista os caracteres de escape:

Sintaxe    Significado
\n    Nova linha
\r    Retorno de carro (semelhante a \n)
\t    Tabulação horizontal
\\    A própria barra ( \ )
\$    O símbolo $
\'    Aspa simples
\"    Aspa dupla

No apêndice 01 está disponível uma lista das funções utilizadas no tratamento de strings.

Arrays

Arrays em PHP podem ser observados como mapeamentos ou como vetores indexados. Mais precisamente, um valor do tipo array é um dicionário onde os índices são as chaves de acesso. Vale ressaltar que os índices podem ser valores de qualquer tipo e não somente inteiros. Inclusive, se os índices forem todos inteiros, estes não precisam formar um intervalo contínuo
Como a checagem de tipos em PHP é dinâmica, valores de tipos diferentes podem ser usados como índices de array, assim como os valores mapeados também podem ser de diversos tipos.
Exemplo:
<?
$cor[1] = "vermelho";
$cor[2] = "verde";
$cor[3] = "azul";
$cor["teste"] = 1;
?>

Equivalentemente, pode-se escrever:

<?
$cor = array(1 => "vermelho, 2 => "verde, 3 => "azul", "teste => 1);
?>

Listas
As listas são utilizadas em PHP para realizar atribuições múltiplas. Através de listas é possível atribuir valores que estão num array para variáveis. Vejamos o exemplo:


Exemplo:

 list($a, $b, $c) = array("a", "b", "c");

O comando acima atribui valores às três variáveis simultaneamente. É bom notar que só são atribuídos às variáveis da lista os elementos do array que possuem índices inteiros e não negativos. No exemplo acima as três atribuições foram bem sucedidas porque ao inicializar um array sem especificar os índices eles passam a ser inteiros, a partir do zero. Um fator importante é que cada variável da lista possui um índice inteiro e ordinal, iniciando com zero, que serve para determinar qual valor será atribuído. No exemplo anterior temos $a com índice 0, $b com índice 1 e $c com índice 2. Vejamos um outro exemplo:

$arr = array(1=>"um",3=>"tres","a"=>"letraA",2=>"dois);
list($a,$b,$c,$d) = $arr;

Após a execução do código acima temos os seguintes valores:
$a == null
$b == "um"
$c == "dois"
$d == "tres"

Devemos observar que à variável $a não foi atribuído valor, pois no array não existe elemento com índice 0 (zero). Outro detalhe importante é que o valor "tres" foi atribuído à variável $d, e não a $b, pois seu índice é 3, o mesmo que $d na lista. Por fim, vemos que o valor "letraA" não foi atribuído a elemento algum da lista pois seu índice não é inteiro.
Os índices da lista servem apenas como referência ao interpretador PHP para realizar as atribuições, não podendo ser acessados de maneira alguma pelo programador. De maneira diferente do array, uma lista não pode ser atribuída a uma variável, servindo apenas para fazer múltiplas atribuições através de um array.
No apêndice 02 está disponível uma lista das funções mais comuns para o tratamento de arrays.

Objetos
Um objeto pode ser inicializado utilizando o comando new para instanciar uma classe para uma variável.

Exemplo:
class teste {
        function nada() {
            echo "nada";
        }
}

$vivas = new teste;
$vivas -> nada();

A utilização de objetos será mais detalhada mais à frente.

Booleanos

PHP não possui um tipo booleano, mas é capaz de avaliar expressões e retornar true ou false, através do tipo integer: é usado o valor 0 (zero) para representar o estado false, e qualquer valor diferente de zero (geralmente 1) para representar o estado true.

Transformação de tipos

A transformação de tipos em PHP pode ser feita das seguintes maneiras:
Coerções

Quando ocorrem determinadas operações ("+", por exemplo) entre dois valores de tipos diferentes, o PHP converte o valor de um deles automaticamente (coerção). É interessante notar que se o operando for uma variável, seu valor não será alterado.
O tipo para o qual os valores dos operandos serão convertidos é determinado da seguinte forma: Se um dos operandos for float, o outro será convertido para float, senão, se um deles for integer, o outro será convertido para integer.

Exemplo:
$vivas = "1";        // $vivas é a string "1"
$vivas = $vivas + 1;    // $vivas é o integer 2
$vivas = $vivas + 3.7;// $vivas é o double 5.7
$vivas = 1 + 1.5        // $vivas é o double 2.5


Como podemos notar, o PHP converte string para integer ou double mantendo o valor. O sistema utilizado pelo PHP para converter de strings para números é o seguinte:
-    É analisado o início da string. Se contiver um número, ele será avaliado. Senão, o valor será 0 (zero);
-    O número pode conter um sinal no início ("+" ou "-");
-    Se a string contiver um ponto em sua parte numérica a ser analisada, ele será considerado, e o valor obtido será double;
-    Se a string contiver um "e" ou "E" em sua parte numérica a ser analisada, o valor seguinte será considerado como expoente da base 10, e o valor obtido será double;

Exemplos:
$vivas = 1 + "10.5";        // $vivas == 11.5
$vivas = 1 + "-1.3e3";    // $vivas == -1299
$vivas = 1 + "teste10.5";    // $vivas == 1
$vivas = 1 + "10testes";    // $vivas == 11
$vivas = 1 + "  10testes";    // $vivas == 11
$vivas = 1 + "+  10testes";    // $vivas == 1



Transformação explícita de tipos

A sintaxe do typecast de PHP é semelhante ao C: basta escrever o tipo entre parenteses antes do valor

Exemplo:
$vivas = 15;            // $vivas é integer (15)
$vivas = (double) $vivas    // $vivas é double (15.0)
$vivas = 3.9            // $vivas é double (3.9)
$vivas = (int) $vivas    // $vivas é integer (3)
// o valor decimal é truncado

Os tipos de cast permitidos são:
(int), (integer)        ==> muda para integer;
(real), (double), (float)    ==> muda para float;
(string)            ==> muda para string;
(array)            ==> muda para array;
(object)            ==> muda para objeto.

Com a função settype

A função settype converte uma variável para o tipo especificado, que pode ser "integer", "double", "string", "array" ou "object".

Exemplo:
$vivas = 15;            // $vivas é integer
settype($vivas,double)    // $vivas é double


5. Constantes


Constantes pré-definidas

O PHP possui algumas constantes pré-definidas, indicando a versão do PHP, o Sistema Operacional do servidor, o arquivo em execução, e diversas outras informações. Para ter acesso a todas as constantes pré-definidas, pode-se utilizar a função phpinfo(), que exibe uma tabela contendo todas as constantes pré-definidas, assim como configurações da máquina, sistema operacional, servidor http e versão do PHP instalada.

Definindo constantes

Para definir constantes utiliza-se a função define. Uma vez definido, o valor de uma constante não poderá mais ser alterado. Uma constante só pode conter valores escalares, ou seja, não pode conter nem um array nem um objeto. A assinatura da função define é a seguinte:

int define(string nome_da_constante, mixed valor);

A função retorna true se for bem-sucedida. Veja um exemplo de sua utilização a seguir:

define ("pi", 3.1415926536);
$circunf = 2*pi*$raio;

6. Operadores

Aritméticos

Só podem ser utilizados quando os operandos são números (integer ou float). Se forem de outro tipo, terão seus valores convertidos antes da realização da operação.

+    adição
-    subtração
*    multiplicação
/    divisão
%    módulo

de strings

Só há um operador exclusivo para strings:

.    concatenação

de atribuição

Existe um operador básico de atribuição e diversos derivados. Sempre retornam o valor atribuído. No caso dos operadores derivados de atribuição, a operação é feita entre os dois operandos, sendo atribuído o resultado para o primeiro. A atribuição é sempre por valor, e não por referência.


=    atribuição simples
+=    atribuição com adição
-=    atribuição com subtração
*=    atribuição com multiplicação
/=    atribuição com divisão
%=    atribuição com módulo
.=    atribuição com concatenação

Exemplo:

$a = 7;
$a += 2; // $a passa a conter o valor 9

bit a bit

Comparam dois números bit a bit.

&    "e" lógico
|    "ou" lógico
^    ou exclusivo
~    não (inversão)
<<    shift left
>>    shift right
Lógicos
Utilizados para inteiros representando valores booleanos

and    "e" lógico
or    "ou" lógico
xor    ou exclusivo
!    não (inversão)
&&    "e" lógico
||    "ou" lógico

Existem dois operadores para "e" e para "ou porque eles têm diferentes posições na ordem de precedência.

Comparação

As comparações são feitas entre os valores contidos nas variáveis, e não as referências. Sempre retornam um valor booleano.

==    igual a
!=    diferente de
<    menor que
>    maior que
<=    menor ou igual a
>=    maior ou igual a

Expressão condicional

Existe um operador de seleção que é ternário. Funciona assim:

(expressao1)?(expressao2):( expressao3)


o interpretador PHP avalia a primeira expressão. Se ela for verdadeira, a expressão retorna o valor de expressão2. Senão, retorna o valor de expressão3.


de incremento e decremento

++    incremento
--    decremento

Podem ser utilizados de duas formas: antes ou depois da variável. Quando utilizado antes, retorna o valor da variável antes de incrementá-la ou decrementá-la. Quando utilizado depois, retorna o valor da variável já incrementado ou decrementado.

Exemplos:

$a = $b = 10; // $a e $b recebem o valor 10
$c = $a++; // $c recebe 10 e $a passa a ter 11
$d = ++$b; // $d recebe 11, valor de $b já incrementado

Ordem de precedência dos operadores

A tabela a seguir mostra a ordem de precedência dos operadores no momento de avaliar as expressões;
Precedência    Associatividade    Operadores
1.        esquerda    ,
2.        esquerda    or
3.        esquerda    xor
4.        esquerda    and
5.        direita    print
6.        esquerda    = += -= *= /= .= %= &= != ~= <<= >>=
7.        esquerda    ? :
8.        esquerda    ||
9.        esquerda    &&
10.        esquerda    |
11.        esquerda    ^
12.        esquerda    &
13.        não associa    == !=
14.        não associa    < <= > >=
15.        esquerda    << >>
16.        esquerda    + - .
17.        esquerda    * / %
18.        direita    ! ~ ++ -- (int) (double) (string) (array) (object) @
19.        direita    [
20.        não associa    new

7. Estruturas de Controle

As estruturas que veremos a seguir são comuns para as linguagens de programação imperativas, bastando, portanto, descrever a sintaxe de cada uma delas, resumindo o funcionamento.

Blocos
Um bloco consiste de vários comandos agrupados com o objetivo de relacioná-los com determinado comando ou função. Em comandos como if, for, while, switch e em declarações de funções blocos podem ser utilizados para permitir que um comando faça parte do contexto desejado. Blocos em PHP são delimitados pelos caracteres "{" e "}". A utilização dos delimitadores de bloco em uma parte qualquer do código não relacionada com os comandos citados ou funções não produzirá efeito algum, e será tratada normalmente pelo interpretador.
Exemplo:
if ($x == $y)
  comando1;
  comando2;

Para que comando2 esteja relacionado ao if é preciso utilizar um bloco:

if ($x == $y){
  comando1;
  comando2;
}

Comandos de seleção

Também chamados de condicionais, os comandos de seleção permitem executar comandos ou blocos de comandos com base em testes feitos durante a execução.


if

O mais trivial dos comandos condicionais é o if. Ele testa a condição e executa o comando indicado se o resultado for true (valor diferente de zero). Ele possui duas sintaxes:

if (expressão)
   comando;


if (expressão):
   comando;
   . . .
   comando;
endif;

Para incluir mais de um comando no if da primeira sintaxe, é preciso utilizar um bloco, demarcado por chaves.

O else é um complemento opcional para o if. Se utilizado, o comando será executado se a expressão retornar o valor false (zero). Suas duas sintaxes são:

if (expressão)
   comando;
else
   comando;


if (expressão):
   comando;
   . . .
   comando;
else
   comando;
   . . .
   comando;
endif;




A seguir, temos um exemplo do comando if utilizado com else:

if ($a > $b)
  $maior = $a;
else
  $maior = $b;

O exemplo acima coloca em $maior o maior valor entre $a e $b

Em determinadas situações é necessário fazer mais de um teste, e executar condicionalmente diversos comandos ou blocos de comandos. Para facilitar o entendimento de uma estrutura do tipo:

if (expressao1)
   comando1;
else 
  if (expressao2)
    comando2;
  else
    if (expressao3)
      comando3;
    else
      comando4;

foi criado o comando, também opcional elseif. Ele tem a mesma função de um else e um if usados sequencialmente, como no exemplo acima. Num mesmo if podem ser utilizados diversos elseif's, ficando essa utilização a critério do programador, que deve zelar pela legibilidade de seu script.

O comando elseif também pode ser utilizado com dois tipos de sintaxe. Em resumo, a sintaxe geral do comando if fica das seguintes maneiras:

if (expressao1)
  comando;
[ elseif (expressao2)
   comando; ]
[ else
   comando; ]




if (expressao1) :
  comando;
   . . .
  comando;
[ elseif (expressao2)
  comando;
   . . .
  comando; ]
[ else
  comando;
   . . .
  comando; ]
endif;


switch

O comando switch atua de maneira semelhante a uma série de comandos if na mesma expressão. Frequentemente o programador pode querer comparar uma variável com diversos valores, e executar um código diferente a depender de qual valor é igual ao da variável. Quando isso for necessário, deve-se usar o comando switch. O exemplo seguinte mostra dois trechos de código que fazem a mesma coisa, sendo que o primeiro utiliza uma série de if's e o segundo utiliza switch:

if ($i == 0)
   print "i é igual a zero";
elseif ($i == 1)
   print "i é igual a um";
elseif ($i == 2)
   print "i é igual a dois";

switch ($i) {
case 0:
     print "i é igual a zero";
     break;
case 1:
     print "i é igual a um";
     break;
case 2:
     print "i é igual a dois";
     break;
}


É importante compreender o funcionamento do switch para não cometer enganos. O comando switch testa linha a linha os cases encontrados, e a partir do momento que encontra um valor igual ao da variável testada, passa a executar todos os comandos seguintes, mesmo os que fazem parte de outro teste, até o fim do bloco. por isso usa-se o comando break, quebrando o fluxo e fazendo com que o código seja executado da maneira desejada. Veremos mais sobre o break mais adiante. Veja o exemplo:

switch ($i) {
case 0:
     print "i é igual a zero";
case 1:
     print "i é igual a um";
case 2:
     print "i é igual a dois";
}


No exemplo acima, se $i for igual a zero, os três comandos "print" serão executados. Se $i for igual a 1, os dois últimos "print" serão executados. O comando só funcionará da maneira desejada se $i for igual a 2.
Em outras linguagens que implementam o comando switch, ou similar, os valores a serem testados só podem ser do tipo inteiro. Em PHP é permitido usar valores do tipo string como elementos de teste do comando switch. O exemplo abaixo funciona perfeitamente:



switch ($s) {
case "casa":
     print "A casa é amarela";
case "arvore":
     print "a árvore é bonita";
case "lampada":
     print "joao apagou a lampada";
}

comandos de repetição
while
O while é o comando de repetição (laço) mais simples. Ele testa uma condição e executa um comando, ou um bloco de comandos, até que a condição testada seja falsa. Assim como o if, o while também possui duas sintaxes alternativas:

while (<expressao>)
   <comando>;


while (<expressao>):
   <comando>;
    . . .
   <comando>;
endwhile;

A expressão só é testada a cada vez que o bloco de instruções termina, além do teste inicial. Se o valor da expressão passar a ser false no meio do bloco de instruções, a execução segue até o final do bloco. Se no teste inicial a condição for avaliada como false, o bloco de comandos não será executado.
O exemplo a seguir mostra o uso do while para imprimir os números de 1 a 10:
$i = 1;
while ($i <=10)
  print $i++;



do... while

O laço do..while funciona de maneira bastante semelhante ao while, com a simples diferença que a expressão é testada ao final do bloco de comandos. O laço do..while possui apenas uma sintaxe, que é a seguinte:

do {
   <comando>
   . . .
   <comando>
} while (<expressao>);

O exemplo utilizado para ilustrar o uso do while pode ser feito da seguinte maneira utilizando o do.. while:


$i = 0;
do {
  print ++$i;
} while ($i < 10);

for

O tipo de laço mais complexo é o for. Para os que programam em C, C++ ou Java, a assimilação do funcionamento do for é natural. Mas para aqueles que estão acostumados a linguagens como Pascal, há uma grande mudança para o uso do for. As duas sintaxes permitidas são:

for (<inicializacao>;<condicao>;<incremento>)
   <comando>;


for (<inicializacao>;<condicao>;<incremento>) :
   <comando>;
   . . .
   <comando>;
endfor;

As três expressões que ficam entre parênteses têm as seguintes finalidades:

Inicialização: comando ou sequencia de comandos a serem realizados antes do inicio do laço. Serve para inicializar variáveis.
Condição: Expressão booleana que define se os comandos que estão dentro do laço serão executados ou não. Enquanto a expressão for verdadeira (valor diferente de zero) os comandos serão executados.
Incremento: Comando executado ao final de cada execução do laço.
Um comando for funciona de maneira semelhante a um while escrito da seguinte forma:


<inicializacao>
while (<condicao>) {
comandos
...
<incremento>
}


Quebra de fluxo

Break
O comando break pode ser utilizado em laços de do, for e while, além do uso já visto no comando switch. Ao encontrar um break dentro de um desses laços, o interpretador PHP para imediatamente a execução do laço, seguindo normalmente o fluxo do script.
while ($x > 0) {
  ...
  if ($x == 20) {
    echo "erro! x = 20";
    break;
  ...
}

No trecho de código acima, o laço while tem uma condição para seu término normal ($x <= 0), mas foi utilizado o break para o caso de um término não previsto no início do laço. Assim o interpretador seguirá para o comando seguinte ao laço.

Continue

O comando continue também deve ser utilizado no interior de laços, e funciona de maneira semelhante ao break, com a diferença que o fluxo ao invés de sair do laço volta para o início dele. Vejamos o exemplo:

for ($i = 0; $i < 100; $i++) {
  if ($i % 2) continue;
  echo " $i ";
}

O exemplo acima é uma maneira ineficiente de imprimir os números pares entre 0 e 99. O que o laço faz é testar se o resto da divisão entre o número e 2 é 0. Se for diferente de zero (valor lógico true) o interpretador encontrará um continue, que faz com que os comandos seguintes do interior do laço sejam ignorados, seguindo para a próxima iteração.


8. Funções

Definindo funções

A sintaxe básica para definir uma função é:

function nome_da_função([arg1, arg2, arg3]) {
        Comandos;
        ... ;
        [return <valor de retorno>];
}

Qualquer código PHP válido pode estar contido no interior de uma função. Como a checagem de tipos em PHP é dinâmica, o tipo de retorno não deve ser declarado, sendo necessário que o programador esteja atento para que a função retorne o tipo desejado. É recomendável que esteja tudo bem documentado para facilitar a leitura e compreensão do código. Para efeito de documentação, utiliza-se o seguinte formato de declaração de função:

tipo function nome_da_funcao(tipo arg1, tipo arg2, ...);

Este formato só deve ser utilizado na documentação do script, pois o PHP não aceita a declaração de tipos. Isso significa que em muitos casos o programador deve estar atento ao tipos dos valores passados como parâmetros, pois se não for passado o tipo esperado não é emitido nenhum alerta pelo interpretador PHP, já que este não testa os tipos.

Valor de retorno

Toda função pode opcionalmente retornar um valor, ou simplesmente executar os comandos e não retornar valor algum.
Não é possível que uma função retorne mais de um valor, mas é permitido fazer com que uma função retorne um valor composto, como listas ou arrays.

Argumentos

É possível passar argumentos para uma função. Eles devem ser declarados logo após o nome da função, entre parênteses, e tornam-se variáveis pertencentes ao escopo local da função. A declaração do tipo de cada argumento também é utilizada apenas para efeito de documentação.

Exemplo:

function imprime($texto){
   echo $texto;
}

imprime("teste de funções");

Passagem de parâmetros por referência

Normalmente, a passagem de parâmetros em PHP é feita por valor, ou seja, se o conteúdo da variável for alterado, essa alteração não afeta a variável original.

Exemplo:

function mais5($numero) {
   $numero += 5;
}

$a = 3;
mais5($a); //$a continua valendo 3

No exemplo acima, como a passagem de parâmetros é por valor, a função mais5 é inútil, já que após a execução sair da função o valor anterior da variável é recuperado. Se a passagem de valor fosse feita por referência, a variável $a teria 8 como valor. O que ocorre normalmente é que ao ser chamada uma função, o interpretador salva todo o escopo atual, ou seja, os conteúdos das variáveis. Se uma dessas variáveis for passada como parâmetro, seu conteúdo fica preservado, pois a função irá trabalhar na verdade com uma cópia da variável. Porém, se a passagem de parâmetros for feita por referência, toda alteração que a função realizar no valor passado como parâmetro afetará a variável que o contém.
Há duas maneiras de fazer com que uma função tenha parâmetros passados por referência: indicando isso na declaração da função, o que faz com que a pasagem de parâmetros sempre seja assim; e também na própria chamada da função. Nos dois casos utiliza-se o modificador "&". Vejamos um exemplo que ilustra os dois casos:

function mais5(&$num1, $num2) {
   $num1 += 5;
   $num2 += 5;
}

$a = $b = 1;
mais5($a, $b); /* Neste caso, só $num1 terá seu valor alterado, pois a passagem por referência está definida na declaração da função. */


mais5($a, &$b); /* Aqui as duas variáveis terão seus valores alterados. */


Argumentos com valores pré-definidos (default)

Em PHP é possível ter valores default para argumentos de funções, ou seja, valores que serão assumidos em caso de nada ser passado no lugar do argumento. Quando algum parâmetro é declarado desta maneira, a passagem do mesmo na chamada da função torna-se opcional.

function teste($vivas = "testando") {
   echo $vivas;
}

teste(); // imprime "testando"
teste("outro teste"); // imprime "outro teste"

É bom lembrar que quando a função tem mais de um parâmetro, o que tem valor default deve ser declarado por último:

function teste($figura = circulo, $cor) {
  echo "a figura é um ", $figura, " de cor " $cor;
}

teste(azul);
/* A função não vai funcionar da maneira esperada, ocorrendo um erro no interpretador. A declaração correta é: */

function teste2($cor, $figura = circulo) {
  echo "a figura é um ", $figura, " de cor " $cor;
}

teste2(azul);

/* Aqui a funcao funciona da maneira esperada, ou seja, imprime o texto: "a figura é um círculo de cor azul" */

Contexto
O contexto é o conjunto de variáveis e seus respectivos valores num determinado ponto do programa. Na chamada de uma função, ao iniciar a execução do bloco que contém a implementação da mesma é criado um novo contexto, contendo as variáveis declaradas dentro do bloco, ou seja, todas as variáveis utilizadas dentro daquele bloco serão eliminadas ao término da execução da função.
Escopo
O escopo de uma variável em PHP define a porção do programa onde ela pode ser utilizada. Na maioria dos casos todas as variáveis têm escopo global. Entretanto, em funções definidas pelo usuário um escopo local é criado. Uma variável de escopo global não pode ser utilizada no interior de uma função sem que haja uma declaração.

Exemplo:
$vivas = "Testando";

function Teste() {
  echo $vivas;
}

Teste();

O trecho acima não produzirá saída alguma, pois a variável $vivas é de escopo global, e não pode ser referida num escopo local, mesmo que não haja outra com nome igual que cubra a sua visibilidade. Para que o script funcione da forma desejada, a variável global a ser utilizada deve ser declarada.


Exemplo:
$vivas = "Testando";

function Teste() {
  global $vivas;
  echo $vivas;
}

Teste();

Uma declaração "global" pode conter várias variáveis, separadas por vírgulas. Uma outra maneira de acessar variáveis de escopo global dentro de uma função é utilizando um array pré-definido pelo PHP cujo nome é $GLOBALS. O índice para a variável referida é o proprio nome da variável, sem o caracter $. O exemplo acima e o abaixo produzem o mesmo resultado:

Exemplo:
$vivas = "Testando";

function Teste() {
  echo $GLOBALS["vivas"]; // imprime $vivas
  echo $vivas; // não imprime nada
}

Teste();

9. Variáveis

O modificador static

Uma variável estática é visível num escopo local, mas ela é inicializada apenas uma vez e  seu valor não é perdido quando a execução do script deixa esse escopo. Veja o seguinte exemplo:

function Teste() {
  $a = 0;
  echo $a;
  $a++;
}

O último comando da função é inútil, pois assim que for encerrada a execução da função a variável $a perde seu valor. Já no exemplo seguinte, a cada chamada da função a variável $a terá seu valor impresso e será incrementada:

function Teste() {
  static $a = 0;
  echo $a;
  $a++;
}

O modificador static é muito utilizado em funções recursivas, já que o valor de algumas variáveis precisa ser mantido. Ele funciona da seguinte forma: O valor das variáveis declaradas como estáticas é mantido ao terminar a execução da função. Na próxima execução da função, ao encontrar novamente a declaração com static, o valor da variável é recuperado.
Em outras palavras, uma variável declarada como static tem o mesmo "tempo de vida" que uma variável global, porém sua visibilidade é restrita ao escopo local em que foi declarada e só é recuperada após a declaração.
Exemplo:
function Teste() {
  echo "$a";
  static $a = 0;
  $a++;
}

O exemplo acima não produzirá saída alguma. Na primeira execução da função, a impressão ocorre antes da atribuição de um valor à função, e portanto o conteúdo de $a é nulo (string vazia). Nas execuções seguintes da função Teste() a impressão ocorre antes da recuperação do valor de $a, e portanto nesse momento seu valor ainda é nulo. Para que a função retorne algum valor o modificador static deve ser utilizado.

Variáveis Variáveis

O PHP tem um recurso conhecido como variáveis variáveis, que consiste em variáveis cujos nomes também são variáveis. Sua utilização é feita através do duplo cifrão ($$).
$a = "teste";
$$a = "Mauricio Vivas";

O exemplo acima e equivalente ao seguinte:

$a = "teste";
$teste = "Mauricio Vivas";


Variáveis enviadas pelo navegador

Para interagir com a navegação feita pelo usuário, é necessário que o PHP possa enviar e receber informações para o software de navegação. A maneira de enviar informações, como já foi visto anteriormente, geralmente é através de um comando de impressão, como o echo. Para receber informações vindas do navegador através de um link ou um formulário html o PHP utiliza as informações  enviadas através da URL. Por exemplo: se seu script php está localizado em "http://localhost/teste.php3" e você o chama com a url "http://localhost/teste.php3?vivas=teste", automaticamente o PHP criará uma variável com o nome $vivas contendo a string "teste". Note que o conteúdo da variável está no formato urlencode. Os formulários html já enviam informações automaticamente nesse formato, e o PHP decodifica sem necessitar de tratamento pelo programador.

URLencode

O formato urlencode é obtido substituindo os espaços pelo caracter "+" e todos os outros caracteres não alfa-numéricos (com exceção de "_") pelo caracter "%" seguido do código ASCII em hexadecimal.

Por exemplo: o texto "Testando 1 2 3 !!" em urlencode fica "Testando+1+2+3+%21%21"

O PHP possui duas funções para tratar com texto em urlencode. Seguem suas sintaxes:

string urlencode(string texto);
string urldecode(string texto);

Essas funções servem respectivamente para codificar ou decodificar um texto passado como argumento. Para entender melhor o que é um argumento e como funciona uma função, leia o tópico "funções".

Variáveis de ambiente

O PHP possui diversas variáveis de ambiente, como a $PHP_SELF, por exemplo, que contém o nome e o path do próprio arquivo. Algumas outras contém informações sobre o navegador do usuário, o servidor http, a versão do PHP e diversas informações. Para ter uma listagem de todas as variáveis e constantes de ambiente e seus respectivos conteúdos, deve-se utilizar a função phpinfo().


Verificando o tipo de uma variável
Por causa da tipagem dinâmica utilizada pelo PHP, nem sempre é possível saber qual o tipo de uma variável em determinado instantese não contar com a ajuda de algumas funções que ajudam a verificar isso. A verificação pode ser feita de duas maneiras:

Função que retorna o tipo da variável

Esta função é a gettype. Sua assinatura é a seguinte:

string gettype(mixed var);

A palavra "mixed" indica que a variável var pode ser de diversos tipos.
A função gettype pode retornar as seguintes strings: "integer", "double", "string", "array", "object" e "unknown type".


Funções que testam o tipo da variável

São as funções is_int, is_integer, is_real, is_long, is_float, is_string, is_array e is_object. Todas têm o mesmo formato, seguindo modelo da assinatura a seguir:

int is_integer(mixed var);

Todas essas funções retornam true se a variável for daquele tipo, e false em caso contrário.



Destruindo uma variável

É possível desalocar uma variável se ela não for usada posteriormente através da função unset, que tem a seguinte assinatura:

int unset(mixed var);

A função destrói a variável, ou seja, libera a memória ocupada por ela, fazendo com que ela deixe de existir. Se mais na frente for feita uma chamada á variável, será criada uma nova variável de mesmo nome e de conteúdo vazio, a não ser que a chamada seja pela função isset. Se a operação for bem sucedida, retorna true.

Verificando se uma variável possui um valor

Existem dois tipos de teste que podem ser feitos para verificar se uma variável está setada: com a função isset e com a função empty.
A função isset

Possui o seguinte protótipo:

int isset(mixed var);

E retorna true se a variável estiver setada (ainda que com uma string vazia ou o valor zero), e false em caso contrário.



A função empty

Possui a seguinte assinatura:

int empty(mixed var);

E retorna true se a variável não contiver um valor (não estiver setada) ou possuir valor 0 (zero) ou uma string vazia. Caso contrário, retorna false.

10. Classes e Objetos

Classe
Uma classe é um conjunto de variáveis e funções relacionadas a essas variáveis. Uma vantagem da utilização é poder usufruir do recurso de encapsulamento de informação. Com o encapsulamento o usuário de uma classe não precisa saber como ela é implementada, bastando para a utilização conhecer a interface, ou seja, as funções disponíveis. Uma classe é um tipo, e portanto não pode ser atribuída a uma variável. Para definir uma classe, deve-se utilizar a seguinte sintaxe:
   
class Nome_da_classe {
   var $variavel1;
   var $variavel2;
   function funcao1 ($parametro) {
    /* === corpo da função === */
   }
}
Objeto
Como foi dito anteriormente, classes são tipos, e não podem ser atribuídas a variáveis. Variáveis do tipo de uma classe são chamadas de objetos, e devem ser criadas utilizando o operador new, seguindo o exemplo abaixo:

$variavel = new $nome_da_classe;

Para  utilizar  as  funções definidas na classe, deve ser utilizado o operador "->", como no exemplo:
$variavel->funcao1(

A variável $this
Na definição de uma classe, pode-se utilizar a variável $this, que é o próprio objeto. Assim, quando uma classe é instanciada em um objeto, e uma função desse objeto na definição da classe utiliza a variável $this, essa variável significa o objeto que estamos utilizando.

Como exemplo da utilização de classes e objetos, podemos utilizar a classe conta, que define uma conta bancária bastante simples, com funções para ver saldo e fazer um crédito.

class conta {
   var $saldo;
   function saldo() {
     return $this->saldo;
   }
   function credito($valor) {
     $this->saldo += $valor;
   }
}

$minhaconta = new conta;
$minhaconta->saldo();    // a variavel interna não foi
// inicializada, e não contém
// valor algum
$minhaconta->credito(50);
$minhaconta->saldo(); // retorna 50

SubClasses
Uma classe pode ser uma extensão de outra. Isso significa que ela herdará todas as variáveis e funções da outra classe, e ainda terá as que forem adicionadas pelo programador. Em PHP não é permitido utilizar herança múltipla, ou seja, uma classe pode ser extensão de apenas uma outra.Para criar uma classe extendida, ou derivada de outra, deve ser utilizada a palavra reservada extends, como pode ser visto no exemplo seguinte:

class novaconta extends conta {
  var $numero;
  function numero() {
     return $this->numero;
  }
}

A classe acima é derivada da classe conta, tendo as mesmas funções e variáveis, com a adição da variável $numero e a função numero().
Construtores
Um construtor é uma função definida na classe que é automaticamente chamada no momento em que a classe é instanciada (através do operador new). O construtor deve ter o mesmo nome que a classe a que pertence. Veja o exemplo:

class conta {
   var $saldo;

   function conta () {
     $this.saldo = 0;
   }

   function saldo() {
     return $this->saldo;
   }
   function credito($valor) {
     $this->saldo += $valor;
   }
}

Podemos perceber que a classe conta agora possui um construtor, que inicializa a variável $saldo com o valor 0.
Um construtor pode conter argumentos, que são opcionais, o que torna esta ferramenta mais poderosa. No exemplo acima, o construtor da classe conta pode receber como argumento um valor, que seria o valor inicial da conta.
Vale observar que para classes derivadas, o construtor da classe pai não é automaticamente herdado quando o construtor da classe derivada é chamado.



12. Conclusões


A realização deste Projeto Supervisionado possibilitou o estudo da linguagem PHP, que se mostrou uma ferramenta poderosa e simples de utilizar na construção de sites para a World Wide Web dinâmicos, possibilitando uma maior interação com o usuário e a armazenagem das informações em Bancos de Dados.
Após a conclusão da aplicação, tornou-se claro que a combinação de scripts server-side, como é o PHP, com scripts client-side, como JavaScript, por exemplo, possibilita um maior aproveitamento dos recursos disponíveis para criar páginas dinâmicas, e no processo de criação deve-se ponderar bastante para concluir qual dos dois tipos de scripts deve ser utilizado para determinado fim.
Entre as linguagens de script server-side, PHP surgiu como uma ótima opção, por diversos motivos: o custo de aquisição, que não existe; a portabilidade, permitindo que uma aplicação seja desenvolvida em uma plataforma para ser executada em outra; a simplicidade, já que os scripts ficam no próprio código html, e possuem uma sintaxe bastante simples; a possibilidade de trabalhar com diversos bancos de dados e servidores http, além do grande número de funções pré-definidas, entre outras coisas.
Por esses e outros motivos, é possível afirmar que o estudo sobre PHP foi bastante enriquecedor, por ter produzido uma documentação em português para a linguagem e ter motivado o aluno a continuar se dedicando ao tema.

13. Bibliografia e Referências

A pesquisa foi baseada no manual de PHP, disponível em www.php.net, e em diversos tutoriais disponíveis no site www.phpbuilder.com. Esses dois endereços contém uma vasta documentação sobre a linguagem, além de endereços para listas de discussão, onde pode-se solicitar ajuda de programadores mais experientes.
Uma boa referência em português é a lista "PHP para quem fala Português", que pode ser assinada no endereço www.egroups.com/group/php-pt/.
Em inglês, além dos endereços citados acima, uma boa fonte é o site PHPWizard, que pode ser encontrado em www.phpwizard.net.




APÊNDICE 01 - Funções para tratamento de strings

Funções relacionadas a HTML
htmlspecialchars
string htmlspecialchars(string str);

Retorna a string fornecida, substituindo os seguintes caracteres:
"    & para '&amp;'
"    " para '&quot;'
"    < para '&lt;'
"    > para '&gt;'

htmlentities
string htmlentities(string str);

Funciona de maneira semelhante ao comando anterior, mas de maneira mais completa, pois converte todos os caracteres da string que possuem uma representação especial em html, como por exemplo:
"    º para '&ordm;'
"    ª para '&ordf;'
"    á para '&aacute;'
"    ç para '&ccedil;'

nl2br
string nl2br(string str);

Retorna a string fornecida substituindo todas as quebras de linha ("\n") por quebras de linhas em html ("<br>").

Exemplo:
echo nl2br("Mauricio\nVivas\n");

Imprime:
Maurício<br>Vivas<br>


get_meta_tags
array get_meta_tags(string arquivo);

Abre um arquivo html e percorre o cabeçalho em busca de "meta" tags, retornando num array todos os valores encontrados.

Exemplo:
No arquivo teste.html temos:
...
<head>
<meta name="author" content="jose">
<meta name="tags" content="php3 documentation">
...
</head><!-- busca encerra aqui -->
...

a execução da função:

get_meta_tags("teste.html");

retorna o array:

array("author"=>"jose","tags"=>"php3 documentation");


strip_tags
string strip_tags(string str);

Retorna a string fornecida, retirando todas as tags html e/ou PHP encontradas.
Exemplo:
strip_tags('<a href="teste1.php3">testando</a><br>');

Retorna a string "testando"


urlencode
string urlencode(string str);

Retorna a string fornecida, convertida para o formato urlencode. Esta função é útil para passar variáveis para uma próxima página.


urldecode
string urldecode(string str);

Funciona de maneira inversa a urlencode, desta vez decodificando a string fornecida do formato urlencode para texto normal.


Funções relacionadas a arrays

Implode e join
string implode(string separador, array partes);
string join(string separador, array partes);

As duas funções são idênticas. Retornam uma string contendo todos os elementos do array fornecido separados pela string também fornecida.

Exemplo:
$partes = array("a", "casa número", 13, "é azul");
$inteiro = join(" ",$partes);

$inteiro passa a conter a string:
"a casa número 13 é azul"

split
array split(string padrao, string str, int [limite]);

Retorna um array contendo partes da string fornecida separadas pelo padrão fornecido, podendo limitar o número de elementos do array.

Exemplo:
$data = "11/14/1975";
$data_array = split("/",$data);

O código acima faz com que a variável $data_array receba o valor:
array(11,14,1975);


explode
array explode(string padrao, string str);

Funciona de maneira bastante semelhante à função split, com a diferença que não é possível estabelecer um limite para o número de elementos do array.

Comparações entre strings
similar_text
int similar_text(string str1, string str2, double [porcentagem]);

Compara as duas strings fornecidas e retorna o número de caracteres coincidentes. Opcionalmente pode ser fornecida uma variável, passada por referência (ver tópico sobre funções), que receberá o valor percentual de igualdade entre as strings. Esta função é case sensitive, ou seja, maiúsculas e minúsculas são tratadas como diferentes.

Exemplo:

$num = similar_text("teste", "testando",&$porc);

As variáveis passam a ter os seguintes valores:

$num == 4; $porc == 61.538461538462


strcasecmp
int strcasecmp(string str1, string str2);

Compara as duas strings e retorna 0 (zero) se forem iguais, um valor maior que zero se str1 > str2, e um valor menor que zero se str1 < str2. Esta função é case insensitive, ou seja, maiúsculas e minúsculas são tratadas como iguais.

strcmp
int strcasecmp(string str1, string str2);

Funciona de maneira semelhante à função strcasecmp, com a diferença que esta é case sensitive, ou seja, maiúsculas e minúsculas são tratadas como diferentes.

strstr
string strstr(string str1, string str2);
string strchr(string str1, string str2);

As duas funções são idênticas. Procura a primeira ocorrência de str2 em str1. Se não encontrar, retorna uma string vazia, e se encontrar retorna todos os caracteres de str1 a partir desse ponto.

Exemplo:

strstr("Mauricio Vivas", "Viv"); // retorna "Vivas"

stristr
string strstr(string str1, string str2);

Funciona de maneira semelhante à função strstr, com a diferença que esta é case insensitive, ou seja, maiúsculas e minúsculas são tratadas como iguais.

strpos
int strpos(string str1, string str2, int [offset] );

Retorna a posição da primeira ocorrência de str2 em str1, ou zero se não houver. O parâmetro opcional offset determina a partir de qual caracter de str1 será efetuada a busca. Mesmo utilizando o offset, o valor de retorno é referente ao início de str1.

strrpos
int strrpos(string haystack, char needle);

Retorna a posição da última ocorrência de str2 em str1, ou zero se não houver.

Funções para edição de strings

chop
string chop(string str);

Retira espaços e linhas em branco do final da string fornecida.

Exemplo:
chop("   Teste      \n  \n  "); // retorna "   Teste"


ltrim
string ltrim(string str);

Retira espaços e linhas em branco do final da string fornecida.

Exemplo:
ltrim("   Teste  \n  \n "); // retorna "Teste  \n  \n"


trim
string trim(string str);

Retira espaços e linhas em branco do início e do final da string fornecida.

Exemplo:
trim("   Teste  \n  \n "); // retorna "Teste"


strrev
string strrev(string str);

Retorna a string fornecida invertida.

Exemplo:

strrev("Teste"); // retorna "etseT"


strtolower
string strtolower(string str);

Retorna a string fornecida com todas as letras minúsculas.

Exemplo:

strtolower("Teste"); // retorna "teste"

strtoupper
string strtoupper(string str);

Retorna a string fornecida com todas as letras maiúsculas.

Exemplo:

strtolower("Teste"); // retorna "TESTE"


ucfirst
string ucfirst(string str);

Retorna a string fornecida com o primeiro caracter convertido para letra maiúscula.

Exemplo:

ucfirst("teste de funcao"); // retorna "Teste de funcao"


ucwords
string ucwords(string str);

Retorna a string fornecida com todas as palavras iniciadas por letras maiúsculas.

Exemplo:

ucwords("teste de funcao"); // retorna "Teste De Funcao"


str_replace
string str_replace(string str1, string str2, string str3);

Altera todas as ocorrências de str1 em str3 pela string str2.

Funções diversas

chr
string chr(int ascii);

Retorna o caracter correspondente ao código ASCII fornecido.



ord
int ord(string string);

Retorna o código ASCII correspontente ao caracter fornecido.


echo
echo(string arg1, string [argn]... );

Imprime os argumentos fornecidos.

print
print(string arg);

Imprime o argumento fornecido.
strlen
int strlen(string str);

Retorna o tamanho da string fornecida.

APÊNDICE 02 - Funções para tratamento de arrays

Funções Genéricas

Array
array array(...);

É a função que cria um array a partir dos parâmetros forncidos. É possível fornecer o índice de cada elemento. Esse índice pode ser um valor de qualquer tipo, e não apenas de inteiro. Se o índice não for fornecido o PHP atribui um valor inteiro sequencial, a partir do 0 ou do último índice inteiro explicitado. Vejamos alguns exemplos:

Exemplo 1
$teste = array("um", "dois","tr"=>"tres",5=>"quatro","cinco");

Temos o seguinte mapeamento:
0 => "um" (0 é o primeiro índice, se não houver um explicito)
1 => "dois" (o inteiro seguinte)
"tr" => "tres"
5 => "quatro" (valor explicitado)
6 => "cinco" (o inteiro seguinte ao último atribuído, e não o próximo valor, que seria 2)

Exemplo 2
$teste = array("um", 6=>"dois","tr"=>"tres",5=>"quatro","cinco");

Temos o seguinte mapeamento:
0 => "um"
6 => "dois"
"tr" => tres
5 => "quatro" (seria 7, se não fosse explicitado)
7 => "cinco" (seria 6, se não estivesse ocupado)

Em geral, não é recomendável utilizar arrays com vários tipos de índices, já que isso pode confundir o programador. No caso de realmente haver a necessidade de utilizar esse recurso, deve-se ter bastante atenção ao manipular os índices do array.

range
array range(int minimo, int maximo);

A função range cria um array cujos elementos são os inteiros pertencentes ao intervalo fornecido, inclusive. Se o valor do primeiro parâmetro for maior do que o do segundo, a função retorna false (valor vazio).

shuffle
void shuffle(array &arr);

Esta função "embaralha" o array, ou seja, troca as posições dos elementos aleatoriamente e não retorna valor algum.

sizeof
int sizeof(array arr);

Retorna um valor inteiro contendo o número de elementos de um array. Se for utilizada com uma variável cujo valor não é do tipo array, retorna 1. Se a variável não estiver setada ou for um array vazio, retorna 0.

Funções de "navegação"
Toda variável do tipo array possui um ponteiro interno indicando o próximo elemento a ser acessado no caso de não ser especificado um índice. As funções seguintes servem para modificar esse ponteiro, permitindo assim percorrer um array para verificar seu conteúdo (chaves e elementos).

reset
mixed reset(array arr);

Seta o ponteiro interno para o primeiro elemento do array, e retorna o conteúdo desse elemento.
end
mixed end(array arr);

Seta o ponteiro interno para o último elemento do array, e retorna o conteúdo desse elemento.

next
mixed next(array arr);

Seta o ponteiro interno para o próximo elemento do array, e retorna o conteúdo desse elemento.
Obs.: esta não é uma boa função para determinar se um elemento é o último do array, pois pode retornar false tanto no final do array como no caso de haver um elemento vazio.

prev
mixed prev(array arr);

Seta o ponteiro interno para o elemento anterior do array, e retorna o conteúdo desse elemento. Funciona de maneira inversa a next.

pos
mixed pos(array arr);

Retorna o conteúdo do elemento atual do array, indicado pelo ponteiro interno.

key
mixed key(array arr);

Funciona de maneira bastante semelhante a pos, mas ao invés de retornar o elemento atual indicado pelo ponteiro interno do array, retorna seu índice.
each
array each(array arr);

Retorna um array contendo o índice e o elemento atual indicao pelo ponteiro interno do array. o valor de retorno é um array de quatro elementos, cujos índices são 0, 1, "key" e "value". Os elementos de índices 0 e "key" armazenam o índice do valor atual, e os elementos de índices 1 e "value" contém o valor do elemento atual indicado pelo ponteiro.
Esta função pode ser utilizada para percorrer todos os elementos de um array e determinar se já foi encontrado o último elemento, pois no caso de haver um elemento vazio, a função não retornará o valor false. A função each só retorna false depois q o último elemento do array foi encontrado.

Exemplo:

/*função que percorre todos os elementos de um array e imprime seus índices e valores */
function imprime_array($arr) {
  reset($arr);
  while (list($chave,$valor) = each($arr))
    echo "Chave: $chave. Valor: $valor";
}


Funções de ordenação
São funções que servem para arrumar os elementos de um array de acordo com determinados critérios. Estes critérios são: manutenção ou não da associação entre índices e elementos; ordenação por elementos ou por índices; função de comparação entre dois elementos.

sort
void sort(array &arr);

A função mais simples de ordenação de arrays. Ordena os elementos de um array em ordem crescente, sem manter os relacionamentos com os índices.

rsort
void rsort(array &arr);

Funciona de maneir ainversa à função sort. Ordena os elementos de um array em ordem decrescente, sem manter os relacionamentos com os índices.

asort
void asort(array &arr);

Tem o funcionamento bastante semelhante à função sort. Ordena os elementos de um array em ordem crescente, porém mantém os relacionamentos com os índices.

arsort
void arsort(array &arr);

Funciona de maneira inversa à função asort. Ordena os elementos de um array em ordem decrescente e mantém os relacionamentos dos elementos com os índices.

ksort
void ksort(array &arr);

Função de ordenação baseada nos índices. Ordena os elementos de um array de acordo com seus índices, em ordem crescente, mantendo os relacionamentos.

usort
void usort(array &arr, function compara);

Esta é uma função que utiliza outra função como parâmetro. Ordena os elementos de um array sem manter os relacionamentos com os índices, e utiliza para efeito de comparação uma função definida pelo usuário, que deve comparar dois elementos do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.
uasort
void uasort(array &arr, function compara);

Esta função também utiliza outra função como parâmetro. Ordena os elementos de um array e mantém os relacionamentos com os índices, utilizando para efeito de comparação uma função definida pelo usuário, que deve comparar dois elementos do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.

uksort
void uksort(array &arr, function compara);

Esta função ordena o array  através dos índices, mantendo os relacionamentos com os elementos., e utiliza para efeito de comparação uma função definida pelo usuário, que deve comparar dois índices do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.

curso de HTML

Curso de HTML

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

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: <comando> e tags de

fechamento: </comando>. 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 <br />.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.

Você pode mostrar alguns exemplos?

OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser

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

Exemplo 1:

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

Vai ser apresentado no navegador, como mostrado a seguir:

Este texto deve ser em negrito.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um

cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele

apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele

apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele

apresentado com o menor tamanho de texto.

Exemplo 2:

<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 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.<COMANDO>, <comando> ou <CoMaNdo> 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 <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.

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:

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

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:

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

<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 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, <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 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 site HTML.net:

Exemplo 1:

<a href="http://www.html.net/">Aqui um link para HTML.net</a>

Será renderizado no navegador assim:

Aqui um link para HTML.net

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 "http://www.html.net", que é o endereço completo

do site HTML.net 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 </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:

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

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

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

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

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

Tudo fica claro com um exemplo:

Exemplo 5:

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

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>

Será renderizado no navegador assim:

Enviar e-mail para nobody em HTML.net

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:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda

HTML">HTML.net</a>

Será renderizado no navegador assim:

HTML.net

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 site HTML.net e aprenda

HTML".

Lição 9: Imagens

O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no

centro da sua página?

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:

<img src="paisagem1.jpg" alt="Paisagem1" />

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 <br /> 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 Irfan 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:

<img src="images/cursoht.jpg">

Exemplo 3:

<img src="http://www.html.net/cursoht.jpg">

Segundo, imagens podem ser links:

Exemplo 4:

<a href="http://www.html.net">

<img src="cursoht.jpg"></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:

<img src="cursoht.jpg" alt="logotipo do HTML.net">

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:

<img src="cursoht.jpg" title="Aprenda HTML no site HTML.net">

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 HTML no site HTML.net" .

Dois outros atributos importantes são width e height:

Exemplo 7:

<img src="cursoht.jpg" 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:

<img src="logo.gif" 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.

Lição 10: Tabelas

Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser

apresentada em linhas e colunas, de forma lógica.

É difícil?

Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a

passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.

Exemplo 1:

<table>

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4

Qual a diferença entre <tr> e <td>?

Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que

escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:

3 tags básicas são usadas para inserir tabelas:

• <table> começa e termina uma tabela. Evidente.

• <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da

tabela. Também evidente.

• <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas

linhas da tabela. Tudo simples e evidente.

Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o

início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e

<td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente

a seguir. A nova linha também contém duas células. A tabela termina com </table>.

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:

Célula 1 Célula 2

Célula 3 Célula 4

Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número

ilimitado de linhas e colunas.

Exemplo 2:

<table>

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

<tr>

<td>Célula 5</td>

<td>Célula 6</td>

<td>Célula 7</td>

<td>Célula 8</td>

</tr>

<tr>

<td>Célula 9</td>

<td>Célula 10</td>

<td>Célula 11</td>

<td>Célula 12</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2 Célula 3 Célula 4

Célula 5 Célula 6 Célula 7 Célula 8

Célula 9 Célula 10 Célula 11 Célula 12

Existem atributos?

Claro! existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de

uma borda em volta da tabela:

Exemplo 3:

<table border="1">

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4

A espessura da borda é especificada em pixels (Ver lição 9)

Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela -

ou alternativamente em percentagem da tela:

Exemplo 4:

<table border="1" width="30%">

Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente

você mesmo.

Mais atributos?

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:

• align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma

célula. Por exemplo, left, centre ou right (à esquerda, no centro ou à direita).

• valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle

ou bottom (em cima, no meio ou em baixo).

Exemplo 5:

<td align="right" valign="top">Célula 1</td>

O que posso inserir em tabelas?

Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS,

tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser

apresentados em linhas e colunas) então abstenha-se de colocar coisas dentro de tabela

simplesmente porque você deseja que elas estejam próximas umas às outras.

Nos primórdios da Internet - isto é, há poucos anos atrás - tabelas eram usadas como ferramenta

para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma

maneira bem mais racional (dica:CSS). Adiante veremos isto.

Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos,

usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.

Lição 11: Mais tabelas

O título "Mais tabelas" pode sugerir uma lição enfadonha. Mas, veja as coisas pelo lado positivo,

depois que você se tornar um mestre em tabelas nada mais do HTML poderá desafiá-lo.

O que mais existe?

Os dois atributos colspan e rowspan são usados para criar tabelas singulares.

Colspan é a abreviação para "column span". Colspan é usada na tag <td> para indicar

quantas colunas estarão contidas em uma célula.

Exemplo 1:

<table border="1">

<tr>

<td colspan="3">Célula 1</td>

</tr>

<tr>

<td>Célula 2</td>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1

Célula 2 Célula 3 Célula 4

Definindo colspan em "3", a célula na primeira linha conterá três colunas. Se você definir

colspan em "2", a célula conterá duas colunas e assim será necessário inserir mais uma célula na

primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.

Exemplo 2:

<table border="1">

<tr>

<td colspan="2">Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

<td>Célula 5</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4 Célula 5

Que tal rowspan?

Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma

célula:

Exemplo 3:

<table border="1">

<tr>

<td rowspan="3">Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

</tr>

<tr>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1

Célula 2

Célula 3

Célula 4

No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve

conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam

duas linhas independentes.

Confuso? Bem, isto na verdade não é descomplicado e você pode se perder. Assim, é sempre uma

boa idéia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML.

Não está confuso? Então vá em frente e crie algumas tabela com uso de colspan e rowspan.

Lição 12: Layout (CSS)

Não seria ótimo se você pudesse dar à sua página o layout que ela merece?

Claro! mas como faço isto?

Para o layout da sua página use Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata.

Nesta lição você terá uma breve introdução às CSS. Depois você poderá aprender CSS desde o

início no nosso tutorial CSS. Assim, considere esta lição apenas um aperitivo.

CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável

pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).

Como mostrado na Lição 7, CSS pode ser adicionado com uso do atributo style. Por exemplo,

você pode definir o tipo e o tamanho da fonte em um parágrafo:

Exemplo 1:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>

<p style="font-family:courier;">Este parágrafo em fonte Courier</p>

<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e

tamanho 20px</p>

Será renderizado no navegador assim:

Este parágrafo em tamanho de fonte igual a 20px

Este parágrafo em fonte Courier

Este parágrafo em fonte Courier e tamanho 20px

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade

font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no último

parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e

vírgula.

Está parecendo que há uma grande quantidade de trabalho a

executar

Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de

um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao

navegador como deve ser o layout de todos os textos em uma página:

Exemplo 2:

<html>

<head>

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

<style type="text/css">

h1 {font-size: 30px; font-family: arial}

h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}

</style>

</head>

<body>

<h1>Minha primeira página CSS</h1>

<h2>Bem vindo à minha primeira página CSS</h2>

<p>Aqui você verá como funciona CSS</p>

</body>

</html>

No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página

inteira . Para fazer isto use a tag <style type="text/css"> que informa ao navegador que

você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os

subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte

Times New Roman tamanho 8.

Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um

documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito

inteligente, pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer

ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora, mas você

pode aprender tudo, no futuro, em nosso tutorial CSS.

O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode adicionar

cores e fundos. A seguir alguns exemplos para você praticar:

<p style="color:green;">Texto verde</p>

<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>

<body style="background-image: url('http://www.html.net/logo.png');">

Tente inserir estes códigos em algumas das suas páginas - experimente as duas formas de inserir,

tanto como mostrado acima como colocando as CSS na seção head do documento.

CSS não é nada mais do que cores e tipos de fontes?

Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a

apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os

diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.

Exemplo 3:

<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>

Será renderizado no navegador assim:

Eu amo CSS

Com a propriedade float um elemento poderá "flutuar" à esquerda ou à direita. O exemplo

seguinte ilustra este princípio:

Exemplo 4:

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore

magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat...</p>

Será renderizado no navegador assim:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro

elemento (o texto) preenche o espaço deixado à direita.

Com a propriedade position, você pode posicionar um elemento em

qualquer lugar da página, com precisão:

Exemplo 5:

<img src="bill.jpg" alt="Bill Gates"

style="position:absolute;bottom:50px;right:10px;" />

No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda

direita do navegador. Você pode colocar em qualquer lugar na página. Tente você mesmo. Fácil e

legal, eh?

Legal sim. Mas, fácil?

Você não aprende CSS em 10 minutos. E como foi dito acima, nesta lição você teve apenas uma

breve introdução às CSS. No futuro aprenda mais no nosso Tutorial CSS.

Por enquanto concentre-se no HTML, e passe para a próxima lição onde você aprenderá como

publicar seu website na Internet para que o mundo todo o veja!

Erro de leitura

Lição 13: Uploading páginas

Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o

mundo todo.

O mundo está preparado para ver suas páginas?

O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho na

Internet, você precisa somente de espaço em um servidor e um programa FTP gratuito.

Se você costuma acessar a Internet já deve ter visto que existem vários serviços gratutitos de

hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com

http://home.servidor.com/~nomedousuario. Você tem que ativar o serviço. Informe-se como fazer

isto na documentação fornecida pelo serviço de hospedagem.

Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma

conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) você pode registrarse

gratuitamente para obter um espaço em um servidor na Internet. Existem várias companhias

que oferecem este serviço gratuito - entre elas a Angelfire (clique em "Sign Up" e escolha membro

gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em

português) - isto é um processo bem rápido.

Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo,

ftp.angelfire.com) e ter um nome de usuário e senha.

Isto é tudo que eu preciso?

Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve ter

um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos.

Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o

FileZilla em filezilla.sourceforge.net.

Como eu faço o upload das páginas?

Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programa

FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP.

Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no

"Address"), nome do usuário (em "User") e senha (em "Password") clique "Connect". Você agora

tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu

computador ("Local Site"), e no outro o do servidor ("Remote Site"):

Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o

servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo

poderá ver seu site! (Por exemplo, no endereço

http://www.angelfire.com/folk/htmlnet/pagina1.htm).

Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a

página de entrada no site, ou seja, basta digitar http://www.angelfire.com/folk/htmlnet (sem

qualquer nome de arquivo) e abrirá http://www.angelfire.com/folk/htmlnet/index.htm.

Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para você

(www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles

fornecidos por um serviço gratuito da Internet. Você pode encontrar na Internet várias firmas que

vendem domínio. Faça uma busca do Google.

Lição 14: Web standards e validação

Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.

O que mais há para conhecer sobre HTML?

HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias

maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porquê alguns websites

são apresentados de formas diversas em diferentes navegadores.

Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o

HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim

Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um árduo e longo

caminho.

No passado - quando você tinha que comprar um navegador - Netscape dominava o mercado de

navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo

fato de dominar 90% do mercado a Netscape não teria - e não teve - que se preocupar muito com

normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não

funcionavam em outros navegadores.

Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento,

resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador

da Microsoft's, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do

HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a

todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.

A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior

suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e

continuou a colocar no mercado a velha e desatualizada versão 4.

O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no

XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer

ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os

navegadores Mozilla, Opera e Netscape também suportam as normas.

Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo

um website para ser visualizado em todos os navegadores - não só agora mas também no futuro.

E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão

do HTML, que é o XHTML.

Legal! Posso anunciar?

Devido a existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o

"dialeto" do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o

Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do

documento:

Exemplo 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<title>Título</title>

</head>

<body>

<p>texto texto</p>

</body>

</html>

Além do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao

navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag

html, usando os atributos xmlns e lang.

xmlns é abreviação de "XML-Name-Space" e deve ter sempre o valor

http://www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você tem o hábito ou

gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do

W3C.

No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento

é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No

exemplo acima a língua definida no atributo é o português do Brasil ("pt-br").

Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo

mostrado, como um template para todos os seus futuros documentos HTML.

O DTD é importaante ainda, para a validação da página.

Validação? Porquê deveria eu fazer isto?

Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador gratuito

do W3C.

Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em

validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se

seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada

uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu

código para verificar o que acontece.

O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros

cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em

navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não

aceitam o erro e apresentam a página arruinada ou mesmo nem apresentam. O validador então ajuda

você a encontrar erros que você não tenha nem idéia de que existiam

Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os

navegadores.