11/10/2010

Manual de HTML - Manual completo

Manual de HTMLManual de: C riar Web, manuais e recursos para desenvolvimento web Verso on-line: http://www.criarweb.com/manuais/2

Prlogo ao manual de HTMLBem- vindos ao manual de HTML de Criarweb. Atravs de todos estes captulos vamos desc obrir a linguagem utilizada para a criao de pginas web: o Hyper Text Markup Language, mais c onhecido c omo HTML. princ pio, o fato de falar de uma linguagem informtica pode fazer com que algum se desanime, mas no para se assustar, pois o HTML no deixa de ser mais que uma forma um tanto pec uliar de dar formatos aos textos e imagens que pretendemos ver por meio de um navegador. Antes de come armos este manual, o qual faremos de uma forma direta e prtica, lhe recomendamos fervorosamente a leitura prvia de nosso manual Desde zero. A partir deste guia, voc aprender os conceitos bsic os necessrios para a c ria o de um web site. E tambm lhe permitir acessar este manual j c om alguns c onhecimentos de base impresc indveis sobre HTML, alm de lhe deixar bem c laro o que seu c onhecimento c ontribui em relao ao simples uso de editores HTML. As pessoas que enfocamos neste manual so todas aquelas que c om conhecimentos mnimos de informtic a, desejam fazer mundialmente pblic o uma mensagem, uma idia ou uma informao, usando para isso o meio mais prtico, ec onmic o e atual: a Internet. O que se necessita c omo base para se obter um bom aprendizado (alm de ler o manual Desde zero) : Saber escrever c om um tec lado Saber manusear um mouse Ter vontade de aprender O que se obter depois de haver passado por estes captulos: Capacidade para criar e public ar seu prprio site web com um mnimo de qualidade Conhec imentos de todo tipo sobre as tecnologias e ferramentas empregadas no mbito da Rede Possivelmente um interesse ou um gostar que pode se c onverter em paixo, e terminar em alguns c asos, sendo um vc io ou um trabalho. Vale lembrar que estamos a sua inteira disposio para resover todo o tipo de dvidas referentes a este manual. E para entrar em contato conosco to fc il c omo clic ar sobre o e- mail do autor do artigo situado ao p da pgina. Passamos ento, sem mais prembulos, a ver o que se trata o HTML...Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Introduo ao HTMLHTML a linguagem com que se esc revem as pginas web. As pginas web podem ser vistas pelo usurio mediante um tipo de aplic a o c hamada navegador (browser). Podemos dizer portanto,www.criarweb.com/manuais/2/print.php 1/83

11/10/2010

Manual de HTML - Manual completo

