Creio que esta série será de muita utilidade para todos que estão aprendendo e mesmo os que já tem alguma experiênia com criação de web sites.
Abordaremos a criação de um site desde sua arquitetura até sua publicação na web.
Ferramentas utilizadas:
- Editor de html (eu uso dreamweaver, mas pode ser front page eu até o bloco de notas)
- Fireworks (para criar os fundos, botões, menus e etc.)
- Photoshop (para tratamento e recorte das imagens)
- Flash (para animar menus e criar filmes)
- Php-Mysql / JavaScript (programação)
Para começar, precisamos ter uma noção de html, como ele funciona. Este post será destinado a isso.
Introdução ao HTML
O HTML, é a linguagem mãe usada para construir os sites. Apesar de ser
coisa do passado, um site ser feito apenas com HTML, sem o HTML não é possível
montar uma página de internet. O HTML foi ficando obsoleto, por ser uma linguagem
limitada não podendo trabalhar com gráficos e animações por exemplo, apenas texto e
imagens estáticas ou GIFs animados sem muita complexidade. Hoje é usado o HTML,
junto com alguma outra linguagem, ou com outras linguagens. Sim, porque vamos
supor que você queira colocar animações em seu site ou até mesmo fazer pequenas
alterações no ponteiro do mouse, mensagem na barra de título, mensagens de aviso.
Isso não seria possível somente com o HTML. São utilizadas linguagens como o Java
Script ou DHTML(Dynamic HTML) juntamente com o HTML. Hoje são desenvolvidas
páginas com banners em Flash, Fireworks, Photoshop, páginas feita toda em Flash(o
que não é recomendável para que não tem banda larga), páginas feitas no Fireworks,
mas introduzido e alinhado em uma site usando HTML e CSS.
1. O que são tags HTML?
AS TAGS HTML É A ESTRUTURA ONDE SERÁ MONTADA NOSSAS PÁGINAS HTML. AS
TAGS SÃO RESPONSÁVEIS PELO NAVEGADOR INTERPRETAR O QUE ESTÃO ENTRE
ELAS. SEM ELAS NÃO SERIA POSSÍVEL INTERPRETAR O SEU SITE.
2. Vamos ver as tags principais para a construção de uma
página HTML.
1. ESTRUTURA BÁSICA.
<html> é a tag de abertura do html.
<head> cabeçalho da página. onde ficam informações adicionais.
</head> tag de fechamento do cabeçalho.
<title> é a tag de abertura do título da janela.
</title> tag de fechamento do título da janela.
<body> corpo da página. aqui ficará a parte principal do seu site.
</body> tag de fechamento do corpo da página.
</html> tag de fechamento do html.
INICIANDO COM O HTML
1. TÍTULO NA JANELA DO SITE.
A tag utilizada para o título da janela é o <title>.
<html>
<head>
<title>Meu website</title>
</head>
<body>
</body>
</html>
2. TÍTULO DO SITE
A tag utilizada para o título é a <h1> ao <h6>.
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabeçalho</h1>
</body>
</html>
<title> Aqui ficará o título da janela </title>
<h1>Aqui ficará o título </h1>
<h2>Aqui ficará o título </h2>
<h3>Aqui ficará o título </h3>
<h4>Aqui ficará o título </h4>
<h5>Aqui ficará o título </h5>
<h6>Aqui ficará o título </h6>
*O tamanho do título pode ser definido por suas
tags de h1 a h6, sendo que quanto maior o valor
da tag menor será o tamanho do texto.
3. SUBTÍTULO DO SITE
A tag utilizada para o subtítulo é a <h1> ao <h6>.
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabeçalho</h1>
<h2>Subtítulo</h2>
</body>
</html>
4. TEXTO PARÁGRAFO NO SITE
A tag para o texto parágrafo é o <p>.
<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>
<h1>Aqui ficará o subtítulo </h1>
<h2>Aqui ficará o subtítulo </h2>
<h3>Aqui ficará o subtítulo </h3>
<h4>Aqui ficará o subtítulo </h4>
<h5>Aqui ficará o subtítulo </h5>
<h6>Aqui ficará o subtítulo </h6>
*O tamanho do subtítulo, pode ser definido
assim como no título.
<p>Aqui ficará o texto parágrafo</p>
No exemplo foi colocado um texto embaixo do título e em baixo do subtítulo.
5. Texto em negrito
Para colocarmos um texto em negrito devemos adicionar entre a tags <b> e </b>.
6. Texto em Itálico
Para colocarmos um texto em negrito devemos adicionar entre a tags <i> e </i>.
7. Texto com letras menores
Para fazermos textos usando letras menores podemos usar a tag <small></small>.
<b> Este texto deve ser negrito.</b>
<i> Este texto deve ser itálico.</i>
Este texto deve ser itálico.
<small> Este texto deve ser com letras em tamanho small</small>
Este texto deve ser negrito.
Este texto deve ser com letras em tamanho small.
8. Posso usar várias tags simultaneamente?
Sim você pode usar quantas tags queira, desde de que as aninhe
convenientemente.
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. As últimas tags a
serem abertas tem que ser as primeiras a serem fechadas, e as primeiras a
serem abertas terão de ser as últimas a serem fechadas.
<b><i>Texto em negrito e itálico.</i></b>
<b><i>Texto em negrito e itálico.</b></i>
4. MAIS TAGS!
9. 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:
Será renderizado no navegador assim:
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 ):
Será renderizado no navegador assim:
10. Lista
Um texto<br /> e mais texto em nova linha
Um texto
e mais texto em nova linha
<hr />
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
· Um item de lista
· Outro item de lista
11. Lista ordenada:
Tente você mesmo!
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
1. Primeiro item da lista
2. Segundo item da lista
<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>
5. ATRIBUTOS
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.
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.
O código acima renderiza uma página com cor de fundo vermelha. 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.
<h3 style="background-color:#ff0000;"> HTML (Hyper Text Markup Language)</h2>
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
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.
Você pode pesquisar na internet a tabela de cores, nela você encontrará todos os
códigos hexadecimais para cada cor.
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 algumas cores, você pode usar o nome das cores em inglês por exemplo (white,
black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).
Voltando 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.
Então, quais são as partes que constituem uma tag?
A constituição básica de uma tag é denominada elemento (por exemplo 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="backgroundcolor:#
ff0000;">).
<body style="background-color: red;">
6. Links
Como construir links entre as 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 pequena tag com um elemento e um atributo é suficiente para
você construir links para onde quiser.
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.
Exemplo: <a href="http://www.html.net">
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 entra
o nome do link" é 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:
<a href="http://www.html.com.br/">Aqui entra o nome do link</a>
Aqui entra o nome do link
<a href="pagina2.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:
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a
seguir:
"../" 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
"../../".
Como uma outra opção 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.
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.
<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>
<a href="../pagina1.htm">Aqui um link para a pagina 1</a>
<h1 id="heading1">Cabeçalho 1</h1>
<a href="#heading1">Link para o cabeçalho 1</a>
Obs.: O nome de um atributo id deve começar com uma letra
<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>
Link para cabeçalho 1
Link para cabeçalho 2
Cabeçalho 1
Texto texto texto texto
Cabeçalho 2
Texto texto texto texto
Links para um endereço de email
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. Como por exemplo o Outlook.
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:
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".
<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>
Enviar e-mail para nobody em HTML.net
<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>
HTML.net
7.Imagens
O que você acha de colocar uma imagem no centro da sua página? Tudo o que você precisa é da nossa conhecida tag.
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 abertura e
fechamento. Semelhante a tag <br /> e <hr />que não precisa de um texto inserido
nela.
"bandeiradobrasil.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 “.html” ou".htm"
para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma
imagem. Veja abaixo os 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 maior a
compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é
carregada no navegador.
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" />
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas
ultimamente o formato PNG tem se tornado cada vez mais popular. 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.
O Adobe Photoshop e o Adobe Fireworks são excelentes para fazer um papel de parede
para a sua página por exemplo. (No final da apostila vou ensinar como faz multiplicar
um plano de fundo, de forma que ele cubra com as mesmas imagens todo o fundo do
seu website). Um programa de edição de imagens é a ferramenta essencial
para criação de websites com grande impacto e apelo visual.
Vamos aprender mais algumas coisas sobre imagens.
Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até
mesmo em outros websites.<img src="http://www.html.com.br/caixa.png">
Segundo, imagens podem ser links:
<img src="images/caixa.png">
<img src="http://www.html.com.br/caixa.png">
<a href="http://www.html.com.br">
<img src="caixa.png"></a>
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:
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:
<img src="logo.gif" alt="logotipo do BR Masters">
<img src="bandeira.gif" title="Aprenda HTML no site HTML.com.br">
Dois outros atributos importantes são width e height:
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, apesar das resoluções 800x600 estarem ficando para
trás e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou superior). Ao
contrário de centímetros, pixel é uma unidade 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 e height, a imagem será inserida com seu
tamanho real. Com width e height você pode alterar o tamanho da imagem.
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.
<img src="logo.png" width="141" height="32">
<img src="logo.gif" width="32" height="32">
8. Tabelas
Tabelas são usadas para apresentar "dados tabulares", isto é, informação que
deva ser apresentada em linhas e colunas, de forma lógica e organizada.
É difícil?
Criar tabelas em HTML pode parecer complicado, mas quando você acompanhar passo
a passo a explicação, verá que é bem fácil.
Qual a diferença entre as tags <tr> e <td>?
Este com certeza é o código mais complicado 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.
· <tr> significa "table row" - linha de tabela - começa e termina e uma linha
horizontal da tabela.
· <td> significa "table data" - dados da tabela. começa e termina cada célula
contida nas linhas da tabela.
<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>
Célula 1 Célula 2
Célula 3 Célula 4
Eis o acontece no exemplo dado acima: 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.
Uma tabela pode conter um número ilimitado de linhas e colunas.
Outro exemplo:
<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>
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! Por exemplo, o atributo border que é usado para definir a espessura de uma
borda em volta da tabela:
A borda da tabela é especificada em pixels.
Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para
uma tabela - ou alternativamente em percentagem da tela.
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura
da tela.
<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>
<table border="1" width="30%">
Existem 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).
O que posso inserir em tabelas?
Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e
imagens... MAS, tabelas tem por objetivo 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 ou tableless). Veremos isso
mais a frente em CSS e tableless.
<td align="right" valign="top">Célula 1</td>
9. Mais Tabelas
Nesta segunda parte vamos dar continuação e aprender mais sobre as tabelas.
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.
<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>
E o rowspan?
Como você já deve ter concluido, rowspan especifica quantas linhas estarão
contidas em uma célula:
Isso não é difícil, é confuso. É bom desenhar a tabela em uma folha de papel antes de
começar a codificação HTML.
<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>
10. Uploading do seu site
Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrálas
para o mundo todo.
Para publicar a sua página na Web você precisará apenas de um espaço em um
servidor. Para facilitar o seu upload você poderá baixar um programa FTP(opcional) em
qualquer site de download de programas. Ele faz o upload das páginas sem precisar
acessar toda vez o site do servidor. Você acessará diretamente o servidor do seu
computador.
Na internet você já deve ter visto vários servidores gratuitos para hospedagem. Seu
endereço ficará cumprido algo parecido com http://home.servidor.com/nomedousuario.
Mas, existe uma maneira de redirecionar o endereço para que fique mais curto. Como
por exemplo: www.seusite.com.br. Porém, estes, com domínios: .com.br, .com, .net etc
são pagos. Existem gratuitos que deixam parecido com isso: www.seusite.k10.com.br
(k10 – é o nome da empresa que está hospedando). Bem melhor do que deixar aquele
endereço enorme.
Depois de cadastrado, para acessar o seu endereço FTP, de um programa FTP, você
precisará de apenas 3 coisas. O nome do servidor FTP (por exemplo:
ftp.br.geocities.com.br), o seu nome de usuário (por exemplo:
seunome@yahoo.com.br) e sua senha.
11. Webstandards 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 (o grande inventor do HTML).
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, 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 junto com o Sistema Operacional Windows 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.
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.
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:
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.
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").
<!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>
Validação? Porquê deveria eu fazer isto?
O DTD é importante também para a validação da página.
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.
Fonte: Apostila de Html/CSS/Xhtml - Apostilando.com
Obs.: Precisa ser cadastrado para baixar a apostila. Para se cadastrar
clique aqui.
O Apostilando.com é melhor site de apostilas gratuitas da internet. Se quiser ajudar, compre o Kit Web Apostilando, e aprenda a utilizar as ferramentas que serão abordadas nessa série: Dreamweaver, Photoshop, Fireworks, Flash, Php e muito mais. Para comprar o kit
clique aqui.
E este no internet explorer 8, abrindo direto na pasta Mais Música ou apertando F12 no Dreamweaver:
