7.

Imagens

O que voc acha de colocar uma imagem no centro da sua pgina? Tudo o que voc precisa da nossa conhecida tag. <img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" />

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 abertura e fechamento. Semelhante a tag <br /> e <hr />que no precisa de um texto inserido nela. "bandeiradobrasil.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso .html ou".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. Veja abaixo os trs os tipos de imagens que voc pode inserir na sua pgina:

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

Em geral imagens GIF so melhores para grficos e desenhos e imagens JPEG so melhores para fotografia. Existem duas razes para isto: primeiro, imagens GIF so constituidas por 256 cores, e imagens JPEG por milhes de cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto maior a compresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador.

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 vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e efetiva compresso.

Onde consigo minhas imagens?

Para criar suas prprias imagens voc precisa de um programa de edio de imagens. O Adobe Photoshop e o Adobe Fireworks so excelentes para fazer um papel de parede para a sua pgina 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 edio de imagens a ferramenta essencial para criao de websites com grande impacto e apelo visual.

Vamos aprender mais algumas coisas sobre imagens. Primeiro, voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros websites: <img src="images/caixa.png">

<img src="http://www.html.com.br/caixa.png">

Segundo, imagens podem ser links: <a href="http://www.html.com.br"> <img src="caixa.png"></a> Ser renderizado no navegador assim:

Existem outros atributos que eu deva conhecer?

Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est localizada. Alm dele existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina. O atributo alt usado para fornecer uma descrio textual alternativa da imagem caso por alguma razo a imagem no seja renderizada para o usurio. Isto particularmente importante para usurios com restries visuais ou quando a imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt: <img src="logo.gif" alt="logotipo do BR Masters">

Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o usurio 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 no deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passaro uma mensagem que no descreve a imagem para os usurios com restries visuais. O atributo title pode ser usado para fornecer uma curta descrio da imagem: <img src="bandeira.gif" title="Aprenda HTML no site HTML.com.br">

Ser renderizado no navegador assim:

Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa popup com o texto "Aprenda HTML no site HTML.net".

Dois outros atributos importantes so width e height: <img src="logo.png" width="141" height="32">

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 resoluo da tela. (As resolues de tela mais comuns so de 800x600 e 1024x768 pixels, apesar das resolues 800x600 estarem ficando para trs e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou superior). Ao contrrio de centmetros, pixel uma unidade de medida relativa que depende da resoluo da tela. Usurios com grande resoluo de tela tero 25 pixels em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25 pixels em 1,5 cm de tela. Se no 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: <img src="logo.gif" width="32" height="32"> O tempo de descarga da imagem ser sempre aquele requerido como se ela tivesse suas dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos. Assim, voc no deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir a imagem diminua suas dimenses reais em um editor de imagem para tornar suas pginas mais leves e mais rpidas. Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e height para imagens, pois assim fazendo o navegador reservar o espao para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedncia (antes de descarregar as imagens) como ser o layout da pgina.

8.

Tabelas

Tabelas so usadas para apresentar "dados tabulares", isto , informao que deva ser apresentada em linhas e colunas, de forma lgica e organizada.

difcil?
Criar tabelas em HTML pode parecer complicado, mas quando voc acompanhar passo a passo a explicao, ver que bem fcil. <table> <tr> <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula </tr> </table>

1</td> 2</td> 3</td> 4</td>

Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4

Qual a diferena entre as tags <tr> e <td>?

Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags bsicas so usadas para inserir tabelas: <table> comea e termina uma tabela. <tr> significa "table row" - linha de tabela - comea e termina e uma linha horizontal da tabela. <td> significa "table data" - dados da tabela. comea e termina cada clula contida nas linhas da tabela.

Eis o acontece no exemplo dado acima: a tabela comea com <table>, segue-se uma <tr>, que indica o incio de uma nova linha. Duas clulas so ento inseridas na linha: <td>Clula 1</td> e <td>Clula 2</td>. A linha termina com </tr> e uma nova linha <tr> comea imediatamente a seguir. A nova linha tambm contm duas clulas. A tabela termina com </table>. Para esclarecer: linhas so horizontais e colunas so verticais, ambas contendo clulas:

Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma coluna. No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um nmero ilimitado de linhas e colunas. Outro exemplo: <table> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula <td>Clula <td>Clula </tr> </table>

1</td> 2</td> 3</td> 4</td> 5</td> 6</td> 7</td> 8</td> 9</td> 10</td> 11</td> 12</td>

Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 6 Clula 7 Clula 8 Clula 9 Clula 10 Clula 11 Clula 12

Existem atributos?
Claro! Por exemplo, o atributo border que usado para definir a espessura de uma borda em volta da tabela: <table border="1"> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>

Ser renderizado no navegador assim:

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. Veja abaixo: <table border="1" width="30%">

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