que o HTML a linguagem usada pelos navegadores para mostrar as pginas webs ao usurio, sendo hoje em dia a interfac e mais extensa na rede. Esta linguagem nos permite aglutinar textos, imagens e udios, e combin- los a nosso gosto. Ademais, e aqui onde est a sua vantagem em relao aos livros e revistas, o HTML nos permite a introduo de referncias a outras pginas por meio dos links hipertextos. O HTML se c riou a princ pio com objetivos de divulgao. Porm, no se pensou que a web c hegaria a ser uma rea de cio c om c arter multimdia, de modo que, o HTML se c riou sem dar respostas a todos os possveis usos que lhe dariam posteriormente e ao todo c oletivo de gente que o utilizariam no futuro. Entretanto, frente a este defic iente planejamento, com o tempo, foram se inc orporando modific aes, as quais so os padres do HTML. Numerosos padres j se apresentaram. O HTML 4.01 foi o ltimo padro feito at o ms de abril de 2004. Esta evolu o to anrquica do HTML, trouxe toda uma srie de inc ovenientes e defic inc ias que tiveram que ser superadas c om a introdu o de outras tecnologias ac essrias c apazes de organizar, optimizar e automatizar o funcionamento das webs. Exemplos que podem soar c omo c onhecidos so as CSS, JavaScript ou outros. Veremos mais adiante em que c onsistem algumas delas. Alguns dos problemas que ac ompanham ao HTML a diversidade de navegadores presentes no merc ado, os quais no so capazes de interpretar o mesmo cdigo de uma maneira unificada. Isto obriga ao webmaster a, uma vez c riada sua pgina, comprovar que esta pode ser lida satisfatoriamente por todos os navegadores, ou pelo menos, pelos mais utilizados. Alm do navegador nec essrio para ver os resultados de nosso trabalho, necessitamos evidentemente outra ferramenta c apaz de criar a pgina em si. Um arquivo HTML (uma pgina) no mais do que um texto. por isso que para programar em HTML necessitamos um editor de textos. rec omendvel usar o bloc o de notas que vem no Windows, ou outro editor de textos simples. No entanto, h de ter c uidado com alguns editores mais c omplexos c omo Wordpad ou Mic rosoftWord, pois c oloc am seu prprio cdigo especial ao salvar as pginas e c omo o HTML unicamente texto plano, poderemos ter problemas com isso. Existem outros tipos de editores especfic os para a criao de pginas web, os quais oferecem muitas facilidades que nos permitem aumentar nossa produtividade. Porm, aconselhvel princ pio utilizar uma ferramenta, o mais simples possvel para poder prestar a mxima aten o ao nosso cdigo e familiarizarmos o antes possvel c om ele. Logo mais adiante, ganharemos tempo ao utilizarmos os editores mais versteis. Par ter mais c laro todo o tema de editores e os tipos que existem, visite os artigos: Editores de HTML Bloc o de notas Tambm se pode ac essar a descri es de editores mais c omplexos que o Bloco de notas, porm mais potentes c omo o Homesite. importante ter claro tudo isso visto que em fun o de seus objetivos, pode ser que mais do que aprender HTML, resulte mais interessante aprender o uso de uma aplic ao para a criao de pginas. Sendo assim, uma pgina um arquivo onde est contido o cdigo HTML em forma de texto. Estes arquivos tem extenso .html ou .htm ( indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de textos e salvaremos nossos trabalhos c om extenso .html, por exemplo, minhapagina.html. Conselho: Utilize sempre a mesma extenso em seus arquivos HTML. Isso evitar que voc se c onfunda ao esc rever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se voc trabalha c om uma equipe em um projeto, ainda mais importante que todos estejam de ac ordo c om a mesma extenso.www.criarweb.com/manuais/2/print.php 2/83

11/10/2010

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Sintaxes do HTMLO HTML uma linguagem que baseia sua sintaxe em um elemento de base que c hamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes: Uma abertura de forma geral Um fec hamento do tipo Tudo que estiver includo no interior desta etiqueta sofrer as modificaes que c arac terizam a esta etiqueta. Como por exemplo: As etiquetas e definem um texto em negrito. Se em nosso doc umento HTML esc revemos uma frase c om o seguinte c digo:Isto est em negrito

O resultado ser: Isto est em negrito As etiquetas e definem um pargrafo. Se em nosso documento HTML escrevssemos:Ol, estamos no pargrafo 1 Agora mudamos de pargrafo

O resultado seria: Ol, estamos no pargrafo 1 Agora mudamos de pargrafo

Partes de um documento HTML Ademais de tudo isso, um doc umento HTML deve estar delimitado pela etiqueta e . Dentro deste documento, podemos ainda distinguir duas partes principais: O c abe alho, delimitado por e onde colocaremos etiquetas de ndole informativo c omo por exemplo o ttulo de nossa pgina. O c orpo, delimitado pelas etiquetas e , que ser onde coloc aremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente. O resultado um documento c om a seguinte estrutura:

Etiquetas e contedos do c abealho Dados que no aparecem em nossa pgina mas que so importantes para c atalog-la: Ttulo, palavras-c haves, etc

www.criarweb.com/manuais/2/print.php

3/83

11/10/2010

Manual de HTML - Manual completo

Etiquetas e contedo do c orpo Parte do documento que ser mostrada pelo navegador: Textos e imagens

As maisculas ou minsculas so indiferentes ao escrever as etiquetas As etiquetas podem ser escritas c om qualquer tipo de c ombina o entre maisc ulas e minsc ulas. Ou seja, ou so a mesma etiqueta. Entretanto, ac onselhvel ac ostumar- se a esc rev-las em minscula j que outras tecnologias que podem c onviver c om nosso HTML (XML por exemplo) no so to permissivas e nunca est mal ter bons costumes desde o princ pio para evitar falhos triviais no futuro.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Sua primeira pginaPodemos j com estes c onhec imentos, e mais algum outro, criar nossa primeira pgina. Para isso, abra seu editor de textos e, copie e c ole o seguinte texto em um novo documento: C ozinha Para Todos Bem-vindo, Voc est na pginaC omida para todos. Aqui voc aprender receitas fceis e deliciosas.

Agora salve este arquivo c om extenso .html ou .htm em seu disco rgido. Para isso, ac essamos no menu "Arquivo" e selecionamos a op o "Salvar como". Na janela escolhemos o diretrio onde desejamos salv-lo e c oloc aremos um nome para ele, como por exemplo: minha_pgina.html.Conselho: Utilize nomes em seus arquivos que tenham algumas normas bsicas para poupar alguma confuso ou desgosto. Nosso conselho que no utilize acentos, nem espaos, nem outros caracteres raros. Tambm lhe ajudar escrever sempre as letras em minsculas. Isto no quer dizer que se deve fazer nomes de arquivos curtos, melhor faz-los descritivos para que se possa lembrar o que h dentro. Algum caractere como o trao "-" ou o trao baixo "_" lhe pode ajudar a separar as palavras. Por exemplo: quem_somos.html

Com o doc umento HTML c riado, podemos ver o resultado obtido atravs de um navegador. Chegado a este ponto, conveniente, insistir no fato de que nem todos os navegadores so idntic os. Infelizmente, os resultados de nosso c digo podem mudar de um para outro, sendo por isso ac onselhvel visualizar a pgina em vrios navegadores. Geralmente usam-se Internet Explorer e Netsc ape como refernc ias j que so os mais extensos. Na verdade, no momento em que estas linhas so esc ritas, o Internet Explorer monopoliza a maioria imensa de usurios (mais ou menos 90%) e o Netscape est relegado a um segundo plano. Isto no quer dizer que devemos deix-lo de lado j que o 10% de visitas que este podewww.criarweb.com/manuais/2/print.php 4/83

11/10/2010

Manual de HTML - Manual completo

nos proporcionar, pode resultar muito importante para ns. Por outro lado, parec e que j se tornou pblic a a inten o do Netscape de desviar um pouc o seus negc ios para outros rumos e abandonar esta c hamada "luta de navegadores" na qual estava rec ebendo a pior parte. Ento, voltando ao tema, uma vez criado o arquivo .html ou .htm, podemos visualizar o resultado de nosso trabalho abrindo a pgina criada com um navegador. Para isso, dependendo do navegador a forma de fazer ser diferente. Se estamos usando o Explorer, temos de ir barra de menu, selec ionar "Arquivo" e em seguida "Abrir". Uma janela ir se abrir. Clicamos sobre o boto "Examinar" e acessamos uma janela a partir da qual poderemos nos mover pelo interior do nosso disco rgido at enc ontrar o arquivo que desejamos abrir. A c oisa no mais difc il com o Netsc ape. Neste caso, temos de ir tambm barra de menu princ ipal e selecionarmos File e logo, Open File. A mesma janela de busca nos permitir examinar o c ontedo de nosso PC at dar com o arquivo proc urado.Nota: Tambm se pode abrir o arquivo acessando o diretrio onde ele est salvo. Nele se pode encontrar seu arquivo HTML e ver que possui como cone o logotipo de Netscape ou o do Internet Explorer. Para abr-lo simplesmente fazemos um clique duplo sobre ele.

Uma vez aberto o arquivo, j poder ver sua primeira pgina web. Algo simples mas que j um c ome o. E que em pouc o tempo, j ver c omo ser c apaz de melhorar sensivelmente. Observe a parte superior esquerda da janela do navegador e poder comprovar a presen a do texto delimitado pela etiqueta . Esta uma das funes desta etiqueta, c ujo princ ipal inc ubnc ia o de servir de referncia nos motores de busca como Altavista ou Yahoo.

Por outro lado, os elementos que c oloc amos entre a etiqueta e se podem ver no espao reservado para o c orpo da pgina. Podemos ver a pgina do exemplo em func ionamento aqui. Se agora dermos um clique no boto direito do mouse sobre a pgina e selec ionarmos "Ver cdigo fonte" (ou View page source), veremos c omo que numa janela ac essria aparec e o c digo de nossa pgina. Este recurso de extrema importncia j que nos permite ver o tipo de tc nicas empregadas por outros para a confec o de suas pginas. Com tudo isso assimilado j estamos em condi es de aprofundarmos um pouco mais na desc rio de algumas das etiquetas mais usadas do HTML.Possvel problema: Ao utilizar o Bloco de Notas no Windows em algumas ocasies, mesmo lhe dizendo que um arquivo .html, o documento se salva como se fosse um

www.criarweb.com/manuais/2/print.php

5/83

11/10/2010

Manual de HTML - Manual completotexto e no uma pgina web. O que est acontecendo que o Bloco de Notas tem prdeterminado salvar seus arquivos com extenso .txt e por isso, na realidade o que ele est salvando no disco rgido minha_pagina.html.txt. Para conseguir ter o controle das extenses no Bloco de Notas e no Windows em geral podemos acessar ao "Meu computador" e no menu de "Ver", selecionar "Opes de pasta". Na janela que aparece clicamos na opo "Ver" e nos permite desabilitar uma caixa de seleo que pe como "Ocultar extenses para os tipo de arquivos conhecidos". (assim se faz no Win98, mas pode variar um pouco em outras verses do Windows) C om isso conseguiremos ver sempre a extenso do arquivo com o qual estamos trabalhando e fazer com que o Bloco de Notas atenda o que estamos lhe solicitando quando gravamos com outra extenso que no seja .txt.

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Formato de pargrafos em HTMLNos c aptulos anteriores apresentamos a ttulo de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste c aptulo veremos c om mais detalhe, as etiquetas mais amplamente utilizadas e exemplific aremos algumas delas posteriormente. Formatar um texto passa por tarefas to evidentes como definir os pargrafos, justific-los, introduzir marc adores, numeraes, ou pr em negrito, itlico, etc . Vimos que para definir os pargrafos utilizamos a etiqueta que introduz um salto e deixa uma linha em branc o antes de c ontinuar c om o resto do doc umento. Podemos tambm utilizar a etiqueta
, da qual no existe seu fec hamento c orrespondente (), para realizar um simples enter, c om o que no deixamos uma linha em branco, e sim, somente mudamos de linha.Nota: Existem outras etiquetas que no tm seu correspondente de fechamento, como para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem no comeam e acabam mais adiante, simplesmente s tm presena em um lugar pontual.

Podemos c omprovar que mudar de linha em nosso doc umento HTML sem introduzir algumas dessas ou de outras etiquetas no implica em absoluto uma mudana de linha na pgina visualizada. Na realidade o navegador introduzir o texto e no mudar de linha a no ser que esta chegue a seu fim ou se o especifiquemos c om a etiqueta c orrespondente. Os pargrafos delimitados por etiquetas podem ser facilmente justific ados esquerda, ao c entro ou direita, especific ando tal justific a o no interior da etiqueta por meio de um atributo align. Um atributo no mais do que um parmetro includo no interior da etiqueta que ajuda a definir o func ionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manual uma quantidade de atributos muito teis para todo tipo de etiquetas. Ento, se desejssemos introduzir um texto alinhado esquerda esc reveramos:Texto alinhado esquerda

O resultado seria: Texto alinhado esquerda

Para uma justific a o ao c entro:www.criarweb.com/manuais/2/print.php 6/83

11/10/2010 justific a o ao c entro: Para uma

Manual de HTML - Manual completo

Texto alinhado ao centro

Que seria: Texto alinhado ao c entro

Para justificar direita:Texto alinhado direita

Cujo efeito seria: Texto alinhado direita

Como se v, em c ada c aso o atributo align toma determinados valores que so esc ritos entre aspas. Em algumas oc asies nec essitamos espec ificar alguns atributos para o func ionamento c orreto da etiqueta. Em outros casos, o prprio navegador toma um valor definido por padro. Para o c aso de align, o valor padro left.Nota: Os atributos tm seus valores indicados entre aspas ("), mas se no os indicamos entre aspas, tambm funcionar na maioria dos casos. Entretanto, aconselhvel que ponhamos sempre as aspas para acostumarmos a utiliz-las, por dar homogeneidade aos nossos cdigos e para evitar erros futuros em sistemas mais meticulosos.

O atributo align no exclusivo da etiqueta . Outras etiquetas muitos c omuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, c ostumam fazer uso deste atributo de forma habitual. Imaginemos um texto relativamente longo onde todos os pargrafos esto alinhados esquerda (por exemplo). Uma forma de simplificar nosso cdigo e de evitar introduzir continuamente o atributo align sobre c ada uma de nossas etiquetas utilizando a etiqueta . Esta etiqueta por si s no serve para nada. Tem que estar ac ompanhada do atributo align e o que nos permite alinhar qualquer elemento (pargrafo ou imagem) da maneira que ns desejarmos. Assim, o c digo: paragrafo1pargrafo2 paragrafo3

equivalente a: paragrafo1 paragrafo2 paragrafo3

Como vimos, a etiqueta marc a divises nas quais definimos um mesmo tipo de alinhado. Exemplo prtico: Para praticar um pouc o o que ac abamos de ver, vamos propor um exercc io que se pode resolver no seu computador. Simplesmente queremos construir uma pgina que tenha, por esta ordem:

www.criarweb.com/manuais/2/print.php

7/83

11/10/2010

Manual de HTML - Manual completo

2 pargrafos c entralizados 3 pargrafos direita Um salto triplo de linha 1 pargrafo alinhado esquerda No vamos escrever nesta oc asio o cdigo fonte do exerc cio. Podemos v- lo em func ionamento em nosso navegador e na janela podemos obter o c digo fonte selec ionando no menu Exibir a opo Cdigo fonte. Cabealhos Existem outras etiquetas para definir pargrafos espec iais, formatados como ttulos. So os c abe alhos ou Header em ingls. Como dissemos, so etiquetas que formatam o texto c omo um ttulo, para o qual atribuem um tamanho maior de letra e c oloc am o texto em negrito. Existem vrios tipos de c abe alhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em c onc reto a , para os c abe alhos maiores, para os de segundo nvel e assim, at que o cabe alho menor. Os cabe alhos implic am tambm uma separao em pargrafos, portanto, tudo o que for escrito dentro de e (ou qualquer outro cabe alho) ser c oloc ado em um pargrafo independente. Podemos ver como se apresentam alguns c abe alhos a seguir:C abealho de nvel 1

Ser visto dessa maneira na pgina:

Cabealho de nvel 1Os cabe alhos, c omo outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de c abe alho de nvel 2 alinhado ao c entro:C abealho de nvel 2

Ser visto dessa maneira na pgina:

Cabealho de nvel 2Outro exercc io interessante c onstruir uma pgina web que contenha todos os c abe alhos possveis. Pode-se ver a seguir: Todos os cabealhos C abealho C abealho C abealho C abealho C abealho C abealho de de de de de de nvel nvel nvel nvel nvel nvel 1 2 3 4 5 6

www.criarweb.com/manuais/2/print.php

8/83

11/10/2010

Manual de HTML - Manual completo

Pode-se ver o exerc cio em uma pgina a parte.Conselho: No devemos utilizar as etiquetas do cabealho para formatar o texto, ou seja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os cabealhos so para colocar ttulos em pginas web e o navegador o responsvel de formatar o texto de maneira que parea um ttulo. C ada navegador ento, pode formatar o texto ao seu gosto contanto que parea um ttulo.

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Formatando o textoAlm de tudo relativo organiza o dos pargrafos, um dos aspec tos primordiais da formata o de um texto, o da prpria letra. muito c omum e prtic o, apresentar o texto ressaltado em negrito, itlic o e outros. Paralelamente, o uso de ndic es e subndic es vital para a public a o de textos c ientfic os. Tudo isso e muito mais, possvel por meio do HTML a partir de uma srie de etiquetas entre as quais vamos destac ar algumas. Negrito Podemos esc rever o texto em negrito o inc luindo dentro das etiquetas e (bold). Esta mesma tarefa desempenhada por e sendo ambas equivalentes. Ns nos inc linamos pelas primeiras por uma simples razo de esforo. Esc revendo um c digo deste tipo:Texto em negrito

Obteremos este resultado: Texto em negritoNota: Qual a diferena entre e ? Apesar das duas etiquetas fazerem o mesmo efeito, h uma peculiaridade que as fazem distintas. A etiqueta indica negrito, enquanto que a etiqueta indica que se deve escrever ressaltado. Os navegadores interpretam o HTML segundo seu critrio, por isso que se podem ver as pginas de distintas maneiras em uns browsers e outros. A etiqueta quer dizer "cabealho de nvel 1", o navegador o responsvel de formatar o texto de maneira que parea um cabealho de primeiro nvel. Na prtica, os cabealhos do Internet Explorer e do Netscape so muito parecidos (tamanho de letra grande e em negrito), mas outro navegador poderia colocar os cabealhos sublinhados se lhe parecesse oportuno.Itlico Tambm neste c aso existem duas possibilidades, uma c urta: e (italic) e outra um pouc o mais longa: e . Neste manual, e na maioria das pginas que se v por a, normal encontrar c om a primeira forma que sem dvida mais simples para esc rever e para se lembrar. Abaixo, um exemplo de texto em itlico:Texto em itlicoQue d o seguinte efeito: Texto em itlicowww.criarweb.com/manuais/2/print.php 9/8311/10/2010 Texto em itlicoManual de HTML - Manual completoSublinhado O HTML nos prope tambm para o sublinhado as etiquetas: e (underline). Entretanto o uso do sublinhado deve ser usado c om muita prec au o visto que os links hipertextos vo, a no ser que se indique o c ontrrio, sublinhados com o que podemos c onfundir o leitor e afast-lo do verdadeiro interesse de nosso texto. Subscrito e sobrescrito Este tipo de formato de extrema utilidade para textos c ientficos. As etiquetas empregadas so: e para os sobresc ritos e para os subsc ritos Temos aqui um exemplo: A 13C C 3H4C INOS um heterociclo alergeno enriquecido O resultado seria: A CC3H4CINOS um heteroc ic lo alergeno enriquec ido. Combinar etiquetas Todas estas etiquetas, inc luindo as que j vimos e as que ainda vamos ver, podem ser c ombinadas estando umas dentro das outras de forma que conseguimos resultados diferentes. Assim, podemos sem nenhum problema criar um texto em negrito e em itlico colocando uma etiqueta dentro da outra:Isto s est em negritoe isto em negrito e itlicoIsto daria: Isto s est em negrito e isto em negrito e itlicoConselho: Para unir etiquetas HTML, faa corretamente. Referimo-nos a que se voc abre uma etiqueta dentro de outra mais principal, antes de fechar a etiqueta principal feche as etiquetas que voc tiver aberto dentro dela. Devemos evitar cdigos como o seguinte: Isto est em negrito e itlico A favor de cdigos com etiquetas corretamente colocadas: Isto est em negrito eitlico Isto muito aconselhvel, ainda que os navegadores entendam bem as etiquetas mal colocadas, por duas razes: 1. Sistemas como XML no so to permissivos com estes erros e pode que no futuro nossas pginas no funcionem corretamente. 2. Leva muito tempo de processamento para os navegadores resolverem este tipo de erro, inclusive mais do que construir a prpria pgina, por isso devemos evitar-lhes que sofram por uma m codificao.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comCor, tamanho e tipo de letraApesar de que por razes de homogeneidade e simplicidade de c digo estes tipos de formatos sowww.criarweb.com/manuais/2/print.php 10/8311/10/2010Manual de HTML - Manual completoc ontrolados atualmente por folhas de estilo c ascata (das quais j teremos tempo de falar), existe uma forma clssica e direta de definir c or, tamanho e tipo de letra de um determinado texto. Isto se faz a partir da etiqueta e seu fec hamento c orrespondente. Dentro desta etiqueta devemos espec ificar os atributos c orrespondentes a c ada um destes parmetros que desejamos definir. A seguir c omentamos os atributos princ ipais desta etiqueta: Atributo face Define o tipo de letra. Este atributo interpretado por verses do Netscape a partir da 3 e de MSIE 3 ou superiores. Outros navegadores as ignoram c ompletamente e mostram o texto com a fonte que utilizam. Deve- se ter c uidado com este atributo j que cada usurio, dependendo da plataforma que utilize, pode no dispor dos mesmos tipos de letra que ns c om o que, se ns esc olhemos um tipo do que no dispe, o navegador se ver for ado a mostrar o texto com a fonte que utiliza por padro (que c ostuma ser Times New Roman). Para evitar isso, dentro do atributo c ostuma-se selec ionar vrios tipos de letras separados por vrgulas. Neste c aso, o navegador c omprovar que dispe do primeiro tipo numerado e se no for assim, passar para o segundo e assim suc essivamente at enc ontrar um tipo que possua ou ento, at ac abar a lista e c oloc ar a fonte padro. Vejamos um exemplo: Este texto tem outra tipografia Que se visualizaria assim em uma pgina web: Este texto tem outra tipografiaNota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas ("). Havamos dito que as aspas eram opcionais nos atributos, entretanto isto no assim sempre. Se o valor do atributo contm espaos, como o caso de: face="C omic Sans MS,arial,verdana" devemos colocar as aspas para limit-lo. Em caso de no ter aspas face=C omic Sans MS,arial, verdana se entenderia que face=C omic, mas no se levaria em conta tudo o que segue, porque o HTML no o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espao) so outros atributos, mas como no os conhece como atributos simplesmente iria ignor-los.Atributo size Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo. Se falarmos em trminos absolutos, existem 7 nveis de tamanhos distintos numerados de 1 a 7 por ordem cresc ente. Esc olheremos portanto um valor size="1" para a menor letra ou size="7" para a maior. Este texto maior Que se visualizaria assim em uma pgina web:Este texto maiorPodemos tambm modificar o tamanho de nossa letra em relao ao do texto mostrado anteriormente definindo o nmero de nveis que queremos subir ou desc er nesta esc ala de tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo c omo size="+1" o que queremos dizer que aumentamos um nvel o tamanho da letra. Se estvamos esc revendo previamente em 3, passaremos automatic amente a 4.www.criarweb.com/manuais/2/print.php 11/8311/10/2010Manual de HTML - Manual completoOs tamanhos reais que vermos na tela dependero da definio e do tamanho da fonte esc olhido pelo usurio no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode ac abar sendo embaraosa para ns em mais de uma oc asio, j que em muitos casos desejaremos que o tamanho do texto permane a c onstante para que este c aiba em um determinado espa o. Veremos em seu momento que esta pr- fixa o do tamanho pode ser realizada pelas folhas de estilo em casc ata. Atributo cor A c or do texto pode ser definida atravs do atributo cor. Cada cor por sua vez definida por um nmero hexadec imal que est composto por trs partes. Cada uma destas partes representa a c ontribui o do vermelho, verde e azul c or em questo. Por outro lado possvel definir de uma maneira imediata algumas das c ores mais freqentemente usadas para as que se c riaram um nome mais memotc nico: Nombre Color Aqua Blac k Blue Fuc hsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White YellowEste texto est em vermelho Que se visualizaria assim em uma pgina web: Este texto est em vermelho Com tudo isso, j somos c apazes de criar um texto formatado de uma forma realmente elaborada. Colocamos ento em prtic a tudo o que aprendemos nestes captulos fazendo um exerc cio c onsistente em uma pgina que tenha as seguintes carac tersticas: Um ttulo com c abe alho de nvel 1, em itlic o e na c or verde oliva. Um segundo ttulo com c abealho de nvel 2, tambm na c or verde oliva. Todo texto da pgina dever apresentar- se c om uma fonte diferente da fonte padro. Por exemplo, "Comic Sans MS" e no c aso de que esta no esteja no sistema, que se coloque a fonte "Arial".www.criarweb.com/manuais/2/print.php 12/8311/10/2010Manual de HTML - Manual completoPode-se ver uma possvel soluo do exerc c io neste link.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comAtributos para pginasAs pginas HTML podem ser c onstrudas c om uma variedade de atributos que lhe podem dar um aspecto pgina muito personalizado. Podemos definir atributos c omo a c or de fundo, a c or do texto ou dos links. Estes atributos se definem na etiqueta e, c omo dizamos so gerais a toda a pgina. O melhor para explic ar seu funcionamento v- los um a um. Atributos para fundos Bgcolor: espec ificamos uma cor de fundo para a pgina. No captulo anterior aprendemos a c onstruir qualquer c or, com seu nome ou seu valor RGB. A c or de fundo que podemos atribuir c om bgcolor uma cor plana, ou seja, a mesma para toda a superfc ie do navegador. Background: serve para indicar a c oloc ao de uma imagem como fundo da pgina. Nos c aptulos mais adiante, veremos c omo se inserem imagens c om HTML e os tipos de imagens que se podem utilizar. Exemplo de fundo Vamos c oloc ar esta imagem no fundo da pgina.A imagem chama-se fundo.jpg e supomos que se enc ontra no mesmo diretrio que a pgina. Neste caso se c oloc aria a seguinte etiqueta Pode-se ver o efeito de c oloc ar este fundo em uma pgina a parte.Conselho: Sempre que colocarmos uma imagem de fundo, devemos tambm pr uma cor de fundo prxima da cor da imagem. Isto se deve, pois ao colocar uma imagem de fundo, temos que colocar uma cor que contraste suficientemente com tal fundo. Se o visitante no pode ver o fundo por qualquer questo (por exemplo, por ter a carga de imagens desabilitada) pode que o texto no contraste o suficiente com a cor de fundo padro da web. Acredito que o melhor a fazer testar com um exemplo. Se a imagem de fundo escura, teremos que colocar um texto claro para que se possa ler. Se o visitante que acessa a pgina no v a imagem de fundo, sair o fundo padro, que geralmente branco, de modo que ao ter um texto de cor clara sobre um fundo branco, no ser possvel ler o texto convenientemente. Ocorre parecido quando se est fazendo o download da pgina. Se ainda no chegou ao nosso sistema a imagem de fundo, veremos o fundo que tivermos selecionado com bgcolor e interessante que seja parecido cor da imagem para que se possa ler o texto enquanto se faz o download da imagem de fundo.Cor do textowww.criarweb.com/manuais/2/print.php13/8311/10/2010Manual de HTML - Manual completoText: Este atributo serve para atribuir a cor do texto da pgina. Por padro o negro. Ademais da cor do texto, temos trs atributos para atribuir a c or dos links da pgina. J devemos saber que os links devem diferenciar-se do resto do texto da pgina para que os usurios possam identific - los fac ilmente. Para isso, eles c ostumam aparec er sublinhados e com uma c or mais viva que o texto. Os trs atributos so os seguintes: Link: a cor dos links que no foram visitados. Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. a c or que tero os links que j visitamos. Por padro sua c or roxa. Esta cor dever ser um pouc o menos viva que a c or dos links normais. Alink: a c or dos links ativos. Um link est ativo no prec iso momento em que se c lica. s vezes difc il perc eber quando um link est ativo porque no momento em que se ativa, porque o estamos c licando e nesse c aso, o navegador abandonar a pgina rapidamente e no poderemos ver o link ativo mais que um mnimo instante. Exemplo de cor de texto Vamos ver uma pgina em que a c or de fundo seja preta, e as c ores dos textos e dos links sejam c laros. Colocaremos a c or do texto branc a e os links amarelos, mais ressaltados os que no tenham sido visitados e menos ressaltados os que j tenham sido. Para isso, esc reveramos a etiqueta body assim:O efeito pode-se ver em uma pgina a parte. Margens Com outros atributos da etiqueta podem- se atribuir espa os de margens nas pginas, o que muito til para eliminar as margens em branc o que aparec em nos lados, em c ima e embaixo da pgina. Estes atributos so diferentes para o Internet Explorer e para o Netsc ape Navigator, por isso, devemos utiliz-los todos se queremos que todos os navegadores os interpretem perfeitamente. Leftmargin: para a indic ar a margem nos lados da pgina. Vlido para Internet Explorer. Topmargin: para indic ar a margem ac ima e abaixo da pgina. Para Internet Explorer. Marginwidth: a contrapartida de leftmargin para Netsc ape. (margem nos lados) Marginheight: igual ao topmargin, mas para Netsc ape. (margem acima e abaixo) Um exemplo de pgina sem margem a prpria pgina de c riarweb.com que voc est visitando atualmente. (pelo menos na hora de esc rever este artigo). Alm disso, vamos ver outra pgina sem margens, c aso algum nec essite ver o exemplo nestas linhas: Ol amigos

Obrigado por me visitar! Esta pgina tem o fundo branc o e dentro um painel com o fundo vermelho. Na pgina poderemos ver que o painel ocupa o espao na pgina sem deixar lugar para nenhum tipo de margem. Podese ver o exemplo em uma pgina parte.Informe de Miguel Angel Alvarez - Traduo de JMLwww.criarweb.com/manuais/2/print.php14/8311/10/2010e-mail: juliana@criarweb.comManual de HTML - Manual completoListas ISo realmente notveis as possibilidades que o HTML nos oferec e em questo de tratamento de texto. No se limitam ao que vimos at agora, pois vo ainda mais longe. Vrios exemplos disso so as listas, que servem para numerar e definir elementos, os textos pr-formatados e os c abe alhos ou os ttulos. As listas so utilizadas para citar, numerar e definir objetos. Tambm so utilizadas c orrentemente para deslocar o c ome o da linha para a direita. Podemos distinguir trs tipos de listas: Listas desordenadas Listas ordenadas Listas de defini o Veremos agora detalhadamente uma por uma: Listas desordenadas So delimitadas pelas etiquetas

e (unordered list). Cada um dos elementos da lista c itado por meio de uma etiqueta (sem fec hamento, ainda que exista nenhum inconveniente em c oloc -lo). Ento, fic a assim:Pases do mundo BrasilEspanha Austrlia O resultado: Pases do mundo Brasil Espanha Austrlia Podemos definir o tipo de marc ador empregado para cada elemento. Para isso devemos especific -lo por meio do atributo type inc ludo dentro da etiqueta de abertura , se queremos que o estilo seja vlido para toda a lista, ou dentro da etiqueta se queremos espec ificar um s elemento. A sintaxe do seguinte tipo: E o tipo de marcador pode ser um dos seguintes: Circ le Disc SquareNota: Em alguns navegadores no funciona a opo de mudar o tipo de marcador e por mais que nos empenhemos, sempre sair a bolinha preta. Em caso de que no funcione, sempre podemos construir a lista mo com o marcador que quisermos, utilizando as tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.www.criarweb.com/manuais/2/print.php15/8311/10/2010Manual de HTML - Manual completoVamos ver um exemplo de lista c om um quadrado ao invs de uma bolinha e, no ltimo elemento, c oloc aremos um c rc ulo. Para isso, vamos c oloc ar o atributo type na etiqueta , que ir afetar todos os elementos da lista.Elemento 1Elemento 2Elemento 3Elemento 4Que tem como resultado: Elemento Elemento Elemento Elemento 1 2 3 4Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comListas IIContinuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para apresentar a informao. Listas ordenadas Neste caso, usaremos as etiquetas (ordered list) e seu fec hamento. Cada elemento ser igualmente prec edido de sua etiqueta . Como exemplo:Regras de comportamento no trabalho O chefe sempre tem a razo Em caso de dvida, aplicar a regra 1 O resultado : Regras de comportamento no trabalho 1. O chefe sempre tem a razo 2. Em caso de dvida aplicar a regra 1 Do mesmo modo das listas desordenadas, as listas ordenadas oferec em a possibilidade de modific ar o estilo. Conc retamente, nos possvel espec ific ar o tipo de numera o empregado esc olhendo entre nmeros (1,2,3...), letras (a,b,c...) e suas maisc ulas (A,B,C...) e nmeros romanos em suas verses maisc ulas (I,II,III...) e minsculas (i,ii,iii...). Para realizar tal seleo temos de utilizar, como para o c aso anterior, o atributo type, o qual ser situado dentro da etiqueta . Neste caso, os valores que o atributo pode tomar so: 1 Para ordenar por nmeros a Por letras do alfabeto A Por letras maisculas do alfabeto i Ordenao por nmeros romanos em minsculaswww.criarweb.com/manuais/2/print.php 16/8311/10/2010Manual de HTML - Manual completoI Ordena o por nmeros romanos em maisc ulasNota: Lembramos que em alguns navegadores no funciona a opo de mudar o tipo de marcador.Pode ser que em algum caso desejemos c omear nossa numera o por um nmero ou letra que no tem porque ser nec essariamente o primeiro de todos. Para resolver esta situa o, podemos utilizar um segundo atributo, start, que ter um nmero c omo valor. Este nmero, que por padro 1, corresponde ao valor a partir do qual c ome amos a definir nossa lista. Para o caso das letras ou dos nmeros romanos, o navegador se encarrega de fazer a tradu o do nmero letra c orrespondente. Propomos um exemplo usando este tipo de atributos:Ordenamos por nmeros Elemento 1 Elemento 2 Ordenamos por letras Elemento a Elemento b Ordenamos por nmeros romanos comeando pelo 10 Elemento x Elemento xi O resultado: Ordenamos por nmeros 1. Elemento 1 2. Elemento 2 Ordenamos por letras a. Elemento a b. Elemento b Ordenamos por nmeros romanos c ome ando pelo 10 x. Elemento x xi. Elemento xiInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comListas IIITerminamos o assunto das listas estudando as listas de definio. Veremos tambm a c ombina o de listas. Listas de definiowww.criarweb.com/manuais/2/print.php 17/8311/10/2010Manual de HTML - Manual completoCada elemento apresentado junto c om sua definio. A defini o principal e (definition list). As etiquetas do elemento e sua defini o so (difinition term) e (definition definition) respec tivamente. Aqui lhe propomos um cdigo que poder clarear este sistema:Dicionrio da Lngua Portuguesa Aougue Estabelecimento onde se vendem carnes frescas C olheita Ato de colher os produtos agrcolas O efeito produzido: Dic ionrio da Lngua Portuguesa A ougue Estabelec imento onde se vendem c arnes frescas Colheita Ato de colher os produtos agrc olas Observe que em c ada linha est deslocada da direo da esquerda. Este tipo de etiquetas usado muitas vezes c om o propsito de criar textos mais ou menos desloc ados da dire o da esquerda. O c digo: Primeiro nvel de deslocamento Segundo nvel de deslocamento Terceiro nvel de deslocamento O resultado: Primeiro nvel de desloc amento Segundo nvel de desloc amento Terc eiro nvel de desloc amento Combinando listas Nada nos impede de utilizar todas estas etiquetas de forma c ombinada c omo vimos em outros c asos. Dessa forma, podemos c onseguir listas mistas c omo, por exemplo:C idades do mundo Brasil Rio de Janeiro Salvador Espanha Madrid Barcelona www.criarweb.com/manuais/2/print.php18/8311/10/2010Manual de HTML - Manual completoDessa forma criamos uma lista c omo esta: Cidades do mundo Brasil 1. Rio de Janeiro 2. Salvador Espanha 1. Madrid 2. BarcelonaInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comCaracteres especiaisUma pgina web vista por diferentes pases, que usam conjuntos de carac teres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma srie de c arac teres raros sero bem vistos em todos os c omputadores do mundo, independentemente de seu jogo de c arac teres. Estes c onjuntos so os c aracteres espec iais. Quando queremos pr um desses c aracteres numa pgina, devemos substitu- lo por seu cdigo. Por exemplo, a letra "" (a minscula ac entuada) se escreve: "" de modo que a palavra pgina seria esc rita numa pgina HTML desse modo: p&aamp;aac ute;gina . Caracteres especiais bsicos Na realidade estes c arac teres se usam em HTML para no c onfundir um incio ou final de etiqueta, umas aspas ou um & c om seu correspondente carac ter. < & < & > " > "Caracteres especiais do HTML 2.0 &Aac ute; &Oac ute; &Uac ute; &iac ute; &Acirc ; &Ec irc; &Ic irc; &Oc irc ; 19/83www.criarweb.com/manuais/2/print.php11/10/2010 Manual ; &Oc irc de HTML - Manual completo &Ucirc ; &ac irc; &ec irc; &icirc ; &oc irc; &uc irc; &cc edil; &Yac ute; &yac ute; Caracteres especiais do HTML 3.2 &frac 14; &frac 12; &frac 34; &c opy; &mic ro; &c edil; &iexc l; &sec t; &c urren; &ac ute; Outros caracteres especiais &c ent; www.criarweb.com/manuais/2/print.php20/8311/10/2010Manual de HTML - Manual completoInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comLinks em HTMLAt aqui, vimos que uma pgina web um arquivo HTML no qual podemos incluir, entre outras c oisas, textos formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um web site poder ser c onsiderado c omo um c onjunto de arquivos, princ ipalmente pginas HTML e imagens, que c onstituem o c ontedo ao qual o navegante tem acesso. Entretanto, no poderamos falar de navegante ou de navegao se estes arquivos HTML no estivessem devidamente conec tados entre eles e com o exterior de nosso site por meio de links hipertexto. Na verdade, o atrativo original do HTML reside no possvel empenho dos c ontedos dos arquivos introduzindo refernc ias sob a forma de links que permitem um ac esso rpido informa o desejada. Serviria pouc o se tivssemos na rede pginas isoladas as quais as pessoas no pudessem acessar ou pginas onde no fosse possvel ir para outras. Um link pode ser fac ilmente detectado em uma pgina. Basta deslizar o c ursor do mouse sobre as imagens ou o texto e ver c omo muda de sua forma original transformando-se por regra geral em uma mo com um dedo indicador. Adicionalmente, estes links costumam ir, no c aso dos textos, c oloridos e sublinhados para que o usurio no tenha dificuldade em os rec onhec er. Se no especific amos o contrrio (j teremos a ocasio de explicar c omo), estes links-texto estaro sublinhados e c oloridos de azul. No c aso das imagens que servem de link, veremos que esto delimitadas por uma marc ao azul por padro. Para colocar um link, utilizaremos as etiquetas e . Dentro da etiqueta de abertura devemos espec ificar o destino do link. Este destino ser introduzido sob a forma de atributo, no qual leva o nome href. A sintaxe geral de um link portanto da seguinte forma: c ontedo Sendo o c ontedo um texto ou uma imagem. a parte da pgina que se c oloc ar ativa e onde deveremos c lic ar para acessar ao link. E o destino por sua vez, ser uma pgina, um c orreio eletrnic o ou um arquivo. Em fun o do destino, os links so classicamente agrupados da seguinte forma: Links internos: os que se dirigem a outras partes dentro da mesma pgina. Links locais: os que se dirigem a outras pginas do mesmo site web. Links remotos: os que se dirigem pginas de outros sites web. Links com endereos de correio: para c riar uma mensagem de c orreio dirigido a um endere o. Links com arquivos: Para que os usurios possam fazer download de arquivos.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comLinks internosSo os links que apontam a um lugar diferente dentro da mesma pgina. Este tipo de link essenc ialmente utilizado em pginas onde o ac esso aos contedos pode ser prejudic ado devidowww.criarweb.com/manuais/2/print.php 21/8311/10/2010Manual de HTML - Manual completoao grande tamanho da mesma. Mediante estes links, podemos oferec er aos visitantes a possibilidade de acessar rapidamente ao incio e ao final da pgina, ou tambm a diferentes pargrafos ou se es. Para criar um link deste tipo necessrio, alm do link origem propriamente dito, um segundo link que ser c olocado no destino. Vejamos mais c laramente c omo func ionam estes links com um simples exemplo: Suponhamos que queremos criar um link que aponte ao final da pgina. O primeiro a fazer ser c oloc ar nosso link origem. Colocaremos e escreveremos da seguinte forma: Ir abaixo Link c om o final deste doc umento para que prove seu func ionamento: Ir abaixo Como pode ser visto, o contedo do link o texto "Ir abaixo" e o destino, abaixo, um ponto da mesma pgina que ainda no foi definido. Ateno ao smbolo # ; ele quem espec ific a ao navegador que o link aponta a uma se o particular. Em segundo lugar, temos que gerar um link no destino. Este link levar o nome "abaixo" para poder distingu-lo dos outros possveis links realizados dentro da mesma pgina. Neste c aso, a etiqueta que escreveremos ser esta: Na verdade, estes links, mesmo sendo teis, no so os mais utilizados. A tendncia geral a de c riar pginas (arquivos) independentes c om tamanhos mais reduzidos linkados entre eles por links loc ais (que veremos em seguida). Desta forma, evitamos o excesso de tempo de c arregamento de um arquivo e a introduo de exc esso de informa o que possa desviar a aten o do usurio. Uma aplicao c orrente destes links consiste em coloc ar um pequeno ndic e ao princ pio de nosso documento onde introduzimos links origem s diferentes se es. Paralelamente, ao final de cada se o introduzimos um link que aponta ao ndic e de forma que possamos guiar o navegante na busc a da informao til para ele.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comLinks locaisComo dissemos, um site web est c onstituido de pginas interc onexas. No c aptulo anterior vimos c omo linkar diferentes se es dentro de uma mesma pgina. Resta-nos estudar a maneira de relac ionar os distintos doc umentos HTML que c ompem nosso site web. Para criar este tipo de links, temos que c riar uma etiqueta da seguinte forma: c ontedo Por regra geral, para uma melhor organizao, os sites c ostumam estar ordenados por diretrios. Estes diretrios costumam conter diferentes se es da pgina, imagens, audios... por isso que em muitos c asos no nos ser vlido especific ar o nome do arquivo, e sim, o diretrio onde nosso arquivo.html est alojado. Se voc j tiver trabalhado c om MS-DOS no ter nenhum problema para c ompreender o modo de func ionamento. Somente dever ter c uidado em usar a barra "/" no lugar da contra-barra "\". Para aqueles que no sabem como mostrar um c aminho de um arquivo, aqui vai uma srie dewww.criarweb.com/manuais/2/print.php 22/8311/10/2010Manual de HTML - Manual completoindica es que lhes vo ajudar a compreender a forma de express-los. No nada difc il e com um pouc o de prtic a o far pratic amente sem pensar. 1. H de situar mentalmente no diretrio no qual se enc ontra a pgina c om o link. 2. Se a pgina destino est em um diretrio inc ludo dentro do diretrio no qual nos enc ontramos, temos de marcar o caminho numerando cada um dos diretrios pelos quais passamos at c hegar ao arquivo e separando-os pelo smbolo barra "/". No final, obviamente, esc revemos o arquivo. 3. Se a pgina destino enc ontra-se em um diretrio que inclui o da pgina com o link, temos que esc rever dois pontos seguidos e uma barra "../" tantas vezes quantas forem os nveis que subirmos na hierarquia de diretrios, at chegar no diretrio onde est loc alizado o arquivo destino. 4. Se a pgina enc ontra-se em outro diretrio no inc ludo nem inc luente do arquivo origem, teremos que subir c om a regra 3 por meio de ".." at enc ontrar o diretrio que englobe o diretrio que contm a pgina destino. A seguir faremos c omo a regra 2. Esc reveremos todos os diretrios pelos quais passamos at chegar ao arquivo. Exemplo:Para esclarecer este ponto podemos fazer um exemplo a partir da estrutura de diretrios da imagem.Para fazer um link desde index.html para yyy.html: conteudo Para fazer um link desde xxx.html para yyy.html: conteudo Para fazer um link desde yyy.html para xxx.html: &conteudoOs links loc ais podem por sua vez j apontar mais precisamente a uma se o c onc reta, ao invs da pgina em geral. Este tipo de link costuma ser um hbrido de interno e local. A sintaxe deste tipo: conteudo Como para os links internos, neste c aso temos que marcar a seo c om outro link do tipo: Como exemplo temos aqui um link que aponta ao captulo anterior ao final da pgina.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comLinks externos, de correio e para arquivosPara terminar o tema dos links veremos os trs ltimos tipos de links que havamos assinalado. Links remotos So os links que se dirigem s pginas que se enc ontram fora do nosso site web, ou seja, qualquer outro doc umento que no faz parte de nosso site. Este tipo de link muito c omum e no representa nenhuma dific uldade. Simplesmente c oloc amos no atributo HREF de nossa etiqueta a URL ou endere o da pgina com a qual queremos linkar. Ser algo parecido a isto:www.criarweb.com/manuais/2/print.php 23/8311/10/2010Manual de HTML - Manual completoir a yahoo.c om.br Somente c abe destacar que todos os endere os web (URLs) c omeam por http:// . Isto indica que o protocolo pelo qual se acessa HTTP, o utilizado na web. No devemos nos esquec er de c oloc -lo porque seno os links sero tratados como links loc ais em nosso site. Outra c oisa interessante que no temos necessariamente que linkar c om uma pgina web com o protoc olo HTTP. Tambm podemos acessar rec ursos atravs de outros protoc olos c omo o FTP. Em tal caso, os endereos dos rec ursos no c omearo c om http:// e sim por ftp://. Links a endereos de correio Os links a endereos de c orreio so aqueles em que ao c lic - los nos abre uma nova mensagem de c orreio eletrnic o dirigido a um determinado endereo de mail. Estes links so muito habituais nas pginas web e a maneira mais rpida de oferec er ao visitante uma via para o c ontato c om o proprietrio da pgina. Para colocar um link dirigido a um endereo de correio c oloc amos mailto: no atributo href do link, seguido do endere o de c orreio ao qual se deve dirigir o link. juliana@c riarweb.c om Este link pode ser visto aqui: juliana@criarweb.c omConselho: Quando voc colocar links a endereos de correio, procure indicar no contedo do link (o que h entre e ) o endereo de correio ao qual se deve escrever. Isto, porque se um usurio no tem configurado um programa de correio em seu computador no poder enviar mensagens, mas pelo menos poder copiar o endereo de mail e escrever o correio atravs de outro computador ou um sistema web-mail.Alm do endere o do c orreio eletrnico do destinatrio, tambm podemos c oloc ar no link o assunto da mensagem. Isto se c onsegue colocando depois do endere o de correio uma interroga o, a palavra subject, o sinal de igual (=) e o assunto em conc reto. juliana@c riarweb.com Podemos c oloc ar outros atributos de mensagem c om uma sintaxe parec ida. Neste c aso indicamos tambm que o c orreio deve ir c om cpia a c olabore@criarweb.c om. juliana@c riarweb.c omNota: O visitante da pgina necessitar ter configurada uma conta de correio eletrnico em seu sitema para enviar as mensagens. Logicamente, se no tiver servio de correio no computador no ser possvel enviar as mensagens e este sistema de contato com o visitante no funcionar.Links com arquivos Este no um tipo de link propriamente dito, mas o assinalamos aqui porque um tipo de link muito habitual e que apresenta alguma c omplica o para o usurio novato. O mecanismo o mesmo que conhecemos nos links loc ais e nos remotos, com a nic a partic ulariedade de que em vez de estar dirigidos para uma pgina web, est dirigido para um arquivo de outro tipo. Se queremos linkar c om um arquivo meu_arquivo.zip que se enc ontra no mesmo diretrio que a pgina, escreveramos um link assim: Baixar meu_arquivo.zipwww.criarweb.com/manuais/2/print.php 24/8311/10/2010Manual de HTML - Manual completoSe clic amos um link deste tipo nosso navegador baixar o arquivo, fazendo a pergunta tpica se: "Deseja abrir o arquivo ou salv- lo no c omputador?".Conselho: No colocar na Internet arquivos executveis diretamente e sim, arquivos comprimidos. Por duas razes: 1. O arquivo ocupar menos, com o que ser mais rpido sua transferncia. 2. Ao perguntar ao usurio o que deseja fazer com o arquivo, lhe oferece a opo de abr-lo e salv-lo no computador. Ns geramente desejaremos que o usurio salve-o no computador e no o execute at que o tenha em seu disco rgido. Se decido abr-lo ao invs de salv-lo simplesmente o colocar em funcionamento e quando pare no estar salvo em seu sistema. Se os arquivos estiverem comprimidos obrigaremos ao usurios a descomprim-los em seu disco rgido antes de coloc-los em funcionamento, com o que nos certificamos que o usurio o salva em seu computador antes de execut-lo.Se quisermos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtual para Internet) c ontinuaremos fazendo da mesma maneira. O navegador, se rec onhec e o tipo de arquivo, o responsvel de abr- lo utilizando o conec tador adequado para isso. Assim, se por exemplo linkamos c om um PDF colocar o programa Ac robat Reader em func ionamento para mostrar os c ontedos. Se linkamos c om um mundo VRML c oloc ar em func ionamento o plug-in que o usurio tenha instalado para ver os mundos virtuais (Cosmo, por exemplo) . Este seria um exemplo de link a um documento PDF. Baixar o PDFInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comImagens em HTMLSem dvida, um dos aspec tos mais vistosos e atrativos das pginas web o grafismo. A introduo em nosso texto de imagens pode nos ajudar a explic ar mais fac ilmente nossa informa o e dar um ar muito mais esttic o. Porm, o abuso pode nos conduzir a uma sobrec arga que se traduz em uma distra o para o navegante, quem ter mais dificuldade em encontrar a informa o nec essria, e um maior tempo para c arregar a pgina o que pode ser de um efeito nefasto se nosso visitante no tem uma boa conexo ou se um pouc o impac iente. Neste captulos no explic aremos como c riar, nem como tratar as imagens, unicamente diremos que para isso utilizam- se aplicaes como Paint Shop Pro, Photoshop ou Corel Draw. Tambm no explic aremos as partic ularidades de c ada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este assunto ser dedicado em um futuro captulo. As imagens so armazenadas em forma de arquivos, princ ipalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por ns mesmos ou podem ser baixados gratuitamente em sites web espec ializados. Sendo assim, nestes primeiros captulos nos limitaremos a explic ar como inserir e alinhar devidamente em nossa pgina uma imagem j c riada. A etiqueta que utilizaremos para inserir uma imagem (image). Esta etiqueta no possui seu fec hamento c orrespondente e nela temos de especific ar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (sourc e). A sintaxe fica ento da seguinte forma: Para expressar o c aminho, faremos da mesma forma que vimos para os links. As regras c ontinuamwww.criarweb.com/manuais/2/print.php 25/8311/10/2010Manual de HTML - Manual completosendo as mesmas, o nico que muda que, no lugar de uma pgina destino, o destino um arquivo grfic o. Alm deste atributo, obviamente indispensvel para a visualizao da imagem, a etiqueta nos prope outra srie de atributos de maior ou menor utilidade: Atributo alt Entre aspas deste atributo, c oloc aremos uma brevssima desc rio da imagem. Esta etiqueta no indispensvel, mas apresenta vrias utilidades. Primeiramente, durante o proc esso de c arregamento da pgina, quando a imagem no tiver sido ainda carregada, o navegador mostrar esta desc rio, com a qual o navegante poder ter uma idia do que se trata neste caso. Isto no to trivial se temos em c onta que alguns usurios navegam pela rede c om uma opo do navegador que desativa a amostra de imagens, com o que tais pessoas podero sempre saber de que se trata o grfic o e eventualmente mudar o modo com imagens para visualizar. Alm disso, determinadas aplicaes para incapac itados ou para telefones voc ais que no mostram imagens oferec em a possibilidade de l- las, o que nunca demais pensar nestes c oletivos. Em geral, podemos c onsiderar c omo ac onselhvel o uso deste atributo salvo para imagens de pouc a importnc ia e absolutamente indispensvel se a imagem em questo serve de link. Atributos height e width Definem a altura e largura respec tivamente da imagem em pixels. Todos os arquivos grfic os possuem umas dimenses de largura e altura. Estas dimenses podem ser obtidas a partir do prprio designer grfico ou tambm, c licando com o boto direito sobre a imagem vista pelo navegador para logo esc olher propriedades sobre o menu que se desdobra. O fato de explic itar em nosso c digo as dimenses de nossas imagens ajuda ao navegador a c onfecc ionar a pgina da forma que ns desejamos inc lusive antes das imagens serem baixadas. Assim, se as dimenses das imagens tiverem sido proporcionadas, durante o proc esso de c arregamento, o navegador reservar o espa o c orrespondente a c ada imagem c riando uma planific a o correta. O usurio poder come ar a ler tranqilamente o texto sem que este se mova de um lado a outro cada vez que se c arregue uma imagem. Alm desta utilidade, o alterar os valores destes atributos, uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade no aconselhvel visto que, se o que pretendemos aumentar o tamanho, a perda da qualidade da imagem ser muito sensvel. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o nec essrio para a imagem que estamos mostrando, com o que aumentamos o tempo de desc arregamento de nosso documento desnec essariamente. importante insistir neste ponto j que muitos estreantes tm o pssimo costume de c riar grfic os pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho desc omunal. Temos que pensar que o tamanho de uma imagem c om umas dimenses da metade no se reduz metade, e sim, que aproximadamente 4 vezes inferior. Atributo border Define o tamanho em pixels do quadro que rodeia a imagem. Dessa forma, podemos re-enquadrar nossa imagem se desejamos. partic ularmente til quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal c aso teremos que especific ar border="0".www.criarweb.com/manuais/2/print.php 26/8311/10/2010Manual de HTML - Manual completoAtributos vspace e hspace Serve para indic ar o espa o livre, em pixels, que tem que ser c oloc ado entre a imagem e outros elementos que a rodeiam, c omo texto, outras imagens, etc . Atributo lowsrc Com este atributo podemos indic ar um arquivo de baixa resolu o. Quando o navegador detec ta que a imagem tem este atributo, primeiro desc arrega e mostra a imagem de baixa resolu o (que oc upa muito pouco e que se transfere muito rpido). Posteriormente, desc arrega e mostra a imagem de resolu o adequada (assinalada com o atributo src , que se supe que oc upar mais e que ser mais lenta de se transferir). Est atributo est em desuso, mesmo supondo uma vantagem c onsidervel para que o desc arregamento inic ial se realize mais rpido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.Dica: Utilizar imagens como links Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de cdigo necessrio. Exemplo prtico Ser bvio para os leitores, fazer agora uma pgina que contenha uma imagem vrias vezes repetidas, mas c om diferentes atributos. Uma das vezes que saia deve ser mostrada c om seu tamanho original e com uma borda de 3 pixels. Em outra oc asio a imagem aparec er sem borda, c om sua mesma altura e c om uma largura superior a original. Tambm mostraremos a imagem sem borda, c om sua mesma largura e c om uma altura superior a original. Por ltimo, mostraremos a imagem c om uma altura e largura maiores que as originais, mas proporc ionalmente igual que antes.Vamos utilizar esta imagem para fazer o exerccio:As dimenses originais da imagem so 28x21, o c digo fonte seria ento da seguinte forma: Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comwww.criarweb.com/manuais/2/print.php27/8311/10/2010Manual de HTML - Manual completoAlinhamento de imagens com HTMLVimos em seu momento o atributo align que nos permitia alinhar o texto direita, esquerda ou no c entro de nossa pgina. Dissemos que este atributo no era exc lusivo da etiqueta e sim, que podia ser enc ontrado em outro tipo de etiquetas. Sendo assim, uma dessas etiquetas que aceitam este atributo, mesmo sendo, neste c aso, o func ionamento diferente. Para alinhar uma imagem horizontalmente podemos fazer da mesma forma que o texto, ou seja, utilizando align dentro de uma etiqueta ou . Neste c aso, o que inc luiremos dentro desta etiqueta ser a imagem no lugar do texto: Este cdigo mostrar a imagem no c entro: Fic aria assim:Entretanto, j dissemos que a etiqueta pode ac eitar o atributo align. Neste c aso, a utilidade que lhe damos diferente da anterior. O fato de utilizar o atributo align dentro da etiqueta nos permite, no caso de dar os valores left ou right, justific ar a imagem do lado que desejamos uma vez que recheamos c om texto o lado oposto. Dessa forma, inc orporamos nossas imagens dentro do texto de uma maneira simples. Aqui se pode ver o tipo de c digo a c riar para obter tal efeito: Texto to extenso quanto quisermos para que c ubra a parte esquerda da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... Fic aria assim: Texto to extenso quanto quisermos para que c ubra a parte esquerda da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... Texto to extenso quanto quisermos para que c ubra a parte direita da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... Fic aria assim: Texto to extenso quanto quisermos para que c ubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...www.criarweb.com/manuais/2/print.php28/8311/10/2010Manual de HTML - Manual completoSe em algum momento desejarmos preencher esse espao lateral, podemos passar a uma zona livre introduzindo uma quebra de linha
dentro do qual acresc entaramos um atributo: c lear Sendo ento, etiquetas do tipo:
Pular vertic almente at enc ontrar a lateral esquerdo livre.
Pular vertic almente at enc ontrar a lateral direita livre.
Pular vertic almente at enc ontrar ambas laterais livres. Exemplo de c lear: Texto to extenso quanto quisermos que c ubra a parte esquerda.Isto est debaixo da imagem.Existe outro tipo de valores que pode adotar o atributo align dentro da etiqueta . Isto relativo ao alinhamento vertic al da imagem. Supomos que esc revemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo ac ima, abaixo ou no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos vrias imagens de alturas diferentes que podem ser alinhadas de distintas formas. Estes valores adic ionais so: Top Ajusta a imagem parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta, ambas imagens apresentaro a borda superior na mesma altura. Bottom Ajusta o baixo da imagem ao texto. Absbottom Colocar a borda inferior da imagem ao nvel do elemento mais baixo da linha. Middle Faz coincidir a base da linha de texto c om o meio vertic al da imagem. Absmiddle Ajusta a imagem ao meio absoluto da linha. Estas explicaes, que podem ser um pouc o c omplicadas, sero mais facilmente assimiladas c om um pouc o mais de prtic a. Falta explicar c omo introduzir debaixo da imagem um p de foto ou uma explica o. Para isso, teremos que ver antes de mais nada as tabelas, nos prximos captulos...Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comFormatos grficos para pginas webwww.criarweb.com/manuais/2/print.php 29/8311/10/2010Manual de HTML - Manual completoO c omponente grfic o das pginas web tem muita importncia, que o que faz c om que estas seja vistosas e o que nos permite aplic ar nossa c riatividade para fazer o design do site uma tarefa agradvel. tambm uma ferramenta para aproximar os sites ao mundo onde vivemos, entretanto, tambm o causador de graves erros nas pginas e fazer destas, em alguns casos, um martrio para o visitante. As noes bsic as para o uso de arquivos grficos so simples, c onhec - las, mesmo que seja ligeiramente, nos ajudar a c riar sites agradveis e rpidos. No cometer erros no uso das imagens fundamental, mesmo que no seja um designer e as imagens que utiliza sejam feias, utilize-as bem e assim, estar propic iando mais visitas ao seu site. Tipos de arquivos Na Internet se utilizam principalmente dois tipos de arquivos grficos GIF e JPG, pensados especialmente para otimizar o tamanho que oc upam em disco, j que os arquivos pequenos se transmitem mais rapidamente pela Rede. O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as fotografias. Os dois comprimem as imagens para salv-las. A forma de c omprimir a imagem que utiliza cada formato o que os tornam ideais para um propsito ou outro. Adic ionalmente, pode-se usar um terc eiro formato grfic o nas pginas web, o PNG. Este formato no tem tanta ac eita o como o GIF ou o JPG, por vrias razes, entre elas: o desc onhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar grfic os (c omo por exemplo, Photoshop) geralmente no suportam, e que os navegadores antigos tambm tm problemas para visualiz- las. Entretanto, o formato se c omporta muito bem quanto a c ompreenso e a qualidade do grfic o c onseguinte, pelo que seria til se chega a extender seu uso. GIF Alm se ser um arquivo ideal para as imagens que esto desenhadas, tem muitas outras carac tersticas que so importantes e teis. Compresso: muito boa para desenhos, c omo j foi dito. Inclusive pode ser interessante se a imagem muito pequena, mesmo que seja uma foto.Um logotipo um exemplo claro de imagem GIFTransparncia: uma utilidade para definir certas partes do desenho como transparentes. Desse modo, podemos c oloc ar as imagens sobre distintos fundos sem que se veja o quadrado onde est inserido o desenho, vendo em troc a a silhueta do desenho em questo. Para criar um gif transparente devemos utilizar um programa de desenho grfico, c om o qual podemos indicar que c ores do desenho queremos que sejam transparentes. Geralmente, definimos a transparncia quando vamos salvar o grfic o.Parte desta imagem transparenteCores: Com este formato grfico podemos utilizar conjuntos de 256 c ores ou menos. Este um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos oc upar o arquivo. s vezes, mesmo utilizando menos c ores em um grfic o, este no perde muita qualidade, c hegando a ser inaprecivel vista. Em alguns programas podemos modific ar a quantidade de c ores ao salvar o arquivo, em outros, fazemos enquanto c riamos o grfico.32 C ores16 C ores8 C oresImagem tomada com distintas aquarelas de cores. Pode-se apreciar como que com poucas cores se v bem o grfico e como perde um pouco medida em que lhe retiramos mais cores.www.criarweb.com/manuais/2/print.php30/8311/10/2010Manual de HTML - Manual completoJPG Vejamos agora quais so as c arac tersticas fundamentais do formato JPG: Compresso: Tal c omo dissemos anteriormente, sua gama de c ompresso torna ideal este formato para salvar fotografias. Alm disso, c om JPG podemos definir a qualidade da imagem, c om qualidade baixa o arquivo oc upar menos, e vic e- versa.Uma fotografia com formato JPGTransparncia: Este formato no tem possibilidade de criar reas transparentes. Se desejamos c oloc ar uma imagem c om uma rea que parea transparente proc ederemos assim: c om nosso programa de desenho grfic o faremos com que o fundo da imagem seja o mesmo que o da pgina onde queremos c oloc -la. Em Uma tentativa de muitos c asos, os fundos da imagem e a pgina parecero o mesmo. transparncia emJPG.Cores: JPG trabalha sempre com 16 milhes de cores, ideal para fotografias. Otimizar arquivos Para que as imagens ocupem o menos possvel e se transfiram rapidamente pela Rede devemos aprender a otimizar os arquivos grfic os. Para isso, devemos fazer o seguinte: Para os arquivos GIF: Reduziremos o nmero de c ores de nossa aquarela. Isto se faz c om nosso editor grfic o, em muitos casos poderemos fazer ao salvar o arquivo.GIF 256 cores - 11,1 KBGIF 16 cores - 7,3 KBGIF 4 cores - 3,9 KBPara os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite baixar muito a qualidade da imagem sem que esta perc a muito em seu aspecto visual.JPG qualidade 0 3 KBwww.criarweb.com/manuais/2/print.php31/8311/10/2010Manual de HTML - Manual completoJPG qualidade 20 5,9 KBJPG qualidade 50 10 KB imprescindvel dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas carac terstic as da imagem c om liberdade e facilidade. Photoshop 5.5 ou 6 um programa bastante recomendvel, pois incorpora uma opo que se c hama "Salvar para Web" c om a qual podemos definir as cores do gif, a qualidade do JPG e outras op es em vrias amostras. Assim, c om todas as opes configurveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira prec isa com os resultados que desejamos. Tambm existem no merc ado outros programas que nos Photoshop uma ferramenta excelente permitem otimizar estas imagens de maneira surpreendente. para otimizar arquivos. Vendo vrias Uma vez que c riamos a imagem, a passamos por estes cpias podemos escolher a mais adequada. programas e nos c omprimem ainda mais o arquivo, fazendolhe rpido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades to especializadas, os resultados costumam ser melhores que c om os programas de edio grfica. Exemplos de otimizadores grficos: - WebGraphic s Optimizer - ProJPG, GIF Imantion E com verses On-line: - GIF WizardInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comAs cores e HTMLAs c ores possuem um papel muito importante na composi o de webs. So indicadas em valores RGB, ou seja, que para c onseguir uma c or qualquer misturaremos quantidades de Vermelho, Verde e Azul. Os valores RBG so indic ados em numera o hexadec imal, em base 16. (Os dgitos podem c resc er at 16). Como no existem tantos dgitos numricos se utilizam as letras da A F. 0=0www.criarweb.com/manuais/2/print.phpTabela de cor4=48=8C=1232/8311/10/2010Manual de HTML - Manual completo1=1 2=2 3=35=5 6=6 7=79=9 A=10 B=11D=13 E=14 F=15Para c onseguir uma c or, misturaremos valores desta maneira:RRGGBBOnde cada valor pode crescer desde 00 at FF. Exemplo: Como se mudaria a fonte para esc rever em vermelho: Vermelho Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O carac tere # se c oloc a ao princ pio da expresso. Outras cores: Laranja Azul escuro Cores compatveis em todos os sistemas Como as pginas web tm que ser vistas por todos os usurios, e os sistemas que utilizam para entrar so distintos, h que utilizar c ores compatveis c om a paleta de todos eles. A forma de c onseguir isto limitando nossas c ores aos que se podem c onseguir utilizando a seguinte norma:Utilizaremos sempre estes valores:#FF8000 #000080Verde turquesa #33996600 33 66 99 CC FF Exemplos: #3366FF #FF9900 #666666 Consegue-se as seguintes cores:#000000 #003300 #006600 #009900 #00C C 00 #00FF00 #330000 #333300 #336600 #339900 #33C C 00 #33FF00 #660000 #663300 #666600 #669900 #66C C 00 #000033 #003333 #006633 #009933 #00C C 33 #00FF33 #330033 #333333 #336633 #339933 #33C C 33 #33FF33 #660033 #663333 #666633 #669933 #66C C 33 #000066 #003366 #006666 #009966 #00CC 66 #00FF66 #330066 #333366 #336666 #339966 #33CC 66 #33FF66 #660066 #663366 #666666 #669966 #66CC 66 #000099 #003399 #006699 #009999 #00CC 99 #00FF99 #330099 #333399 #336699 #339999 #33CC 99 #33FF99 #660099 #663399 #666699 #669999 #66CC 99 #0000C C #0033C C #0066C C #0099C C #00C CC C #00FFCC #3300C C #3333C C #3366C C #3399C C #33C CC C #33FFCC #6600C C #6633C C #6666C C #6699C C #66C CC C #0000FF #0033FF #0066FF #0099FF #00CC FF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CC FF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CC FFwww.criarweb.com/manuais/2/print.php33/8311/10/2010#66FF00 #990000 #993300 #996600 #999900 #99C C 00 #99FF00 #CC 0000 #CC 3300 #CC 6600 #CC 9900 #C C CC 00 #C CFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFC C00 #FFFF00Manual de HTML - Manual completo#66FF33 #990033 #993333 #996633 #999933 #99C C 33 #99FF33 #C C0033 #C C3333 #C C6633 #C C9933 #C C CC 33 #C CFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFC C33 #FFFF33 #66FF66 #990066 #993366 #996666 #999966 #99CC 66 #99FF66 #C C0066 #C C3366 #C C6666 #C C9966 #CC C C66 #C C FF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFC C 66 #FFFF66 #66FF99 #990099 #993399 #996699 #999999 #99CC 99 #99FF99 #C C0099 #C C3399 #C C6699 #C C9999 #CC C C99 #C C FF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFC C 99 #FFFF99 #66FFCC #9900C C #9933C C #9966C C #9999C C #99C CC C #99FFCC #C C 00C C #C C 33C C #C C 66C C #C C 99C C #C CC C CC #CC FFC C #FF00CC #FF33CC #FF66CC #FF99CC #FFCC C C #FFFFC C #66FFFF #9900FF #9933FF #9966FF #9999FF #99CC FF #99FFFF #C C00FF #C C33FF #C C66FF #C C99FF #CC C CFF #C C FFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFC C FF #FFFFFFInforme de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comTabelas em HTMLUma tabela um conjunto de clulas organizadas dentro das quais podemos alojar distintos c ontedos. princ pio, poderia parec er que as tabelas so raramente teis e que podem ser utilizadas simplesmente para listar dados c omo agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade. Hoje, grande parte dos desenhadores de pginas baseia seu planejamento neste tipo de engenhoc a. De fato, uma tabela nos permite organizar e distribuir os espaos da melhor forma. Pode nos ajudar a gerar textos em colunas c omo os jornais, prefixar os tamanhos oc upados por distintas se es da pgina ou c oloc ar de uma maneira simples uma legenda a uma imagem. Pode ser que a princpio seja um pouco complic ado trabalhar com estas estruturas mas, se desejamos criar uma pgina de qualidade, mais cedo ou mais tarde teremos que nos ver c om elas e nos dar conta das possibilidades que nos oferec em. Para come ar, nada mais simples do que pelo princ pio: as tabelas so definidas pelas etiquetas e Dentro dessas duas etiquetas c oloc aremos todas as outras etiquetas, textos e imagens que daro forma e c ontedo tabela. As tabelas so descritas por linhas da esquerda para direita. Cada uma destas linhas definida por outra etiqueta e seu fec hamento: e Ainda assim, dentro de c ada linha, haver diferentes c lulas. Cad uma dessas clulas ser definida por outro par de etiquetas: e . Dentro desta etiqueta ser onde c oloc aremos nosso contedo. Aqui temos um exemplo de estrutura de tabela: www.criarweb.com/manuais/2/print.php 34/8311/10/2010Manual de HTML - Manual completoClula Clula Clula Clula 1, linha 1 2, linha 1 1, linha 2 2, linha 2O resultado: Clula 1, linha 1 Clula 2, linha1 Clula 1, linha 2 Clula 2, linha 2 NOTA: At aqui vimos todas as etiquetas que necessitamos c onhecer para c riar as tabelas. Existem outras etiquetas, mas o que podemos c onseguir c om elas se pode c onseguir tambm usando as que j vimos. Por exemplo, assinalamos a etiqueta , que serve para criar uma clula cujo contedo esteja formatado c omo um ttulo ou c abealho da tabela. Na prtic a, o que faz c oloc ar em negrito e c entralizado o contedo dessa c lula, o que se pode conseguir aplicando as c orrespondentes etiquetas dentro da c lula. Assim: Contedo da c lula A partir desta idia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de atributos aplic ados sobre c ada tipo de etiquetas que as compem. Ao longo dos prximos c aptulos nos aprofundaremos no estudo desses atributos de forma a proporc ionar-lhe tudo que til e indispensvel para um bom arranque em pginas.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comTabelas em HTML. Atributos para filas e clulas.Vimos no captulo anterior que as tabelas esto compostas de linhas que, por sua vez, contm c lulas. As c lulas so delimitadas pelas etiquetas ou pelas etiquetas (se queremos texto em negrito e centralizado) e c onstituem um entorno independente do resto do documento. Isto quer dizer que: Podemos usar pratic amente qualquer tipo de etiqueta dentro da etiqueta para, desta forma, dar forma a seu c ontedo. As etiquetas situadas no interior da c lula no modificam o resto do documento. As etiquetas de fora da c lula no so tidas em c onta por esta. Sendo assim, podemos espec ific ar o formato de nossas c lulas a partir de etiquetas introduzidas em seu interior ou mediante atributos c oloc ados dentro da etiqueta de c lula ou tambm, em alguns casos, dentro da etiqueta , se desejamos que o atributo seja vlido para toda a linha. A forma mais til e atual de dar forma s clulas a partir das folhas de estilo em c ascata que j teremos a oportunidade de abordar mais adiante. Vemos em seguida alguns atributos teis para a c onstru o de nossas tabelas. Comeamos vendo alguns atributos que nos permite modific ar uma clula em concreto ou toda uma linha. align Justific a o texto da clula da mesma forma que se fosse o de um pargrafo. valign Podemos esc olher se queremos que o texto aparea ac ima (top), no c entro (middle) ou abaixo (bottom) da c lula. bgcolor D c or c lula ou esc olha de linha.www.criarweb.com/manuais/2/print.php 35/8311/10/2010Manual de HTML - Manual completobordercolor Define a c or da borda. Outros atributos que podem ser unicamente atribudos a uma c lula e no ao um c onjunto de c lulas de uma linha so: background Permite- nos c olocar um fundo para a clula a partir de um link a uma imagem. height Define a altura da c lula em pixels ou porcentagem. width Define a largura da c lula em pixels ou porc entagem colspan Expande um c lula horizontalmente. rowspan Expande um c lula vertic almente.Nota: O atributo height no funciona em todos os navegadores, ademais, seu uso no est muito estendido. As clulas em geral, tm a altura que necessitam para caber todo o contedo que tenha inserido, ou seja, crescem o suficiente para que caiba o que colocamos dentro. O atributo width sim que funciona em todos os navegadores e deve ser utilizado constantemente. Se lhe atribumos uma largura clula, a largura ser respeitada e se a tal clula tiver muito texto ou qualquer outro contedo, a clula crescer um tanto para baixo quanto for o necessrio para caber o que colocamos. Uma observao neste ltimo pargrafo. Trata-se que se definimos uma clula de uma largura 100, por exemplo e colocamos na clula um contedo como uma imagem que mea mais de 100 pixels, a clula crescer em horizontalmente tanto quanto for necessrio para que a imagem caiba. Se o elemento, mesmo mais largo, fosse divisvel (como um texto) a largura seria respeitada e o texto cresceria para baixo, ou o que o mesmo, em altura, como assinalamos no pargrafo anterior.Estes ltimos quatro atributos desc ritos so de grande utilidade. Conc retamente, height e width nos ajudam a definir as dimenses de nossas c lulas de uma forma absoluta (em pixel ou em pontos de tela) ou de uma forma relativa, ou seja, por porc entagens referentes ao tamanho total da tabela. Por exemplo: Dar uma largura de 80 pixels clula. Entretanto, Dar uma largura c lula do 80% da largura da tabela. H de ter em c onta que, definidas as dimenses das clulas, o navegador vai fazer o que bondosamente puder para satisfazer ao programador. Isto quer dizer que pode que em algumas oc asies o resultado que obtenhamos no seja o esperado. Concretamente, se o texto apresenta uma palavra exc essivamente c omprida pode que a largura da clula se veja aumentada para manter a palavra na mesma linha. Por outro lado, se o texto muito grande , a c lula aumentar sua para poder mostrar todo o seu c ontedo. Analogamente se, por exemplo, definimos duas larguras distintas s c lulas de uma mesma coluna, o navegador no saber qual atender. por isso que conveniente ter bem claro desde o princpio c omo a tabela que queremos desenhar. No demais saber se pr-desenhamos no papel se a c omplexidade importante. O HTML em geral fcil, mas as tabelas podem converte- se em um verdadeiro quebra-c abea se no chegamos a compreende-las devidamente. Os atributos rowspan e c olspan so tambm utilizados freqentemente. Gra as a isso possvel expandir c lulas fundindo estas c om suas vizinhas. O valor que podem tomar estas etiquetas numrico. O nmero representa a quantidade de c lulas fundidas. Assim, Fundir a c lula em questo com sua vizinha direita.www.criarweb.com/manuais/2/print.php 36/8311/10/2010Manual de HTML - Manual completoEsta c lula tem um c olspan="2" Clula normal Do mesmo modo, Clula Normal Outra c lula normal Outra c lulaEsta clula tem rowspan="2", por isso tem fundida a c lula abaixo.A c lula expandir para baixo fundindo- se c om a c lula inferior. O resto dos atributos apresentados apresenta uma utilidade e um uso bastante bvio. Por isso, os deixamos a sua prpria investiga o.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comTabelas em HTML. Atributos da tabela e concluso.Alm dos atributos espec fic os de c ada clula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a prpria etiqueta . A seguir, mostramos aqueles que nos podem parec er princ ipio mais importantes: align Alinha horizontalmente a tabela em relao ao seu entorno.background Permite-nos colocar um fundo para a tabela desde um link a uma imagem. bgcolor border D c or de fundo tabela. Define o nmero de pixels da borda principal.bordercolor Define a c or da borda. cellpadding Define, em pixels, o espa o entre as bordas da c lula e o contedo da mesma. cellspacing Define o espao entre as bordas (em pixels). height width Define a altura da tabela em pixels ou porcentagem. Define a largura da tabela em pixels ou porcentagem.Os atributos que definem as dimenses, height e width, func ionam de uma maneira anloga ao das clulas, tal c omo vimos no c aptulo anterior. Contrariamente, o atributo align no nos permite justific ar o texto de c ada una das c lulas que compem a tabela, mas sim que permite, justificar a prpria tabela em rela o ao seu entorno. Vamos c oloc ar trs exemplos de alinhamento de tabelas, c entralizadas, alinhadas direita e esquerda.Esta tabela est centralizadawww.criarweb.com/manuais/2/print.php37/8311/10/2010Manual de HTML - Manual completoExemplo de tabela centralizadaEsta tabela est centralizada (aling="center"). Tem somente uma clula.Este seria um texto qualquer colocado ao lado de uma tabela centralizada. Para que seja visto o efeito de alinhamento da Esta tabela est alinhada direita (aling="right"). Tem somente uma clula.Exemplo de tabela devemos colocar um texto ao lado e o texto tabela alinhada ir rodear a tabela, assim como ocorreria como as imagens alinhadas a um lado. direita Exemplo de tabela alinhada esquerdaEsta tabela est alinhada esquerda (aling="left"). Tem somente uma clula.Para que seja visto o efeito de alinhamento da tabela, devemos colocar um texto ao lado e o texto ir rodear a tabela, assim como ocorreria com as imagens alinhadas a um lado.Os atributos cellpading e c ellspac ing ajudaro a dar a nossa tabela um aspec to mais esttico. princ pio pode nos parec er um pouc o c onfuso seu uso mas c om um pouco de prtic a j ser sufic iente para saber utiliz-los. Na seguinte imagem podemos ver graficamente o significado destes atributos:Voc mesmo pode comprovar que os atributos definidos para uma c lula tm prioridade em rela o aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela c om a c or de fundo vermelha e uma das clulas c om a c or de fundo verde. E assim, toda a tabela ser vista de c or vermelha manos a c lula verde. Da mesma forma, podemos definir uma c or azul para as bordas da tabela e fazer com que uma c lula particular seja mostrada c om uma borda vermelha. (Apesar de que isto no funcionar em todos os navegadores devido ao fato de alguns no reconhec erem o atributo bordercolor.) Tabela de cor O atributo bgc olor da vermelha de tabela est em vermelho. fundo Clula normal Esta clula est em verde. Tem o atributo bgcolor na c or verdeTabelas aninhadas O uso de tabelas aninhadas tambm muito til. Da mesma forma que podamos inc luir listas dentro de outras listas, as tabelas podem ser inc ludas dentro de outras. Assim, podemos incluir uma tabela dentro da c lula de outra. A forma de func ionamento c ontinua sendo o mesmo apesar de que a situao pode se c omplicar se o nmero de tabelas inc ludas dentro de outras for elevado. Vamos ver um cdigo de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o cdigo, pois assim c onseguiremos entend-lo melhor.Clula da tabela princ ipalTabela aninhada, clula 1 Tabela aninhada, c lula 2 Tabela aninhada, clula 3 Tabela aninhada, c lula 4Este seria o cdigo:www.criarweb.com/manuais/2/print.php 38/8311/10/2010Manual de HTML - Manual completo Clula da tabela principal Tabela aninhada, clula 1 Tabela aninhada, clula 2 Tabela unida, c lula 3 Tabela aninhada, clula 4 Exemplos prticos Estas so as informaes que pretendamos transmitir- lhes sobre as tabelas em HTML. Agora seria importante fazer algum exemplo de realiza o de uma tabela um pouco mais complexa. Por exemplo, a seguinte: Animais em perigo de extino Nome Baleia Urso Pardo Linc e Tigre Cabe as Previso 2010 Previso 2020 6000 50 10 300 4000 0 210 1500Outro exemplo de tabela com a qual podemos praticar: Climas de Amrica do Sul Norte da Venezuela Amric a de Sul. Colmbia Pases como: Equador Per Sul da Amrica do Sul. Pases como: Argentina Chile Uruguai Paraguai Climas martimos c om veres secos, com invernos sec os, c limas frios, c lima de estepe, clima desrtic o.Floresta tropic al, c lima de savana, c lima martimo com invernos sec os.Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.comwww.criarweb.com/manuais/2/print.php39/8311/10/2010Manual de HTML - Manual completoFormulrios HTMLAt agora vimos a forma na qual o HTML providencia e mostra a informa o, essenc ialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar informa es c om nosso visitante. Desde ento, este novo aspec to primordial para a grande quantidade de a es que se podem realizar mediante o Web: Comprara um artigo, preencher uma enquete, enviar um c omentrio ao autor... Vimos anteriormente que poderamos, mediante os links, entrar em contato diretamente c om um c orreio eletrnic o. Entretanto, esta op o pode ser em alguns casos pouco verstil se o que desejamos que o navegante nos envie uma informao bem prec isa. atravs dele, o HTML que propem outra solu o muito mais ampla: Os formulrios. Os formulrios so estas famosas c aixas de texto e botes que podemos enc ontrar em muitas pginas web. So muito utilizados para realizar busc ar ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcios eletrnic o. Os dados que o usurio introduz nestes c ampos so enviados ao c orreio eletrnic o do administrador do formulrio ou tambm, em um programa que se encarrega de proc ess-lo automatic amente. Usando HTML podemos unicamente enviar o formulrio a um c orreio eletrnic o. Se quisermos proc essar o formulrio mediante um programa, a coisa pode ser um pouco mais c omplexa, j que teremos que empregar outras linguagens mais sofistic adas. Neste caso, a solu o mais simples utilizar os programas pr-desenhados que nos propem um grande nmero de servidores de hospedagem e que nos permitem armazenar e proc essar os dados em forma de arquivo ou outros formatos. Se sua pgina es ta hospedada em um servidor que no lhe propem estes tipos de vantagens, voc sempre poder recorrer a servidores de terceiros que oferec em este ou outros tipos de servios gratuitos para webs. c laro que tambm existe outra alternativa que a de aprender linguagens como ASP ou PHP que nos permitir, entre outras c oisas, o tratamento de formulrios. Os formulrios so definidos por meio das etiquetas e . Entre estas duas etiqueta