Divirtam-se! Esta é a segunda e última parte do tuto de HTML básico.
Lição 9: Imagens
Você deve dizer pro navegador que quer inserir uma imagem (img) e depois informa onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem).
Pra isso, se usa esta tag: <img src="tim.jpg">.
Você verá a página assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Repare que esta tag é um comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag <br /> ("br"= break), que não precisa de um texto inserido nela. O "tim.jpg" é o nome do arquivo da imagem que você vai inserir na página. O ".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.
Existem três tipos de imagens que você pode inserir na sua página:
1. GIF (Graphics Interchange Format)
2. JPG / JPEG (Joint Photographic Experts Group)
3. PNG (Portable Network Graphics)
Em geral, as 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. Provavelmente você sabe que páginas "pesadas" são frustantes para o usuário.
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 é melhor que os outros dois formatos: milhões de cores e efetiva compressão.
Manipulando as Imagens
A criação de websites é ligada ao uso criativo de imagens. Para que você possa criar suas próprias imagens, você precisa de um programa de edição de imagens. Esta ferramenta é essencial, pra atrair a atenção dos visitantes.
Infelizmente, nenhum editor de imagem vem instalado junto com o Windows ou qualquer outro sistema operacional. Você deve adquirir o Paint Shop Pro, PhotoShop ou Macromedia Fireworks, que são excelentes sugestões. Contudo, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download do Irfan View que é freeware, isto é, não custa nada.
Ou você pode fazer download de imagens existentes na web. Mas, se seguir esta opção, tome cuidado para não violar os direitos autorais de terceiros.
Agora, ensinarei a fazer downloads de uma imagem dentro da 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 este teste com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus outros documentos HTML. O arquivo foi salvo no formato PNG: logo.png:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Agora, transfira a imagem até a pasta onde você guarda as suas páginas de HTML.
Ex:
- Código:
-
<img src="logo.png" />
Tente criar uma webpage e faça esta tag. Ela fará a imagem aparecer na sua página!
Além de inserir as imagens dentro da própria pasta da sua página, você poderá colocar as imagens que ficam guardadas em outros diretórios ou até mesmo em outros websites:
Exemplo 2:
- Código:
-
<img src="images/logo.png">
Exemplo 3:
- Código:
-
<img src="http://www.html.net/logo.png">
As imagens também poderão ter links incorporados nelas. Veja este exemplo:
Exemplo 4:
- Código:
-
<a href="http://www.html.net">
<img src="logo.png"></a>
Atributos Extras
Você sempre usará o atributo "src", pra mandar pro navegador a localização da imagem. Alguns outros atributos são bem úteis ao inserir imagens em sua página.
O atributo "alt" é usado para fornecer uma descrição textual da imagem:
Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
<img src="tim.jpg" alt="Tim Berners-Lee">
Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo "alt" quando o usuário passa o mouse sobre a imagem. O atributo "title" terá os mesmos efeitos:
Exemplo 6:
<img src="logo.gif" title="Aprenda HTML no site HTML.net">
Deixe o ponteiro sobre a imagem, (sem clicar) e então, aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net".
Você também poderá usar os atributos "width" e "height": <img src="logo.png" width="141" height="32">.
Os atributos "width" e "height" são usados pra definir respectivamente, a largura e a altura. O valor adotado para estas medidas é o pixel.
Pixel, por sua vez, é a unidade de medida de resolução da tela. (As resoluções de tela mais usadas são de 800x600 e 1024x768 pixels).
O pixel é uma unidade 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.
Exemplo 8:
<img src="logo.gif" width="32" height="32">
Você não vai poder diminuir o tempo de descarga da imagem,
por mais que você diminua o tamanho da imagem com o uso destes atributos.
Se você precisa diminuir o "peso" da imagem use um editor de imagens para torná-las mais leves e mais rápidas.
É sempre bom definir os atributos "width" e "height" para suas imagens, pois permite ao navegador, saber com antecedência como será o layout da página.
Lição 10: Tabelas
Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas.
Criar tabelas em HTML pode parecer complicado, mas se você prestar mais atenção, você verá como tudo segue uma lógica.
Exemplo 1:
- Código:
-
<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>
Este é um código HTML um pouco mais complexo do que os demais. Vamos analisá-lo e explicar as suas diferentes tags:
Numa tabela, apresentamos 3 tags básicas
<table> Ela 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. Ela começa e termina cada célula contida nas linhas da tabela.
Dissertando: a tabela do exemplo 1 começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células sã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. Esta 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 |
As células 1 e 2 formam uma linha. Já as células 1 e 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:
- Código:
-
<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 |
Atributos Extras
O atributo "border" é usado para definir a espessura de uma borda em volta da tabela:
Exemplo 3:
- Código:
-
<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.
Lembra-se do atributo "width" (largura), da última lição? Ela poderá ser usada tanto na forma de pontos em pixel como em percentagem da tela:
Exemplo 4:
- Código:
-
<table border="1" width="30%">
<table border="1" width="275">
Nos exemplos acima, temos uma tabela renderizada com largura igual a 30% da largura da tela e a segunda com 275 pixels. Experimente usar cada uma na sua página.
Usando os atributos "align" e "valign", você definirá o alinamento do conteúdo da tabela.
- align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center 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:
- Código:
-
<td align="right" valign="top">Célula 1</td>
Você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS, lembre-se de que as tabelas devem apresentar dados tabulares (isto é, dados que devem ser apresentados em linhas e colunas).
Nos primórdios da Internet, as 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 (o CSS).
Agora, coloque em prática o que aprendemos aqui e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.
Lição 11: Tabelas II
Como dá pra desconfiar, você terá de trabalhar com tabelas de novo... Pode ser difícil aprender a usá-las, mas depois de se especializar nelas, nada do que verá em HTML vai lhe assustar.
Novos Atributos
Os atributos "colspan" e "rowspan" são usados para criar tabelas únicas.
"Colspan" é a abreviação para "column span". O "Colspan" é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula.
Exemplo 1:
- Código:
-
<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>
Definindo colspan em "3", a célula na primeira linha conterá três colunas.
Exemplo 2:
- Código:
-
<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>
O "rowspan" especifica quantas linhas estarão contidas em uma célula:
Exemplo 3:
- Código:
-
<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>
No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve conter 3 linhas.
É fácil se perder numa tabela deste tipo. Uma dica é desenhar a tabela numa folha de papel, antes de começar a codificação HTML.
Vá em frente e crie algumas tabelas com uso de "colspan" e "rowspan".
Lição 12: Frames
Nesta lição, vou explicar como se cria frames em suas páginas da web. Antes de mais nada,
separe uma pasta apenas com seus documentos de htm.
Os frames (quadros) são relativamente usadas na web. Há pessoas que gostam de usar frames e há outras que abominam o uso delas, pois acham que estragam o layout da home-page.
Os frames têm praticamente o mesmo procedimento da confecção de um arquivo de htm simples, apenas trocando o elemento <body> pela <frameset>.
Pra se obter uma home-page com frames, deveremos ter três arquivos de htm, uma com o código do <frameset> e outras duas paginas simples de htm.
Aqui, segue-se um exemplo de como fazer uma página com o <frameset>:
Exemplo 1:
- Código:
-
<html>
<head>
<title>Exemplo de Frames com colunas</title>
</head>
<frameset cols="20%, 80%">
<frame src="FRAME1.htm">
<frame src="FRAME2.htm">
</frameset>
</html>
No exemplo acima, inserimos o atributo "cols" dentro do elemento <frameset>. Com este atributo, dividiremos a tela do navegador em duas partes, uma com 20% e a outra com 80% da resolução de tela.
Já na linha <frame src="FRAME1.htm">, dá pra notar que o uso do atributo
"src" (source), chama a páginas que ocupará as colunas do frame acima.
Tente também, usar uma página da Internet que já exista e coloque-a no arquivo com frames.
Exemplo 2:
- Código:
-
<html>
<head>
<title>Exemplo de Frames com colunas</title>
</head>
<frameset cols="20%, 80%">
<frame src="FRAME1.htm">
<frame src="http://www.moogle.finalfantasy.com.br">
</frameset>
</html>
Você verá que pode criar um frame com páginas dentro do seu diretório, como páginas que estão na Internet.
(Lembre-se de que as páginas da Internet requerem que você esteja conectado, já as páginas dentro do seu diretório, não)
Agora que você já tem uma página com frames, faça um teste. Crie uma página com frames e então, crie mais outras duas páginas (ou use as que você já tem aí guardado na pasta). Relembrando que, ao usar o "frame src", você deve colocar o nome correto das suas páginas, ou você não conseguirá chamar as páginas dentro do arquivo com os frames.
Exemplo 3:
- Código:
-
<frame src="nomedapágina.htm">
Além de poder dividir o navegador em colunas com o atributo "cols", você poderá dividir em linhas, com o uso do atributo "rows" ou usar ambos os atributos.
Exemplo 4:
- Código:
-
<html>
<head>
<title>Exemplo de Frame com linhas</title>
</head>
<frameset rows="50%, 50%">
<frame src="FRAME1.htm">
<frame src="FRAME2.htm">
</frameset>
</html>
Exemplo 5:
- Código:
-
<html>
<head>
<title>Exemplo de Frame com 2 linhas e 2 colunas</title>
</head>
<frameset rows="50%, 50%" cols="50%, 50%">
<frame src="TUH_PAGE3.htm">
<frame src="TUH_PAGE3.htm">
<frame src="TUH_PAGE3.htm">
<frame src="TUH_PAGE3.htm">
</frameset>
</html>
Resumindo
Nesta lição, dei alguns exemplos do uso de frames, assim como os atributos "src", "cols" e "rows". Nada de tão complicado de se aprender. Mas, ainda existem outros atributos pras frames, então se quiser, procure e leia mais sobre frames e faça seus testes. Na próxima lição, você será apresentado à uma das tags mais usadas pra se construir websites, as CSS.
Lição 13: Layout
Já que você se familiarizou com diversos elementos e atributos, já está na hora de conhecer um pouco sobre o CSS.
CSS provém do termo Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Com ela você poderá dar mais um charme no layout da sua página.
Com o uso do CSS e do HTML, você dará um novo aspecto do site. Enquanto o HTML cuida do trabalho bruto (conteúdo) o CSS dará um toque de elegância.
Como foi revelado algumas lições atrás, o CSS é adicionado com o uso do atributo "style". Por exemplo, você poderá definir o tipo e o tamanho da fonte em um parágrafo:
Exemplo 1:
- Código:
-
<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>
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).
Repare que, no último parágrafo do exemplo, definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula (
;).
Uma das funcionalidades mais inteligentes das CSS é a de controlar o layout de um arquivo central. Em vez de usar o atributo "style" em cada tag, você poderá informar como deve ser o layout de todos os textos em uma página:
Exemplo 2:
- Código:
-
<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>
Ver exemplo
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 alternativa é de digitar as CSS em um documento separado. Com as CSS separada em um documento, você pode gerenciar o layout de muitas páginas ao mesmo tempo. Dessa forma, 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ão vou aprofundar muito esta lição, mas já da pra se ter uma boa base.
Além de definir tipos e tamanhos de fontes, as CSS podem adicionar cores e fundos. Aqui temos alguns exemplos:
- Código:
-
<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');">
Insira 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.
As CSS podem ser usadas pra 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:
- Código:
-
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Com a propriedade "float", um elemento poderá "flutuar" à esquerda ou à direita. O exemplo seguinte ilustra este princípio:
Exemplo 4:
- Código:
-
<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>
Neste exemplo, a imagem flutua à esquerda e o outro elemento (o texto) preenche o espaço à direita da imagem.
Com a propriedade "position", você pode posicionar um elemento em qualquer lugar da página, com precisão:
Exemplo 5:
- Código:
-
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
Ver exemplo
Neste outro exemplo, a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Você pode colocar o elemento em qualquer lugar na página. Experimente.
Aprender CSS só exige um pouco mais de esforço e tempo. Aqui dei apenas uma apresentação pequena das CSS.
Enquanto isso, concentre-se no HTML, e passe para a próxima lição onde você aprenderá a publicar seu website na Internet para que o mundo todo o veja!
Lição 14: Uploading páginas
Até agora, só você conseguiu visualizar suas páginas. Agora é a hora de divulgar. Para publicar seu trabalho na Internet, você precisa de espaço em um servidor e um programa FTP gratuito.
Se você costuma acessar a Internet, provavelmente já encontrou vários serviços gratuitos de hospedagem de sites. Seu endereço será algo parecido com "http://home.servidor.com/~nomedousuario". Você têm 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 é semelhante a criar uma conta de e-mail, você pode registrar-se gratuitamente para obter um espaço num servidor. 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).
Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo,
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e ter um nome de usuário e senha.
Para acessar e publicar as páginas neste servidor, você precisa de um programa FTP . Este não é um programa que vêm instalado em seu PC,
mas pode-se arrumar um pra download. Existem vários programas FTP, um dos melhores é o FileZilla, e é gratuito. Pra obter o FileZilla vá pra: filezilla.sourceforge.net/ .
Upload de Páginas
Aqui, temos um exemplo de como fazer upload usando o servidor Angelfire e o programa FileZilla. Este procedimento é similar a qualquer outro programa FTP .
Conecte-se à Internet e abra o programa FTP . Insira "Host Name" ("
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] no "Address"), nome do usuário (em "User") e senha (em "Password"), clique "Connect". Você terá 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"):
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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, qualquer pessoa poderá ver o seu site!
Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será a página de entrada no site.
Você poderá pensar em comprar um domínio (espaço no servidor) só para você (
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e assim ter uma webpage mais curta e fácil de guardar que os fornecidos por um serviço gratuito da Internet. Na Internet existem muitas empresas que vendem domínios. Faça uma busca do Google.
Lição 15: Web Standards e Validação
Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.
O HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias formas. Pode-se considerar que o HTML têm muitos dialetos. Esta é a razão do porquê que 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.
Atualmente, as normas HTML estão na sua versão 4.01 e no XHTML. 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. 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 que você está falando (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:
- Código:
-
<!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".
O "xmlns" é abreviação de "XML-Name-Space" e deve ter sempre o valor
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] . 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 é importante também para a validação da página.
Validação da Página
Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o [url=validator.w3.org]validador gratuito do W3C[/url].
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 correcto, vai aparecer uma mensagem de congratulações. Se não estiver, será apresentada uma lista de erros informando o que 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 e consertar o código, mostrando a página correctamente. Já outros, não aceitam o erro e apresentam a página arruinada ou nem a apresentam. O validador ajuda você a encontrar os erros que você não tenha percebido à primeira vista.
Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.
Lição 16: Dicas finais
Esta é a última lição. Você aprendeu muita coisa e já poderá construir o seu website. No entanto, aqui é ensinado o básico do HTML e ainda há muito o que se aprender. Continue a estudar e se aprofundar no assunto.
Aqui temos umas dicas úteis:
Para começar,
aconselhamos a escrever seus documentos HTML de forma ordenada e estruturada. Assim fazendo você estará não só mostrando aos outros que possui uma base sólida de conhecimento, mas também estará facilitando a leitura, interpretação e manutenção do código.
Siga as normas e valide seu código. Mas, não faça disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas páginas no validator.w3c.org.
Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a ferramenta que possibilita apresentar informação na Internet, assim é necessário que haja a informação a ser apresentada ou seja, o conteúdo. Páginas lindas e bem desenhadas são ótimas, mas as pessoas buscam informação na Internet.
Evite encher suas páginas com imagens pesadas e outros enfeitos que você encontra na Internet. Isto faz com que suas páginas demorem a carregar e é frustante para o usuário. Páginas que demoram mais de 20 segundos para carregar podem perder até 50% dos seus visitantes.
Lembre-se de cadastrar seu site nos sites de busca, de modo a que outras pessoas, além da sua família, possam encontrá-las e visitá-las. Na página de entrada dos sites para cadastro em mecanismos de busca você encontrará um link para adicionar seu site (O mais importante é o Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos).
Neste tutorial você aprendeu a usar o Notepad, que é um simples e fácil editor de textos,
porém você pode pensar em usar um editor mais sofisticado com mais possibilidades e ferramentas. Você encontra uma listagem e sumário de diferentes editores em Download.com.
Aumentando o seu Conhecimento
Antes de mais nada, é importante que você continue a trabalhar e experimentar o que aprendeu neste tutorial. Quando encontrar algum site que contenha uma coisa que você ache interessante,
estude o código do site. No seu navegador vá ao menu "View" - "Ver" e escolha "Source" - "Código Fonte" para ver o código do site.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Procure ler artigos e tutoriais HTML. Existem muitos sites com ótimos conteúdos sobre HTML.
Leia e faça perguntas em listas de discussão e fóruns na Internet. Um ótimo lugar é o fórum XHTML do iMasters onde você sempre encontra alguém disposto a ajudar.
E para terminar - assim que você se achar pronto - continue e aprenda CSS no nosso Tutorial CSS.
Só nos resta desejar a você que passe horas agradáveis ao lado do seu novo amigo, o HTML.
°~FIN~°