Existem mais atributos?

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois: align: define o alinhamento horizontal do contedo da tabela, de uma linha ou de uma clula. Por exemplo, left, centre ou right ( esquerda, no centro ou direita). valign: define o alinhamento vertical do contedo de uma clula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo). <td align="right" valign="top">Clula 1</td>

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) ento abstenha-se de colocar coisas dentro de tabela simplesmente porque voc deseja que elas estejam prximas umas s outras. Nos primrdios da Internet - isto , h poucos anos atrs - tabelas eram usadas como ferramenta para construir layout. Se voc quer controlar a apresentao de textos e imagens, existe uma maneira bem mais racional (dica:CSS ou tableless). Veremos isso mais a frente em CSS e tableless.

9.

Mais Tabelas

Nesta segunda parte vamos dar continuao e aprender mais sobre as tabelas.

O que mais existe?

Os dois atributos colspan e rowspan so usados para criar tabelas singulares. Colspan a abreviao para "column span". Colspan usada na tag <td> para indicar quantas colunas estaro contidas em uma clula. <table border="1"> <tr> <td colspan="3">Clula 1</td> </tr> <tr> <td>Clula 2</td> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>

Ser renderizado no navegador assim:

E o rowspan? Como voc j deve ter concluido, rowspan especifica quantas linhas estaro contidas em uma clula:
<table border="1"> <tr> <td rowspan="3">Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> </tr> </table> Ser renderizado no navegador assim:

No exemplo acima rowspan definido em "3" na Clula 1. Isto especifica que uma clula deve conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha, enquanto Clula 3 e Clula 4 formam duas linhas independentes. Isso no difcil, confuso. bom desenhar a tabela em uma folha de papel antes de comear a codificao HTML.

10.

Uploading do seu site

At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostrlas para o mundo todo. Para publicar a sua pgina na Web voc precisar apenas de um espao 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 pginas sem precisar acessar toda vez o site do servidor. Voc acessar diretamente o servidor do seu computador. Na internet voc j deve ter visto vrios servidores gratuitos para hospedagem. Seu endereo ficar cumprido algo parecido com http://home.servidor.com/nomedousuario. Mas, existe uma maneira de redirecionar o endereo para que fique mais curto. Como por exemplo: www.seusite.com.br. Porm, estes, com domnios: .com.br, .com, .net etc so 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 endereo enorme. Depois de cadastrado, para acessar o seu endereo 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 usurio (por exemplo: seunome@yahoo.com.br) e sua senha.

11.

Webstandards e validao

Nesta lio voc aprender mais alguns conceitos tericos do HTML.

O que mais h para conhecer sobre HTML?

HTML pode ser escrito de vrias maneiras. O navegador est apto a ler HTML escrito de vrias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta a razo porqu alguns websites so apresentados de formas diversas em diferentes navegadores. Desde o aparecimento da Internet tem sido feitas vrias tentativas para se normatizar o HTML notadamente atravs 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 verses 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape no teria, e no teve que se preocupar muito com normas. Pelo contrrio, a Netscape inventava seus prprios elementos de marcao que no funcionavam em outros navegadores. Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lanou seu navegador prprio. A primeira verso do navegador da Microsoft, o Internet Explorer, no 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 verses 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte s normas HTML do W3C. A Netscape no se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada verso 4.

Quando voc codifica HTML de acordo com as normas do W3C, voc est construindo um website para ser visualizado em todos os navegadores, no s agora mas tambm no futuro. E felizmente, tudo o que voc aprendeu neste tutorial est de acordo com a mais nova verso do HTML, que o XHTML.

Devido a existncia 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: <!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>Ttulo</title> </head> <body> <p>texto texto</p> </body> </html>

Alm do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao navegador que voc est codificando XHTML, voc precisa ainda adicionar informao extra na tag html, usando os atributos xmlns e lang. xmlns abreviao 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 especfica em que lngua (aqui trata-se de linguagem humana) o documento escrito. As abreviaturas para as lnguas existentes no mundo todo, esto nas ISO 639 standard . No exemplo acima a lngua definida no atributo o portugus do Brasil ("pt-br").

Validao? Porqu deveria eu fazer isto?

O DTD importante tambm para a validao da pgina. Insira o DTD nas suas pginas e poder verificar erros no seu HTML, usando o validador gratuito do W3C. Para testar o validador faa o seguinte: crie uma pgina e publique na Internet. A seguir entre em validator.w3.org e l digite o endereo (a URL) da sua pgina, depois clique no boto validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulaes. Se no, ser apresentada uma lista de erros, informando o qu est errado e onde. Cometa alguns erros propositais no seu cdigo para verificar o que acontece. O validador no til somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o cdigo mostrando a pgina corretamente. Em navegadores assim voc nunca encontrar erros no prprio navegador. J outros navegadores no aceitam o erro e apresentam a pgina arruinada ou mesmo nem apresentam. O validador ento ajuda voc a encontrar erros que voc no tenha nem idia de que existiam Sempre valide suas pginas, para ter certeza que elas sero mostradas corretamente em todos os navegadores.