Manual Completo HTML
Transcript of Manual Completo HTML
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected], 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: [email protected] 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:
[email protected] 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:
[email protected] 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: [email protected] 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: [email protected] 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; Â ; &Ec irc; &Ic irc;
&Oc irc ; 19/83www.criarweb.com/manuais/2/print.php11/10/2010
Manual ; &Oc irc de HTML - Manual completo Û ; &ac
irc; &ec irc; î ; &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: [email protected] 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:
[email protected] 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:
[email protected] 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: [email protected] 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: [email protected] 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
[email protected] 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:
[email protected] 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:
[email protected]/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: [email protected]
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: [email protected]
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: [email protected] 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:
[email protected] 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: [email protected] 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:
[email protected]/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